/* Spatial presentation. Lesson and quiz controls keep a stable reading plane. */
html.depth-ready{scroll-behavior:auto}
:root{--spatial-ease:cubic-bezier(.22,1,.36,1)}
.hero{background:#0b2027;isolation:isolate}
.hero-scene{position:relative;overflow:hidden}
.hero-atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#0b2027}
.hero-landscape{position:absolute;inset:-9%;background:linear-gradient(180deg,#08212cb3,#08212c66 48%,#0a2029f2),url('assets/cloud-sea-user.webp') center 43%/cover;opacity:.68;transform:translate3d(0,var(--landscape-y,0px),0) scale(1.04)}
.hero-architecture{position:absolute;inset:0;background:linear-gradient(90deg,#091a23 0%,#0d232a70 16%,transparent 32%,transparent 78%,#0c2129a6 95%),linear-gradient(180deg,#091c2599,transparent 42%);box-shadow:inset 0 0 110px #04121899}
.hero-architecture::before,.hero-architecture::after{content:'';position:absolute;top:-15%;bottom:-20%;width:5%;border:1px solid #d1dfd829;background:linear-gradient(90deg,#091a22,#526a7052 48%,#112b35);box-shadow:20px 0 60px #06171db3;transform:rotate(14deg)}
.hero-architecture::before{left:3%}.hero-architecture::after{right:-1%;width:8%}
.hero-floor{position:absolute;left:-30%;right:-30%;bottom:-60%;height:90%;background:linear-gradient(180deg,#32484d33,#071820 78%),repeating-linear-gradient(90deg,transparent 0 24.9%,#bbd2d615 25% 25.06%,transparent 25.1% 50%);transform:perspective(700px) rotateX(64deg);transform-origin:50% 0;border-top:1px solid #c2d7d32b}
.hero-content{position:relative}
.hero-copy{position:relative;z-index:3;padding-block:64px 42px}
.hero h1{text-shadow:0 4px 34px #05191f88}
.hero-aside{color:#d3dfdc}
.hero-top{position:relative;z-index:5}
.screen-stage{position:relative;width:min(86%,1040px);margin:18px auto 44px;perspective:1800px}
.screen-object{position:relative;background:#17272a;border:5px solid #617574;border-bottom-width:0;border-radius:5px;transform:perspective(1800px) rotateY(-9deg) rotateX(5deg);transform-style:preserve-3d;box-shadow:1px 1px 0 #d8e2d78c,8px 9px 0 #15282d,10px 11px 0 #7a8b8466,25px 36px 45px #02101494}
.screen-object::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;border:1px solid #cfe0df33;background:linear-gradient(125deg,#e6f5ed10,transparent 26%,transparent 80%,#b7d4d10a)}
.screen-object .main-video{max-width:none;margin:0;min-height:0;aspect-ratio:16/9;height:auto;width:100%;background:#081b23}
.screen-object .media-poster img{filter:brightness(.86)}
.screen-object .media-poster::after{background:linear-gradient(0deg,#06151ddb,transparent 36%)}
.screen-plinth{height:27px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;color:#cad8d0;font-size:7px;letter-spacing:.2em;background:linear-gradient(180deg,#596b6899,#20363a);border-top:1px solid #b3cbc359}
.screen-shadow{position:absolute;inset:auto 2% -45px;height:65px;transform:rotate(-3deg);border-radius:50%;background:#0214178c;filter:blur(17px);pointer-events:none}
.hero .chapter-row{position:relative;font-size:10px;z-index:3;padding-bottom:44px;color:#cad8d3}
.hero-scroll-note{display:none}
.chapter-nav{position:relative;background:var(--paper);z-index:4}
.teacher-layout>div:first-child{perspective:1400px}
.teacher-video{border:1px solid #b5cbc94d;border-bottom:7px solid #456162;box-shadow:0 1px 0 #a7c3ba70,8px 12px 0 #0e2a2d,20px 28px 40px #071c2366;transform:perspective(1400px) rotateY(-2deg);transition:transform 550ms var(--spatial-ease)}
.teacher-video:focus-within{transform:none}
.teacher-choice{transition:background-color 300ms var(--spatial-ease)}
.teacher-choice:hover{background:#b0c8bb0a}
.teacher-choice strong,.teacher-choice>span:last-child{transition:transform 350ms var(--spatial-ease)}
.teacher-choice:hover strong{transform:translateX(5px)}
.teacher-choice:hover>span:last-child{transform:translate(2px,-2px)}
.teacher-choice[aria-pressed=true]{background:linear-gradient(90deg,#bbd4c50d,transparent)}
.media-note{margin-top:25px}
.daily-device{position:relative;perspective:1100px;border-left:0;min-height:530px;isolation:isolate}
.device-platform{position:absolute;width:300px;height:150px;left:50%;bottom:0;transform:translateX(-50%) perspective(600px) rotateX(66deg);border-radius:50%;background:radial-gradient(ellipse,#2448473d,transparent 66%);z-index:-1}
.daily-device .phone{position:relative;width:215px;border:7px solid #172a2b;outline:1px solid #94a09a;border-radius:37px;box-shadow:1px 1px 0 #d0d6c7,4px 3px 0 #5e706c,8px 5px 0 #102c30,10px 7px 0 #95a39a,18px 35px 40px #12383245;transform:rotateY(var(--phone-yaw,-19deg)) rotateX(var(--phone-pitch,7deg)) rotateZ(var(--phone-roll,5deg));transform-origin:50% 70%;background:#111d20}
.daily-device .phone::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:29px;border:1px solid #d4e3d542;background:linear-gradient(120deg,#ffffff15,transparent 38%)}
.daily-device .phone img{border-radius:29px}
.daily-device .device-caption{position:absolute;right:1%;bottom:12%;font-size:9px}
.receipt-section{background:radial-gradient(ellipse at 73% 20%,#38524e 0,transparent 48%),linear-gradient(120deg,#102c30,#092027);overflow:hidden}
.receipt-stage{position:relative;perspective:1500px;padding:38px 0 45px;isolation:isolate}
.receipt-stage::before{display:none}
.receipt-printer{position:absolute;z-index:3;top:0;left:2%;width:96%;height:74px;border-radius:13px 13px 8px 8px;background:linear-gradient(175deg,#71807a,#384d49 15%,#253d3b 56%,#132a2a 61%,#3d5350);border:1px solid #8da49b6b;box-shadow:0 2px 0 #b1beb87a,0 9px 13px #00151899;display:flex;justify-content:space-between;align-items:flex-start;padding:14px 20px;color:#c3d1c8;font-size:9px;letter-spacing:.15em;pointer-events:none}
.printer-slot{position:absolute;left:15px;right:15px;bottom:9px;height:12px;border-radius:5px;background:#051519;box-shadow:0 1px 0 #b2c3b880,inset 0 4px 5px #020d12}
.printer-indicator{width:4px;height:4px;background:#c0dace;border-radius:50%;margin-top:4px;box-shadow:0 0 4px #a7c7b560}
.receipt-output{position:relative;width:100%;padding:18px 15px 35px;clip-path:inset(0 -80px -80px -80px)}
.receipt-paper{width:100%;transform:translate3d(0,var(--receipt-feed,0px),0) rotateX(var(--receipt-pitch,0deg)) rotateZ(-.8deg);transform-origin:50% 0;box-shadow:2px 0 0 #b9bab0,20px 26px 35px #00171988,4px 4px 9px #00171966;background:linear-gradient(180deg,transparent 35%,#8e938910 35.2%,#ffffff75 35.7%,transparent 36.2%,transparent 68%,#8e93890e 68.2%,#ffffff66 68.7%,transparent 69.2%),#faf9f5}
.receipt-paper::before{display:none}
.receipt-paper::after{filter:drop-shadow(0 4px 3px #00171988)}
.receipt-intro h2{max-width:520px}
.primary-link,.receipt-link{transition:transform 250ms var(--spatial-ease),background-color 250ms var(--spatial-ease),box-shadow 250ms var(--spatial-ease)}
.primary-link:hover,.receipt-link:hover{transform:translateY(-3px);box-shadow:0 8px 18px #001b252b}
.primary-link:active,.receipt-link:active{transform:translateY(0)}
.text-link span{display:inline-block}
[data-depth-reveal]{opacity:1;transform:none}
.depth-ready [data-depth-reveal].depth-waiting{opacity:.1;transform:translateY(25px)}
.depth-ready [data-depth-reveal]{transition:opacity 700ms var(--spatial-ease),transform 900ms var(--spatial-ease)}
[data-depth-reveal]:focus-within{opacity:1!important;transform:none!important}
.depth-nav-veil{position:fixed;inset:0;z-index:60;background:var(--paper);opacity:0;pointer-events:none;transition:opacity 180ms cubic-bezier(.4,0,.3,1)}
.depth-nav-veil.is-visible{opacity:1}
@media(min-width:1000px) and (min-height:700px){
  .depth-ready .hero{height:185svh}
  .depth-ready .hero-scene{position:sticky;top:78px;height:calc(100svh - 78px);min-height:620px}
  .depth-ready .hero-content{height:100%}
  .depth-ready .hero-top{padding-top:24px}
  .depth-ready .hero-copy{position:absolute;top:95px;left:0;right:0;padding:0;opacity:var(--hero-copy-opacity,1);transform:translate3d(0,var(--hero-copy-y,0px),0);pointer-events:none}
  .depth-ready .hero h1{font-size:clamp(40px,3.6vw,58px)}
  .depth-ready .hero-aside{max-width:335px;font-size:13px}
  .depth-ready .screen-stage{position:absolute;left:50%;top:60%;width:min(70vw,1050px,calc((100svh - 230px)*1.65));margin:0;transform:translate(-50%,-50%) translate3d(var(--screen-x,95px),var(--screen-y,20px),0) scale(var(--screen-scale,.68));transform-origin:50% 50%}
  .depth-ready .screen-object{transform:perspective(1800px) rotateY(var(--screen-yaw,-13deg)) rotateX(var(--screen-pitch,6deg)) rotateZ(var(--screen-roll,-1.2deg))}
  .depth-ready .hero .chapter-row{position:absolute;left:0;right:0;bottom:21px;padding:0;opacity:var(--chapter-opacity,.55);font-size:9px}
  .depth-ready .hero-scroll-note{display:flex;align-items:center;gap:10px;position:absolute;bottom:58px;left:0;font-size:8px;letter-spacing:.18em;color:#b1c6c6;opacity:var(--hero-copy-opacity,1)}
  .scroll-tick{height:25px;width:1px;background:#9fbcbc}
}
@media(max-width:999px),(max-height:699px){
  .hero-copy{gap:30px;padding-block:50px 34px}
  .hero h1{font-size:clamp(34px,5vw,50px)}
  .screen-stage{width:92%;margin:20px auto 48px}
  .screen-object{transform:perspective(1300px) rotateY(-5deg) rotateX(3deg)}
  .hero .chapter-row{padding-bottom:32px}
  .teacher-video{transform:none;box-shadow:6px 8px 0 #0e2a2d,15px 20px 28px #071c234d}
}
@media(max-width:767px){
  .hero-landscape{opacity:.45}
  .hero-copy{padding-block:46px 25px}
  .hero-aside{font-size:13px}
  .screen-stage{width:100%;margin:12px auto 37px}
  .screen-object{border-width:3px;border-bottom-width:0;box-shadow:1px 1px 0 #d8e2d78c,4px 5px 0 #15282d,6px 7px 0 #7a8b8466,14px 20px 24px #02101494;transform:perspective(1000px) rotateY(-4deg) rotateX(2deg)}
  .screen-plinth{font-size:6px;height:22px;padding-inline:10px}
  .screen-object .poster-caption{font-size:9px;gap:12px}
  .hero .chapter-row{line-height:1.8}
  .screen-shadow{bottom:-22px;height:35px}
  .teacher-video{min-height:0!important;aspect-ratio:16/9!important;height:auto!important}
  .daily-device{min-height:510px;margin-top:15px}
  .daily-device .phone{width:205px}
  .daily-device .device-caption{right:2%}
  .receipt-output{padding-inline:9px}
  .receipt-paper{transform:translate3d(0,var(--receipt-feed,0px),0);box-shadow:7px 17px 25px #00171980,2px 0 0 #b9bab0}
  .receipt-printer{left:0;width:100%;padding:14px;font-size:8px}
  .receipt-printer .printer-slot{left:7px;right:7px}
  .receipt-intro h2{font-size:clamp(35px,7vw,48px)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-landscape,.screen-object,.daily-device .phone,.teacher-video,.receipt-paper{transform:none!important}
  .depth-ready .hero{height:auto}
  .depth-ready .hero-scene{position:relative;top:auto;height:auto;min-height:0}
  .depth-ready [data-depth-reveal]{opacity:1;transform:none;transition:none}
  .depth-nav-veil{display:none}
  .primary-link,.receipt-link,.teacher-choice,.teacher-choice strong,.teacher-choice>span:last-child{transition:none}
}

/* Once a lesson starts, hold a frontal, readable screen. */
.screen-object:has(.media-frame){transform:none;transition:transform 650ms var(--spatial-ease)}
@media(min-width:1000px) and (min-height:700px){
  .depth-ready .hero:has(.media-frame) .screen-stage{transform:translate(-50%,-50%) translateY(-45px) scale(.96);transition:transform 700ms var(--spatial-ease)}
  .depth-ready .hero:has(.media-frame) .screen-object{transform:none}
  .depth-ready .hero:has(.media-frame) .hero-copy{opacity:0;transition:opacity 300ms ease}
  .depth-ready .hero:has(.media-frame) .hero-scroll-note{opacity:0}
}
@media(prefers-reduced-motion:reduce){.screen-object:has(.media-frame){transition:none}}

/* Physical objects invite inspection. The actual app opens through its own link. */
.daily-device .phone{padding:0;display:block;cursor:zoom-in;transition:transform 550ms var(--spatial-ease);transform:translateZ(var(--phone-lift,0px)) rotateY(var(--phone-yaw,-19deg)) rotateX(var(--phone-pitch,7deg)) rotateZ(var(--phone-roll,5deg))}
.device-hint{position:absolute;bottom:-4px;left:0;right:0;text-align:center;font-size:10px;color:#426865;letter-spacing:.02em}
.receipt-stage{transform:perspective(1500px) translateZ(var(--paper-lift,0px));transform-origin:50% 15%;transition:transform 650ms var(--spatial-ease)}
.receipt-stage:focus-within{--paper-lift:18px}
@media(hover:hover) and (pointer:fine){
  .daily-device .phone:hover,.daily-device .phone:focus-visible{--phone-lift:65px;--phone-yaw:0deg!important;--phone-pitch:0deg!important;--phone-roll:0deg!important}
  .receipt-stage:hover{--paper-lift:28px}
}
.receipt-print-replay{display:flex;gap:22px;align-items:center;color:#c4d8d2;background:none;border:0;border-bottom:1px solid #91aaa66b;min-height:44px;margin-top:20px;padding:8px 0;font:400 11px var(--body);cursor:pointer}
.receipt-feed{position:relative;overflow:visible;clip-path:inset(0 -65px 0 -65px);padding-bottom:17px;transform:translate3d(0,calc(-1 * var(--print-hidden,0px)),0)}
.receipt-feed .receipt-paper{transform:translate3d(0,var(--print-hidden,0px),0);margin:0}
.receipt-leading-edge{position:absolute;left:15px;right:15px;top:18px;height:14px;transform:translate3d(0,var(--print-visible,0px),0);opacity:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='14' viewBox='0 0 48 14'%3E%3Cpath fill='%23faf9f5' d='M0 0H48V5L42 14L35 5L27 13L18 4L9 14L0 6Z'/%3E%3C/svg%3E") 0 0/48px 14px repeat-x;filter:drop-shadow(0 3px 2px #00171955);pointer-events:none}
.receipt-stage.is-printing .receipt-leading-edge{opacity:1}
.receipt-stage.is-printing .printer-indicator{animation:printer-pulse 700ms ease-in-out infinite alternate}
@keyframes printer-pulse{to{opacity:.3}}
.phone-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#f2f0e8;overflow:hidden}
.phone-dialog::backdrop{background:transparent}
.phone-dialog-veil{position:absolute;inset:0;background:#061b20e8;opacity:0;transition:opacity 400ms ease}
.phone-dialog.is-open .phone-dialog-veil{opacity:1}
.phone-dialog-panel{position:relative;width:min(390px,calc(100vw - 48px));margin:auto;top:50%;transform:translateY(-50%);text-align:center}
.phone-inspect-device{position:relative;border:8px solid #253b3c;border-radius:43px;background:#081416;box-shadow:1px 1px 0 #dce6df,5px 3px 0 #597575,8px 5px 0 #163235,0 35px 100px #0008;overflow:hidden;transform:translate(var(--zoom-x,0px),var(--zoom-y,0px)) scale(var(--zoom-scale,.6));opacity:0;transition:transform 650ms var(--spatial-ease),opacity 250ms ease;transform-origin:50% 50%}
.phone-dialog.is-open .phone-inspect-device{transform:translate(0,0) scale(1);opacity:1}
.phone-inspect-scroll{height:min(72dvh,730px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none;border-radius:34px;background:#0b0b0b}
.phone-inspect-scroll img{display:block;width:100%;height:auto}
.phone-inspect-bar{height:20px;display:grid;place-items:center;background:#0b0b0b}
.phone-inspect-bar::after{content:'';width:32%;height:3px;border-radius:8px;background:#eee}
.phone-dialog-close{position:fixed;z-index:2;right:24px;top:20px;min-width:44px;height:44px;border:1px solid #a6c1b860;background:#142d31;color:#edf4ee;border-radius:50%;font-size:23px;cursor:pointer}
.phone-inspect-caption{margin:19px 0 11px;font:400 11px/1.7 var(--body);color:#c0d1cc}
.phone-inspect-link{display:inline-block;font:500 12px var(--body);border-bottom:1px solid #9ebfb6;padding:8px 0;color:#f2f0e8}
.phone-dialog-panel>.phone-inspect-caption,.phone-dialog-panel>.phone-inspect-link{opacity:0;transition:opacity 350ms ease}
.phone-dialog.is-open .phone-inspect-caption,.phone-dialog.is-open .phone-inspect-link{opacity:1;transition-delay:150ms}
@media(max-width:767px){.receipt-leading-edge{left:9px;right:9px}.phone-dialog-close{right:10px;top:10px}.phone-inspect-scroll{height:min(68dvh,670px)}.phone-dialog-panel{width:min(360px,calc(100vw - 60px))}.phone-inspect-device{border-width:6px;border-radius:35px}.phone-inspect-scroll{border-radius:28px}}
@media(prefers-reduced-motion:reduce){
 .daily-device .phone,.receipt-stage,.phone-inspect-device,.phone-dialog-veil,.phone-inspect-caption,.phone-inspect-link{transition:none!important}
 .receipt-stage{transform:none}.printer-indicator{animation:none!important}
}

@media(max-height:600px){.phone-inspect-scroll{height:calc(100dvh - 155px)}.phone-inspect-caption{margin:10px 0 3px}.phone-dialog-panel{width:min(300px,calc(100vw - 70px))}}

/* Load the real, scrollable Daily Drip only while the enlarged phone is open. */
.phone-live-host{overflow:hidden;background:#0b0b0b}
.live-drip-frame{display:block;width:100%;height:100%;border:0;background:#0b0b0b}

/* A tactile side control, outside the viewing surface. */
.screen-course-next{position:absolute;left:calc(100% + 24px);top:50%;width:112px;display:flex;flex-direction:column;align-items:center;gap:16px;padding:22px 12px 20px;border:1px solid #a4c6c35e;border-radius:16px;color:#e7f0e9;background:linear-gradient(140deg,#41676f,#183c48 58%,#102d38);box-shadow:inset 0 1px 0 #e1f2e659,inset 0 -2px 0 #061a2580,3px 5px 0 #0a2632,5px 9px 20px #04192366;transform:translateY(-50%) perspective(650px) rotateY(-9deg);transition:transform 380ms var(--spatial-ease),box-shadow 380ms var(--spatial-ease),border-color 250ms;z-index:5;text-align:center}
.course-next-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid #b4d3ce73;border-radius:50%;font-size:24px;font-weight:400;line-height:1;background:linear-gradient(140deg,#bbd9d121,#143340);box-shadow:inset 0 1px 1px #d9ece63d;transition:transform 380ms var(--spatial-ease)}
.course-next-label{display:flex;flex-direction:column;gap:5px;font-size:11px;line-height:1.5;color:#b5ccc8;white-space:nowrap}
.course-next-label strong{font-size:16px;color:#f2f3e9;font-weight:600}
.screen-course-next:focus-visible{outline:2px solid #b1e0dd;outline-offset:6px}
@media(hover:hover) and (pointer:fine){.screen-course-next:hover{transform:translateY(calc(-50% - 4px)) perspective(650px) rotateY(0) scale(1.045);border-color:#b4d3ceb0;box-shadow:inset 0 1px 0 #e1f2e666,inset 0 -2px 0 #061a2580,3px 7px 0 #0a2632,7px 16px 28px #04192380}.screen-course-next:hover .course-next-icon{transform:translate(2px,-2px)}}
.screen-course-next:active{transform:translateY(-50%) scale(.98)}
.course-switch-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.screen-object{transition:opacity 300ms var(--spatial-ease)}
.course-changing .screen-object{opacity:.28}
@media(min-width:1000px) and (min-height:700px){.depth-ready .hero.screen-settled .screen-stage{transform:translate(-50%,-50%) translateY(-45px) scale(.96);transition:transform 700ms var(--spatial-ease)}.depth-ready .hero.screen-settled .screen-object{transform:none}}
@media(max-width:999px),(max-height:699px){.screen-course-next{position:relative;left:auto;top:auto;margin:28px 0 0 auto;width:auto;flex-direction:row;gap:15px;padding:12px 19px;transform:none;border-radius:12px}.course-next-label{flex-direction:row;align-items:baseline;gap:9px}.course-next-icon{width:34px;height:34px;font-size:21px}.screen-course-next:hover{transform:translateY(-3px) scale(1.025)}.screen-course-next:active{transform:scale(.98)}}
@media(prefers-reduced-motion:reduce){.screen-course-next,.screen-course-next:hover,.screen-course-next:active,.course-next-icon,.screen-course-next:hover .course-next-icon{transform:none;transition:none}.screen-object{transition:none}.course-changing .screen-object{opacity:1}}

@media(min-width:1000px) and (min-height:700px){.depth-ready .screen-course-next{left:calc(50% + min(35vw,525px,calc((100svh - 230px)*.825)) + 25px);top:calc(60% - 25px);width:104px}}
@media(max-width:999px),(max-height:699px){.screen-course-next{margin:-12px 0 30px auto}}

/* Four opaque sleeves fixed to one physical carousel, one active player. */
.teacher-jukebox{position:relative;isolation:isolate;perspective:1800px;aspect-ratio:16/11;margin-top:25px;--turn-angle:0deg;--camera-scale:1;--reel-radius:360px}
.teacher-jukebox::after{content:'';position:absolute;left:13%;right:9%;bottom:3%;height:14%;border-radius:50%;background:#031c2470;filter:blur(18px);pointer-events:none;z-index:-1}
.teacher-carousel-camera{position:absolute;left:7%;top:42px;width:86%;aspect-ratio:16/9;transform-style:preserve-3d;transform:scale(var(--camera-scale))}
.teacher-turntable{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(-1 * var(--reel-radius))) rotateY(var(--turn-angle))}
.teacher-reel{position:absolute;inset:0 0 auto;width:100%;transform-origin:50% 50%;backface-visibility:hidden;transform:rotateY(var(--sleeve-angle)) translateZ(var(--reel-radius));background:#14383b;border-radius:5px;opacity:1}
.teacher-reel .teacher-video{aspect-ratio:16/9!important;min-height:0!important;height:auto!important;width:100%;transform:none!important;transition:none;border:1px solid #b5cbc96b;border-bottom:0;border-radius:5px 5px 0 0;box-shadow:0 10px 24px #031b245c;overflow:hidden;background:#14383b}
.teacher-reel-label{display:flex;justify-content:space-between;gap:15px;padding:9px 15px;border:1px solid #a4c8bd66;border-top:1px solid #b1d8c233;border-radius:0 0 5px 5px;background:linear-gradient(145deg,#486563,#24464b);box-shadow:0 5px 0 #0d2b30,0 7px 0 #83a29c44;color:#dfede4;font:500 11px/1.4 var(--body);letter-spacing:.1em}
.teacher-reel-label span:last-child{font-size:9px;color:#a9c9c2;font-variant-numeric:tabular-nums}
.teacher-reel:not([data-position='0']){pointer-events:none}
.teacher-reel:not([data-position='0']) .poster-play,.teacher-reel:not([data-position='0']) .poster-caption{visibility:hidden}
.teacher-jukebox.is-turning .teacher-turntable,.teacher-jukebox.is-turning .teacher-carousel-camera{will-change:transform}
.teacher-jukebox.is-turning .media-poster{pointer-events:none}
.teacher-jukebox.is-turning .poster-play,.teacher-jukebox.is-turning .poster-caption{visibility:hidden}
.teacher-jukebox+.media-note{padding-inline:7%;margin-top:0;line-height:1.8}
.teacher-list{position:relative;z-index:8}
@media(max-width:767px){.teacher-jukebox{perspective:1000px;aspect-ratio:16/12;margin-top:25px}.teacher-carousel-camera{top:32px}.teacher-reel-label{padding:7px 10px;font-size:10px}.teacher-reel-label span:last-child{font-size:8px}.teacher-reel .poster-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){.teacher-carousel-camera,.teacher-turntable{transition:none!important}}

.teacher-player-loading{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.66);pointer-events:none;transition:opacity 240ms ease-out}
.teacher-player-loading.is-loaded{opacity:0}
@media(prefers-reduced-motion:reduce){.teacher-player-loading{transition:none}}

/* HE_IPHONE_FRAME: iPhone 16 Pro outer ratio. Keep this geometry in sync in both stylesheets. */
.he-iphone.he-iphone{box-sizing:border-box;position:relative;display:block;aspect-ratio:71.5/149.6;height:auto;padding:0;border:0;border-radius:14.5% / 6.93%;overflow:visible;container-type:inline-size;background:linear-gradient(110deg,#787975,#d3d0c8 18%,#747673 42%,#b2b1a9 72%,#4b504d);box-shadow:inset 0 0 0 1px #e8e6df99,inset 0 0 0 3px #565955,2px 1px 0 #bbbcb5,4px 3px 0 #434b49,0 26px 62px #0006}
.he-iphone.he-iphone::before{content:'';position:absolute;inset:3px;border-radius:inherit;background:#050606;pointer-events:none}
.he-iphone.he-iphone::after{display:none}
.he-iphone .he-phone-screen{position:absolute;inset:1.02% 2.84%;display:block;border-radius:13.4% / 6.28%;overflow:hidden;background:#101112;color:#fff}
.he-iphone .he-phone-status{position:absolute;inset:0 0 auto;height:8.25%;display:flex;align-items:center;justify-content:space-between;padding:0 6.5%;font-family:Arial,sans-serif;font-weight:600;font-size:3.8cqw;letter-spacing:-.03em;line-height:1;pointer-events:none}
.he-phone-time{padding-left:1.5%}
.he-phone-indicators{display:flex;align-items:center;gap:1.1cqw;width:22%}
.he-phone-indicators svg{display:block;width:24%;height:auto}
.he-phone-indicators svg:last-child{width:39%}
.he-iphone .he-phone-island{position:absolute;top:1.5%;left:50%;transform:translateX(-50%);width:28.5%;height:4.05%;border-radius:99px;background:#000;box-shadow:0 0 0 .5px #202326;pointer-events:none}
.he-phone-island i{position:absolute;right:10%;top:30%;height:40%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 35%,#263858 0,#111b2d 28%,#05070d 55%,#0b0e15 70%);box-shadow:inset 0 0 1px #39425b}
.he-iphone .he-phone-content{position:absolute;display:block;inset:8.25% 0 3.5%;width:100%;height:auto;border-radius:0;background:#0b0b0b;overflow:hidden}
.he-iphone .he-phone-content>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top;border-radius:0}
.he-iphone .he-phone-home{position:absolute;bottom:1.2%;left:33%;width:34%;height:.5%;border-radius:10px;background:#f5f5f5;pointer-events:none}
.he-iphone .he-phone-key{position:absolute;display:block;width:1%;left:-.8%;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#575a56,#babbb3,#525a57);box-shadow:0 0 0 .5px #28312f}
.he-phone-action{top:16%;height:3%}.he-phone-volume-up{top:23%;height:6.2%}.he-phone-volume-down{top:31%;height:6.2%}
.he-iphone .he-phone-power{left:auto;right:-.8%;top:25%;height:9%;border-radius:0 2px 2px 0}
.he-iphone .he-phone-camera{left:auto;right:-.6%;top:62%;height:6%;width:.7%;border-radius:0 2px 2px 0}
.phone-dialog-panel{width:min(380px,calc(100vw - 60px),calc((100dvh - 154px)*.4779411765))}
.phone-inspect-device.he-iphone{width:100%}
.daily-device .phone.he-iphone{height:auto;flex-shrink:0}
@media(max-width:767px){.phone-dialog-panel{width:min(380px,calc(100vw - 60px),calc((100dvh - 210px)*.4779411765))}}

/* Compact mobile teacher selector; desktop list and shared 3D rotor stay intact. */
.teacher-mobile-controls,.teacher-mobile-profile{display:none}
@media(max-width:767px){
  .teachers .teacher-list,.teacher-jukebox~.media-note{display:none}
  .teacher-layout{gap:0}
  .teacher-jukebox{margin-top:0;aspect-ratio:16/10.8;touch-action:pan-y}
  .teacher-carousel-camera{left:3%;width:94%;top:10px}
  .teacher-mobile-controls,.teacher-mobile-profile{display:block}
  .teacher-swipe-row{display:flex;align-items:center;justify-content:space-between;gap:8px;touch-action:pan-y;color:#b7cdc6;font-size:11px}
  .teacher-swipe-row button{width:44px;height:44px;border:0;background:transparent;color:#c7ddd4;font-size:20px}
  .teacher-dots{display:flex;justify-content:center;margin:0 0 10px;gap:1px}
  .teacher-dot{width:36px;height:32px;padding:0;border:0;background:transparent;position:relative}
  .teacher-dot:after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:9px;background:#789b96;transition:width 300ms ease,background 300ms ease}
  .teacher-dot[aria-current=true]:after{width:22px;background:#e0e8da}
  .teacher-mobile-profile{border-top:1px solid #96bbb44a;padding:20px 0 0;min-height:185px}
  .teacher-mobile-profile h3{font:400 36px/1.2 var(--display);margin:0 0 12px}
  .mobile-teacher-credential{font-size:13px;line-height:1.8;color:#e0e8dc;margin:0 0 7px;min-height:47px}
  .mobile-teacher-topic{font-size:11px;line-height:1.8;color:#a8c1bb;margin:0}
  .mobile-teacher-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;border-top:1px solid #96bbb426;padding-top:9px;font-size:10px;color:#a8c1bb}
  .mobile-teacher-footer button{padding:12px 0 12px 15px;min-height:44px;border:0;background:none;color:#e8eee4;font:inherit;font-size:12px}
  .teacher-mobile-controls button:focus-visible,.teacher-mobile-profile button:focus-visible{outline:2px solid #bbdbd2;outline-offset:2px}
}
@media(prefers-reduced-motion:reduce){.teacher-dot:after{transition:none}}

body.he-sample-screening{margin:0}body.he-sample-screening.admin-bar .site-header{top:32px}@media(max-width:782px){body.he-sample-screening.admin-bar .site-header{top:46px}}