:root{--paper:#fff;--paper-dot:#d9d2c3;--ink:#1f2a44;--accent:#0f766e;--accent-soft:#0f766e1f;--coral:#c2410c;--gray:#6b7280;--surface:#fff;--border:#e3ddd0;--shadow:0 4px 18px #1f2a441f;--radius:12px;--tap:44px;--font-ui:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-hand:"Playpen Sans", "Caveat", "Segoe Print", "Bradley Hand", system-ui, sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;height:100%;margin:0}body{font-family:var(--font-ui);color:var(--ink);-webkit-text-size-adjust:100%;background:#fff}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.sr-only{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app{grid-template-rows:1fr;width:100vw;height:100dvh;display:grid;overflow:hidden}.topbar{background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px;min-height:52px;padding:6px 10px;display:flex}.wordmark{letter-spacing:.01em;white-space:nowrap;font-size:15px;font-weight:700}.wordmark span{color:var(--accent)}.badge{border:1px solid var(--border);white-space:nowrap;border-radius:999px;padding:4px 8px;font-size:12px}.badge.demo{color:#8a4b00;background:#fff4e5;border-color:#f2c48c;font-weight:600}.badge.live{background:var(--accent-soft);color:var(--accent);font-weight:600}.badge.offline{color:#9b1c1c;background:#fde8e8}.spacer{flex:1}.topbar select,.askbar select{border:1px solid var(--border);background:var(--surface);border-radius:8px;min-height:36px;padding:4px 8px}.btn{border:1px solid var(--border);background:var(--surface);border-radius:10px;justify-content:center;align-items:center;gap:6px;min-width:36px;min-height:36px;padding:6px 12px;display:inline-flex}.btn:hover{background:#f6f2ea}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}.btn.primary:hover{background:#0b5f59}.btn.danger{color:#9b1c1c}.btn.icon{padding:6px}.btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.btn.touch{min-height:var(--tap);min-width:var(--tap)}.stage{touch-action:none;background:var(--paper);position:absolute;inset:0;overflow:hidden}.stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.stage canvas.ink{pointer-events:none}.stage.tool-pen{cursor:crosshair}.stage.tool-eraser{cursor:cell}.stage.tool-select{cursor:default}.stage.tool-hand{cursor:grab}.stage.panning{cursor:grabbing}.overlay{transform-origin:0 0;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;top:0;left:0}.selection{border:2px dashed var(--accent);pointer-events:none;background:#0f766e0f;position:absolute}.selection:after{content:"";background:var(--accent);border-radius:2px;width:10px;height:10px;position:absolute;bottom:-6px;right:-6px}.toolbar{border:1px solid var(--border);box-shadow:var(--shadow);z-index:5;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#fafafaf5;border-radius:14px;flex-direction:column;gap:6px;max-height:calc(100% - 20px);padding:6px;display:flex;position:absolute;top:10px;left:10px;overflow-y:auto}.toolbar .group{border-bottom:1px solid var(--border);grid-template-columns:1fr 1fr;gap:4px;padding-bottom:6px;display:grid}.toolbar .group:last-child{border-bottom:0;padding-bottom:0}.swatch{border:2px solid #0000;border-radius:50%;width:28px;height:28px}.swatch.active{border-color:var(--ink);box-shadow:inset 0 0 0 2px #fff}.widthdot{background:var(--ink);border-radius:50%}.pagebar{border:1px solid var(--border);z-index:5;background:#ffffffeb;border-radius:12px;align-items:center;gap:4px;padding:4px 6px;font-size:13px;display:flex;position:absolute;top:10px;right:108px}.askbar{background:var(--surface);border-top:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;display:flex}.askbar input[type=text]{min-width:160px;min-height:var(--tap);border:1px solid var(--border);background:#fffdf8;border-radius:10px;flex:1;padding:8px 12px}.askbar .status{color:var(--gray);flex-basis:100%;align-items:center;gap:8px;font-size:13px;display:flex}.askbar .status.error{color:#9b1c1c}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hint{color:var(--gray);font-size:12px}.answer{pointer-events:none;position:absolute}.answer.selectable{pointer-events:auto;cursor:pointer}.answer .frame{border:1.5px solid #0000;border-radius:10px;transition:border-color .15s,background .15s;position:absolute;inset:-4px}.answer.selectable:hover .frame{border-color:#0f766e40}.answer.selected .frame{border-color:var(--accent);background:#0f766e0d}.answer .marker{letter-spacing:.04em;color:var(--accent);opacity:.7;font-size:11px;font-weight:600;font-family:var(--font-ui);text-transform:uppercase;position:absolute;top:2px;left:6px}.answer .marker.demo{color:#8a4b00}.answer .meta{font-family:var(--font-ui);color:var(--gray);opacity:.7;white-space:nowrap;font-style:italic;position:absolute}.answer .meta .line{position:absolute;left:28px}.answer .actions{pointer-events:auto;opacity:0;gap:4px;transition:opacity .15s;display:flex;position:absolute;top:-24px;right:0}.answer:hover .actions,.answer.selected .actions,.answer.revealing .actions{opacity:1}.answer .actions button{border:1px solid var(--border);min-width:26px;min-height:26px;font-size:12px;font-family:var(--font-ui);color:var(--gray);background:#ffffffeb;border-radius:8px;padding:2px 6px}.answer .actions button:hover{color:var(--accent);border-color:var(--accent)}.answer .textblock{font-family:var(--font-hand);color:var(--ink);white-space:pre;font-weight:500;position:absolute}.answer .textblock .line{position:absolute;left:0}.answer .textblock canvas.pen{display:block;position:absolute;top:0;left:0}.answer .textblock .word{clip-path:inset(0 100% 0 0);display:inline-block}.answer .textblock .word.on{animation:.22s linear forwards write}.answer .textblock .word.instant{clip-path:none;animation:none}@keyframes write{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}.answer .diagram{position:absolute}.answer .diagram .title{font-family:var(--font-hand);color:var(--ink);font-size:30px;font-weight:700;line-height:38px;position:absolute;top:0;left:0}.answer .diagram svg{position:absolute;top:0;left:0;overflow:visible}.answer .diagram svg .prim{stroke-dasharray:1;stroke-dashoffset:1px}.answer .diagram svg .prim.on{animation:.7s ease-out forwards draw}.answer .diagram svg .prim.instant{stroke-dashoffset:0}.answer .diagram svg text{font-family:var(--font-hand);opacity:0;font-size:30px;font-weight:500}.answer .diagram svg text.on{animation:.3s ease-out forwards fade}.answer .diagram svg text.instant{opacity:1}@keyframes draw{to{stroke-dashoffset:0}}@keyframes fade{to{opacity:1}}.answer .chips{pointer-events:auto;flex-wrap:wrap;align-items:baseline;gap:4px 14px;display:flex;position:absolute}.answer .chips .hint{font-family:var(--font-hand);color:var(--gray);font-size:22px;font-weight:600}.answer .chips button{font-family:var(--font-hand);border:0;border-bottom:1.5px dotted var(--accent);color:var(--accent);background:0 0;min-height:28px;padding:0 2px;font-size:24px;font-weight:600}.answer .chips button:hover{border-bottom-style:solid}.answer .scene{pointer-events:auto;border:1px solid var(--border);background:#ffffff73;border-radius:10px;flex-direction:column;display:flex;position:absolute;overflow:hidden}.answer .scene .view{flex:1;min-height:0;position:relative}.answer .scene .view canvas{width:100%;height:100%;display:block}.answer .scene .controls{font-family:var(--font-ui);grid-template-columns:auto 1fr auto;align-items:center;gap:4px 8px;padding:8px 10px;font-size:15px;display:grid}.answer .scene .controls input[type=range]{width:100%;min-height:28px;accent-color:var(--accent)}.answer .scene .controls .row{grid-column:1/-1;justify-content:space-between;align-items:center;gap:8px;display:flex}.answer .scene .controls .btn{min-height:32px;padding:2px 10px}.answer .scene .caption{font-family:var(--font-hand);color:var(--ink);padding:4px 10px 0;font-size:24px;font-weight:600}.answer .interp{pointer-events:auto;font-family:var(--font-ui);border:1px solid var(--border);box-shadow:var(--shadow);background:#fff;border-radius:8px;flex-direction:column;gap:6px;padding:6px;font-size:14px;display:flex;position:absolute}.answer .interp input{border:1px solid var(--border);border-radius:6px;min-height:34px;padding:4px 8px}.reserved{border:1px dashed #0f766e59;border-radius:10px;position:absolute}.blot{background:var(--ink);pointer-events:none;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;animation:1.2s steps(2,jump-none) infinite blot;position:absolute}@keyframes blot{0%{opacity:.85}to{opacity:0}}.modal-backdrop{z-index:50;background:#1f2a4459;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--surface);width:100%;max-width:480px;box-shadow:var(--shadow);border-radius:16px;padding:20px}.modal h2{margin:0 0 8px;font-size:20px}.modal p{margin:0 0 12px;line-height:1.45}.modal .row{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.modal .countdown{color:var(--accent);text-align:center;margin:8px 0;font-size:44px;font-weight:700}.toast{background:var(--ink);color:#fff;z-index:60;max-width:90vw;box-shadow:var(--shadow);border-radius:10px;padding:10px 14px;font-size:14px;position:fixed;bottom:84px;left:50%;transform:translate(-50%)}.corner{z-index:6;gap:6px;display:flex;position:absolute;top:10px;right:10px}.corner .btn{background:#ffffffeb;font-size:20px}.menu-head{flex-direction:column;gap:6px;padding:6px 10px 4px;display:flex}.menu-hint{color:var(--gray);padding:0 10px 6px;font-size:12px;line-height:1.35}.menu-label{color:var(--gray);padding:4px 10px;font-size:12px}.menu-row{justify-content:space-between}.menu-row select{border:1px solid var(--border);background:var(--surface);border-radius:8px;min-height:32px;padding:2px 6px}.askfloat{border:1px solid var(--border);width:min(640px,100vw - 32px);box-shadow:var(--shadow);z-index:7;background:#fffffff2;border-radius:14px;gap:6px;padding:6px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.askfloat input{min-height:var(--tap);border:1px solid var(--border);background:#fffdf8;border-radius:10px;flex:1;padding:8px 12px}.demo-tag{letter-spacing:.04em;color:#8a4b00;opacity:.65;z-index:6;pointer-events:none;background:#fff4e5cc;border-radius:999px;padding:2px 8px;font-size:11px;position:absolute;bottom:8px;left:12px}.demo-tag.offline{color:#9b1c1c;background:#fde8e8e6;bottom:30px}.fab-row{z-index:7;align-items:center;gap:10px;display:flex;position:absolute;bottom:16px;right:16px}.fab{background:var(--accent);color:#fff;border:0;border-radius:999px;align-items:center;gap:8px;min-width:56px;min-height:56px;padding:0 20px;font-size:20px;font-weight:600;display:inline-flex;box-shadow:0 6px 20px #0f766e59}.fab:hover{background:#0b5f59}.fab:disabled{opacity:.5;box-shadow:none}.fab .fab-label{font-size:16px}.fab.secondary{color:var(--gray);border:1px solid var(--border);box-shadow:var(--shadow);background:#fffffff2;padding:0 16px}.fab.secondary:hover{color:#9b1c1c}.toast-action{color:#fff;background:0 0;border:1px solid #ffffff80;border-radius:8px;margin-left:14px;padding:4px 10px;font-weight:600}.nib{background:var(--ink);opacity:0;pointer-events:none;border-radius:50%;width:8px;height:8px;margin:-4px 0 0 -4px;position:absolute;top:0;left:0;box-shadow:0 0 0 2px #fbf8f1e6,0 1px 3px #0000004d}.capture{pointer-events:none;background:#0f766e06;border:1.5px dashed #0f766e73;border-radius:14px;animation:.32s ease-out capture-in;position:absolute}.capture span{font-family:var(--font-ui);letter-spacing:.03em;color:#0f766ecc;background:var(--paper);border-radius:6px;padding:0 6px;font-size:12px;font-weight:600;position:absolute;top:-11px;right:10px}@keyframes capture-in{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}.blot-cancel{border:1px solid var(--border);width:24px;height:24px;color:var(--gray);pointer-events:auto;background:#ffffffe6;border-radius:50%;padding:0;font-size:12px;position:absolute}.menu-pages{align-items:center;gap:6px;padding:2px 10px 6px;display:flex}.menu{background:var(--surface);border:1px solid var(--border);max-height:calc(100dvh - 70px);box-shadow:var(--shadow);z-index:40;border-radius:12px;flex-direction:column;gap:2px;min-width:240px;padding:6px;display:flex;position:absolute;top:48px;right:0;overflow-y:auto}.menu button,.menu label{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:8px;min-height:40px;padding:8px 10px;display:flex}.menu button:hover,.menu label:hover{background:#f6f2ea}.menu .sep{background:var(--border);height:1px;margin:4px 0}.menu small{color:var(--gray);font-size:12px}.present{background:#efe9dd;grid-template-rows:auto 1fr;height:100dvh;display:grid;overflow:hidden}.present .bar{background:var(--surface);border-bottom:1px solid var(--border);align-items:center;gap:12px;padding:8px 16px;font-size:18px;display:flex}.present .stage{position:relative}.present .state{color:var(--gray);z-index:5;background:#efe9ddcc;justify-content:center;align-items:center;font-size:22px;display:flex;position:absolute;inset:0}.present .cta{margin-left:auto;font-size:16px}@media (max-width:720px){.toolbar{flex-flow:wrap;justify-content:center;max-height:none;padding:4px;inset:auto 8px 8px;overflow:visible}.toolbar .group{border-bottom:0;border-right:1px solid var(--border);flex-direction:row;padding-bottom:0;padding-right:6px;display:flex}.toolbar .group:last-child{border-right:0;padding-right:0}.toolbar .btn.touch{min-width:40px;min-height:40px}.toolbar{bottom:8px;right:84px}.fab-row{flex-direction:column-reverse;gap:8px;bottom:12px;right:10px}.fab .fab-label{display:none}.fab{padding:0}.demo-tag{inset:60px auto auto 12px}.demo-tag.offline{top:84px}.askfloat{top:60px;bottom:auto}}@media (prefers-reduced-motion:reduce){.answer .diagram svg .prim.on,.answer .textblock .word.on{animation-duration:1ms}}