:root { color-scheme: dark; --ink:#f5f0e4; --muted:rgba(245,240,228,.62); --line:rgba(245,240,228,.32); --accent:#d8b56b; --scene-art:url("/assets/sketch-default/immersive-bg.webp"); font-family:"Songti SC","Noto Serif SC","STSong",serif; }
/* Routed scene pages and scene builder */
.hero-scene{border:0;padding:0;background:transparent;text-decoration:none}.scene-picks a{width:130px;color:var(--muted);text-decoration:none;font:14px/1.4 inherit}.scene-picks a:hover img,.scene-picks a.selected img{border-color:var(--accent);transform:translateY(-4px);filter:none}.scene-picks a.selected{color:var(--ink)}.entry-question{display:inline-block;text-decoration:none;border:0}.scene-page{min-height:100vh}.route-intro,.route-arena{min-height:100vh}.route-intro{position:relative;display:flex;align-items:center;justify-content:center;background:#030303;text-align:center;padding:36px}.route-arena{position:relative;isolation:isolate;display:none;flex-direction:column;align-items:center;justify-content:space-between;padding:28px 5vw 24px;overflow:auto}.scene-page[data-phase="arena"] .route-intro{display:none}.scene-page[data-phase="arena"] .route-arena{display:flex}.create-page{position:relative;min-height:100vh;display:grid;place-items:center;padding:48px 22px;background:#030303}.create-form{width:min(100%,990px);text-align:center}.create-form h1{margin:0 0 70px;font-size:clamp(34px,4vw,61px);line-height:1.65}.create-form textarea{width:100%;min-height:300px;border:1px solid rgba(245,240,228,.22);border-radius:24px;padding:34px 38px;background:rgba(255,255,255,.03);color:var(--ink);font:clamp(18px,2vw,30px)/1.7 inherit;outline:0}.create-form textarea:focus{border-color:var(--accent)}.create-form>p{margin:54px 0 20px;color:var(--muted);font-size:18px}.gender-options{display:flex;justify-content:center;gap:48px}.gender-options label{border-bottom:1px solid var(--line);padding:0 14px 12px;color:var(--muted);font-size:20px;cursor:pointer}.gender-options input{accent-color:var(--accent)}.create-form button{margin-top:72px;border:0;border-bottom:1px solid var(--line);padding:0 8px 10px;background:transparent;color:var(--ink);font:28px/1.2 inherit;cursor:pointer}.create-form button:hover{color:var(--accent)}.create-form button:disabled{opacity:.5;cursor:wait}.create-form .create-note{margin-top:20px;font:13px/1.5 ui-sans-serif,system-ui,sans-serif}@media(max-width:760px){.scene-picks a{width:30vw;font-size:12px}.route-arena{padding:22px 18px 18px}.create-form h1{margin-bottom:36px}.create-form textarea{min-height:220px;padding:24px;border-radius:16px}.gender-options{gap:10px}.gender-options label{font-size:16px}.create-form button{margin-top:48px;font-size:23px}}
.settings-divider{margin-top:8px;padding-top:18px;border-top:1px solid var(--line);color:var(--accent);font:700 13px/1 ui-sans-serif,system-ui,sans-serif}
.scene-picks small{display:block;margin-top:5px;color:rgba(245,240,228,.45);font:11px/1.2 ui-sans-serif,system-ui,sans-serif}.scene-picks a.generated-pick small{color:#c8ad7a}.scene-picks a.fallback-pick{opacity:.82}
.speak-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}.speak-head label{margin:0}.coach-toggle{border:1px solid var(--line);background:rgba(0,0,0,.24);color:var(--muted);padding:8px 12px;font:14px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}.coach-toggle:hover,.coach-toggle.active{border-color:var(--accent);color:var(--accent);background:rgba(216,181,107,.12)}.coach-toggle:disabled{opacity:.55;cursor:wait}.coach-line{justify-self:center;max-width:92%;border-left:0;border-top:1px solid rgba(216,181,107,.55);background:rgba(216,181,107,.14)}.coach-line span{color:#f1cf83}
*{box-sizing:border-box} body{margin:0;background:#080706;color:var(--ink);min-width:320px}.experience,.view{min-height:100vh}.experience{position:relative;overflow:hidden}.view{position:absolute;inset:0;display:none}.experience[data-view="lobby"] .lobby,.experience[data-view="intro"] .intro,.experience[data-view="arena"] .arena{display:flex}.lobby{position:relative;isolation:isolate;flex-direction:column;justify-content:space-between;overflow:auto;padding:24px 4vw 20px}.lobby-backdrop{position:absolute;inset:0;z-index:-2;background:#050505;filter:none}.lobby-backdrop:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(116deg,transparent 0 18px,rgba(255,255,255,.04) 19px 23px);mix-blend-mode:screen}.quiet-header{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font:12px/1 ui-sans-serif,system-ui,sans-serif}.quiet-header a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px}.scene-gallery{display:flex;justify-content:space-around;align-items:center;gap:2vw;margin:2vh auto 0;max-width:1500px;width:100%}.hero-scene{position:relative;width:min(43vw,640px);border:0;padding:0;background:transparent;color:var(--ink);cursor:pointer;transition:transform .25s ease;filter:drop-shadow(0 18px 25px rgba(0,0,0,.45))}.hero-scene:hover,.hero-scene:focus-visible{transform:translateY(-8px);outline:0}.hero-scene img{display:block;width:100%;aspect-ratio:1.75;object-fit:cover;border:1px solid rgba(245,240,228,.16)}.hero-scene span{display:block;margin-top:-4px;text-align:center;font-size:20px;text-shadow:0 2px 8px #000}.left-scene{transform:rotate(-2deg)}.right-scene{transform:rotate(2deg)}.left-scene:hover,.left-scene:focus-visible{transform:rotate(-2deg) translateY(-8px)}.right-scene:hover,.right-scene:focus-visible{transform:rotate(2deg) translateY(-8px)}.lobby-bottom{text-align:center}.overline{margin:0 0 12px;color:#c8ad7a;font-size:18px}.device-note{margin:0 auto 18px;max-width:700px;color:var(--muted);font:14px/1.65 ui-sans-serif,system-ui,sans-serif}.scene-picks{display:flex;justify-content:center;gap:22px;margin-bottom:14px}.scene-picks button{width:130px;border:0;background:transparent;color:var(--muted);cursor:pointer;font:14px/1.4 inherit;padding:0}.scene-picks img{display:block;width:82px;height:70px;object-fit:cover;margin:0 auto 8px;border:1px solid transparent;filter:grayscale(.35);transition:transform .2s ease,border-color .2s ease}.scene-picks button:hover img,.scene-picks button.selected img{border-color:var(--accent);transform:translateY(-4px);filter:none}.scene-picks button.selected{color:var(--ink)}.entry-question{border:0;border-bottom:1px solid var(--line);padding:0 8px 9px;background:transparent;color:var(--ink);font:28px/1.2 inherit;cursor:pointer}.entry-question:hover,.entry-question:focus-visible{color:var(--accent);outline:0}.entry-hint{margin:11px 0 0;color:var(--muted);font-size:15px}.intro{align-items:center;justify-content:center;background:#030303;text-align:center;padding:36px}.intro-copy{display:grid;gap:48px;max-width:1300px}.intro-copy p{margin:0;font-size:clamp(27px,3.1vw,51px);line-height:1.45;opacity:0;animation:appear .8s ease forwards}.intro-copy p:nth-child(2){animation-delay:.7s}.intro-copy p:nth-child(3){animation-delay:1.4s}@keyframes appear{to{opacity:1}}.back-button{position:absolute;z-index:4;top:24px;left:4vw;border:0;background:transparent;color:var(--muted);font:14px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}.back-button:before{content:"← ";}.continue-button{position:absolute;bottom:10vh;border:0;border-bottom:1px solid var(--line);padding:0 4px 8px;background:transparent;color:var(--ink);font:20px/1 inherit;cursor:pointer}.arena{position:relative;isolation:isolate;flex-direction:column;align-items:center;justify-content:space-between;padding:28px 5vw 24px;overflow:auto}.arena-art{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.12) 48%,rgba(0,0,0,.66)),var(--scene-art) center/cover;filter:brightness(.82) contrast(1.05)}.arena-art:after{content:"";position:absolute;inset:0;background:rgba(4,3,2,.23)}.back-button.light{color:var(--ink)}.arena-copy{width:min(800px,100%);text-align:center;margin-top:10vh;text-shadow:0 2px 10px #000}.scene-kicker{margin:0 0 14px;color:#d8b56b;font-size:17px}.arena-copy h1{margin:0;font-size:clamp(31px,3.4vw,54px);line-height:1.25}.arena-copy>p:last-child{margin:22px auto 0;max-width:680px;font-size:18px;line-height:1.8}.conversation{width:min(660px,100%);max-height:30vh;overflow:auto;display:grid;gap:15px;margin:12px 0;color:var(--ink);text-shadow:0 2px 8px #000}.line{max-width:88%;padding:12px 15px;border-left:1px solid var(--line);background:rgba(0,0,0,.32);backdrop-filter:blur(8px)}.line span{display:block;margin-bottom:6px;color:#d8b56b;font:12px/1 ui-sans-serif,system-ui,sans-serif}.line p{white-space:pre-line;margin:0;font-size:16px;line-height:1.65}.self-line{justify-self:end;border-left:0;border-right:1px solid var(--line);background:rgba(245,240,228,.12)}.speak-box{width:min(680px,100%);padding:14px 0 0;border-top:1px solid var(--line);text-shadow:0 2px 8px #000}.speak-box label{display:block;margin-bottom:10px;font-size:19px}.speak-row{display:grid;grid-template-columns:1fr auto;gap:10px}.speak-row textarea{min-height:46px;max-height:118px;width:100%;resize:vertical;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 4px;background:rgba(0,0,0,.24);color:var(--ink);outline:0;font:18px/1.5 inherit}.speak-row textarea:focus{border-color:var(--accent)}.speak-row button{width:54px;border:1px solid var(--line);background:rgba(0,0,0,.34);color:var(--ink);cursor:pointer;font:22px/1 inherit}.speak-row button:hover{border-color:var(--accent);color:var(--accent)}.speak-row button:disabled{opacity:.5;cursor:wait}#modelState{margin:8px 0 0;color:var(--muted);font:12px/1.4 ui-sans-serif,system-ui,sans-serif}@media(max-width:760px){.lobby{padding:18px 16px}.scene-gallery{flex-direction:column;gap:12px;margin:24px auto}.hero-scene{width:min(92vw,540px)}.hero-scene span{font-size:17px}.scene-picks{gap:5px}.scene-picks button{width:30vw;font-size:12px}.scene-picks img{width:72px;height:60px}.entry-question{font-size:22px}.device-note{font-size:12px}.intro-copy{gap:28px}.arena{padding:22px 18px 18px}.arena-copy{margin-top:11vh}.arena-copy>p:last-child{font-size:16px}.conversation{max-height:26vh}.line{max-width:95%}.speak-box label{font-size:17px}}
.speak-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}.speak-head label{margin:0}.coach-toggle{border:1px solid var(--line);background:rgba(0,0,0,.24);color:var(--muted);padding:8px 12px;font:14px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}.coach-toggle:hover,.coach-toggle.active{border-color:var(--accent);color:var(--accent);background:rgba(216,181,107,.12)}.coach-toggle:disabled{opacity:.55;cursor:wait}.coach-line{justify-self:center;max-width:92%;border-left:0;border-top:1px solid rgba(216,181,107,.55);background:rgba(216,181,107,.14)}.coach-line span{color:#f1cf83}@media(max-width:760px){.speak-head{align-items:flex-start}.coach-toggle{padding:8px 10px;font-size:13px}}
.generation-progress{width:min(100%,620px);margin:34px auto 0}.progress-track{height:3px;background:rgba(245,240,228,.16);overflow:hidden}.progress-track span{display:block;width:0;height:100%;background:var(--accent);transition:width .35s ease}.generation-progress p{margin:16px 0 6px;color:var(--ink);font:16px/1.5 ui-sans-serif,system-ui,sans-serif}.generation-progress small{color:var(--muted);font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.analysis-loading[hidden],.analysis-report[hidden]{display:none!important}
.agent-actions{display:flex;align-items:center;gap:8px}.review-tooltip{position:relative;display:inline-flex}.review-tooltip[data-disabled="true"]{cursor:not-allowed}.review-tooltip .review-trigger:disabled{pointer-events:none}.review-tooltip[data-disabled="true"]:hover:after{content:attr(data-tooltip);position:absolute;right:0;bottom:calc(100% + 10px);z-index:20;width:max-content;max-width:min(280px,70vw);padding:9px 11px;border:1px solid rgba(245,240,228,.22);border-radius:6px;background:rgba(13,11,9,.96);color:var(--ink);box-shadow:0 16px 36px rgba(0,0,0,.38);font:12px/1.45 ui-sans-serif,system-ui,sans-serif;text-align:left;white-space:normal}.review-tooltip[data-disabled="true"]:hover:before{content:"";position:absolute;right:16px;bottom:calc(100% + 5px);z-index:21;border:6px solid transparent;border-top-color:rgba(13,11,9,.96)}.review-trigger,.review-back{border:0;border-bottom:1px solid var(--line);padding:8px 3px;background:transparent;color:var(--ink);font:14px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}.review-trigger:hover,.review-back:hover{color:var(--accent);border-color:var(--accent)}.review-trigger:disabled{opacity:.35;cursor:not-allowed}.route-review{display:none;min-height:100vh;background:#0b0a09;color:var(--ink)}.scene-page[data-phase="review"] .route-intro,.scene-page[data-phase="review"] .route-arena{display:none}.scene-page[data-phase="review"] .route-review{display:block}.review-header{position:relative;min-height:64vh;display:flex;flex-direction:column;justify-content:center;padding:90px max(6vw,24px) 70px;border-bottom:1px solid var(--line);background:linear-gradient(rgba(6,5,4,.82),rgba(6,5,4,.97)),var(--scene-art) center/cover}.review-header>p{margin:0 0 22px;color:var(--accent);font:14px/1 ui-sans-serif,system-ui,sans-serif}.review-header h1{max-width:980px;margin:0;font-size:clamp(38px,5vw,72px);line-height:1.3}.review-back{position:absolute;top:28px;left:max(6vw,24px)}.analysis-loading{min-height:36vh;display:grid;place-content:center;justify-items:center;gap:18px;color:var(--muted);font:15px/1.5 ui-sans-serif,system-ui,sans-serif}.analysis-loading span{width:42px;height:42px;border:1px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:analysis-spin 1s linear infinite}@keyframes analysis-spin{to{transform:rotate(360deg)}}.analysis-report{background:#11100e}.report-lead,.score-section,.personality-section,.report-columns,.suggested-section,.report-footer{padding:70px max(6vw,24px)}.report-lead{display:grid;grid-template-columns:minmax(180px,.35fr) minmax(0,1fr);column-gap:7vw;border-bottom:1px solid var(--line)}.report-lead .report-model{grid-row:1/4;color:var(--accent);font:13px/1.4 ui-sans-serif,system-ui,sans-serif}.report-lead h2,.score-section h2,.personality-section h2,.report-columns h2{margin:0 0 20px;font-size:24px;line-height:1.25}.report-lead>p:not(.report-model){max-width:850px;margin:0;font-size:23px;line-height:1.8}.report-lead blockquote{margin:36px 0 0;padding:22px 0 0;border-top:1px solid var(--line);color:var(--muted);font-size:17px;line-height:1.7}.score-section{border-bottom:1px solid var(--line)}.score-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}.score-grid>div{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end}.score-grid p{margin:0;color:var(--muted);font:14px/1.4 ui-sans-serif,system-ui,sans-serif}.score-grid strong{font:36px/1 ui-sans-serif,system-ui,sans-serif;font-weight:400}.score-grid span{grid-column:1/-1;height:2px;background:rgba(245,240,228,.14)}.score-grid i{display:block;height:100%;background:var(--accent)}.personality-section{border-bottom:1px solid var(--line)}.section-heading{display:grid;grid-template-columns:minmax(180px,.35fr) minmax(0,1fr);column-gap:7vw}.section-heading p{margin:0;color:var(--accent);font:13px/1.4 ui-sans-serif,system-ui,sans-serif}.personality-summary{max-width:900px;margin:24px 0 48px;margin-left:calc(35% + 7vw);font-size:21px;line-height:1.8}.trait-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}.trait-list article{padding:30px 4vw 30px 0;border-bottom:1px solid var(--line)}.trait-list article:nth-child(odd){border-right:1px solid var(--line)}.trait-list article:nth-child(even){padding-left:4vw}.trait-list h3{margin:0 0 18px;color:var(--accent);font-size:20px}.trait-list blockquote{margin:0 0 16px;font-size:17px;line-height:1.7}.trait-list p{margin:0;color:var(--muted);font:13px/1.6 ui-sans-serif,system-ui,sans-serif}.report-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-bottom:1px solid var(--line)}.report-columns>div{padding-right:4vw}.report-columns>div+div{padding-left:4vw;border-left:1px solid var(--line)}.report-columns ul{margin:0;padding:0;list-style:none}.report-columns li{padding:14px 0;border-top:1px solid rgba(245,240,228,.16);font-size:16px;line-height:1.6}.suggested-section{text-align:center;border-bottom:1px solid var(--line);background:#171511}.suggested-section p{margin:0 0 22px;color:var(--accent);font:13px/1 ui-sans-serif,system-ui,sans-serif}.suggested-section blockquote{max-width:900px;margin:0 auto;font-size:clamp(25px,3vw,42px);line-height:1.55}.report-footer{display:flex;align-items:center;justify-content:space-between;gap:32px}.report-footer p{max-width:760px;margin:0;color:var(--muted);font:13px/1.6 ui-sans-serif,system-ui,sans-serif}.report-footer button{border:1px solid var(--line);padding:12px 18px;background:transparent;color:var(--ink);font:15px/1 ui-sans-serif,system-ui,sans-serif;cursor:pointer}.report-footer button:hover{border-color:var(--accent);color:var(--accent)}@media(max-width:760px){.agent-actions{gap:6px}.review-trigger,.coach-toggle{font-size:12px;padding:8px 7px}.review-tooltip[data-disabled="true"]:hover:after{right:-36px}.review-header{min-height:54vh}.review-header h1{font-size:36px}.report-lead,.section-heading{display:block}.report-lead .report-model,.section-heading p{margin-bottom:22px}.report-lead>p:not(.report-model){font-size:19px}.score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.personality-summary{margin:16px 0 34px;font-size:18px}.trait-list,.report-columns{grid-template-columns:1fr}.trait-list article,.trait-list article:nth-child(even){padding:25px 0;border-right:0}.report-columns>div,.report-columns>div+div{padding:24px 0;border-left:0}.report-columns>div+div{border-top:1px solid var(--line)}.report-footer{align-items:flex-start;flex-direction:column}}
.scene-page .back-button,.scene-page .continue-button,.scene-page .coach-toggle,.scene-page .review-trigger,.scene-page .review-back,.scene-page .report-footer button,.scene-page .speak-row button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(245,240,228,.28);border-radius:999px;background:rgba(10,9,8,.42);color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.22);backdrop-filter:blur(10px);text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}.scene-page .back-button:hover,.scene-page .continue-button:hover,.scene-page .coach-toggle:hover,.scene-page .coach-toggle.active,.scene-page .review-trigger:hover,.scene-page .review-back:hover,.scene-page .report-footer button:hover,.scene-page .speak-row button:hover{border-color:var(--accent);background:rgba(216,181,107,.14);color:var(--accent);transform:translateY(-1px)}.scene-page .back-button{padding:10px 14px;font:13px/1 ui-sans-serif,system-ui,sans-serif}.scene-page .back-button:before{content:"←";font-size:15px}.scene-page .continue-button{padding:12px 20px;font:17px/1 ui-sans-serif,system-ui,sans-serif}.scene-page .continue-button:after{content:"→";font-size:17px}.scene-page .review-back{padding:10px 14px;border-bottom:1px solid rgba(245,240,228,.28)}.scene-page .review-back:before{content:"←"}.scene-page .coach-toggle,.scene-page .review-trigger{min-height:36px;padding:9px 13px;border-bottom:1px solid rgba(245,240,228,.28);white-space:nowrap}.scene-page .coach-toggle:before{content:"?"}.scene-page .coach-toggle.active:before{content:"+"}.scene-page .review-trigger:before{content:"✓"}.scene-page #trainingEndButton:before,.scene-page #voiceEndButton:before{content:"×"}.scene-page .review-trigger:disabled{opacity:.38;cursor:not-allowed;transform:none}.scene-page .speak-row{grid-template-columns:minmax(0,1fr) 76px;gap:12px;padding:7px;border:1px solid rgba(245,240,228,.25);border-radius:24px;background:rgba(0,0,0,.28);backdrop-filter:blur(10px)}.scene-page .speak-row textarea{min-height:48px;border:0;border-radius:18px;padding:11px 14px;background:rgba(255,255,255,.045)}.scene-page .speak-row textarea:focus{box-shadow:0 0 0 1px rgba(216,181,107,.58)}.scene-page .speak-row button{width:auto;min-width:64px;border-radius:18px;font:16px/1 ui-sans-serif,system-ui,sans-serif}.scene-page .speak-row button:before{content:"↵";font-size:18px}.scene-page .speak-row button:disabled{opacity:.55;cursor:wait;transform:none}.scene-page .report-footer button{padding:12px 18px}.scene-page .report-footer button:before{content:"↻"}.scene-page #modelState:after{content:" · Enter 发送，Shift+Enter 换行"}@media(max-width:760px){.scene-page .speak-head{gap:10px}.scene-page .agent-actions{flex-wrap:wrap;justify-content:flex-end}.scene-page .coach-toggle,.scene-page .review-trigger{min-height:34px;padding:8px 10px}.scene-page .speak-row{grid-template-columns:minmax(0,1fr) 58px;border-radius:20px}.scene-page .speak-row button{min-width:46px;padding:0;font-size:0}.scene-page .speak-row button:before{font-size:20px}.scene-page #modelState:after{content:""}}
.replay-page{--replay-art:var(--scene-art);position:relative;isolation:isolate;min-height:100vh;display:grid;grid-template-rows:auto auto minmax(280px,1fr) auto;padding:24px max(4vw,20px) 22px;overflow:hidden}.replay-backdrop{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(3,3,3,.88),rgba(3,3,3,.38) 50%,rgba(3,3,3,.86)),var(--replay-art) center/cover;filter:brightness(.72) contrast(1.08)}.replay-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(3,3,3,.8))}.replay-header{display:flex;align-items:center;justify-content:space-between}.replay-header a,.replay-header button,.replay-controls button,.replay-controls select{min-height:40px;border:1px solid var(--line);border-radius:6px;padding:9px 14px;background:rgba(8,7,6,.62);color:var(--ink);font:13px/1 ui-sans-serif,system-ui,sans-serif;text-decoration:none;cursor:pointer}.replay-header a:hover,.replay-header button:hover,.replay-controls button:hover{border-color:var(--accent);color:var(--accent)}.replay-title{width:min(920px,100%);margin:6vh auto 18px;text-align:center;text-shadow:0 2px 12px #000}.replay-title>p:first-child{margin:0 0 12px;color:var(--accent);font:13px/1.5 ui-sans-serif,system-ui,sans-serif}.replay-title h1{margin:0;font-size:clamp(30px,4vw,58px);line-height:1.25}.replay-title>p:last-child{margin:16px auto 0;max-width:700px;color:var(--muted);font-size:16px;line-height:1.7}.replay-stage{width:min(720px,100%);min-height:0;margin:0 auto;overflow:auto}.replay-timeline{display:grid;gap:13px;padding:14px 4px 40px}.replay-line{max-width:88%;padding:13px 16px;border-left:1px solid var(--line);background:rgba(5,4,3,.64);opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease,border-color .2s ease}.replay-line.visible{opacity:1;transform:none}.replay-line.speaking{border-color:var(--accent);background:rgba(28,23,15,.78)}.replay-line span{display:block;margin-bottom:7px;color:var(--accent);font:12px/1 ui-sans-serif,system-ui,sans-serif}.replay-line p{margin:0;font-size:17px;line-height:1.65;white-space:pre-wrap}.replay-self{justify-self:end;border-left:0;border-right:1px solid var(--line);background:rgba(245,240,228,.13)}.replay-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding-top:16px;border-top:1px solid rgba(245,240,228,.2);font:13px/1 ui-sans-serif,system-ui,sans-serif}.replay-controls label,.replay-controls span{color:var(--muted)}.replay-controls .replay-play{min-width:116px;border-color:var(--accent);color:#f1cf83}.replay-controls select{padding-right:24px}@media(max-width:640px){.replay-page{padding:18px 16px 16px}.replay-title{margin-top:5vh}.replay-title h1{font-size:33px}.replay-stage{min-height:44vh}.replay-line{max-width:95%}.replay-controls{flex-wrap:wrap}.replay-controls .replay-play{flex:1 0 100%}}
.route-mode{display:none;position:relative;min-height:100vh;align-items:center;justify-content:center;flex-direction:column;padding:80px 24px 54px;background:linear-gradient(rgba(3,3,3,.84),rgba(3,3,3,.96)),var(--scene-art) center/cover}.scene-page[data-phase="mode"] .route-intro{display:none}.scene-page[data-phase="mode"] .route-mode{display:flex}.mode-heading{text-align:center;margin-bottom:42px}.mode-heading p{margin:0 0 14px;color:var(--accent);font:15px/1.4 ui-sans-serif,system-ui,sans-serif}.mode-heading h1{margin:0;font-size:clamp(32px,4vw,58px);line-height:1.25}.mode-options{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:18px;width:min(100%,738px)}.mode-card{min-height:230px;display:flex;align-items:flex-start;justify-content:flex-end;flex-direction:column;border:1px solid rgba(245,240,228,.24);border-radius:8px;padding:28px;background:rgba(8,7,6,.7);color:var(--ink);text-align:left;cursor:pointer;backdrop-filter:blur(14px);transition:transform .2s ease,border-color .2s ease,background .2s ease}.mode-card:hover,.mode-card:focus-visible{transform:translateY(-4px);border-color:var(--accent);background:rgba(30,26,19,.82);outline:0}.mode-icon{width:48px;height:48px;display:grid;place-items:center;margin-bottom:auto;border:1px solid var(--line);border-radius:50%;font:22px/1 ui-sans-serif,system-ui,sans-serif}.microphone-icon{font-size:14px}.mode-card strong{font-size:25px;font-weight:500}.mode-card small{margin-top:12px;color:var(--muted);font:13px/1.55 ui-sans-serif,system-ui,sans-serif}.mode-note{margin:22px 0 0;color:var(--muted);text-align:center;font:12px/1.5 ui-sans-serif,system-ui,sans-serif}.voice-box{display:none;width:min(680px,100%);padding:18px 20px 16px;border:1px solid rgba(245,240,228,.24);border-radius:8px;background:rgba(3,3,3,.44);backdrop-filter:blur(12px);text-shadow:0 2px 8px #000}.scene-page[data-mode="immersive"] .text-speak-box{display:none}.scene-page[data-mode="immersive"] .voice-box{display:block}.scene-page[data-mode="immersive"] .conversation{max-height:24vh}.voice-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.voice-head span{color:var(--accent);font:12px/1 ui-sans-serif,system-ui,sans-serif}.voice-head p{margin:7px 0 0;font:15px/1.4 ui-sans-serif,system-ui,sans-serif}.voice-orbit{position:relative;display:grid;place-items:center;width:112px;height:112px;margin:8px auto 0;border:1px solid rgba(245,240,228,.15);border-radius:50%;transition:border-color .2s ease,box-shadow .2s ease}.record-button{position:relative;width:68px;height:68px;border:1px solid rgba(245,240,228,.46);border-radius:50%;background:rgba(10,9,8,.82);cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,.35)}.record-button span{display:block;width:18px;height:18px;margin:auto;border-radius:50%;background:var(--accent);transition:border-radius .2s ease,transform .2s ease}.record-button:hover{border-color:var(--accent)}.record-button:disabled{cursor:wait;opacity:.7}.voice-orbit[data-state="recording"]{border-color:#c86153;box-shadow:0 0 0 8px rgba(200,97,83,.1)}.voice-orbit[data-state="recording"] .record-button span{border-radius:3px;transform:scale(.8);background:#df7869}.voice-orbit[data-state="speaking"]{border-color:var(--accent);box-shadow:0 0 0 8px rgba(216,181,107,.09)}.voice-bars{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:4px;pointer-events:none;opacity:0}.voice-bars i{width:2px;height:16px;background:var(--accent);animation:voice-wave .75s ease-in-out infinite alternate}.voice-bars i:nth-child(2),.voice-bars i:nth-child(4){animation-delay:.2s}.voice-bars i:nth-child(3){animation-delay:.4s}.voice-orbit[data-state="speaking"] .record-button{opacity:0}.voice-orbit[data-state="speaking"] .voice-bars{opacity:1}@keyframes voice-wave{to{height:42px}}.voice-hint{margin:4px 0 0;color:var(--muted);text-align:center;font:12px/1.5 ui-sans-serif,system-ui,sans-serif}.settings-form select{width:100%;border:1px solid var(--line);border-radius:6px;padding:12px;background:#151311;color:var(--ink);font:15px/1.2 ui-sans-serif,system-ui,sans-serif}@media(max-width:760px){.mode-options{grid-template-columns:1fr}.mode-card{min-height:160px}.voice-box{padding:15px}.scene-page[data-mode="immersive"] .arena-copy{margin-top:8vh}.scene-page[data-mode="immersive"] .conversation{max-height:22vh}}
.argument-outcome[hidden]{display:none!important}.argument-outcome{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:60px max(7vw,28px);background:linear-gradient(rgba(5,4,3,.78),rgba(5,4,3,.96)),var(--scene-art) center/cover;text-align:center;animation:outcome-reveal .8s ease both}.argument-outcome>p:first-child{margin:0 0 24px;color:var(--accent);font:13px/1.4 ui-sans-serif,system-ui,sans-serif}.argument-outcome h2{max-width:900px;margin:0;font-size:clamp(38px,5vw,74px);line-height:1.25}.argument-outcome>p:not(:first-child){max-width:800px;margin:28px auto 0;font-size:clamp(18px,2vw,27px);line-height:1.75}.outcome-mood{display:grid;gap:8px;margin-top:42px;padding-top:20px;border-top:1px solid var(--line)}.outcome-mood span{color:var(--muted);font:12px/1 ui-sans-serif,system-ui,sans-serif}.outcome-mood strong{color:var(--accent);font-size:20px;font-weight:400}@keyframes outcome-reveal{from{opacity:0}to{opacity:1}}.outcome-dialog{width:min(94vw,700px);border:1px solid rgba(245,240,228,.28);border-radius:8px;padding:32px;background:#15130f;color:var(--ink);box-shadow:0 28px 90px rgba(0,0,0,.7)}.outcome-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}.outcome-dialog>p{margin:0 0 14px;color:var(--accent);font:12px/1.5 ui-sans-serif,system-ui,sans-serif}.outcome-dialog h2{margin:0;font-size:28px;line-height:1.4}.outcome-dialog>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}.outcome-dialog button,.outcome-dialog a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:1px solid var(--line);border-radius:6px;padding:11px 17px;background:transparent;color:var(--ink);font:14px/1.3 ui-sans-serif,system-ui,sans-serif;text-align:center;text-decoration:none;cursor:pointer}.outcome-dialog .primary{border-color:var(--accent);background:rgba(216,181,107,.15);color:#f1cf83}.outcome-dialog button:hover,.outcome-dialog a:hover{border-color:var(--accent);color:var(--accent)}.outcome-dialog button:disabled{opacity:.55;cursor:wait}.outcome-dialog .outcome-save-status{min-height:18px;margin:16px 0 0;color:var(--muted)}@media(max-width:760px){.argument-outcome{padding:42px 22px}.outcome-dialog{padding:26px}.outcome-dialog>div{grid-template-columns:1fr}.outcome-dialog button,.outcome-dialog a{width:100%}}
.replay-page{--replay-art:var(--scene-art);position:relative;isolation:isolate;min-height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:28px max(4vw,24px) 24px;overflow:hidden;background:#030303}.replay-backdrop{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(2,2,2,.92),rgba(2,2,2,.58) 46%,rgba(2,2,2,.86)),var(--replay-art) center/cover;filter:grayscale(.35) brightness(.36) contrast(1.15);transform:scale(1.02)}.replay-backdrop:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 58% 45%,rgba(245,240,228,.06),transparent 32%),linear-gradient(transparent 62%,rgba(2,2,2,.9))}.replay-intro{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:86px;background:#030303;color:var(--ink);text-align:center}.replay-intro[hidden]{display:none}.replay-intro h1{max-width:min(900px,86vw);margin:0;font-size:clamp(34px,4.3vw,56px);font-weight:500;line-height:1.5;letter-spacing:0}.replay-intro button{border:0;border-bottom:1px solid rgba(245,240,228,.45);padding:0 12px 14px;background:transparent;color:var(--ink);font:clamp(22px,2.8vw,34px)/1.2 inherit;cursor:pointer}.replay-intro button:hover{color:var(--accent);border-color:var(--accent)}.replay-intro button:disabled{opacity:.45;cursor:wait}.replay-header{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;opacity:.72;transition:opacity .2s ease}.replay-header:hover{opacity:1}.replay-header a,.replay-header button,.replay-controls button,.replay-controls select{min-height:38px;border:1px solid rgba(245,240,228,.2);border-radius:999px;padding:8px 13px;background:rgba(2,2,2,.24);color:rgba(245,240,228,.78);font:12px/1 ui-sans-serif,system-ui,sans-serif;text-decoration:none;cursor:pointer;backdrop-filter:blur(8px)}.replay-header a:hover,.replay-header button:hover,.replay-controls button:hover{border-color:var(--accent);color:var(--accent)}.replay-title{position:absolute;left:max(4vw,24px);right:max(4vw,24px);top:70px;z-index:2;text-shadow:0 2px 18px #000;opacity:.56}.replay-title p{margin:0;color:rgba(245,240,228,.72);font:12px/1.6 ui-sans-serif,system-ui,sans-serif}.replay-title h1{max-width:720px;margin:8px 0 0;font-size:clamp(18px,2vw,30px);font-weight:400;line-height:1.35}.replay-title #replayOutcome{display:none}.replay-stage{position:relative;z-index:1;min-height:0;display:grid;align-items:center}.replay-current{width:min(48vw,920px);margin-top:3vh;text-shadow:0 2px 18px #000;opacity:1;transition:opacity .28s ease,transform .28s ease}.replay-current span{display:block;margin-bottom:34px;color:rgba(245,240,228,.48);font:17px/1 ui-sans-serif,system-ui,sans-serif}.replay-current p{margin:0;color:var(--ink);font-size:clamp(28px,3.2vw,48px);font-weight:500;line-height:1.75;letter-spacing:0;white-space:pre-wrap}.replay-current.replay-opponent{justify-self:end;text-align:right;margin-right:2vw}.replay-current.replay-self{justify-self:start;text-align:left;margin-left:0}.replay-current.replay-appear{animation:replay-line-in .42s ease both}@keyframes replay-line-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.replay-controls{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:10px;padding-top:16px;opacity:.62;transition:opacity .2s ease;font:12px/1 ui-sans-serif,system-ui,sans-serif}.replay-controls:hover{opacity:1}.replay-controls label,.replay-controls span{color:rgba(245,240,228,.6)}.replay-controls .replay-play{min-width:86px;border-color:rgba(216,181,107,.5);color:#f1cf83}.replay-page:not([data-state="playing"]):not([data-state="paused"]):not([data-state="ended"]) .replay-controls{opacity:0;pointer-events:none}@media(max-width:760px){.replay-page{padding:20px 18px 18px}.replay-intro{gap:58px}.replay-intro h1{font-size:34px}.replay-intro button{font-size:25px}.replay-title{top:66px}.replay-current{width:100%;margin-top:5vh}.replay-current span{margin-bottom:20px;font-size:13px}.replay-current p{font-size:30px;line-height:1.65}.replay-current.replay-opponent{margin-right:0}.replay-current.replay-self{margin-left:0}.replay-controls{flex-wrap:wrap}.replay-controls .replay-play{min-width:92px}}.voice-orbit[data-state="listening"]{border-color:rgba(216,181,107,.55);box-shadow:0 0 0 calc(8px + var(--voice-level,0)*18px) rgba(216,181,107,calc(.05 + var(--voice-level,0)*.2))}.voice-orbit[data-state="listening"] .record-button span{animation:listening-pulse 1.25s ease-in-out infinite}@keyframes listening-pulse{50%{transform:scale(.72);opacity:.62}}
.scene-page[data-mode="immersive"] .voice-box{width:min(520px,90vw);align-self:center;margin:0 0 clamp(7vh,9vh,96px);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;text-align:center}.scene-page[data-mode="immersive"] .voice-head{justify-content:center}.scene-page[data-mode="immersive"] .voice-head>div{position:absolute;left:50%;bottom:calc(100% + 18px);transform:translateX(-50%);width:min(420px,90vw);text-align:center}.scene-page[data-mode="immersive"] .voice-head span{display:none}.scene-page[data-mode="immersive"] .voice-head p{margin:0;color:rgba(245,240,228,.82);font-size:16px;text-shadow:0 2px 12px #000}.scene-page[data-mode="immersive"] #voiceEndButton{position:fixed;right:max(4vw,18px);top:24px;z-index:12}.scene-page[data-mode="immersive"] .voice-orbit{--voice-level:0;width:148px;height:148px;margin:0 auto;border-color:rgba(245,240,228,.18);background:radial-gradient(circle,rgba(216,181,107,calc(.08 + var(--voice-level)*.18)),rgba(2,2,2,.16) 54%,transparent 72%);box-shadow:0 0 0 calc(10px + var(--voice-level)*34px) rgba(216,181,107,calc(.04 + var(--voice-level)*.16)),0 0 calc(38px + var(--voice-level)*90px) rgba(216,181,107,calc(.12 + var(--voice-level)*.28));transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}.scene-page[data-mode="immersive"] .record-button{width:82px;height:82px;border-color:rgba(245,240,228,.3);background:rgba(3,3,3,.42);box-shadow:none;backdrop-filter:blur(8px)}.scene-page[data-mode="immersive"] .record-button span{width:18px;height:18px;transform:scale(calc(.86 + var(--voice-level)*1.4));opacity:calc(.62 + var(--voice-level)*.38)}.scene-page[data-mode="immersive"] .voice-bars{opacity:calc(.2 + var(--voice-level)*.8);gap:6px}.scene-page[data-mode="immersive"] .voice-bars i{width:3px;height:calc(12px + var(--voice-level)*56px);animation:none;transition:height .08s ease}.scene-page[data-mode="immersive"] .voice-bars i:nth-child(2),.scene-page[data-mode="immersive"] .voice-bars i:nth-child(4){height:calc(18px + var(--voice-level)*70px)}.scene-page[data-mode="immersive"] .voice-bars i:nth-child(3){height:calc(24px + var(--voice-level)*82px)}.scene-page[data-mode="immersive"] .voice-orbit[data-state="listening"] .voice-bars,.scene-page[data-mode="immersive"] .voice-orbit[data-state="recording"] .voice-bars{opacity:calc(.38 + var(--voice-level)*.62)}.scene-page[data-mode="immersive"] .voice-orbit[data-state="recording"]{border-color:rgba(223,120,105,.7);box-shadow:0 0 0 calc(12px + var(--voice-level)*38px) rgba(223,120,105,calc(.08 + var(--voice-level)*.16)),0 0 calc(48px + var(--voice-level)*90px) rgba(223,120,105,calc(.18 + var(--voice-level)*.26))}.scene-page[data-mode="immersive"] .voice-orbit[data-state="recording"] .record-button span{border-radius:4px;background:#df7869}.scene-page[data-mode="immersive"] .voice-hint{margin-top:22px;color:rgba(245,240,228,.58);text-shadow:0 2px 10px #000}@media(max-width:760px){.scene-page[data-mode="immersive"] .voice-box{margin-bottom:6vh}.scene-page[data-mode="immersive"] .voice-orbit{width:128px;height:128px}.scene-page[data-mode="immersive"] .record-button{width:72px;height:72px}.scene-page[data-mode="immersive"] #voiceEndButton{top:18px;right:18px}}
.scene-page[data-mode="immersive"] .voice-core{position:relative;z-index:1;display:grid;place-items:center;width:82px;height:82px;border:1px solid rgba(245,240,228,.3);border-radius:50%;background:rgba(3,3,3,.42);backdrop-filter:blur(8px);pointer-events:none}.scene-page[data-mode="immersive"] .voice-core span{display:block;width:18px;height:18px;border-radius:50%;background:var(--accent);transform:scale(calc(.86 + var(--voice-level)*1.4));opacity:calc(.62 + var(--voice-level)*.38);transition:transform .08s ease,opacity .08s ease,border-radius .12s ease,background .12s ease}.scene-page[data-mode="immersive"] .voice-orbit[data-state="recording"] .voice-core span{border-radius:4px;background:#df7869}.voice-orbit[data-state="listening"] .voice-core span{animation:listening-pulse 1.25s ease-in-out infinite}@media(max-width:760px){.scene-page[data-mode="immersive"] .voice-core{width:72px;height:72px}}
.replay-page .replay-backdrop{z-index:0;filter:grayscale(.18) brightness(.58) contrast(1.1)}.replay-page .replay-backdrop:after{background:linear-gradient(90deg,rgba(2,2,2,.72),rgba(2,2,2,.28) 48%,rgba(2,2,2,.66)),linear-gradient(transparent 64%,rgba(2,2,2,.78))}.replay-page .replay-header,.replay-page .replay-title,.replay-page .replay-stage,.replay-page .replay-controls{position:relative}.replay-current.replay-self,.replay-current.replay-self p{text-shadow:none}
.replay-page[data-state="playing"] .replay-stage{cursor:pointer}.replay-ended-dialog{width:min(90vw,560px);border:1px solid rgba(245,240,228,.28);border-radius:8px;padding:34px;background:#15130f;color:var(--ink);box-shadow:0 28px 90px rgba(0,0,0,.72);text-align:center}.replay-ended-dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(5px)}.replay-ended-dialog p{margin:0 0 14px;color:var(--accent);font:12px/1.5 ui-sans-serif,system-ui,sans-serif}.replay-ended-dialog h2{margin:0;font-size:28px;line-height:1.4}.replay-ended-dialog div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}.replay-ended-dialog button{min-height:46px;border:1px solid var(--line);border-radius:6px;padding:11px 17px;background:transparent;color:var(--ink);font:14px/1.3 ui-sans-serif,system-ui,sans-serif;cursor:pointer}.replay-ended-dialog .primary{border-color:var(--accent);background:rgba(216,181,107,.15);color:#f1cf83}.replay-ended-dialog button:hover{border-color:var(--accent);color:var(--accent)}@media(max-width:640px){.replay-ended-dialog{padding:28px}.replay-ended-dialog div{grid-template-columns:1fr}}
.replay-page{background:transparent}.replay-page .replay-backdrop{z-index:0;background:linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.16) 50%,rgba(0,0,0,.46)),var(--replay-art) center/cover no-repeat;filter:grayscale(.08) brightness(.88) contrast(1.04);opacity:1;transform:none;pointer-events:none}.replay-page .replay-backdrop:after{background:linear-gradient(transparent 72%,rgba(0,0,0,.44))}.replay-page .replay-header,.replay-page .replay-title,.replay-page .replay-stage{z-index:2}.replay-page .replay-stage{overflow:visible;align-items:center;padding-top:4vh}.replay-current,.replay-current.replay-self,.replay-current.replay-opponent{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin-top:0!important}.replay-current.replay-self{border-right:0!important}.replay-current.replay-opponent{border-left:0!important}.replay-current.replay-appear{animation:replay-fade-in .28s ease both}@keyframes replay-fade-in{from{opacity:0}to{opacity:1}}.replay-current p{font-size:clamp(30px,3vw,54px);line-height:1.62}.replay-current.replay-self p{text-shadow:none}.replay-current.replay-opponent p{text-shadow:0 2px 16px rgba(0,0,0,.72)}@media(max-width:760px){.replay-page .replay-stage{padding-top:2vh}.replay-current p{font-size:30px;line-height:1.62}}
.replay-page[data-state="playing"] .replay-title,.replay-page[data-state="ended"] .replay-title{opacity:0;pointer-events:none}.replay-page .replay-stage{position:absolute!important;inset:0;z-index:2;display:grid;align-items:center;width:100%;margin:0;padding:0 max(6vw,32px);overflow:hidden}.replay-current{transform:translateY(-2vh)}.replay-current.replay-appear{animation:replay-fade-in .28s ease both}@media(max-width:760px){.replay-page .replay-stage{padding:0 22px}.replay-current{transform:none}}
.immersive-prelude{position:absolute;inset:0;z-index:9;display:flex;align-items:flex-end;justify-content:center;padding:0 24px clamp(76px,13vh,150px);text-align:center;text-shadow:0 2px 18px #000;background:linear-gradient(90deg,rgba(3,3,3,.38),rgba(3,3,3,.08) 52%,rgba(3,3,3,.42)),linear-gradient(transparent 55%,rgba(3,3,3,.62))}.immersive-prelude[hidden]{display:none}.immersive-prelude button{border:0;border-bottom:1px solid rgba(245,240,228,.5);padding:0 16px 15px;background:transparent;color:var(--ink);font:clamp(23px,2.3vw,34px)/1.2 inherit;cursor:pointer;text-shadow:0 2px 14px #000}.immersive-prelude button:hover{color:var(--accent);border-color:var(--accent)}.immersive-prelude button:disabled{opacity:.45;cursor:wait}.immersive-prelude.leaving{animation:immersive-prelude-out .62s ease forwards}@keyframes immersive-prelude-out{to{opacity:0;transform:translateY(-8px)}}.scene-page[data-mode="immersive"] .conversation,.scene-page[data-mode="immersive"] .voice-box{transition:opacity .5s ease}.scene-page[data-mode="immersive"][data-immersive-started="false"] .conversation,.scene-page[data-mode="immersive"][data-immersive-started="false"] .voice-box{opacity:0;pointer-events:none}.scene-page[data-mode="immersive"][data-immersive-started="true"] .arena-copy{opacity:0;pointer-events:none;transition:opacity .8s ease}.scene-page[data-mode="immersive"][data-immersive-started="true"] .voice-head>div,.scene-page[data-mode="immersive"][data-immersive-started="true"] .voice-hint{opacity:.42;transition:opacity .8s ease}.scene-page[data-mode="immersive"][data-immersive-started="true"] .arena-art{filter:brightness(.7) contrast(1.04)}@media(max-width:760px){.immersive-prelude{padding:0 20px 78px}.immersive-prelude button{font-size:25px}}
.argument-outcome #outcomeContinue{margin-top:50px;border:0;border-bottom:1px solid rgba(245,240,228,.48);padding:0 14px 13px;background:transparent;color:var(--ink);font:clamp(20px,2vw,30px)/1.2 inherit;cursor:pointer;text-shadow:0 2px 14px #000}.argument-outcome #outcomeContinue:hover{color:var(--accent);border-color:var(--accent)}.argument-outcome #outcomeContinue:disabled{opacity:.45;cursor:wait}
.argument-outcome #outcomeCopy{max-width:min(920px,86vw);margin:0 auto;color:var(--ink);font:clamp(30px,3.3vw,54px)/1.65 inherit;text-shadow:0 2px 18px #000}.argument-outcome #outcomeCopy:empty{display:none}.argument-outcome .outcome-mood{margin-top:48px}.argument-outcome .outcome-mood span{font-size:13px}.argument-outcome .outcome-mood strong{font-size:clamp(20px,2.2vw,34px)}

/* Sketch rebuild default scene */
:root{--ink:#f7f1e5;--muted:rgba(247,241,229,.56);--line:rgba(247,241,229,.24);--accent:#e8dfcc;--scene-art:url("/assets/sketch-default/immersive-bg.webp");font-family:"Songti SC","Noto Serif SC","STSong",serif}
body{background:#050505}
.lobby{padding:24px 4vw 22px;background:#050505}
.lobby-backdrop{background:linear-gradient(180deg,rgba(5,5,5,.2),rgba(5,5,5,.66) 78%,rgba(5,5,5,.92)),url("/assets/home-argument-bg.webp") center/cover no-repeat;filter:none}
.lobby-backdrop:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.08),transparent 38%),linear-gradient(90deg,rgba(0,0,0,.34),transparent 26%,transparent 74%,rgba(0,0,0,.34));pointer-events:none}
.lobby-backdrop:after{background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38) 62%,rgba(0,0,0,.82));mix-blend-mode:normal}
.quiet-header{letter-spacing:.08em}
.scene-gallery{justify-content:center;min-height:48vh;margin-top:4vh}
.hero-scene.default-scene{width:min(62vw,900px);transform:rotate(-1.2deg)}
.hero-scene.default-scene:hover,.hero-scene.default-scene:focus-visible{transform:rotate(-1.2deg) translateY(-8px)}
.hero-scene img{aspect-ratio:2/1;object-fit:cover;border:0;border-radius:0;filter:drop-shadow(0 28px 34px rgba(0,0,0,.62))}
.hero-scene span{margin-top:-42px;position:relative;z-index:2;font-size:clamp(20px,2.2vw,35px);letter-spacing:.08em;text-shadow:0 3px 16px #000}
.overline{color:rgba(247,241,229,.74)}
.device-note{color:rgba(247,241,229,.34)}
.scene-picks img{border:0;border-radius:0;object-fit:cover;filter:grayscale(.2) drop-shadow(0 12px 12px rgba(0,0,0,.5))}
.entry-question{letter-spacing:.08em}
.arena-art{background:linear-gradient(90deg,rgba(0,0,0,.36),rgba(0,0,0,.08) 48%,rgba(0,0,0,.42)),var(--scene-art) center/cover no-repeat;filter:grayscale(.05) brightness(.82) contrast(1.08)}
.arena-art:after{background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.34) 72%,rgba(0,0,0,.78))}
.opponent-figure{display:none}
.scene-page[data-mode="immersive"] .route-arena{overflow:hidden;justify-content:flex-end}
.scene-page[data-mode="immersive"] .opponent-figure{display:block;position:absolute;right:clamp(18px,5vw,96px);bottom:clamp(38px,6vh,84px);z-index:1;width:clamp(280px,30vw,520px);max-height:72vh;object-fit:contain;filter:drop-shadow(0 22px 18px rgba(0,0,0,.48))}
.scene-page[data-mode="immersive"] .conversation{position:absolute;right:clamp(280px,31vw,610px);bottom:clamp(250px,37vh,430px);z-index:3;width:min(46vw,760px);max-height:42vh;margin:0;overflow:hidden;gap:20px;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.scene-page[data-mode="immersive"] .line{max-width:100%;padding:0;border:0;background:transparent;backdrop-filter:none;box-shadow:none}
.scene-page[data-mode="immersive"] .line span{display:none}
.scene-page[data-mode="immersive"] .line p{font-size:clamp(23px,2.1vw,38px);line-height:1.72;letter-spacing:.06em}
.scene-page[data-mode="immersive"] .opponent-line{justify-self:start;text-align:left;color:var(--ink)}
.scene-page[data-mode="immersive"] .self-line{justify-self:end;text-align:right;color:rgba(247,241,229,.7)}
.scene-page[data-mode="immersive"] .coach-line{display:none}
.scene-page[data-mode="immersive"] .voice-box{z-index:4;margin-bottom:clamp(24px,5vh,54px)}
.scene-page[data-mode="immersive"] .immersive-prelude{z-index:5;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,.04) 50%,rgba(0,0,0,.38)),linear-gradient(transparent 58%,rgba(0,0,0,.72))}
.scene-page[data-mode="immersive"][data-immersive-started="false"] .conversation{opacity:0!important;pointer-events:none!important}
.scene-page[data-mode="immersive"][data-immersive-started="false"] .voice-box{opacity:0!important;pointer-events:none!important}
.scene-page[data-mode="immersive"][data-immersive-started="true"] .arena-art{filter:grayscale(.05) brightness(.72) contrast(1.08)}
@media(max-width:760px){
  .scene-gallery{min-height:auto;margin:28px auto 18px}
  .hero-scene.default-scene{width:min(94vw,560px)}
  .hero-scene span{margin-top:-28px;font-size:20px}
  .scene-page[data-mode="immersive"] .opponent-figure{right:-48px;bottom:146px;width:min(38vw,170px);max-height:32vh}
  .scene-page[data-mode="immersive"] .conversation{left:20px;right:34vw;bottom:50vh;width:auto;max-height:30vh}
  .scene-page[data-mode="immersive"] .line p{font-size:24px;line-height:1.62}
}

/* Lobby three-scene layout */
.experience[data-view="lobby"],
.experience[data-view="lobby"] .lobby{
  height:100svh;
  min-height:100svh;
}
.experience[data-view="lobby"] .lobby{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(10px,2vh,22px);
  overflow:hidden;
  padding:clamp(16px,2.5vh,26px) clamp(18px,4vw,72px) clamp(16px,2.4vh,24px);
}
.experience[data-view="lobby"] .scene-gallery{
  align-self:center;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:clamp(18px,3.2vw,52px);
  width:min(100%,1540px);
  min-height:0;
  margin:0 auto;
}
.experience[data-view="lobby"] .hero-scene.default-scene{
  width:100%;
  max-width:480px;
  justify-self:center;
  transform:none;
}
.experience[data-view="lobby"] .hero-scene.left-scene{
  transform:rotate(-2.5deg) translateY(2.5vh);
}
.experience[data-view="lobby"] .hero-scene.center-scene{
  max-width:510px;
  transform:rotate(.8deg) translateY(-1vh);
}
.experience[data-view="lobby"] .hero-scene.right-scene{
  transform:rotate(2.2deg) translateY(1.6vh);
}
.experience[data-view="lobby"] .hero-scene.left-scene:hover,
.experience[data-view="lobby"] .hero-scene.left-scene:focus-visible{
  transform:rotate(-2.5deg) translateY(calc(2.5vh - 8px));
}
.experience[data-view="lobby"] .hero-scene.center-scene:hover,
.experience[data-view="lobby"] .hero-scene.center-scene:focus-visible{
  transform:rotate(.8deg) translateY(calc(-1vh - 8px));
}
.experience[data-view="lobby"] .hero-scene.right-scene:hover,
.experience[data-view="lobby"] .hero-scene.right-scene:focus-visible{
  transform:rotate(2.2deg) translateY(calc(1.6vh - 8px));
}
.experience[data-view="lobby"] .hero-scene img{
  aspect-ratio:1.82;
  max-height:min(32vh,300px);
  object-fit:contain;
}
.experience[data-view="lobby"] .hero-scene span{
  margin-top:clamp(-34px,-3vw,-20px);
  padding:0 8px;
  font-size:clamp(17px,1.5vw,26px);
}
.lobby-bottom{
  align-self:end;
}
.lobby-own-scenes[hidden]{
  display:none!important;
}
.lobby-own-scenes{
  margin:0 auto clamp(10px,1.7vh,18px);
}
.lobby-own-scenes .overline{
  margin-bottom:clamp(6px,1vh,10px);
  font-size:clamp(13px,1.2vw,17px);
}
.experience[data-view="lobby"] .scene-picks{
  gap:clamp(14px,2.2vw,28px);
  margin:0;
}
.experience[data-view="lobby"] .scene-picks a{
  width:clamp(96px,10vw,138px);
  font-size:clamp(11px,.9vw,14px);
}
.experience[data-view="lobby"] .scene-picks img{
  width:clamp(66px,6.5vw,88px);
  height:clamp(52px,5.5vw,72px);
  margin-bottom:6px;
}
.experience[data-view="lobby"] .scene-picks small{
  display:none;
}
.experience[data-view="lobby"] .entry-question{
  font-size:clamp(22px,2.1vw,31px);
}
.experience[data-view="lobby"] .entry-hint{
  display:block;
  margin-top:clamp(7px,1.1vh,12px);
  color:var(--muted);
  font-size:clamp(12px,1vw,15px);
  text-decoration:none;
}
.experience[data-view="lobby"] .entry-hint:hover,
.experience[data-view="lobby"] .entry-hint:focus-visible{
  color:var(--accent);
  outline:0;
}
.project-source{
  margin-top:clamp(8px,1.1vh,12px);
  color:rgba(247,241,229,.42);
  font:12px/1.5 ui-sans-serif,system-ui,sans-serif;
}
.project-source summary{
  display:inline;
  cursor:pointer;
  list-style:none;
}
.project-source summary::-webkit-details-marker{
  display:none;
}
.project-source summary:hover,
.project-source summary:focus-visible,
.project-source a:hover,
.project-source a:focus-visible{
  color:var(--accent);
  outline:0;
}
.project-source a{
  display:block;
  width:max-content;
  max-width:100%;
  margin:6px auto 0;
  color:rgba(247,241,229,.68);
  text-decoration:none;
  border-bottom:1px solid rgba(247,241,229,.24);
}
@media(max-width:900px){
  .experience[data-view="lobby"] .scene-gallery{
    gap:14px;
  }
  .experience[data-view="lobby"] .hero-scene span{
    font-size:clamp(14px,2.2vw,18px);
  }
}
@media(max-width:760px){
  .experience[data-view="lobby"] .lobby{
    gap:10px;
    padding:14px 16px 16px;
  }
  .quiet-header{
    font-size:10px;
  }
  .experience[data-view="lobby"] .scene-gallery{
    grid-template-columns:1fr;
    gap:8px;
    align-content:center;
    width:min(100%,430px);
  }
  .experience[data-view="lobby"] .hero-scene.default-scene,
  .experience[data-view="lobby"] .hero-scene.left-scene,
  .experience[data-view="lobby"] .hero-scene.center-scene,
  .experience[data-view="lobby"] .hero-scene.right-scene{
    width:100%;
    max-width:390px;
    transform:none;
  }
  .experience[data-view="lobby"] .hero-scene.default-scene:hover,
  .experience[data-view="lobby"] .hero-scene.default-scene:focus-visible{
    transform:translateY(-4px);
  }
  .experience[data-view="lobby"] .hero-scene img{
    aspect-ratio:2;
    max-height:17svh;
  }
  .experience[data-view="lobby"] .hero-scene span{
    margin-top:-24px;
    font-size:clamp(13px,3.7vw,16px);
  }
  .lobby-own-scenes{
    margin-bottom:8px;
  }
  .experience[data-view="lobby"] .scene-picks{
    gap:8px;
  }
  .experience[data-view="lobby"] .scene-picks a{
    width:30vw;
    max-width:112px;
    font-size:11px;
  }
  .experience[data-view="lobby"] .scene-picks img{
    width:58px;
    height:46px;
    margin-bottom:4px;
  }
  .experience[data-view="lobby"] .entry-question{
    font-size:clamp(18px,5.5vw,23px);
  }
  .experience[data-view="lobby"] .entry-hint{
    font-size:12px;
  }
  .project-source{
    margin-top:7px;
    font-size:11px;
  }
}
@media(max-width:760px) and (max-height:720px){
  .experience[data-view="lobby"] .scene-gallery{
    gap:4px;
  }
  .experience[data-view="lobby"] .hero-scene img{
    max-height:16svh;
  }
  .lobby-own-scenes .overline{
    display:none;
  }
  .experience[data-view="lobby"] .scene-picks img{
    width:50px;
    height:38px;
  }
  .experience[data-view="lobby"] .entry-question{
    padding-bottom:7px;
    font-size:19px;
  }
}

/* 沉浸模式录音提示：保留状态反馈，把视觉重量压缩到底部细线。 */
.scene-page[data-mode="immersive"] .voice-box{
  position:absolute;
  left:0;
  right:0;
  bottom:clamp(16px,2.8vh,28px);
  width:min(220px,58vw);
  margin:0 auto;
  padding:0;
  transform:none;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.scene-page[data-mode="immersive"] .voice-head{
  min-height:0;
}
.scene-page[data-mode="immersive"] .voice-head>div{
  bottom:calc(100% + 8px);
  width:260px;
  opacity:0!important;
  transition:opacity .18s ease;
}
.scene-page[data-mode="immersive"] .voice-head p{
  margin:0;
  font-size:11px;
  line-height:1.2;
  white-space:nowrap;
}
.scene-page[data-mode="immersive"] .voice-orbit{
  --voice-level:0;
  position:relative;
  width:184px;
  height:14px;
  margin:0 auto;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility 0s linear .18s;
}
.scene-page[data-mode="immersive"] .voice-orbit::before,
.scene-page[data-mode="immersive"] .voice-orbit::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  transform-origin:center;
  pointer-events:none;
}
.scene-page[data-mode="immersive"] .voice-orbit::before{
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(247,241,229,.2) 18%,rgba(247,241,229,.34) 50%,rgba(247,241,229,.2) 82%,transparent);
}
.scene-page[data-mode="immersive"] .voice-orbit::after{
  width:48%;
  height:2px;
  opacity:.14;
  background:linear-gradient(90deg,transparent,rgba(232,223,204,.92),transparent);
  box-shadow:0 0 8px rgba(232,223,204,.22);
  transform:translate(-50%,-50%) scaleX(calc(.3 + var(--voice-level)*.7));
  transition:opacity .12s ease,transform .08s ease,box-shadow .12s ease;
}
.scene-page[data-mode="immersive"] .voice-bars,
.scene-page[data-mode="immersive"] .voice-core{
  display:none;
}
.scene-page[data-mode="immersive"] .voice-hint{
  display:none;
}
.scene-page[data-mode="immersive"] .voice-box[data-state="listening"] .voice-head>div,
.scene-page[data-mode="immersive"] .voice-box[data-state="recording"] .voice-head>div{
  opacity:.34!important;
}
.scene-page[data-mode="immersive"] .voice-box[data-state="listening"] .voice-orbit,
.scene-page[data-mode="immersive"] .voice-box[data-state="recording"] .voice-orbit{
  opacity:1;
  visibility:visible;
  transition-delay:0s;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}
.scene-page[data-mode="immersive"] .voice-box[data-state="error"] .voice-head>div{
  opacity:.46!important;
}
.scene-page[data-mode="immersive"] .voice-orbit[data-state="listening"]::after{
  opacity:calc(.2 + var(--voice-level)*.42);
  box-shadow:0 0 calc(5px + var(--voice-level)*10px) rgba(232,223,204,calc(.18 + var(--voice-level)*.28));
  animation:voice-line-glimmer 1.9s ease-in-out infinite;
}
.scene-page[data-mode="immersive"] .voice-orbit[data-state="recording"]::after{
  height:2px;
  opacity:calc(.34 + var(--voice-level)*.5);
  background:linear-gradient(90deg,transparent,rgba(247,241,229,.96),transparent);
  box-shadow:0 0 calc(7px + var(--voice-level)*13px) rgba(247,241,229,calc(.22 + var(--voice-level)*.34));
  animation:voice-line-glimmer .9s ease-in-out infinite;
}
@keyframes voice-line-glimmer{
  50%{filter:brightness(1.7);transform:translate(-50%,-50%) scaleX(calc(.52 + var(--voice-level)*.48))}
}
@media(max-width:760px){
  .scene-page[data-mode="immersive"] .voice-box{
    bottom:18px;
    width:min(196px,62vw);
    margin:0;
  }
  .scene-page[data-mode="immersive"] .voice-orbit{
    width:160px;
    height:12px;
  }
  .scene-page[data-mode="immersive"] .voice-head>div{
    width:220px;
  }
}
@media(prefers-reduced-motion:reduce){
  .scene-page[data-mode="immersive"] .voice-orbit::after{
    animation:none!important;
  }
}

.scene-page[data-phase="arena"] .arena-copy{
  position:absolute;
  left:50%;
  top:clamp(70px,8vh,104px);
  z-index:4;
  width:min(860px,calc(100% - 48px));
  margin:0;
  transform:translateX(-50%);
}
.scene-page[data-phase="arena"] .arena-copy>p:last-child{
  margin-top:14px;
}
.scene-page[data-phase="arena"]:not([data-mode="immersive"]) .conversation{
  margin-top:clamp(190px,27vh,260px);
}
@media(max-width:760px){
  .scene-page[data-phase="arena"] .arena-copy{
    top:64px;
    width:calc(100% - 36px);
  }
  .scene-page[data-phase="arena"] .scene-kicker{
    margin-bottom:8px;
    font-size:13px;
  }
  .scene-page[data-phase="arena"] .arena-copy h1{
    font-size:clamp(25px,8vw,34px);
  }
  .scene-page[data-phase="arena"] .arena-copy>p:last-child{
    margin-top:10px;
    font-size:14px;
    line-height:1.55;
  }
  .scene-page[data-phase="arena"]:not([data-mode="immersive"]) .conversation{
    margin-top:220px;
  }
}

/* Preset scene controls */
.experience[data-view="lobby"] .scene-carousel{
  align-self:center;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:clamp(12px,1.6vw,22px);
  width:min(100%,1640px);
  min-height:0;
  margin:0 auto;
  transform:translateY(clamp(74px,10vh,116px));
}
.scene-nav{
  width:44px;
  height:44px;
  border:1px solid rgba(247,241,229,.26);
  border-radius:50%;
  background:rgba(4,4,4,.38);
  color:var(--ink);
  box-shadow:0 12px 26px rgba(0,0,0,.36);
  backdrop-filter:blur(8px);
  font:30px/1 ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease;
}
.scene-nav:hover,
.scene-nav:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
  outline:0;
  transform:translateY(-2px);
}
.scene-nav:disabled{
  opacity:.28;
  cursor:default;
  transform:none;
}
@media(max-width:760px){
  .experience[data-view="lobby"] .scene-carousel{
    grid-template-columns:36px minmax(0,1fr) 36px;
    gap:8px;
    width:100%;
    transform:translateY(3vh);
  }
  .scene-nav{
    width:36px;
    height:36px;
    font-size:24px;
  }
}

/* Non-lobby mobile polish */
.hidden{
  display:none!important;
}
.admin-page{
  background:#0b0a09;
}
.admin-shell{
  width:min(1120px,100%);
  margin:0 auto;
  padding:42px max(5vw,22px) 64px;
}
.admin-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  margin-bottom:28px;
}
.admin-header h1{
  margin:0;
  font-size:clamp(34px,4vw,58px);
  line-height:1.2;
}
.admin-header p{
  max-width:620px;
  margin:12px 0 0;
  color:var(--muted);
  font:14px/1.7 ui-sans-serif,system-ui,sans-serif;
}
.eyebrow,.label{
  margin:0 0 10px!important;
  color:var(--accent)!important;
  font:12px/1.2 ui-sans-serif,system-ui,sans-serif!important;
  letter-spacing:.12em;
}
.admin-link{
  flex:0 0 auto;
  min-height:40px;
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(247,241,229,.22);
  border-radius:999px;
  padding:10px 14px;
  background:rgba(8,7,6,.48);
  color:var(--ink);
  font:13px/1 ui-sans-serif,system-ui,sans-serif;
  text-decoration:none;
}
.admin-link:hover,.admin-link:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
  outline:0;
}
.admin-panel{
  border:1px solid rgba(247,241,229,.18);
  border-radius:8px;
  padding:28px;
  background:rgba(18,16,14,.72);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.admin-panel h2{
  margin:0 0 22px;
  font-size:26px;
  line-height:1.25;
}
.panel-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:24px;
}
.connection-badge{
  flex:0 0 auto;
  border:1px solid rgba(247,241,229,.22);
  border-radius:999px;
  padding:8px 11px;
  color:var(--muted);
  font:12px/1 ui-sans-serif,system-ui,sans-serif;
}
.connection-badge[data-ready="true"]{
  border-color:rgba(232,223,204,.42);
  color:var(--accent);
}
.settings-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.settings-form.compact-form{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
}
.settings-form label{
  display:grid;
  gap:8px;
  color:var(--muted);
  font:13px/1.4 ui-sans-serif,system-ui,sans-serif;
}
.settings-form input,.settings-form textarea,.settings-form select{
  width:100%;
  min-width:0;
  border:1px solid rgba(247,241,229,.2);
  border-radius:6px;
  padding:12px;
  background:#151311;
  color:var(--ink);
  font:15px/1.45 ui-sans-serif,system-ui,sans-serif;
  outline:0;
}
.settings-form textarea{
  resize:vertical;
}
.settings-form input:focus,.settings-form textarea:focus,.settings-form select:focus{
  border-color:var(--accent);
}
.wide-label{
  grid-column:1/-1;
}
.settings-form button,.secondary-button{
  min-height:44px;
  border:1px solid rgba(247,241,229,.24);
  border-radius:6px;
  padding:11px 15px;
  background:rgba(247,241,229,.08);
  color:var(--ink);
  font:14px/1.2 ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;
}
.settings-form button:hover,.settings-form button:focus-visible{
  border-color:var(--accent);
  color:var(--accent);
  outline:0;
}
.form-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
#saveStatus{
  min-width:min(100%,220px);
  color:var(--muted);
  font:13px/1.5 ui-sans-serif,system-ui,sans-serif;
}
#saveStatus[data-tone="success"]{
  color:var(--accent);
}
#saveStatus[data-tone="error"]{
  color:#df7869;
}
.form-note{
  margin:20px 0 0;
  color:var(--muted);
  font:13px/1.7 ui-sans-serif,system-ui,sans-serif;
}
.form-note code{
  color:var(--accent);
}
@media(max-width:760px){
  html,body{
    width:100%;
    overflow-x:hidden;
  }
  .create-page,.route-intro,.route-mode,.route-arena,.replay-page{
    min-height:100svh;
  }
  .create-page{
    align-items:start;
    place-items:start center;
    padding:calc(72px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
    overflow:auto;
  }
  .create-page .back-button{
    top:calc(18px + env(safe-area-inset-top));
    left:18px;
  }
  .create-form h1{
    margin-bottom:28px;
    font-size:clamp(29px,8.5vw,36px);
    line-height:1.45;
  }
  .create-form textarea{
    min-height:clamp(170px,34svh,260px);
    max-height:42svh;
    padding:18px;
    border-radius:14px;
    font-size:17px;
    line-height:1.65;
  }
  .create-form>p{
    margin:28px 0 14px;
    font-size:16px;
  }
  .gender-options{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .gender-options label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:42px;
    padding:0 6px;
    border:1px solid rgba(247,241,229,.18);
    border-radius:999px;
    font-size:14px;
  }
  .create-form button{
    margin-top:34px;
    font-size:22px;
  }
  .generation-progress{
    margin-top:24px;
  }
  .create-form .create-note{
    margin-top:14px;
  }
  .route-intro{
    padding:calc(82px + env(safe-area-inset-top)) 22px calc(96px + env(safe-area-inset-bottom));
  }
  .route-intro .back-button,.route-mode .back-button{
    top:calc(18px + env(safe-area-inset-top));
    left:18px;
  }
  .intro-copy{
    gap:24px;
  }
  .intro-copy p{
    font-size:clamp(25px,7.5vw,34px);
    line-height:1.5;
  }
  .continue-button{
    bottom:calc(28px + env(safe-area-inset-bottom));
  }
  .route-mode{
    justify-content:flex-start;
    padding:calc(82px + env(safe-area-inset-top)) 18px calc(26px + env(safe-area-inset-bottom));
    overflow:auto;
  }
  .mode-heading{
    margin-bottom:24px;
  }
  .mode-heading p{
    margin-bottom:10px;
    font-size:12px;
  }
  .mode-heading h1{
    font-size:clamp(29px,8vw,38px);
  }
  .mode-options{
    gap:12px;
  }
  .mode-card{
    min-height:132px;
    padding:18px;
  }
  .mode-icon{
    width:34px;
    height:34px;
    margin-bottom:20px;
    font-size:17px;
  }
  .mode-card strong{
    font-size:21px;
  }
  .mode-card small{
    margin-top:8px;
    font-size:12px;
  }
  .mode-note{
    margin-top:16px;
    padding:0 8px;
  }
  .route-arena{
    display:none;
    min-height:100svh;
    max-height:none;
    padding:calc(60px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
    overflow:hidden;
  }
  .scene-page[data-phase="arena"] .route-arena{
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
    align-items:stretch;
  }
  .scene-page[data-phase="arena"] .arena-copy{
    position:static;
    width:100%;
    transform:none;
    align-self:start;
  }
  .scene-page[data-phase="arena"] .arena-copy h1{
    font-size:clamp(24px,7vw,32px);
    line-height:1.28;
  }
  .scene-page[data-phase="arena"] .arena-copy>p:last-child{
    display:-webkit-box;
    max-height:4.9em;
    overflow:hidden;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
  }
  .scene-page[data-phase="arena"]:not([data-mode="immersive"]) .conversation{
    min-height:0;
    max-height:none;
    margin:18px 0;
    padding-right:2px;
    align-self:stretch;
    overscroll-behavior:contain;
  }
  .line{
    max-width:96%;
    padding:10px 12px;
  }
  .line p{
    font-size:15px;
    line-height:1.58;
  }
  .scene-page .speak-head{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .scene-page .agent-actions{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  .review-tooltip{
    min-width:0;
  }
  .scene-page .coach-toggle,.scene-page .review-trigger{
    width:100%;
    min-height:36px;
    padding:8px 7px;
    font-size:12px;
  }
  .scene-page .speak-row{
    grid-template-columns:minmax(0,1fr) 52px;
    gap:8px;
    padding:6px;
    border-radius:18px;
  }
  .scene-page .speak-row textarea{
    min-height:44px;
    max-height:96px;
    padding:10px 12px;
    border-radius:14px;
    font-size:16px;
  }
  .scene-page .speak-row button{
    min-width:0;
    min-height:44px;
    border-radius:14px;
  }
  .review-tooltip[data-disabled="true"]:hover:after{
    left:50%;
    right:auto;
    bottom:calc(100% + 8px);
    max-width:min(260px,86vw);
    transform:translateX(-50%);
  }
  .review-tooltip[data-disabled="true"]:hover:before{
    left:50%;
    right:auto;
    transform:translateX(-50%);
  }
  .scene-page[data-mode="immersive"] .route-arena{
    display:flex;
    padding:calc(56px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
    overflow:hidden;
  }
  .scene-page[data-mode="immersive"] .arena-copy{
    position:absolute;
    left:18px;
    right:18px;
    top:calc(58px + env(safe-area-inset-top));
    width:auto;
    transform:none;
  }
  .scene-page[data-mode="immersive"] .opponent-figure{
    right:-38px;
    bottom:112px;
    width:min(44vw,188px);
    max-height:34svh;
  }
  .scene-page[data-mode="immersive"] .conversation{
    left:18px;
    right:30vw;
    bottom:42svh;
    width:auto;
    max-height:25svh;
  }
  .scene-page[data-mode="immersive"] .line p{
    font-size:clamp(20px,6vw,25px);
    line-height:1.55;
  }
  .scene-page[data-mode="immersive"] #voiceEndButton{
    top:calc(16px + env(safe-area-inset-top));
    right:16px;
  }
  .immersive-prelude{
    padding:0 20px calc(74px + env(safe-area-inset-bottom));
  }
  .argument-outcome{
    padding:calc(48px + env(safe-area-inset-top)) 20px calc(34px + env(safe-area-inset-bottom));
  }
  .argument-outcome #outcomeCopy{
    font-size:clamp(26px,8vw,36px);
    line-height:1.55;
  }
  .argument-outcome #outcomeContinue{
    margin-top:34px;
    font-size:22px;
  }
  .outcome-dialog,.replay-ended-dialog{
    width:calc(100vw - 32px);
    max-width:420px;
    padding:22px;
  }
  .outcome-dialog h2,.replay-ended-dialog h2{
    font-size:23px;
  }
  .review-header{
    min-height:auto;
    padding:calc(74px + env(safe-area-inset-top)) 22px 46px;
  }
  .review-header h1{
    font-size:clamp(29px,8vw,38px);
    line-height:1.38;
  }
  .report-lead,.score-section,.personality-section,.report-columns,.suggested-section,.report-footer{
    padding:38px 22px;
  }
  .report-lead>p:not(.report-model){
    font-size:18px;
    line-height:1.72;
  }
  .score-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .score-grid strong{
    font-size:30px;
  }
  .suggested-section blockquote{
    font-size:clamp(23px,7vw,32px);
  }
  .report-footer button{
    width:100%;
    min-height:44px;
  }
  .replay-page{
    min-height:100svh;
    padding:calc(18px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  }
  .replay-intro{
    gap:52px;
    padding:0 22px;
  }
  .replay-intro h1{
    font-size:clamp(30px,8vw,38px);
  }
  .replay-intro button{
    font-size:clamp(22px,6vw,28px);
  }
  .replay-header{
    opacity:.86;
  }
  .replay-title{
    left:18px;
    right:18px;
    top:calc(64px + env(safe-area-inset-top));
  }
  .replay-title h1{
    font-size:clamp(18px,5vw,24px);
  }
  .replay-page .replay-stage{
    padding:0 20px;
  }
  .replay-current p{
    font-size:clamp(26px,7.2vw,34px);
    line-height:1.58;
  }
  .replay-current span{
    margin-bottom:16px;
  }
  .admin-shell{
    padding:calc(24px + env(safe-area-inset-top)) 16px calc(36px + env(safe-area-inset-bottom));
  }
  .admin-header{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
  }
  .admin-header h1{
    font-size:34px;
  }
  .admin-link{
    width:max-content;
  }
  .admin-panel{
    padding:20px;
  }
  .panel-heading{
    display:grid;
    grid-template-columns:1fr;
  }
  .connection-badge{
    width:max-content;
  }
  .settings-form,.settings-form.compact-form{
    grid-template-columns:1fr;
    gap:14px;
  }
  .settings-form input,.settings-form textarea,.settings-form select{
    min-height:44px;
    padding:11px;
    font-size:16px;
  }
  .form-actions{
    display:grid;
    grid-template-columns:1fr;
  }
  .form-actions button{
    width:100%;
  }
  #saveStatus{
    min-width:0;
  }
}
@media(max-width:390px){
  .scene-page .agent-actions{
    grid-template-columns:1fr;
  }
  .scene-page[data-mode="immersive"] .conversation{
    right:26vw;
  }
  .scene-page[data-mode="immersive"] .opponent-figure{
    width:46vw;
  }
  .gender-options{
    grid-template-columns:1fr;
  }
}