:root{--desk:#cde9f4;--paper:#fff;--ink:#2b2d42;--muted:#5a6477;--soft:#eef1f6;--story:#ff6b3d;--story-dk:#d4461a;--magic:#7c5cff;--magic-dk:#5134d1;--spark:#ffd23f;--gold:#ffc21a;--zh:#2f9e62;--zh-dk:#1f7446;--en:#2e86de;--en-dk:#1c63ad;--stop:#e23b3b;--stop-dk:#a91f1f;--f-display:"Chiron GoRound TC", "PingFang TC", "Heiti TC", sans-serif;--f-en:"Baloo 2", "Chiron GoRound TC", system-ui, sans-serif;--gap:clamp(12px, 2vw, 24px);--tool:clamp(52px, 6.4vw, 68px);--story-h:76px;--frame-gap:12px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{overscroll-behavior:none;height:100%;margin:0;overflow:hidden}body{background:var(--desk);color:var(--ink);font-family:var(--f-display);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}button:focus-visible{outline:3px solid var(--magic);outline-offset:3px}svg{display:block}[hidden]{display:none!important}input,textarea{-webkit-user-select:text;user-select:text}#app,.screen{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--desk);grid-template-rows:auto 1fr auto;display:grid;position:fixed;inset:0}.screen{z-index:20}.screen.panel{z-index:30;grid-template-rows:auto 1fr}.top{padding:14px var(--gap) 8px;justify-content:space-between;align-items:center;gap:12px;min-height:72px;display:flex}.title{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;margin:0;font-size:clamp(22px,2.6vw,30px);font-weight:700;overflow:hidden}.top-right{align-items:center;gap:12px;display:flex}.round{background:#fffc;border-radius:50%;place-items:center;width:56px;height:56px;display:grid;box-shadow:0 3px #00000014}.round svg{width:30px;height:30px}.round:active{box-shadow:none;transform:translateY(2px)}.back{background:#fffc;border-radius:28px;flex:none;align-items:center;gap:6px;height:56px;padding:0 18px 0 12px;font-size:19px;font-weight:700;display:flex}.back svg{width:26px;height:26px}.screen .top{grid-template-columns:1fr auto 1fr;display:grid}.screen .top .back{justify-self:start}.screen .top .title{text-align:center}.screen .top .top-right{justify-self:end}.timer{font-variant-numeric:tabular-nums;color:var(--story-dk);font-size:22px;font-weight:700}.mid{grid-template-columns:calc(var(--tool) + 22px) 1fr calc(var(--tool) + 22px);gap:var(--gap);padding:0 var(--gap);min-height:0;display:grid}.desk{place-items:center;min-width:0;min-height:0;display:grid;container-type:size}.frame{--r:1.3333;width:min(100cqw, calc((100cqh - var(--story-h) - var(--frame-gap)) * var(--r)));gap:var(--frame-gap);display:grid}.paper{aspect-ratio:4/3;background:var(--paper);border-radius:22px;width:100%;position:relative;overflow:hidden;box-shadow:0 6px #00000014}#canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;position:absolute;inset:0}.rail{background:#fff;border-radius:28px;flex-direction:column;justify-content:space-evenly;align-items:center;gap:6px;min-height:0;padding:10px 0;transition:opacity .25s;display:flex;box-shadow:0 5px #00000014}.tool{width:var(--tool);height:var(--tool);border-radius:18px;place-items:center;display:grid;position:relative}.tool>svg:first-child{width:58%;height:58%}.tool.on{box-shadow:inset 0 0 0 4px var(--gold);background:#ffe9a8}.tool:active{transform:scale(.94)}.dot{width:var(--d);height:var(--d);background:var(--ink);border-radius:50%}.hold-ring{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;transform:rotate(-90deg)}.hold-ring circle{fill:none;stroke:var(--stop);stroke-width:3.5px;stroke-dasharray:107;stroke-dashoffset:107px}.tool.holding .hold-ring circle{stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}.sw{width:calc(var(--tool) * .78);height:calc(var(--tool) * .78);background:var(--c);border-radius:50%;box-shadow:inset 0 -4px #00000026}.sw.on{outline:5px solid var(--ink);outline-offset:4px}#app[data-state=recording] .rail,#app[data-state=casting] .rail{opacity:.35;pointer-events:none}.bot{padding:16px var(--gap) 22px;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(14px,3vw,32px);min-height:108px;display:flex}.btn{color:#fff;white-space:nowrap;border-radius:999px;align-items:center;gap:12px;min-height:68px;padding:14px 36px;font-size:clamp(24px,2.8vw,32px);font-weight:700;line-height:1.2;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.btn svg{flex:none;width:1.15em;height:1.15em}.btn:active{transform:translateY(6px)}.btn.story{background:var(--story);box-shadow:0 7px 0 var(--story-dk)}.btn.story:active{box-shadow:0 1px 0 var(--story-dk)}.btn.magic{background:var(--magic);box-shadow:0 7px 0 var(--magic-dk)}.btn.magic:active{box-shadow:0 1px 0 var(--magic-dk)}.btn.magic.glow{animation:1.8s ease-in-out infinite glow}@keyframes glow{0%,to{box-shadow:0 7px 0 var(--magic-dk), 0 0 0 0 #7c5cff73}50%{box-shadow:0 7px 0 var(--magic-dk), 0 0 0 14px #7c5cff00}}.btn.stop{background:var(--stop);box-shadow:0 7px 0 var(--stop-dk)}.btn.ghost{color:var(--ink);background:#fff;min-height:60px;padding:12px 26px;font-size:clamp(20px,2.2vw,25px);box-shadow:0 7px #b8c7d3}.btn.ghost:active{box-shadow:0 1px #b8c7d3}.btn.dark{background:var(--ink);min-height:58px;padding:12px 30px;font-size:22px;box-shadow:0 6px #11131f}.btn:disabled{opacity:.6;pointer-events:none}.rec{place-items:center;display:grid;position:relative}.rec:before,.rec:after{content:"";pointer-events:none;border:4px solid #e23b3b59;border-radius:999px;animation:1.8s ease-out infinite ring;position:absolute;inset:-12px}.rec:after{animation-delay:.9s}@keyframes ring{0%{opacity:1;transform:scale(.92)}to{opacity:0;transform:scale(1.22)}}.wave{align-items:center;gap:6px;height:44px;display:flex}.wave i{background:var(--story);border-radius:8px;width:8px;height:100%;animation:1s ease-in-out infinite bar}.wave i:first-child{height:40%}.wave i:nth-child(2){height:80%;animation-delay:.1s}.wave i:nth-child(3){height:60%;animation-delay:.2s}.wave i:nth-child(4){height:100%;animation-delay:.3s}.wave i:nth-child(5){height:55%;animation-delay:.4s}@keyframes bar{50%{transform:scaleY(.35)}}.story{height:var(--story-h);text-align:left;background:#fff;border:3px solid #0000;border-radius:18px;align-items:center;gap:12px;padding:6px 16px;font-size:clamp(16px,2vw,21px);line-height:1.45;transition:opacity .15s;display:flex;overflow:auto;box-shadow:0 4px #0000000f}.story>span{flex:1;min-width:0}.story>svg{flex:none;width:30px;height:30px}.story em,.story .hint{color:#9aa3b7;font-style:normal}.story.rec{background:#fff6e5;border-color:#ffcf8a}.story.rec em{color:#b9a58a}.story .edit{background:var(--soft);border-radius:50%;flex:none;place-items:center;width:44px;height:44px;display:grid}.story .edit svg{width:22px;height:22px}.spell{z-index:10;color:#fff;text-align:center;background:radial-gradient(circle at 50% 45%,#7c5cff99,#2d1b78eb);align-content:center;place-items:center;gap:18px;padding:24px;display:grid;position:absolute;inset:0}.spell h2{margin:0;font-size:clamp(26px,3.4vw,38px)}.wand{transform-origin:20% 80%;width:132px;height:132px;animation:1.6s ease-in-out infinite wave}.wand svg{width:100%;height:100%}@keyframes wave{50%{transform:rotate(-18deg)}}.steps{text-align:left;gap:10px;font-size:clamp(19px,2.2vw,24px);display:grid}.steps span{opacity:.55;align-items:center;gap:12px;transition:opacity .3s;display:flex}.steps span.done{opacity:1}.steps i{border:3px solid #fff;border-radius:50%;flex:none;width:22px;height:22px;transition:background .3s,border-color .3s}.steps span.done i{background:var(--spark);border-color:var(--spark)}.spell-note{opacity:.9;max-width:30em;min-height:1.5em;margin:0;font-size:20px}.spell.failed .wand{opacity:.5;animation:none}.spell.failed .steps,.spell.failed .spark{display:none}.spell-actions{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.spark{background:var(--spark);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);width:22px;height:22px;animation:1.4s ease-in-out infinite tw;position:absolute}@keyframes tw{50%{opacity:.4;transform:scale(.3)rotate(45deg)}}#result .desk{padding:0 var(--gap)}.stage{aspect-ratio:var(--r);background:var(--paper);border-radius:22px;width:100%;position:relative;box-shadow:0 6px #00000014}.stage .pic,.stage .orig{object-fit:fill;-webkit-user-drag:none;border-radius:22px;width:100%;height:100%;position:absolute;inset:0}.stage .orig{opacity:0;object-fit:contain;background:var(--paper);transition:opacity .15s}.stage.peek .orig{opacity:1}.stage.peek .hots{opacity:0}.story.empty{visibility:hidden}.hots{transition:opacity .15s;position:absolute;inset:0}.found{white-space:nowrap;align-items:center;gap:6px;font-size:20px;display:flex}.found i{clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);background:#d5dce6;width:22px;height:22px}.found i.on{background:var(--gold)}.finding{color:var(--magic-dk);animation:1.2s ease-in-out infinite fade}@keyframes fade{50%{opacity:.45}}.hot{border:4px solid var(--magic);background:#fff;border-radius:50%;place-items:center;width:56px;height:56px;margin:-28px 0 0 -28px;animation:.4s cubic-bezier(.3,1.6,.5,1) both pop;display:grid;position:absolute;box-shadow:0 4px 10px #2814784d}.hot svg{width:34px;height:34px}.hot:after{content:"";pointer-events:none;border:3px solid #fff;border-radius:50%;animation:1.8s ease-out infinite breathe;position:absolute;inset:-6px}.hot.seen{border-color:var(--gold)}.hot.seen:after{opacity:0;animation:none}@keyframes pop{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes breathe{0%{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.6)}}.focus-layer{z-index:5;position:absolute;inset:0}.focus-layer .shade{background:#1e184666;position:fixed;inset:0}.ring-box{border:4px dashed var(--spark);pointer-events:none;border-radius:14px;position:absolute;box-shadow:0 0 0 4px #ffd23f40}.wcard{z-index:1;background:#fff;border-radius:24px;gap:12px;width:min(360px,88vw);max-height:94%;padding:18px;display:grid;position:relative;overflow:auto;box-shadow:0 10px 30px #14103c59}.focus-layer .wcard{width:min(360px,46%);max-height:calc(100dvh - 120px);position:absolute;top:4%}.focus-layer .wcard.at-left{left:3%}.focus-layer .wcard.at-right{right:3%}.wcard .x{background:var(--soft);z-index:1;border-radius:50%;place-items:center;width:44px;height:44px;display:grid;position:absolute;top:10px;right:10px}.wcard .x svg{width:20px;height:20px}.wcard .thumb{background:var(--soft);border-radius:14px;place-items:center;height:130px;display:grid;overflow:hidden}.wcard .thumb img{object-fit:contain;max-width:100%;max-height:100%}.say{color:#fff;text-align:left;border-radius:16px;justify-content:space-between;align-items:center;gap:10px;padding:8px 18px;font-weight:700;transition:transform 80ms;display:flex}.say:active{transform:translateY(5px)}.say>svg{flex:none;width:30px;height:30px}.say.zh{background:var(--zh);box-shadow:0 6px 0 var(--zh-dk);font-size:46px;line-height:1.15}.say.en{background:var(--en);box-shadow:0 6px 0 var(--en-dk);font-size:38px;line-height:1.3;font-family:var(--f-en)}ruby{ruby-position:under;-webkit-ruby-position:after}ruby rt{letter-spacing:.08em;font-size:.36em;font-weight:500}.say.zh ruby rt{opacity:.92}.say .talk{align-items:center;gap:4px;height:26px;display:none}.say .talk i{background:#fff;border-radius:4px;width:5px;height:100%;animation:.9s ease-in-out infinite bar}.say .talk i:first-child{height:50%}.say .talk i:nth-child(2){animation-delay:.15s}.say .talk i:nth-child(3){height:70%;animation-delay:.3s}.say.talking>svg{display:none}.say.talking .talk{display:flex}.sent{border-top:2px dashed #e3e7ee;gap:4px;padding-top:8px;display:grid}.sent button{text-align:left;color:#4a5163;border-radius:10px;align-items:center;gap:10px;padding:6px 4px;font-size:19px;line-height:1.45;display:flex}.sent button:nth-child(2){font-family:var(--f-en);font-size:20px}.sent button.talking{background:#f3efff}.sent svg{flex:none;width:24px;height:24px}.wrong{color:var(--muted);background:var(--soft);border-radius:10px;justify-self:end;padding:6px 12px;font-size:15px}.modal{z-index:50;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal-shade{background:#14182873;position:absolute;inset:0}.modal>:not(.modal-shade){position:relative}.dialog{background:#fff;border-radius:24px;gap:18px;width:min(520px,100%);padding:26px 28px;display:grid;box-shadow:0 12px 40px #14182859}.dialog h3{margin:0;font-size:26px}.dialog-actions{flex-wrap:wrap;justify-content:flex-end;gap:16px;padding-bottom:6px;display:flex}.dialog textarea{font:inherit;resize:none;border:3px solid #cbd3df;border-radius:16px;width:100%;padding:12px 16px;font-size:22px;line-height:1.5}.dialog textarea:focus{border-color:var(--magic);outline:none}.gate{text-align:center}.gate .dialog-actions{justify-content:center}.gate-q{font-size:48px;font-weight:700;font-family:var(--f-en);margin:0}.btn.num{font-family:var(--f-en);justify-content:center;min-width:110px;font-size:34px}.shake{animation:.4s shake}@keyframes shake{20%,60%{transform:translate(-10px)}40%,80%{transform:translate(10px)}}.sheet{background:#fff;border-radius:26px;gap:16px;width:min(720px,100%);max-height:100%;padding:24px 28px;font-family:system-ui,-apple-system,PingFang TC,sans-serif;display:grid;overflow:auto;box-shadow:0 12px 40px #14182859}.sheet h3{font-family:var(--f-display);justify-content:space-between;align-items:center;margin:0;font-size:28px;display:flex}.sheet .x{background:var(--soft);border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.sheet .x svg{width:20px;height:20px}.sheet-note{color:#8a4b12;background:#fff6e5;border-radius:12px;margin:0;padding:10px 14px;font-size:17px}.srow{grid-template-columns:170px 1fr;align-items:center;gap:14px;font-size:17px;display:grid}.srow>label,.srow>span{color:#4a5163;font-weight:500}.srow small{color:#8a93a6;font-size:14px;font-weight:400;display:block}.field{align-items:center;gap:8px;min-width:0;display:flex}.field input{border:2px solid #cbd3df;border-radius:12px;flex:1;min-width:0;padding:10px 14px;font:16px ui-monospace,SF Mono,Menlo,monospace}#set-invite{text-transform:uppercase;font-family:var(--f-en), ui-monospace, monospace;letter-spacing:.06em;font-size:18px}.field input:focus{border-color:var(--magic);outline:none}.sbtn{background:var(--soft);white-space:nowrap;border-radius:12px;min-height:44px;padding:10px 16px;font-size:16px}.sbtn.pri{background:var(--ink);color:#fff}.okline{color:var(--zh);margin:-8px 0 0 184px;font-size:16px}.okline.bad{color:var(--stop)}.seg{background:var(--soft);border-radius:14px;flex-wrap:wrap;gap:4px;padding:4px;display:inline-flex}.seg button{color:var(--muted);border-radius:10px;min-height:40px;padding:8px 16px;font-size:16px}.seg button.on{color:var(--ink);background:#fff;font-weight:600;box-shadow:0 1px 4px #0000001f}.sfoot{color:#8a93a6;border-top:1px solid var(--soft);margin:0;padding-top:12px;font-size:14px;line-height:1.6}.grid-scroll{-webkit-overflow-scrolling:touch;padding:8px var(--gap) 32px;min-height:0;overflow:auto}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;display:grid}.art-card{background:#fff;border-radius:20px;align-content:start;gap:8px;padding:10px;display:grid;position:relative;box-shadow:0 5px #00000014}.art-open img{aspect-ratio:4/3;object-fit:cover;border-radius:12px;width:100%;display:block}.art-meta{justify-content:space-between;align-items:center;padding:0 4px;font-size:17px;display:flex}.art-del{border-radius:12px;place-items:center;width:44px;height:44px;display:grid}.art-del svg{width:26px;height:26px}.art-card p{color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;padding:0 4px 4px;font-size:16px;line-height:1.5;display:-webkit-box;overflow:hidden}.art-confirm{text-align:center;background:#fffffff2;border-radius:20px;place-content:center;gap:12px;font-size:20px;display:grid;position:absolute;inset:0}.art-confirm button{background:var(--soft);border-radius:14px;padding:10px 24px;font-size:18px}.art-confirm .danger{background:var(--stop);color:#fff}.word-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;display:grid}.word-tile{background:#fff;border-radius:20px;justify-items:center;gap:6px;padding:12px;display:grid;box-shadow:0 5px #00000014}.word-tile img{object-fit:contain;background:var(--soft);border-radius:10px;width:100%;height:100px}.word-tile b{font-size:32px;line-height:1.2}.word-tile span{font-family:var(--f-en);color:var(--en);font-size:22px}.empty{text-align:center;color:var(--muted);grid-column:1/-1;padding:60px 16px;font-size:24px;line-height:1.7}.toast{left:50%;top:calc(env(safe-area-inset-top) + 84px);z-index:60;background:var(--ink);color:#fff;text-align:center;border-radius:16px;max-width:min(640px,100vw - 32px);padding:12px 22px;font-size:19px;line-height:1.5;position:fixed;transform:translate(-50%);box-shadow:0 8px 24px #00000040}@media (orientation:portrait){.mid{grid-template-rows:auto 1fr auto;grid-template-columns:1fr}.rail{flex-direction:row;justify-content:space-evenly;padding:8px 12px}.srow{grid-template-columns:1fr;gap:6px}.okline{margin-left:0}}#app[data-state=recording] .top .round,#app[data-state=casting] .top .round{display:none}@media (width<=600px){:root{--tool:40px;--gap:12px}.top{min-height:56px;padding:10px var(--gap) 6px;gap:8px}.title{font-size:20px}.top-right{gap:8px}.round{width:42px;height:42px}.round svg{width:22px;height:22px}.timer{font-size:17px}.back{justify-content:center;width:42px;height:42px;padding:0}.back span{display:none}.found{gap:3px;font-size:16px}.found .found-txt{display:none}.found i{width:18px;height:18px}.rail{border-radius:20px;gap:2px;padding:6px 8px}.tool{border-radius:12px}.sw{flex:none;width:28px;height:28px}.sw.on{outline-offset:2px;outline-width:3px}.paper,.stage,.stage .pic,.stage .orig{border-radius:16px}:root{--story-h:62px}.story{border-radius:14px;gap:8px;padding:4px 12px;font-size:15px}.story>svg{width:22px;height:22px}.story .edit{width:36px;height:36px}.bot{padding:12px var(--gap) 16px;flex-wrap:nowrap;gap:12px;min-height:84px}.btn{gap:8px;min-height:56px;padding:12px 22px;font-size:21px}.bot .btn.ghost{justify-content:center;width:56px;min-width:56px;padding:0}.bot .btn.ghost span{display:none}.bot .btn.ghost svg{width:26px;height:26px}.wave{display:none}.rec:before,.rec:after{inset:-8px}.hot{border-width:3px;width:44px;height:44px;margin:-22px 0 0 -22px}.hot svg{width:26px;height:26px}.focus-layer .wcard,.focus-layer .wcard.at-left,.focus-layer .wcard.at-right{top:auto;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:auto;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));flex-direction:column;display:flex;position:fixed}.focus-layer .wcard>*{flex:none}.focus-layer .wcard .thumb{flex:0 auto;height:auto;min-height:120px}.focus-layer .wcard .thumb img{object-fit:contain;width:100%;height:100%;display:block}.say.zh{font-size:40px}.say.en{font-size:32px}.wcard .thumb{height:clamp(160px,48vw,240px)}.sheet{padding:18px}.dialog{padding:20px}.gallery-grid{grid-template-columns:1fr 1fr;gap:12px}.word-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.spell h2{font-size:24px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}