:root{color-scheme:dark;--bg:#151a22;--panel:#202734;--border:#394454;--text:#eef3fa;--muted:#b3c0d3;--accent:#8bd3ee}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,Segoe UI,sans-serif}main{max-width:1220px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;align-items:center}h1{font-size:32px;margin:0}h2{font-size:22px}.eyebrow{font-size:12px;color:var(--accent);letter-spacing:.16em;margin:0}button,input{font:inherit}button{background:#2c3e50;color:var(--text);border:1px solid #66788d;border-radius:6px;padding:9px 15px;cursor:pointer}button:hover{border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}input:not([type=checkbox]):not([type=file]){padding:9px;background:#111721;color:var(--text);border:1px solid #66788d;border-radius:5px}input[type=range]{width:100%}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}label{display:flex;flex-direction:column;gap:5px}form,.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:end}form{margin:18px 0}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:22px;max-width:740px;margin:24px 0}.file{margin:16px 0}.quiet{background:transparent;color:var(--muted)}#notice{color:var(--accent);white-space:pre-wrap}.muted,footer{color:var(--muted)}footer{font-size:13px;margin-top:30px}nav{display:flex;gap:8px;margin:20px 0}nav button[aria-pressed=true]{background:#234e65;border-color:var(--accent)}table{border-collapse:collapse;width:100%;table-layout:fixed}th,td{text-align:left;vertical-align:top;padding:11px;border-bottom:1px solid var(--border);overflow-wrap:anywhere;white-space:pre-wrap}th{color:var(--muted)}th:first-child{width:23%}th:nth-child(2){width:22%}.scroll{max-height:65vh;overflow:auto;border:1px solid var(--border)}.scroll th{position:sticky;top:0;background:var(--bg)}.frame-layout{display:grid;grid-template-columns:minmax(160px,380px) minmax(0,1fr);gap:22px;align-items:start}#frame{max-width:100%;border:1px solid var(--border)}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--panel);padding:16px}#capture-status{white-space:pre-wrap;color:var(--muted)}#published{color:var(--muted)}[hidden]{display:none!important}@media(max-width:680px){main{padding:16px}.frame-layout{grid-template-columns:1fr}button{min-height:44px}form{align-items:stretch}form label{width:100%}th,td{padding:8px;font-size:14px}}
