:root {
  --bg: #dcd9cc; --surface: #e8e5da; --surface2: #d3d0c3; --ink: #35362f; --bright: #1c1d18; --dot: #6f7064; --globe: #3f7b8d; --globe-sea: #9fb6ba;
  --muted: #62635a; --rule: #898a7d; --up: #2f6e40; --down: #a8362c; --gold: #7a5d12;
  --st-exp: #4f7a60; --st-late: #9a8433; --st-slow: #b0733a; --st-con: #a8362c;
  --lines: rgba(53, 54, 47, 0.045); --scan: 0; --tip-bg: #35362f;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --label: "JetBrains Mono", Consolas, "Cascadia Mono", monospace;
  --code: "JetBrains Mono", Consolas, "Cascadia Mono", monospace;
}
:root { --tip-fg: #ecead9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111210; --surface: #1b1c19; --surface2: #24251f; --ink: #dedaca; --bright: #f4efdd; --dot: #b9b5a6; --globe: #6ca1b2; --globe-sea: #34525b;
    --muted: #9d9b8f; --rule: #67685f; --up: #86bd82; --down: #e07a6a; --gold: #d0a95c;
    --st-exp: #9fcfb4; --st-late: #e3cf85; --st-slow: #e8a96c; --st-con: #e07a6a;
    --lines: rgba(222, 218, 202, 0.035); --scan: 1; --tip-bg: #f4efdd; --tip-fg: #161711;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111210; --surface: #1b1c19; --surface2: #24251f; --ink: #dedaca; --bright: #f4efdd; --dot: #b9b5a6; --globe: #6ca1b2; --globe-sea: #34525b;
  --muted: #9d9b8f; --rule: #67685f; --up: #86bd82; --down: #e07a6a; --gold: #d0a95c;
  --st-exp: #9fcfb4; --st-late: #e3cf85; --st-slow: #e8a96c; --st-con: #e07a6a;
  --lines: rgba(222, 218, 202, 0.035); --scan: 1; --tip-bg: #f4efdd; --tip-fg: #161711;
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: var(--sans); font-size: 14px; line-height: 1.5; padding-inline: 16px; padding-block: 18px 28px;
  background-image: repeating-linear-gradient(0deg, transparent 0 23px, var(--lines) 23px 24px);
}
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: calc(var(--scan) * 0.3);
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.28) 3px 4px); }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
.app { max-width: 1440px; margin-inline: auto; display: grid; gap: 14px; }

/* Header */
.header { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.brand { position: relative; display: grid; grid-template-columns: auto 1px auto; align-items: center; gap: 12px; padding: 3px 14px 4px 4px; color: var(--bright); }
.brand::before, .brand::after { content: ""; position: absolute; right: 0; background: var(--rule); height: 1px; }
.brand::before { top: 0; width: 38%; } .brand::after { bottom: 0; width: 72%; }
.brand h1 { margin: 0; font: 400 clamp(1.45rem, 2.5vw, 2.15rem)/.9 var(--serif); letter-spacing: .16em; text-shadow: 1px 0 0 var(--bg), 2px 0 0 var(--rule); }
.brand i { width: 1px; height: 32px; background: var(--rule); }
.brand span { display: grid; gap: 3px; }
.brand span b { font: 700 .74rem/1 var(--code); letter-spacing: .3em; }
.brand span small { font: 600 .52rem/1.1 var(--code); letter-spacing: .13em; color: var(--muted); }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill { font: 12px var(--label); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border: 1px solid var(--rule); display: inline-flex; align-items: center; gap: 8px; }
.pill i { width: 7px; height: 7px; background: var(--up); display: inline-block; animation: pulse 2s ease-in-out infinite; }
.btn { appearance: none; background: var(--surface); border: 1px solid var(--rule); padding: 8px 12px; cursor: pointer; font: 12px var(--label); letter-spacing: .12em; text-transform: uppercase; }
.btn:hover, .btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.coords { display: flex; justify-content: space-between; gap: 6px 18px; flex-wrap: wrap; border-block: 1px solid var(--rule); padding: 6px 3px; font: 700 11.5px var(--label); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

/* Frame: split terminal */
.frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "core side" "core console"; gap: 14px; min-height: 640px; }
.frame .core { grid-area: core; }
.frame .side { grid-area: side; }
.frame .console { grid-area: console; }
.box { position: relative; border: 1px solid var(--rule); background: var(--surface); }
.box::before { content: ""; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); pointer-events: none; }
.corners { position: absolute; inset: -1px; pointer-events: none;
  background: linear-gradient(var(--bright),var(--bright)) 0 0/20px 2px no-repeat, linear-gradient(var(--bright),var(--bright)) 0 0/2px 20px no-repeat,
    linear-gradient(var(--bright),var(--bright)) 100% 0/20px 2px no-repeat, linear-gradient(var(--bright),var(--bright)) 100% 0/2px 20px no-repeat,
    linear-gradient(var(--bright),var(--bright)) 0 100%/20px 2px no-repeat, linear-gradient(var(--bright),var(--bright)) 0 100%/2px 20px no-repeat,
    linear-gradient(var(--bright),var(--bright)) 100% 100%/20px 2px no-repeat, linear-gradient(var(--bright),var(--bright)) 100% 100%/2px 20px no-repeat; }
.box-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px 10px; border-bottom: 1px solid var(--rule); font: 700 11.5px var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.menu { list-style: none; margin: 0; padding: 10px; display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu li { flex: 1 0 auto; }
.menu button { appearance: none; border: 1px solid var(--rule); background: none; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 100%; white-space: nowrap; gap: 6px; padding: 6px 8px; font: 600 11.5px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.menu button::before { content: ""; width: 6px; height: 6px; background: currentColor; opacity: .5; flex: none; }
.menu button:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.menu button[aria-current="true"] { background: var(--ink); color: var(--bg); }
.menu button[aria-current="true"]::before { opacity: 1; }
.menu-note { padding: 0 22px 16px; font: 12px var(--label); color: var(--muted); letter-spacing: .04em; margin: 0; }
.side .box-head, .menu-note { display: none; }

.core { display: grid; grid-template-rows: auto minmax(320px, 1fr) auto; }
.view { position: relative; }
.view canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.ring-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ring-labels span { position: absolute; left: 0; top: 0; font: 11px var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ring-labels span.on { color: var(--bright); }
.ring-labels span.on::before { content: "◂ "; }
.hint { position: absolute; left: 16px; bottom: 10px; font: 11px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.tip { position: absolute; z-index: 5; pointer-events: none; max-width: 260px; background: var(--tip-bg); color: var(--tip-fg); padding: 8px 10px; font: 12px/1.5 var(--code); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.tip b { display: block; font-weight: 600; }
.readout { padding: 14px 18px 18px; border-top: 1px solid var(--rule); display: grid; gap: 6px; }
.state { font: 400 24px/1.15 var(--serif); letter-spacing: .14em; color: var(--bright); text-transform: uppercase; }
.kvs { display: flex; flex-wrap: wrap; gap: 4px 20px; font: 400 12.5px/1.6 var(--code); }
.kvs span b { font: 700 11px var(--code); color: var(--muted); margin-right: 8px; text-transform: uppercase; letter-spacing: .1em; }
.dn { color: var(--down); } .upc { color: var(--up); }

/* Console */
.console { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }
.out { margin: 0; padding: 14px 18px; font: 14px/1.7 var(--code); overflow: auto; max-height: 520px; min-height: 320px; white-space: pre-wrap; word-break: break-word; color: var(--ink); }
.out .p { color: var(--gold); font-weight: 600; }
.out .m { color: var(--muted); }
.out .b { color: var(--bright); font-weight: 600; }
.out .sep { color: var(--rule); }
.out .nw { white-space: pre; }
.strip { display: inline-flex; gap: 1px; vertical-align: middle; flex-wrap: wrap; max-width: 100%; }
.strip i { width: 3px; height: 13px; display: inline-block; }
.prompt { display: flex; align-items: center; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid var(--rule); font: 14px var(--code); }
.prompt label { color: var(--gold); font-weight: 600; white-space: nowrap; }
.field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.prompt input { width: 100%; background: transparent; border: 0; outline: none; font: 14px var(--code); color: var(--bright); caret-color: transparent; padding: 0; }
.mirror { position: absolute; left: 0; top: 50%; transform: translateY(-50%); pointer-events: none; white-space: pre; font: 14px var(--code); display: flex; align-items: center; }
.mirror .txt { color: transparent; }
.mirror .await { color: var(--muted); margin-left: 10px; letter-spacing: .02em; }
.blk { display: inline-block; width: .62em; height: 1.15em; background: var(--bright); animation: throb 1.2s ease-in-out infinite; vertical-align: -0.2em; }
.out .blk { margin-left: 2px; }
.prompt:focus-within { box-shadow: inset 0 2px 0 var(--gold); }
@keyframes throb { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }

/* Chart */
.chart .box-head .seg { display: flex; gap: 6px; }
.chart .box-head .btn { padding: 5px 10px; }
.chart-body { padding: 14px 16px 16px; display: grid; gap: 10px; }
.pchart-wrap { position: relative; }
.pchart { display: block; width: 100%; height: 340px; }
.pchart text { font: 11px var(--label); letter-spacing: .06em; fill: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 12px var(--code); color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }

/* World view */
.vbtn { appearance: none; background: none; border: 1px solid var(--rule); color: var(--muted); font: 12px var(--label); letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; cursor: pointer; }
.vbtn + .vbtn { border-left: 0; }
.vbtn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.core .box-head .seg { display: flex; }
.mk-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mk { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; display: grid; gap: 1px; padding: 2px 7px 3px 7px; background: color-mix(in srgb, var(--surface) 88%, transparent); border-left: 2px solid var(--rule); font: 11px/1.35 var(--code); white-space: nowrap; transition: opacity .25s; }
.mk b { font: 700 11px var(--label); letter-spacing: .08em; color: var(--ink); }
.mk b em { margin-left: 4px; font-family: var(--code); letter-spacing: 0; }
.mk .full { display: none; gap: 1px; padding-top: 3px; margin-top: 2px; border-top: 1px solid color-mix(in srgb, var(--rule) 50%, transparent); }
.mk:hover .full { display: grid; }
.mk-layer.popped .mk:not(.sel) { opacity: .45; }
.mk .rg { color: var(--muted); font-size: 10.5px; }
.mk .rg i { font-style: normal; margin-left: 6px; }
.mk:hover, .mk.sel { z-index: 3; }
.mk span { color: var(--ink); }
.mk em { font-style: normal; font-weight: 600; }
.mk.up { border-left-color: var(--up); } .mk.up strong { color: var(--up); }
.mk.dn { border-left-color: var(--down); } .mk.dn strong { color: var(--down); }
.mk b strong { font-weight: 700; color: var(--muted); }
.mk b em { font: 400 10.5px var(--label); letter-spacing: .06em; color: var(--muted); }
.mk.closed { opacity: .72; }
.mk:hover, .mk.sel { background: var(--surface); box-shadow: 0 4px 14px rgba(0,0,0,.12); opacity: 1; }
.view canvas[hidden] { display: none; }
.quote { position: absolute; left: 0; top: 0; z-index: 6; width: 380px; max-width: calc(100% - 16px); background: var(--surface); border: 1px solid var(--rule); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.quote::before { content: ""; position: absolute; top: 14px; width: 8px; height: 8px; background: var(--surface); border: 1px solid var(--rule); transform: rotate(45deg); }
.quote.right::before { left: -5px; border-right: 0; border-top: 0; }
.quote.left::before { right: -5px; border-left: 0; border-bottom: 0; }
.quote-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; border-bottom: 1px solid var(--rule); font: 700 11px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--bright); }
.quote-head .vbtn { padding: 1px 7px; }
.quote-head .seg { display: flex; gap: 0; }
.quote-head .seg .vbtn:last-child { margin-left: 6px; border-left: 1px solid var(--rule); }
.quote-body { display: grid; }
.quote-body .tv-box { height: 260px; }
.quote-syms { display: flex; gap: 0; padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--rule) 45%, transparent); }
.quote-syms .vbtn { padding: 2px 8px; font-size: 11px; }
.quote-body .tv-credit { padding: 4px 10px 6px; font-size: 10.5px; }

.footer { display: flex; justify-content: space-between; gap: 6px 18px; flex-wrap: wrap; font: 12px var(--label); letter-spacing: .06em; color: var(--muted); }
.footer { align-items: center; }

/* User guide (footer box + modal), same pattern as the V2.1 operator */
.guide-tab { border: 1px solid var(--rule); background: var(--surface); color: var(--ink); padding: 5px 12px; cursor: pointer; font: 700 11px/1.2 var(--label); letter-spacing: .12em; white-space: nowrap; }
.guide-tab:hover, .guide-tab:focus-visible { border-color: var(--bright); background: var(--ink); color: var(--bg); outline: none; }
.guide-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(8, 9, 7, .72); backdrop-filter: blur(3px); }
.guide-modal { position: relative; display: flex; flex-direction: column; width: min(900px, calc(100vw - 32px)); height: min(820px, calc(100vh - 48px)); overflow: hidden; border: 1px solid var(--bright); background: var(--surface); box-shadow: 0 22px 80px rgba(0, 0, 0, .5); }
.guide-modal::before { content: ""; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--rule) 58%, transparent); pointer-events: none; z-index: 1; }
.guide-modal > header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex: none; padding: 17px 20px; border-bottom: 1px solid var(--rule); background: linear-gradient(110deg, var(--surface2), var(--surface)); }
.guide-modal header small { display: block; color: var(--muted); font: 700 11px/1.3 var(--label); letter-spacing: .14em; }
.guide-modal h2 { margin: 4px 0 0; color: var(--bright); font: 400 1.45rem/1.15 var(--serif); letter-spacing: .04em; }
.guide-modal header button { border: 1px solid var(--rule); background: var(--surface); color: var(--ink); padding: 8px 11px; cursor: pointer; font: 700 11.5px var(--label); letter-spacing: .07em; }
.guide-modal header button:hover, .guide-modal header button:focus-visible { border-color: var(--bright); background: var(--ink); color: var(--bg); outline: none; }
.guide-scroll { position: relative; z-index: 2; flex: 1; min-height: 0; overflow: auto; padding: 8px 40px 40px; }
.guide-doc { max-width: 740px; margin: 0 auto; color: var(--ink); font: 400 14px/1.65 var(--sans); }
.guide-doc h2 { margin: 28px 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); color: var(--bright); font: 400 1.5rem/1.2 var(--serif); letter-spacing: .04em; }
.guide-doc h2:first-child { display: none; }
.guide-doc h3 { margin: 26px 0 8px; color: var(--bright); font: 700 12.5px/1.3 var(--label); letter-spacing: .1em; text-transform: uppercase; }
.guide-doc p { margin: 8px 0 12px; }
.guide-doc ul, .guide-doc ol { margin: 8px 0 16px; padding-left: 24px; }
.guide-doc li { padding: 2px 0 2px 5px; }
.guide-doc li::marker { color: var(--gold); }
.guide-doc code { padding: 1px 4px; border: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); background: var(--bg); color: var(--bright); font: .86em/1.4 var(--code); }
.guide-doc pre { overflow: auto; padding: 14px 16px; border: 1px solid var(--rule); background: var(--bg); }
.guide-doc strong { color: var(--bright); }
@media (max-width: 720px) { .guide-scroll { padding: 4px 18px 28px; } .guide-backdrop { padding: 10px; } .guide-modal { width: 100%; height: calc(100vh - 20px); } }

.btn:focus-visible, .menu button:focus-visible, .prompt input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@keyframes pulse { 50% { opacity: .35; } }

@media (max-width: 900px) {
  .frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "core" "side" "console"; min-height: 0; }
  .side { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 4; background: var(--surface); }
  .menu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px; }
  .menu button { white-space: nowrap; }
}
@media (max-width: 720px) {
  .core { grid-template-rows: auto 320px auto; }
  .out { max-height: 440px; min-height: 260px; font-size: 12.5px; padding-inline: 12px; }
  .brand h1 { font-size: 1.35rem; } .brand i { height: 26px; } .brand span b { font-size: .62rem; } .brand span small { font-size: .44rem; }
  .state { font-size: 21px; }
  .coords span:nth-child(2) { display: none; }
  .pchart { height: 250px; }
}
@media (prefers-reduced-motion: reduce) { .pill i, .blk { animation: none; } }