:root{color-scheme:light;--paper:#f5f3ed;--ink:#383b32;--muted:#8c8e81;--accent:#857292;--line:#d5d4c9;--frame:#cfcdc2;--hover:#eae6ed;--hover-line:#baaec2;--overlay:#f0ebf4eb}

*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased}
header{flex:none;min-height:68px;height:clamp(68px,11dvh,96px);padding:0 max(5.5%,env(safe-area-inset-left)) 0 max(5.5%,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:16px}.logo{font-family:Georgia,'Times New Roman',serif;font-size:43px;letter-spacing:-2.5px;line-height:1;text-decoration:none;color:var(--ink)}.logo>span{color:var(--accent)}.actions{display:flex;align-items:center;gap:26px}button{font:inherit;font-size:11px;letter-spacing:.04em;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,border-color .2s;flex-shrink:0}#save,#replay{display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:transparent;color:var(--muted);padding:10px 0;min-width:26px;min-height:36px}#save svg{width:18px;height:18px}#replay svg{width:16px;height:16px}#save:hover,#replay:hover{color:var(--ink)}#upload{display:flex;align-items:center;gap:25px;border:1px solid var(--line);background:transparent;border-radius:30px;padding:11px 18px}#upload>span{font-size:18px;line-height:1;color:var(--accent)}#upload:hover,.play-actions button:hover:enabled{background:var(--hover);border-color:var(--hover-line)}
main{flex:1;min-height:0;width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;padding:0 24px max(14px,env(safe-area-inset-bottom))}#stage{position:relative;flex:1;min-height:0;width:100%;touch-action:none}canvas{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;cursor:crosshair;touch-action:none}#drop{display:none;position:absolute;inset:20px;background:var(--overlay);border:1px dashed var(--hover-line);border-radius:4px;align-items:center;justify-content:center;font-size:14px;letter-spacing:.08em;color:var(--accent);pointer-events:none}.dragging #drop{display:flex}.play-actions{flex:none;display:flex;justify-content:center;gap:10px;padding-top:8px}.play-actions button{height:36px;min-width:86px;padding:0 20px;border:1px solid var(--line);border-radius:30px;background:transparent;color:var(--ink);font-size:11px}.play-actions button span{padding-left:10px;color:var(--accent)}button:disabled{opacity:.32;cursor:default}#status{flex:none;min-height:0;max-height:42px;overflow:hidden;font-size:10px;line-height:1.6;text-align:center;color:var(--accent);margin:8px 0 0}#status:empty{display:none}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:600px){header{height:72px;min-height:60px;padding-left:6%;padding-right:6%}.logo{font-size:38px}.actions{gap:18px}#upload{gap:14px;padding:10px 14px}main{padding-left:8px;padding-right:8px}.play-actions{padding-top:8px}}@media(max-width:380px){.actions{gap:12px}#replay span{display:none}.logo{font-size:35px}}@media(max-height:450px){header{height:49px;min-height:49px}.logo{font-size:31px}main{padding-bottom:6px}.play-actions{padding-top:2px}.play-actions button{height:30px}#upload{padding-top:7px;padding-bottom:7px}}@media(prefers-reduced-motion:reduce){button{transition:none}}

#draw-mode[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}#draw-mode[aria-pressed=true] span{color:var(--paper)}#ink-palette{flex:none;align-self:center;display:flex;justify-content:center;gap:6px;padding-top:12px}#ink-palette[hidden]{display:none}.ink{display:flex;flex-direction:column;align-items:center;gap:4px;width:32px;padding:3px 1px 5px;background:none;border:1px solid transparent;border-radius:5px;color:var(--muted)}.ink svg{width:28px;height:36px;overflow:visible}.ink.selected{border-color:var(--hover-line);background:var(--hover);color:var(--ink)}.ink:disabled{opacity:.35}.ink small{font-size:7px;font-variant-numeric:tabular-nums;letter-spacing:0}.ink .sand-level{transition:y .15s,height .15s}.ink .glass{stroke:var(--muted);stroke-width:.9;fill:none}.ink.selected .glass{stroke:var(--ink)}@media(max-width:400px){#ink-palette{gap:2px}.ink{width:27px}.ink svg{width:24px;height:32px}.play-actions{gap:7px}.play-actions button{padding:0 15px;min-width:75px}}@media(max-height:450px){#ink-palette{padding-top:4px}.ink{flex-direction:row;gap:0;width:43px}.ink svg{height:24px;width:20px}.ink small{font-size:6px}#ink-palette{gap:0}}

.controls-deck{flex:none;height:166px;display:grid;grid-template-rows:36px 28px 68px 18px;row-gap:4px;justify-items:center;padding-top:4px}.controls-deck .play-actions{margin:0;padding:0;align-self:center}.controls-deck #ink-palette{margin:0;padding:3px 0 0;align-self:start;visibility:hidden;opacity:0;transition:opacity .35s}.controls-deck #ink-palette.ready{visibility:visible;opacity:1}.controls-deck #status{margin:0;width:100%;font-size:9px;line-height:16px}.controls-deck #status:empty{display:block}.brush-control{display:flex;align-items:center;gap:12px;visibility:hidden;opacity:0;font-size:9px;color:var(--muted);transition:opacity .25s}.brush-control.ready{visibility:visible;opacity:1}.brush-control input{appearance:none;-webkit-appearance:none;width:125px;height:2px;background:var(--line);cursor:pointer}.brush-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:9px;border:0;border-radius:50%;background:var(--accent)}.brush-control input::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:var(--accent)}.brush-control output{width:22px;font-size:9px;font-variant-numeric:tabular-nums}.brush-control input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.ink-transport{position:fixed;inset:0;width:100%;height:100%;z-index:10;pointer-events:none;object-fit:fill;cursor:default}@media(max-height:450px){.controls-deck{height:116px;grid-template-rows:30px 22px 34px 18px;row-gap:2px}.controls-deck .ink{flex-direction:row;width:43px;gap:0}.controls-deck .ink svg{height:24px;width:20px}}

.ink-transport[hidden]{display:none}

.controls-deck{width:100%}.controls-deck .play-actions{width:min(100%,390px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.controls-deck .play-actions button{min-width:0;padding:0 9px;font-size:10px}.controls-deck .play-actions button span{padding-left:5px}.canvas-tools{display:flex;align-items:center;justify-content:center;gap:18px;min-width:0}.background-control{display:flex;gap:7px;align-items:center}.background-control button{display:grid;place-items:center;width:24px;height:24px;border:1px solid transparent;border-radius:50%;padding:3px;background:transparent}.background-control button[aria-pressed=true]{border-color:var(--accent)}.background-control button span{display:block;width:14px;height:14px;border-radius:50%;border:1px solid var(--line)}#bg-white span{background:#fff}#bg-black span{background:#171717}.canvas-tools .brush-control{width:195px;gap:8px}.canvas-tools .brush-control input{min-width:0;width:110px}.canvas-tools .brush-control output{width:20px}@media(max-width:380px){.actions{gap:10px}#save{gap:4px}.controls-deck .play-actions{gap:5px}.controls-deck .play-actions button{padding:0 6px}.controls-deck .play-actions button span{padding-left:3px}.canvas-tools{gap:10px}}

.controls-deck{height:194px;grid-template-rows:24px 36px 28px 68px 18px;row-gap:3px}.controls-deck>.background-control{justify-self:center;align-self:center}.canvas-tools{justify-content:center}.canvas-tools .brush-control{justify-content:center;width:195px}@media(max-height:450px){.controls-deck{height:140px;grid-template-rows:24px 30px 22px 34px 18px;row-gap:2px}}

#share-x{display:grid;place-items:center;width:28px;height:36px;padding:6px;border:0;background:none;color:var(--muted)}#share-x svg{width:16px;height:16px}#share-x:hover{color:var(--ink)}#share-dialog{width:min(620px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:23px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:0 20px 100px #25231d22}#share-dialog::backdrop{background:#27251f55;backdrop-filter:blur(5px)}.share-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.share-heading h2{font:26px Georgia,serif;letter-spacing:-.6px;margin:0}#share-close{border:0;background:none;color:var(--muted);font-size:25px;padding:0 5px}#share-preview{width:100%;height:auto;aspect-ratio:2/1;display:block;border:1px solid var(--line);border-radius:3px;object-fit:contain}#share-preview:not([src]){visibility:hidden}#share-caption{font:11px/1.8 -apple-system,BlinkMacSystemFont,sans-serif;display:block;width:100%;resize:none;border:1px solid var(--line);border-radius:3px;background:#fcfbf7;color:var(--ink);margin:15px 0;padding:11px}.share-buttons{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.share-buttons button,.share-buttons a{font-size:10px;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:25px;background:none;padding:10px 13px}.share-buttons #share-send{background:var(--ink);color:var(--paper);border-color:var(--ink)}.share-buttons a[hidden]{display:none}#share-note{font-size:10px;line-height:1.7;color:var(--muted);min-height:17px;margin:12px 0 0}@media(max-width:600px){.actions{gap:13px}}@media(max-width:380px){.actions{gap:8px}#share-x{width:23px}#share-dialog{padding:17px}}

@media(max-width:380px){#save span{display:none}.actions{gap:6px}#upload{gap:10px;padding-left:12px;padding-right:12px}}

.controls-deck .play-actions{width:min(100%,470px);grid-template-columns:repeat(5,minmax(0,1fr))}#touch-mode[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}@media(max-width:600px){.controls-deck .play-actions button span{display:none}.controls-deck .play-actions{gap:4px}.controls-deck .play-actions button{padding:0 5px;font-size:10px}}

.share-previews{display:grid;grid-template-columns:1fr 1fr;gap:12px}.share-previews figure{margin:0;min-width:0}.share-previews img{display:block;width:100%;height:200px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:3px}.share-previews figcaption{font-size:9px;color:var(--muted);padding-top:7px}@media(max-width:600px){.share-previews img{height:140px}.share-previews{gap:8px}}

/* Touch controls retain their positions in every mode. */
@media(max-width:600px){
 header{height:76px;min-height:76px;padding:0 max(14px,env(safe-area-inset-left)) 0 max(14px,env(safe-area-inset-right));gap:8px;min-width:0}
 .logo{font-size:38px;flex:none}.actions{gap:4px;min-width:0;flex:none}
 #share-x,#save,#replay{width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;gap:0}
 #share-x svg,#save svg,#replay svg{width:20px;height:20px}
 #save span,#replay span{display:none}
 #upload{height:44px;min-width:0;gap:7px;padding:0 11px;font-size:13px;letter-spacing:0}
 #upload>span{font-size:19px}
 .controls-deck{height:230px;grid-template-rows:36px 44px 44px 70px 16px;row-gap:3px}
 .background-control{gap:7px}.background-control button{width:36px;height:36px}.background-control button span{width:19px;height:19px}
 .controls-deck .play-actions{width:100%;max-width:470px;gap:4px}
 .controls-deck .play-actions button{height:44px;font-size:12.5px;padding:0 4px;letter-spacing:0}
 .canvas-tools .brush-control{width:260px;gap:13px;font-size:12px}
 .canvas-tools .brush-control input{width:165px;height:44px;background:transparent;margin:0}
 .brush-control input::-webkit-slider-runnable-track{height:3px;background:var(--line);border-radius:4px}
 .brush-control input::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8.5px}
 .brush-control input::-moz-range-track{height:3px;background:var(--line);border-radius:4px}
 .brush-control input::-moz-range-thumb{width:20px;height:20px}
 .canvas-tools .brush-control output{width:26px;font-size:12px}
 .controls-deck #ink-palette{gap:2px;padding-top:2px;max-width:100%}
 .controls-deck .ink{width:34px;height:64px;gap:4px;padding:5px 1px;flex-direction:column}
 .controls-deck .ink svg{width:27px;height:35px}.ink small{font-size:9px}
 .share-buttons button,.share-buttons a{min-height:44px;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
 #share-caption{font-size:16px}.share-previews figcaption,#share-note{font-size:12px}
}
@media(max-width:360px){
 header{height:110px;min-height:110px;display:grid;grid-template-rows:44px 44px;grid-template-columns:minmax(0,1fr);gap:4px;padding-top:6px;padding-bottom:8px}
 .logo{font-size:36px;justify-self:start}.actions{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr);gap:6px}
 #save,#replay{width:100%;min-width:0;gap:5px;padding:8px 5px;font-size:12px}
 #save span,#replay span{display:inline}#save svg,#replay svg{width:16px;height:16px;flex:none}
 #upload{width:100%;justify-content:center;padding:0 8px}
 .controls-deck{height:272px;grid-template-rows:36px 44px 44px 112px 16px}
 .controls-deck #ink-palette{display:grid;grid-template-columns:repeat(5,44px);gap:2px 8px}
 .controls-deck .ink{width:44px;height:54px;gap:1px;padding:2px}
 .controls-deck .ink svg{height:32px;width:25px}.controls-deck .ink small{font-size:9px}
}
@media(max-height:450px) and (min-width:601px){
 header{height:52px;min-height:52px}.logo{font-size:32px}.actions{gap:14px}#share-x,#save,#replay{min-height:40px;height:40px}#upload{height:40px;font-size:12px}
 .controls-deck{height:166px;grid-template-rows:30px 36px 32px 42px 14px;row-gap:2px}
 .controls-deck .play-actions button{height:36px;font-size:12px}.background-control button{width:30px;height:30px}
 .canvas-tools .brush-control{font-size:11px}.canvas-tools .brush-control input{height:30px}
 .controls-deck .ink{height:36px;flex-direction:row;gap:2px;width:44px;padding:2px}.controls-deck .ink svg{height:28px;width:22px}.controls-deck .ink small{font-size:8px}
}

#stage>.background-control{position:absolute;left:50%;top:var(--background-control-top,100%);transform:translateX(-50%);z-index:2}.background-slot{width:1px;pointer-events:none}

.legal-links{flex:none;display:flex;justify-content:center;gap:18px;height:26px;align-items:center}.legal-links button{font-size:10px;color:var(--muted);background:none;border:0;padding:5px 6px}.legal-links button:hover{color:var(--ink)}#legal-dialog{width:min(530px,calc(100% - 32px));max-height:min(82dvh,700px);padding:23px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:0 20px 100px #25231d22;overflow:hidden}#legal-dialog[open]{display:flex;flex-direction:column}#legal-dialog::backdrop{background:#27251f55}.legal-heading{flex:none;display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.legal-heading h2{font:27px Georgia,serif;margin:0}#legal-close{width:44px;height:44px;border:0;background:none;font-size:27px;color:var(--muted)}#legal-body{overflow:auto;min-height:0;font-size:13px;line-height:1.8;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}#legal-body h3{font-size:13px;font-weight:600;margin:22px 0 6px}#legal-body p{margin:8px 0}#legal-body .legal-date{font-size:10px;color:var(--muted);margin-bottom:18px}#legal-body a{color:var(--accent);text-underline-offset:3px}@media(max-width:600px){.legal-links{height:30px}.legal-links button{font-size:11px;min-height:30px}#legal-dialog{padding:18px}#legal-body{font-size:14px}}@media(max-height:450px){.legal-links{height:20px}.legal-links button{font-size:10px;padding:2px 6px}}