:root{--bg: #f7f4ec;--paper: #ffffff;--warm: #fdf9ec;--warm-2: #fdf6e3;--warm-line: #f5e3ae;--line: #e6e8ee;--line-strong: #d9dce4;--ink: #222831;--ink-soft: #5a6070;--ink-mute: #656b7a;--accent: #fbd46d;--accent-hover: #f6c945;--gold: #f0b429;--gold-deep: #8a5b00;--ink-on-accent: #3a2f00;--danger: #c8372d;--danger-soft: #fdecea;--ok: #2f9e5b;--radius: 14px;--shadow: 0 1px 2px rgba(34, 40, 49, .05), 0 6px 18px rgba(34, 40, 49, .06);--font: "Roboto Condensed", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font:14px/1.4 var(--font);-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.55}a{color:var(--gold-deep)}mark{background:none;color:var(--gold)}h1,h2{margin:0;letter-spacing:-.01em}.logo{display:inline-flex;align-items:center;gap:8px}.logo-word{display:flex;flex-direction:column;line-height:1}.logo-word b{font-size:17px;font-weight:800}.logo-word small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);font-weight:700;margin-top:3px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);font-weight:700;font-size:14px;white-space:nowrap;transition:background .15s,border-color .15s}.btn:hover:not(:disabled){border-color:var(--ink-mute)}.btn-accent{background:var(--accent);border-color:var(--gold);color:var(--ink-on-accent)}.btn-accent:hover:not(:disabled){background:var(--accent-hover);border-color:var(--gold)}.btn-danger{color:var(--danger);border-color:#efb4ae;background:var(--paper)}.btn-danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger)}.btn-ghost{background:transparent}.btn-sm{height:28px;padding:0 10px;font-size:13px;border-radius:8px}.btn-lg{height:44px;padding:0 20px;font-size:16px;border-radius:12px}.btn-ic{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:10px;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink)}.btn-ic.btn-accent{background:var(--accent);border-color:var(--gold);color:var(--ink-on-accent)}.btn-round{position:relative;width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);flex:none}.btn-round.off{background:var(--danger-soft);color:var(--danger);border-color:#efb4ae}.btn-round.on{background:var(--warm-2);border-color:var(--gold)}.badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;border-radius:9px;background:var(--gold);color:var(--ink-on-accent);font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 4px}.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:13px;background:var(--warm-2);border:1px solid var(--warm-line);color:var(--gold-deep);font-weight:700;font-size:12.5px}.muted{color:var(--ink-soft);margin:0}.tiny{color:var(--ink-mute);font-size:12px;margin:0}.warn{display:flex;gap:7px;align-items:flex-start;color:var(--danger);background:var(--danger-soft);border-radius:10px;padding:8px 10px;margin:0;font-size:13.5px}.warn.small{font-size:12.5px;padding:6px 8px}.spinner{width:26px;height:26px;border-radius:50%;border:3px solid var(--warm-line);border-top-color:var(--gold);animation:spin .8s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.center-msg{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 16px;text-align:center}.center-msg h1{font-size:30px}.center-msg p{max-width:460px;margin:0;color:var(--ink-soft);font-size:15px}.topbar{height:52px;display:flex;align-items:center;gap:16px;padding:0 16px}.stages{margin:0 auto;display:flex;align-items:center;gap:8px}.stage{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px 0 6px;border-radius:16px;border:1px solid var(--line-strong);background:var(--paper);font-weight:700;color:var(--ink-soft)}.stage i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;background:var(--bg);color:var(--ink-soft)}.stage svg{margin-left:4px;color:var(--ok)}.stage.on{background:var(--accent);border-color:var(--gold);color:var(--ink-on-accent)}.stage.on i{background:#ffffffb3;color:var(--ink-on-accent)}.stage.done{color:var(--ink)}.stage-line{width:34px;height:1px;background:var(--line-strong)}.topbar-right{display:flex;align-items:center;gap:12px}.timer{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:10px;background:var(--paper);border:1px solid var(--line);font-weight:700;font-variant-numeric:tabular-nums}.who{color:var(--ink-soft);white-space:nowrap}.who b{color:var(--ink)}.lost{display:inline-flex;align-items:center;gap:5px;color:var(--danger);font-size:12.5px;font-weight:600}.lobby{min-height:100%;display:flex;flex-direction:column}.lobby-card{margin:auto;width:min(920px,calc(100% - 32px));display:grid;grid-template-columns:1.15fr 1fr;gap:22px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow)}.lobby-preview .tile{aspect-ratio:16 / 10}.lobby-meter{height:5px;border-radius:3px;background:var(--bg);margin-top:8px;overflow:hidden}.lobby-meter i{display:block;height:100%;background:var(--ok);transition:width .08s}.lobby-side{display:flex;flex-direction:column;gap:12px;justify-content:center}.lobby-side h1{font-size:26px;line-height:1.12}.lobby-side .chip{align-self:flex-start}.field{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:13px}.field input,.chat-form input{height:40px;border:1px solid var(--line-strong);border-radius:10px;padding:0 12px;font:inherit;font-size:15px;background:var(--paper);color:var(--ink);outline:none}.field input:focus,.chat-form input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #f0b4292e}.room{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 372px;grid-template-rows:52px minmax(0,1fr);column-gap:12px;padding:0 12px 12px}.room .topbar{grid-column:1 / -1;padding:0 4px}.stage-area{min-width:0;min-height:0;display:flex}.side{min-height:0;display:flex;flex-direction:column;gap:10px}.tiles{display:flex;flex-direction:column;gap:10px}.tile{position:relative;aspect-ratio:16 / 9;border-radius:var(--radius);overflow:hidden;background:#2b313b;flex:none}.tile video{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .2s}.tile video.mirror{transform:scaleX(-1)}.tile-empty{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:linear-gradient(160deg,#3a414d,#262b33)}.tile-empty span{width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--ink-on-accent);display:grid;place-items:center;font-size:24px;font-weight:800}.tile-label{position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);padding:3px 9px;border-radius:8px;background:#222831b8;color:#fff;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile-label em{font-style:normal;font-weight:500;opacity:.8}.tile-muted{position:absolute;left:8px;bottom:8px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#c8372deb;color:#fff}.tile-wait{display:grid;place-items:center;background:var(--paper);border:1px dashed var(--line-strong);color:var(--ink-mute);font-weight:600}.chat{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.chat-head{display:flex;align-items:center;gap:7px;padding:9px 12px;font-weight:800;border-bottom:1px solid var(--line)}.chat-head span{font-weight:500;color:var(--ink-mute);font-size:12.5px}.chat-list{flex:1;min-height:60px;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:8px}.chat-empty{color:var(--ink-mute);font-size:13px;margin:auto 0;text-align:center}.msg{max-width:92%}.msg-meta{display:flex;gap:7px;align-items:baseline;font-size:12.5px}.msg-meta span{color:var(--ink-mute);font-size:11.5px}.msg-text{margin-top:2px;padding:6px 10px;border-radius:10px;background:var(--bg);font-size:14px;word-break:break-word}.msg-mine{align-self:flex-end}.msg-mine .msg-meta{justify-content:flex-end}.msg-mine .msg-text{background:var(--warm-2);border:1px solid var(--warm-line)}.chat-form{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line);position:relative}.chat-form input{flex:1;min-width:0;padding-left:32px;height:36px;font-size:14px}.chat-ic{position:absolute;left:18px;top:18px;color:var(--ink-mute)}.controls{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}.controls .btn{padding:0 11px;font-size:13.5px}.controls .spacer{flex:1}.tiles-extra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tiles-extra .tile{border-radius:10px}.chat{min-height:200px}@media (max-height: 900px) and (min-width: 761px){.tiles{flex-direction:row}.tiles .tile{flex:1;min-width:0;border-radius:12px}.tile-empty span{width:44px;height:44px;font-size:17px}.tile-label{font-size:12px}}.tiles-extra .tile-empty span{width:34px;height:34px;font-size:14px}.tiles-extra .tile-label{font-size:11.5px}.slides{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.slide-frame{flex:1;min-height:0;display:flex;background:radial-gradient(120% 90% at 85% 10%,var(--warm-2),var(--paper) 60%)}.slide{flex:1;padding:clamp(18px,3.2vw,52px);display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.4vw,18px);min-width:0}.slide-hero,.slide-go{gap:clamp(16px,3vw,48px)}.slide-total{flex:none;width:clamp(180px,20vw,300px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:var(--warm-2);border:1px solid var(--warm-line);box-shadow:inset 0 0 0 10px var(--paper)}.slide-total b{font-size:clamp(48px,5.5vw,96px);line-height:.9;font-weight:800;color:var(--gold-deep)}.slide-total span{font-size:clamp(16px,1.5vw,22px);font-weight:800}.slide-total small{margin-top:8px;color:var(--ink-soft);font-size:clamp(12px,.95vw,14px)}.slide h1{font-size:clamp(26px,3.6vw,58px);line-height:1.05;font-weight:800}.slide h2{font-size:clamp(24px,3vw,48px);line-height:1.06;font-weight:800}.slide .chip{align-self:flex-start}.lead{font-size:clamp(15px,1.35vw,21px);color:var(--ink-soft);margin:0;max-width:640px}.slide-hero,.slide-go{flex-direction:row;align-items:center}.slide-col{flex:1;display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px);min-width:0}.slide-boy{height:min(92%,520px);max-width:34%;object-fit:contain;align-self:flex-end}.slide-scene{width:40%;max-height:82%;object-fit:cover;border-radius:18px;box-shadow:var(--shadow)}.facts{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:10px}.facts li{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);max-width:560px}.facts b{min-width:86px;font-size:clamp(20px,2vw,30px);font-weight:800;color:var(--gold-deep)}.facts span{font-size:clamp(14px,1.15vw,18px);color:var(--ink-soft)}.steps{list-style:none;padding:0;margin:0;display:grid;gap:12px;max-width:860px}.steps li{display:grid;grid-template-columns:42px 44px 1fr auto;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;border:1px solid var(--warm-line);background:var(--paper)}.step-n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--ink-on-accent);font-weight:800;font-size:18px}.step-ic{color:var(--ink);display:grid;place-items:center}.step-txt{display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--gold);padding-left:14px}.step-txt b{font-size:clamp(16px,1.5vw,22px)}.step-txt span{color:var(--ink-soft);font-size:clamp(13px,1.05vw,16px)}.step-m{color:var(--ink-mute);font-weight:700;font-variant-numeric:tabular-nums}.note{display:flex;align-items:center;gap:7px;margin:0;color:var(--ink-soft);font-size:clamp(13px,1.05vw,16px)}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.card{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}.card-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--warm-2);color:var(--gold-deep);margin-bottom:4px}.card b{font-size:clamp(15px,1.35vw,20px)}.card span{color:var(--ink-soft);font-size:clamp(13px,1.05vw,15.5px)}.need{list-style:none;padding:0;margin:0;display:grid;gap:8px;max-width:520px}.need li{display:grid;grid-template-columns:36px 90px 1fr;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--paper)}.need-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--warm-2);color:var(--gold-deep)}.need span{color:var(--ink-soft)}.slide-nav{height:52px;flex:none;display:flex;align-items:center;justify-content:center;gap:14px;border-top:1px solid var(--line);position:relative}.dots{display:inline-flex;gap:7px}.dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}.dots i.on{background:var(--gold);width:22px;border-radius:4px}.slide-count{position:absolute;right:16px;color:var(--ink-mute);font-size:12.5px;font-variant-numeric:tabular-nums}.browser{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.browser-strip{height:40px;flex:none;display:flex;align-items:center;gap:14px;padding:0 8px 0 14px;border-bottom:1px solid var(--line);background:var(--warm)}.browser-title{display:inline-flex;align-items:center;gap:6px;font-weight:800}.browser-hint{display:inline-flex;align-items:center;gap:5px;color:var(--ink-soft);font-size:13px}.browser-actions{margin-left:auto;display:flex;gap:6px}.browser-view{flex:1;min-height:0;background:#14161a;position:relative}.browser-view iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;display:block}.browser-wait{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#e9ebf0;background:#1d2026}.browser-wait span:not(.spinner){color:#a9afbb;font-size:13px}.browser-max{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;border-radius:0;border:0}.browser-max .browser-view{aspect-ratio:auto!important;flex:1!important}.browser:fullscreen{border-radius:0}.sound-btn{position:fixed;left:50%;bottom:24px;transform:translate(-50%);z-index:20;height:42px;padding:0 18px;border-radius:21px;background:var(--ink);color:#fff;border:0;display:inline-flex;align-items:center;gap:8px;font-weight:700}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#22283159;display:grid;place-items:center;z-index:30;padding:16px}.modal-card{background:var(--paper);border-radius:16px;padding:18px;width:min(400px,100%);display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}.modal-card b{font-size:18px}.modal-card p{margin:0;color:var(--ink-soft)}.modal-actions{display:flex;justify-content:flex-end;gap:8px}@media (max-width: 1280px){.room{grid-template-columns:minmax(0,1fr) 300px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.who{display:none}}@media (max-width: 760px){.topbar{height:46px;gap:8px;padding:0 4px}.logo-word{display:none}.stages{margin:0}.stage{height:28px;padding:0 10px 0 4px;font-size:13px}.stage-line{width:12px}.topbar-right{margin-left:auto}.timer{height:28px;padding:0 8px;font-size:13px}.lost{display:none}.room{display:flex;flex-direction:column;gap:8px;height:auto;min-height:100%;padding:0 10px 74px}.stage-area{flex:none}.slides,.browser{border-radius:14px}.slide-frame{min-height:0}.slide{padding:14px;gap:10px}.slide-hero,.slide-go{flex-direction:column;align-items:stretch}.slide-boy,.slide-total{display:none}.slide-scene{width:100%;max-height:140px}.facts li{padding:8px 10px;gap:10px}.facts b{min-width:62px}.steps li{grid-template-columns:30px 1fr auto;gap:10px;padding:10px 12px}.step-n{width:30px;height:30px;font-size:15px}.step-ic{display:none}.cards{grid-template-columns:1fr 1fr;gap:8px}.card{padding:10px}.need li{grid-template-columns:30px 64px 1fr;padding:6px 8px}.slide-nav{height:46px}.room-school .stage-area{height:auto}.browser-view{aspect-ratio:1368 / 768;flex:none}.browser-hint{display:none}.browser-strip{height:36px}.side{gap:8px}.tiles{flex-direction:row}.tiles .tile{flex:1;min-width:0;border-radius:12px}.tile-label{font-size:11.5px;padding:2px 7px;left:6px;top:6px}.tile-empty span{width:40px;height:40px;font-size:16px}.chat{min-height:260px}.chat-hidden{display:none}.controls{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#f7f4ecf5;border-top:1px solid var(--line);justify-content:center;flex-wrap:nowrap}.controls .spacer{display:none}.controls .btn{height:40px;padding:0 12px}.lobby-card{grid-template-columns:1fr;padding:12px;gap:14px}.lobby-side h1{font-size:22px}}