:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fff6e6;--paper:#fff;--ink:#2b2733;--muted:#7a7285;--line:#eadfca;--orange:#ff8a3d;--orange-d:#e56f20;--blue:#3d8bff;--blue-d:#2a6fe0;--green:#2fb862;--green-d:#22994f;--red:#ff4d5e;--red-d:#e0303f;--yellow:#ffd54d;--radius:20px;--shadow:0 4px 0 #2b27331f;--font:ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--ink);font-family:var(--font);-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.4}h1,h2{margin:0}.muted{color:var(--muted)}.center{text-align:center}.error{color:var(--red-d);font-weight:700}.row{align-items:center;display:flex}.row.center{justify-content:center}.gap{gap:12px}.wrap{flex-wrap:wrap}.emoji{font-size:30px;line-height:1;display:block}.emoji.huge{font-size:56px}.loading,.center-msg{text-align:center;place-content:center;gap:16px;height:100%;font-size:48px;display:grid}.center-msg p{font-size:24px}.btn{border:3px solid var(--ink);background:var(--paper);min-height:52px;box-shadow:var(--shadow);white-space:nowrap;border-radius:16px;justify-content:center;align-items:center;gap:6px;padding:0 18px;font-size:19px;font-weight:800;text-decoration:none;transition:transform 80ms;display:inline-flex}.btn:active:not(:disabled){box-shadow:none;transform:translateY(2px)}.btn.big{min-height:64px;padding:0 26px;font-size:22px}.btn.big-ish{min-height:56px;font-size:21px}.btn.green{background:var(--green);color:#fff}.btn.blue{background:var(--blue);color:#fff}.btn.red{background:var(--red);color:#fff}.icon-btn{border:3px solid var(--ink);background:var(--paper);border-radius:14px;flex:none;place-items:center;width:48px;height:48px;font-size:20px;display:inline-grid}.screen{min-height:100%;padding:12px max(16px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));flex-direction:column;gap:12px;display:flex}.bar{grid-template-columns:auto 1fr auto;align-items:center;gap:12px;display:grid}.bar-title{text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:26px;font-weight:900;overflow:hidden}.title-btn{background:0 0;border:none;padding:6px}.home{gap:22px;width:100%;max-width:1200px;margin:0 auto;padding-top:20px}.logo{letter-spacing:-1px;font-size:44px;font-weight:900}.logo span{color:var(--orange)}.logo .logo-b{color:var(--blue)}.home-actions{grid-template-columns:1fr 1fr;gap:16px;display:grid}.big-action{border:4px solid var(--ink);color:#fff;border-radius:28px;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:150px;font-size:30px;font-weight:900;display:flex;box-shadow:0 6px #2b273333}.big-action .emoji{font-size:54px}.big-action.orange{background:var(--orange)}.big-action.blue{background:var(--blue)}.big-action:active{box-shadow:none;transform:translateY(3px)}.section-title{margin-bottom:10px;font-size:24px;font-weight:900}.home-foot{text-align:center;margin-top:auto;font-size:14px}.shelf,.cast-grid{align-items:center;gap:12px;padding:4px 2px 10px;display:flex;overflow-x:auto}.cast-grid{flex-wrap:wrap;justify-content:center;overflow:visible}.shelf-item{border:3px solid var(--ink);background:var(--paper);width:120px;height:140px;box-shadow:var(--shadow);border-radius:20px;flex-direction:column;flex:none;justify-content:center;align-items:center;gap:4px;padding:8px;display:flex}.shelf-item.add{color:var(--orange);border-style:dashed;font-size:44px;font-weight:900}.shelf-item.add .shelf-name{color:var(--ink)}.shelf-img{object-fit:contain;pointer-events:none;width:100%;height:90px}.shelf-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:15px;font-weight:800;overflow:hidden}.samples-hint{color:var(--muted);flex-wrap:wrap;align-items:center;gap:10px;font-weight:700;display:flex}.story-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;display:grid}.story-tile{border:3px solid var(--ink);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);text-align:left;padding:0;position:relative;overflow:hidden}.story-thumb{aspect-ratio:16/9;background:#ffe9c7;place-items:center;display:grid;position:relative}.story-thumb img{object-fit:cover;pointer-events:none;width:100%;height:100%}.thumb-emoji{font-size:48px}.play-badge{background:#ffffffeb;border-radius:50%;place-items:center;width:40px;height:40px;font-size:18px;display:grid;position:absolute;inset:auto auto 10px 10px}.story-meta{flex-direction:column;gap:2px;padding:10px 12px;font-size:15px;display:flex}.story-meta strong{font-size:18px}.tile-more{place-items:center;width:40px;height:40px;font-size:24px;font-weight:900;display:grid;position:absolute;bottom:8px;right:6px}.modal-backdrop{z-index:50;background:#1e182873;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{color:var(--ink);background:var(--bg);border:4px solid var(--ink);border-radius:28px;width:min(440px,100%);max-height:calc(100dvh - 32px);padding:20px;overflow:auto;box-shadow:0 10px 40px #00000040}.modal.wide{width:min(900px,100%)}.modal-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.modal-head h2{font-size:24px;font-weight:900}.menu{flex-direction:column;gap:10px;display:flex}.menu-preview{object-fit:contain;height:120px}.confirm-text{text-align:center;margin:10px 0 20px;font-size:22px;font-weight:800}.text-input,.name-input{border:3px solid var(--ink);width:100%;min-height:56px;font:inherit;background:var(--paper);-webkit-user-select:text;user-select:text;border-radius:16px;padding:0 16px;font-size:22px;font-weight:800}.video-preview{background:#000;border-radius:16px;width:100%}.creator{height:100%}.creator-body{flex:1;gap:16px;min-height:0;display:flex}.canvas-wrap{flex:1;place-items:center;min-width:0;display:grid;position:relative}.draw-canvas{aspect-ratio:4/3;border:3px solid var(--ink);touch-action:none;cursor:crosshair;width:min(100%,133.333dvh - 146.667px);height:auto;box-shadow:var(--shadow);background:#fff;border-radius:24px}.canvas-hint{pointer-events:none;text-align:center;color:#c9bfae;font-size:22px;font-weight:800;position:absolute}.nudge,.toast{background:var(--ink);color:#fff;text-align:center;pointer-events:none;z-index:5;border-radius:999px;max-width:90%;padding:10px 18px;font-size:18px;font-weight:800;position:absolute;top:16px;left:50%;transform:translate(-50%)}.busy{background:#fff6e6cc;border-radius:24px;place-content:center;justify-items:center;gap:14px;font-size:22px;font-weight:800;display:grid;position:absolute;inset:0}.spinner{border:7px solid var(--line);border-top-color:var(--orange);border-radius:50%;width:54px;height:54px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.tools{flex-direction:column;flex:none;justify-content:center;gap:16px;width:250px;display:flex}.crayons{grid-template-columns:repeat(3,1fr);justify-items:center;gap:12px;display:grid}.crayon{border:3px solid #00000026;border-radius:50%;width:60px;height:60px;transition:transform .1s}.crayon.on{border:5px solid var(--ink);transform:scale(1.12)}.tool-row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.tool{border:3px solid var(--line);background:var(--paper);border-radius:16px;place-items:center;width:56px;height:56px;font-size:24px;display:grid}.tool.on{border-color:var(--ink);background:#fff1d6}.dot{border-radius:50%;display:block}.stage-box{aspect-ratio:16/9;width:min(100%, calc((100dvh - var(--reserve,300px)) * 16 / 9));border:4px solid var(--ink);background:#fff;border-radius:22px;flex:none;margin:0 auto;position:relative;overflow:hidden}.stage-box.recording{border-color:var(--red);box-shadow:0 0 0 5px #ff4d5e4d}.stage-host,.stage-canvas{display:block;position:absolute;inset:0;width:100%!important;height:100%!important}.stage-tip{color:#fff;pointer-events:none;white-space:nowrap;background:#2b2733bf;border-radius:999px;padding:6px 14px;font-weight:800;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.stage-empty{border:4px dashed var(--ink);background:#ffffffd9;border-radius:24px;padding:20px 30px;font-size:24px;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.countdown{background:#1e182859;place-items:center;display:grid;position:absolute;inset:0}.countdown span{color:#fff;text-shadow:0 6px #0000004d;font-size:180px;font-weight:900;animation:.8s ease-out pop}@keyframes pop{0%{opacity:0;transform:scale(1.6)}30%{opacity:1}to{transform:scale(1)}}.rec-badge{background:var(--red);color:#fff;font-variant-numeric:tabular-nums;pointer-events:none;border-radius:999px;padding:6px 14px;font-weight:900;position:absolute;top:12px;left:12px}.moves{--reserve:330px;height:100%}.panel{flex-direction:column;align-items:center;gap:8px;display:flex}.panel-label{font-size:18px;font-weight:900}.move-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.move-btn{border:3px solid var(--ink);background:var(--paper);width:92px;height:84px;box-shadow:var(--shadow);border-radius:18px;flex-direction:column;flex:none;justify-content:center;align-items:center;gap:4px;font-size:16px;font-weight:800;display:flex}.move-btn.on{border-color:var(--orange-d);background:#ffd9b8}.move-btn:active:not(:disabled){box-shadow:none;transform:translateY(2px)}.picker{width:100%;max-width:1200px;margin:0 auto}.card-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;display:grid}.card-grid.bgs{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.card-grid.bgs.compact{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.template-card,.bg-card{border:3px solid var(--ink);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);text-align:center;flex-direction:column;align-items:center;gap:6px;padding:18px;display:flex}.template-card strong{font-size:22px}.scene-dots{gap:6px;margin-top:4px;display:flex}.scene-dots i{background:var(--orange);border-radius:4px;width:14px;height:14px}.bg-card{padding:0 0 10px;font-size:18px;font-weight:800;overflow:hidden}.bg-card img{aspect-ratio:16/9;object-fit:cover;pointer-events:none;width:100%}.bg-card.on{outline:5px solid var(--orange)}.studio{--reserve:330px;gap:10px;height:100%;padding-top:10px;padding-bottom:10px}.prompt-banner{border:3px solid var(--line);background:#fff1d6;border-radius:18px;align-items:center;gap:12px;min-height:56px;padding:4px 14px 4px 4px;display:flex}.prompt-label{white-space:nowrap;color:var(--orange-d);font-size:20px;font-weight:900}.prompt-text{font-size:20px;font-weight:700}.studio-main{flex:1;justify-content:center;align-items:flex-start;gap:12px;min-height:0;display:flex}.studio-main .stage-box{width:min(calc(100% - 212px), calc((100dvh - var(--reserve)) * 16 / 9));margin:0}.side{flex:none;width:200px;transition:opacity .2s}.side.dim{opacity:.45}.move-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.move-grid .move-btn{width:100%;height:76px}.controls{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.control-group{align-items:center;gap:10px;display:flex}.rec-btn{border:4px solid var(--ink);background:var(--red);color:#fff;min-width:190px;min-height:64px;box-shadow:var(--shadow);border-radius:999px;justify-content:center;align-items:center;gap:12px;font-size:26px;font-weight:900;display:inline-flex}.rec-dot{background:#fff;border-radius:50%;width:24px;height:24px}.rec-btn.stop{animation:1.2s ease-in-out infinite pulse}.stop-square{background:#fff;border-radius:4px;width:22px;height:22px}@keyframes pulse{50%{box-shadow:0 0 0 10px #ff4d5e40}}.scene-strip{flex:none;align-items:center;gap:10px;padding:4px 2px 6px;display:flex;overflow-x:auto}.scene-card{border:3px solid var(--line);background:var(--paper);border-radius:14px;flex:none;width:128px;height:80px;padding:0;position:relative;overflow:hidden}.scene-card img{object-fit:cover;pointer-events:none;opacity:.8;width:100%;height:100%}.scene-card.on{border-color:var(--orange);box-shadow:0 0 0 3px #ff8a3d59}.scene-card.on img{opacity:1}.scene-card:disabled{opacity:.6}.scene-card.add{border:3px dashed var(--ink);width:80px;font-size:36px;font-weight:900}.scene-num{background:var(--ink);color:#fff;border-radius:50%;place-items:center;width:26px;height:26px;font-size:15px;font-weight:900;display:grid;position:absolute;top:4px;left:4px}.scene-done{font-size:20px;position:absolute;top:2px;right:4px}.scene-label{white-space:nowrap;text-overflow:ellipsis;background:#ffffffe6;padding:2px 4px;font-size:13px;font-weight:800;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.scene-tools{flex:none;gap:6px;margin-left:auto;display:flex}.player{--reserve:200px;color:#fff;background:#1e1830;height:100%}.player .muted{color:#b9b0c8}.player .bar .btn{color:var(--ink)}.player-stage{border-color:#000}.big-play{background:var(--orange);color:#fff;border:5px solid #fff;border-radius:50%;width:110px;height:110px;padding-left:10px;font-size:46px;position:absolute;top:78%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 30px #00000059}.player-controls{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.player-controls .btn:not(.green){color:var(--ink)}.player:fullscreen{justify-content:center;padding:0}.player:fullscreen .bar{display:none}.player:fullscreen .player-controls{display:none}.player:fullscreen p{display:none}.player:fullscreen .stage-box{--reserve:0px;border:none;border-radius:0}@media (width<=820px),(orientation:portrait){.studio,.moves{height:auto}.studio-main{flex-direction:column;flex:none;align-items:stretch}.studio-main .stage-box,.stage-box,.side{width:100%}.move-grid{display:flex;overflow-x:auto}.move-grid .move-btn{width:84px;height:76px}.creator{height:auto}.creator-body{flex-direction:column}.draw-canvas,.tools{width:100%}.crayons{grid-template-columns:repeat(9,1fr)}.crayon{width:38px;height:38px}.home-actions{grid-template-columns:1fr}.big-action{min-height:110px;font-size:26px}.bar-title{font-size:20px}.prompt-label,.prompt-text{font-size:17px}}@media (width<=520px){.btn{padding:0 12px;font-size:16px}.rec-btn{min-width:150px;font-size:22px}.countdown span{font-size:110px}}