/* ---- DESIGN TOKENS (from Claude Design 1c / Instrument). Change palette here. ---- */
:root{
  --bg:#EFF2F4; --fg:#10161B; --muted:#58636D; --faint:#8794A0;
  --accent:#2C7C8C; --accent-deep:#1E5A66; --accent-soft:#EAF4F5;
  --card:#FFFFFF; --border:#DEE3E6; --sand:#E4E8EA;
  --ink:#10161B; --ink-fg:#DDE3E7; --ink-line:#26313A; --ink-faint:#8794A0;
  --display:'Space Grotesk',sans-serif; --body:'Space Grotesk',sans-serif;
  --mono:ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.plc{background:repeating-linear-gradient(45deg,#E4E8EA 0 10px,#EBEEF0 10px 20px);display:flex;align-items:center;justify-content:center;color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-align:center;padding:12px}
@keyframes ync-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* live diagnostic */
.opt{border:1px solid var(--border);border-radius:3px;padding:9px 12px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:.15s;background:var(--card)}
.opt:hover{border-color:var(--accent);background:var(--accent-soft)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.opt .n{color:var(--faint);font-family:var(--mono)}.opt.sel .n{color:var(--accent)}
.ovwrap{position:fixed;inset:0;z-index:80;background:rgba(16,22,27,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:.25s}
.ovwrap.open{opacity:1;pointer-events:auto}
.ovcard{background:var(--bg);border-radius:10px;width:min(600px,100%);padding:36px 40px 32px;box-shadow:0 40px 100px rgba(0,0,0,.4);position:relative;transform:scale(.97);transition:.3s cubic-bezier(.16,1,.3,1)}
.ovwrap.open .ovcard{transform:scale(1)}
.ovcard .x{position:absolute;top:14px;right:18px;font-size:20px;color:var(--muted);cursor:pointer;font-family:var(--mono);border:none;background:none}
.ovcard .lbl{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-family:var(--mono)}
.ovcard .q{font-weight:500;font-size:22px;letter-spacing:-.01em;line-height:1.25;margin:12px 0 16px}
.ovcard .opts{display:flex;flex-direction:column;gap:7px}
.ovcard .bar{height:3px;background:var(--border);border-radius:3px;margin-top:16px;overflow:hidden}.ovcard .bar span{display:block;height:100%;background:var(--accent);transition:width .4s}
.ovcard .field{margin-top:16px;display:flex;gap:8px;border:1px solid var(--border);border-radius:3px;padding:5px 5px 5px 16px;background:var(--card)}
.ovcard .field input{flex:1;border:none;background:transparent;font-family:var(--body);font-size:15px;padding:11px 0;outline:none;color:var(--fg)}
.ovcard .go{background:var(--accent);color:#fff;border:none;border-radius:3px;padding:0 18px;font-family:var(--body);font-weight:500;cursor:pointer}
.ovcard .fine{font-size:12px;color:var(--muted);margin-top:10px;font-family:var(--mono)}
.ovcard .legend div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);font-size:13px}
.ovcard .tag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;font-family:var(--mono)}
.tag.b{background:#F0DCD4;color:#9A3B22}.tag.g{background:#F0E7D2;color:#8A6D1F}.tag.s{background:var(--accent-soft);color:var(--accent-deep)}