:root{color-scheme:light;font-family:Georgia,serif;background:#e8e1d3;color:#524b40;font-synthesis:none}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{background:radial-gradient(ellipse at 48% 40%,#f6f0e6,#ded5c4)}button,input{font:inherit}button{border:0;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #708b80;outline-offset:5px}button:disabled{opacity:.28;cursor:default}button svg{width:21px;height:21px;stroke-width:1.45;pointer-events:none}.stage{position:absolute;inset:3vh 3vw 106px;display:flex;align-items:center;justify-content:center;perspective:1400px}.paper{position:relative;max-width:100%;max-height:100%;aspect-ratio:3/2;width:auto;height:100%;filter:drop-shadow(0 13px 20px #463a2528);background:#f0e4cc;transform:rotate(-.35deg);border:7px solid #f4ead7;outline:1px solid #c5b89f55}.paper:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 23px #7a5e2220;border:1px solid #a2987650}.paper canvas{display:block!important;width:100%!important;height:100%!important;touch-action:none;cursor:grab}.paper.placing canvas{cursor:crosshair}.paper.dragging canvas{cursor:grabbing}.tools{position:fixed;right:24px;top:23px;display:flex;flex-direction:column;gap:7px;z-index:5}.round{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#f9f2e3dc;border:1px solid #9c8e7138;box-shadow:0 2px 4px #5d4a2c0a;transition:background .18s,transform .18s}.round:hover{background:#fff8e9;transform:translateY(-2px)}button[aria-pressed=true]{background:#d5dfd3!important;border-color:#667d68!important}.dock{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid #ac9c7d77;border-radius:19px 16px 20px 14px;background:#f8f0e0ed;box-shadow:0 6px 20px #69563416;z-index:4;max-width:calc(100% - 22px)}.divider{height:39px;width:1px;background:#b3a48a60;flex-shrink:0}.palette{display:flex;align-items:center;gap:3px}.piece-button{width:46px;height:57px;display:grid;place-items:center;background:transparent;border:1px solid transparent;border-radius:8px;transition:transform .18s,background .18s;position:relative}.piece-button img{max-width:39px;max-height:52px;object-fit:contain;pointer-events:none;filter:drop-shadow(1px 2px 0 #69563420)}.piece-button:hover{transform:translateY(-5px);background:#e9dfca}.piece-button[aria-pressed=true]:after{content:"";position:absolute;bottom:0;width:4px;height:4px;background:#537861;border-radius:50%}.transport{display:flex;gap:6px;align-items:center}.play{width:48px;height:48px;background:#e5e9d9}.play svg{width:23px;height:23px}.inspector{position:fixed;left:50%;bottom:109px;transform:translate(-50%);display:flex;align-items:center;gap:5px;background:#fbf3e4ee;border:1px solid #ac9c7d60;padding:6px;border-radius:30px;box-shadow:0 4px 10px #56442612;z-index:5}.inspector[hidden]{display:none}.inspector .round{width:36px;height:36px;background:transparent;box-shadow:none;border-color:transparent}.inspector .round:hover{background:#e6dfcd}.timeline{position:fixed;left:50%;bottom:113px;transform:translate(-50%);display:flex;gap:12px;align-items:center;padding:7px 15px;background:#fbf3e4ee;border:1px solid #ac9c7d60;border-radius:25px;z-index:5}.timeline[hidden]{display:none}.timeline svg{width:20px;height:20px;stroke-width:1.4}.timeline input{width:190px;accent-color:#687e76;height:16px}.hint{position:absolute;inset:0;pointer-events:none;transition:opacity .8s}.hint svg{position:absolute;left:36%;top:48%;width:39px;height:39px;stroke:#fffbea;stroke-width:1.2;fill:#b8b49877;filter:drop-shadow(1px 2px 1px #3d422b);animation:nudge 3s ease-in-out 3;opacity:0}@keyframes nudge{0%,to{opacity:0;transform:translate(0) rotate(-12deg)}20%,50%{opacity:.85}65%{opacity:.85;transform:translate(20px,-15px) rotate(-12deg)}}.loading{position:fixed;inset:0;background:#ece4d6;display:grid;place-items:center;z-index:10;transition:opacity 1s}.loading svg{width:35px;height:35px;color:#8f967d;animation:breathe 2s ease-in-out infinite}@keyframes breathe{50%{opacity:.3;transform:rotate(30deg)}}.loading.done{opacity:0;pointer-events:none}.flash{animation:flash .5s}@keyframes flash{40%{background:#c7dbbe;transform:scale(.93)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-aspect-ratio:17/10){.stage{inset:20px 75px 103px}.paper{height:100%}}@media(max-width:650px){.stage{inset:74px 8px 161px}.paper{width:100%;height:auto;border-width:4px;transform:rotate(-.35deg)}.tools{top:13px;right:12px;left:12px;flex-direction:row;justify-content:center;gap:9px}.tools .round{width:38px;height:38px}.dock{bottom:max(15px,env(safe-area-inset-bottom));gap:5px;padding:8px 9px;flex-wrap:wrap;justify-content:center;width:370px;border-radius:16px}.palette{order:-1;width:100%;justify-content:center;gap:0}.piece-button{width:40px;height:48px}.piece-button img{max-width:33px;max-height:45px}.dock>.divider{display:none}.dock .round{width:37px;height:37px}.transport{gap:8px}.inspector,.timeline{bottom:143px}.timeline input{width:150px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}