@font-face{font-family:Lexend;font-weight:400;font-display:swap;src:url(/assets/fonts/lexend-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Lexend;font-weight:600;font-display:swap;src:url(/assets/fonts/lexend-latin-600-normal.woff2) format("woff2")}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#DDE4EE;color:#10213A;font-family:Lexend,system-ui,sans-serif;font-size:16px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.play{height:100%;height:100dvh;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#fff;flex-wrap:wrap}
.bar.top{box-shadow:0 1px 0 #C9D4E3}
.bar.tools{box-shadow:0 -1px 0 #C9D4E3;justify-content:center;gap:10px 22px}
.title{font-weight:600}
.progress{margin-left:auto;margin-right:8px}
.sync{font-size:14px;color:#46597A;margin-right:4px}
a.sync{color:#10213A}
.group{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.group.hidden{display:none}
.tb{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 16px;border-radius:14px;border:2px solid transparent;background:#EEF2F7;color:#10213A;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.tb svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tb.on{background:#10213A;color:#fff}
.tb.warn{background:#FFE3D6;border-color:#D9480F}
.tb.done.on{background:#2B8A3E;color:#fff}
.tb:focus-visible,.sw:focus-visible,.st:focus-visible,.nav:focus-visible{outline:3px solid #2F6FDB;outline-offset:2px}
.sw{width:44px;height:44px;border-radius:50%;border:3px solid #fff;background:var(--c);box-shadow:0 0 0 2px #C9D4E3;cursor:pointer;padding:0}
.sw.on{box-shadow:0 0 0 3px #10213A;transform:scale(1.08)}
.st{width:52px;height:52px;border-radius:14px;border:2px solid transparent;background:#EEF2F7;padding:6px;cursor:pointer}
.st svg{width:100%;height:100%;display:block}
.st.on{border-color:#10213A;background:#fff}
.stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;gap:16px;padding:12px}
.paper{position:relative;background:#fff;border-radius:8px;box-shadow:0 10px 30px rgba(16,33,58,.22);overflow:hidden;touch-action:none;flex:none}
.paper img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.paper canvas{position:absolute;inset:0}
.paper[data-tool=pen]{cursor:crosshair}
.paper[data-tool=type]{cursor:text}
.paper[data-tool=sticker]{cursor:copy}
.paper[data-tool=erase]{cursor:cell}
.layer{position:absolute;inset:0;pointer-events:none}
.paper[data-tool=type] .answer,.paper[data-tool=erase] .answer,.paper[data-tool=erase] .sticker{pointer-events:auto}
.answer{position:absolute;font-size:calc(var(--pw) * .042);line-height:1.2;font-weight:600;white-space:pre;min-width:1ch;padding:0 .15em;border-radius:6px;outline:none;-webkit-user-select:text;user-select:text}
.answer[contenteditable=true]{background:rgba(47,111,219,.12);box-shadow:0 0 0 2px #2F6FDB}
.sticker{position:absolute;width:calc(var(--pw) * .085);height:calc(var(--pw) * .085);transform:translate(-50%,-50%)}
.sticker svg{width:100%;height:100%;display:block}
.donebadge{position:absolute;right:3%;top:3%;width:calc(var(--pw) * .12);height:calc(var(--pw) * .12);border-radius:50%;background:#2B8A3E;display:none;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.donebadge.show{display:flex;animation:pop .35s ease-out}
.donebadge svg{width:62%;height:62%;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.nav{width:64px;height:64px;border-radius:50%;border:0;background:#fff;box-shadow:0 4px 14px rgba(16,33,58,.18);cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center}
.nav svg{width:32px;height:32px;fill:none;stroke:#10213A;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.nav[disabled]{opacity:.3;cursor:default}
@media (max-width:699px){
  .nav{position:absolute;bottom:8px;width:56px;height:56px;z-index:3}
  .stage{align-items:flex-start;padding-top:10px}
  .sw{width:40px;height:40px}
  .nav.prev{left:12px}.nav.next{right:12px}
  .tb span{display:none}
  .tb{padding:0 14px}
  .title{display:none}
  .bar.tools{gap:8px 12px}
  .bar.top{gap:8px}
  .sync{order:5;width:100%;text-align:center;margin:0}
}
@media (prefers-reduced-motion:reduce){.donebadge.show{animation:none}}