/* The classroom is the stage; type sits in the scene instead of on a paper veil. */
body[data-time]{
  --ink:#fff9ed;--secondary:#f2eadd;--muted:#dbd7cc;--accent:#ecd9b0;
  --line:rgba(255,246,224,.25);--glass:rgba(28,34,29,.32);
  --glass-line:rgba(255,248,231,.26);--btn-bg:#f6f1e4;--btn-ink:#233b36;
  --fade-top:transparent;--fade-bottom:transparent;color-scheme:dark;
  --pad:clamp(28px,6.7vw,110px);
}
.stage{background:#1b2927}
.living-scene{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s;}
.scene-ready .living-scene{opacity:1}
.scene-ready .plate{visibility:hidden}
.scene-ready .glow{opacity:.22}
.stage .plate{inset:-3%;animation:scene-breath 24s ease-in-out infinite alternate}
@keyframes scene-breath{to{scale:1.045;translate:-.6% .3%}}
body[data-time] .stage .scrim{background:linear-gradient(90deg,rgba(8,20,18,.73),rgba(8,20,18,.43) 34%,transparent 73%),linear-gradient(0deg,rgba(9,19,18,.66),transparent 34%,transparent 77%,rgba(9,19,18,.28));}
body[data-time=night] .stage .scrim{background:linear-gradient(90deg,rgba(4,13,23,.68),rgba(4,13,23,.25) 52%,transparent),linear-gradient(0deg,rgba(4,13,23,.76),transparent 55%);}
.vignette{opacity:.4}
.grain{opacity:.025}
.dust{opacity:.9}
.edge-fade{display:none}
.edge-fade.bottom{display:block;height:92px;background:linear-gradient(0deg,rgba(6,16,17,.83),transparent)}
.topbar{padding-top:30px;padding-bottom:24px;align-items:center}
.mark-title{font-size:13px;letter-spacing:.22em}
.mark-sub{font-size:9px;letter-spacing:.12em;opacity:.7}
.time-label{top:38px;font-size:10px;letter-spacing:.12em;opacity:.85}
.sound-wrap{display:flex;align-items:center;gap:24px}
.sound{background:rgba(15,30,28,.14);border-color:rgba(255,250,233,.3);padding:11px 16px 13px}
.scenery-toggle{font:11px/1.6 var(--sans);letter-spacing:.1em;color:var(--ink);padding:12px 0;white-space:nowrap}
.scenery-toggle span{margin-left:7px;opacity:.7}
.autoplay-note{top:51px;color:#f3ebdc;text-shadow:0 1px 4px #182e29}
.story{transition:opacity .8s,filter .8s}
.story .swiper-slide{padding-top:calc(var(--header-h) + 5vh);padding-bottom:calc(var(--footer-h) + 5vh)}
.slide-inner{grid-template-columns:minmax(0,1fr) minmax(240px,310px);gap:10vw;}
.copy{max-width:650px}
.chapter{font-size:10px;letter-spacing:.15em;margin-bottom:24px}
.chapter::after{width:48px;opacity:.35}
h2{font-size:clamp(32px,3.5vw,54px);line-height:1.55;letter-spacing:.025em;text-shadow:0 2px 24px rgba(0,0,0,.22)}
.copy>p,.copy>.lead{font-size:14px;line-height:2.15;color:var(--secondary);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.copy>.whisper{font-size:12px;color:var(--muted)}
.story-slide.center::before{background:none}
.story-slide.center .slide-inner{justify-content:flex-start}
.copy.centered{text-align:left;max-width:680px}
.center .chapter{justify-content:flex-start}
.center .whisper{margin-inline:0}
.quote-slide .copy>p:not(.before-quote){margin-inline:0}
.typing{justify-content:flex-start}
.is-active .chapter,.is-active h2,.is-active .copy>p,.is-active .copy>.whisper,.is-active .memory{animation:scene-type-in 1.25s var(--ease) both;}
.is-active h2{animation-delay:.1s}
.is-active .copy>p{animation-delay:.18s}
.is-active .copy>.whisper{animation-delay:.26s}
.is-active .memory{animation-delay:.32s}
@keyframes scene-type-in{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
.cover-inner{position:relative;display:block;max-width:none;}
.cover-copy{max-width:720px;padding-top:3vh}
.intro{font-size:11px;letter-spacing:.13em;color:var(--secondary)}
.intro .rule{width:26px}
.title{font-size:clamp(64px,7.2vw,112px);line-height:1.2;letter-spacing:.025em;margin:28px 0 22px;text-shadow:0 2px 32px rgba(0,0,0,.18)}
.title em{color:var(--ink)}
.cover-note{font-size:13px;letter-spacing:.09em;margin-bottom:32px}
.primary{border-radius:999px;padding:15px 24px;font-size:11px;letter-spacing:.09em;gap:24px;box-shadow:none}
.primary:hover{box-shadow:0 6px 32px rgba(0,0,0,.14)}
.primary .arrow{width:20px}
.headphone{font-size:9px;opacity:.8;margin-top:17px}
.cover-caption{position:static;max-width:320px;margin-top:24px;padding:14px 0 0;border:0;border-top:1px solid var(--line);background:none;backdrop-filter:none;box-shadow:none;text-align:left;font-size:11px;line-height:2.1;color:var(--secondary);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.memory{align-self:end;max-width:310px}
.note-card{background:rgba(17,32,29,.22);border:1px solid var(--glass-line);backdrop-filter:blur(12px);box-shadow:0 14px 48px rgba(0,0,0,.12);transform:rotate(-2deg);padding:26px}
.paper{color-scheme:light;box-shadow:0 22px 64px rgba(0,0,0,.22);max-width:310px}
.confession,body[data-time=sunset] .confession{background:rgba(34,29,27,.42);border:1px solid rgba(255,235,211,.3);box-shadow:0 14px 48px rgba(0,0,0,.15);}
.last-note{padding:24px 0 24px 24px;border-top:0;border-left:1px solid var(--line)}
.ending .copy{max-width:700px}
.ending .ending-title{font-size:clamp(34px,4.2vw,60px)}
.song{display:flex;width:max-content;padding:14px 0;border-top:0;gap:18px;margin-top:22px;}
.ending-actions{justify-content:flex-start}
.bottombar{padding-bottom:25px;transition:opacity .7s;}
.count{font-size:22px}
.footer-label{font-size:10px;letter-spacing:.12em}
.timeline{margin-left:auto;margin-right:26px;gap:5px}
.timeline button{min-width:25px;height:38px}
.timeline button::after{width:3px;height:3px;}
.timeline button[aria-current=step]::after{width:16px;height:3px;border-radius:3px;margin-left:-8px;box-shadow:none;transform:none;background:#fff3d5}
.timeline button::before{opacity:.35}
.pager{gap:12px}
.pager button{width:40px;height:40px}
.scenery-only .story,.scenery-only .bottombar{opacity:0;pointer-events:none;filter:blur(6px)}
.scenery-only .stage .scrim{opacity:.25;transition:opacity 1s}
.scenery-only .autoplay-note{display:none}
.scenery-only .stage .vignette{opacity:.15}
@media(min-width:961px){
  .cover .cover-inner{transform:translateY(2vh)}
  .story-slide .memory{margin-bottom:3vh}
}
@media(max-width:960px){
  .topbar{padding:20px var(--pad)}
  .story .swiper-slide{padding-top:calc(var(--header-h) + 4vh);padding-bottom:calc(var(--footer-h) + 3vh)}
  .slide-inner{display:grid;grid-template-columns:1fr;gap:26px}
  .memory{max-width:440px;justify-self:start;width:100%;margin-top:0}
  .story-slide.center .slide-inner{display:block}
  .copy,.copy.centered{max-width:620px}
  .title{font-size:clamp(60px,11vw,94px)}
  .cover-inner{display:block}
  .cover-copy{padding-top:0}
  .cover-caption{position:static;max-width:300px;margin:34px 0 0;padding:15px 0 0;font-size:10px}
  .timeline{margin-right:12px;gap:2px}
  .timeline button{min-width:17px}
  .sound-wrap{gap:18px}
  .song{width:100%}
  .ending-actions{display:grid}
}
@media(max-width:560px){
  body[data-time]{--pad:26px;--header-h:72px;--footer-h:70px}
  body[data-time] .stage .scrim{background:linear-gradient(90deg,rgba(8,20,18,.60),rgba(8,20,18,.25)),linear-gradient(0deg,rgba(8,20,18,.75),transparent 70%,rgba(8,20,18,.15));}
  .stage .scene{background-position:61% 50%}
  .topbar{padding-top:22px}
  .mark-title{font-size:11px;letter-spacing:.13em}
  .scenery-toggle{font-size:10px;letter-spacing:0}
  .scenery-toggle span{margin-left:2px}
  .sound-wrap{gap:14px}
  .sound{padding:9px}
  .autoplay-note{font-size:9px;top:42px;max-width:230px}
  .swiper-slide.cover{align-items:flex-end}
  .cover-inner{padding-bottom:2vh}
  .intro{font-size:9.5px;gap:9px}
  .intro .rule{width:18px}
  .title{font-size:clamp(52px,14.8vw,78px);margin-top:23px;margin-bottom:20px;line-height:1.2;letter-spacing:.025em}
  .cover-note{font-size:11px;margin-bottom:26px}
  .primary{font-size:10.5px;padding:14px 20px;gap:22px}
  .cover-caption{max-width:270px;font-size:9px;line-height:2;margin-top:28px}
  .headphone{font-size:8.5px;margin-top:15px}
  h2{font-size:clamp(27px,7.4vw,36px);line-height:1.65;margin-bottom:23px}
  .chapter{margin-bottom:20px}
  .copy>p,.copy>.lead{font-size:13px;line-height:2.15}
  .copy>.whisper{font-size:11px}
  .memory{max-width:none}
  .note-card{padding:22px 24px;}
  .note-line{font-size:14px}
  .paper{padding:22px 25px}
  .confession{padding:22px 24px}
  .bottombar{gap:8px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .count{font-size:19px}
  .timeline{gap:0;margin:0 auto}
  .timeline button{min-width:17px}
  .timeline button[aria-current=step]::after{width:12px;margin-left:-6px}
  .pager{gap:7px;margin-left:0}
  .pager button{width:32px;height:32px}
  .ending .ending-title{font-size:32px}
  .song{margin-top:18px}
  .ending-actions .primary{justify-content:space-between}
  .ending .last-line{font-size:10.5px!important}
}
@media(max-height:700px){
  .story .swiper-slide{overflow-y:auto;align-items:flex-start}
  .swiper-slide.cover{align-items:center}
  .cover-copy{padding-top:0}
  .title{font-size:clamp(46px,8vw,76px);margin-top:16px;margin-bottom:16px}
  .cover-caption{margin-top:20px}
  .headphone{margin-top:12px}
}
@media(prefers-reduced-motion:reduce){
  .stage .plate{animation:none}
  .scenery-only .story{filter:none}
}

/* Opening: one unresolved question, a visible world, and a clear way down. */
.story.swiper-vertical{touch-action:pan-y}
.story .swiper-wrapper{transition-timing-function:cubic-bezier(.22,1,.36,1)}
.story-slide{mask-image:linear-gradient(180deg,transparent 0,transparent 64px,#000 108px,#000 calc(100% - 100px),transparent calc(100% - 46px),transparent 100%);}
.story .swiper-slide.cover{align-items:center;padding:112px var(--pad) 166px;overflow:hidden}
.cover .cover-inner{transform:none;margin:0;width:100%;height:auto;padding:0;}
.cover-copy{padding:0;max-width:1040px}
.cover .intro{font:11px/1.8 var(--sans);letter-spacing:.12em;color:#eee5d3;margin:0 0 26px}
.opening-title{font-size:clamp(36px,4.8vw,76px);line-height:1.5;letter-spacing:.025em;margin:0 0 30px;}
.opening-title .title-line{white-space:nowrap}
.hook-friend{display:inline}
.cover .cover-note{font-size:14px;line-height:2.1;letter-spacing:.04em;color:#f4ebde;margin:0;}
.opening-afterword{margin-top:26px;font-size:11px;letter-spacing:.08em;color:#dbd5c7;opacity:.8}
.opening-entry{position:absolute;left:var(--pad);bottom:55px;display:inline-flex;align-items:center;gap:18px;text-align:left;color:#fff6e7;padding:8px 14px 8px 0;z-index:2;}
.entry-arrow{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(255,245,223,.5);border-radius:50%;transition:background .35s,border-color .35s;}
.entry-arrow svg{width:22px;height:22px;animation:read-down 2.6s ease-in-out infinite}
.opening-entry:hover .entry-arrow{background:rgba(255,245,223,.14);border-color:#fff6e7;}
.opening-entry:focus-visible{outline-offset:7px}
#start-label{display:block;font:12px/1.8 var(--sans);letter-spacing:.14em;}
.entry-instruction{display:block;margin-top:5px;font:9px/1.6 var(--sans);letter-spacing:.07em;color:#dcd7cb}
.opening-margin-note{position:absolute;right:var(--pad);bottom:72px;font-size:11px;line-height:2;letter-spacing:.07em;color:#f4e9d4;text-align:left;text-shadow:0 1px 12px rgba(0,0,0,.4);}
@keyframes read-down{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
body[data-chapter="0"] .bottombar{opacity:0;pointer-events:none;}
body[data-chapter="0"] .scenery-toggle,body[data-chapter="0"] .time-label,body[data-chapter="0"] .autoplay-note{display:none;}
body[data-chapter="0"] .sound-label,body[data-chapter="0"] .meter{display:none;}
body[data-chapter="0"] .sound{padding:12px;border-radius:50%;background:rgba(13,31,27,.18);}
body[data-chapter="0"] .sound-wrap{gap:0;}
.pager button svg{transform:rotate(90deg)}
.fonts-ready .cover .intro{animation:opening-appear .7s ease-out both;}
.fonts-ready .opening-title{animation:opening-appear .9s .1s ease-out both;}
.fonts-ready .cover .cover-note{animation:opening-appear .9s .3s ease-out both;}
.fonts-ready .opening-afterword{animation:opening-appear .9s .45s ease-out both;}
@keyframes opening-appear{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@media(max-width:960px){
  .opening-title{font-size:clamp(34px,5.3vw,52px);}
  .opening-margin-note{font-size:9px;max-width:190px;}
  .cover .cover-note{font-size:13px;}
}
@media(max-width:560px){
  .story .swiper-slide.cover{padding:108px var(--pad) 154px;}
  .cover .intro{font-size:10px;letter-spacing:.06em;margin-bottom:24px;}
  .opening-title{font-size:clamp(32px,9.5vw,48px);line-height:1.48;margin:0 0 26px;}
  .hook-friend{display:block}
  .cover .cover-note{font-size:12px;line-height:2.1;letter-spacing:0;}
  .opening-afterword{font-size:10px;margin-top:20px;letter-spacing:.04em;}
  .opening-entry{bottom:calc(32px + env(safe-area-inset-bottom));gap:15px;}
  .entry-arrow{width:46px;height:46px;}
  #start-label{font-size:11px;letter-spacing:.1em;}
  .entry-instruction{font-size:9px;}
  .opening-margin-note{display:none}
  body[data-chapter="0"] .sound{padding:10px;}
}
@media(max-height:600px){
  .story .swiper-slide.cover{padding-top:88px;padding-bottom:122px;}
  .cover .intro{margin-bottom:15px;}
  .opening-title{font-size:clamp(27px,5vw,44px);line-height:1.38;margin-bottom:18px;}
  .hook-friend{display:inline}
  .opening-afterword{display:none}
  .opening-entry{bottom:22px;}
  .opening-margin-note{bottom:36px;}
}

body[data-chapter="0"] .stage .scrim{background:linear-gradient(90deg,rgba(8,20,18,.77),rgba(8,20,18,.34) 49%,transparent 80%),linear-gradient(0deg,rgba(9,19,18,.72),transparent 32%,transparent 85%,rgba(9,19,18,.2));}
.opening-title{max-width:950px;text-wrap:balance;}
.opening-afterword{padding-left:18px;position:relative;}
.opening-afterword::before{content:'';position:absolute;left:0;top:.85em;width:5px;height:5px;background:#dfc99b;border-radius:50%;}
.fonts-ready .opening-title{animation:opening-appear 1.2s .15s ease-out both;}
@media(max-width:560px){
  body[data-chapter="0"] .stage .scrim{background:linear-gradient(90deg,rgba(8,20,18,.70),rgba(8,20,18,.28) 85%),linear-gradient(0deg,rgba(8,20,18,.78),transparent 68%);}
  .opening-afterword{font-size:10px;letter-spacing:0;}
}
@media(prefers-reduced-motion:reduce){
  .fonts-ready .cover .intro,.fonts-ready .opening-title,.fonts-ready .cover .cover-note,.fonts-ready .opening-afterword{animation:none;}
  .entry-arrow svg{animation:none;}
}