@font-face{font-family:"Butler";src:url(/assets/fonts/Butler-Light.ttf) format("truetype");font-weight:300;font-display:swap}
:root{
  --canvas:#06090A;--surface:#0D1416;--surface2:#121B1E;--petrol:#0E5661;--petrol-l:#2A93A1;
  --bone:#EDEBE6;--muted:rgba(237,235,230,.62);--faint:rgba(237,235,230,.38);--line:rgba(237,235,230,.10);
  --up:#14B881;--down:#EB5757;--gold:#D4B06A;--warn:#E6A23C;
  --serif:"Butler",Georgia,serif;--sans:"Plus Jakarta Sans",system-ui,sans-serif;--mono:"Roboto Mono",ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--bone);font:400 16px/1.6 var(--sans);overflow-x:hidden}
img,video,canvas{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hidden{display:none!important}
.mono{font-family:var(--mono);letter-spacing:.02em}
.small{font-size:13px}.dim{color:var(--muted)}
.kicker{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--petrol-l);margin:0 0 14px}
h1,h2,h3{font-weight:300;margin:0}
h1{font:300 clamp(56px,10vw,128px)/.92 var(--serif);letter-spacing:-.01em}
h2{font:300 clamp(34px,5vw,56px)/1.05 var(--serif)}
h3{font:600 14px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.mt{margin-top:22px}
.serif-lg{font:300 clamp(22px,2.6vw,30px)/1.25 var(--serif);margin:6px 0 10px}

.nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px clamp(16px,4vw,48px);background:rgba(6,9,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;font:500 13px var(--mono);letter-spacing:.32em}
.nav nav{display:flex;gap:clamp(10px,2vw,26px);align-items:center;font-size:14px}
.nav nav a{text-decoration:none;color:var(--muted)}.nav nav a:hover{color:var(--bone)}
.nav .cta{color:var(--canvas)!important;background:var(--bone);padding:8px 14px;border-radius:999px;font-weight:600}
@media (max-width:720px){.nav nav a:not(.cta){display:none}}

.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,5vw,72px);align-items:center;padding:clamp(40px,8vw,110px) clamp(16px,4vw,48px) clamp(40px,6vw,80px);background:radial-gradient(1200px 600px at 80% 0%,rgba(42,147,161,.16),transparent 60%),url(/assets/img/tex-black.jpg) center/cover;border-bottom:1px solid var(--line)}
.lede{font-size:clamp(17px,1.7vw,20px);color:var(--muted);max-width:40ch;margin:26px 0 36px}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.hero-stats div{padding:18px 16px 0 0;border-right:1px solid var(--line);margin-right:16px}
.hero-stats div:last-child{border-right:0}
.label{display:block;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.hero-stats b{display:block;font:300 clamp(34px,4vw,52px)/1.1 var(--serif);margin:8px 0 4px}
.hero-stats small{color:var(--faint);font-size:12px}
.hero-fig{margin:0;position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.hero-fig img{aspect-ratio:9/14;object-fit:cover;object-position:50% 45%;width:100%}
.hero-fig figcaption{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;padding:40px 16px 14px;font-size:11px;background:linear-gradient(transparent,rgba(6,9,10,.92))}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero-stats{grid-template-columns:1fr 1fr}.hero-stats div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:12px}.hero-fig{max-width:420px}}

.block{padding:clamp(56px,8vw,110px) clamp(16px,4vw,48px);border-bottom:1px solid var(--line);max-width:1320px;margin:0 auto}
.sec-head{max-width:760px;margin-bottom:36px}.sec-head.inner{margin-top:70px}
.sub{color:var(--muted);margin:14px 0 0}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(18px,2.4vw,28px);min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;color:var(--muted)}
@media (max-width:860px){.grid2,.grid3{grid-template-columns:1fr}}

.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;margin-bottom:20px}
.tabs button{padding:9px 16px;border-radius:999px;font-size:14px;color:var(--muted)}
.tabs button[aria-selected=true]{background:var(--bone);color:var(--canvas);font-weight:600}
.tabs.small button{padding:6px 12px;font-size:13px}

.film{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(18px,3vw,40px);align-items:start}
.player{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#000}
.player video{width:100%;aspect-ratio:9/16;object-fit:cover}
.ctrl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px;background:var(--surface);border-top:1px solid var(--line);font:13px var(--mono)}
.ctrl button{padding:6px 10px;border-radius:8px;border:1px solid var(--line)}
.ctrl button.on{background:var(--petrol);border-color:var(--petrol-l)}
.tog{display:inline-flex;gap:6px;align-items:center;cursor:pointer;margin-left:auto}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chips button{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.chips button.on{border-color:var(--petrol-l);color:var(--bone);background:rgba(42,147,161,.15)}
.still-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:440px}.still-wrap figure{margin:0;cursor:pointer;opacity:.7;transition:opacity .2s}.still-wrap figure.cur,.still-wrap figure:hover{opacity:1}.still-wrap img{width:100%;aspect-ratio:9/13;object-fit:cover;object-position:50% 55%;border-radius:10px;border:1px solid var(--line)}.still-wrap figure.cur img{border-color:var(--petrol-l)}.still-wrap figcaption{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.phase-panel #phase-note{font:300 clamp(20px,2.2vw,26px)/1.35 var(--serif);margin:10px 0 0}
@media (max-width:860px){.film{grid-template-columns:1fr}.player{max-width:440px}}

.orbit{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
#orbit-c{width:100%;height:auto;aspect-ratio:900/760;background:radial-gradient(closest-side,rgba(42,147,161,.10),transparent),var(--surface);border:1px solid var(--line);border-radius:16px;cursor:grab;touch-action:none}
.orbit-ui{display:flex;flex-direction:column;gap:16px}
.views{display:flex;flex-wrap:wrap;gap:6px}
.views button,#orbit-play,.btn{padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:13px}
.views button:hover{border-color:var(--petrol-l)}
input[type=range]{width:100%;accent-color:var(--petrol-l)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
dl.mini{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0;font-size:14px}
dl.mini dt{color:var(--muted)}dl.mini dd{margin:0;font-family:var(--mono)}
@media (max-width:860px){.orbit{grid-template-columns:1fr}}

.chart svg{width:100%;height:auto;display:block}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th{text-align:left;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:12px;border-bottom:1px solid var(--line)}
td.num{font-family:var(--mono);white-space:nowrap}
.pill{display:inline-block;font:500 11px var(--mono);padding:3px 8px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase}
.pill.p-good{background:rgba(20,184,129,.14);color:var(--up)}.pill.p-watch{background:rgba(230,162,60,.14);color:var(--warn)}.pill.p-fix{background:rgba(235,87,87,.14);color:var(--down)}

.gradebig{display:flex;gap:clamp(18px,3vw,40px);align-items:center;margin-bottom:32px;padding:clamp(18px,3vw,32px);background:linear-gradient(120deg,rgba(14,86,97,.35),rgba(13,20,22,.6));border:1px solid var(--line);border-radius:20px}
.gb-letter{font:300 clamp(84px,12vw,150px)/.9 var(--serif);min-width:1.4em;text-align:center;color:var(--bone)}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.gcard .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.gcard .nm{font-weight:600;font-size:15px}
.gcard .gr{font:300 34px/1 var(--serif)}
.meter{height:4px;background:var(--line);border-radius:4px;overflow:hidden}.meter i{display:block;height:100%;border-radius:4px}
.gcard p{margin:0;font-size:14px;color:var(--muted)}
.gcard .fx{color:var(--bone);font-size:14px;border-left:2px solid var(--petrol-l);padding-left:10px}
.gcard .def{font-style:italic}
.novel .gcard{background:linear-gradient(160deg,rgba(212,176,106,.10),var(--surface) 55%)}

.fixes{display:grid;gap:14px;margin-bottom:18px}
.fix{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,3vw,36px);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,30px)}
.fix .n{font:300 clamp(54px,7vw,84px)/.9 var(--serif);color:var(--petrol-l)}
.fix h4{font:300 clamp(24px,2.6vw,32px)/1.15 var(--serif);margin:0 0 12px}
.fix dl{display:grid;grid-template-columns:110px 1fr;gap:8px 16px;margin:0;font-size:15px}
.fix dt{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding-top:4px}
.fix dd{margin:0}
@media (max-width:600px){.fix{grid-template-columns:1fr}.fix dl{grid-template-columns:1fr}}
.plan{margin:0;padding-left:20px;display:grid;gap:10px}.ticks{margin:0;padding-left:18px;display:grid;gap:8px}
dl.est{display:grid;grid-template-columns:1fr;gap:4px;margin:0}
dl.est dt{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:12px}dl.est dt:first-child{margin-top:0}dl.est dd{margin:0;font-size:16px}

.roast-grid{display:grid;grid-template-columns:1fr minmax(0,420px);gap:clamp(18px,4vw,48px);align-items:start;margin-top:12px}
.roast-lines{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.roast-lines li{font:300 clamp(20px,2.3vw,28px)/1.3 var(--serif);padding-left:22px;border-left:2px solid var(--down)}
.cardwrap canvas{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.cardwrap .row{margin-top:12px}
.btn{background:var(--bone);color:var(--canvas);font-weight:600;border-color:var(--bone)}
.btn.ghost{background:none;color:var(--bone);border-color:var(--line)}
@media (max-width:860px){.roast-grid{grid-template-columns:1fr}}

.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:220px;border:1.5px dashed rgba(42,147,161,.6);border-radius:20px;background:rgba(42,147,161,.06);cursor:pointer;text-align:center;padding:24px;transition:background .2s}
.drop:hover,.drop.over{background:rgba(42,147,161,.14)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop-big{font:300 clamp(28px,3.4vw,40px) var(--serif)}
.lab-opts{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:18px;font-size:14px;color:var(--muted);align-items:center}
.lab-opts select,.lab-opts input:not([type=checkbox]){margin-left:8px;background:var(--surface);color:var(--bone);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit}
.lab-opts .tog{margin-left:0}
.lab-run{display:grid;gap:12px;justify-items:start}
.bar{width:100%;height:6px;background:var(--line);border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--petrol),var(--petrol-l));transition:width .2s}
#lab-live{max-width:280px;border-radius:12px;border:1px solid var(--line)}
.lab-stills{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0 0 24px}
.lab-stills figure{margin:0}.lab-stills canvas{width:100%;border-radius:10px;border:1px solid var(--line)}
.lab-stills figcaption{font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:6px}
@media (max-width:720px){.lab-stills{grid-template-columns:repeat(3,1fr)}}
.method{color:var(--muted)}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:28px clamp(16px,4vw,48px);font:12px var(--mono);letter-spacing:.2em}
@media (max-width:600px){.gradebig{flex-direction:column;align-items:flex-start;gap:6px}.gb-letter{text-align:left;min-width:0}.hero-fig img{aspect-ratio:4/5}}