:root{--bg:#0d1117;--panel:#161b22;--line:#262c36;--text:#e6edf3;--muted:#8b949e;--accent:#22d3ee;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);overflow:hidden}.app{flex-direction:column;height:100%;display:flex}.topbar{border-bottom:1px solid var(--line);background:var(--panel);align-items:baseline;gap:12px;padding:10px 16px;display:flex}.topbar h1{letter-spacing:.01em;margin:0;font-size:15px;font-weight:600}.region{color:var(--muted);font-size:13px}.spacer{flex:1}.meta{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.viewer{flex:1;min-height:55dvh;position:relative}.viewer canvas{touch-action:none;display:block}.layers{border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#161b22eb;border-radius:8px;padding:10px 12px;position:absolute;top:12px;left:12px}.layers-title{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;font-size:11px}.layer-row{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:3px 0;font-size:13px;display:flex}.layer-row input{accent-color:var(--accent);cursor:pointer;margin:0}.layer-label{min-width:72px}.layer-count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.loader{text-align:center;width:200px}.loader-bar{background:var(--line);border-radius:2px;height:3px;overflow:hidden}.loader-bar span{background:var(--accent);height:100%;transition:width .15s linear;display:block}.loader-text{color:var(--muted);margin-top:8px;font-size:12px}.readout{border-top:1px solid var(--line);background:var(--panel);flex:0 auto;min-height:54px;padding:10px 16px;overflow-y:auto}.readout-name{color:var(--accent);font-size:17px;font-weight:600}.readout-code{color:var(--muted);font-family:ui-monospace,monospace;font-size:11px}.readout-empty{color:var(--muted);font-size:13px}.info{margin:8px 0 0;font-size:13px}.info-row{grid-template-columns:104px 1fr;gap:8px;padding:3px 0;display:grid}.info dt{color:var(--muted)}.info dd{overflow-wrap:anywhere;margin:0}.info-empty{color:var(--muted);opacity:.55;font-style:italic}.mode{border:1px solid var(--line);border-radius:6px;flex-shrink:0;align-self:center;display:flex;overflow:hidden}.mode button{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;padding:4px 10px;font-size:12px}.mode button.on{background:var(--line);color:var(--text)}.mode-quiz .viewer{flex:none;height:max(55svh,100svh - 340px);min-height:0}.mode-quiz .readout.quiz{flex:1 1 0;min-height:0;padding-top:0}.quiz-head{z-index:1;background:var(--panel);justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:6px 0;display:flex;position:sticky;top:0}.quiz-meta{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.quiz-prompt{margin:4px 0 8px;font-size:15px;font-weight:600}.quiz-result{margin-bottom:8px;font-size:13px}.quiz-ok{color:#22c55e;font-weight:600}.quiz-no{color:#ef4444;font-weight:600}.quiz-btn{font:inherit;border:1px solid var(--accent);color:var(--accent);cursor:pointer;background:0 0;border-radius:6px;padding:6px 14px;font-size:13px}.quiz-explain{color:var(--muted);margin:10px 0 0;font-size:13px}.quiz .readout{background:0 0;border:0;min-height:0;margin-top:10px;padding:0;overflow:visible}.attribution{color:var(--muted);border-top:1px solid var(--line);background:var(--bg);padding:7px 16px;font-size:10.5px}