:root{--clay-50:#fff0f4;--clay-100:#ffe0ea;--clay-400:#ff8fb0;--clay-500:#ff6b9a;--clay-600:#ef4f82;--clay-700:#d63a6c;--sky-100:#e8f4ff;--sky-300:#a8d4ff;--sky-400:#6eb6ff;--sky-500:#4a9ef0;--mint-100:#e5fbef;--mint-500:#48d68a;--lavender-100:#f3eefc;--peach-100:#fff3e8;--peach-400:#ffb35c;--coral-500:#ff6b7a;--cream:#fff8f0;--ink:#3a2a32;--navy-900:#3a2a32;--navy-700:#5c4650;--navy-500:#7a6570;--navy-200:#e8d8de;--navy-100:#fff5f8;--white:#fff;--color-primary:var(--clay-500);--color-primary-hover:var(--clay-600);--color-primary-pressed:var(--clay-700);--color-primary-soft:var(--clay-50);--color-on-primary:var(--white);--color-accent:var(--sky-500);--color-accent-soft:var(--sky-100);--color-success:var(--mint-500);--color-success-soft:var(--mint-100);--color-danger:var(--coral-500);--color-danger-soft:#ffe8ec;--color-info:var(--peach-400);--color-info-soft:#fff6d8;--bg:#fff5f8;--bg-mid:#eef6ff;--bg-panel:var(--cream);--bg-panel-soft:rgba(255,248,240,.94);--text:var(--navy-900);--text-muted:var(--navy-500);--text-subtle:var(--navy-200);--border:rgba(58,42,50,.14);--border-strong:#3a2a32;--focus-ring:rgba(255,107,154,.35);--outline:3px solid var(--border-strong);--gloss:linear-gradient(180deg,hsla(0,0%,100%,.55),hsla(0,0%,100%,0) 42%);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;--radius-sm:14px;--radius-md:20px;--radius-lg:26px;--radius-xl:32px;--radius-full:999px;--radius:var(--radius-lg);--shadow-sm:0 2px 0 rgba(58,42,50,.12);--shadow-md:0 5px 0 rgba(58,42,50,.16);--shadow-lg:0 8px 0 rgba(58,42,50,.18);--shadow-primary:0 5px 0 var(--clay-700);--shadow-float:0 10px 24px rgba(255,107,154,.18);--font-display:"Noto Sans SC","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;--font-body:"Noto Sans SC","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;--text-display:clamp(2rem,5vw,2.75rem);--text-h1:clamp(1.65rem,3.5vw,2.1rem);--text-h2:1.35rem;--text-h3:1.15rem;--text-body:1.05rem;--text-small:0.92rem;--text-caption:0.82rem;--leading-tight:1.25;--leading-normal:1.55;--ease-out:cubic-bezier(0.22,1,0.36,1);--ease-spring:cubic-bezier(0.34,1.4,0.64,1);--dur-fast:150ms;--dur-normal:220ms;--dur-slow:320ms;--z-chrome:40;--z-modal:100;--z-toast:200;--touch-min:48px;--bg-deep:var(--bg);--cyan:var(--color-primary);--cyan-soft:var(--color-primary-soft);--cyan-glow:none;--danger:var(--color-danger);--ok:var(--color-success);--indigo-50:var(--clay-50);--indigo-100:var(--clay-100);--indigo-200:#f3c2a8;--indigo-400:var(--clay-400);--indigo-500:var(--clay-500);--indigo-600:var(--clay-600);--indigo-700:var(--clay-700)}*,:after,:before{box-sizing:border-box}body,html{margin:0;min-height:100%;color:var(--text);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-normal);background:radial-gradient(ellipse 80% 50% at 10% -10%,rgba(174,212,255,.45),transparent 55%),radial-gradient(ellipse 70% 45% at 95% 5%,rgba(255,180,210,.4),transparent 50%),linear-gradient(180deg,var(--bg) 0,var(--bg-mid) 55%,#fff8f0 100%);background-attachment:fixed;-webkit-font-smoothing:antialiased}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}a{color:var(--color-primary);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}a:hover{color:var(--color-primary-hover)}button,input,select,textarea{font:inherit}.page{min-height:100vh;padding:var(--space-7) var(--space-5) var(--space-9)}.page-narrow{width:min(440px,100%);margin:0 auto}.page-mid{width:min(720px,100%);margin:0 auto}.page-wide{width:min(980px,100%);margin:0 auto}.page-with-chrome{padding-top:calc(var(--space-7) + 56px)}.student-chrome{position:-webkit-sticky;position:sticky;top:0;z-index:var(--z-chrome);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-5);background:rgba(255,248,240,.92);border-bottom:3px solid var(--border-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.student-chrome-brand{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--text);text-decoration:none}.student-chrome-brand:hover{color:var(--color-primary);text-decoration:none}.student-chrome-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:14px;background:var(--gloss),var(--color-primary);color:var(--white);border:3px solid var(--border-strong);box-shadow:0 3px 0 var(--border-strong);overflow:hidden}.student-chrome-mark img{width:22px;height:22px;object-fit:contain}.student-chrome-nav{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.student-chrome-link{display:inline-flex;align-items:center;gap:6px;min-height:var(--touch-min);padding:0 var(--space-3);border-radius:var(--radius-full);border:3px solid transparent;color:var(--text-muted);font-weight:800;font-size:var(--text-small);text-decoration:none;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.student-chrome-link.is-active,.student-chrome-link:hover{background:var(--gloss),var(--color-primary-soft);color:var(--color-primary-pressed);border-color:var(--border-strong);box-shadow:0 3px 0 var(--border-strong);text-decoration:none}.student-chrome-pill{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:var(--radius-full);background:var(--mint-100);color:#0f7a60;font-size:var(--text-caption);font-weight:700}.brand-mark{font-family:var(--font-display);font-size:var(--text-h1);color:var(--text);letter-spacing:-.02em;margin:0 0 var(--space-2);font-weight:800}.eyebrow{margin:0;font-size:var(--text-caption);letter-spacing:.08em;text-transform:uppercase;font-weight:700}.eyebrow,.lead{color:var(--text-muted)}.lead{margin:0 0 var(--space-6);line-height:var(--leading-normal);font-size:var(--text-body)}.hero-title{font-family:var(--font-display);font-size:var(--text-display);margin:var(--space-2) 0 var(--space-3);color:var(--text);text-align:center;font-weight:800;letter-spacing:-.03em;line-height:var(--leading-tight)}.hero-sub{margin:0 auto var(--space-7);max-width:28rem;line-height:var(--leading-normal);font-size:var(--text-body)}.footer-hint,.hero-sub{text-align:center;color:var(--text-muted)}.footer-hint{font-size:var(--text-small);margin-top:var(--space-7)}.panel{position:relative;background:var(--gloss),var(--bg-panel);border:3px solid var(--border-strong);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:var(--space-6)}.panel-soft{background:var(--bg-panel-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stack{display:grid;grid-gap:var(--space-4);gap:var(--space-4)}label.field{display:grid;grid-gap:var(--space-2);gap:var(--space-2);font-weight:700;color:var(--text-muted);font-size:var(--text-small)}.field input,.field select,.field textarea,.input-lg{width:100%;min-height:52px;padding:14px 16px;border-radius:var(--radius-lg);border:3px solid var(--border-strong);background:var(--gloss),var(--white);color:var(--text);outline:none;box-shadow:var(--shadow-sm);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.field input:focus,.field select:focus,.input-lg:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--focus-ring)}.field input::placeholder{color:var(--navy-200)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:52px;padding:12px 22px;border-radius:var(--radius-full);border:3px solid var(--border-strong);cursor:pointer;font-weight:800;font-size:var(--text-body);line-height:1;text-decoration:none;box-shadow:var(--shadow-md);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out);-webkit-user-select:none;-moz-user-select:none;user-select:none}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(58,42,50,.18)}.btn:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px 0 rgba(58,42,50,.18)}.btn-lg{min-height:60px;padding:16px 28px;font-size:1.15rem;border-radius:var(--radius-full)}.btn-block{width:100%}.btn-primary{background:var(--gloss),var(--color-primary);color:var(--color-on-primary);box-shadow:var(--shadow-primary)}.btn-primary:not(:disabled):hover{background:var(--gloss),var(--color-primary-hover);color:var(--color-on-primary);text-decoration:none}.btn-secondary{background:var(--gloss),var(--cream);color:var(--text);border-color:var(--border-strong)}.btn-secondary:not(:disabled):hover{background:var(--gloss),var(--clay-100);color:var(--color-primary-pressed);text-decoration:none}.btn-ghost{background:var(--gloss),var(--white);border-color:var(--border-strong);color:var(--text)}.btn-ghost:not(:disabled):hover{border-color:var(--border-strong);color:var(--color-primary);text-decoration:none}.btn-accent{background:var(--gloss),var(--color-accent);color:var(--white);box-shadow:0 5px 0 #2f6fad}.btn-danger{color:var(--color-danger);border-color:var(--border-strong)}.alert,.btn-danger{background:var(--gloss),var(--color-danger-soft)}.alert{margin:0;padding:12px 14px;border-radius:var(--radius-lg);border:3px solid var(--border-strong);color:#c0392b;font-weight:800;display:flex;align-items:flex-start;gap:10px;box-shadow:var(--shadow-sm)}.alert-ok{background:var(--color-success-soft);border-color:rgba(46,196,160,.35);color:#0f7a60}.alert-info{background:var(--color-info-soft);border-color:rgba(94,200,240,.4);color:#1a6f8f}.status-line{margin:0;color:var(--color-primary);font-weight:700;font-size:var(--text-small)}.status-banner{display:flex;align-items:center;gap:var(--space-3);padding:12px 16px;border-radius:var(--radius-lg);background:var(--gloss),var(--color-primary-soft);border:3px solid var(--border-strong);box-shadow:var(--shadow-sm);color:var(--text);font-weight:800}.status-banner.is-ok{background:var(--color-success-soft);border-color:rgba(46,196,160,.3)}.status-banner.is-error{background:var(--color-danger-soft);border-color:hsla(0,100%,71%,.3)}.status-banner.is-loading{background:var(--lavender-100);border-color:rgba(132,144,255,.25)}.empty-state{text-align:center;padding:var(--space-8) var(--space-5);display:grid;grid-gap:var(--space-3);gap:var(--space-3);justify-items:center}.empty-state-visual{width:104px;height:104px;border-radius:32px;display:grid;place-items:center;background:var(--gloss),var(--color-primary-soft);color:var(--color-primary);border:3px solid var(--border-strong);box-shadow:var(--shadow-md);overflow:hidden}.empty-state-visual img{width:72px;height:72px;object-fit:contain}.empty-state h2,.empty-state h3{margin:0;font-size:var(--text-h2);color:var(--text)}.empty-state p{margin:0;color:var(--text-muted);max-width:22rem}.skeleton{border-radius:var(--radius-md);background:var(--navy-100)}.skeleton-line{height:14px;margin-bottom:10px}.skeleton-card{height:96px}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.feature-grid{display:grid;grid-gap:var(--space-4);gap:var(--space-4)}@media (min-width:640px){.feature-grid.cols-2{grid-template-columns:repeat(2,1fr)}}.feature-card{display:flex;align-items:center;gap:var(--space-4);width:100%;text-align:left;padding:var(--space-4);border-radius:var(--radius-xl);border:3px solid var(--border-strong);background:var(--gloss),var(--bg-panel);box-shadow:var(--shadow-md);cursor:pointer;color:var(--text);transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}.feature-card:hover:not(:disabled){border-color:var(--color-primary);box-shadow:var(--shadow-float);transform:translateY(-2px)}.feature-card:disabled{opacity:.65;cursor:wait}.feature-card.is-current{border-color:var(--color-primary);background:var(--color-primary-soft);box-shadow:var(--shadow-float)}.feature-card-icon{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;flex-shrink:0;font-weight:800;font-size:1.25rem;color:var(--white);border:3px solid var(--border-strong);box-shadow:var(--shadow-sm);background:var(--gloss),var(--color-primary)}.feature-card-icon.tone-catch{background:var(--gloss),#ff8fb0}.feature-card-icon.tone-whack{background:var(--gloss),#ff6b7a}.feature-card-icon.tone-find{background:var(--gloss),#48d68a}.feature-card-icon.tone-match{background:var(--gloss),#ffb35c}.feature-card-icon.tone-jump{background:var(--gloss),#6eb6ff}.feature-card-body{display:grid;grid-gap:4px;gap:4px;min-width:0}.feature-card-title{font-family:var(--font-display);font-size:1.15rem;font-weight:800;margin:0}.feature-card-desc{color:var(--text-muted);font-size:var(--text-small);margin:0;line-height:1.4}.feature-card-badge{font-size:var(--text-caption);font-weight:800;color:var(--color-primary);background:var(--color-primary-soft);padding:6px 10px;border-radius:var(--radius-full);white-space:nowrap}.hero-block{text-align:center;padding:var(--space-8) var(--space-4) var(--space-6);position:relative}.hero-orb{width:96px;height:96px;margin:0 auto var(--space-5);border-radius:32px;display:grid;place-items:center;background:var(--color-primary);color:var(--white);box-shadow:none;animation:soft-float 4s var(--ease-out) infinite}@keyframes soft-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.hero-actions{display:grid;grid-gap:var(--space-3);gap:var(--space-3);max-width:320px;margin:0 auto}.cta-secondary-link{display:inline-flex;justify-content:center;align-items:center;min-height:var(--touch-min);color:var(--text-muted);font-weight:700;font-size:var(--text-small)}.nav-list{list-style:none;padding:0;margin:var(--space-4) 0 0;display:grid;grid-gap:var(--space-3);gap:var(--space-3)}.nav-list a{display:flex;align-items:center;gap:var(--space-3);min-height:56px;padding:14px 18px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--white);color:var(--text);text-decoration:none;font-weight:700;box-shadow:var(--shadow-sm);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.nav-list a:hover{border-color:var(--color-primary);box-shadow:var(--shadow-float);transform:translateY(-1px);text-decoration:none}.nav-list-btn{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:56px;padding:14px 18px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--white);color:var(--text);text-decoration:none;font-weight:700;box-shadow:var(--shadow-sm);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}.nav-list-btn:hover:not(:disabled){border-color:var(--color-primary);box-shadow:var(--shadow-float);transform:translateY(-1px)}.nav-list-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.editor-brand-static{cursor:default;pointer-events:none}.editor-shell-is-publishing .editor-pane-left,.editor-shell-is-publishing .editor-pane-right{pointer-events:none;opacity:.65}.editor-publish-btn{position:relative;z-index:3}.editor-shell{display:grid;grid-template-columns:200px 1fr 300px;min-height:100vh;background:transparent}.editor-pane{padding:var(--space-5)}.editor-pane-side{background:var(--bg-panel-soft);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.editor-pane-left{border-right:1px solid var(--border);min-width:0;overflow:hidden;position:relative;z-index:1}.editor-pane-right{border-left:1px solid var(--border);overflow-y:auto;max-height:100vh}.editor-title-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}.editor-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3);position:relative;z-index:2}.editor-toolbar .btn{flex:1 1 auto;min-width:100px}.editor-toolbar-hidden-id{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.preview-stage{margin-top:0;width:100%;height:min(420px,52vh);max-height:calc(100dvh - 240px);min-height:200px;border-radius:var(--radius-lg);border:1.5px solid var(--border);background:#fffdf9;display:flex;align-items:center;justify-content:center;color:var(--text-muted);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.6),var(--shadow-sm);overflow:hidden;box-sizing:border-box;padding:8px}.preview-stage canvas{max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain}.preview-stage:-webkit-full-screen{width:100%;height:100%;max-height:none;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#0b1020}.preview-stage:-webkit-full-screen,.preview-stage:fullscreen{width:100%;height:100%;max-height:none;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#0b1020}.preview-stage:-webkit-full-screen canvas{width:min(100vw,calc(100dvh * 1.6))!important;height:min(100dvh,calc(100vw / 1.6))!important;max-width:none!important;max-height:none!important}.preview-stage:-webkit-full-screen canvas,.preview-stage:fullscreen canvas{width:min(100vw,calc(100dvh * 1.6))!important;height:min(100dvh,calc(100vw / 1.6))!important;max-width:none!important;max-height:none!important}.preview-hint{font-weight:700;color:var(--text-muted);pointer-events:none}.slot-card,.slot-grid{display:grid;grid-gap:var(--space-3);gap:var(--space-3)}.slot-card{padding:var(--space-4);border-radius:var(--radius-md);border:1.5px dashed var(--border-strong);background:var(--white);box-shadow:var(--shadow-sm)}.slot-card strong{font-size:var(--text-body)}.slot-card audio,.slot-card img{max-width:100%;border-radius:var(--radius-sm)}.slot-thumb{width:100%;max-height:100px;object-fit:contain;background:var(--indigo-50);border-radius:var(--radius-sm)}.slot-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}.slot-actions .btn{flex:1 1 40%;min-height:44px;font-size:var(--text-small)}.slot-prompt{display:grid;grid-gap:var(--space-2);gap:var(--space-2)}.slot-prompt-label{font-size:var(--text-small);color:var(--text-muted,#64748b);font-weight:600}.slot-prompt-live{color:#dc2626;font-weight:700}.slot-prompt-row{display:flex;gap:var(--space-2);align-items:stretch}.slot-prompt-input{flex:1 1;min-height:64px;resize:vertical;padding:10px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg);color:var(--text);font:inherit;line-height:1.4}.slot-prompt-input:focus{outline:2px solid var(--indigo-200,#c7d2fe);border-color:var(--indigo-400,#818cf8)}.slot-prompt-input.is-listening{border-color:#f87171;background:#fff7f7;outline:2px solid hsla(0,91%,71%,.35)}.slot-mic-meter{display:grid;grid-template-columns:auto 1fr auto;grid-gap:8px;gap:8px;align-items:center;font-size:var(--text-small);color:var(--text-muted,#64748b)}.slot-mic-meter-label{font-weight:700;color:#dc2626}.slot-mic-meter-track{height:10px;border-radius:999px;background:#fee2e2;overflow:hidden}.slot-mic-meter-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#f87171,#dc2626);transition:width 80ms linear}.slot-mic-meter-hint{white-space:nowrap;font-weight:600}.slot-mic{flex:0 0 48px;min-width:48px;padding:0;display:grid;place-items:center}.slot-mic.is-listening{color:#dc2626;border-color:#fca5a5;background:#fef2f2;animation:slot-mic-pulse 1.2s ease-in-out infinite}@keyframes slot-mic-pulse{0%,to{box-shadow:0 0 0 0 rgba(220,38,38,.25)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}.slot-select{width:100%;min-height:44px;padding:10px 12px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--bg);color:var(--text)}.qr-box{display:grid;grid-gap:12px;gap:12px;justify-items:center;padding:16px;border-radius:16px;background:#fff}.qr-box img{width:320px;height:320px;max-width:calc(100vw - 64px);border-radius:0;background:#fff;image-rendering:pixelated;image-rendering:crisp-edges}.qr-copied,.qr-hint,.qr-title{margin:0;text-align:center;color:var(--text)}.qr-debug{margin:0;max-width:100%;overflow-wrap:anywhere;font-size:11px;color:#667}.publish-panel{margin-top:var(--space-4)}.game-type-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary);font-weight:800;font-size:var(--text-caption)}.play-shell{min-height:100vh;display:grid;place-items:center;padding:var(--space-6)}.play-card{width:min(860px,100%)}.play-meta{text-align:center;color:var(--text-muted);margin:0 0 var(--space-4);font-size:var(--text-small)}.play-showcase{position:relative;overflow:hidden;isolation:isolate;background:var(--bg);padding:var(--space-8) var(--space-5)}.play-showcase-glow{display:none}.play-showcase-inner{position:relative;z-index:1;width:min(560px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-5)}.play-loading{margin:0;color:var(--text-muted);font-size:var(--text-body);font-weight:600}.play-hero-title{font-size:clamp(2rem,7vw,3.25rem);font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--text);word-break:break-word}.play-hero-author,.play-hero-title{margin:0;max-width:100%;overflow-wrap:anywhere}.play-hero-author{font-size:clamp(1.05rem,3.5vw,1.35rem);font-weight:600;color:var(--text-muted)}.play-cta-wrap{width:100%;display:flex;justify-content:center;margin-top:var(--space-2)}.play-cta{min-width:min(280px,100%);max-width:100%;min-height:52px;font-size:1.05rem;font-weight:700;box-shadow:var(--shadow-float)}.play-video-block{width:100%;margin-top:var(--space-2)}.play-video-player{background:#0d1321;display:block}.play-video-placeholder,.play-video-player{width:100%;aspect-ratio:16/9;border-radius:var(--radius-xl);border:1.5px solid var(--border-strong);box-shadow:var(--shadow-md)}.play-video-placeholder{position:relative;background:var(--color-primary-soft);display:grid;place-content:center;grid-gap:var(--space-2);gap:var(--space-2);padding:var(--space-5)}.play-video-icon{width:72px;height:72px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:var(--color-primary);color:var(--color-on-primary);box-shadow:none}.play-video-label{margin:0;font-size:1.15rem;font-weight:800;color:var(--text)}.play-video-hint{margin:0;font-size:var(--text-small);color:var(--text-muted)}.play-enter{animation:play-rise .55s var(--ease-out) both}.play-in{opacity:1;transform:none}@keyframes play-rise{0%{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.play-modal{position:fixed;inset:0;z-index:80}.play-modal-fullscreen{height:100%;height:100dvh;background:#0d1321;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));box-sizing:border-box;animation:play-rise .35s var(--ease-out) both}.play-modal-fullscreen,.play-modal-stage{width:100%;display:flex;align-items:center;justify-content:center}.play-modal-stage{max-width:960px;background:transparent}.play-modal-stage canvas{display:block;max-width:100%!important;max-height:calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;width:auto!important;height:auto!important;border-radius:12px!important;object-fit:contain}.play-rotate{background:#1c2430}.play-rotate-card{width:min(360px,92vw);text-align:center;color:#fff8e7;display:grid;grid-gap:var(--space-4);gap:var(--space-4);justify-items:center;padding:var(--space-6)}.play-rotate-phone{width:88px;height:88px;display:grid;place-items:center}.play-rotate-phone-body{display:block;width:40px;height:64px;border:3px solid #fff8e7;border-radius:10px;box-shadow:inset 0 -8px 0 rgba(255,248,231,.25);animation:play-phone-tilt 1.4s var(--ease-out) infinite;transform-origin:center}.play-rotate-title{margin:0;font-size:clamp(1.35rem,5vw,1.75rem);font-weight:800;color:#fff8e7}.play-rotate-hint{margin:0;font-size:var(--text-small);color:rgba(255,248,231,.75)}.play-rotate .btn-ghost{color:#fff8e7;border-color:rgba(255,248,231,.35);background:transparent}.play-rotate .btn-ghost:hover:not(:disabled){background:rgba(255,248,231,.1);border-color:rgba(255,248,231,.55)}@keyframes play-phone-tilt{0%,20%{transform:rotate(0deg)}45%,70%{transform:rotate(90deg)}to{transform:rotate(90deg)}}@media (max-width:640px){.play-showcase{padding:var(--space-6) var(--space-4);align-content:start;padding-top:max(8vh,env(safe-area-inset-top,0px))}.play-showcase-inner{gap:var(--space-4);width:min(560px,100%)}}@media (prefers-reduced-motion:reduce){.play-enter,.play-modal-fullscreen{animation:none}.play-rotate-phone-body{animation:none;transform:rotate(90deg)}}.template-card{position:relative;display:grid;grid-gap:6px;gap:6px;text-align:left;width:100%;padding:18px 20px;border-radius:var(--radius-lg);border:1.5px solid var(--border);background:var(--white);color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.template-card:hover:not(:disabled){border-color:var(--color-primary);box-shadow:var(--shadow-float);transform:translateY(-2px)}.template-card.is-current{border-color:var(--color-primary);background:var(--white)}.template-index{font-family:var(--font-display);font-size:1.2rem;color:var(--text);font-weight:800}.template-desc{color:var(--text-muted);font-size:var(--text-small)}.template-badge{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--color-primary);font-weight:800;font-size:var(--text-caption)}.code-block{font-size:11px;overflow:auto;max-height:480px;background:var(--navy-100);border-radius:var(--radius-sm);padding:10px;border:1px solid var(--border)}@media (max-width:900px){.editor-shell{grid-template-columns:1fr}.editor-pane-left{order:-1;border-right:none;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}.editor-pane-left .nav-list{display:flex;flex-wrap:wrap;margin:0;flex:1 1}.editor-pane-left .nav-list li{flex:1 1 auto}.editor-pane-left .nav-list a,.editor-pane-left .nav-list-btn{min-height:48px;justify-content:center}.editor-pane-right{border-left:none;border-top:1px solid var(--border);max-height:none;order:2}.editor-pane:not(.editor-pane-side){order:1}.preview-stage{height:min(360px,48vh);max-height:calc(100dvh - 280px)}.editor-toolbar{display:grid;grid-template-columns:1fr 1fr}.editor-toolbar .btn:last-child{grid-column:1/-1}.editor-toolbar .editor-publish-btn{grid-column:1/-1;min-height:52px}.student-chrome{flex-wrap:wrap}}@media (max-width:480px){.page{padding:var(--space-5) var(--space-4) var(--space-8)}.feature-card{grid-template-columns:auto 1fr}.feature-card-badge{grid-column:1/-1;justify-self:start}.hero-orb{width:80px;height:80px;border-radius:26px}.preview-stage{height:min(300px,42vh);max-height:calc(100dvh - 260px)}.qr-box img{width:min(320px,calc(100vw - 64px));height:auto;aspect-ratio:1;border-radius:0}.btn,.magic-card,.play-cta{min-height:48px}}.platform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:16px;gap:16px;margin-top:8px}.platform-card{display:grid;grid-gap:8px;gap:8px;padding:22px;border-radius:var(--radius-xl);background:var(--bg-panel);border:1px solid var(--border);box-shadow:var(--shadow-md);color:var(--text);min-height:160px}.platform-card strong{font-size:1.45rem}.platform-card-kicker{color:var(--color-primary);font-weight:700}.platform-card-teacher{background:var(--white)}.mode-switch{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;margin-bottom:12px}.mode-switch button{min-height:48px;border-radius:999px;border:3px solid var(--border-strong);background:var(--gloss),var(--cream);font-weight:800;box-shadow:var(--shadow-sm)}.mode-switch button.is-on{background:var(--gloss),var(--color-primary);color:#fff;border-color:var(--border-strong);box-shadow:var(--shadow-primary)}.auth-modal-backdrop{position:fixed;inset:0;z-index:var(--z-modal);background:rgba(26,35,64,.45);display:grid;place-items:center;padding:20px}.auth-modal{width:min(440px,100%);background:var(--gloss),var(--cream);padding:28px 22px;text-align:center;animation:pop-in .22s var(--ease-spring)}.auth-modal h2{margin:0;font-size:2rem}.auth-modal-emoji{font-size:2.4rem;margin:0}.auth-modal-lead{font-size:1.15rem}.auth-modal-code{font-size:clamp(2rem,8vw,3rem);letter-spacing:.08em;font-weight:800;margin:8px 0;color:var(--color-primary)}.auth-modal-hint{color:var(--text-muted)}.auth-modal-actions{display:grid;grid-gap:10px;gap:10px;margin-top:16px}@keyframes pop-in{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.studio-layout{display:grid;grid-template-columns:160px minmax(0,1fr) 240px;grid-gap:16px;gap:16px;align-items:start}.studio-nav-list{grid-template-columns:1fr}.studio-works h2{margin:0 0 8px;font-size:1.1rem}.studio-work-tabs{display:flex;gap:8px;margin-bottom:12px}.studio-work-tabs button.is-on{font-weight:700}.studio-works img{width:100%;border-radius:12px}@media (max-width:900px){.studio-layout{grid-template-columns:1fr}}.magic-grid,.picker-grid,.teacher-grid,.teacher-summary{display:grid;grid-gap:12px;gap:12px}.magic-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:12px 0 16px}.magic-card{min-height:76px;border-radius:var(--radius-lg);border:3px solid var(--border-strong);background:var(--gloss),var(--cream);box-shadow:var(--shadow-sm);font-size:1.1rem;font-weight:800}.magic-card.is-on{background:var(--gloss),var(--color-primary);color:#fff;box-shadow:var(--shadow-primary)}.magic-preview{width:100%;max-height:320px;object-fit:contain;border-radius:16px;background:#f4f6fb}.teacher-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.teacher-head-actions{display:flex;flex-wrap:wrap;gap:8px}.teacher-find{width:min(100%,360px);margin-bottom:8px}.teacher-summary{grid-template-columns:repeat(5,minmax(0,1fr));margin:16px 0}.teacher-summary div{background:var(--gloss),var(--cream);border:3px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:12px;text-align:center}.teacher-summary strong{display:block;font-size:1.6rem}.teacher-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.teacher-card{background:var(--gloss),var(--cream);border:3px solid var(--border-strong);border-radius:var(--radius-xl);padding:16px;box-shadow:var(--shadow-md)}.teacher-card header{display:flex;justify-content:space-between;gap:8px}.teacher-status{display:inline-block;border-radius:999px}.teacher-code button,.teacher-status{padding:4px 10px;background:var(--color-primary-soft);font-weight:700}.teacher-code button{margin-left:8px;border:0;border-radius:999px}.teacher-time{color:var(--text-muted);font-size:.92rem}.picker-sheet{width:min(720px,100%);max-height:min(80vh,640px);overflow:auto;background:var(--gloss),var(--cream);border:3px solid var(--border-strong);border-radius:var(--radius-xl);padding:20px;box-shadow:var(--shadow-lg)}.picker-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.picker-item{border:1px solid var(--border);border-radius:16px;background:#fafbff;padding:8px;text-align:left}.picker-item img{width:100%;height:88px;object-fit:cover;border-radius:12px}.look-controls{display:grid;grid-gap:6px;gap:6px;margin-top:8px}.look-row{display:flex;gap:6px}.look-chip{flex:1 1;min-height:36px;border-radius:999px;border:3px solid var(--border-strong);background:var(--gloss),var(--cream);font-weight:800;box-shadow:var(--shadow-sm)}.look-chip.is-on{background:var(--gloss),var(--color-primary);color:#fff;border-color:var(--border-strong)}.look-color{display:flex;align-items:center;gap:8px;font-weight:700}.look-color input[type=color]{width:44px;height:36px;padding:0;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer}@media (max-width:720px){.teacher-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}.asset-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));grid-gap:12px;gap:12px}.asset-tile{display:grid;grid-gap:8px;gap:8px;padding:10px;background:var(--gloss),var(--cream);border:3px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);cursor:pointer}.asset-tile:focus-visible{outline:3px solid var(--color-primary-soft);outline-offset:2px}.asset-tile img,.asset-tile video{width:100%;height:110px;object-fit:cover;border-radius:12px;background:var(--bg)}.asset-tile strong{font-size:.95rem}.asset-lightbox{width:min(920px,90vw);max-height:90vh;display:grid;grid-gap:12px;gap:12px;padding:16px;background:#fff;border-radius:22px;box-shadow:var(--shadow-lg);animation:pop-in .22s var(--ease-spring)}.asset-lightbox-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}.asset-lightbox-bar strong{font-size:1.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-lightbox img,.asset-lightbox video{width:100%;max-height:min(75vh,720px);object-fit:contain;border-radius:14px;background:#0b1020}.asset-lightbox audio{width:100%}body[data-site=aigc]{--color-primary:var(--sky-500);--color-primary-hover:#3a8ad8;--color-primary-pressed:#2f74b8;--color-primary-soft:var(--sky-100);--color-accent:var(--clay-500);--color-accent-soft:var(--clay-50);--shadow-primary:0 5px 0 #2f74b8;--focus-ring:rgba(74,158,240,.35)}body[data-site=aigc] .hero-orb,body[data-site=aigc] .student-chrome-mark{background:var(--gloss),var(--sky-500)}body[data-site=aigc] .hero-orb{border-radius:18px;border:3px solid var(--border-strong);box-shadow:0 4px 0 var(--border-strong)}.kawaii-deco{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;image-rendering:auto}.kawaii-home-deco{display:flex;justify-content:center;gap:12px;margin:0 0 var(--space-4)}.kawaii-home-deco img{width:56px;height:56px;object-fit:contain;animation:kawaii-bob 2.4s var(--ease-spring) infinite}.kawaii-home-deco img:nth-child(2){animation-delay:.35s;width:64px;height:64px}.kawaii-home-deco img:nth-child(3){animation-delay:.7s}@keyframes kawaii-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.stack.kawaii-cta .btn{font-size:1.12rem}.auth-modal{background:var(--gloss),var(--cream)!important;border:3px solid var(--border-strong);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.auth-modal-emoji{display:none}.auth-modal-deco{display:block;width:72px;height:72px;margin:0 auto 8px;object-fit:contain}.prompt-with-mic{display:grid;grid-gap:10px;gap:10px}.mic-btn.is-listening{outline:3px solid #ff8a65;animation:mic-pulse 1.1s ease-in-out infinite}@keyframes mic-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.compare-row{display:grid;grid-template-columns:1fr auto 1fr;grid-gap:12px;gap:12px;align-items:center}.compare-panel{display:grid;grid-gap:8px;gap:8px}.compare-arrow{font-size:1.6rem;font-weight:800;color:var(--text-muted);margin:0}@media (max-width:720px){.compare-row{grid-template-columns:1fr}.compare-arrow{text-align:center;transform:rotate(90deg)}}.camera-modal{max-width:min(520px,94vw)}.camera-preview-box{width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#111;margin:8px 0 12px}.camera-preview{width:100%;height:100%;object-fit:cover;display:block}.teacher-nav-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}body[data-site=game]{--color-primary:#ff6b9a;--color-primary-hover:#ef4f82;--color-primary-pressed:#d63a6c;--color-primary-soft:#fff0f4;--color-accent:#4a9ef0;--shadow-primary:0 5px 0 #d63a6c;--focus-ring:rgba(255,107,154,.35)}body[data-site=game] .page{background:transparent}body[data-site=game] .student-chrome{background:rgba(255,248,240,.94);border-bottom:3px solid var(--border-strong);box-shadow:none}body[data-site=game] .student-chrome-mark{background:var(--gloss),var(--color-primary);color:#fff;border-radius:14px;border:3px solid var(--border-strong);box-shadow:0 3px 0 var(--border-strong)}body[data-site=game] .student-chrome-link{min-height:44px;border-radius:var(--radius-full);border:3px solid transparent;font-weight:800}body[data-site=game] .student-chrome-link.is-active,body[data-site=game] .student-chrome-link:hover{background:var(--gloss),var(--color-primary-soft);color:var(--color-primary-pressed);border-color:var(--border-strong);box-shadow:0 3px 0 var(--border-strong)}body[data-site=game] .btn,body[data-site=game] .game-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 18px;border-radius:var(--radius-full);border:3px solid var(--border-strong);background:var(--gloss),var(--cream);color:var(--text);box-shadow:var(--shadow-md);font-weight:800;text-decoration:none;cursor:pointer}body[data-site=game] .btn:not(:disabled):hover,body[data-site=game] .game-btn:hover{transform:translateY(-2px);text-decoration:none;color:var(--text);box-shadow:0 7px 0 rgba(58,42,50,.18)}body[data-site=game] .btn:not(:disabled):active,body[data-site=game] .game-btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(58,42,50,.18)}body[data-site=game] .btn-primary,body[data-site=game] .game-btn-primary{background:var(--gloss),var(--color-primary);color:#fff;min-height:64px;font-size:1.25rem;box-shadow:var(--shadow-primary)}body[data-site=game] .btn-secondary,body[data-site=game] .game-btn-secondary,body[data-site=game] .game-btn-wood{background:var(--gloss),var(--cream)}body[data-site=game] .btn-accent{background:var(--gloss),var(--mint-500);color:#1a3d28;border-color:var(--border-strong);box-shadow:0 5px 0 #2a8a55}body[data-site=game] .game-header h1,body[data-site=game] .hero-title{color:var(--text)}body[data-site=game] .asset-tile,body[data-site=game] .feature-card,body[data-site=game] .game-card,body[data-site=game] .game-panel,body[data-site=game] .panel{background:var(--gloss),var(--cream);border:3px solid var(--border-strong);border-radius:var(--radius-xl);box-shadow:var(--shadow-md)}body[data-site=game] .feature-card:hover:not(:disabled){border-color:var(--border-strong);transform:translateY(-2px)}body[data-site=game] .feature-card:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 rgba(58,42,50,.16)}.game-home{position:relative;display:grid;grid-gap:18px;gap:18px;padding-bottom:72px}.game-sky{position:relative;height:92px;overflow:hidden;pointer-events:none}.game-cloud,.game-grass img,.game-hero-character,.game-hills{image-rendering:pixelated;image-rendering:crisp-edges}.game-cloud{position:absolute;width:72px;height:auto;animation:game-cloud-drift 18s linear infinite}.game-cloud.c1{top:8px;left:8%}.game-cloud.c2{top:28px;left:62%;width:56px;animation-duration:24s}.game-hills{position:absolute;right:8%;bottom:0;width:120px;height:auto}.game-panel{padding:22px 20px 20px;text-align:center}.game-header h1{margin:0;font-size:2.4rem;line-height:1.1}.game-header p{margin:8px 0 0;color:var(--text-muted);font-size:1.05rem}.game-home-actions{display:grid;grid-gap:12px;gap:12px;margin-top:18px}.game-home-actions .game-btn{width:100%}.game-hero-character{width:72px;height:auto;margin:0 auto 8px;display:block}.game-kawaii-stickers{display:flex;justify-content:center;gap:10px;margin:4px 0 8px;pointer-events:none}.game-kawaii-stickers img{width:40px;height:40px;object-fit:contain;animation:kawaii-bob 2.6s var(--ease-spring) infinite}.game-kawaii-stickers img:nth-child(2){animation-delay:.4s;width:48px;height:48px}.game-grass{display:flex;justify-content:center;gap:0;margin-top:8px;pointer-events:none}.game-grass img{width:56px;height:56px}.game-badge{display:inline-block;padding:4px 12px;background:var(--gloss),var(--color-primary-soft);font-weight:800;font-size:.85rem;box-shadow:var(--shadow-sm)}.game-badge,.game-progress{border-radius:999px;border:3px solid var(--border-strong)}.game-progress{height:18px;background:#3a2a32;overflow:hidden}.game-progress span{display:block;height:100%;background:linear-gradient(180deg,#7dffb0 0,var(--mint-500) 100%)}.game-dialog-title,.game-toast{margin:0;font-weight:800}.game-dialog{background:var(--gloss),var(--cream);border:3px solid var(--border-strong);border-radius:var(--radius-xl);padding:16px;box-shadow:var(--shadow-lg)}.game-modal-back{position:fixed;inset:0;display:grid;place-items:center;background:rgba(58,42,50,.4);z-index:40;padding:16px}.game-btn-icon{width:52px;height:52px;padding:0}@keyframes game-cloud-drift{0%{transform:translateX(0)}to{transform:translateX(18px)}}@media (max-width:720px){.game-header h1{font-size:2rem}body[data-site=game] .student-chrome-nav{gap:6px}.kawaii-home-deco img{width:44px;height:44px}.kawaii-home-deco img:nth-child(2){width:52px;height:52px}}