/* ==========================================================================
     NEITHER brand face is declared here. Both are variable fonts held in JS
     consts and injected at startup, so a single copy of each base64 serves the
     interface, the preview and every exported SVG.

     Declaring them in this block as well writes the whole face into the file a
     SECOND time — which is exactly what happened when Mono was added, and it
     put half a megabyte back on the page for nothing.
     ========================================================================== */

  /* ==========================================================================
     TOOL INTERFACE TOKENS — restyle the tool by editing this block only.
     Matches the CIO Memo Image Generator: committed single dark theme,
     near-black ground, hairline borders, square corners, mono for eyebrow /
     section labels / metrics, sans for field text and body.

     No light variant and no prefers-color-scheme block, by choice — but every
     colour is painted explicitly so the page holds on any host background.

     Selection reads as BRIGHTER, not GREEN: an active choice is signalled by
     border and ink weight. Green survives only as the focus ring.

     None of this touches chart output. Chart colour lives in the render core's
     PALETTE and STRUCT, ported from the Figma design system.
     ========================================================================== */
  :root {
    color-scheme: dark;

    --ui-bg:            #0B0C0D;
    --ui-panel:         #121415;
    --ui-field:         #17191A;
    --ui-field-hi:      #1F2223;

    --ui-ink:           #F1F3F5;
    --ui-ink-mid:       #9BA1A6;
    --ui-ink-low:       #697177;

    --ui-border:        #26292B;
    --ui-border-mid:    #313538;
    --ui-border-strong: #4C5155;

    --ui-accent:        #39DB80;
    --ui-btn-bg:        #D7DBDF;
    --ui-btn-bg-hover:  #E6E8EB;
    --ui-btn-ink:       #151718;
    --ui-warn:          #FF9592;
    --ui-warn-bg:       #2A1315;

    --ui-panel-w:       550px;

    /* ---- motion ----------------------------------------------------------
       The frequency test does most of the work here. This is a dense tool
       someone sits in: the preview redraws on every keystroke and must never
       animate, hover happens tens of times a minute so it is reduced to a
       colour change, and press is the one moment the interface has to prove it
       heard you.

       The built-in CSS curves are too weak to read at these durations. */
    --ease-out:         cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out:      cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen movement */
    --t-press:          140ms;   /* press feedback: 100-160ms */
    --t-hover:           90ms;   /* deliberately below the usual floor */
    --t-enter:          160ms;   /* a warning arriving */
    --ui-gap:           26px;
    --ui-font:          "PP Neue Montreal", system-ui, -apple-system, sans-serif;
    --ui-mono:          "PP Neue Montreal Mono", ui-monospace, "SF Mono", Menlo, monospace;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ui-bg);
    color: var(--ui-ink);
    font-family: var(--ui-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .app {
    position: relative;   /* the zoom cluster pins to this, not to the scrolling stage */
    display: grid;
    grid-template-columns: var(--ui-panel-w) minmax(0, 1fr);
    min-height: 100vh;
  }
  @media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .panel { border-right: none; border-bottom: 1px solid var(--ui-border); max-height: none; }
  }

  /* ---------- left panel ---------- */

  .panel {
    background: var(--ui-panel);
    /* 40 top / 60 right / 60 bottom / 40 left — the asymmetry is drawn, not tidy.
       The hairline is back too; it was absent in the previous Paper pass. */
    padding: 40px 60px 60px 40px;
    border-right: 1px solid var(--ui-border);
    display: flex;
    flex-direction: column;
    gap: var(--ui-gap);
    overflow-y: auto;
    max-height: 100vh;
  }

  .eyebrow {
    margin: 0 0 10px;
    font-family: var(--ui-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ui-ink-low);
  }
  .brand h1 {
    margin: 0;
    font-family: var(--ui-mono);
    font-size: 25px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ui-ink);
  }
  .brand p {
    margin: 9px 0 0;
    font-size: 13px;
    color: var(--ui-ink-mid);
  }

  fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }

  .lbl {
    position: relative;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-family: var(--ui-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ui-ink-mid);
    font-weight: 500;
  }

  input[type="text"], select, textarea {
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    color: var(--ui-ink);
    background: var(--ui-field);
    border: 1px solid var(--ui-border-mid);
    border-radius: 0;
    padding: 11px 12px;
    width: 100%;
    /* Never `all` — name the properties, or a layout change animates too. */
    transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
  }
  select { appearance: none; cursor: pointer; }
  textarea {
    font-family: var(--ui-mono);
    font-size: 11.5px;
    line-height: 1.55;
    min-height: 132px;
    resize: vertical;
    white-space: pre;
    overflow-x: auto;
  }
  :focus-visible { outline: 1px solid var(--ui-accent); outline-offset: 1px; }

  ::placeholder { color: var(--ui-ink-low); }

  /* ---------- segmented controls ---------- */

  .seg { display: flex; flex-wrap: wrap; gap: 6px; }
  .seg button {
    flex: 1 1 46%;
    font-family: inherit;
    font-weight: 500;
    font-size: 13px;
    color: var(--ui-ink-mid);
    background: var(--ui-field);
    border: 1px solid var(--ui-border);
    border-radius: 0;
    padding: 10px 6px;
    cursor: pointer;
    transition: transform var(--t-press) var(--ease-out),
                border-color var(--t-hover) ease,
                background-color var(--t-hover) ease,
                color var(--t-hover) ease;
  }
  .seg button:active { transform: scale(0.97); }
  .seg button[aria-pressed="true"] {
    background: var(--ui-field-hi);
    border-color: var(--ui-border-strong);
    color: var(--ui-ink);
  }

  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

  .hint {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ui-ink-low);
  }
  .hint code {
    font-family: var(--ui-mono);
    font-size: 11px;
    color: var(--ui-ink-mid);
  }

  .check {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 13px; color: var(--ui-ink-mid); cursor: pointer;
  }
  .check input { accent-color: var(--ui-accent); margin-top: 3px; }

  .readout {
    font-family: var(--ui-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ui-ink-low);
  }
  .readout.bad {
    color: var(--ui-warn);
    background: var(--ui-warn-bg);
    border: 1px solid var(--ui-warn);
    padding: 11px 13px;
    letter-spacing: 0;
    font-family: var(--ui-font);
    font-size: 12.5px;
  }

  .hr { height: 1px; background: var(--ui-border); }

  /* ---------- actions ---------- */

  .primary {
    font-family: inherit; font-weight: 500; font-size: 15px;
    background: var(--ui-btn-bg); color: var(--ui-btn-ink);
    border: 0; border-radius: 0;
    padding: 15px; cursor: pointer; width: 100%;
    transition: transform var(--t-press) var(--ease-out),
                background-color var(--t-hover) ease,
                opacity var(--t-hover) ease;
  }
  .primary:active { transform: scale(0.97); }
  /* The PNG button disables itself while rasterising. Without a visible change
     the press reads as ignored — the one moment the tool is slow enough to
     need saying so. */
  .primary:disabled { opacity: 0.6; cursor: default; }
  .primary:disabled:active { transform: none; }

  .secondary-row { display: flex; gap: 6px; }
  .secondary-row button {
    flex: 1;
    font-family: inherit; font-weight: 500; font-size: 13px;
    color: var(--ui-ink-mid); background: var(--ui-field);
    border: 1px solid var(--ui-border); border-radius: 0;
    padding: 10px 6px; cursor: pointer;
    transition: transform var(--t-press) var(--ease-out),
                border-color var(--t-hover) ease,
                color var(--t-hover) ease;
  }
  .secondary-row button:active { transform: scale(0.97); }

  /* ---------- glider ----------
     A segmented control whose highlight slides between cells. It earns the
     animation where the chart-type segments did not: this is one row of equal
     cells, so the thumb is a fixed width and only ever TRANSLATES — no width or
     layout is animated, and the movement is on-screen rather than entering, so
     it takes ease-in-out rather than ease-out. */
  .glider {
    position: relative;
    display: flex;
    background: var(--ui-field);
    border: 1px solid var(--ui-border-mid);
  }
  .glider .glide {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: var(--ui-field-hi);
    border: 1px solid var(--ui-border-strong);
    pointer-events: none;
    transition: transform 200ms var(--ease-in-out);
  }
  .glider button {
    position: relative; z-index: 1; flex: 1 1 0;
    display: flex; align-items: center; justify-content: center; min-width: 0; height: 40px; line-height: 1; text-align: center;
    font-family: inherit; font-weight: 500; font-size: 13px;
    color: var(--ui-ink-mid);
    background: transparent; border: 0; border-radius: 0;
    padding: 10px 0; cursor: pointer;
    transition: transform var(--t-press) var(--ease-out), color var(--t-hover) ease;
  }
  .glider button[aria-checked="true"] { color: var(--ui-ink); }
  .glider button:active { transform: scale(0.97); }

  /* ---------- info affordance ----------
     The hint paragraphs came out of the panel in the 11 Sep Paper pass. The
     guidance they carried did not go with them — it moved here, one press-width
     away, so the panel reads clean and the explanation is still a hover apart.

     The mark is Audrey's, drawn on the canvas 11 Sep: a circle with a serif "i"
     — dot above, stem with a small flag at its top left. It is the one round
     thing in an interface that is otherwise square on purpose, which is what
     makes it read as an annotation rather than a control. The circle is in the
     SVG, so the button itself carries no border. */
  .info {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; padding: 0;
    color: var(--ui-ink-low);
    background: transparent; border: 0; border-radius: 0;
    cursor: help;
    transition: color var(--t-hover) ease;
  }
  .info svg { display: block; width: 100%; height: 100%; }

  .tip {
    text-align: left;
    position: absolute; top: calc(100% + 7px); left: 0; z-index: 5;
    width: max-content; max-width: 300px;
    font-family: var(--ui-font); font-size: 12.5px; line-height: 1.5;
    text-transform: none; letter-spacing: 0;
    color: var(--ui-ink-mid);
    background: var(--ui-field); border: 1px solid var(--ui-border-strong);
    padding: 9px 11px;
    pointer-events: none;
    opacity: 0;
    /* Never from scale(0) — nothing in the world appears from nothing. It also
       drops FROM the label, so the origin is the trigger, not the centre. */
    transform: scale(0.97) translateY(-2px);
    transform-origin: top left;
    /* Delay lives on the shown state, so it waits to appear and leaves at once. */
    transition: opacity 125ms var(--ease-out), transform 125ms var(--ease-out);
  }
  .info:hover .tip, .info:focus-visible .tip {
    opacity: 1; transform: none;
    transition-delay: 400ms;
  }
  /* Once one tip is open the next is instant — the delay exists to stop
     accidental activation, and that job is already done. */
  body[data-tips-warm] .info:hover .tip,
  body[data-tips-warm] .info:focus-visible .tip {
    transition-delay: 0ms; transition-duration: 0ms;
  }

  /* A touch device fires hover on tap, so an ungated hover state sticks after
     the finger lifts and reads as a stuck selection. */
  @media (hover: hover) and (pointer: fine) {
    input:hover, textarea:hover, select:hover { border-color: var(--ui-border-strong); }
    .seg button:hover { border-color: var(--ui-border-mid); color: var(--ui-ink); }
    .primary:hover:not(:disabled) { background: var(--ui-btn-bg-hover); }
    .secondary-row button:hover { border-color: var(--ui-border-mid); color: var(--ui-ink); }
    .info:hover { color: var(--ui-ink); }
    .zoom button:hover { border-color: var(--ui-border-mid); color: var(--ui-ink); }
    .glider button:hover { color: var(--ui-ink); }
  }

  /* Fewer and gentler, not none. The colour transitions aid comprehension and
     stay; only the movement goes. */
  @media (prefers-reduced-motion: reduce) {
    .primary:active, .seg button:active, .secondary-row button:active,
    .zoom button:active, .glider button:active { transform: none; }
    .glider .glide { transition: none; }
    .warn { transition: none; }
    .tip { transform: none; }
  }

  /* ---------- right stage ---------- */

  /* max-height matters, and it is not decoration. Without it the grid row grows
     to fit the preview, the preview is then sized from the row, and the fit
     calculation has no real ceiling — a 1500-tall asset reports a 1478 stage
     inside a 913 viewport and renders off the bottom of the screen. */
  .stage {
    background: var(--ui-bg);
    padding: 40px;
    display: flex;
    /* NOT justify-content/align-items: center. Once the preview is zoomed past
       the stage, centring a flex child makes the overflow on the start side
       unreachable — you cannot scroll to the top-left of your own asset. Auto
       margins centre while it fits and give the scroll back when it does not. */
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 0;
    overflow: auto;
    max-height: 100vh;
  }
  .stage-inner { margin: auto; }
  .stage-inner { display: flex; flex-direction: column; gap: 14px; max-width: 100%; }

  /* Hairline is a box-shadow ring, not a border: a border would sit inside the
     box and shift the chart's own edge relative to the reported dimensions. */
  .paper {
    background: #FFFFFF;
    transform-origin: top left;
    box-shadow: 0 0 0 1px var(--ui-border),
                0 2px 8px rgb(0 0 0 / 50%),
                0 20px 48px rgb(0 0 0 / 32%);
  }
  .paper svg { display: block; }
  .paper-box { position: relative; }

  .meta {
    display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    font-family: var(--ui-mono); font-size: 11px; color: var(--ui-ink-low);
    letter-spacing: 0.04em;
  }

  /* Pinned to the top right rather than sitting under the preview. 40 from the
     top is the panel's top padding, so it lines up with the eyebrow across the
     divide; 40 from the right is the stage's own padding. Anchored to .app
     because .stage scrolls, and a control inside a scroller does not stay put. */
  .zoom {
    position: absolute; top: 40px; right: 40px; z-index: 3;
    display: flex; gap: 4px; align-items: center;
  }
  .zoom button {
    font-family: var(--ui-mono); font-size: 11px; letter-spacing: 0.04em;
    color: var(--ui-ink-low);
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 0;
    padding: 3px 8px; min-width: 26px; cursor: pointer;
    transition: transform var(--t-press) var(--ease-out),
                border-color var(--t-hover) ease,
                color var(--t-hover) ease;
  }
  .zoom button:active { transform: scale(0.97); }
  .zoom button[aria-pressed="true"] { color: var(--ui-ink); border-color: var(--ui-border-strong); }

  .empty {
    font-family: var(--ui-mono); font-size: 11px; letter-spacing: 0.04em;
    color: var(--ui-ink-low); text-align: center; padding: 80px 40px;
  }


  /* Rule warnings. Not decoration — every line here is a stated rule the current
     input breaks, so they sit under the preview rather than in a console. */
  .warns { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
  .warns:empty { display: none; }
  .warn {
    font-family: var(--ui-mono); font-size: 11px; line-height: 1.45;
    letter-spacing: 0.02em; color: var(--ui-warn);
    border-left: 2px solid var(--ui-warn); padding: 4px 0 4px 10px;
    /* Only transform and opacity — both skip layout and paint. */
    transition: opacity var(--t-enter) var(--ease-out),
                transform var(--t-enter) var(--ease-out);
  }
  /* A warning arriving with no transition reads as a glitch. It can only earn
     an animation because the list is now keyed: see showWarns. */
  @starting-style {
    .warn { opacity: 0; transform: translateY(-4px); }
  }
  .warn b { font-weight: 500; }


  /* Optional-element tag. Rule 0 made visible: a slot is not an instruction to
     fill it, so anything marked here stays out of the asset until it is typed. */
  .opt {
    font-family: var(--ui-mono); font-size: 9px; letter-spacing: 0.08em;
    color: var(--ui-ink-low); border: 1px solid var(--ui-border-mid);
    padding: 1px 5px; margin-left: 6px; vertical-align: 1px;
  }
  textarea.short { min-height: 56px; }

:root { --ui-panel-w:400px; }
[hidden] { display:none!important; }
body {overflow:hidden; font-weight:400;}
.app {height:calc(100dvh - 72px);min-height:0;}
.studio-top {height:72px;border-bottom:1px solid var(--ui-border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:20px;background:var(--ui-panel);}
.studio-brand {display:flex;align-items:center;gap:22px;}
.studio-brand svg {width:100px;height:auto;}
.studio-brand span {border-left:1px solid var(--ui-border-strong);padding-left:22px;font-size:16px;}
.studio-actions {display:flex;align-items:center;gap:8px;}
.studio-actions .primary {width:auto;min-width:146px;padding:10px 18px;margin:0;font-size:14px;}
.studio-btn {border:1px solid var(--ui-border-mid);background:transparent;color:var(--ui-ink);padding:9px 12px;font:inherit;cursor:pointer;line-height:1.3;border-radius:0;}
.studio-btn:hover {background:var(--ui-field-hi);border-color:var(--ui-border-strong);}
.studio-btn:disabled {opacity:.35;cursor:default;}
.studio-save {font:11px var(--ui-mono);color:var(--ui-ink-mid);margin-right:12px;}
.panel {padding:0;max-height:none;gap:0;overflow:hidden;}
.brand {padding:28px 26px 24px;}
.brand .eyebrow {font-size:10px;letter-spacing:.12em;margin:0 0 10px;color:var(--ui-ink-mid);}
.brand h1 {font-size:27px;letter-spacing:-.02em;font-weight:500;line-height:1.15;margin:0;}
.studio-intro {font-size:13px;color:var(--ui-ink-mid);margin:10px 0 0;line-height:1.5;}
.studio-tabs {display:flex;border-top:1px solid var(--ui-border);border-bottom:1px solid var(--ui-border);padding:0 20px;gap:4px;}
.studio-tabs button {flex:1;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ui-ink-mid);padding:16px 6px;font:13px var(--ui-font);cursor:pointer;}
.studio-tabs button[aria-selected=true] {color:var(--ui-ink);border-bottom-color:var(--ui-ink);}
.studio-tabs small {font:10px var(--ui-mono);color:var(--ui-ink-low);margin-right:7px;}
.studio-body {overflow:auto;flex:1;padding:26px;scrollbar-width:thin;}
.studio-section {display:flex;flex-direction:column;gap:24px;}
.studio-section fieldset {min-width:0;}
.studio-section .lbl {font-size:10px;letter-spacing:.13em;margin-bottom:10px;color:var(--ui-ink-mid);}
.studio-section textarea,.studio-section input,.studio-section select {font-size:14px;}
.studio-section textarea.short {min-height:76px;}
.studio-section .readout {font-size:11px;line-height:1.6;color:var(--ui-ink-mid);}
.studio-section .bad {color:var(--ui-warn);}
.studio-section .seg {display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.studio-section .seg button {text-align:left;display:flex;flex-direction:column;gap:7px;padding:14px;border:1px solid var(--ui-border);background:var(--ui-field);font-size:13px;}
.studio-section .seg button[aria-pressed=true] {border-color:var(--ui-ink-mid);background:var(--ui-field-hi);}
.studio-section .seg svg {width:50px;height:25px;margin-bottom:5px;}
.studio-section .seg small {font:11px var(--ui-font);color:var(--ui-ink-mid);}
.studio-note {font-size:12px;line-height:1.6;color:var(--ui-ink-mid);margin:0;}
.studio-row {display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.studio-row .studio-btn {font-size:12px;}
.studio-table-wrap {overflow:auto;max-height:315px;border:1px solid var(--ui-border-mid);scrollbar-width:thin;}
#parse:empty {display:none;}
.studio-units-field {margin-top:10px;}
.studio-table {border-collapse:collapse;min-width:100%;}
.studio-table td,.studio-table th {padding:0;border-right:1px solid var(--ui-border);border-bottom:1px solid var(--ui-border);font-weight:400;background:var(--ui-field);}
.studio-table th{background:var(--ui-field-hi);}
.studio-table-key {display:flex;align-items:stretch;width:100%;background:var(--ui-field-hi);}
.studio-table input {display:block;width:100%!important;min-width:92px;box-sizing:border-box;border:0!important;background:var(--ui-field);padding:10px 9px;font:12px var(--ui-mono);border-radius:0;}
.studio-table-key input{flex:1;min-width:92px;}
.studio-table th input {background:var(--ui-field-hi);font-family:var(--ui-font);}
.studio-table th:first-child {position:sticky;left:0;z-index:1;}
.studio-table th:first-child input {min-width:105px;}
.studio-table-remove {width:31px;min-width:31px;padding:0;border:0;background:transparent;color:var(--ui-ink-mid);font:16px var(--ui-mono);cursor:pointer;transition:opacity 125ms var(--ease-out),color var(--t-hover) ease;}
.studio-table-remove:hover {background:transparent;color:var(--ui-accent);}
.studio-table-remove:focus-visible {outline:1px solid var(--ui-accent);outline-offset:-2px;}
.studio-table-remove:disabled {opacity:.25;cursor:default;color:var(--ui-ink-low);}
@media(hover:hover) and (pointer:fine) {
  .studio-table-key .studio-table-remove {opacity:0;pointer-events:none;}
  .studio-table-key:hover .studio-table-remove,
  .studio-table-key:focus-within .studio-table-remove {opacity:1;pointer-events:auto;}
  .studio-table-key:hover .studio-table-remove:disabled,
  .studio-table-key:focus-within .studio-table-remove:disabled {opacity:.25;}
}
@media(prefers-reduced-motion:reduce) {.studio-table-remove {transition-duration:100ms;}}
.studio-table input:focus {outline:1px solid var(--ui-accent);outline-offset:-2px;box-shadow:none;}
.studio-data-modes {display:flex;gap:5px;}
.studio-data-modes button {font-size:12px;padding:7px 12px;}
.studio-data-modes [aria-pressed=true] {background:var(--ui-ink);color:var(--ui-bg);}
.studio-source-chooser{display:flex;flex-direction:column;}
.studio-source-label{padding:0 0 10px;font:10px var(--ui-mono);letter-spacing:.14em;color:var(--ui-ink-mid);}
.studio-source-option{display:flex;align-items:center;gap:12px;min-height:50px;padding:7px 10px;border:0;border-top:1px solid var(--ui-border);border-left:2px solid transparent;background:transparent;color:var(--ui-ink);text-align:left;}
.studio-source-option[aria-pressed=true]{border-left-color:var(--ui-accent);background:var(--ui-field-hi);}
.studio-source-option:hover{background:var(--ui-field);}
.studio-source-icon{width:22px;flex-shrink:0;text-align:center;font:14px var(--ui-mono);color:var(--ui-ink-mid);}
.studio-source-icon svg{width:16px;height:16px;display:block;}
.studio-source-option[aria-pressed=true] .studio-source-icon{color:var(--ui-accent);}
.studio-source-copy{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0;}
.studio-source-copy strong{font:500 14px var(--ui-font);}
.studio-source-copy small{font:11px/14px var(--ui-font);color:var(--ui-ink-mid);}
.studio-source-arrow{width:18px;flex-shrink:0;text-align:center;color:var(--ui-ink-low);font-size:16px;}
.studio-source-panel{display:flex;flex-direction:column;gap:14px;}
.studio-connected-panel{display:flex;flex-direction:column;gap:9px;padding-top:16px;border-top:1px solid var(--ui-border);}
.studio-connected-panel .lbl{margin:0;}
.studio-auto-unit{display:flex;align-items:center;justify-content:space-between;padding-top:2px;color:var(--ui-ink-mid);font-size:12px;}
.studio-auto-unit b{font:11px var(--ui-mono);color:var(--ui-ink);font-weight:400;}
.studio-auto-unit b span{color:var(--ui-accent);font-size:9px;letter-spacing:.07em;margin-left:5px;}
#data {min-height:220px;font-size:12px;white-space:pre;}
.studio-foot {padding:16px 26px;border-top:1px solid var(--ui-border);display:flex;justify-content:space-between;align-items:center;gap:10px;}
.studio-foot span {font:10px var(--ui-mono);color:var(--ui-ink-mid);}
.studio-foot button {font-size:12px;}
.stage {padding:64px 32px 32px;max-height:none;height:100%;background-image:radial-gradient(var(--ui-border) .7px,transparent .7px);background-size:12px 12px;}
.stage-inner {max-width:none;}
.preview-label {position:absolute;left:calc(var(--ui-panel-w) + 28px);top:22px;font:10px var(--ui-mono);letter-spacing:.12em;color:var(--ui-ink-mid);display:flex;gap:10px;align-items:center;}
.preview-label i {height:5px;width:5px;background:var(--ui-accent);border-radius:50%;}
.zoom {top:16px;right:24px;background:var(--ui-bg);}
.zoom button {padding:6px 10px;color:var(--ui-ink-mid);}
.meta {color:var(--ui-ink-mid);justify-content:center;font-size:10px;}
.meta #metaDims{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color var(--t-hover) ease,text-decoration-color var(--t-hover) ease;}
.meta #metaDims:hover,.meta #metaDims:focus-visible{color:var(--ui-ink);text-decoration-color:currentColor;outline:none;}
.paper .studio-plot-nav{cursor:pointer;outline:none;}
.paper .studio-plot-outline{fill:transparent;stroke:#010203;stroke-width:2;stroke-opacity:0;vector-effect:non-scaling-stroke;transition:stroke-opacity var(--t-hover) ease;}
.paper .studio-plot-nav:hover>.studio-plot-outline,.paper .studio-plot-nav:focus-visible>.studio-plot-outline{stroke-opacity:1;}
.warns {max-width:520px;}
.studio-details {border-top:1px solid var(--ui-border);padding-top:16px;}
.studio-details summary {cursor:pointer;font-size:13px;}
.studio-details>div {display:flex;flex-direction:column;gap:22px;padding-top:22px;}
.studio-status {position:fixed;bottom:22px;left:calc(50% + 120px);transform:translateX(-50%);background:var(--ui-field-hi);border:1px solid var(--ui-border-strong);padding:10px 16px;font-size:12px;z-index:30;max-width:90vw;}
.studio-tip {position:fixed;pointer-events:none;background:var(--ui-panel);border:1px solid var(--ui-border-strong);padding:12px 15px;color:var(--ui-ink);font:12px var(--ui-font);z-index:20;min-width:150px;box-shadow:0 8px 24px #0005;}
.studio-tip strong {display:block;margin-bottom:8px;font-weight:500;}
.studio-tip div {display:flex;justify-content:space-between;gap:22px;margin-top:5px;}
.studio-tip i {display:inline-block;width:7px;height:7px;margin-right:7px;}
#paper svg text {cursor:default;}
#paper .studio-edit-group {cursor:text;}
#paper .studio-edit-group:hover text,
#paper .studio-edit-group:focus-visible text {filter:drop-shadow(0 0 1px #39db8030);text-decoration:underline;text-decoration-color:#697177;}
.studio-export {position:absolute;right:24px;top:65px;width:335px;background:var(--ui-panel);border:1px solid var(--ui-border-strong);padding:24px;z-index:25;box-shadow:0 20px 50px #0008;}
.studio-export fieldset {display:flex;flex-direction:column;gap:14px;}
.studio-export .lbl {font-size:11px;}
.studio-export .check {font-size:12px;line-height:1.5;}
.studio-export .readout {overflow-wrap:anywhere;}
.studio-export .secondary-row {margin:0;}
@media(max-width:1000px) and (min-width:761px) { :root {--ui-panel-w:350px;} .studio-body {padding:22px;} .studio-save {display:none;} }
@media(max-width:760px) {body {overflow:auto;} .studio-top {padding:0 16px;height:64px;} .studio-brand {gap:12px;} .studio-brand svg {width:80px;} .studio-brand span {font-size:13px;padding-left:12px;} .studio-save {display:none;} .studio-actions {gap:4px;} .studio-actions .primary {min-width:0;padding:9px;font-size:12px;} .studio-actions .studio-btn {padding:9px;} .app {display:flex;flex-direction:column;height:auto;} .panel {order:2;overflow:visible;border-right:0;} .brand {padding:22px;} .brand h1 {font-size:24px;} .studio-body {overflow:visible;padding:22px;} .stage {order:1;height:470px;min-height:470px;padding:55px 24px 22px;} .preview-label {left:20px;top:22px;} .zoom {top:16px;right:16px;} .studio-status {left:50%;} .studio-export {right:12px;top:60px;width:min(335px,calc(100vw - 24px));} }
@media(prefers-reduced-motion:reduce) {* {scroll-behavior:auto!important;} }

.studio-tabs{padding:0;gap:0;height:54px;flex-shrink:0;border-top:0;}
.studio-tabs button{font:450 12px var(--ui-mono);letter-spacing:.05em;border-right:1px solid var(--ui-border);padding:16px 4px;}
.studio-tabs button:last-child{border-right:0;}
.studio-tabs button[aria-selected=true]{background:var(--ui-field);border-bottom-color:var(--ui-ink-mid);}
.studio-body{padding:24px 28px;min-height:0;}
.studio-section{gap:22px;}
.studio-section .seg button{height:86px;gap:12px;padding:14px;}
.studio-section .seg svg{width:24px;height:24px;margin:0;}
.studio-section .seg button small{display:none;}
.format-choices{display:flex;gap:8px;}
.format-choices button{flex:1;min-width:0;height:83px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:12px;padding:6px;border-color:var(--ui-border);color:var(--ui-ink-mid);}
.format-choices button[aria-pressed=true]{background:var(--ui-field-hi);border-color:var(--ui-ink-mid);color:var(--ui-ink);}
.studio-export-mode{display:flex;gap:8px;}
.studio-export-mode button{flex:1;height:48px;display:flex;align-items:center;justify-content:center;gap:9px;font:450 12px var(--ui-mono);letter-spacing:.05em;color:var(--ui-ink-mid);border-color:var(--ui-border);}
.studio-export-mode button[aria-pressed=true]{background:var(--ui-field-hi);border-color:var(--ui-ink-mid);border-bottom-color:var(--ui-ink-mid);color:var(--ui-ink);}
.studio-export-mode svg{width:16px;height:16px;}
.studio-export-mode button:disabled{opacity:.38;cursor:not-allowed;background:transparent;border-color:var(--ui-border);color:var(--ui-ink-low);}
.studio-video-note{font-size:12px;line-height:18px;color:var(--ui-ink-mid);margin:-6px 0 0;}
.studio-connection{display:flex;flex-direction:column;gap:10px;padding-top:22px;border-top:1px solid var(--ui-border);}
.studio-connection .lbl{margin:0;}
.studio-connection-row,.studio-asset-picker{width:100%;min-height:42px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--ui-border);background:var(--ui-field);font:14px var(--ui-font);color:var(--ui-ink);}
.studio-connection-row{border-color:var(--ui-border-strong);}
.studio-connection-name{display:flex;align-items:center;gap:9px;min-width:0;}
.studio-connection-name svg{width:16px;height:16px;color:var(--ui-ink-mid);flex-shrink:0;}
.studio-connected{font:11px var(--ui-mono);color:var(--ui-accent);letter-spacing:.04em;}
.studio-asset-picker{cursor:pointer;text-align:left;}
.studio-asset-picker:hover{border-color:var(--ui-border-strong);}
.studio-asset-picker .asset-name{display:flex;align-items:baseline;gap:9px;min-width:0;}
.studio-asset-picker .asset-ticker{font:11px var(--ui-mono);color:var(--ui-ink-mid);}
.studio-select-arrow{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ui-ink-mid);}
.studio-select-arrow svg{width:16px;height:16px;display:block;}
.studio-range-picker{display:flex;flex-direction:column;gap:7px;}
.studio-market-panel{gap:18px;padding-top:24px}
.studio-market-panel .studio-range-picker{gap:14px;padding-top:6px}
.studio-market-panel .studio-range-fields{gap:16px}
.studio-market-panel .studio-range-field{gap:10px}
.studio-market-panel input[type=date]{width:100%;min-width:0;box-sizing:border-box;height:46px;padding:10px;color:var(--ui-ink);background:var(--ui-field);border:1px solid var(--ui-border);font:12px var(--ui-mono);color-scheme:dark}
.studio-market-status{font:12px/18px var(--ui-font);color:var(--ui-ink-mid)}
.studio-range-label{font:10px var(--ui-mono);letter-spacing:.13em;color:var(--ui-ink-mid);}
.studio-range-fields{display:flex;gap:8px;}
.studio-range-field{display:flex;flex:1;flex-direction:column;gap:5px;min-width:0;}
.studio-range-field>span:first-child{font:9px var(--ui-mono);letter-spacing:.1em;color:var(--ui-ink-low);}
.studio-range-select{position:relative;display:flex;align-items:center;min-width:0;}
.studio-range-select select{height:42px;padding:0 34px 0 12px;font:12px var(--ui-mono);letter-spacing:.02em;}
.studio-range-select .studio-select-arrow{position:absolute;right:8px;pointer-events:none;}
.studio-asset-menu{display:grid;grid-template-columns:1fr;gap:1px;border:1px solid var(--ui-border);background:var(--ui-field);}
.studio-asset-menu[hidden]{display:none;}
.studio-asset-menu button{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:0;background:transparent;color:var(--ui-ink);text-align:left;font:13px var(--ui-font);}
.studio-asset-menu button:hover,.studio-asset-menu button[aria-pressed=true]{background:var(--ui-field-hi);}
.studio-asset-menu small{font:11px var(--ui-mono);color:var(--ui-ink-mid);}
.studio-connection-note{margin:0;font-size:12px;line-height:18px;color:var(--ui-ink-mid);}
.studio-details{padding-top:12px;}
.studio-details summary{font-size:12px;color:var(--ui-ink-mid);}
.toggle-field .check{display:flex;flex-direction:row-reverse;justify-content:space-between;min-height:36px;font-size:13px;}
.toggle-field input{appearance:none!important;width:30px!important;height:17px;min-width:30px;position:relative;border:1px solid var(--ui-border-strong);background:var(--ui-field-hi);padding:0!important;cursor:pointer;}
.toggle-field input:before{content:'';position:absolute;left:3px;top:3px;width:9px;height:9px;background:var(--ui-ink-low);}
.toggle-field input:checked{background:var(--ui-btn-bg);}
.toggle-field input:checked:before{left:16px;background:var(--ui-btn-ink);}
.toggle-field input:after{display:none!important;}
.stage{background-image:none;}
.paper{box-shadow:none;}
.studio-foot{height:66px;flex-shrink:0;padding:0;gap:0;display:grid;grid-template-columns:1fr;}
.studio-foot>span{padding:0 24px;}
.studio-foot>button{align-self:stretch;width:100%;height:100%;margin:0;padding:0 16px;border:0;border-left:0;border-radius:0;background:rgba(255,255,255,.035);box-shadow:none;font:450 12px var(--ui-mono);text-transform:uppercase;letter-spacing:.025em;}
.studio-foot>button:hover{background:rgba(255,255,255,.075);}
.studio-table input{width:77px!important;min-width:77px;height:40px;}
.studio-table th:first-child input{width:110px!important;}
.studio-table-wrap{max-height:360px;}
.studio-table th:first-child{background:var(--ui-field-hi);}
.studio-actions>.studio-btn{width:36px;height:36px;padding:8px;display:flex;align-items:center;justify-content:center;}
.studio-actions .primary{height:38px;}
#paper .studio-edit-group{cursor:text;}
:focus-visible{outline:1px solid var(--ui-accent);outline-offset:3px;}
@media(max-width:760px){.studio-body{min-height:400px;}.studio-brand span{display:none;}.studio-table-wrap{max-height:320px;}.studio-save{display:none;}}
@media(min-width:761px){.app{grid-template-columns:var(--ui-panel-w) minmax(0,1fr)}}

/* Occasional surfaces: spatial continuity, without moving chart data. */
.studio-export {opacity:0;transform:scale(.98);transform-origin:top right;visibility:hidden;pointer-events:none;transition:opacity var(--t-enter) var(--ease-out),transform var(--t-enter) var(--ease-out),visibility 0s var(--t-enter);}
.studio-export[data-open="true"] {opacity:1;transform:scale(1);visibility:visible;pointer-events:auto;transition-delay:0s;}
.studio-status {opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,6px);transition:opacity var(--t-enter) var(--ease-out),transform var(--t-enter) var(--ease-out),visibility 0s var(--t-enter);}
.studio-status[data-open="true"] {opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s;}
.studio-export[data-instant="true"],.studio-status[data-instant="true"] {transition:none;}
.studio-row .studio-btn {transition:transform var(--t-press) var(--ease-out),opacity 100ms var(--ease-out);}
[data-input="pointer"] .studio-row .studio-btn:active:not(:disabled) {transform:scale(.98);}
@media(prefers-reduced-motion:reduce) {
 .studio-export,.studio-export[data-open="true"] {transform:none;transition:opacity 100ms var(--ease-out),visibility 0s 100ms;}
 .studio-status,.studio-status[data-open="true"] {transform:translateX(-50%);transition:opacity 100ms var(--ease-out),visibility 0s 100ms;}
 .studio-export[data-open="true"],.studio-status[data-open="true"] {transition-delay:0s;}
 [data-input="pointer"] .studio-row .studio-btn:active:not(:disabled) {transform:none;opacity:.75;}
 .studio-export[data-instant="true"],.studio-status[data-instant="true"] {transition:none;}
}

.sidebar-divider{position:absolute;left:var(--ui-panel-w);top:0;bottom:0;width:10px;transform:translateX(-50%);z-index:10;cursor:col-resize;touch-action:none;outline:none;}
.sidebar-divider::after{content:"";position:absolute;left:4px;top:0;bottom:0;width:2px;background:transparent;}
.sidebar-divider:focus-visible::after,.sidebar-divider[data-dragging="true"]::after{background:var(--ui-ink-mid);}
@media(hover:hover) and (pointer:fine){.sidebar-divider:hover::after{background:var(--ui-ink-mid);}}
body.resizing-sidebar,body.resizing-sidebar *{cursor:col-resize!important;user-select:none!important;}
@media(max-width:760px){.sidebar-divider{display:none;}}

' + FACE_SANS + '
' + FACE_SANS + (needMono ? FACE_MONO : '') + '