:root{--surface-app:#e2e8f0;--surface-panel:#fff;--surface-sunken:#f8fafc;--surface-canvas:#0f172a;--surface-canvas-raised:#1e293b;--text-strong:#0f172a;--text-default:#334155;--text-muted:#64748b;--text-subtle:#475569;--text-on-dark:#fff;--text-on-dark-muted:#94a3b8;--border:#cbd5e1;--border-control:#64748b;--accent:#0f766e;--accent-hover:#115e59;--accent-quiet:#ccfbf1;--on-accent:#fff;--ok:#15803d;--ok-quiet:#dcfce7;--warn:#b45309;--warn-quiet:#fef3c7;--danger:#b91c1c;--danger-quiet:#fee2e2;--ink-polygon:#2dd4bf;--ink-polygon-fill:#2dd4bf1f;--ink-calibration:#fbbf24;--ink-recognized:#38bdf8;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius:6px;--radius-lg:8px;--sidebar-width:350px;--font:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;--shadow-panel:0 1px 2px #0f172a0f;--shadow-float:0 4px 12px #0f172a2e;--t-quick:.12s;--t-panel:.2s}@media (prefers-reduced-motion:reduce){:root{--t-quick:0s;--t-panel:0s}}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--text-default);background:var(--surface-app);-webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}.app{grid-template-columns:var(--sidebar-width) 1fr;height:100%;display:grid}.sidebar{background:var(--surface-panel);border-right:1px solid var(--border);flex-direction:column;display:flex;overflow-y:auto}.brand{padding:var(--space-4);background:var(--surface-canvas);color:var(--text-on-dark);z-index:2;position:sticky;top:0}.brand__identity{align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);display:flex}.brand__mark{border-radius:9px;flex:none;width:40px;height:40px}.brand__title{letter-spacing:-.01em;margin:0;font-size:17px;font-weight:600}.brand__sub{color:var(--text-on-dark-muted);margin:2px 0 0;font-size:12px}.progress{background:var(--surface-canvas-raised);border-radius:3px;height:5px;overflow:hidden}.progress--inline{margin-top:var(--space-2);background:var(--border)}.progress__fill{background:var(--accent);height:100%;transition:width var(--t-panel) ease-out}.brand__progress{margin:var(--space-2) 0 0;color:var(--text-on-dark-muted);font-size:11px}.steps{padding:var(--space-3);gap:var(--space-2);flex-direction:column;display:flex}.step{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-panel)}.step[open]{box-shadow:var(--shadow-panel)}.step__summary{gap:var(--space-3);padding:var(--space-3);cursor:pointer;border-radius:var(--radius);align-items:flex-start;list-style:none;display:flex}.step__summary::-webkit-details-marker{display:none}.step__summary:hover{background:var(--surface-sunken)}.step__num{width:22px;height:22px;color:var(--text-muted);border:1px solid var(--border-control);border-radius:50%;flex:none;place-items:center;font-size:12px;font-weight:600;display:grid}.step__num--done{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.step__titles{flex-direction:column;min-width:0;display:flex}.step__title{color:var(--text-strong);font-weight:600}.step__status{color:var(--text-muted);font-size:12px}.step__body{padding:0 var(--space-3) var(--space-3) calc(var(--space-3) + 22px + var(--space-3));gap:var(--space-2);flex-direction:column;display:flex}.btn{min-height:36px;padding:0 var(--space-3);font:inherit;color:var(--text-strong);background:var(--surface-panel);border:1px solid var(--border-control);border-radius:var(--radius);cursor:pointer;transition:background var(--t-quick) ease, border-color var(--t-quick) ease;font-weight:500}.btn:hover:not(:disabled){background:var(--surface-sunken)}.btn:disabled{cursor:not-allowed;color:var(--text-muted);background:var(--surface-sunken);border-color:var(--border)}.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn--primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn--primary:disabled,.btn--active:disabled{background:var(--surface-sunken);border-color:var(--border);color:var(--text-muted)}.btn--active{background:var(--accent-quiet);border-color:var(--accent);color:var(--accent-hover)}.btn--quiet{color:var(--text-muted);border-color:#0000}.btn--file{place-items:center;display:grid}.file-input{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.file-input:focus-visible+.btn--file{outline:2px solid var(--accent);outline-offset:2px}.row{gap:var(--space-2);align-items:center;display:flex}.row>.btn{flex:1}.zoom,.pager__count{text-align:center;font-variant-numeric:tabular-nums;min-width:64px;color:var(--text-muted);flex:none}.field{flex-direction:column;gap:2px;display:flex}.field label{color:var(--text-subtle);font-size:12px;font-weight:600}.field input{min-height:34px;padding:0 var(--space-2);font:inherit;color:var(--text-strong);background:var(--surface-panel);border:1px solid var(--border-control);border-radius:var(--radius)}.field input[aria-invalid=true]{border-color:var(--danger)}.field__hint{color:var(--text-muted);margin:0;font-size:11px}.field__hint--bad{color:var(--danger)}.choice{gap:var(--space-2);align-items:flex-start;display:flex}.choice input{accent-color:var(--accent);margin-top:3px}.choice label{cursor:pointer;flex-direction:column;display:flex}.choice__label{color:var(--text-strong);font-weight:500}.choice__hint,.hint{color:var(--text-muted);font-size:12px}.hint{margin:0}.blocked{color:var(--warn);margin:0;font-size:12px}.pager__label{color:var(--text-subtle);font-size:12px;font-weight:600}.counts{border:1px solid var(--border);border-radius:var(--radius);margin:0;overflow:hidden}.counts__row{padding:var(--space-1) var(--space-2);justify-content:space-between;font-size:12px;display:flex}.counts__row:nth-child(odd){background:var(--surface-sunken)}.counts__row--meta{color:var(--text-muted)}.counts dt,.counts dd{margin:0}.counts dd{font-variant-numeric:tabular-nums;color:var(--text-strong);font-weight:600}.problem{margin:var(--space-3);padding:var(--space-3);background:var(--danger-quiet);border:1px solid var(--danger);border-radius:var(--radius);color:var(--text-strong)}.problem__title{margin:0 0 var(--space-1);color:var(--danger);font-weight:600}.problem ul{padding-left:var(--space-4);margin:0;font-size:13px}.stage{padding:var(--space-3);min-width:0;min-height:0}.canvas,.canvas-empty{background:var(--surface-canvas);border-radius:var(--radius-lg);width:100%;height:100%;position:relative;overflow:auto}.canvas:focus-visible{outline-offset:-2px}.canvas--pan{cursor:grab}.canvas--pan:active{cursor:grabbing}.canvas--draw,.canvas--calibrate{cursor:crosshair}.canvas__stage{margin:auto;position:relative}.canvas__layer{display:block;position:absolute;inset:0}.canvas__layer--result,.canvas__layer--overlay{pointer-events:none}.canvas-empty{text-align:center;color:var(--text-on-dark);place-content:center;display:grid}.canvas-empty__title{margin:0;font-size:20px}.canvas-empty__hint{margin:var(--space-2) 0 0;color:var(--text-on-dark-muted)}.canvas__badge,.canvas__readout{top:var(--space-3);left:var(--space-3);z-index:1;float:left;clear:left;padding:var(--space-1) var(--space-2);color:var(--text-on-dark);border-radius:var(--radius);pointer-events:none;background:#0f172ad9;font-size:12px;position:sticky}.canvas__readout{font-family:var(--font-mono);color:var(--text-on-dark-muted)}.ink-polygon{fill:var(--ink-polygon-fill);stroke:var(--ink-polygon)}.ink-polyline{fill:none;stroke:var(--ink-polygon);stroke-dasharray:6 4}.ink-vertex{fill:var(--surface-canvas);stroke:var(--ink-polygon)}.ink-vertex--first{fill:var(--ink-polygon)}.ink-calibration{stroke:var(--ink-calibration);stroke-dasharray:8 4}.ink-calibration-point{fill:var(--surface-canvas);stroke:var(--ink-calibration)}@media (width<900px){.app{grid-template-rows:auto 1fr;grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--border);max-height:50vh}}.booting,.signin{height:100%;padding:var(--space-5);color:var(--text-muted);place-content:center;display:grid}.signin__card{width:min(380px,100%);padding:var(--space-5);background:var(--surface-panel);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-panel);text-align:center}.signin__title{margin:0 0 var(--space-2);color:var(--text-strong);font-size:18px}.signin__body{margin:0 0 var(--space-4);color:var(--text-default)}.signin__button{width:100%}.signin__problem{margin:0 0 var(--space-3);padding:var(--space-2);text-align:left;color:var(--text-strong);background:var(--danger-quiet);border:1px solid var(--danger);border-radius:var(--radius);font-size:13px}.signin__hint{margin:var(--space-3) 0 0;color:var(--text-muted);font-size:12px}.brand__user{justify-content:space-between;align-items:baseline;gap:var(--space-2);margin:var(--space-2) 0 0;color:var(--text-on-dark-muted);font-size:11px;display:flex}.brand__user--open{color:var(--warn-quiet)}.brand__signout{font:inherit;color:var(--text-on-dark-muted);cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.brand__signout:hover{color:var(--text-on-dark)}.crash{height:100%;padding:var(--space-5);place-content:center;display:grid}.crash__card{width:min(560px,100%);padding:var(--space-5);background:var(--surface-panel);border:1px solid var(--danger);border-radius:var(--radius-lg)}.crash__title{margin:0 0 var(--space-2);color:var(--danger);font-size:18px}.crash__body{margin:0 0 var(--space-3);color:var(--text-default)}.crash__detail{margin:0 0 var(--space-4);padding:var(--space-3);font-family:var(--font-mono);color:var(--text-strong);background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius);font-size:12px;overflow-x:auto}.crash__hint{margin:var(--space-3) 0 0;color:var(--text-muted);font-size:12px}.resumed{margin:var(--space-3) var(--space-3) 0;padding:var(--space-3);color:var(--text-default);background:var(--accent-quiet);border:1px solid var(--accent);border-radius:var(--radius);font-size:13px}.resumed p{margin:0}.resumed__title{color:var(--accent-hover);font-weight:600;margin-bottom:var(--space-1)!important}.canvas__tools{top:var(--space-3);left:var(--space-3);z-index:1;float:left;clear:left;background:var(--surface-canvas-raised);border-radius:var(--radius);width:max-content;box-shadow:var(--shadow-float);border:1px solid #94a3b859;align-items:stretch;gap:1px;padding:2px;display:flex;position:sticky}.tool{min-width:30px;min-height:28px;padding:0 var(--space-2);font:inherit;color:var(--text-on-dark);cursor:pointer;transition:background var(--t-quick) ease;background:0 0;border:none;border-radius:3px;font-size:15px;line-height:1}.tool:hover{background:#94a3b838}.tool--wide{padding:0 var(--space-3);font-size:13px}.tool__zoom{min-width:58px;padding:0 var(--space-1);font-variant-numeric:tabular-nums;color:var(--text-on-dark);place-items:center;font-size:12px;display:grid}.canvas__badge{top:calc(var(--space-3) + 38px)}.packaged{gap:var(--space-2);padding:var(--space-3);background:var(--ok-quiet);border:1px solid var(--ok);border-radius:var(--radius);flex-direction:column;display:flex}.packaged .btn{align-self:flex-start;text-decoration:none}