body.is-onboarding{background:#0c0a11;color:#f7eddb}
body.is-onboarding>header,body.is-onboarding>footer{display:none}
body.is-onboarding>main{padding:0;max-width:none;min-height:100vh;min-height:100dvh;width:100%}
#app.scene-fade-out{opacity:0;transition:opacity .18s ease}
#app.scene-fade-in{animation:scene-reveal .3s ease}
.story-shell{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;background:#08070c;isolation:isolate}
.story-toolbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 4%;color:#f1dfc2;min-height:80px;background:linear-gradient(#0d0918c9,transparent)}
.story-toolbar>span{font-size:10px;letter-spacing:3px;color:#c7aa7c}
.story-toolbar>div{display:flex;gap:12px;align-items:center}
.story-quiet{border:1px solid #b9986c55;color:#ead8b9;background:#14101dcc;padding:9px 13px;font-size:11px;min-height:40px}
.story-quiet:hover{background:#3b2b3a}
.story-dream{background:#030305;display:flex;flex-direction:column}
.narration{flex:1;min-height:calc(100dvh - 80px);width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 10% 100px;color:#fff}
.story-kicker{font:12px var(--serif);letter-spacing:7px;color:#a39788;margin-bottom:34px}
.narration p{font:clamp(22px,2.6vw,35px)/1.9 var(--serif);margin:0;text-wrap:balance;text-align:center;animation:text-reveal .7s ease both}
.narration small{font-size:10px;letter-spacing:1.5px;color:#766e6a;margin-top:65px}
.story-opening,.story-commute{background:#5e4836 url('assets/living-cafe.webp') center/cover no-repeat}
.story-commute{background-image:url('assets/commute-cafe.webp')}
.story-opening:before,.story-commute:before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,#241a20dd);pointer-events:none;z-index:-1}
.story-caption{position:absolute;z-index:3;left:8%;right:8%;bottom:5%;border:1px solid #c7a87399;border-radius:3px;padding:27px 35px 18px;background:linear-gradient(120deg,#16101fed,#241726f5);box-shadow:0 18px 70px #06040955;animation:text-reveal .45s ease both}
.story-caption-name{color:#e8c891;font-size:12px;letter-spacing:2px;display:flex;align-items:center;gap:10px;margin-bottom:18px}
.story-caption-name:before{content:'';width:6px;height:6px;background:#d3a65d;transform:rotate(45deg)}
.story-caption p{font:clamp(17px,1.6vw,23px)/1.85 var(--serif);margin:0;max-width:1020px;color:#fff3e0;min-height:76px}
.story-caption-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:14px;gap:20px}
.story-caption-bottom>span{font-size:9px;color:#ae998a;letter-spacing:2px}
.story-next{border:1px solid #c19a6177;background:#fff0d00d;color:#f5d8a9;font-size:12px;min-height:44px;padding:10px 24px}
.story-next:hover{background:#b3864333}
.story-actor{position:absolute;inset:90px 0 140px;display:flex;justify-content:center;align-items:center;pointer-events:none}
.actor-mat{height:min(65vh,630px);width:min(32vw,370px);border-radius:190px 190px 8px 8px;background:#f6edd9;border:1px solid #c9a877;box-shadow:0 0 100px #f0be6038,0 12px 50px #09071166;overflow:hidden;animation:actor-reveal .9s ease both}
.actor-mat img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:12px 5px}
.story-meeting,.story-contract{background:radial-gradient(ellipse at 50% 25%,#59415a 0,#21192f 40%,#090810 80%)}
.story-meeting:before,.story-contract:before{content:'';position:absolute;width:60vw;height:60vw;border:1px solid #d8b58120;border-radius:50%;top:-20vw;left:20vw;z-index:-1;box-shadow:0 0 0 60px #dbbf7d05,0 0 0 120px #dbbf7d03}
.story-meeting .story-actor{bottom:170px;top:85px}
.story-meeting .actor-mat{height:min(66vh,650px);width:min(33vw,370px)}
.story-commute .story-actor{justify-content:flex-end;padding-right:15%;bottom:200px}
.story-commute .actor-mat{height:min(60vh,580px);width:min(29vw,320px);animation:walk-to-cafe 1.8s ease both}
.story-accident{background:#020204}
.accident-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:single-flash .7s ease both;pointer-events:none}
.contract-scene{position:relative;min-height:calc(100dvh - 80px);max-width:1040px;margin:auto;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:65px;padding:30px 35px 65px}
.contract-sheet{background:#f5eddc;color:#42342c;padding:36px 40px;border:1px solid #c8a66b;box-shadow:0 0 0 6px #c69e6022,0 25px 90px #0005}
.contract-sheet h1{font:38px var(--serif);margin:14px 0 20px;letter-spacing:4px;color:#654332}
.contract-intro{font:13px/1.9 var(--serif);color:#796654;margin:0 0 22px}
.contract-sheet dl{margin:0;border-top:1px solid #c9b28e}
.contract-sheet dl>div{display:grid;grid-template-columns:90px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid #d8c9ae;font-size:11px;line-height:1.7}
.contract-sheet dt{color:#8f7456}
.contract-sheet dd{margin:0}
.contract-stakes{font:12px/1.8 var(--serif);color:#8a5344;margin:22px 0}
.contract-scene .story-actor{position:static;min-width:0}
.contract-scene .actor-mat{width:100%;height:540px}
.day-title{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#050408;text-align:center;animation:scene-reveal .7s ease}
.day-title h1{font:clamp(26px,4vw,47px) var(--serif);letter-spacing:5px;margin:30px 0 20px}
.day-title p{font:14px var(--serif);color:#a39584}
.day-title button{margin-top:50px;animation:text-reveal 1.2s ease both}
.tutorial-shell{background:radial-gradient(ellipse at 50% 0%,#493443,#17131e 70%);min-height:100vh;min-height:100dvh;padding-bottom:35px}
.tutorial-wrap{width:92%;max-width:1160px;margin:8px auto 0;background:#f6f1e5;color:var(--ink);border:1px solid #c6ab7d;padding:28px 35px 35px;box-shadow:0 25px 80px #07060b55}
.tutorial-top{display:flex;align-items:center;justify-content:space-between;gap:18px}
.tutorial-top h1{font:28px var(--serif);margin:10px 0 0}
.training-status{text-align:right}
.training-status b{font-size:12px;font-weight:normal;color:#74796a}
.training-status b>span{font:28px var(--serif);color:var(--green);margin:0 5px}
.training-status small{display:block;font-size:10px;color:#8f8a79;margin-top:8px}
.tutorial-progress{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,1fr);margin:26px 0;gap:8px;border-top:1px solid #d8d2c1;padding-top:20px}
.tutorial-progress li{font-size:10px;color:#9c9c8c;display:flex;align-items:center;gap:8px}
.tutorial-progress li>span{border:1px solid #d7d5c5;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;font-size:9px;flex-shrink:0}
.tutorial-progress li.current{color:#315b47;font-weight:700}
.tutorial-progress li.current>span{background:#315b47;color:#fff;border-color:#315b47}
.tutorial-progress li.done{color:#ac8953}
.tutorial-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.tutorial-layout .stage{height:355px}
.tutorial-layout .stage .visitor-portrait{height:320px;width:214px;bottom:19px}
.tutorial-layout .stage .visitor-image{height:308px;width:202px;bottom:22px}
.tutorial-layout .dialogue{min-height:140px}
.tutorial-card{padding:28px;min-height:495px;display:flex;flex-direction:column}
.tutorial-card h2{font:26px/1.45 var(--serif);margin:16px 0}
.tutorial-explanation{font:16px/1.9 var(--serif);margin:0 0 22px;min-height:60px}
.tutorial-bottom{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:25px}
.tutorial-bottom>small{font-size:10px;color:#a4977f}
.tutorial-motto{font:23px/1.8 var(--serif);color:#b6ab95;padding:15px 0 25px;border-left:2px solid #c9b28c;padding-left:24px;margin:10px 0}
.reversal-examples{display:grid;gap:0;border-top:1px solid #ded6c6;margin:0 0 18px}
.reversal-examples>div{display:grid;grid-template-columns:1fr 30px 1fr;padding:15px 0;border-bottom:1px solid #ded6c6;align-items:center;font-size:12px}
.reversal-examples b{color:#b59968;font-weight:normal}
.reversal-examples strong{font-weight:600;color:#40624b}
.tutorial-rewards{border-top:1px solid #d8d1bf;margin-bottom:18px}
.tutorial-rewards>div{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #dfd7c6;padding:13px 0;font-size:11px}
.tutorial-rewards b{color:#9f7f48;white-space:nowrap}
.tutorial-rewards b.bad{color:#a05b43}
.training-reminder{font-size:10px;line-height:1.8;color:#86816e;margin:0}
.special-rule{padding:25px 15px;border:1px solid #d5c6a5;text-align:center;display:flex;flex-direction:column;gap:16px;background:#f7f0df}
.special-rule span{font-size:12px;letter-spacing:3px;color:#ad8e51}
.special-rule b{font:30px var(--serif);color:#997f45}
.special-rule small{font-size:10px;line-height:1.7;color:#8b846b}
.opening-check{display:flex;flex-direction:column;gap:13px;border-top:1px solid #d6ccb4;border-bottom:1px solid #d6ccb4;padding:20px 0}
.opening-check b{font:21px var(--serif)}
.opening-check span{font-size:12px;color:#8e794f}
.opening-check small{font-size:10px;line-height:1.9;color:#858270}
.practice-feedback{border:1px solid currentColor;padding:14px 16px;margin-top:18px;font-size:12px;background:#f3f2e9}
.practice-feedback p{font-size:11px;line-height:1.8;margin:7px 0 0}
.menu-sound{font-size:11px;color:#d8b693;padding:6px 12px;min-height:44px}
@keyframes scene-reveal{from{opacity:0}to{opacity:1}}
@keyframes text-reveal{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes actor-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes walk-to-cafe{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:translateX(0)}}
@keyframes single-flash{0%,28%{opacity:0}32%,42%{opacity:.95}100%{opacity:0}}
@media(max-width:850px){.contract-scene{gap:25px;padding:30px 25px 50px;grid-template-columns:1.25fr .75fr}.contract-sheet{padding:30px 25px}.contract-scene .actor-mat{height:430px}.tutorial-wrap{width:96%;padding:24px}.tutorial-layout{gap:18px}.tutorial-card{padding:23px}.tutorial-progress li{gap:5px;font-size:9px}.tutorial-explanation{font-size:15px}.actor-mat{width:36vw}.story-meeting .actor-mat{width:36vw}}
@media(max-width:680px){.story-toolbar{padding:14px 16px;min-height:68px;gap:7px}.story-toolbar>span{display:none}.story-toolbar>div{gap:6px}.story-quiet{padding:8px 9px;font-size:10px;min-height:40px}.narration{min-height:calc(100dvh - 68px);padding:35px 25px 90px}.narration p{font-size:23px}.narration small{font-size:9px;margin-top:45px}.story-caption{left:5%;right:5%;bottom:3%;padding:22px 20px 15px}.story-caption-name{font-size:11px;margin-bottom:12px}.story-caption p{font-size:16px;line-height:1.9;min-height:90px}.story-caption-bottom{margin-top:8px}.story-next{padding:10px 18px;font-size:11px}.story-actor,.story-meeting .story-actor{inset:80px 0 210px}.actor-mat,.story-meeting .actor-mat{width:min(62vw,310px);height:min(53vh,490px)}.story-commute .story-actor{padding-right:12%;bottom:220px}.story-commute .actor-mat{width:55vw;height:50vh}.contract-scene{display:block;padding:20px 24px 45px}.contract-scene>.story-actor{display:none}.contract-sheet{padding:28px 25px;max-width:460px;margin:auto}.contract-sheet h1{font-size:32px}.contract-intro{font-size:12px}.contract-sheet dl>div{grid-template-columns:78px 1fr;font-size:11px}.contract-stakes{font-size:11px}.day-title h1{letter-spacing:2px;font-size:28px}.tutorial-shell{padding-bottom:20px}.tutorial-wrap{width:94%;padding:22px 18px}.tutorial-top h1{font-size:22px}.tutorial-top .eyebrow{font-size:8px}.training-status b>span{font-size:24px}.training-status small{font-size:8px}.tutorial-progress{grid-template-columns:repeat(3,1fr);gap:12px 6px;margin:20px 0;padding-top:17px}.tutorial-progress li{font-size:9px}.tutorial-layout{grid-template-columns:1fr}.tutorial-layout .stage{height:285px}.tutorial-layout .stage .visitor-portrait{height:258px;width:174px;bottom:15px}.tutorial-layout .stage .visitor-image{height:247px;width:162px;bottom:18px}.tutorial-layout .dialogue{min-height:110px}.tutorial-card{min-height:350px;padding:23px}.tutorial-card h2{font-size:23px}.tutorial-explanation{font-size:15px;min-height:0}.tutorial-motto{font-size:21px}.tutorial-bottom{padding-top:25px}.menu-controls{row-gap:0}.menu-controls .menu-sound{font-size:10px;padding:6px 8px}}
@media(max-height:700px) and (min-width:681px){.story-caption{bottom:3%;padding:20px 28px 15px}.story-caption p{min-height:55px;font-size:19px}.actor-mat,.story-meeting .actor-mat{height:55vh}.story-actor,.story-meeting .story-actor{bottom:160px}.contract-scene{padding-top:15px;padding-bottom:35px}.contract-sheet{padding:24px 32px}.contract-sheet h1{margin:10px 0 14px;font-size:32px}.contract-sheet dl>div{padding:9px 0}.contract-intro{margin-bottom:14px}.contract-stakes{margin:15px 0}.contract-scene .actor-mat{height:470px}}
@media(prefers-reduced-motion:reduce){#app.scene-fade-out{transition:none}#app.scene-fade-in,.accident-flash,.actor-mat,.story-caption,.narration p{animation:none!important}.accident-flash{display:none}}

/* Reuse the same in-world character presentation in story and training. */
.actor-mat,.story-meeting .actor-mat,.contract-scene .actor-mat{background:none;border:0;box-shadow:none;overflow:visible;border-radius:0}
.actor-mat img{mix-blend-mode:normal;filter:drop-shadow(0 8px 18px #08081270)}
.tutorial-layout .stage{height:400px}
.tutorial-layout .stage .visitor-portrait{display:none}
.tutorial-layout .stage .visitor-image{left:24%;width:47%;height:92%;bottom:8px}
.tutorial-layout .visitor-panel>.dialogue{min-height:0;left:44%;top:20px;right:14px}
@media(max-width:680px){.tutorial-layout .stage{height:340px}.tutorial-layout .stage .visitor-image{width:49%;height:92%;left:24%;bottom:6px}.tutorial-layout .visitor-panel>.dialogue{min-height:0;left:44%;top:15px;right:10px}}