:root{
  --void:#070B14; --deep:#0D1322; --rise:#162034; --edge:#233250;
  --gold:#D9A93C; --gold-soft:#F0CE7A; --gold-dim:#7A5F20;
  --ice:#93B4DA; --text:#E9EDF5; --muted:#91A0BA; --faint:#63728C;
  --ok:#5FBF8F;
  --col:1120px;
  --f-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--void); color:var(--text);
  font-family:var(--f-body); font-size:18px; line-height:1.72; -webkit-font-smoothing:antialiased}
#sky{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 72% 8%, rgba(217,169,60,.10), transparent 62%),
    radial-gradient(900px 620px at 12% 22%, rgba(80,120,190,.14), transparent 60%),
    radial-gradient(1400px 900px at 50% 118%, rgba(147,180,218,.09), transparent 60%),
    linear-gradient(178deg,#060912 0%,#070B14 42%,#080D18 100%)}
#stars{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.9}
#grain{position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>")}
.wrap{position:relative; z-index:3; max-width:var(--col); margin:0 auto; padding:0 28px}

h1,h2,h3{font-family:var(--f-display); font-weight:600; text-wrap:balance; margin:0; letter-spacing:.01em}
h1{font-size:clamp(3.1rem,8.2vw,5.1rem); line-height:1.04}
h2{font-size:clamp(2.15rem,5.4vw,2.9rem); line-height:1.18}
h3{font-size:1.3rem; font-family:var(--f-body); font-weight:600; line-height:1.4}
p{margin:0}
.lede{font-size:clamp(1.18rem,2.7vw,1.34rem); color:#C6D0E2; max-width:64ch; line-height:1.72}
.eyebrow{font-family:var(--f-mono); font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 14px}
.muted{color:var(--muted)} .small{font-size:.98rem; line-height:1.72}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
a{color:var(--gold-soft)}

header{position:relative; z-index:4; border-bottom:1px solid rgba(35,50,80,.6);
  background:rgba(7,11,20,.72); backdrop-filter:blur(9px); position:sticky; top:0}
.bar{max-width:var(--col); margin:0 auto; padding:16px 28px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.mark{font-family:var(--f-display); font-size:1.7rem; font-weight:600; letter-spacing:.06em;
  color:var(--text); text-decoration:none}
.mark span{color:var(--gold)}
.tag{font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
nav.main{margin-left:auto; display:flex; gap:22px; flex-wrap:wrap}
nav.main a{font-size:.98rem; color:var(--muted); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:3px}
nav.main a:hover,nav.main a:focus-visible{color:var(--text); border-bottom-color:var(--gold)}
nav.main a[aria-current="page"]{color:var(--gold-soft); border-bottom-color:var(--gold)}

.hero{padding:104px 0 12px}
.rule{height:1px; background:linear-gradient(90deg,var(--gold),rgba(217,169,60,0) 72%); margin:34px 0 30px; max-width:520px}
section{padding:96px 0; border-top:1px solid rgba(35,50,80,.5)}
section:first-of-type{border-top:none}
.head{display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:42px}

.scores{display:grid; grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); gap:18px; margin:52px 0 0}
.score{background:linear-gradient(163deg,rgba(22,32,52,.82),rgba(13,19,34,.72));
  border:1px solid var(--edge); border-top:1px solid rgba(217,169,60,.4);
  padding:26px 24px; display:flex; flex-direction:column; gap:9px}
.score .v{font-family:var(--f-mono); font-size:2.35rem; font-weight:500; color:var(--gold-soft); line-height:1; font-variant-numeric:tabular-nums}
.score .k{font-size:.95rem; color:var(--muted); line-height:1.58}

/* ---- chart: straight plane, extruded bars, no horizontal scroll ---- */
.chart{padding:4px 0}
.plane{display:flex; flex-direction:column; gap:11px}
.row{display:grid; grid-template-columns:minmax(120px,206px) 1fr 62px; align-items:center; gap:14px}
.row .name{font-size:.98rem; color:#CBD5E6; text-align:right; line-height:1.34}
.track{position:relative; height:32px; background:linear-gradient(90deg,rgba(35,50,80,.32),rgba(35,50,80,.07));
  border-left:1px solid var(--edge)}
.b{position:relative; height:100%;
  background:linear-gradient(178deg,var(--gold-soft) 0%,var(--gold) 48%,#A97F22 100%);
  box-shadow:0 8px 20px -12px rgba(217,169,60,.55)}
.b::before{content:""; position:absolute; left:3px; right:-3px; top:-3px; height:3px;
  background:linear-gradient(90deg,rgba(255,235,182,.9),rgba(240,206,122,.6))}
.b::after{content:""; position:absolute; top:-3px; right:-3px; width:3px; height:100%;
  background:linear-gradient(178deg,#C79A2E,#6E5218)}
.b.alt{background:linear-gradient(178deg,#B9CFEA 0%,var(--ice) 48%,#5E7DA5 100%); box-shadow:0 8px 20px -12px rgba(147,180,218,.5)}
.b.alt::before{background:linear-gradient(90deg,rgba(220,235,252,.9),rgba(147,180,218,.6))}
.b.alt::after{background:linear-gradient(178deg,#88A8CF,#44597A)}
.row .val{font-family:var(--f-mono); font-size:1.05rem; color:var(--gold-soft); font-variant-numeric:tabular-nums}
.row.is-alt .val{color:var(--ice)}
.axis{display:grid; grid-template-columns:minmax(120px,206px) 1fr 62px; gap:14px; margin-top:14px}
.axis .t{display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.84rem; color:var(--faint)}
.legend{display:flex; gap:20px; flex-wrap:wrap; margin-top:22px; font-size:.95rem; color:var(--muted)}
.legend i{display:inline-block; width:11px; height:11px; margin-right:7px; vertical-align:-1px}
.sw-gold{background:var(--gold)} .sw-ice{background:var(--ice)}

.tblwrap{overflow-x:auto; margin-top:6px}
table{border-collapse:collapse; width:100%; min-width:520px; font-size:1rem}
th,td{text-align:left; padding:15px 16px; border-bottom:1px solid rgba(35,50,80,.55)}
th{font-family:var(--f-mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:500}
td.n{font-family:var(--f-mono); text-align:right; font-variant-numeric:tabular-nums; color:var(--gold-soft)}
td.d{font-family:var(--f-mono); text-align:right; font-variant-numeric:tabular-nums; color:#C6D0E2}
tbody tr:hover{background:rgba(22,32,52,.5)}

.duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:22px}
.panel{background:linear-gradient(168deg,rgba(22,32,52,.7),rgba(13,19,34,.6));
  border:1px solid var(--edge); padding:34px 32px; display:flex; flex-direction:column; gap:17px}
.panel .num{font-family:var(--f-mono); font-size:.8rem; letter-spacing:.2em; color:var(--gold-dim)}
.panel ul{margin:4px 0 0; padding-left:18px; color:var(--muted); font-size:1rem; line-height:1.82}
.panel li::marker{color:var(--gold-dim)}

.checks{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.check{display:flex; gap:14px; align-items:flex-start; padding:22px 24px;
  background:rgba(13,19,34,.55); border:1px solid rgba(35,50,80,.7)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ok); margin-top:8px; flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(95,191,143,.16)}
.check b{font-weight:600; font-size:1.04rem; display:block; margin-bottom:6px}
.check span{font-size:.97rem; color:var(--muted); line-height:1.7}

/* ---- context window ---- */
.ctx{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:10px}
.win{border:1px solid var(--edge); background:rgba(13,19,34,.6); padding:26px 24px}
.win .from{font-family:var(--f-mono); font-size:.9rem; color:var(--faint)}
.win .to{font-family:var(--f-mono); font-size:2.15rem; color:var(--gold-soft); line-height:1.1; margin:5px 0 2px; font-variant-numeric:tabular-nums}
.win .lbl{font-size:.95rem; color:var(--muted)}
.arrow{color:var(--gold-dim); margin:0 6px}

/* ---- form ---- */
form{display:grid; gap:16px; max-width:640px; margin-top:8px}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
label{display:flex; flex-direction:column; gap:8px; font-size:.95rem; color:var(--muted)}
input,select,textarea{font-family:var(--f-body); font-size:1.05rem; color:var(--text);
  background:rgba(7,11,20,.7); border:1px solid var(--edge); padding:15px 16px; border-radius:2px}
textarea{min-height:132px; resize:vertical; line-height:1.6}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold-dim)}
button{font-family:var(--f-body); font-weight:600; font-size:1.06rem; color:#1A1305;
  background:linear-gradient(178deg,var(--gold-soft),var(--gold)); border:none; padding:17px 34px;
  cursor:pointer; justify-self:start; border-radius:2px}
button:hover{filter:brightness(1.08)}
.note{font-size:.93rem; color:var(--faint); line-height:1.74}
.status{font-size:1rem; padding:12px 14px; border:1px solid var(--edge); background:rgba(13,19,34,.7)}
.status.ok{border-color:rgba(95,191,143,.5); color:#BFE6D2}
.status.err{border-color:rgba(217,169,60,.5); color:var(--gold-soft)}

a.mail{font-family:var(--f-mono); font-size:1rem; color:var(--gold-soft); text-decoration:none;
  border-bottom:1px solid rgba(217,169,60,.45); padding-bottom:3px}
a.mail:hover{color:#fff; border-bottom-color:var(--gold)}
.cta{display:flex; gap:32px; flex-wrap:wrap; align-items:flex-end; justify-content:space-between}
footer{position:relative; z-index:3; border-top:1px solid rgba(35,50,80,.5); padding:26px 0 44px; margin-top:20px}
.fin{max-width:var(--col); margin:0 auto; padding:0 28px; display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap; font-size:.78rem; color:var(--faint)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important} html{scroll-behavior:auto}}
@media (max-width:700px){
  .row,.axis{grid-template-columns:96px 1fr 58px; gap:10px}
  .row .name{font-size:.88rem; line-height:1.3}
  .row .val{font-size:.98rem}
  .f2{grid-template-columns:1fr}
  .hero{padding:64px 0 8px} section{padding:72px 0}
  .wrap{padding:0 22px}
  .bar{padding:16px 22px}
  nav.main{gap:16px}
  .panel{padding:28px 24px}
}