/* The Instrument — yunhan.me's design language, as one stylesheet.
   Source of truth for the tokens is Ciel's chart.html; this file carries
   the same values plus the shared components (chips, panels, corners,
   scanlines, inputs, stat tiles). Cyan is structure, gold is voice.
   Dark only. Pages that must work offline vendor a copy; the door serves
   this one at /instrument.css.                          v1 · 2026-09-04 */
:root{
  --line:rgba(140,240,255,.14);--line-strong:rgba(140,240,255,.22);--glass-border:rgba(160,240,255,.28);
  --text:#dfe6e6;--text-dim:rgba(223,230,230,.65);--text-faint:rgba(223,230,230,.34);
  --gold:#e8c98a;--gold-dim:rgba(232,201,138,.45);--gold-line:rgba(232,201,138,.16);
  --cyan:#a0f0ff;
  --serif:Georgia,"Times New Roman",serif;--mono:ui-monospace,Menlo,Consolas,monospace;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,sans-serif;
  --st-idle:#8fa8b3;--st-listening:#7adea8;--st-thinking:#e8c98a;--st-reasoning:#b89be8;--st-speaking:#a0f0ff;--st-error:#e88a8a;
  --cut6:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  --cut7:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  --cut8:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  --cut10:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  --cut12:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  /* chart series, validated against the dark surface (dataviz six checks) */
  --ch-1:#c4830f;--ch-2:#1fa3c9;--ch-3:#8f6fe6;--ch-4:#2aa860;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{min-height:100%}
body{min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(120% 85% at 50% -10%,#0b1922 0%,#050c11 55%,#030608 100%) #030608;color:var(--text);font:14.5px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer;padding:0}
input,select{font:inherit;color:inherit}
:focus-visible{outline:1px solid rgba(160,240,255,.55);outline-offset:2px}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-color:var(--gold-dim)}
.num{font-variant-numeric:tabular-nums}
@keyframes br{0%,100%{opacity:.45;transform:scale(.88)}50%{opacity:1;transform:scale(1.08)}}
@keyframes ha{0%,100%{opacity:.5}50%{opacity:.95}}

/* the projection */
#scan{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.3;background:repeating-linear-gradient(180deg,rgba(160,240,255,.05) 0 1px,transparent 1px 3px)}
.corner{position:fixed;z-index:51;width:13px;height:13px;pointer-events:none}
.corner.tl{top:10px;left:10px;border-left:1px solid rgba(232,201,138,.6);border-top:1px solid rgba(232,201,138,.6)}
.corner.tr{top:10px;right:10px;border-right:1px solid rgba(232,201,138,.6);border-top:1px solid rgba(232,201,138,.6)}
.corner.bl{bottom:10px;left:10px;border-left:1px solid rgba(232,201,138,.35);border-bottom:1px solid rgba(232,201,138,.35)}
.corner.br{bottom:10px;right:10px;border-right:1px solid rgba(232,201,138,.35);border-bottom:1px solid rgba(232,201,138,.35)}

/* header */
header{display:flex;align-items:center;gap:14px;padding:14px 28px;border-bottom:1px solid var(--line);flex:none}
.brand{display:flex;align-items:center;gap:12px}
.brand a{color:inherit;text-decoration:none;display:flex;align-items:center;gap:12px}
.wordmark{font:400 18px/1 var(--serif);letter-spacing:.24em;color:#f3efe6;text-transform:uppercase}
.aperture .c-outer{stroke:rgba(232,201,138,.35)}.aperture .c-mid{stroke:rgba(160,240,255,.5)}.aperture .c-core{fill:rgba(232,201,138,.85)}
.spacer{flex:1}
.crumb{font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
main{flex:1;width:100%;max-width:820px;margin:0 auto;padding:22px 28px 40px}
@media (max-width:600px){header{padding:12px 18px}main{padding:16px 18px 32px}}
footer{text-align:center;padding:14px 20px 22px;border-top:1px solid var(--line);font:500 9.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}

/* chips: the one shape */
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line-strong);clip-path:var(--cut8);font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;background:rgba(160,240,255,.025);text-decoration:none}
a.chip:hover,button.chip:hover{border-color:rgba(140,240,255,.45);color:var(--text);text-decoration:none}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--st-idle);flex:none}
.chip[aria-pressed="true"]{background:rgba(160,240,255,.12);border-color:rgba(160,240,255,.6);color:#c7f4fd}
.chip.gold{border-color:rgba(232,201,138,.5);color:var(--gold);background:rgba(232,201,138,.08)}
a.chip.gold:hover,button.chip.gold:hover{border-color:rgba(232,201,138,.8);background:rgba(232,201,138,.14);color:#f0dbaf}
.chip.big{font-size:12px;padding:13px 24px;letter-spacing:.24em;clip-path:var(--cut10)}
.chip.err{border-color:rgba(232,138,138,.5);color:#f3b7b7;background:rgba(232,138,138,.08)}
.chip.ok{border-color:rgba(122,222,168,.5);color:#a6ecc7;background:rgba(122,222,168,.08)}
.chip kbd{font:inherit;letter-spacing:.1em;opacity:.55}
.chip:disabled{opacity:.45;cursor:default}
kbd{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);border:1px solid var(--line-strong);padding:2px 6px 1px;clip-path:var(--cut6)}

/* panels & captions */
.panel{border:1px solid var(--line);clip-path:var(--cut12);background:linear-gradient(180deg,rgba(160,240,255,.035),rgba(160,240,255,.012));padding:16px 18px 18px}
.panel+.panel{margin-top:14px}
.cap{font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(160,214,235,.55);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.cap::after{content:"";flex:1;height:1px;background:var(--line)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.muted{color:var(--text-dim)}.faint{color:var(--text-faint)}.small{font-size:13px}
.mono{font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.err{color:var(--st-error);font-size:13px;min-height:1.3em}
.voice{font:400 18px/1.62 var(--serif);color:#f7f2e7;padding-left:18px;border-left:1px solid rgba(232,201,138,.5)}

/* inputs */
.lbl{font:500 9.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
input[type=text],input[type=password],input[type=number],select{padding:8px 10px;border:1px solid var(--line-strong);clip-path:var(--cut6);background:rgba(160,240,255,.05);font:500 13px/1.2 var(--mono);color:#eaf9fb}
input[type=number]{width:74px;text-align:center;font-variant-numeric:tabular-nums}
input:focus{outline:1px solid rgba(160,240,255,.55);outline-offset:0;border-color:rgba(160,240,255,.5)}
input[type=checkbox]{width:14px;height:14px;accent-color:var(--cyan);margin:0;cursor:pointer}
.field{display:grid;gap:5px}

/* stats & tables */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.stat{border:1px solid var(--line);clip-path:var(--cut7);padding:10px 12px;background:rgba(3,6,8,.35)}
.stat .v{font:400 24px/1.15 var(--serif);color:#f7f2e7;letter-spacing:-.01em}
.stat .l{font:500 9.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-top:3px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
th{font:600 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(160,214,235,.55)}
td.r,th.r{text-align:right}
tr:last-child td{border-bottom:0}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:60;border:1px solid rgba(232,201,138,.5);background:rgba(11,25,34,.96);color:#f0dbaf;padding:8px 14px;clip-path:var(--cut8);font:600 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}