@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Rajdhani:wght@600;700&display=swap');

:root{--bg:#090d15;--panel:#0d121e;--line:#2b3442;--ink:#d9edf8;--muted:#7d8998;--pink:#ff2b9b;--aqua:#26e0d1;--lime:#99ff35;--purple:#7c3fe5}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{color:var(--ink);font:14px 'Space Mono',monospace;letter-spacing:.055em;overflow-x:hidden}
button{font-family:inherit}
.app-shell{display:grid;grid-template-columns:177px minmax(0,1fr);min-height:100vh;background:radial-gradient(circle at 76% 6%,#3b175128,transparent 34%)}

.rail{position:sticky;top:0;height:100vh;padding:5px 15px;background:#10141e;border-right:1px solid #17343e;z-index:4}
.mark{position:relative;width:147px;height:128px;padding:21px 25px;text-align:left;border:0;border-bottom:3px solid var(--lime);background:linear-gradient(145deg,#ff2b9b1e,#10141e 58%);color:#fff;cursor:pointer}
.mark:before,.mark:after{content:"";position:absolute;top:7px;width:18px;height:18px;border-color:var(--aqua);border-style:solid}
.mark:before{left:7px;border-width:1px 0 0 1px}.mark:after{right:7px;border-width:1px 1px 0 0}
.mark span{font:700 29px/24px Rajdhani,sans-serif;letter-spacing:.05em;text-shadow:3px 0 var(--pink),-2px 0 var(--aqua)}
.mark small{display:block;margin-top:15px;color:var(--lime);font-size:10px;letter-spacing:.24em;white-space:nowrap}
.rail-nav{display:grid;gap:7px;margin-top:15px}
.nav-item{height:65px;border:1px solid var(--line);background:transparent;color:#8794a4;font-size:11px;letter-spacing:.16em;cursor:pointer;transition:.18s}
.nav-item i{display:block;height:30px;color:#8492a2;font:normal 24px Rajdhani,sans-serif}
.nav-item:hover,.nav-item.active{border-color:var(--pink);background:#ff2b9b14;color:var(--pink);box-shadow:0 0 16px #ff2b9b22}.nav-item.active i{color:var(--pink)}

.stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:100vh}
.topbar{min-height:143px;padding:28px 38px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid #20404a;background:#0d111a}
.topbar>div:first-child{min-width:0;display:flex;align-items:baseline;gap:28px;flex-wrap:wrap}
.topbar h1{margin:0;font:700 clamp(25px,2.4vw,36px) Rajdhani,sans-serif;letter-spacing:.065em;white-space:nowrap}
.topbar p{margin:0;color:#9450f4;letter-spacing:.29em;white-space:nowrap}
.channel{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex:0 0 auto;color:var(--pink);white-space:nowrap}
.channel .square{width:46px;height:46px;border:1px solid #3b4553;background:transparent;color:var(--ink);cursor:pointer}.channel .square:hover{border-color:var(--aqua);color:var(--aqua)}
.channel em{margin-left:4px;color:var(--lime);font-style:normal}

.app{min-width:0;padding:35px 38px 48px;background:linear-gradient(112deg,#0b1019 0%,#0a0f18 57%,#1d1432 130%)}
footer{min-height:80px;padding:31px 43px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid #193d3e;background:#0b1318;color:#53616b;font-size:12px;letter-spacing:.22em}
.panel{min-width:0;border:1px solid var(--line);background:#0d121e}
.eyebrow{color:var(--lime);font-size:12px;letter-spacing:.23em}.accent-pink{color:var(--pink)}.accent-aqua{color:var(--aqua)}
.section-title{display:flex;align-items:baseline;gap:18px;margin:0 0 8px}.section-title h2{margin:0;font:700 31px Rajdhani,sans-serif}.page-copy{margin:0 0 12px;color:var(--aqua)}
.button{max-width:100%;padding:14px 23px;border:1px solid var(--aqua);background:transparent;color:var(--aqua);font-weight:700;letter-spacing:.12em;cursor:pointer}.button:hover{filter:brightness(1.2);box-shadow:0 0 15px currentColor}.button.primary{border-color:var(--pink);background:var(--pink);color:#10121b}.button.lime{border-color:var(--lime);background:var(--lime);color:#0a0e17}

.home-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(290px,1fr);gap:20px;align-items:start}
.feature{position:relative;min-height:500px;padding:39px 32px;overflow:hidden;border-color:var(--pink);background:linear-gradient(120deg,#11252b 0%,#17161f 50%,#351623 100%)}
.feature:before{content:"";position:absolute;right:-7%;bottom:-30%;width:75%;height:100%;transform:skewX(-12deg);background:radial-gradient(ellipse,#ed793627 0%,transparent 61%),linear-gradient(100deg,transparent,#ff2b9b0c);border-left:1px solid #ff2b9b25}
.feature:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff08 0 2px,transparent 2px 5px)}
.feature>*{position:relative;z-index:1}.feature .eyebrow{padding-right:40px}.feature .eyebrow .button{display:inline-block;margin-left:20px;padding:7px 13px;color:#438bea;border-color:#438bea}
.feature h2{margin:25px 0 5px;font:700 clamp(43px,4.3vw,65px) Rajdhani,sans-serif;line-height:.98;letter-spacing:-.01em;overflow-wrap:anywhere}.feature .meta{color:#99a5b1}.feature p{max-width:650px;margin:18px 0;font-size:15px;line-height:1.6;color:#b1bdc8}
.vertical{position:absolute;right:20px;top:27px;color:var(--pink);writing-mode:vertical-rl;letter-spacing:.45em}.feature-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:28px}.pager{margin-top:19px;padding-top:15px;border-top:1px solid #35404c;color:#82909d;overflow:hidden}
.side{display:grid;gap:20px}.ledger{padding:25px;border-color:var(--aqua)}.ledger-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}.ledger strong{display:block;color:var(--lime);font:700 37px Rajdhani}.ledger div:nth-child(2) strong,.ledger div:nth-child(3) strong{color:var(--aqua)}.ledger div:nth-child(4) strong{color:var(--pink)}.ledger small{color:#75818f;font-size:10px}.announcement{padding:24px;border-left:4px solid var(--lime);box-shadow:0 0 22px #9aff3615}.announcement h3{margin:18px 0 8px;font:700 25px/1.18 Rajdhani}.announcement p{color:#9aa8b5;line-height:1.55}.announcement .button{margin:8px 5px 0 0}

.vote-meter{margin-bottom:10px;padding:10px 18px;border:1px solid #639b36;background:#18201d;color:var(--lime);overflow:hidden}.pips{display:inline-flex;gap:10px;margin-left:17px}.pips i{display:block;width:35px;height:15px;background:var(--lime)}
.movie-row{display:grid;grid-template-columns:48px minmax(0,1fr) 86px 98px;gap:10px;align-items:center;margin-bottom:5px;padding:11px 15px}.movie-row .num{color:#596574;font:700 27px Rajdhani}.movie-row strong{font:700 21px Rajdhani;overflow-wrap:anywhere}.movie-row small{display:block;margin-top:4px;color:#798796}.bar{height:5px;margin-top:8px;background:#2d3543}.bar i{display:block;height:100%;background:var(--lime)}.movie-row:nth-of-type(3) .bar i{background:var(--pink)}.movie-row:nth-of-type(4) .bar i{background:#bd7df0}.movie-row:nth-of-type(5) .bar i{background:var(--aqua)}.votes{text-align:center;color:var(--lime);font:700 27px Rajdhani}.votes small{font-size:10px}.movie-row:nth-of-type(3) .votes{color:var(--pink)}.movie-row:nth-of-type(4) .votes{color:#bd7df0}.mini-button{padding:7px 13px;border:1px solid #596475;background:transparent;color:var(--ink);font-size:11px;cursor:pointer}
.wheel-zone{display:grid;grid-template-columns:minmax(230px,305px) minmax(0,1fr);gap:24px;margin-top:10px;padding-top:16px;border-top:1px solid var(--aqua)}.wheel{position:relative;display:grid;place-items:center;width:min(260px,100%);aspect-ratio:1;border:3px solid #518fa2;border-radius:50%;background:conic-gradient(#F7D967 0 25%,#C24347 25% 50%,#AA5A9C 50% 75%,#1E588D 75%);box-shadow:0 0 26px #24dfc840}.wheel:before{content:"";width:34%;aspect-ratio:1;border:3px solid var(--lime);border-radius:50%;background:#0c1019}.wheel span{position:absolute;color:var(--lime);font-size:23px}.result{min-height:113px;padding:17px;border-color:var(--aqua)}.result p{color:#72808c;line-height:1.5}

.rate-row{display:grid;grid-template-columns:32px minmax(0,1fr) 65px auto;align-items:center;gap:13px;margin-bottom:5px;padding:9px 14px}.poster{width:31px;height:31px;background:linear-gradient(135deg,var(--pink),#4438e8)}.rate-row strong{font:700 19px Rajdhani}.rate-row small{display:block;color:#718090}.score{text-align:center;color:var(--aqua);font:700 25px Rajdhani}.stars{display:flex;gap:8px}.stars button{width:24px;height:24px;border:1px solid #4d5868;background:transparent;color:#a9b8c5;cursor:pointer}.tier-tabs{display:flex;flex-wrap:wrap;gap:12px;padding:10px}.tier-tabs button{padding:10px 14px;border:1px solid #586273;background:transparent;color:var(--ink);cursor:pointer}.tier{display:grid;grid-template-columns:40px minmax(0,1fr);min-height:40px;align-items:center;border:1px solid #2d3543;border-bottom:0}.tier:last-child{border-bottom:1px solid #2d3543}.tier b{height:100%;display:grid;place-items:center;background:var(--lime);color:#111;font:700 20px Rajdhani}.tier:nth-child(3) b{background:var(--aqua)}.tier:nth-child(4) b{background:var(--pink)}.tier:nth-child(5) b{background:#8b52e5}.tier:nth-child(6) b{background:#288adc}.tier span{min-width:0;padding-left:12px;color:#7b8795}
.toast{position:fixed;right:28px;bottom:26px;z-index:9;max-width:calc(100vw - 40px);padding:14px 18px;background:var(--lime);color:#10131b;font-weight:700;opacity:0;transform:translateY(12px);transition:.25s}.toast.show{opacity:1;transform:none}

@media(max-width:1240px){.topbar{align-items:flex-start;flex-direction:column;padding-block:22px}.channel{width:100%;justify-content:flex-start}.home-grid{grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr)}.feature{padding:30px 25px}.feature .eyebrow .button{display:none}.announcement .button{width:100%}.movie-row{grid-template-columns:42px minmax(0,1fr) 65px}.movie-row .mini-button{display:none}}
@media(max-width:960px){.home-grid,.wheel-zone{grid-template-columns:1fr}.side{grid-template-columns:repeat(2,minmax(0,1fr))}.wheel{max-width:250px}.rate-row{grid-template-columns:32px minmax(0,1fr) 60px}.stars{grid-column:2/4}.app{padding:28px 24px}.channel em{display:none}}
@media(max-width:700px){.app-shell{grid-template-columns:70px minmax(0,1fr)}.rail{width:70px;padding:5px}.mark{width:60px;height:94px;padding:15px 3px;text-align:center}.mark span{font-size:16px;line-height:15px}.mark small{display:none}.rail-nav{margin-top:8px}.nav-item{height:55px;font-size:0}.nav-item i{height:auto;font-size:22px}.topbar{min-height:0;padding:18px}.topbar>div:first-child{gap:8px}.topbar h1{font-size:23px;white-space:normal}.topbar p{font-size:9px;white-space:normal}.channel{gap:7px;font-size:10px}.channel .square{width:34px;height:34px}.app{padding:22px 15px}.side{grid-template-columns:1fr}.feature{min-height:450px;padding:25px 20px}.feature h2{font-size:41px}.feature p{font-size:13px}.vertical{display:none}.button{width:100%;padding-inline:12px}.feature-actions{display:grid}.vote-meter>span:last-child{display:none}.pips i{width:20px}.movie-row{grid-template-columns:31px minmax(0,1fr) 48px;padding:10px 8px}.movie-row strong{font-size:17px}.movie-row small{font-size:9px}.movie-row .num,.votes{font-size:21px}.wheel-zone>div:last-child{padding-top:0!important}.section-title{display:block}.section-title h2{margin-top:5px}.rate-row{grid-template-columns:31px minmax(0,1fr) 50px;padding-inline:8px}.stars{grid-column:1/4;justify-content:flex-end}.rate-row small{font-size:9px}footer{padding:24px 17px;font-size:9px}footer span{display:none}}
