:root{--bg:#141210;--surface:#1c1a16;--surface-2:#242019;--line:#3a3327;--ink:#f2ecdd;--ink-dim:#a89f8a;--accent:#4fc7bd;--accent-ink:#0d1210;--shadow:0 14px 36px -18px rgba(0,0,0,.6)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:IBM Plex Sans,system-ui,sans-serif;padding:20px clamp(16px,3vw,32px) 32px}.wrap{max-width:1320px;margin:0 auto}header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}h1{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:clamp(26px,4vw,36px);letter-spacing:-.01em;margin:0;text-wrap:balance}header p{margin:4px 0 0;color:var(--ink-dim);font-size:13.5px;max-width:56ch}.stats{font-family:IBM Plex Mono,monospace;font-size:11px;color:var(--ink-dim);text-align:right;white-space:nowrap}.app{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}@media (max-width:900px){.app{grid-template-columns:1fr}}.viewer{position:relative;background:#0a0c0f;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/11;min-height:420px}.viewer canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.viewer canvas:active{cursor:grabbing}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0c0f;color:#cfc8b5;font-family:IBM Plex Mono,monospace;font-size:13px;z-index:5;transition:opacity .25s}.loading.hidden{opacity:0;pointer-events:none}.viewer-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;z-index:3;pointer-events:none}.viewer-top>*{pointer-events:auto}.viewbtns{display:flex;gap:4px;background:#14120e99;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:3px}.viewbtns button{appearance:none;border:none;background:transparent;color:#d8d2c2;font-family:IBM Plex Sans,sans-serif;font-size:12px;font-weight:500;padding:6px 10px;border-radius:7px;cursor:pointer}.viewbtns button:hover{background:#ffffff14}.viewbtns button.active{background:var(--accent);color:var(--accent-ink)}.toggles{display:flex;gap:8px;align-items:center}.pill{appearance:none;border:1px solid rgba(255,255,255,.12);background:#14120e99;color:#d8d2c2;font-family:IBM Plex Sans,sans-serif;font-size:12px;font-weight:500;padding:7px 12px;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px)}.pill:hover{background:#ffffff1a}.toggle{display:flex;align-items:center;gap:6px;background:#14120e99;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:5px 10px 5px 6px;color:#d8d2c2;cursor:pointer;user-select:none;font-family:IBM Plex Mono,monospace;font-size:11px}.toggle .dot{width:26px;height:15px;border-radius:999px;background:#ffffff2e;position:relative;flex:none;transition:background .15s}.toggle .dot:after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#efe9da;transition:transform .15s}.toggle.on .dot{background:var(--accent)}.toggle.on .dot:after{transform:translate(11px)}.hemi-group{display:flex;align-items:center;gap:2px;background:#14120e99;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:3px 4px 3px 10px}.hemi-label{font-family:IBM Plex Mono,monospace;font-size:10.5px;color:#8b8474;margin-right:2px}.hemi-btn{appearance:none;border:none;background:#ffffff0f;color:#7d7768;font-family:IBM Plex Sans,sans-serif;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}.hemi-btn.on{background:var(--accent);color:var(--accent-ink)}.hemi-btn:not(.on):hover{background:#ffffff24;color:#d8d2c2}.dim-group{display:flex;align-items:center;gap:7px;background:#14120e99;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:3px 12px 3px 10px}.dim-group input[type=range]{width:64px;accent-color:var(--accent);cursor:pointer}.netbar{position:absolute;top:56px;left:14px;z-index:3;display:flex;align-items:center;gap:5px;background:#0c0b099e;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:4px 6px 4px 12px}.net-label{font-family:IBM Plex Mono,monospace;font-size:10.5px;color:#8b8474;margin-right:2px}.net-btn{appearance:none;border:1px solid transparent;background:#ffffff0f;color:#a89f8a;font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.03em;padding:5px 11px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}.net-btn:hover{background:#ffffff24;color:#e8e1cf}.net-btn.on{color:#0d1210}#netNone.on{background:#6b6455}#netDMN.on{background:#5ec8ff;box-shadow:0 0 12px #5ec8ffaa}#netSAL.on{background:#ff5c8a;box-shadow:0 0 12px #ff5c8aaa}#netCEN.on{background:#ffd166;box-shadow:0 0 12px #ffd166aa}.readout{position:absolute;left:14px;right:14px;bottom:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;z-index:3;font-family:IBM Plex Mono,monospace;color:#d8d2c2}.readout .name{font-family:Fraunces,serif;font-size:19px;color:#f6f1e4;font-weight:600}.readout .meta{font-size:11px;color:#a89f8c;margin-top:2px}.readout .desc{font-size:11.5px;color:#c8c1ae;max-width:48ch;margin-top:4px;line-height:1.5;font-family:IBM Plex Sans,sans-serif}.readout .func{font-size:12px;color:#e8dfc6;max-width:48ch;margin-top:6px;line-height:1.5;font-family:IBM Plex Sans,sans-serif;font-style:italic}.readout .hint{font-size:10.5px;color:#8b8474;text-transform:uppercase;letter-spacing:.06em}.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);max-height:min(680px,80vh);display:flex;flex-direction:column}.panel-head{padding:14px 16px 10px;border-bottom:1px solid var(--line)}.panel-head b{font-size:13px;letter-spacing:.02em}.panel-head p{margin:3px 0 0;font-size:11.5px;color:var(--ink-dim)}.panel-body{overflow-y:auto;padding:8px 8px 14px}.lobe-group{margin-top:8px}.lobe-group:first-child{margin-top:4px}.lobe-title{display:flex;align-items:center;gap:7px;width:100%;text-align:left;font-family:IBM Plex Mono,monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);padding:6px 8px;background:none;border:none;cursor:pointer;border-radius:7px}.lobe-title:hover{background:var(--surface-2);color:var(--ink)}.lobe-title i{width:7px;height:7px;border-radius:50%;flex:none}.lobe-title span{margin-left:auto;font-size:9.5px;opacity:.7}.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 4px}.reg-card{background:var(--surface-2);border-radius:9px;padding:7px 7px 7px 9px;display:flex;flex-direction:column;gap:5px}.reg-name{text-align:left;border:none;background:none;padding:0;cursor:pointer;font-family:IBM Plex Sans,sans-serif;font-size:12px;font-weight:600;color:var(--ink);line-height:1.25}.reg-name.sel{color:var(--accent)}.reg-sides{display:flex;gap:4px}.side-btn{flex:1;border:1px solid var(--line);background:transparent;color:var(--ink-dim);font-family:IBM Plex Mono,monospace;font-size:10px;font-weight:500;letter-spacing:.03em;padding:4px 0;border-radius:6px;cursor:pointer}.side-btn:hover{border-color:var(--accent);color:var(--ink)}.side-btn.sel{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}footer{margin-top:14px;font-size:11px;color:var(--ink-dim);font-family:IBM Plex Mono,monospace}
