}
.capsumWrite {
  background-color: #ffb;
}
label {
  white-space: nowrap;
}
label[for] {
  cursor: pointer;
}
.copy-button {
  display: inline-block;
  width: 14px;
  height: 14px;
/*Note: .24em is slightly smaller than the average width of a normal space.*/
  margin: -2px .24em 0 0;
  padding: 0;

  color: darkred;
  background: yellow;
}
.warning {
  color: black;
  background: yellow;
}
.hidden, .initially-hidden {
  /* The framework-wide way of hiding elements is to assign them th
     .hidden class. To make them visible again, remove it. The
     !important qualifiers are unfortunate but sometimes necessary
     when hidden element has other classes which specify
     visibility-related options. The .initially-hidden class is for
     pages which need to show, e.g., a progress widget while a large
     WASM blob loads. Elements aside from that load-time widget can be
     made .initially-hidden and then have that class removed once the
     long-running startup process is done. See /pikchrshow for an
     example. */
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}
input {
  max-width: 95%;

    blob_appendf(pOut, "%s\n", zNonce);
  }
  blob_reset(&bIn);
  return isErr;
}

/*
** Legacy impl of /pikchrshow. pikchrshow_page() will delegate to
** this one if the "legacy" or "ajax" request arguments are set.
**
** A pikchr code editor and previewer, allowing users to experiment
** with pikchr code or prototype it for use in copy/pasting into forum
** posts, wiki pages, or embedded docs. This version of pikchrshow
** uses JavaScript to send pikchr code to the server for
** processing. The newer /pikchrshow applications runs pikchr on the
** client machine, without the need for back-and-forth network
** traffic.



*/
void pikchrshowcs_page(void){
  const char *zContent = 0;
  int isDark;              /* true if the current skin is "dark" */
  int pikFlags =
    PIKCHR_PROCESS_DIV
    | PIKCHR_PROCESS_SRC

** WEBPAGE: pikchrshow
**
** A pikchr code editor and previewer, allowing users to experiment
** with pikchr code or prototype it for use in copy/pasting into forum
** posts, wiki pages, or embedded docs. This version of pikchrshow
** uses WebAssembly to run entirely in the client browser, without a
** need for back-and-forth client/server traffic to perform the
** rendering. The "legacy" version of this application, which sends
** all input to the server for rendering, can be accessed by adding
** the "legacy" URL argument.
**
** It optionally accepts a p=pikchr-script-code URL parameter or POST
** value to pre-populate the editor with that code.
*/
void pikchrshow_page(void){
  const char *zContent = 0;

  if(P("legacy") || P("ajax")){
    pikchrshowcs_page();
    return;

  if(!zContent){
    zContent = "arrow right 200% \"Markdown\" \"Source\"\n"
      "box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
      "arrow right 200% \"HTML+SVG\" \"Output\"\n"
      "arrow <-> down from last box.s\n"
      "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
  }
  /* Wasm load/init progress widget... */
  CX("<div class='emscripten'>"); {
    CX("<figure id='module-spinner'>");
      CX("<div class='spinner'></div>");
      CX("<div class='center'><strong>Initializing app...</strong></div>");
      CX("<div class='center'>");
        CX("On a slow internet connection this may take a moment.  If this ");
        CX("message displays for \"a long time\", intialization may have ");
        CX("failed and the JavaScript console may contain clues as to why. ");
      CX("</div>");
      CX("<div><a href='?legacy'>Switch to legacy mode</a></div>");
    CX("</figure>");
    CX("<div class='emscripten' id='module-status'>Downloading...</div>");
    CX("<progress value='0' max='100' id='module-progress' hidden='1'>"
       "</progress>");
  } CX("</div><!-- .emscripten -->");
  /* Main view... */
  CX("<div id='view-split' class='app-view initially-hidden'>"); {
    CX("<div class='fieldset options collapsible'>"); {
      CX("<span class='legend'><span>Options</span></span>");
      CX("<div>");
      CX("<span class='labeled-input'>");
        CX("<input type='checkbox' id='opt-cb-sbs' ");
        CX("data-csstgt='#main-wrapper' ");

        CX("<a href='?legacy'>Legacy mode</a>");
      CX("</span>");
      CX("</div><!-- options wrapper -->");
    } CX("</div><!-- .fieldset -->");
    CX("<div id='main-wrapper' class=''>"); {
      CX("<div class='zone-wrapper input'>"); {
        CX("<textarea id='input'");
          CX("placeholder='Pikchr input. Ctrl-enter/shift-enter runs it.'>");
          CX("/**\n");
          CX("  Use ctrl-enter or shift-enter to execute\n");
          CX("  pikchr code. If only a subset is currently\n");
          CX("  selected, only that part is evaluated.\n*/\n");
        CX("%s</textarea>",zContent/*safe-for-%s*/);
        CX("<div class='button-bar'>");
          CX("<button id='btn-render'>Render</button>");

  display: flex;
  flex-direction: column-reverse;
  flex: 1 1 auto;
  margin: 0.5em 0;
  overflow: hidden;
}
#main-wrapper.side-by-side {
  flex-direction: row;
}
#main-wrapper.swapio {
  flex-direction: column;
}
#main-wrapper.side-by-side.swapio {
  flex-direction: row-reverse;
}
#main-wrapper .splitter-handle {
  border: 1px outset;
  border-radius: 0.25em;
}
#main-wrapper.side-by-side .splitter-handle {
  width: 2px;

  align-items: stretch;
  flex: 1 1 auto;
}
#pikchr-output-wrapper.text > #pikchr-output > textarea {
  flex: 1 1 auto;
}
.zone-wrapper textarea {
  flex: 1 1 auto;
}
.zone-wrapper.input {
  min-height: 10em;
  /*width: 50%;*/
  min-width: 20em;
}
.zone-wrapper.output {
  overflow: auto;
  justify-content: space-between;
}
.button-bar {
  display: flex;
  justify-content: center;
  flex: 0 1 auto;
  flex-wrap: wrap;
}
.button-bar button {
  margin: 0.25em 1em;
}













/* Safari supports neither styling of nor event handling on a
   fieldset legend, so we emulate a fieldset-like widget. */
.fieldset {
  border-radius: 0.5em;
  border: 1px inset;
  border-top: none;
  display: flex;
  flex-direction: column;
}

  border-radius: 0.25em;
  white-space: nowrap;
  background: #0002;
  display: flex;
  align-items: center;
}
span.labeled-input > *:nth-child(2) {
  margin-left: 0.3em;
}
.center { text-align: center; }
.app-view {
  flex: 20 1 auto;
}
#titlebar {
  display: flex;