*{box-sizing:border-box}html,body{margin:0;min-height:100%;color:#fff8ef;font-family:"Trebuchet MS",system-ui,sans-serif}body{background:radial-gradient(circle at 18% 2%,#ff779e 0,transparent 25%),radial-gradient(circle at 85% 5%,#26d4da 0,transparent 28%),linear-gradient(145deg,#5b2bb3,#171c65 58%,#071c4b);background-attachment:fixed}.page{width:min(1180px,calc(100% - 32px));margin:auto;padding:23px 0 42px}header{display:flex;justify-content:space-between;align-items:center;color:#d7f6ff;font-size:12px}.brand{font-weight:900;font-size:15px}.brand i{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:9px;border-radius:50%;background:linear-gradient(135deg,#ffe96b,#ff9b61);color:#452271;font-style:normal;animation:pulse 2.2s ease-in-out infinite}.intro{text-align:center;max-width:850px;margin:25px auto 22px}.intro small,.caption span,.cover small,.endcard small{color:#8fffe9;font-weight:900;letter-spacing:1.6px}.intro h1{margin:10px 0 12px;font:500 clamp(45px,6.6vw,76px)/.95 Georgia,serif;letter-spacing:-3px}.intro h1 em{font-style:normal;background:linear-gradient(90deg,#ffe96f,#ff9d8c 46%,#9dfff0);-webkit-background-clip:text;background-clip:text;color:transparent}.intro p{max-width:650px;margin:auto;color:#dceff5;font:18px/1.5 Georgia,serif}.screen{position:relative;aspect-ratio:16/9;overflow:hidden;border:3px solid #ffffff66;border-radius:30px;background:#182a62;box-shadow:0 28px 90px #050a32bb,0 0 50px #40e7d34d}.film,.film video{position:absolute;inset:0;width:100%;height:100%}.film{z-index:1}.film video{object-fit:cover;opacity:0;transition:opacity .85s ease}.film video.active{opacity:1;z-index:1}.vignette{position:absolute;z-index:2;inset:0;pointer-events:none;background:linear-gradient(0deg,#080c32c9,transparent 44%),radial-gradient(circle,transparent 60%,#08092c62)}.stars{position:absolute;z-index:2;inset:0;pointer-events:none;opacity:.45;background-image:radial-gradient(circle,#fff 0 1px,transparent 2px),radial-gradient(circle,#ffe772 0 2px,transparent 3px);background-size:93px 81px,157px 139px;animation:drift 7s linear infinite}.caption{position:absolute;z-index:3;left:7%;right:7%;bottom:7%;text-shadow:0 3px 18px #000}.caption span{font-size:11px}.caption p{max-width:860px;margin:8px 0 0;font:500 clamp(23px,3.2vw,43px)/1.1 Georgia,serif}.progress{position:absolute;z-index:4;top:4%;left:50%;translate:-50%;display:flex;gap:7px}.progress i{width:7px;height:7px;border-radius:9px;background:#ffffff69;transition:.5s}.progress i.active{width:30px;background:#ffe36b;box-shadow:0 0 15px #ffe36b}.cover,.endcard{position:absolute;z-index:5;inset:0;display:grid;align-items:center;padding-left:7%;background:linear-gradient(90deg,#331061e8,#151858bb 48%,transparent 82%)}.cover>div{max-width:540px}.cover h2,.endcard h2{font:500 clamp(34px,4.8vw,57px)/1.03 Georgia,serif;margin:15px 0 25px}.cover button,.endcard button{border:0;border-radius:18px;padding:17px 25px;background:linear-gradient(135deg,#ffe76a,#ff9d67);color:#432366;box-shadow:0 7px 0 #b94b79,0 12px 30px #070b3266;font-weight:900;font-size:16px;cursor:pointer}.cover button:hover,.endcard button:hover{filter:brightness(1.08);translate:0 -2px}.cover p{font-size:11px;color:#dff8f5}.endcard{display:none;padding:22px;background:linear-gradient(135deg,#351071d9,#087989d9);backdrop-filter:blur(7px);text-align:center;place-items:center}.endcard>div{padding:34px;animation:float 3s ease-in-out infinite}.endcard b{display:block;color:#ffe66d;font-size:54px;filter:drop-shadow(0 0 16px #ffe66d)}.endcard small{display:block;margin-top:8px}.lessons{display:grid;grid-template-columns:repeat(3,1fr);margin-top:25px;border:1px solid #ffffff38;border-radius:21px;overflow:hidden;box-shadow:0 16px 45px #090d3955}.lessons>div{display:flex;gap:15px;align-items:center;padding:20px;background:#17255dc9;border-right:1px solid #ffffff2c}.lessons>div:nth-child(2){background:#633590c9}.lessons>div:nth-child(3){background:#087985c9}.lessons>div:last-child{border:0}.lessons b{color:#ffe36b;font:26px Georgia}.lessons p{margin:0;color:#d9eef0;font-size:12px;line-height:1.45}.lessons strong{display:block;color:#fffdf3;font-size:15px}footer{text-align:center;color:#b6d5df;font-size:11px;padding-top:22px}@keyframes drift{to{background-position:93px -81px,157px -139px}}@keyframes pulse{50%{transform:scale(1.12);box-shadow:0 0 22px #ffe16a}}@keyframes float{50%{transform:translateY(-7px)}}@media(max-width:700px){.page{width:calc(100% - 20px);padding-top:12px}header>span{font-size:10px}.intro h1{font-size:42px}.intro p{font-size:14px}.screen{border-radius:18px}.cover{padding-left:6%}.cover>div{max-width:70%}.cover h2{font-size:25px}.cover p{display:none}.caption p{font-size:20px}.lessons{grid-template-columns:1fr}.lessons>div{border-right:0;border-bottom:1px solid #ffffff2b;padding:14px 18px}}

/* Movie-style timed subtitles and full-screen presentation */
.caption{left:50%;right:auto;bottom:16%;width:min(88%,900px);translate:-50%;text-align:center;text-shadow:none;pointer-events:none}
.caption #chapter{display:none}
.caption p{display:inline-block;max-width:100%;margin:0;padding:.38em .72em;border-radius:.5em;background:rgba(0,0,0,.7);color:#fff;font:700 clamp(1.05rem,2.15vw,1.55rem)/1.35 "Trebuchet MS",system-ui,sans-serif;text-shadow:0 2px 4px rgba(0,0,0,.95);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.screen:fullscreen,.screen:-webkit-full-screen{width:100vw;height:100vh;max-width:none;aspect-ratio:auto;border:0;border-radius:0;background:#080c32}
.screen:fullscreen .caption,.screen:-webkit-full-screen .caption{bottom:13%}
@media(max-width:700px){.caption{bottom:21%;width:92%}.caption p{font-size:1rem}.page-controls{gap:6px}.page-controls button{min-width:44px;padding:10px}}
@media (orientation:portrait) and (min-width:701px) and (max-width:900px){.caption{bottom:21%;width:92%}}

body.fullscreen-open{overflow:hidden}
.screen.pseudo-fullscreen{position:fixed;inset:0;z-index:9999;width:100vw;height:100dvh;max-width:none;aspect-ratio:auto;border:0;border-radius:0;background:#080c32}
.screen.pseudo-fullscreen .caption{bottom:13%}