:root{--ink:#F3F1EC;--mut:#B6B5C9;--line:rgba(243,241,236,.18)}
@property --m0{syntax:'<color>';inherits:true;initial-value:#1A1A2E}
@property --m1{syntax:'<color>';inherits:true;initial-value:#2A2A52}
@property --ms{syntax:'<color>';inherits:true;initial-value:#F9C878}
body.art{margin:0;background:var(--m0);color:var(--ink);font:400 20px/1.75 Newsreader,Georgia,serif;--m0:#1A1A2E;--m1:#2A2A52;--ms:#F9C878;transition:--m0 1.4s ease,--m1 1.4s ease,--ms 1.4s ease}
body.art[data-mood=braise]{--m0:#1E0B12;--m1:#5A1420;--ms:#FF7A59}
body.art[data-mood=aube]{--m0:#231A22;--m1:#6B4A3A;--ms:#FFD08A}
body.art[data-mood=brume]{--m0:#0E1A2B;--m1:#234A6B;--ms:#9FD3FF}
body.art::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse 120% 80% at 50% 0%,var(--m1),var(--m0) 70%)}
body.art .star{fill:var(--ms);filter:drop-shadow(0 0 var(--g,16px) var(--ms))}
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(12px + env(safe-area-inset-top,0px)) clamp(18px,4vw,56px) 24px;font:500 14px Inter,system-ui,sans-serif;background:linear-gradient(rgba(8,8,20,.55),transparent)}
.top img{height:50px;width:auto;display:block}
.top .r{display:flex;align-items:center;gap:14px;color:var(--mut)}
.pill{border:1px solid var(--line);background:rgba(10,10,24,.55);color:var(--ink);padding:9px 18px;border-radius:99px;font:500 14px Inter,sans-serif;cursor:pointer;font-family:Inter,sans-serif}
.pill[aria-pressed=true]{border-color:var(--ms);color:var(--ms)}
body[data-mood=braise]{--m0:#1E0B12;--m1:#5A1420;--ms:#FF7A59}
body[data-mood=aube]{--m0:#231A22;--m1:#6B4A3A;--ms:#FFD08A}
body[data-mood=brume]{--m0:#0E1A2B;--m1:#234A6B;--ms:#9FD3FF}
#dust{position:fixed;inset:0;z-index:-1;pointer-events:none}
.cover{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:140px clamp(20px,5vw,72px) clamp(56px,10vh,100px);position:relative}
#cstar{position:absolute;right:clamp(10px,7vw,120px);top:16%;width:clamp(150px,30vw,460px)}
.cover .kick{color:var(--ms);font:500 16px Inter,sans-serif;margin-bottom:22px;position:relative}
h1{font-size:clamp(50px,10.6vw,170px);position:relative}
h1 span{display:block}
.cover .meta{margin:34px 0 0;color:var(--mut);font:400 16px Inter,sans-serif;position:relative}
.hint{margin-top:44px;color:var(--mut);font:400 14px Inter,sans-serif;position:relative}
.chap{padding:clamp(90px,16vh,180px) 0 10px}
.chap h2{font-size:clamp(46px,9vw,130px);padding:0 clamp(20px,5vw,72px);margin-bottom:clamp(36px,7vh,64px);display:flex;align-items:center;gap:20px}
.tl{color:inherit;text-decoration:none;border-bottom:3px solid transparent;transition:border-color .3s}
.tl:hover,.tl:focus-visible{border-color:var(--ms);outline:none}
.song{font:500 14px Inter,sans-serif;text-transform:none;letter-spacing:0;color:var(--ms);border:1px solid var(--line);border-radius:99px;padding:5px 14px;white-space:nowrap;align-self:flex-start;margin-top:.5em;line-height:1.5}
.chap h2{flex-wrap:wrap}
.chap h2 .star{width:clamp(34px,5vw,64px);flex:none}
.col{max-width:680px;margin:0 auto;padding:0 24px}
.p{margin:0 0 1.5em;transition:opacity .3s}
.dc::first-letter{font:800 4.6em/.78 "Barlow Condensed",Impact,sans-serif;float:left;padding:.07em .1em 0 0;color:var(--ms)}
.pq{max-width:1000px;margin:clamp(70px,14vh,150px) auto;padding:0 24px;font:italic 400 clamp(30px,5vw,58px)/1.22 Newsreader,Georgia,serif}
.pq span{opacity:.16;transition:opacity .3s}
.pq span.on{text-shadow:0 0 26px color-mix(in srgb,var(--ms) 55%,transparent)}
.ref{border-bottom:1px dashed var(--ms);color:var(--ms);text-decoration:none;transition:background .25s}
.ref:hover,.ref:focus-visible{background:color-mix(in srgb,var(--ms) 16%,transparent);outline:none}
#rc{position:fixed;z-index:70;width:250px;padding:12px;border-radius:16px;background:rgba(12,12,30,.94);border:1px solid var(--line);font:400 14px Inter,sans-serif;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(8px)}
#rc.on{opacity:1}
#rc i{display:block;height:130px;border-radius:10px;margin-bottom:10px;background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--ms) 70%,transparent),transparent 55%),linear-gradient(160deg,#3A3F7A,#1A1A2E)}
#rc b{display:block;font:800 26px "Barlow Condensed",Impact,sans-serif;text-transform:uppercase;line-height:1}
#rc span{color:var(--mut)}
#rail{position:fixed;right:max(14px,env(safe-area-inset-right));top:16vh;bottom:16vh;width:1px;background:var(--line);z-index:40}
#rs{position:absolute;left:-9px;width:19px;top:0;will-change:transform}
#rail a{position:absolute;left:-4px;width:9px;height:9px;border-radius:50%;background:var(--ink);opacity:.5}
#rail a:hover{opacity:1}
#rail a:hover::after{content:attr(data-t);position:absolute;right:20px;top:-7px;white-space:nowrap;font:500 13px Inter,sans-serif;color:var(--ink);background:rgba(10,10,24,.85);padding:4px 12px;border-radius:99px}
.fiche{max-width:1000px;margin:0 auto;padding:clamp(60px,12vh,130px) 24px 0}
.fiche h2{font-size:clamp(40px,7vw,90px);margin-bottom:28px;display:flex;align-items:center;gap:18px}
.fiche h2 .star{width:clamp(30px,4.4vw,56px);flex:none}
.fiche .syn{font:italic 400 clamp(19px,2.1vw,24px)/1.55 Newsreader,Georgia,serif;margin:0 0 36px;max-width:760px}
.fiche dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 36px;margin:0;border-top:1px solid var(--line)}
.fiche dl div{padding:16px 0;border-bottom:1px solid var(--line)}
.fiche dt{font:500 13px Inter,sans-serif;color:var(--ms);margin-bottom:4px}
.fiche dd{margin:0;font:400 17px/1.45 Inter,sans-serif}
.cover .sub{font:400 clamp(20px,2.4vw,30px)/1.3 Newsreader,Georgia,serif;font-style:italic;margin:26px 0 0;position:relative}
.cover .desc{font:400 17px/1.6 Inter,sans-serif;color:var(--mut);margin:14px 0 0;max-width:46ch;position:relative}
.trailer{display:flex;align-items:center;gap:22px;margin:30px 0 10px;padding:22px;border:1px solid var(--line);border-radius:20px;text-decoration:none;color:inherit;background:rgba(10,10,24,.4);transition:border-color .3s,transform .3s}
.trailer:hover,.trailer:focus-visible{border-color:var(--ms);transform:translateY(-3px);outline:none}
.trailer .tp{width:54px;flex:none}
.trailer b{display:block;font:800 clamp(24px,3.2vw,34px)/1 "Barlow Condensed",Impact,sans-serif;text-transform:uppercase}
.trailer small{display:block;margin-top:6px;font:400 14px Inter,sans-serif;color:var(--mut)}
.sign{max-width:520px;margin:0 auto 70px;text-align:center}
.sign b{display:block;font:800 clamp(44px,7vw,80px)/1 "Barlow Condensed",Impact,sans-serif;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.sign p{margin:0;font:italic 400 18px/1.6 Newsreader,Georgia,serif;color:var(--mut)}
.end{text-align:center;padding:clamp(120px,22vh,220px) 24px 140px;font:400 16px Inter,sans-serif;color:var(--mut)}
.end .star{width:clamp(70px,10vw,120px);margin:0 auto 28px}
.end .pill{margin-top:22px;display:inline-block}
.cover .meta time{white-space:nowrap}
@media (max-width:700px){body.art{font-size:18px}#rail a{display:none}.top .r span{display:none}}
.col .k{margin:2.2em 0 .5em;font:500 14px/1.4 Inter,system-ui,sans-serif;color:var(--ms);letter-spacing:.01em}
.who{font:500 .78em Inter,system-ui,sans-serif;color:var(--ms);margin-right:.35em;white-space:nowrap}
.cover .note{display:inline-block;align-self:flex-start;margin:22px 0 0;padding:5px 14px;border:1px solid var(--ms);border-radius:99px;color:var(--ms);font:500 14px Inter,sans-serif;position:relative}