:root{
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#f0f2f5; --border:#e2e5ea; --text:#121418; --muted:#5d6572; --faint:#8a929e;
  --accent:#ff5a5f; --accent-ink:#ffffff; --ok:#16a34a; --bad:#dc2626; --stage:#ffffff; --focus:#3b6ef5;
  --radius:12px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1014; --surface:#141920; --surface-2:#1b222b; --border:#27303b; --text:#e9edf2; --muted:#a0a9b6; --faint:#6f7884; --stage:#0f1318;
  }
}
:root[data-theme="dark"]{ --bg:#0d1014; --surface:#141920; --surface-2:#1b222b; --border:#27303b; --text:#e9edf2; --muted:#a0a9b6; --faint:#6f7884; --stage:#0f1318; }
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 var(--font);-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--focus)}
.top{display:flex;align-items:center;gap:16px;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-weight:650;letter-spacing:-.01em;font-size:18px}
.brand .mark{width:22px;height:22px;border-radius:7px;background:conic-gradient(from 200deg,#ff5a5f,#f2a20c,#1fb89a,#3b6ef5,#8e44c9,#ff5a5f)}
.brand b{color:var(--accent)}
.brand .tag{font-size:11px;font-weight:500;color:var(--faint);border:1px solid var(--border);border-radius:99px;padding:1px 7px}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.tabs button{border:0;background:none;padding:7px 11px;border-radius:8px;color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{background:var(--surface-2);color:var(--text);font-weight:600}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;padding:16px;max-width:1400px;margin:0 auto}
.viewer{min-width:0}
.stage{position:relative;background:var(--stage);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;height:min(72vh,760px);touch-action:none;user-select:none;cursor:grab}
.stage:active{cursor:grabbing}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lbl{position:absolute;left:0;top:0;transform:translate(6px,-50%);font-size:11.5px;font-weight:550;white-space:nowrap;color:var(--text);text-shadow:0 0 3px var(--stage),0 0 3px var(--stage),0 0 2px var(--stage)}
.lbl::before{content:"";position:absolute;left:-8px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--dot,#888);box-shadow:0 0 0 1.5px var(--stage)}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}
.hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(17,20,24,.72);color:#fff;font-size:12px;padding:6px 12px;border-radius:99px;pointer-events:none;transition:opacity .5s;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.hint.gone{opacity:0}
.info{position:absolute;left:12px;top:12px;max-width:min(340px,calc(100% - 24px));background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;box-shadow:0 6px 24px rgba(0,0,0,.12);font-size:13.5px}
.info h4{margin:0 0 2px;font-size:15px}
.info .meta{color:var(--faint);font-size:12px;margin-bottom:6px}
.info .acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.toast{position:absolute;right:12px;top:12px;background:var(--text);color:var(--bg);padding:7px 12px;border-radius:8px;font-size:13px}
.rot{display:flex;flex-direction:column;gap:4px;padding:10px 4px 0}
.rrow{display:flex;align-items:center;gap:10px}
.rrow>span:first-child{width:40px;font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.rrow input{flex:1;accent-color:var(--accent)}
.icon,.icon-sp{width:30px;height:30px;flex:none}
.icon{border:1px solid var(--border);background:var(--surface);border-radius:50%;cursor:pointer;font-size:11px}
.views{display:flex;gap:6px;flex-wrap:wrap;padding-top:6px}
.views button,.ghost{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:5px 10px;cursor:pointer;font-size:13px}
.ghost.small,.small{font-size:12.5px}
.primary{border:0;background:var(--accent);color:var(--accent-ink);border-radius:9px;padding:9px 14px;font-weight:600;cursor:pointer}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;max-height:calc(72vh + 150px);overflow:auto;min-width:0}
.pane h2{font-size:17px;margin:2px 0 10px}
.pane h3{font-size:14px;margin:16px 0 6px}
.row{display:flex;gap:8px;align-items:center;margin:8px 0}
.row.wrap{flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden}
.seg button{border:0;background:var(--surface);padding:6px 11px;cursor:pointer;font-size:13px}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.seg.wide{display:flex;margin:10px 0 4px}
.seg.wide button{flex:1}
.chk{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted)}
input[type=search],.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;padding:8px 10px;margin:6px 0}
.field{display:block;font-size:12.5px;color:var(--muted);margin:8px 0}
.layer{border-top:1px solid var(--border);padding:8px 0}
.layer>header{display:flex;align-items:center;gap:8px;cursor:pointer}
.layer>header h3{margin:0;font-size:14px;flex:1}
.layer>header .count{font-size:12px;color:var(--faint)}
.layer>header .car{width:18px;text-align:center;color:var(--faint);transition:transform .15s}
.layer.open>header .car{transform:rotate(90deg)}
.layer ul{list-style:none;margin:6px 0 0;padding:0;display:none}
.layer.open ul,.layer.searching ul{display:block}
.layer li{display:flex;align-items:center;gap:7px;padding:3px 2px;font-size:13.5px;border-radius:6px}
.layer li:hover{background:var(--surface-2)}
.layer li .nm{flex:1;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer li .sd{font-size:11px;color:var(--faint);width:14px;text-align:center}
.layer li input[type=color]{width:22px;height:22px;border:0;padding:0;background:none;cursor:pointer;flex:none}
.layer li.sel .nm{font-weight:650}
.layer .sub{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin:8px 0 2px}
.muted{color:var(--muted)}
.qprompt{font-size:16px;font-weight:600;margin:12px 0 8px}
.qopts{display:grid;gap:6px}
.qopts button{text-align:left;border:1px solid var(--border);background:var(--surface-2);border-radius:9px;padding:9px 11px;cursor:pointer}
.qopts button.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--surface))}
.qopts button.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
.qfeedback{margin:8px 0;font-size:13.5px}
.qfeedback b.ok{color:var(--ok)} .qfeedback b.no{color:var(--bad)}
.progress{display:flex;gap:4px;margin:12px 0 6px}
.progress div{flex:1;background:var(--surface-2);border-radius:6px;padding:5px 0;text-align:center;font-size:11.5px;color:var(--muted)}
.progress div b{display:block;font-size:15px;color:var(--text)}
.deck{border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.deck h3{margin:0 0 6px;font-size:15px}
.cardbtn{display:block;width:100%;text-align:left;border:1px solid var(--border);background:var(--surface-2);border-radius:8px;padding:8px 10px;margin:6px 0;cursor:pointer;font-size:13.5px}
.cardbtn small{display:block;color:var(--faint);font-size:11.5px}
.dv .eyebrow{font-size:11.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.07em}
.dv h3{margin:4px 0 8px;font-size:16px}
.dv p{margin:0 0 10px;font-size:14px}
.legend{margin:10px 0;display:grid;gap:6px}
.legend div{display:flex;gap:8px;font-size:13px;color:var(--muted);align-items:flex-start}
.legend i{width:12px;height:12px;border-radius:3px;flex:none;margin-top:3px}
.legend i.dot{border-radius:50%;background:#14181e;box-shadow:0 0 0 2px var(--surface)}
.caveat{font-size:12.5px;color:var(--faint);border-left:3px solid var(--border);padding-left:8px}
.cite{font-size:12px;color:var(--faint);padding-left:1.6em;text-indent:-1.6em;margin-top:10px}
.model{border:1px solid var(--border);border-radius:10px;padding:9px 11px;margin:8px 0}
.model h4{margin:0 0 2px;font-size:14px}
.model p{margin:4px 0;font-size:13px;color:var(--muted);white-space:pre-wrap}
.model .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.credits{padding-left:18px;font-size:13px;color:var(--muted)} .credits li{margin:5px 0}
[hidden]{display:none!important}
@media (max-width: 900px){
  .layout{grid-template-columns:1fr;padding:10px 16px}
  .stage{height:56vh}
  .panel{max-height:none}
  .tabs{margin-left:0;width:100%}
}