:root {
      --bg: #0d0d0f; --ink: #ede9df; --muted: #bcb8ae; --jade: #5aaf96; --jade-strong: #8fd0bc; --sand: #d9c8a0;

      --bar-h: 86px;
    }
    [data-theme="light"] { --bg: #f4f1ea; --ink: #1c1c1e; --muted: #5f5c55;
                           --jade: #21694a; --jade-strong: #1c5f45; --sand: #83642a; }
    html, body { margin: 0; background: var(--bg); color: var(--ink); }
    body { font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.6; }
    #bg-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; }

    .page { position: relative; z-index: 5; }
    #topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex;
              justify-content: space-between; align-items: center; padding: 15px 24px;
              min-height: var(--bar-h); box-sizing: border-box;
              background: color-mix(in srgb, var(--bg) 84%, transparent);
              -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
              border-bottom: 1px solid color-mix(in srgb, var(--jade) 14%, transparent); }
    #brand { font-family: 'EB Garamond', Georgia, serif; font-size: 34px; color: var(--ink); text-decoration: none; }
    #brand .slash { color: var(--jade); font-style: italic; font-size: 0.74em; position: relative; top: -0.075em;
                    margin-left: 0.04em; margin-right: 0.05em; }

    #brand .br { color: transparent; font-size: 0.62em; position: relative; top: -0.1em; }
    #menu { display: flex; align-items: center; gap: 28px; }
    #menu a { font-family: Geist, Inter, system-ui, sans-serif; font-size: 16px; font-weight: 500;
              letter-spacing: 0.005em; color: var(--muted); text-decoration: none;
              -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    #menu a:hover { color: var(--jade); }
    .theme-btn { background: none; border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
                 color: var(--muted); border-radius: 99px; padding: 3px 10px; font: 10px Inter, sans-serif; cursor: pointer; }
    .theme-btn svg { display: block; width: 15px; height: 15px; }
    .theme-btn:hover { color: var(--jade); }

    #brand, #menu a, .theme-btn { position: relative; }
    #brand::after, #menu a::after, .theme-btn::after { content: ''; position: absolute; inset: -10px -8px; }
    a { color: var(--jade); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 3px; }
    a:hover { text-decoration: underline; }
    ul { list-style: none; padding: 0; margin: 0; }
    button:focus-visible, a:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; border-radius: 2px; }
    ::selection { background: color-mix(in srgb, var(--jade) 35%, var(--bg)); }

    #stage-root { position: fixed; inset: 0; z-index: 4; pointer-events: none; }

    #ghost { position: fixed; top: var(--bar-h); right: 0; bottom: 0; left: 0; z-index: 1; overflow: auto;
             padding: 18px 20px; scrollbar-width: thin;
             font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; line-height: 1.55;
             opacity: 0.30; filter: blur(2.5px); pointer-events: none;
             transition: opacity 0.3s ease, filter 0.3s ease; }
    .gline { display: flex; width: fit-content; border-radius: 4px; padding: 0 9px 0 5px; margin: 1px 0;
             white-space: pre; color: color-mix(in srgb, var(--ink) 85%, transparent);
             transition: background 0.3s ease; }
    .gno { min-width: 26px; text-align: right; margin-right: 12px; color: #4a4e55; user-select: none; }

    .gtok-c { color: #6b6f76; font-style: italic; }
    .gtok-k { color: #5aaf96; }
    .gtok-s { color: #d9c8a0; }
    .gtok-n { color: #e0cfa6; }
    [data-theme="light"] .gtok-c { color: #8a877e; }
    [data-theme="light"] .gtok-k { color: #21694a; }
    [data-theme="light"] .gtok-s, [data-theme="light"] .gtok-n { color: #83642a; }
    #gcaret { position: sticky; display: inline-block; width: 7px; height: 12px; background: var(--jade);
              animation: caret-blink 1.1s steps(1) infinite; }
    @keyframes caret-blink { 50% { opacity: 0; } }
    .gline #gcaret { align-self: center; }

    #pill { position: fixed; bottom: 10px; right: 10px; pointer-events: auto; cursor: pointer;
            font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--muted);
            border: 1px solid color-mix(in srgb, var(--jade) 35%, transparent);
            background: color-mix(in srgb, var(--bg) 72%, transparent); border-radius: 99px; padding: 9px 14px; }

    #pill::after { content: ''; position: absolute; inset: -8px; }

    body.code-focus .page,
    body.code-focus > #topbar,
    body.code-focus main,
    .page, #topbar, main { transition: filter 0.3s ease; }

    main { position: relative; z-index: 2; }
    body.code-focus #ghost { opacity: 1; filter: none; pointer-events: auto; z-index: 3; }

    @media (prefers-reduced-motion: reduce) {
      #ghost, .gline { transition: none; }
      #gcaret { animation: none; }
      .page, #topbar, main { transition: none; }
      #editor-host .cm-line.cm-sketch-focus { transition: none; }
      #ctl-panel, #ctl-btn, .ctl-step button { transition: none; }

      #ask, #ask-panel, .ask-chip, #ctl-scope { transition: none; }
      #ask-glyph { animation: none; }
      ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    }

    #placard { position: fixed; left: 10px; bottom: 10px; pointer-events: auto; display: flex; gap: 10px;
               align-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
               color: var(--muted); text-shadow: 0 1px 6px rgba(0,0,0,0.9);
               background: color-mix(in srgb, var(--bg) 84%, transparent);
               -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
               border: 1px solid color-mix(in srgb, var(--jade) 14%, transparent);
               border-radius: 99px; padding: 5px; }
    #placard button { background: none; border: 0; cursor: pointer; font: inherit; padding: 0 2px;
                      text-shadow: inherit; position: relative; }
    /* previous / next: round buttons big enough to hit without aiming */
    #pl-prev, #pl-next { color: var(--jade-strong); width: 32px; height: 32px; flex: none;
                         display: inline-flex; align-items: center; justify-content: center; padding: 0;
                         border-radius: 50%; background: color-mix(in srgb, var(--jade) 16%, transparent);
                         border: 1px solid color-mix(in srgb, var(--jade) 32%, transparent) !important; }
    #pl-name { color: var(--ink); min-width: 6ch; text-align: center; }

    [data-theme="light"] #placard { text-shadow: 0 1px 6px rgba(244,241,234,0.85); }

    #pl-prev::after, #pl-next::after { content: ''; position: absolute; inset: -6px; }

    #editor-host { position: absolute; top: var(--bar-h); right: 0; bottom: 0; left: 0; pointer-events: auto;
                   opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
    body.editing #editor-host { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; }

    #pill, #placard, #reset-btn, #ctl-btn, #ctl-panel, #ask-wrap { z-index: 2; }

    body.editing #ghost { opacity: 0; pointer-events: none; }
    #editor-host .cm-editor { height: 100%; background: transparent; font-size: 11.5px; }
    #editor-host .cm-line { background: rgba(10,10,12,0.87); border-radius: 4px; width: fit-content; padding: 0 9px; }
    [data-theme="light"] #editor-host .cm-line { background: color-mix(in srgb, var(--bg) 85%, white 15%); }
    #editor-host .cm-gutters { background: transparent; border: 0; }

    #editor-host .cm-line.cm-sketch-focus { background: color-mix(in srgb, var(--jade) 7%, rgba(10,10,12,0.87)); transition: background 0.4s ease; }
    [data-theme="light"] #editor-host .cm-line.cm-sketch-focus { background: color-mix(in srgb, var(--jade) 10%, color-mix(in srgb, var(--bg) 85%, white 15%)); }

    #preview-frame { position: fixed; inset: 0; z-index: 3; width: 100vw; height: 100vh; border: 0; background: var(--bg); }

    body.previewing .page, body.previewing > #topbar, body.previewing main,
    body.previewing #bg-canvas { visibility: hidden; }

    #reset-btn { position: fixed; bottom: 10px; right: 167px; pointer-events: auto; display: none;
                 font: 11px 'JetBrains Mono', monospace; color: var(--sand); background: none;
                 border: 1px solid color-mix(in srgb, var(--sand) 35%, transparent); border-radius: 99px;
                 padding: 9px 14px; cursor: pointer; }

    body.editing #reset-btn, body.previewing #reset-btn, body.tuned #reset-btn { display: block; }

    #reset-btn::after { content: ''; position: absolute; inset: -8px; }

    #pill, #reset-btn, #ctl-scope, #pl-prev, #pl-next {
      transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; }
    @media (hover: hover) {
      #pill:hover { color: var(--jade-strong);
                    border-color: color-mix(in srgb, var(--jade) 62%, transparent);
                    background: color-mix(in srgb, var(--jade) 16%, color-mix(in srgb, var(--bg) 72%, transparent)); }

      #reset-btn:hover { color: var(--ink);
                         border-color: color-mix(in srgb, var(--sand) 62%, transparent);
                         background: color-mix(in srgb, var(--sand) 14%, transparent); }
      #ctl-scope:hover { color: var(--ink);
                         border-color: color-mix(in srgb, var(--muted) 62%, transparent);
                         background: color-mix(in srgb, var(--muted) 14%, transparent); }

      #pl-prev:hover, #pl-next:hover { color: var(--ink); background: color-mix(in srgb, var(--jade) 26%, transparent); }
      #ctl-btn:hover { color: var(--jade-strong);
                       border-color: color-mix(in srgb, var(--jade) 62%, transparent); }
      .ctl-step button:hover { color: var(--jade-strong);
                               background: color-mix(in srgb, var(--jade) 12%, transparent); }
    }

    #ctl-btn { position: fixed; bottom: 10px; right: 120px; pointer-events: auto; cursor: pointer;
               display: inline-flex; align-items: center; justify-content: center; padding: 8px;
               color: var(--muted);
               border: 1px solid color-mix(in srgb, var(--jade) 35%, transparent);
               background: color-mix(in srgb, var(--bg) 72%, transparent);
               -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
               border-radius: 99px;
               transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; }
    #ctl-btn svg { display: block; width: 15px; height: 15px; }

    #ctl-btn.gone { display: none; }

    #ctl-btn[aria-expanded="true"] { color: var(--jade-strong);
               border-color: color-mix(in srgb, var(--jade) 62%, transparent);
               background: color-mix(in srgb, var(--jade) 16%, color-mix(in srgb, var(--bg) 72%, transparent)); }
    #ctl-btn::after { content: ''; position: absolute; inset: -8px -5px; }

    #ctl-panel { position: fixed; right: 10px; bottom: 52px; width: 300px;
                 max-height: calc(100% - 74px); box-sizing: border-box; pointer-events: auto;
                 display: flex; flex-direction: column; padding: 12px 14px 13px;
                 background: color-mix(in srgb, var(--bg) 86%, transparent);
                 -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
                 border: 1px solid color-mix(in srgb, var(--jade) 20%, transparent);
                 border-radius: 14px; box-shadow: 0 16px 44px rgba(0,0,0,0.34);
                 opacity: 0; visibility: hidden; transform: translateY(8px);
                 transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s; }
    [data-theme="light"] #ctl-panel { box-shadow: 0 16px 44px rgba(60,55,40,0.15); }
    #ctl-panel.open { opacity: 1; visibility: visible; transform: none;
                      transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s; }
    #ctl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
                flex: none; font: 10px 'JetBrains Mono', ui-monospace, monospace;
                letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
                padding-bottom: 9px;
                border-bottom: 1px solid color-mix(in srgb, var(--muted) 16%, transparent); }

    #ctl-scope { display: none; margin-left: auto; cursor: pointer; background: none;
                 font: 9.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.06em;
                 color: var(--muted); border-radius: 99px; padding: 2px 8px; position: relative;
                 border: 1px solid color-mix(in srgb, var(--muted) 32%, transparent); }
    body.editing #ctl-scope { display: inline-block; }
    #ctl-scope::after { content: ''; position: absolute; inset: -7px -4px; }

    #ctl-panel.busy #ctl-body { opacity: 0.4; pointer-events: none; }
    body.ask-writing #ctl-panel { border-color: color-mix(in srgb, var(--jade) 55%, transparent); }
    body.ask-failed #ctl-panel { border-color: color-mix(in srgb, var(--sand) 60%, transparent); }

    #ctl-body { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; margin-top: 9px; padding-right: 3px;
                -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
                mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); }
    #ctl-body.at-end { -webkit-mask-image: none; mask-image: none; }

    .ctl-row { margin: 0 0 14px; }
    .ctl-row:last-child { margin-bottom: 2px; }
    .ctl-top { display: flex; align-items: baseline; gap: 6px; }

    .ctl-name { font: 11px 'JetBrains Mono', ui-monospace, monospace; color: var(--ink);
                letter-spacing: 0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ctl-val { font: 11.5px 'JetBrains Mono', ui-monospace, monospace; color: var(--jade-strong);
               margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
    .ctl-unit { font: 9.5px 'JetBrains Mono', ui-monospace, monospace; color: var(--muted); flex: none; }

    .ctl-aside { font: 9.5px 'JetBrains Mono', ui-monospace, monospace; color: var(--sand);
                 flex: none; white-space: nowrap; }

    .ctl-hint { font-size: 11px; line-height: 1.4; color: var(--muted); margin: 2px 0 5px;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ctl-meta { font: 9.5px 'JetBrains Mono', ui-monospace, monospace; color: var(--sand);
                margin-top: 3px; }
    .ctl-moved .ctl-name::after { content: "•"; color: var(--sand); margin-left: 5px; }

    .ctl-track { position: relative; height: 26px; }
    .ctl-authored { position: absolute; top: 9px; width: 1px; height: 8px;
                    background: color-mix(in srgb, var(--sand) 65%, transparent); pointer-events: none; }
    input[type="range"].ctl-range { -webkit-appearance: none; appearance: none; width: 100%;
                                    height: 26px; margin: 0; background: transparent; display: block;
                                    cursor: ew-resize; }
    input[type="range"].ctl-range::-webkit-slider-runnable-track { height: 2px; border-radius: 2px;
      background: linear-gradient(90deg, var(--jade) 0 calc(var(--fill, 0) * 100%),
                  color-mix(in srgb, var(--muted) 26%, transparent) calc(var(--fill, 0) * 100%)); }
    input[type="range"].ctl-range::-moz-range-track { height: 2px; border-radius: 2px;
      background: linear-gradient(90deg, var(--jade) 0 calc(var(--fill, 0) * 100%),
                  color-mix(in srgb, var(--muted) 26%, transparent) calc(var(--fill, 0) * 100%)); }
    input[type="range"].ctl-range::-webkit-slider-thumb { -webkit-appearance: none;
      width: 11px; height: 11px; margin-top: -4.5px; border-radius: 99px; background: var(--jade-strong);
      border: 1px solid color-mix(in srgb, var(--bg) 55%, transparent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--jade) 13%, transparent); }
    input[type="range"].ctl-range::-moz-range-thumb {
      width: 11px; height: 11px; border-radius: 99px; background: var(--jade-strong);
      border: 1px solid color-mix(in srgb, var(--bg) 55%, transparent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--jade) 13%, transparent); }

    .ctl-step { display: flex; align-items: stretch; height: 26px;
                border: 1px solid color-mix(in srgb, var(--muted) 26%, transparent); border-radius: 7px;
                overflow: hidden; background: color-mix(in srgb, var(--ink) 4%, transparent); }
    .ctl-step button { flex: none; width: 28px; background: none; border: 0; cursor: pointer;
                       color: var(--muted); padding: 0; position: relative;
                       font: 13px 'JetBrains Mono', ui-monospace, monospace;
                       transition: color 0.18s ease, background-color 0.18s ease; }
    .ctl-step button:first-child { border-right: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); }
    .ctl-step button:last-child { border-left: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); }
    .ctl-step input { flex: 1; min-width: 0; background: none; border: 0; text-align: center;
                      color: var(--ink); cursor: ew-resize; padding: 0 2px; position: relative;
                      font: 11.5px 'JetBrains Mono', ui-monospace, monospace;
                      font-variant-numeric: tabular-nums; }
    .ctl-fill { height: 1px; margin-top: 4px; position: relative;
                background: color-mix(in srgb, var(--muted) 22%, transparent); }
    .ctl-fill i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--jade); }

    .ctl-step button::after { content: ''; position: absolute; inset: -9px -3px; }
    .ctl-step input::after { content: ''; position: absolute; inset: -9px 0; }
    input:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; border-radius: 3px; }

    body.ctl-narrow #ctl-panel { left: 10px; right: 10px; width: auto; }

    #ask-wrap { position: fixed; bottom: 10px; right: 244px; pointer-events: auto; display: none;

                --ask-w: min(430px, calc(100vw - 440px)); }
    body.editing #ask-wrap { display: block; }

    #ask { position: relative; box-sizing: border-box; height: 34px; width: max-content;
           overflow: hidden; display: flex; align-items: center; border-radius: 99px;
           border: 1px solid color-mix(in srgb, var(--jade) 35%, transparent);
           background: color-mix(in srgb, var(--bg) 78%, transparent);
           -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
           transition: width 0.32s cubic-bezier(.4, 0, .2, 1), border-color 0.25s ease; }
    #ask:not([data-state="idle"]) { width: var(--ask-w); }
    #ask[data-state="flight"] { border-color: color-mix(in srgb, var(--jade) 65%, transparent); }
    #ask[data-state="ok"] { border-color: color-mix(in srgb, var(--jade) 55%, transparent); }

    #ask[data-state="fail"] { --ring: var(--sand);
           border-color: color-mix(in srgb, var(--sand) 68%, transparent); }
    #ask:focus-within { border-color: color-mix(in srgb, var(--ring, var(--jade)) 72%, transparent);
           box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring, var(--jade)) 15%, transparent); }

    #ask-open { display: flex; align-items: center; gap: 6px; width: 100%; height: 100%;
                padding: 0 14px; background: none; border: 0; cursor: pointer; white-space: nowrap;
                font: 11px 'JetBrains Mono', ui-monospace, monospace; color: var(--muted); }

    #ask-open .ask-ast { color: var(--jade); }
    #ask:not([data-state="idle"]) #ask-open { display: none; }
    .ask-live { display: none; align-items: center; gap: 8px; width: 100%; padding: 0 5px 0 14px; }
    #ask:not([data-state="idle"]) .ask-live { display: flex; }
    #ask-in { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink);
              padding: 0; caret-color: var(--jade);
              font: 11.5px 'JetBrains Mono', ui-monospace, monospace; }
    #ask-in::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
    #ask-in:focus-visible { outline: none; }
    .ask-status { display: none; flex: 1; min-width: 0; align-items: center; gap: 7px;
                  font: 11px 'JetBrains Mono', ui-monospace, monospace; color: var(--muted); }
    #ask.show-status #ask-in { display: none; }
    #ask.show-status .ask-status { display: flex; }
    #ask-word { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    #ask-glyph { flex: none; width: 11px; height: 11px; display: grid; place-items: center;
                 border-radius: 99px; font-size: 8px; line-height: 1;
                 border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent); }
    #ask[data-state="flight"] #ask-glyph { border-color: var(--jade); background: var(--jade);
                 animation: ask-beat 1.1s ease-in-out infinite; }
    #ask[data-state="flight"] #ask-word { color: var(--jade-strong); }
    #ask[data-state="ok"] #ask-glyph { border-color: var(--jade); color: var(--jade-strong); }
    #ask[data-state="ok"] #ask-word { color: var(--jade-strong); }
    #ask[data-state="fail"] #ask-glyph { border-color: var(--sand); color: var(--sand); }
    #ask[data-state="fail"] #ask-word { color: var(--sand); }
    @keyframes ask-beat { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
    #ask-send { flex: none; width: 28px; height: 27px; background: none; border: 0; cursor: pointer;
                border-radius: 99px; color: var(--jade);
                font: 13px 'JetBrains Mono', ui-monospace, monospace; }

    #ask-panel { position: absolute; right: 74px; bottom: calc(100% + 6px); text-align: left;
                 box-sizing: border-box; width: calc(var(--ask-w) - 74px);
                 padding: 11px 10px 10px; border-radius: 13px;
                 background: color-mix(in srgb, var(--bg) 92%, transparent);
                 -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
                 border: 1px solid color-mix(in srgb, var(--jade) 30%, transparent);
                 opacity: 0; pointer-events: none; transform: translateY(5px);
                 transition: opacity 0.2s ease, transform 0.2s ease; }
    body.editing #ask-wrap:has(#ask:not([data-state="idle"])) #ask-panel {
                 opacity: 1; pointer-events: auto; transform: none; }

    body.editing.ask-typing:not(.ask-failed) #ask-wrap:has(#ask:not([data-state="idle"])) #ask-panel {
                 opacity: 0; pointer-events: none; transform: translateY(5px); }
    body.ask-typing.ask-failed #ask-chips,
    body.ask-typing.ask-failed #ask-label { display: none; }
    #ask-label { display: block; margin: 0 0 7px 9px; font: 12px Inter, system-ui, sans-serif;
                 color: var(--muted); }
    #ask-chips { display: flex; flex-direction: column; align-items: stretch; gap: 1px; }
    .ask-chip { display: flex; align-items: baseline; gap: 9px; width: 100%; text-align: left;
                font: 12.5px/1.35 'JetBrains Mono', ui-monospace, monospace;
                color: color-mix(in srgb, var(--ink) 88%, var(--jade));
                background: none; border: 0; border-radius: 8px; padding: 7px 9px; cursor: pointer;
                transition: color 0.16s ease, background-color 0.16s ease; }
    .ask-chip::before { content: '✳'; flex: none; font-size: 10.5px; color: var(--jade); }
    .ask-cw { flex: 1; min-width: 0; }
    .ask-cnote { flex: none; font-size: 10.5px; color: var(--muted); }

    .ask-chip.fails { margin-top: 6px; padding-top: 11px; color: var(--sand); font-size: 11.5px;
                border-top: 1px solid color-mix(in srgb, var(--muted) 16%, transparent);
                border-radius: 0 0 8px 8px; }
    .ask-chip.fails::before { color: var(--sand); }

    #ask-err { display: none; margin: 0 0 9px; padding: 0 9px 9px;
               font: 11px/1.5 'JetBrains Mono', ui-monospace, monospace; color: var(--sand);
               border-bottom: 1px solid color-mix(in srgb, var(--sand) 25%, transparent); }
    body.ask-failed #ask-err { display: block; }

    .ask-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
              clip-path: inset(50%); white-space: nowrap; border: 0; }

    body.ask-writing #editor-host::after { content: ''; position: absolute; inset: 0;
              pointer-events: none; background: repeating-linear-gradient(135deg,
                color-mix(in srgb, var(--jade) 7%, transparent) 0 2px, transparent 2px 9px); }
    @media (hover: hover) {
      #ask-open:hover { color: var(--jade-strong); }
      #ask-send:hover { background: color-mix(in srgb, var(--jade) 16%, transparent); }
      .ask-chip:hover { color: var(--jade-strong);
                background: color-mix(in srgb, var(--jade) 13%, transparent); }
      .ask-chip.fails:hover { color: var(--ink);
                background: color-mix(in srgb, var(--sand) 13%, transparent); }
    }

    main { max-width: 640px; margin: 0 auto; padding: 92px 24px 12vh; }

    body:has(main):not(.code-focus) #ghost { opacity: 0.30; }
    h1 { font-family: Newsreader, Georgia, serif; font-style: italic; font-weight: 500; font-size: 38px; margin: 0; }
    h2 { font-family: Newsreader, Georgia, serif; font-style: italic; font-weight: 400; font-size: 21px; color: var(--jade); margin: 48px 0 12px; }
    h3 { font-family: Inter, system-ui, sans-serif; font-size: 11px; font-weight: 500;
         letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
         margin: 34px 0 10px; }

    main > p { font-family: Newsreader, Georgia, serif; font-size: 16.5px; line-height: 1.65; }

    kbd { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.85em;
          padding: 1px 6px 2px; border-radius: 5px; color: var(--ink);
          border: 1px solid color-mix(in srgb, var(--jade) 38%, transparent);
          background: color-mix(in srgb, var(--jade) 8%, transparent);
          box-shadow: 0 1px 0 color-mix(in srgb, var(--jade) 20%, transparent); }
    blockquote { margin: 14px 0; padding: 2px 0 2px 16px; border-left: 2px solid color-mix(in srgb, var(--jade) 40%, transparent); color: var(--muted);
                 font-family: Newsreader, Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.6; }
    blockquote p { margin: 0; }
    blockquote cite { display: block; margin-top: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-style: normal; }
    #menu a[aria-current] { color: var(--ink); }

    @media (max-width: 700px) {

      #ghost { display: none; }
      #editor-host { background: var(--bg); }

      body.editing #placard,
      body.editing #stage-root:has(#placard) #placard { display: none; }

      body.editing #ctl-btn, body.editing #ctl-panel { display: none; }

      body.editing #ask-wrap { display: none; }

      #reset-btn { right: 96px; }

      #reset-btn, #pill { padding: 11px 9px; font-size: 10px; }

      :root { --bar-h: 67px; }
      #topbar { padding: 13px 14px 13px 18px; align-items: center; }
      #brand { line-height: 1; font-size: 30px; display: inline-flex; align-items: center;
               transform: translateY(1px); }

      #brand::after, #menu a::after, .theme-btn::after { content: ''; position: absolute; inset: -8px -4px; }
      #menu { gap: 28px; align-items: center; }
      #menu a { padding: 8px 0; font-size: 16px; line-height: 1;
                display: inline-flex; align-items: center; }
      .theme-btn { padding: 6px; display: inline-flex; align-items: center; justify-content: center; }

      #stage-root:has(#placard) #placard,
      #stage-root:has(#placard) #pill {
        width: calc(50% - 14px); box-sizing: border-box;
        height: 44px; min-height: 44px; max-height: 44px;
        padding: 0 10px; font-size: 10px; line-height: 1;
        display: flex; align-items: center; justify-content: center;
      }
      #stage-root:has(#placard) #placard { gap: 4px; }
      #stage-root:has(#placard) #placard button {
        padding: 0 4px; line-height: 1; font-size: 10px;
      }
      #stage-root:has(#placard) #pl-prev,
      #stage-root:has(#placard) #pl-next {
        width: 34px; height: 34px; padding: 0;
      }
      #stage-root:has(#placard) #placard { padding: 0 4px; justify-content: space-between; }
      #stage-root:has(#placard) #pl-name { text-align: center; }
      #stage-root:has(#placard) #pl-name {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        /* flex: 1 shrinks the name before the fixed-width ‹/› arrows get squeezed */
        flex: 1 1 0; min-width: 0;
      }
      body.editing #stage-root:has(#placard) #pill {
        width: auto; height: auto; min-height: 0; max-height: none; padding: 11px 9px;
      }

      #stage-root:has(#ctl-btn) #placard,
      #stage-root:has(#ctl-btn) #pill { width: calc(50% - 40px); }
      #ctl-btn { right: calc(50% - 22px); width: 44px; height: 44px; padding: 0; }

      /* Controls panel on mobile: cap height so animation stays visible above it, and
         reduce background opacity so motion bleeds through the panel.
         Tighter row spacing makes more controls visible without scrolling. */
      #ctl-panel {
        max-height: 55vh;
        background: color-mix(in srgb, var(--bg) 78%, transparent);
      }
      .ctl-row { margin-bottom: 10px; }
      .ctl-hint { margin-bottom: 3px; }

      #pill, #placard, #reset-btn, #ctl-btn {
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
      }
      body.ctl-narrow #ctl-panel { bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }

    }

    /* About and Work. EB Garamond for titles and quotes, Geist for text, JetBrains Mono for dates.
       Text sits in a 640px column; on wide screens dates and company marks hang in a
       160px left gutter, balanced by an empty one on the right. */
    body.subpage {
      --t-text: color-mix(in srgb, var(--ink) 90%, var(--bg));
      --t-soft: color-mix(in srgb, var(--ink) 80%, var(--bg));
      --t-meta: color-mix(in srgb, var(--muted) 82%, var(--bg));
      --t-rule: color-mix(in srgb, var(--ink) 9%, transparent);
      --t-sans: Geist, Inter, system-ui, sans-serif;
      --t-mono: 'JetBrains Mono', ui-monospace, monospace;
      --t-serif: 'EB Garamond', Georgia, serif;
      --gutter: 160px;
      font-family: var(--t-sans);
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    [data-theme="light"] body.subpage { --t-meta: var(--muted); --t-rule: color-mix(in srgb, var(--ink) 16%, transparent); }
    /* a mark can swap to its light-background version (Datadog: dark box, light dog) */
    [data-theme="light"] body.subpage .logo { -webkit-mask-image: var(--logo-light, var(--logo)); mask-image: var(--logo-light, var(--logo)); }
    body.subpage main { display: grid; grid-template-columns: minmax(0, 1fr);
                        padding: calc(var(--bar-h) + 22px) 24px 12vh; }
    body.subpage #ghost {
      -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 420px), transparent calc(50% - 360px), transparent calc(50% + 360px), #000 calc(50% + 420px));
              mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 420px), transparent calc(50% - 360px), transparent calc(50% + 360px), #000 calc(50% + 420px)); }

    body.subpage :is(h1, h2, h3) { color: var(--ink); font-style: normal; text-wrap: balance; }
    body.subpage :is(h2, h3, section)[id] { scroll-margin-top: calc(var(--bar-h) + 24px); }
    body.subpage h1 { font: 500 48px/1.05 var(--t-serif); letter-spacing: -0.01em; margin: 0 0 12px; }
    body.subpage main h2 { font: 500 30px/1.15 var(--t-serif); letter-spacing: -0.005em; margin: 72px 0 0; }
    body.subpage main h3 { font: 600 17px/1.45 var(--t-sans); letter-spacing: -0.005em;
                           text-transform: none; margin: 40px 0 0; }
    body.subpage main h2 + h3 { margin-top: 24px; }
    body.subpage main blockquote + h3 { margin-top: 16px; }

    body.subpage main p { font: 400 17px/1.6 var(--t-sans); color: var(--t-text); margin: 0; text-wrap: pretty; }
    body.subpage main > p + p { margin-top: 16px; }
    body.subpage main > h3 + p { margin-top: 8px; }
    body.subpage main > h2 + p { margin-top: 16px; }
    body.subpage main > h1 + .contact-line { margin-top: 6px; }
    body.subpage main p a { color: var(--jade); text-decoration-line: underline; text-decoration-thickness: 1px;
                            text-underline-offset: 0.18em;
                            text-decoration-color: color-mix(in srgb, var(--jade) 40%, transparent); }
    body.subpage main p a:hover { text-decoration-color: var(--jade); }
    body.subpage :is(a, button):focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; border-radius: 2px; }

    body.subpage blockquote { font: 400 21px/1.45 var(--t-serif); color: color-mix(in srgb, var(--ink) 84%, var(--bg));
                              margin: 24px 0; padding: 0 0 0 18px;
                              border-left: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); }
    body.subpage main blockquote p { font: inherit; color: inherit; }
    body.subpage blockquote cite { display: block; margin-top: 8px; font-family: var(--t-mono); font-size: 11.5px;
                                   font-style: normal; letter-spacing: 0.04em; color: var(--t-meta); }
    body.subpage kbd { font-size: 0.78em; padding: 1px 6px; border-radius: 4px;
                       border-color: color-mix(in srgb, var(--muted) 35%, transparent);
                       background: color-mix(in srgb, var(--ink) 5%, transparent); }

    /* line icons from Lucide (ISC licence); the GitHub and LinkedIn marks are their official filled logos */
    body.subpage .ico { width: 15px; height: 15px; flex: none; margin-right: 6px; vertical-align: -2px;
                        color: var(--jade); fill: none; stroke: currentColor; stroke-width: 1.8;
                        stroke-linecap: round; stroke-linejoin: round; }
    body.subpage .ico.brand { width: 14px; height: 14px; }

    body.subpage .contact-line { display: flex; flex-wrap: wrap; gap: 4px 22px;
                                 font-family: var(--t-mono); font-size: 12.5px; letter-spacing: 0.02em; }
    body.subpage .contact-line a { display: inline-flex; align-items: center;
                                   color: var(--t-soft); text-decoration: none; }
    body.subpage .contact-line a:hover { color: var(--ink); }

    /* Work: one entry per project or job */
    body.subpage main p.intro { margin-top: 12px; font-size: 16px; color: var(--t-soft); }
    /* About: a sentence in the bio introduces each group of roles; rules only between companies */
    body.subpage main .list-label { font: 400 17px/1.6 var(--t-sans); color: var(--t-text); margin: 16px 0 0; }
    body.subpage .entries + .list-label { margin-top: 20px; }
    body.subpage .list-label + .entries { margin-top: 8px; }
    body.subpage main > section + h2 { margin-top: 48px; }
    body.subpage .entries { list-style: none; margin: 44px 0 0; padding: 0; }
    body.subpage .entries > li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
    body.subpage .entries.jobs > li { padding: 11px 0; }
    body.subpage .entries.jobs .e-links { margin-top: 2px; }
    body.subpage .entries > li:first-child { padding-top: 6px; }
    body.subpage .entries > li + li { background: linear-gradient(var(--t-rule), var(--t-rule)) no-repeat 0 0 / 100% 1px; }
    body.subpage .date { font-family: var(--t-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.01em;
                         color: var(--t-meta); font-variant-numeric: tabular-nums; }
    body.subpage :is(.e-head, .e-desc, .e-links) { font-size: 17px; line-height: 1.55; }
    body.subpage .e-name { font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
    body.subpage .e-cat { color: var(--t-meta); }
    body.subpage .e-aka { font-weight: 400; color: var(--t-meta); }
    /* a note or a role wraps as a whole, never mid-phrase; a list of names can wrap anywhere */
    body.subpage :is(.e-aka, .e-cat) { white-space: nowrap; }
    body.subpage .e-cat.e-list { white-space: normal; }
    body.subpage .e-cat::before { content: '·'; margin: 0 7px; }
    body.subpage .e-desc { margin-top: 2px; color: var(--t-soft); }
    body.subpage .e-links { display: flex; flex-wrap: wrap; gap: 2px 22px; margin-top: 6px; }
    body.subpage .e-links .na { color: var(--t-meta); }
    body.subpage :is(.e-links, .more-gh, .e-head) a { display: inline-flex; align-items: center; color: var(--jade); text-decoration: none; }
    body.subpage :is(.e-links, .more-gh, .e-head) a:hover { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
    body.subpage main p.more-gh { margin: 0 0 16px; padding-top: 20px; font-size: 17px; font-weight: 500; }
    body.subpage .more-gh { border-top: 1px solid var(--t-rule); }

    /* the source editor covers the page text fully here, or the two are unreadable on top of each other */
    body.subpage #editor-host { background: color-mix(in srgb, var(--bg) 86%, transparent); }

    /* company marks: one muted colour drawn through each logo as a mask, in the left margin */
    body.subpage .logo { display: block; width: var(--logo-size, 20px); height: var(--logo-size, 20px); margin: calc(12px - var(--logo-size, 20px) / 2 + var(--logo-dy, 0px)) 0 0 auto;
                         background: color-mix(in srgb, var(--ink) 60%, var(--bg));
                         -webkit-mask: var(--logo) center / contain no-repeat;
                                 mask: var(--logo) center / contain no-repeat; }

    @media (min-width: 1100px) {
      body.subpage main { max-width: none;
        grid-template-columns: [full-start] minmax(0, 1fr) [wide-start] var(--gutter) [content-start] minmax(0, 640px)
                               [content-end] var(--gutter) [wide-end] minmax(0, 1fr) [full-end]; }
      body.subpage main > *, body.subpage main > section > * { grid-column: content; }
      body.subpage main > section { grid-column: full; display: grid; grid-template-columns: subgrid; }
      body.subpage main > section > .entries { grid-column: wide; }
      body.subpage .entries > li { grid-template-columns: var(--gutter) minmax(0, 640px) var(--gutter); }
      body.subpage .entries > li > .date { grid-area: 1 / 1; text-align: right; padding: 4px 24px 0 0; }
      body.subpage .entries > li > .date:has(.logo) { padding-top: 0; }
      body.subpage .entries > li > div { grid-area: 1 / 2; }
      body.subpage .entries > li + li { background-position: var(--gutter) 0; background-size: calc(100% - 2 * var(--gutter)) 1px; }
      body.subpage #ghost {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 600px), transparent calc(50% - 520px), transparent calc(50% + 520px), #000 calc(50% + 600px));
                mask-image: linear-gradient(to right, #000 0, #000 calc(50% - 600px), transparent calc(50% - 520px), transparent calc(50% + 520px), #000 calc(50% + 600px)); }
    }
    @media (max-width: 1099px) {
      body.subpage .entries { margin-top: 28px; }
      body.subpage .date { margin-bottom: 2px; }
      body.subpage .entries.jobs > li > .date { display: none; }
    }
    /* mid-size windows: no gutter column, but room to hang the company marks left of the text */
    @media (min-width: 800px) and (max-width: 1099px) {
      body.subpage .entries.jobs > li > .date { display: block; position: absolute; top: 11px; left: -54px; width: 30px; margin: 0; }
      body.subpage .entries.jobs > li:first-child > .date { top: 6px; }
    }
    /* phones: each mark sits at the start of its company's first line */
    @media (max-width: 799px) {
      body.subpage .entries.jobs .e-head { text-indent: 36px; }
      body.subpage .entries.jobs .e-cat { display: block; text-indent: 0; }
      body.subpage .entries.jobs .e-cat::before { content: none; }
      body.subpage .entries.jobs > li > .date { display: block; position: absolute; top: 11px; left: 0; width: 26px; margin: 0; padding: 0; }
      body.subpage .entries.jobs > li:first-child > .date { top: 6px; }
    }
    @media (max-width: 760px) {
      body.subpage h1 { font-size: 40px; }
    }

    /* Home, split: who I am on the left; the sketch fills the right of the window, edge to edge,
       and fades out toward the text, so there is no box around it. The faint code sits behind the
       sketch, clear of the text. On narrow screens the sketch is a strip above the text,
       and its corner button opens it up. */
    body.home-split {
      --frame-gap: 24px;
      --frame-w: clamp(460px, 54vw, 1100px);
      --frame-h: 100dvh;
      --frame-inset: 12px;
      --frame-fade: 24px;
    }
    body.home-split #topbar { border-bottom-color: transparent; }
    /* a heading for screen readers and search engines, not shown */
    .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    body.subpage.home-split main > p + .contact-line { margin: 12px 0 0; }
    /* the faint, blurred code fills the right of the page, behind the sketch, and stays clear of the
       text; where the text takes the full width (phones and tablets) it is left out */
    body.home-split #ghost { -webkit-mask-image: none; mask-image: none; }
    @media (max-width: 999px) {
      body.home-split #ghost { display: none; }
    }
    #frame-tog { display: none; }

    @media (min-width: 1000px) {
      body.home-split #bg-canvas {
        position: fixed; inset: auto; top: 0; right: 0; width: var(--frame-w); height: var(--frame-h);
        -webkit-mask-image: linear-gradient(to right, transparent, #000 38%);
                mask-image: linear-gradient(to right, transparent, #000 38%); }

      /* one row in the bottom-right corner, all the same height: source, controls, the switcher,
         and reset when you've changed something */
      body.home-split :is(#placard, #pill, #ctl-btn, #reset-btn) { bottom: 16px; height: 44px; box-sizing: border-box; }
      body.home-split :is(#pill, #reset-btn) { padding: 0 16px; line-height: 42px; }
      body.home-split #pill { right: var(--frame-gap); width: 108px; text-align: center; }
      body.home-split #ctl-btn { right: calc(var(--frame-gap) + 120px); width: 44px; padding: 0; }
      body.home-split #placard { left: auto; right: calc(var(--frame-gap) + 176px); width: 200px; justify-content: space-between; }
      body.home-split #pl-name { flex: 1 1 0; }
      body.home-split #reset-btn { right: calc(var(--frame-gap) + 388px); }
      body.home-split #ctl-panel { right: var(--frame-gap); bottom: 72px;
                                   max-height: calc(100dvh - var(--bar-h) - 100px); }

      /* the header lines up with the text: the logo, then a row of pages, the current one marked
         with the logo's slash, and the light/dark switch at the end of the row */
      body.subpage.home-split #topbar {
        right: auto; width: calc(100% - var(--frame-w) * 0.62); box-sizing: border-box; min-height: 0;
        padding: 24px 0 0; display: grid; justify-content: stretch; align-items: start;
        grid-template-columns: minmax(64px, 120px) minmax(0, 600px) minmax(24px, 1fr); }
      body.subpage.home-split #brand { grid-column: 2; justify-self: start; line-height: 1; margin-left: -0.32em; }
      body.subpage.home-split #menu { grid-column: 2; margin-top: 24px; gap: 24px; align-items: center; }
      body.subpage.home-split #menu a { font-size: 15px; }
      body.subpage.home-split #menu a[aria-current] { color: var(--ink); }
      body.subpage.home-split #menu a[aria-current]::before {
        content: '/'; position: absolute; right: 100%; margin-right: 3px;
        color: var(--jade); font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: 1.15em; }
      body.subpage.home-split #menu .theme-btn { margin-left: auto; }
      body.subpage.home-split main {
        display: grid; grid-template-columns: minmax(64px, 120px) minmax(0, 600px) minmax(24px, 1fr);
        margin-right: calc(var(--frame-w) * 0.62);
        padding: 136px 0 12vh 0; }
      body.home-split #ghost { top: 0; left: min(760px, 100% - var(--frame-w) * 0.62); }
      /* the open source starts below the logo and the nav */
      body.home-split #editor-host { top: 124px; }
      body.subpage.home-split main > *, body.subpage.home-split main > section > * { grid-column: 2; }
      body.subpage.home-split main > section { grid-column: 2; display: block; }
      body.subpage.home-split .entries > li { grid-template-columns: minmax(0, 1fr); }
      body.subpage.home-split .entries > li > div { grid-area: auto; }
      body.subpage.home-split .entries > li + li { background-position: 0 0; background-size: 100% 1px; }
      body.subpage.home-split .entries { margin-top: 28px; }
      body.subpage.home-split .entries.jobs > li > .date { display: block; position: absolute; top: 11px; left: -54px;
                                                           width: 30px; margin: 0; padding: 0; text-align: right; }
      body.subpage.home-split .entries.jobs > li:first-child > .date { top: 6px; }
      /* a project's date sits at the right end of its name line */
      body.subpage.home-split .entries:not(.jobs) > li > .date { position: absolute; top: 12px; right: 0; padding: 0; }
      body.subpage.home-split .entries:not(.jobs) .e-head { padding-right: 76px; }
    }

    /* while the source is open: the text steps aside so the code reads clearly; on wide screens the
       sketch stays on top of the code, blended so only the birds show and the code reads through */
    body.home-split.editing main { visibility: hidden; }
    @media (min-width: 701px) {
      body.home-split.editing #editor-host { background: transparent; }
    }
    @media (min-width: 1000px) {
      body.home-split.editing #bg-canvas { z-index: 5; pointer-events: none; mix-blend-mode: lighten; }
      [data-theme="light"] body.home-split.editing #bg-canvas { mix-blend-mode: darken; }
    }

    /* narrow screens: a short strip under the bar, then the text; the corner button opens it up,
       and only then do the switcher and buttons appear */
    @media (max-width: 999px) {
      body.home-split { --frame-h: min(18vh, 140px); }
      body.home-split:not(.frame-open) :is(#placard, #pill, #ctl-btn, #reset-btn, #ctl-panel) { display: none !important; }
      body.home-split.frame-open { --frame-h: min(74vh, 680px); }
      body.home-split #bg-canvas {
        position: relative; inset: auto; display: block; width: 100%; height: var(--frame-h);
        margin: var(--bar-h) 0 0;
        -webkit-mask-image: linear-gradient(transparent, #000 var(--frame-fade), #000 calc(100% - var(--frame-fade)), transparent);
                mask-image: linear-gradient(transparent, #000 var(--frame-fade), #000 calc(100% - var(--frame-fade)), transparent); }
      body.home-split #stage-root { position: absolute; inset: 0 0 auto 0;
                                    height: calc(var(--bar-h) + var(--frame-h)); }
      body.home-split :is(#placard, #pill, #ctl-btn, #reset-btn) { position: absolute; bottom: var(--frame-inset); }
      /* in a short frame the controls open downward, over the text */
      body.home-split #ctl-panel { position: absolute; top: calc(100% + 8px); bottom: auto; }
      body.subpage.home-split main { padding-top: 40px; }

      #frame-tog { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
                   top: calc(var(--bar-h) + var(--frame-inset)); right: calc(var(--frame-gap) + var(--frame-inset));
                   width: 36px; height: 36px; padding: 0; cursor: pointer; color: var(--muted); border-radius: 50%;
                   border: 1px solid color-mix(in srgb, var(--jade) 35%, transparent);
                   background: color-mix(in srgb, var(--bg) 72%, transparent);
                   -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
      #frame-tog::after { content: ''; position: absolute; inset: -6px; }
      #frame-tog svg { display: block; width: 15px; height: 15px; }
      body.frame-open #frame-tog .i-grow, body:not(.frame-open) #frame-tog .i-shrink { display: none; }
    }
    @media (max-width: 700px) {
      body.home-split #placard { left: calc(var(--frame-gap) + var(--frame-inset)); }
      body.home-split #pill { right: calc(var(--frame-gap) + var(--frame-inset)); }
      body.home-split #stage-root:has(#ctl-btn) :is(#placard, #pill) { width: calc(50% - 66px); }
      body.home-split #ctl-panel { left: var(--frame-gap); right: var(--frame-gap); bottom: auto; }
    }
    @media (min-width: 701px) and (max-width: 999px) {
      body.home-split #placard { left: calc(var(--frame-gap) + var(--frame-inset)); }
      body.home-split #pill { right: calc(var(--frame-gap) + var(--frame-inset)); }
      body.home-split #ctl-btn { right: calc(var(--frame-gap) + var(--frame-inset) + 110px); }
      body.home-split #reset-btn { right: calc(var(--frame-gap) + var(--frame-inset) + 157px); }
      body.home-split #ctl-panel { right: var(--frame-gap); }
    }

    /* every page on wider screens: the same light header, scrolling away with the page,
       with no band behind it and no rule under it */
    @media (min-width: 701px) {
      body.subpage #topbar {
        position: absolute; background: none; border-bottom: 0;
        -webkit-backdrop-filter: none; backdrop-filter: none; }
    }

    /* the narrowest phones: the bar's three pages and the switch still fit on one line */
    @media (max-width: 400px) {
      #menu { gap: 16px; }
      #menu a { font-size: 15px; }
      #topbar { padding-left: 14px; padding-right: 10px; }
    }