*{box-sizing:border-box} :root{color-scheme:dark;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:#e6ecef;background:#080c0f}body{margin:0;background:radial-gradient(ellipse at 80% -10%,#1c292e 0,transparent 42%),#080c0f}.app{width:min(980px,calc(100% - 28px));margin:auto;padding-bottom:28px}header{height:58px;border-bottom:1px solid #273238;display:flex;align-items:center;justify-content:space-between}.logo{font-weight:800;letter-spacing:.12em;font-size:12px}.logo span{color:#c9854c}.version,.eyebrow,.heading>span{font-family:ui-monospace,monospace;font-size:10px;color:#819198;letter-spacing:.1em}.hero{padding:38px 0 25px}.eyebrow{color:#d08b4d;margin-bottom:12px}.hero h1{font-size:clamp(34px,6vw,49px);letter-spacing:-.055em;line-height:1;margin:0 0 14px}.hero p,.heading p{color:#9eabb1;line-height:1.65;font-size:12px;max-width:640px;margin:0}.panel{padding:22px;margin-bottom:16px;background:linear-gradient(145deg,#141c20,#0e1417);border:1px solid #2a363c;border-radius:12px;box-shadow:0 16px 48px #0002}.heading{display:flex;gap:14px;margin-bottom:20px}.heading>span{padding-top:3px;color:#d08b4d}.heading h2{font-size:16px;margin:0 0 6px}.buttons{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:17px}button{border:1px solid #d58a51;background:#c77b43;color:#17100b;font-weight:700;border-radius:7px;padding:11px 15px;cursor:pointer;font-size:12px}button:hover{filter:brightness(1.1)}button.secondary{background:#222c31;border-color:#3b484f;color:#e6ecef}.status{display:flex;align-items:center;gap:9px;padding:9px 11px;background:#0a0f12;border:1px solid #273238;margin-top:7px;border-radius:6px;color:#b7c3c8;font-size:11px}.status i{height:7px;width:7px;border-radius:50%;background:#b59a68;flex:0 0 7px}.status i.blue{background:#8d9ec3}.status i.grey{background:#4d5a61}#error{color:#ffb8a8;font-size:12px;margin-top:9px}.preview-title{display:flex;justify-content:space-between;margin-top:17px;padding:11px 0 8px;color:#c4cdd1;font:10px ui-monospace,monospace;letter-spacing:.08em}.preview-title span{color:#718087;letter-spacing:0}video{display:block;width:100%;max-height:360px;object-fit:contain;background:#030505;border:1px solid #20292d;border-radius:5px}.footnote,.grid-note{font-size:10px;color:#718087;line-height:1.6}.grid-caption{display:flex;justify-content:space-between;gap:8px;align-items:center;margin:14px 0 9px;color:#a6b2b7;font-size:10px;letter-spacing:.04em}.grid-caption small{font-size:9px;color:#75868d}.grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(12,minmax(30px,1fr));gap:2px;padding:2px;background:#080b0d;border:1px solid #39444a;border-radius:5px;aspect-ratio:9/12}.item{min-width:0;min-height:0;position:relative;overflow:hidden;border:1px solid #45433c;background:linear-gradient(145deg,#24231f,#131716);padding:4px;display:flex;flex-direction:column;justify-content:space-between;color:#c0c7c8;font-size:clamp(6px,1vw,10px);line-height:1.25;white-space:pre-line;overflow-wrap:anywhere}.item.paper{background:linear-gradient(145deg,#1d292b,#111719);border-color:#354449}.item.tools{background:#20262a;border-color:#3b474c}.item.materials{background:#242723;border-color:#45483d}.item .icon{align-self:center;font-size:clamp(15px,3vw,27px);color:#6c7169;line-height:1}.item .id{position:absolute;right:2px;bottom:1px;color:#657177;font:7px ui-monospace,monospace}.grid-note{margin-top:10px}footer{text-align:center;color:#596970;font:9px ui-monospace,monospace;letter-spacing:.12em;padding:18px}@media(max-width:600px){.panel{padding:14px}.grid{grid-template-rows:repeat(12,minmax(23px,1fr))}.grid-caption{align-items:flex-start;flex-direction:column}.buttons button{flex:1}}
#frameCanvas{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:#030505;border:1px solid #39444a;border-radius:5px;touch-action:none;cursor:crosshair}#frameCanvas:empty{display:none}

.auto-grid{display:block;min-height:72px;padding:12px;background:#080b0d;border:1px solid #39444a;border-radius:5px}.auto-grid .grid-note{margin:0;color:#9eabb1;font:11px/1.7 ui-monospace,monospace}#frameCanvas{max-height:520px;cursor:default;touch-action:auto}
