:root{--bg:#fff4d6;--bg2:#ffe3a8;--ink:#4a2f1b;--primary:#ff7a59;--primary-dark:#e2563a;--secondary:#4dabf7;--card:#fff;--radius:24px;--font:ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, -apple-system, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overflow-x:hidden}.screen{min-height:100dvh;padding:env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));background:radial-gradient(circle at 20% 10%, #fffbea 0, transparent 40%), radial-gradient(circle at 85% 90%, #ffd8a8 0, transparent 45%), var(--bg);flex-direction:column;display:flex}.btn{font:inherit;color:#fff;background:var(--primary);cursor:pointer;min-height:56px;box-shadow:0 6px 0 var(--primary-dark);touch-action:manipulation;border:none;border-radius:999px;padding:.75em 1.5em;font-size:1.25rem;font-weight:700;transition:transform .1s,box-shadow .1s}.btn:active{box-shadow:0 2px 0 var(--primary-dark);transform:translateY(4px)}.btn-secondary{background:var(--secondary);box-shadow:0 6px #2f86d1}.btn-round{flex:none;width:56px;height:56px;padding:0;font-size:1.6rem}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.home,.library{--navy:#1b2a7a;background:linear-gradient(#2390ee 0%,#56b6fa 42%,#a9e0ff 74%,#d6f3ff 100%);position:relative}.home{overflow:hidden}.sky-fixed{background:linear-gradient(#2390ee 0%,#56b6fa 42%,#a9e0ff 74%,#d6f3ff 100%);position:fixed;overflow:hidden}.home-sky{pointer-events:none;position:absolute;inset:0}.sun{background:radial-gradient(circle,#fffbd0 0,#ffe85c 30%,#ffe85c59 50%,#ffe85c00 70%);border-radius:50%;width:40vmin;height:40vmin;animation:6s ease-in-out infinite sun-pulse;position:absolute;top:-8vmin;right:-8vmin}@keyframes sun-pulse{50%{transform:scale(1.12)}}.cloud{opacity:.95;filter:drop-shadow(0 8px #ffffff4d);height:auto;animation:linear infinite cloud-move;position:absolute;left:0}@keyframes cloud-move{0%{transform:translate(-220px)}to{transform:translate(100vw)}}.grass{width:100%;height:clamp(90px,22vh,190px);position:absolute;bottom:0;left:0}.flower{transform-origin:50% 100%;filter:drop-shadow(0 3px #1e5a1459);height:auto;animation:3.2s ease-in-out infinite sway;animation-delay:var(--fl);position:absolute}@keyframes sway{0%,to{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}.floater{filter:drop-shadow(0 6px 6px #0a286e4d);height:auto;animation:1s cubic-bezier(.2,.9,.3,1.2) both floater-in,7s ease-in-out infinite drift;animation-delay:calc(var(--fd) * .3), var(--fd);position:absolute}@keyframes floater-in{0%{opacity:0;transform:scale(0)rotate(-90deg)}}@keyframes drift{0%,to{translate:0;rotate:0deg}33%{translate:10px -16px;rotate:12deg}66%{translate:-8px 8px;rotate:-8deg}}.home-layout{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:clamp(14px,2.5vh,28px);padding-block:16px;display:flex;position:relative}.home-side{flex-direction:column;align-items:center;gap:clamp(14px,3vh,30px);display:flex}.cover-wrap{z-index:1;width:min(86vw,520px,91.4dvh - 383.88px);min-width:190px;position:relative}.cover-frame,.loop-frame{background:#fff;border-radius:clamp(16px,2.6vw,28px);padding:clamp(6px,1.2vw,12px);box-shadow:0 0 0 3px #ffffff8c,0 10px 0 -2px #c9e6fb,0 26px 44px -10px #0a286e8c}.cover-frame{animation:.6s ease-out both frame-bump;animation-delay:var(--intro)}.loop-wrap{width:min(56vw,300px);animation:.6s cubic-bezier(.3,1.5,.5,1) both play-in;animation-delay:calc(var(--intro) + .1s);position:relative}.loop-round{position:relative}.loop-frame{rotate:2deg}.hero{width:100%;height:auto;display:block;overflow:visible}.hero-slot{fill:#e6f4ff;stroke:#b5dcfa;stroke-width:6px;stroke-dasharray:18 14}.hero-ghost{filter:grayscale()contrast(.85)brightness(1.1);opacity:.9}.hero-piece{transform-box:view-box;animation:.8s cubic-bezier(.18,.9,.3,1.12) both piece-in;animation-delay:var(--d)}.hero-shadow{fill:#0a286e66;animation:.8s ease-in both fade-out;animation-delay:var(--d)}.hero-edge{fill:none;stroke:#fff;stroke-opacity:.9;stroke-width:4px;stroke-linejoin:round;animation:.8s ease-out both edge-soften;animation-delay:calc(var(--done) + .2s)}.hero-flash{fill:#fff;opacity:0;animation:.45s ease-out flash;animation-delay:calc(var(--d) + .72s)}.hero-shine{opacity:0;animation:1.1s ease-in-out both shine;animation-delay:var(--done)}@keyframes piece-in{0%{transform:translate(var(--x), var(--y)) rotate(var(--r)) scale(var(--s,1.15));opacity:0}12%{opacity:1}to{opacity:1;transform:none}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes flash{0%{opacity:1}to{opacity:0}}@keyframes edge-soften{to{stroke-opacity:.3;stroke-width:2.5px}}@keyframes shine{0%{opacity:1;transform:translate(0)}99%{opacity:1;transform:translateX(var(--shine-to,2100px))}to{opacity:0;transform:translateX(var(--shine-to,2100px))}}@keyframes frame-bump{40%{transform:scale(1.035)rotate(-.6deg)}}.leaving .hero-piece{animation:.8s cubic-bezier(.5,0,.8,.4) both piece-out;animation-delay:var(--od)}.leaving .hero-edge{stroke-opacity:.9;stroke-width:4px;animation:none}@keyframes piece-out{0%{opacity:1;transform:none}20%{opacity:1;transform:translateY(-30px)scale(1.06)}to{transform:translate(var(--ox), var(--oy)) rotate(var(--or)) scale(.7);opacity:0}}.loop-ribbon{filter:drop-shadow(0 4px #d99a00)drop-shadow(0 8px 8px #0a286e4d);max-width:112%;animation:.5s cubic-bezier(.3,1.6,.5,1) both caption-in;animation-delay:calc(var(--done) + .3s);position:absolute;bottom:0;left:50%;translate:-50% 55%}.loop-ribbon span{color:var(--navy);white-space:nowrap;text-overflow:ellipsis;clip-path:polygon(0 0,100% 0,calc(100% - .7em) 50%,100% 100%,0 100%,.7em 50%);background:linear-gradient(#ffe45c,#ffc81e);padding:.35em 1.5em;font-size:clamp(.8rem,1.9vw,1.05rem);font-weight:800;display:block;overflow:hidden}.leaving .loop-ribbon{animation:.3s ease-in both caption-out}@keyframes caption-in{0%{opacity:0;transform:scale(0)rotate(-8deg)}}@keyframes caption-out{to{opacity:0;transform:scale(.4)}}.hero-sparkles{pointer-events:none;position:absolute;inset:0}.sparkle{color:#ffd23f;text-shadow:0 0 10px #ffffffe6;opacity:0;animation:1.3s cubic-bezier(.1,.8,.3,1) burst;animation-delay:calc(var(--done) + var(--sd));font-size:clamp(20px,3.4vw,34px);position:absolute;top:50%;left:50%}.sparkle:nth-child(3n+1){color:#ff5fa2}.sparkle:nth-child(3n+2){color:#fff}@keyframes burst{0%{opacity:1;transform:translate(-50%,-50%)scale(.2)}70%{opacity:1}to{transform:translate(calc(-50% + var(--sx) * 48vmin), calc(-50% + var(--sy) * 48vmin)) scale(1.3) rotate(180deg);opacity:0}}.btn-play{min-height:76px;padding:.55em 2.3em;font-size:clamp(1.7rem,5vw,2.4rem)}.home-play{z-index:2;font:inherit;letter-spacing:.02em;border:5px solid var(--navy);cursor:pointer;touch-action:manipulation;min-height:72px;box-shadow:0 8px 0 var(--navy), 0 22px 30px -8px #0a286e99;animation:.7s cubic-bezier(.3,1.7,.5,1) both play-in,2.2s ease-in-out infinite play-pulse;animation-delay:calc(var(--intro) + .3s), calc(var(--intro) + 1.4s);background:#fff;border-radius:999px;padding:.26em .9em .32em;font-size:clamp(2.2rem,7vw,3.4rem);font-weight:900;line-height:1;position:relative}.home-play:active{box-shadow:0 3px 0 var(--navy), 0 10px 16px -8px #0a286e99;transform:translateY(5px)}.home-play:before,.home-play:after{content:"";background:radial-gradient(50% 14% at 50% 12%,#ffc400 98%,#0000),radial-gradient(50% 14%,#ffc400 98%,#0000),radial-gradient(50% 14% at 50% 88%,#ffc400 98%,#0000);width:.5em;height:1.1em;position:absolute;top:50%;translate:0 -50%}.home-play:before{right:calc(100% + .25em)}.home-play:after{left:calc(100% + .25em)}.play-letter{color:var(--c);text-shadow:0 .06em #0000002e;animation:2.8s ease-in-out infinite letter-wave;animation-delay:calc(var(--intro) + 1.5s + var(--i) * .1s);display:inline-block}@keyframes letter-wave{0%,24%,to{transform:none}12%{transform:translateY(-.18em)rotate(-6deg)}}@keyframes play-in{0%{opacity:0;transform:scale(0)}}@keyframes play-pulse{50%{scale:1.06}}@media (orientation:landscape) and (width>=640px){.home-layout{flex-direction:row;gap:clamp(28px,6vw,80px)}.cover-wrap{width:min(48vw,91.4dvh - 51.184px)}.loop-wrap{width:min(32vw,380px,133.3dvh - 266.6px)}}@media (height<=500px){.home-play{border-width:4px;min-height:56px;font-size:2rem}.home-side{gap:12px}}.home:not(.ready) .home-layout,.home:not(.ready) .home-layout *{animation-play-state:paused!important}.topbar{align-items:center;gap:12px;padding-block:12px;display:flex}.topbar h2{text-align:center;white-space:nowrap;text-overflow:ellipsis;flex:1;margin:0;font-size:clamp(1.1rem,3.5vw,1.6rem);overflow:hidden}.topbar-spacer{flex:none;width:56px}.cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:20px;padding-block:8px 32px;display:grid}.card{font:inherit;color:inherit;background:var(--card);border-radius:var(--radius);cursor:pointer;touch-action:manipulation;border:none;flex-direction:column;gap:10px;padding:12px;transition:transform .15s;display:flex;box-shadow:0 8px #00000014}.card:active{transform:scale(.97)}.card-thumb{aspect-ratio:4/3;background:#f1e6cf;border-radius:16px;place-items:center;display:grid;overflow:hidden}.card-thumb img{object-fit:cover;width:100%;height:100%;display:block}.card-missing{font-size:3rem}.card-title{padding-inline:4px;font-size:1.15rem;font-weight:700}.library>.topbar,.library>.cards{position:relative}.library .topbar h2{color:#fff;letter-spacing:.01em;text-shadow:0 3px 0 var(--navy), 0 6px 12px #0a286e73;font-size:clamp(1.25rem,4vw,1.9rem);font-weight:900}.library .card{color:var(--navy);box-shadow:0 0 0 3px #ffffff8c,0 8px 0 -1px #c9e6fb,0 20px 28px -12px #0a286e8c}.library .card-thumb{background:#e6f4ff}.screen.play{height:100dvh;position:relative;overflow:hidden}.board-wrap{flex:1;min-height:0;margin-bottom:12px;position:relative}.board-svg{touch-action:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.board-bg{fill:#fff}.board-shadow{fill:#78481426}.piece{cursor:grab}.cluster{transition:transform .28s ease-out}.cluster.is-dragging{transition:none}.cluster.is-dragging .piece{cursor:grabbing}.cluster-scale{transition:transform .22s cubic-bezier(.3,1.4,.5,1)}.locked-layer{pointer-events:none}.piece-outline{fill:#0000;stroke:#3c230f73;stroke-width:1.5px}.locked-cluster .piece-outline{stroke:#3c230f1f}.piece-shadow{fill:#3c230f47}.locked-cluster,.cluster-joined{transform-box:fill-box;transform-origin:50%;animation:.4s ease-out pop}@keyframes pop{40%{transform:scale(1.05)}}.piece-flash{fill:none;stroke:#fff;stroke-width:8px;opacity:0;pointer-events:none;animation:.7s ease-out flash}.message{text-align:center;flex:1;place-content:center;justify-items:center;gap:16px;font-size:1.4rem;font-weight:700;display:grid}.message p{margin:0}.done-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.topbar-actions{flex:none;gap:10px;display:flex}.btn-round.is-on{background:#2f86d1;transform:translateY(4px);box-shadow:0 2px #1c6aad}.btn:disabled{opacity:.5}.reference{z-index:5;cursor:pointer;background:#4a2f1b8c;border:none;place-items:center;padding:24px;animation:.2s ease-out fade-in;display:grid;position:absolute;inset:0}.reference img{aspect-ratio:4/3;object-fit:contain;border-radius:var(--radius);background:#fff;border:8px solid #fff;max-width:100%;max-height:100%;box-shadow:0 12px 40px #0000004d}@keyframes fade-in{0%{opacity:0}}.celebration{z-index:10;padding:16px 16px calc(20px + env(safe-area-inset-bottom));background:#fff4d626;place-items:end center;display:grid;position:absolute;inset:0;overflow:hidden}.confetti{pointer-events:none;position:absolute;inset:0}.confetti span{animation:linear infinite fall;position:absolute;top:-20px}@keyframes fall{to{transform:translateY(110dvh)rotate(540deg)}}.celebration-card{text-align:center;background:#fff;border-radius:32px;width:min(100%,520px);padding:16px 24px 22px;animation:.5s cubic-bezier(.2,1.4,.4,1) 1.2s backwards pop-in;position:relative;box-shadow:0 16px 40px #0003}@keyframes pop-in{0%{opacity:0;transform:scale(.6)}}.celebration-stars{color:#ffc53d;letter-spacing:6px;font-size:2.2rem}.celebration-stars span{animation:.5s ease-out backwards star;display:inline-block}.celebration-stars span:first-child{animation-delay:1.5s}.celebration-stars span:nth-child(2){font-size:1.3em;animation-delay:1.65s}.celebration-stars span:nth-child(3){animation-delay:1.8s}@keyframes star{0%{transform:scale(0)rotate(-90deg)}}.celebration-title{color:var(--primary);margin:4px 0 0;font-size:clamp(2rem,7vw,2.8rem);font-weight:800}.celebration-sub{margin:0 0 16px;font-size:clamp(1.2rem,4vw,1.6rem);font-weight:700}.card-thumb{position:relative}.card-badge{color:#fff;background:#ffc53d;border-radius:50%;place-items:center;width:44px;height:44px;font-size:1.6rem;display:grid;position:absolute;top:8px;right:8px;box-shadow:0 3px #e0a420}.setup-body{flex-direction:column;flex:1;align-items:center;gap:20px;padding-block:4px 24px;display:flex}.setup-preview{aspect-ratio:4/3;border-radius:var(--radius);background:#fff;border:6px solid #fff;place-items:center;width:min(100%,560px);display:grid;position:relative;overflow:hidden;box-shadow:0 8px #00000014}.setup-preview img{object-fit:contain;width:100%;height:100%;display:block}.setup-grid{width:100%;height:100%;position:absolute;inset:0}.setup-grid line{stroke:#ffffffe6;stroke-width:.6px;stroke-dasharray:2 1.5}.setup-options{flex-direction:column;align-items:center;gap:16px;width:min(100%,520px);display:flex}.choice-group{gap:12px;width:100%;display:flex}.choice{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:#fff;border:4px solid #0000;border-radius:20px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:6px;min-height:64px;padding:10px;display:flex;box-shadow:0 5px #00000014}.choice.is-active{border-color:var(--primary);background:#fff1ea}.choice-thumb{aspect-ratio:4/3;object-fit:cover;border-radius:10px;width:100%;max-width:140px}.choice-label{font-size:1.1rem;font-weight:800}.choice-sub{opacity:.75;font-size:.95rem}@media (orientation:landscape) and (width>=700px){.setup-body{flex-direction:row;justify-content:center;align-items:center;gap:32px}.setup-preview{width:min(52%,600px)}.setup-options{width:min(42%,440px)}}@media (height<=500px){.topbar{padding-block:6px}.btn-round{width:44px;height:44px;font-size:1.3rem}.topbar-spacer{width:44px}.celebration-stars{display:none}.celebration-card{padding:12px 18px 16px}.celebration-sub{margin-bottom:10px}}