@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap";:root{--ink:#17152d;--paper:#fff8e8;--muted:#9f9bb1;--rose:#d85f73;--gold:#f3c96e;--lavender:#a895e7;--line:rgba(255,248,232,.18);font-family:DM Sans,sans-serif;color:var(--paper);background:var(--ink);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--ink)}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}#app{min-height:100vh}.landing{min-height:100vh;position:relative;overflow:hidden;background:radial-gradient(circle at 70% 32%,#4b3b6b 0,#211c43 35%,#17152d 74%);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;padding:7vw 9vw}.landing-stars{position:absolute;top:0;right:0;bottom:0;left:0;opacity:.65;background-image:radial-gradient(#fff8e8 0 1px,transparent 1px),radial-gradient(#a895e7 0 1px,transparent 1px);background-size:97px 89px,137px 113px;background-position:12px 28px,63px 7px}.landing:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(90deg,rgba(23,21,45,.1),transparent 45%,rgba(23,21,45,.5))}.landing-copy{position:relative;z-index:2;max-width:650px;animation:arrive 1.2s cubic-bezier(.2,.85,.2,1) both}.overline{font:500 11px/1.3 DM Mono,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 24px}.landing h1{font:500 clamp(82px,12vw,170px)/.78 "Playfair Display",serif;letter-spacing:-.07em;margin:0 0 34px}.landing h1 em{color:#f0a1a5}.landing-lede{font:400 clamp(21px,2.2vw,30px)/1.22 "Playfair Display",serif;max-width:510px;color:#f6e9dd;margin:0 0 42px}.begin{display:inline-flex;align-items:center;gap:40px;border:1px solid rgba(243,201,110,.7);padding:15px 16px 15px 20px;background:#17152d3d;text-transform:uppercase;letter-spacing:.16em;font:500 11px DM Mono,monospace;transition:background .2s,transform .2s}.begin b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--ink);font-size:19px;font-weight:400}.begin:hover{background:#f3c96e24;transform:translateY(-3px)}.landing-credit{margin-top:80px;color:var(--muted);font:400 11px DM Mono,monospace;letter-spacing:.07em}.landing-side{position:relative;z-index:2;justify-self:end;width:min(300px,100%);align-self:end;margin-bottom:10vh;color:var(--muted);font:400 13px/1.5 DM Mono,monospace}.side-rule{height:1px;background:var(--line);margin-bottom:18px}.side-swatch{display:flex;gap:8px;margin-top:22px}.side-swatch span{width:34px;height:7px;background:var(--rose)}.side-swatch span:nth-child(2){background:var(--gold)}.side-swatch span:nth-child(3){background:var(--lavender)}.landing-moon{position:absolute;z-index:1;width:min(38vw,460px);aspect-ratio:1;border-radius:50%;right:10%;top:10%;background:#f3d388;box-shadow:0 0 0 18px #f3c96e0d,0 0 110px #f3c96e42;animation:float 7s ease-in-out infinite}.landing-moon:before,.landing-moon:after{content:"";position:absolute;border-radius:50%;background:#b97e5333}.landing-moon:before{width:72px;height:72px;left:25%;top:23%}.landing-moon:after{width:38px;height:38px;right:21%;bottom:25%;box-shadow:-110px 62px #b97e532b}.landing-rose{position:absolute;z-index:2;color:var(--rose);font-size:92px;filter:drop-shadow(0 0 16px rgba(216,95,115,.35));animation:float 6s ease-in-out infinite}.rose-one{right:36%;bottom:14%}.rose-two{right:8%;top:55%;font-size:54px;animation-delay:1.6s}.sequence{min-height:100vh;background:var(--ink);display:grid;grid-template-rows:88px 1fr 46px}.film-bar{display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line);background:#17152db8;position:relative;z-index:5}.film-logo,.film-skip{border:0;background:none;text-transform:uppercase;letter-spacing:.16em;font:500 10px DM Mono,monospace}.film-logo{display:flex;align-items:center;gap:9px}.film-logo span{color:var(--gold);font-size:19px}.film-skip{color:var(--muted)}.film-skip span{color:var(--gold);margin-left:10px}.film-progress{display:flex;gap:10px}.progress-dot{width:34px;height:3px;border:0;background:#fff8e838;padding:0}.progress-dot.active{background:var(--gold)}.progress-dot.done{background:var(--rose)}.film-stage{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(360px,.8fr);align-items:center;gap:4vw;max-width:1600px;width:100%;margin:0 auto;padding:3.5vw 4vw}.art-wrap{position:relative;min-width:0;overflow:hidden;box-shadow:0 28px 70px #00000047;animation:sceneIn .8s cubic-bezier(.2,.85,.2,1) both}.scene-art{display:block;width:100%;height:auto;background:#29364f}.scene-art text{font-family:DM Mono,monospace}.scene-title{font-size:16px;letter-spacing:2px;fill:#fff8e8}.label-small{font-size:12px;letter-spacing:1px;fill:#4d3547}.shelf-line{stroke:#b6aaa2;stroke-width:4}.glass path{fill:#d4eef0;stroke:#526b78;stroke-width:5}.glass .liquid{stroke:#7fc2b7;stroke-width:12}.glass .bubble{fill:none;stroke:#7fc2b7;stroke-width:5}.microscope{fill:none;stroke:#2f384a;stroke-width:13;stroke-linecap:round;stroke-linejoin:round}.ink{stroke:#7a4a54;stroke-width:4}.handrail{fill:none;stroke:#4e6573;stroke-width:6}.hospital-sign text{font:500 13px DM Mono;fill:#506a79}.figure .ground{fill:#1a152c;opacity:.22}.figure .hair{fill:#17152d;stroke:#0b0920;stroke-width:3}.figure .skin{fill:#bd8067;stroke:#0b0920;stroke-width:3}.figure .cloth{fill:#5f4da0;stroke:#0b0920;stroke-width:3}.figure .cloth-highlight{fill:#806bc2}.figure .sleeve{fill:#362858;stroke:#0b0920;stroke-width:3}.figure .shoe{fill:#2e2b45;stroke:#0b0920;stroke-width:3}.figure .eye{stroke:#0b0920;stroke-width:4;stroke-linecap:round}.figure .mouth{stroke:#7a3f52;stroke-width:3;stroke-linecap:round}.figure-label{font:500 11px DM Mono;letter-spacing:2px;text-anchor:middle;fill:#fff8e8;paint-order:stroke;stroke:#1a152c;stroke-width:5px}.figure .chair{fill:none;stroke:#75708d;stroke-width:7;stroke-linecap:round}.figure .chair circle{fill:#353150;stroke:#75708d;stroke-width:5}.figure.hamza .cloth{fill:#20223b}.figure.hamza .cloth-highlight{fill:#e07d68}.figure.ashik .cloth{fill:#17243b}.figure.ashik .cloth-highlight{fill:#6d9eb0}.figure.jely .cloth{fill:#155052}.figure.jely .cloth-highlight{fill:#9dd3bd}.figure.zarifa .cloth{fill:#e18a61}.figure.zarifa .cloth-highlight{fill:#f3b285}.figure.kashfiya .cloth{fill:#d8b18e}.figure.kashfiya .cloth-highlight{fill:#9b80d2}.figure.tasniya .cloth{fill:#ecedf0}.figure.tasniya .cloth-highlight{fill:#4d79c1}.star-pin,.phone,.compass,.lantern,.charm,.book{fill:var(--gold);stroke:#0b0920;stroke-width:3}.notebook{fill:#fff8e8;stroke:#0b0920;stroke-width:3}.ink{stroke:#4d79c1;stroke-width:3}.university-title{font:500 24px DM Mono;letter-spacing:3px;fill:#33495f}.columns{opacity:.8}.paper-flight{animation:flight 5s ease-in-out infinite}.fireworks{fill:var(--gold);filter:drop-shadow(0 0 10px rgba(243,201,110,.65))}.chapter-copy{align-self:center;max-width:600px;padding:0 1vw;animation:copyIn .85s .12s cubic-bezier(.2,.85,.2,1) both}.chapter-copy h1{font:500 clamp(38px,4.6vw,76px)/1.02 "Playfair Display",serif;letter-spacing:-.045em;margin:0 0 25px;color:var(--paper)}.chapter-body{font:400 clamp(19px,1.7vw,26px)/1.33 "Playfair Display",serif;color:#e8dfd9;margin:0 0 30px;max-width:560px}.chapter-note{border-top:1px solid var(--line);padding-top:18px;color:#c8c2d0;font:400 13px/1.55 DM Mono,monospace;max-width:470px}.chapter-controls{display:flex;align-items:center;gap:18px;margin-top:35px;color:var(--muted);font:400 11px DM Mono,monospace}.round-button{width:46px;height:46px;border:1px solid rgba(243,201,110,.7);border-radius:50%;background:transparent;color:var(--gold);font-size:21px;transition:background .2s,transform .2s}.round-button:hover:not(:disabled){background:#f3c96e21;transform:translateY(-2px)}.round-button:disabled{opacity:.3;cursor:not-allowed}.film-footer{display:flex;justify-content:space-between;align-items:center;padding:0 4vw;border-top:1px solid var(--line);color:var(--muted);font:400 10px DM Mono,monospace;letter-spacing:.1em}@keyframes arrive{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes sceneIn{0%{opacity:0;transform:scale(.985) translateY(12px)}to{opacity:1;transform:none}}@keyframes copyIn{0%{opacity:0;transform:translate(18px)}to{opacity:1;transform:none}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-13px)}}@keyframes flight{0%,to{transform:translate(0)}50%{transform:translate(12px,-14px)}}@media(max-width:1000px){.landing{grid-template-columns:1fr;padding:14vw 8vw}.landing-moon{width:55vw;right:-8%;top:6%;opacity:.55}.landing-side{display:none}.film-stage{grid-template-columns:1fr;gap:34px;padding:28px 5vw}.chapter-copy{max-width:760px}.film-footer{font-size:9px}}@media(max-width:600px){.landing{padding:22vw 7vw 12vw;align-items:end}.landing h1{font-size:74px}.landing-lede{font-size:24px}.landing-credit{margin-top:50px;font-size:10px}.landing-moon{width:72vw;right:-18%;top:8%;opacity:.42}.landing-rose{font-size:60px}.rose-one{right:22%;bottom:32%}.rose-two{right:7%;top:38%}.sequence{grid-template-rows:72px 1fr 38px}.film-bar{padding:0 5vw}.film-logo{font-size:9px}.film-progress{gap:4px}.progress-dot{width:19px}.film-skip{font-size:0}.film-skip span{font-size:18px;margin:0}.film-stage{padding:18px 4vw 30px;gap:23px}.chapter-copy h1{font-size:41px}.chapter-body{font-size:22px}.chapter-note{font-size:12px}.scene-title{font-size:13px}.film-footer span:last-child{display:none}.film-footer{justify-content:center}}