@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-display:swap;src:url("/fonts/archivo-latin-variable.woff2") format("woff2")} @font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/space-mono-latin-400.woff2") format("woff2")} @font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/space-mono-latin-700.woff2") format("woff2")} :root{ --ink:#17130A; --ink-2:#2A2313; --paper:#FAF1D3; --paper-2:#FFFBEE; --paper-3:#F5E7B4; --volt:#FFD400; --volt-hot:#FFE24D; --volt-deep:#F5C200; --gold:#E3A008; --gold-deep:#B87A05; --muted:#6A5F42; --muted-y:#5A4E24; --dim:#8A7E5C; --line:rgba(23,19,10,0.13); --line-2:rgba(23,19,10,0.24); --line-gold:rgba(184,122,5,0.34); --tick:rgba(23,19,10,0.28); --tick-y:rgba(23,19,10,0.34); --r:14px; --r-sm:8px; --r-pill:999px; --maxw:1200px; --display:"Archivo Expanded","Archivo",system-ui,sans-serif; --body:"Archivo",system-ui,sans-serif; --mono:"Space Mono",ui-monospace,monospace; --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,1,.36,1); --surface-lit:linear-gradient(180deg,#FFFEF8 0%, #FFFBEE 42%, #FBF3DB 100%); --surface-lit-hover:linear-gradient(180deg,#FFFFFB 0%, #FFFCF1 44%, #FBF3DB 100%); --shadow-card: 0 2px 4px -2px rgba(90,60,5,.34), 0 14px 28px -18px rgba(120,80,10,.40), inset 0 1px 0 rgba(255,255,255,.74), inset 0 -1px 0 rgba(184,122,5,.20); --shadow-lift: 0 2px 4px -2px rgba(90,60,5,.38), 0 14px 28px -16px rgba(120,80,10,.42), 0 46px 92px -52px rgba(90,60,5,.55), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(184,122,5,.22); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(1240px 760px at 84% -12%, rgba(255,214,64,0.34), transparent 56%), radial-gradient(1000px 900px at -10% 112%, rgba(184,122,5,0.13), transparent 54%), linear-gradient(180deg, rgba(255,251,238,0.55), transparent 16%); } body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:2; opacity:0.07;mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px; } .page-grid{ position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden; } .page-grid::before{ content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%); width:min(1200px, calc(100% - 48px)); background-image:linear-gradient(90deg, rgba(23,19,10,0.035) 0 1px, transparent 1px); background-size:calc(100%/12) 100%; } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1} a{color:inherit;text-decoration:none} h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-0.01em;text-wrap:balance;line-height:0.98} p{margin:0} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-0.02em} .eyebrow{ font-family:var(--mono);font-size:11.5px;font-weight:700; letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-deep); } .eyebrow.on-y{color:var(--ink)} .mlabel{font-family:var(--body);font-size:13.5px;font-weight:700;color:var(--gold-deep);letter-spacing:-0.005em} ::selection{background:var(--ink);color:var(--volt)} :focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px} .money{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-0.03em;white-space:nowrap} .money .cur{font-size:0.6em;color:var(--gold-deep);position:relative;top:-0.16em;letter-spacing:0;margin-right:0.06em;font-weight:700} .money .int{letter-spacing:-0.03em;font-variant-numeric:tabular-nums} .money .unit{font-size:0.34em;color:var(--muted);letter-spacing:0.08em;margin-left:0.16em;text-transform:none;position:relative;top:-0.02em} .money.on-ink .cur{color:var(--volt-hot)} .money.on-ink .unit{color:#9C906A} .money.on-y .cur{color:var(--ink)} .money.on-y .unit{color:var(--muted-y)} .datum{position:absolute;top:-3px;bottom:-3px;width:0;pointer-events:none;z-index:3} .datum::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--ink)} .datum::after{content:"";position:absolute;top:-4px;left:-3px;width:0;height:0; border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid var(--ink)} .datum .lbl{ position:absolute;top:-16px;left:0;transform:translateX(-50%); font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:0.06em;color:var(--muted-y);white-space:nowrap; } .datum.gold::before{background:var(--gold-deep)} .datum.gold::after{border-top-color:var(--gold-deep)} .crosshairs{ position:absolute;inset:7px;pointer-events:none;z-index:4; background: linear-gradient(var(--tick),var(--tick)) 0 0/10px 1px no-repeat, linear-gradient(var(--tick),var(--tick)) 0 0/1px 10px no-repeat, linear-gradient(var(--tick),var(--tick)) 100% 0/10px 1px no-repeat, linear-gradient(var(--tick),var(--tick)) 100% 0/1px 10px no-repeat, linear-gradient(var(--tick),var(--tick)) 0 100%/10px 1px no-repeat, linear-gradient(var(--tick),var(--tick)) 0 100%/1px 10px no-repeat, linear-gradient(var(--tick),var(--tick)) 100% 100%/10px 1px no-repeat, linear-gradient(var(--tick),var(--tick)) 100% 100%/1px 10px no-repeat; } .crosshairs.on-y{--tick:var(--tick-y)} [data-reveal]{will-change:transform,opacity} html.js [data-reveal]{opacity:0;transform:translateY(16px); transition:opacity 620ms var(--ease), transform 620ms var(--ease); transition-delay:calc(var(--i,0)*70ms)} html.js [data-reveal].in{opacity:1;transform:none} .nav{ position:sticky;top:0;z-index:40; background:rgba(250,241,211,0.82); backdrop-filter:blur(14px) saturate(150%); border-bottom:1px solid var(--line); } .nav-in{ max-width:var(--maxw);margin:0 auto;padding:0 24px; height:66px;display:flex;align-items:center;gap:26px; } .brand{display:flex;align-items:center;gap:11px;flex-shrink:0} .mark{width:34px;height:34px;flex:0 0 auto;display:block} .brand-name{ font-family:var(--display);font-weight:900;font-size:18px; letter-spacing:-0.02em;line-height:1;white-space:nowrap;color:var(--ink); } .brand-name b{color:var(--gold-deep)} .nav-links{display:flex;align-items:center;gap:2px;margin-left:6px} .nav-links a{ font-size:13.5px;font-weight:600;color:var(--muted); padding:8px 12px;border-radius:var(--r-sm);white-space:nowrap; transition:color .16s, background .16s, transform .2s var(--spring); } .nav-links a:hover{color:var(--ink);background:rgba(23,19,10,0.05)} @media(hover:hover){.nav-links a:hover{transform:translateY(-1px)}} .nav-right{margin-left:auto;display:flex;align-items:center;gap:12px} .search{ display:flex;align-items:center;gap:9px; background:var(--surface-lit);border:1px solid var(--line-2); border-radius:var(--r-pill);padding:8px 14px;color:var(--muted); font-size:13px;min-width:210px;transition:border-color .16s, box-shadow .16s; box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 2px rgba(90,60,5,0.08); } .search:hover{border-color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 3px rgba(255,212,0,0.25)} .search svg{flex:0 0 auto} .search kbd{ margin-left:auto;font-family:var(--mono);font-size:10.5px; border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;color:var(--dim);background:var(--paper); } .btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--body);font-weight:700;font-size:14px; padding:11px 18px;border-radius:var(--r-pill);border:0;cursor:pointer;white-space:nowrap; background:linear-gradient(180deg,var(--volt-hot),var(--volt) 60%,var(--volt-deep));color:var(--ink); box-shadow: 0 0 0 1px var(--gold-deep) inset, 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 18px -8px rgba(227,160,8,.7), 0 0 24px -6px rgba(255,212,0,.5); transition:box-shadow 160ms ease; } .btn.ink{ background:var(--ink);color:var(--volt); box-shadow: 0 0 0 1px rgba(23,19,10,0.9) inset, inset 0 1px 0 rgba(255,212,0,.28), 0 12px 26px -12px rgba(23,19,10,0.6); } .btn.ghost{background:transparent;color:var(--ink);box-shadow:0 0 0 1px var(--line-2) inset} .btn.ghost:hover{box-shadow:0 0 0 1px var(--gold) inset;background:rgba(255,212,0,0.14)} @media(hover:hover){ .btn{transition:transform 260ms var(--spring), box-shadow 200ms ease} .btn:hover{transform:translateY(-2px) scale(1.015); box-shadow:0 0 0 1px var(--gold-deep) inset, 0 1px 0 rgba(255,255,255,.5) inset, 0 16px 30px -12px rgba(227,160,8,.9), 0 0 30px -6px rgba(255,212,0,.62);will-change:transform} .btn.ink:hover{box-shadow:0 0 0 1px var(--ink) inset, inset 0 1px 0 rgba(255,212,0,.4), 0 16px 30px -12px rgba(23,19,10,0.7), 0 0 30px -6px rgba(255,212,0,.5)} .btn:active{transform:translateY(0) scale(.97);transition:transform 90ms ease-out} } .ticker{ background:var(--ink); border-bottom:1px solid rgba(255,212,0,0.18); overflow:hidden;position:relative;z-index:1; } .ticker-track{ display:flex;gap:0;white-space:nowrap; animation:marquee 42s linear infinite;will-change:transform; } .ticker:hover .ticker-track{animation-play-state:paused} .tk{ display:inline-flex;align-items:center;gap:12px; padding:11px 26px;font-size:12.5px;color:#B7A97F;flex:0 0 auto; border-right:1px solid rgba(255,212,0,0.12); } .tk b{color:var(--paper);font-weight:600} .tk .cost{font-family:var(--mono);font-weight:700;color:var(--volt);font-variant-numeric:tabular-nums} .tk .dot{width:6px;height:6px;border-radius:50%;background:var(--volt);box-shadow:0 0 9px var(--volt);flex:0 0 auto} .tk.lead .dot{animation:feed 2s ease-in-out infinite} .tk.lead .cost{animation:feedText 2s ease-in-out infinite} @keyframes feed{0%,100%{transform:scale(1);box-shadow:0 0 6px var(--volt)}50%{transform:scale(1.5);box-shadow:0 0 14px var(--volt)}} @keyframes feedText{0%,100%{opacity:.72}50%{opacity:1}} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} .hero{ position:relative; width:100%; background: radial-gradient(1100px 620px at 74% 8%, var(--volt-hot), transparent 62%), linear-gradient(176deg, var(--volt) 0%, var(--volt-deep) 78%, #EFBB00 100%); border-bottom:1px solid var(--gold-deep); padding:92px 0 64px;overflow:hidden; box-shadow:0 24px 40px -30px rgba(120,80,10,.5); } .hero::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:0.5; background-image: linear-gradient(rgba(23,19,10,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(23,19,10,0.05) 1px, transparent 1px); background-size:52px 52px; mask-image:radial-gradient(120% 90% at 60% 30%, #000 40%, transparent 82%); } .hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;z-index:0; background:linear-gradient(180deg, transparent 0%, rgba(184,122,5,0.18) 100%); } .hero-grid{display:grid;grid-template-columns:1.2fr 0.88fr;gap:56px;align-items:center;position:relative;z-index:1} .hero-copy{position:relative} .hero-tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px} .hero-tag .pulse{width:8px;height:8px;border-radius:50%;background:var(--ink);position:relative} .hero-tag .pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ink);animation:ring 2.2s ease-out infinite} @keyframes ring{0%{transform:scale(0.6);opacity:.8}100%{transform:scale(2.2);opacity:0}} h1.hero-h{ font-family:var(--display);font-weight:900;color:var(--ink); font-size:clamp(44px,6.6vw,88px);letter-spacing:-0.045em; line-height:0.96;margin-bottom:26px;text-wrap:balance; } h1.hero-h .hl{ color:var(--volt);background:var(--ink); padding:0.04em 0.18em 0.06em;border-radius:8px;letter-spacing:-0.045em;white-space:nowrap; box-decoration-break:clone;-webkit-box-decoration-break:clone; box-shadow:inset 0 0 0 1.5px rgba(255,212,0,0.22); } .lede{font-size:clamp(15.5px,1.5vw,18px);color:var(--ink-2);max-width:46ch;margin-bottom:30px;text-wrap:pretty;font-weight:500} .lede b{color:var(--ink);font-weight:700} .hero-search{ display:flex;gap:10px;background:var(--surface-lit);border:1px solid var(--ink); border-radius:var(--r-pill);padding:8px 8px 8px 18px;max-width:470px;align-items:center; box-shadow:0 18px 40px -24px rgba(23,19,10,0.5), inset 0 1px 0 rgba(255,255,255,0.75); } .hero-search input{ flex:1;background:transparent;border:0;color:var(--ink); font-family:var(--body);font-size:15px;font-weight:500;outline:none;min-width:0; } .hero-search input::placeholder{color:var(--muted-y)} .hero-meta{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap;align-items:flex-end} .hero-meta .m{display:flex;flex-direction:column;gap:2px} .hero-meta .m .k{ font-family:var(--mono);font-weight:700;font-size:clamp(28px,3.2vw,33px);color:var(--ink); font-variant-numeric:tabular-nums;letter-spacing:-0.03em;line-height:1; } .hero-meta .m .k .int{font-variant-numeric:tabular-nums;display:inline-block} .hero-meta .m .k .cur{font-size:0.5em;color:var(--gold-deep);position:relative;top:-0.34em;margin-right:0.04em} .hero-meta .m .l{font-size:11px;color:var(--muted-y);text-transform:uppercase;letter-spacing:0.1em;font-weight:600;margin-top:4px} .src-chip{ font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.1em; text-transform:uppercase;color:var(--ink); border:1px solid var(--ink);border-radius:var(--r-pill);padding:6px 12px;align-self:flex-end; } .hero-coord{ font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--muted-y); margin-top:30px;display:inline-flex;gap:18px;flex-wrap:wrap; } .hero-coord span b{color:var(--ink);font-weight:700} .gauge-mount{position:relative;align-self:end} .gauge-mount::after{ content:"";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%); width:88%;height:70%;border-radius:50%;z-index:0;pointer-events:none;filter:blur(26px); background:radial-gradient(closest-side, rgba(255,212,0,.55), transparent 70%); } .gauge-card{ position:relative;z-index:1; background:linear-gradient(180deg,#FFD91F,var(--volt-deep) 82%); border:2px solid var(--ink);border-radius:var(--r); padding:22px 22px 18px;overflow:hidden; --mx:70%;--my:-20%; box-shadow:0 46px 92px -50px rgba(23,19,10,0.6), inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(184,122,5,.3); } .gauge-card::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(460px 260px at var(--mx) var(--my), rgba(255,226,77,0.7), transparent 60%); } .gc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px;position:relative;z-index:5} .gc-top .label{font-size:12px;color:var(--muted-y);font-weight:600} .gc-top .label b{display:block;color:var(--ink);font-weight:800;font-size:14px;margin-top:2px;font-family:var(--display);letter-spacing:-0.01em} .chip{ font-family:var(--mono);font-size:11px;font-weight:700; padding:5px 10px;border-radius:var(--r-pill); background:var(--ink);color:var(--volt);white-space:nowrap; } .gauge-wrap{ position:relative;width:100%;max-width:344px;margin:6px auto 0;z-index:5; background:var(--surface-lit);border:1px solid var(--ink); border-radius:var(--r);padding:8px 8px 4px; box-shadow:inset 0 2px 10px rgba(90,60,5,0.16), inset 0 1px 0 rgba(255,255,255,.7); padding-bottom:6px; } #gaugeSvg{display:block;transition:transform .3s var(--ease)} .gauge-read{position:static;text-align:center;margin:8px auto 0} .gauge-read .big{ font-family:var(--mono);font-weight:700;font-size:clamp(44px,7.4vw,58px); color:var(--ink);line-height:1;letter-spacing:-0.02em; text-shadow:0 1px 0 rgba(255,255,255,.5); } .gauge-read .big .cur{font-size:0.5em;color:var(--gold-deep);position:relative;top:-0.30em;margin-right:0.04em} .gauge-read .big .unit{font-size:0.3em;color:var(--muted);letter-spacing:0.08em;margin-left:0.12em} .gauge-read .yr{font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:0.08em;text-transform:uppercase;font-family:var(--body);font-weight:600} .gc-foot{display:flex;justify-content:space-between;gap:12px;margin-top:14px;border-top:1px solid var(--line-2);padding-top:14px;position:relative;z-index:5} .gc-foot .f{flex:1} .gc-foot .f .v{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .gc-foot .f .v .int{font-variant-numeric:tabular-nums;display:inline-block} .gc-foot .f .v.good{color:var(--gold-deep)} .gc-foot .f .t{font-size:10px;color:var(--muted-y);text-transform:uppercase;letter-spacing:0.06em;margin-top:1px;font-weight:600} .kpi-rail{ width:100%; border-bottom:1px solid var(--line-2); background:linear-gradient(180deg,#FFFCF2,#F3E4AF); } .kpi-inner{ max-width:var(--maxw);margin:0 auto;padding:18px 24px; display:grid;grid-template-columns:repeat(6,1fr);gap:1px; position:relative; } .kpi{ display:flex;flex-direction:column;gap:7px;padding:8px 16px;position:relative; border-left:1px solid var(--line); } .kpi:first-child{border-left:0} .kpi .kl{font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted-y)} .kpi .kv{font-family:var(--mono);font-weight:700;font-size:22px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-0.03em;line-height:1} .kpi .kv .cur{font-size:0.5em;color:var(--gold-deep);position:relative;top:-0.32em;margin-right:0.03em} .kpi .kv .unit{font-size:0.42em;color:var(--muted);letter-spacing:0.06em;margin-left:0.1em;font-weight:700} .kpi .kbar{height:4px;border-radius:var(--r-pill);background:#E7D8A6;overflow:hidden;box-shadow:inset 0 1px 1px rgba(90,60,5,.16)} .kpi .kbar>i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--gold),var(--gold-deep));transform-origin:left} html.js .kpi .kbar>i{transform:scaleX(0);transition:transform 900ms var(--ease);transition-delay:calc(var(--i,0)*80ms)} html.js .kpi-rail.grow .kbar>i{transform:scaleX(1)} section.block{padding:72px 0;position:relative} section.block.tight{padding:48px 0} section.block.breathe{padding:112px 0} .sec-head{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:24px;margin-bottom:34px} .sec-idx{align-self:start;display:flex;flex-direction:column;gap:2px} .sec-idx .idxn{ font-family:var(--display);font-weight:800;font-size:56px;line-height:0.8; color:transparent;-webkit-text-stroke:1.4px rgba(184,122,5,0.42);letter-spacing:-0.04em; } .sec-idx .idxc{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:0.12em;color:var(--dim);text-transform:uppercase} .sec-idx .idxs{display:flex;gap:3px;margin-top:5px} .sec-idx .idxs i{width:8px;height:2px;background:var(--line-2);display:block} .sec-idx .idxs i:first-child{background:var(--gold-deep)} .sec-head h2{font-size:clamp(26px,3.4vw,40px);letter-spacing:-0.025em;color:var(--ink)} .sec-main p{color:var(--muted);font-size:14.5px;max-width:44ch;margin-top:10px;text-wrap:pretty} .sec-readout{text-align:right;align-self:end;line-height:1.2} .sec-readout .rv{font-family:var(--mono);font-weight:700;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-0.02em;white-space:nowrap} .sec-readout .rv .cur{font-size:0.55em;color:var(--gold-deep);position:relative;top:-0.28em} .sec-readout .rl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;font-weight:700;margin-top:2px} .sec-head.right{grid-template-columns:auto 1fr auto;text-align:right} .sec-head.right .sec-idx{order:3;align-items:flex-end} .sec-head.right .sec-main{order:2} .sec-head.right .sec-readout{order:1;text-align:left} .sec-head.right .sec-main p{margin-left:auto} .reg-divider{ position:relative;z-index:1;width:100%;height:1px; background:var(--line-2);display:flex;align-items:center;justify-content:center; margin-top:0;margin-bottom:0; } .reg-divider::before,.reg-divider::after{content:"";position:absolute;top:-4px;height:9px;width:1px;background:var(--tick)} .reg-divider::before{left:calc(50% - 600px)} .reg-divider::after{left:calc(50% + 600px)} .rd-chip{ position:relative;background:var(--paper);padding:0 16px; font-family:var(--mono);font-size:10px;letter-spacing:0.18em;color:var(--gold-deep);text-transform:uppercase;font-weight:700; } .calc-shell{display:grid;grid-template-columns:minmax(0,9fr) 3fr;gap:24px;align-items:stretch} .instr-rail{ display:flex;flex-direction:column;gap:14px;padding:22px 4px 8px; border-left:1px solid var(--line-2);padding-left:22px;position:relative; } .instr-rail.left{border-left:0;border-right:1px solid var(--line-2);padding-left:4px;padding-right:22px;order:-1} .instr-rail .rail-idx{ font-family:var(--display);font-weight:800;font-size:52px;line-height:0.8; color:transparent;-webkit-text-stroke:1.4px rgba(184,122,5,0.42);letter-spacing:-0.04em; } .instr-rail .rail-leg{display:flex;flex-direction:column;gap:9px;margin-top:6px} .instr-rail .leg{display:flex;flex-direction:column;gap:2px;padding-bottom:9px;border-bottom:1px dashed var(--line)} .instr-rail .leg:last-child{border-bottom:0} .instr-rail .leg .lv{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-0.02em} .instr-rail .leg .lv .cur{color:var(--gold-deep)} .instr-rail .leg .lk{font-size:10px;color:var(--muted-y);text-transform:uppercase;letter-spacing:0.08em;font-weight:700} .calc{ background:var(--surface-lit); border:2px solid var(--ink);border-radius:var(--r); display:grid;grid-template-columns:1fr 1fr;overflow:hidden;position:relative; box-shadow:var(--shadow-lift); } .calc-controls{padding:34px;border-right:1px solid var(--line-2);position:relative;z-index:5;background:var(--surface-lit)} .calc-controls .mlabel{margin-bottom:8px;display:block} .calc-controls h3{font-size:26px;margin-bottom:6px;letter-spacing:-0.02em;color:var(--ink)} .calc-controls .sub{color:var(--muted);font-size:13.5px;margin-bottom:26px} .field{margin-bottom:22px} .field label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:10px;font-weight:700} .field label .val{font-family:var(--mono);font-size:14px;color:var(--gold-deep);font-weight:700;text-transform:none;letter-spacing:0} select.sel{ width:100%;appearance:none;background:var(--paper);color:var(--ink); border:1px solid var(--line-2);border-radius:var(--r-sm); padding:13px 42px 13px 14px;font-family:var(--body);font-size:15px;font-weight:600;cursor:pointer; box-shadow:inset 0 1px 2px rgba(90,60,5,0.10); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B87A05' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat;background-position:right 14px center; } select.sel:focus{outline:none;border-color:var(--ink)} input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:var(--r-pill); background:#EBDCA8;outline:none;cursor:pointer; box-shadow:inset 0 1px 2px rgba(90,60,5,0.18); } input[type=range].filled{background:linear-gradient(90deg,var(--gold) var(--fill,50%), #EBDCA8 var(--fill,50%))} input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:22px;height:22px;border-radius:50%; background:var(--volt);border:3px solid var(--ink);cursor:pointer; box-shadow:0 4px 10px -2px rgba(227,160,8,0.7);transition:transform .12s var(--spring); } input[type=range]::-moz-range-thumb{ width:20px;height:20px;border-radius:50%;background:var(--volt); border:3px solid var(--ink);cursor:pointer;transition:transform .12s var(--spring); } @media(hover:hover){ input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)} input[type=range]:active::-moz-range-thumb{transform:scale(1.15)} } .rangecap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-top:8px} .calc-readout{ padding:34px;display:flex;flex-direction:column;justify-content:center; position:relative;overflow:hidden;z-index:5; background: radial-gradient(460px 320px at 100% 0%, var(--volt-hot), transparent 62%), linear-gradient(180deg, var(--volt), var(--volt-deep)); } .calc-readout .mlabel{margin-bottom:14px;display:block;color:var(--ink)} .readout-num{ font-family:var(--mono);font-weight:700;line-height:0.9;letter-spacing:-0.04em; font-size:clamp(60px,10vw,102px);color:var(--ink); text-shadow:0 0 22px rgba(255,212,0,.42); } .readout-num .cur{font-size:0.4em;color:var(--gold-deep);position:relative;top:-0.30em;margin-right:0.04em} .readout-num .int{font-variant-numeric:tabular-nums;display:inline-block;min-width:2ch;text-align:left} .readout-num .unit{font-size:0.22em;color:var(--muted-y);letter-spacing:0.08em} .readout-unit{font-family:var(--mono);font-size:14px;color:var(--muted-y);margin-top:6px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700} .readout-cap{font-family:var(--mono);font-size:9px;color:var(--muted-y);letter-spacing:0.1em;text-transform:uppercase;font-weight:700;margin-top:16px} .meter-wrap{position:relative;margin:14px 0 10px} .meter-flag{position:absolute;top:-30px;left:31%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;transition:left .5s var(--ease);z-index:6} html.js .meter-flag{transition:left .5s var(--ease)} .mf-chip{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--volt);background:var(--ink);border-radius:5px;padding:2px 7px;font-variant-numeric:tabular-nums;white-space:nowrap;transition:transform .35s var(--spring)} .mf-chip.bump{transform:scale(1.16)} .mf-tri{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink);margin-top:-1px} .meter-track{position:relative} .meter{ height:16px;border-radius:var(--r-pill);overflow:hidden;position:relative;border:1px solid var(--ink); background: repeating-linear-gradient(90deg, rgba(23,19,10,0.24) 0 1px, transparent 1px, transparent 25%), repeating-linear-gradient(90deg, rgba(23,19,10,0.12) 0 1px, transparent 1px, transparent 12.5%), #EFC93A; } .meter-fill{ height:100%;border-radius:var(--r-pill); background:var(--ink); width:31%;transition:width .5s var(--ease), background .3s ease, box-shadow .4s ease; } html.js .meter-fill{width:0} .meter-fill.over{background:linear-gradient(90deg,var(--gold),var(--gold-deep))} .meter-fill.ring{box-shadow:0 0 0 3px rgba(255,212,0,.5)} .meter-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--muted-y);margin-top:8px;font-weight:700} .calc-note{margin-top:22px;font-size:12px;color:var(--muted-y);display:flex;gap:9px;align-items:flex-start;font-weight:500} .calc-note svg{flex:0 0 auto;margin-top:1px} .breakdown{display:flex;gap:8px;margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--muted-y);flex-wrap:wrap;align-items:center;font-weight:700} .breakdown .eq{color:var(--gold-deep)} .breakdown b{color:var(--ink);font-weight:700} .breakdown .cost b{color:var(--ink)} .cat-band{ width:100%; border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2); background:linear-gradient(180deg,#FFFCF2,#F3E4AF); padding:72px 0; } .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-flow:dense} .cat-head{grid-column:span 1;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:6px 4px} .cat-head h2{font-size:clamp(24px,3vw,32px);letter-spacing:-0.025em;color:var(--ink)} .cat-head .link{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--gold-deep);display:inline-flex;align-items:center;gap:7px} .cat-head .link:hover{color:var(--ink)} .cat{ background:var(--surface-lit);border:1px solid var(--line-2);border-radius:var(--r); padding:20px;display:flex;flex-direction:column;gap:14px;min-height:172px; position:relative;overflow:hidden;box-shadow:var(--shadow-card); transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease; } .cat .ic{width:38px;height:38px;color:var(--gold-deep)} .cat .cbody{margin-top:auto} .cat .cname{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-0.01em;color:var(--ink)} .cat .cmeta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} .cat .cmeta .from{color:var(--gold-deep);font-weight:700} .cat .arrow{position:absolute;top:18px;right:18px;color:var(--dim);transition:color .18s, transform .18s} .spark{display:flex;align-items:flex-end;gap:3px;height:22px;margin-top:2px} .spark i{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--gold),var(--gold-deep));min-width:4px} .cat .delta{font-family:var(--mono);font-size:9.5px;font-weight:700;color:var(--muted-y);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:2px 7px;align-self:flex-start} .cat .cheapest{font-family:var(--mono);font-size:10px;color:var(--muted-y);font-weight:700} .cat .cheapest b{color:var(--ink)} .cat.flag{grid-column:span 2;grid-row:span 2;min-height:auto;gap:16px} .cat.flag .cname{font-size:20px} .cat.flag .ic{width:44px;height:44px} .mini-lb{display:flex;flex-direction:column;gap:0;margin-top:auto;border-top:1px solid var(--line-2)} .mini-lb .mrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)} .mini-lb .mrow:last-child{border-bottom:0} .mini-lb .mrk{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);width:18px;height:18px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:5px;font-variant-numeric:tabular-nums} .mini-lb .mrow.best .mrk{background:var(--ink);color:var(--volt);border-color:var(--ink)} .mini-lb .mnm{font-size:12px;font-weight:600;color:var(--ink)} .mini-lb .mcost{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums} .mini-lb .mcost .cur{font-size:0.72em;color:var(--gold-deep);position:relative;top:-0.16em} @media(hover:hover){ .cat{transition:transform 240ms var(--spring), border-color 180ms ease, box-shadow 180ms ease, background 180ms} .cat:hover{border-color:var(--ink);transform:translateY(-4px);background:var(--surface-lit-hover); box-shadow:0 2px 4px -2px rgba(90,60,5,.4), 0 30px 50px -30px rgba(90,60,5,0.5), inset 0 1px 0 rgba(255,255,255,.8);will-change:transform} .cat:hover .ic{color:var(--ink)} .cat:hover .arrow{color:var(--ink);transform:translate(2px,-2px)} } .board-shell{ display:grid;grid-template-columns:330px minmax(0,1fr);gap:24px 28px;align-items:start; grid-template-areas:"head board" "aside board"; } .board-headcol{grid-area:head} .board-headcol .lead-idx{ font-family:var(--display);font-weight:800;font-size:56px;line-height:0.8;display:block;margin-bottom:10px; color:transparent;-webkit-text-stroke:1.4px rgba(184,122,5,0.42);letter-spacing:-0.04em; } .board-headcol h2{font-size:clamp(26px,3vw,36px);letter-spacing:-0.025em;margin-bottom:12px;color:var(--ink)} .board-headcol p{color:var(--muted);font-size:14px;text-wrap:pretty} .board{ grid-area:board; background:var(--surface-lit);border:2px solid var(--ink);border-radius:var(--r);overflow:hidden;position:relative; box-shadow:var(--shadow-lift); } .board table{width:100%;border-collapse:collapse} .board-h{ display:grid;grid-template-columns:44px 1fr 84px 128px;gap:14px; padding:14px 22px;border-bottom:1px solid var(--line-2); font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);font-weight:700; background:linear-gradient(180deg,#FFFCF2,#F3E4AF); } .board-h .h-cost{text-align:right} .board-axis{ display:grid;grid-template-columns:44px 1fr 84px 128px;gap:14px; padding:8px 22px;border-bottom:1px solid var(--line);align-items:center; } .board-axis .ax-scale{grid-column:4;position:relative;height:14px} .board-axis .ax-scale .a{position:absolute;top:0;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:0.04em;color:var(--muted-y)} .board-axis .ax-scale .a.lo{left:0} .board-axis .ax-scale .a.hi{right:0} .board-axis .ax-scale .a.med{left:74%;transform:translateX(-50%);color:var(--ink)} .row{ display:grid;grid-template-columns:44px 1fr 84px 128px;gap:14px;align-items:center; padding:16px 22px;border-bottom:1px solid var(--line);transition:background .16s, transform .12s var(--spring); } .row:last-child{border-bottom:0} .row:hover{background:rgba(255,212,0,0.10)} @media(hover:hover){.row:active{transform:scale(.99);background:rgba(255,212,0,0.18)}} .row.top{background:linear-gradient(90deg,var(--volt),var(--volt-deep) 70%)} .row.top:hover{background:linear-gradient(90deg,var(--volt-hot),var(--volt) 70%)} .rank{ font-family:var(--mono);font-weight:700;font-size:15px;color:var(--muted); width:30px;height:30px;display:grid;place-items:center;border-radius:8px; border:1px solid var(--line-2);font-variant-numeric:tabular-nums;background:var(--paper); } .row.top .rank{background:var(--ink);color:var(--volt);border-color:var(--ink)} .rname{font-weight:700;font-size:14.5px;color:var(--ink)} .rname .sub{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px;font-weight:400} .row.top .rname .sub{color:var(--muted-y)} .rcost{display:grid;grid-template-columns:0.8em 3ch;column-gap:1px;align-items:baseline;justify-content:end;margin-left:auto;font-family:var(--mono)} .rcost .cur{font-size:12px;color:var(--gold-deep);text-align:right;position:relative;top:-0.06em} .rcost .int{font-weight:700;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;letter-spacing:-0.02em} .row.top .rcost .cur{color:var(--ink)} .scorebar-cell{position:relative} .scorebar{ height:9px;border-radius:var(--r-pill);overflow:visible;position:relative; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(23,19,10,0.16) calc(25% - 1px), rgba(23,19,10,0.16) 25%), #E7D8A6; box-shadow:inset 0 1px 2px rgba(90,60,5,0.16); } .scorebar .fillclip{position:absolute;inset:0;border-radius:var(--r-pill);overflow:hidden} .row.top .scorebar{background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(23,19,10,0.2) calc(25% - 1px), rgba(23,19,10,0.2) 25%), rgba(23,19,10,0.12)} .scorebar>i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--gold),var(--gold-deep)); transform:scaleX(1);transform-origin:left} .row.top .scorebar>i{background:var(--ink)} html.js .scorebar>i{transform:scaleX(0);transition:transform 900ms var(--ease);transition-delay:calc(var(--i,0)*80ms)} html.js .board.grow .scorebar>i{transform:scaleX(1)} .scorebar .median{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:0.75;left:74%} .scorebar .median::after{content:"";position:absolute;top:-4px;left:-2px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid var(--ink)} .row.top .scorebar .median{background:var(--ink);opacity:0.85} .scorebar .median .mlab{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:0.04em;color:var(--muted-y);white-space:nowrap} .board-aside{ grid-area:aside; background:linear-gradient(180deg,var(--volt),var(--volt-deep)); border:2px solid var(--ink);border-radius:var(--r);padding:26px; box-shadow:var(--shadow-lift);position:relative;overflow:hidden; } .board-aside::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;pointer-events:none;filter:blur(30px);background:radial-gradient(closest-side, rgba(255,226,77,.6), transparent 70%)} .board-aside>*{position:relative;z-index:1} .board-aside h3{font-size:22px;margin-bottom:10px;color:var(--ink);letter-spacing:-0.02em} .board-aside p{font-size:13.5px;color:var(--ink-2);margin-bottom:20px;text-wrap:pretty;font-weight:500} .board-aside p b{color:var(--ink)} .stat-stack{display:flex;flex-direction:column;gap:2px;margin-bottom:22px} .stat-stack .s{display:grid;grid-template-columns:1fr auto;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line-2)} .stat-stack .s:last-child{border-bottom:0} .stat-stack .s .n{font-family:var(--mono);font-size:19px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;display:grid;grid-template-columns:0.72em 3ch;column-gap:1px;align-items:baseline;justify-items:end} .stat-stack .s .n .cur{color:var(--gold-deep);font-size:13px;position:relative;top:-0.04em} .stat-stack .s .n .int{min-width:3ch;text-align:right} .stat-stack .s .lb{font-size:12.5px;color:var(--muted-y);font-weight:600} .spec-band{ width:100%; background:linear-gradient(180deg,#FFFCF2,#F3E4AF); border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2); padding:72px 0; } .model-shell{display:grid;grid-template-columns:3fr minmax(0,9fr);gap:24px;align-items:stretch} .model-card{ background:var(--surface-lit); border:2px solid var(--ink);border-radius:var(--r); display:grid;grid-template-columns:320px 1fr;position:relative;overflow:visible; box-shadow:var(--shadow-lift); } .mc-left{padding:32px;order:2;border-left:1px solid var(--line-2);display:flex;flex-direction:column;gap:18px;position:relative;overflow:visible; background:linear-gradient(180deg,var(--volt),var(--volt-deep));border-radius:0 12px 12px 0} .mc-left::after{content:"";position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);width:180px;height:180px;border-radius:50%;pointer-events:none;filter:blur(28px);background:radial-gradient(closest-side, rgba(255,226,77,.6), transparent 70%);z-index:0} .mc-left>*{position:relative;z-index:1} .model-card{grid-template-columns:1fr 320px} .mc-badge{display:inline-flex;width:fit-content;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink);border:1px solid var(--ink);border-radius:var(--r-pill);padding:5px 11px} .score-ring{position:relative;width:210px;height:210px;margin:6px auto 0} .score-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center} .score-center .sc{font-family:var(--mono);font-weight:700;font-size:clamp(72px,8vw,96px);color:var(--ink);line-height:1;letter-spacing:-0.04em;text-shadow:0 0 22px rgba(255,212,0,.42)} .score-center .sc .cur{font-size:0.34em;color:var(--gold-deep);position:relative;top:-0.62em;margin-right:0.02em} .score-center .scl{font-family:var(--mono);font-size:10px;color:var(--muted-y);text-transform:uppercase;letter-spacing:0.14em;margin-top:2px;font-weight:700} .mc-title{font-family:var(--display);font-weight:800;font-size:19px;text-align:center;letter-spacing:-0.01em;color:var(--ink)} .mc-title .t2{display:block;font-family:var(--mono);font-weight:400;font-size:12px;color:var(--muted-y);margin-top:5px;letter-spacing:0;text-wrap:balance} .mc-right{padding:32px;order:1;display:flex;flex-direction:column;gap:22px} .spec-hd{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:2px} .spec-hd .t{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted-y)} .spec-hd .u{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim)} .spec-row{display:flex;flex-direction:column;gap:9px} .spec-row .st{display:flex;justify-content:space-between;align-items:baseline;font-size:13px} .spec-row .st .k{color:var(--muted);font-weight:600} .spec-row .st .v{font-family:var(--mono);font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums} .spec-track{ height:8px;border-radius:var(--r-pill);overflow:visible;position:relative; background: linear-gradient(90deg, rgba(23,19,10,0.14) 0 1px, transparent 1px) 0 0/50% 100%, linear-gradient(90deg, rgba(23,19,10,0.14) 0 1px, transparent 1px) 100% 0/1px 100% no-repeat, #E7D8A6; box-shadow:inset 0 1px 2px rgba(90,60,5,0.16); } .spec-track .tclip{position:absolute;inset:0;border-radius:var(--r-pill);overflow:hidden} .spec-track>i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--gold),var(--gold-deep)); transform:scaleX(1);transform-origin:left} html.js .spec-track>i{transform:scaleX(0);transition:transform 900ms var(--ease);transition-delay:calc(var(--i,0)*120ms)} html.js .model-card.grow .spec-track>i{transform:scaleX(1)} .spec-track .std{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:0.75} .spec-track .std::after{content:"";position:absolute;top:-4px;left:-2px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid var(--ink)} .spec-track .std .lb{position:absolute;top:-15px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:0.04em;color:var(--muted-y);white-space:nowrap} .spec-track .med{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--gold-deep);opacity:0.7} .compare{margin-top:auto;background:var(--ink);border:1px solid var(--ink);border-radius:var(--r-sm);padding:18px 20px;display:flex;align-items:center;gap:16px} .compare .cbig{font-family:var(--mono);font-weight:700;font-size:30px;color:var(--volt);letter-spacing:-0.03em;font-variant-numeric:tabular-nums;text-shadow:0 0 20px rgba(255,212,0,.4)} .compare .cbig .cur{font-size:0.6em;position:relative;top:-0.2em;color:var(--volt-hot)} .compare .ctxt{font-size:13px;color:#C7B98D;text-wrap:pretty} .compare .ctxt b{color:var(--paper);font-weight:700} .trust{background:var(--paper);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)} .trust-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center;padding:112px 0} .formula{ background:var(--ink);border:2px solid var(--ink);border-radius:var(--r); padding:28px;font-family:var(--mono);align-self:start;margin-top:-24px;position:relative; box-shadow:0 46px 92px -52px rgba(90,60,5,.55), inset 0 1px 0 rgba(255,212,0,.14); } .formula .eqn{font-size:clamp(15px,2vw,19px);line-height:1.7;color:#B7A97F} .formula .eqn b{color:var(--paper)} .formula .eqn .amb{color:var(--volt);font-weight:700} .formula .eqres{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,212,0,0.2);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .formula .eqres .r{font-size:34px;font-weight:700;color:var(--volt);letter-spacing:-0.03em;font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(255,212,0,.42)} .formula .eqres .r .cur{font-size:0.55em;color:var(--volt-hot);position:relative;top:-0.30em;margin-right:0.03em} .formula .eqres .r .int{font-variant-numeric:tabular-nums;display:inline-block} .formula .eqres .rl{font-size:12px;color:#9C906A;text-wrap:balance} .trust-copy h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:18px;color:var(--ink)} .trust-list{display:flex;flex-direction:column;gap:16px;margin-top:6px} .ti{display:flex;gap:14px;align-items:flex-start} .ti .tic{width:34px;height:34px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center;background:var(--volt);border:1px solid var(--ink);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)} .ti .th{font-weight:700;font-size:14.5px;margin-bottom:3px;color:var(--ink)} .ti .tp{font-size:13px;color:var(--muted)} .honesty{margin-top:26px;font-size:13px;color:var(--muted);background:var(--surface-lit);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:18px;text-wrap:pretty;position:relative;box-shadow:var(--shadow-card)} .honesty .note-h{display:block;font-family:var(--body);font-weight:700;font-size:13px;color:var(--gold-deep);margin-bottom:5px} .honesty b{color:var(--ink);font-weight:700} footer{padding:56px 0 34px;position:relative;z-index:1;background:var(--ink);color:#B7A97F;margin-top:0} .foot-wrap{width:100%;background:var(--ink)} .foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:36px;border-bottom:1px solid rgba(255,212,0,0.14)} .foot-brand .brand-name{font-size:19px;color:var(--paper)} .foot-brand .brand-name b{color:var(--volt)} .foot-brand p{color:#9C906A;font-size:13px;margin-top:14px;max-width:30ch} .foot-col h4{font-family:var(--body);font-weight:700;font-size:12px;color:var(--paper);margin:0 0 14px;letter-spacing:0.02em} .foot-col a{display:block;color:#9C906A;font-size:13.5px;padding:5px 0;transition:color .15s, transform .2s var(--spring)} .foot-col a:hover{color:var(--volt)} @media(hover:hover){.foot-col a:hover{transform:translateY(-1px)}} .foot-guides{padding:24px 0;border-bottom:1px solid rgba(255,212,0,0.14)} .foot-guides h4{font-family:var(--body);font-weight:700;font-size:12px;color:var(--paper);margin:0 0 12px;letter-spacing:0.02em} .foot-chip{ font-family:var(--body);font-size:12.5px;font-weight:600;color:#9C906A; padding:6px 13px;border-radius:var(--r-pill);border:1px solid rgba(255,212,0,0.18); transition:color .15s,border-color .15s; } .foot-chip:hover{color:var(--volt);border-color:var(--volt)} .foot-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;flex-wrap:wrap} .foot-bot .legal{display:flex;gap:20px;flex-wrap:wrap} .foot-bot .legal a{color:#9C906A;font-size:12.5px} .foot-bot .legal a:hover{color:var(--paper)} .foot-bot .op{font-family:var(--mono);font-size:12px;color:#7E7458} .foot-bot .op b{color:#B7A97F} @media(max-width:1040px){ .board-shell{grid-template-columns:1fr;grid-template-areas:"head" "aside" "board"} .board-headcol{position:static} .calc-shell{grid-template-columns:1fr} .instr-rail{flex-direction:row;flex-wrap:wrap;align-items:center;border-left:0;border-top:1px solid var(--line-2);padding:18px 4px 0} .instr-rail.left{border-right:0;border-top:1px solid var(--line-2);padding:18px 4px 0;order:0} .instr-rail .rail-idx{font-size:40px} .instr-rail .rail-leg{flex-direction:row;flex-wrap:wrap;gap:16px;margin-top:0} .instr-rail .leg{border-bottom:0;padding-bottom:0} .model-shell{grid-template-columns:1fr} } @media(max-width:960px){ .hero{padding:56px 0 48px} .hero-grid{grid-template-columns:1fr;gap:36px} .gauge-mount{align-self:auto;max-width:470px} .calc{grid-template-columns:1fr} .calc-controls{border-right:0;border-bottom:1px solid var(--line-2)} .model-card,.model-card{grid-template-columns:1fr} .mc-left{border-left:0;border-top:1px solid var(--ink);border-radius:0 0 12px 12px;order:2} .mc-right{order:1} .kpi-inner{grid-template-columns:repeat(3,1fr);gap:0} .kpi:nth-child(3n+1){border-left:0} .kpi:nth-child(n+4){border-top:1px solid var(--line);padding-top:16px} .cat-grid{grid-template-columns:repeat(2,1fr)} .cat.flag{grid-column:span 2;grid-row:span 1} .cat-head{grid-column:1/-1} .foot-top{grid-template-columns:1fr 1fr} .reg-divider::before,.reg-divider::after{display:none} } @media(max-width:640px){ .nav-links,.search kbd{display:none} .search{min-width:0;width:42px;padding:8px;justify-content:center} .search span{display:none} .nav-in{gap:14px} section.block,section.block.tight,section.block.breathe{padding:48px 0} .spec-band,.cat-band{padding:48px 0} .trust-grid{padding:56px 0} .board-h,.row,.board-axis{grid-template-columns:34px 1fr 74px} .board-h .c-score,.row .scorebar-cell,.board-axis .ax-scale{display:none} .sec-head{grid-template-columns:1fr;gap:14px} .sec-head .sec-readout{text-align:left} .sec-head.right{grid-template-columns:1fr;text-align:left} .sec-head.right .sec-idx{order:1;align-items:flex-start} .sec-head.right .sec-main{order:2} .sec-head.right .sec-readout{order:3} .sec-head.right .sec-main p{margin-left:0} .foot-top{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} } @media(max-width:430px){ .wrap{padding:0 16px} .nav-in{padding:0 16px;gap:10px} .brand-name{font-size:16px} .nav-right .search{display:none} .nav .btn{padding:9px 13px;font-size:13px} } @media(max-width:360px){ .nav-in{padding:0 12px;gap:8px} .brand-name{font-size:15px} .nav .btn{padding:9px 11px;font-size:12.5px;white-space:nowrap} .cat-grid{grid-template-columns:1fr} .cat.flag{grid-column:span 1} .kpi-inner{grid-template-columns:repeat(2,1fr)} .kpi:nth-child(2n+1){border-left:0} .kpi:nth-child(n+3){border-top:1px solid var(--line);padding-top:16px} .instr-rail .rail-leg{gap:12px} .hero-meta{gap:16px} h1.hero-h{font-size:clamp(38px,11vw,58px)} .foot-top{grid-template-columns:1fr} .foot-bot{flex-direction:column;align-items:flex-start} .calc-controls,.calc-readout,.mc-left,.mc-right,.board-aside,.formula{padding:24px} .model-card{grid-template-columns:1fr} } @media(max-width:360px){ .hero-meta{gap:14px} .hero-meta .m .k{font-size:24px} .gc-foot{gap:8px} .gc-foot .f .v{font-size:13px} .kpi .kv{font-size:19px} .instr-rail .rail-leg{gap:10px} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} .ticker-track{animation:none} .tk.lead .dot,.tk.lead .cost{animation:none} html.js [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important} html.js .scorebar>i,html.js .spec-track>i,html.js .kpi .kbar>i{transform:scaleX(1) !important} .meter-flag,.mf-chip,.meter-fill{transition:none !important} } .link{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--gold-deep);display:inline-flex;align-items:center;gap:7px;transition:color .16s} .link:hover{color:var(--ink)} .link svg{flex:0 0 auto} .tab-row{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 4px} .tab-link{ font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:0.02em; padding:8px 15px;border-radius:var(--r-pill);border:1px solid var(--line-2);color:var(--muted); background:var(--paper-2);transition:border-color .16s,background .16s,color .16s; } .tab-link:hover{border-color:var(--gold);color:var(--ink)} .tab-link.is-active{background:var(--ink);color:var(--volt);border-color:var(--ink)} .chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0} .chip-link{ font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--muted); padding:7px 13px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--paper-2); transition:border-color .16s,color .16s,transform .18s var(--spring); } .chip-link:hover{border-color:var(--gold);color:var(--ink)} @media(hover:hover){.chip-link:hover{transform:translateY(-1px)}} .crumbs{font-family:var(--mono);font-size:10.5px;letter-spacing:0.03em;color:var(--muted-y);display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px} .crumbs a{color:var(--gold-deep)} .crumbs a:hover{color:var(--ink)} .crumbs span{color:var(--dim)} .page-head{width:100%;background:linear-gradient(180deg,#FFFCF2,#F3E4AF);border-bottom:1px solid var(--line-2);padding:52px 0 40px} .page-head .eyebrow{margin-bottom:14px;display:block} .page-head h1{font-size:clamp(28px,4.2vw,46px);letter-spacing:-0.03em;color:var(--ink);margin-bottom:14px;text-wrap:balance} .page-head .ph-sub{color:var(--muted);font-size:15px;max-width:64ch;text-wrap:pretty} .page-head .ph-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-family:var(--mono);font-size:11.5px;color:var(--muted-y)} .page-head .ph-meta b{color:var(--ink);font-weight:700} .q-h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,28px);letter-spacing:-0.02em;color:var(--ink);margin-bottom:12px} .q-lead{color:var(--muted);font-size:15px;line-height:1.7;max-width:74ch;text-wrap:pretty} .q-lead .link{margin-left:6px} ins.adsbygoogle{display:block;min-height:250px} .kpi-rail.on-card{border-radius:var(--r);border:1px solid var(--line-2);box-shadow:var(--shadow-card);margin:28px 0} .kpi-rail.on-card .kpi-inner{width:auto;margin-left:0} .board-note{font-family:var(--mono);font-size:11px;color:var(--muted-y);padding:12px 22px;border-top:1px solid var(--line);background:var(--paper-2)} .article{max-width:840px} .article__head{margin-bottom:8px} .prose{max-width:74ch} .prose h2{font-family:var(--display);font-weight:800;font-size:23px;letter-spacing:-0.02em;color:var(--ink);margin:34px 0 12px} .prose h2:first-child{margin-top:0} .prose h3{font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--ink);margin:20px 0 8px} .prose p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 14px} .prose p.prose-lead{font-size:16.5px;color:var(--ink-2);font-weight:500} .prose ul,.prose ol{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 14px;padding-left:22px} .prose li{margin-bottom:6px} .prose a{color:var(--gold-deep);text-decoration:underline;text-decoration-color:var(--line-gold)} .prose a:hover{color:var(--ink)} .prose strong{color:var(--ink)} .prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:13.5px} .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px} .table-wrap table{margin:0} .prose th,.prose td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)} .prose th{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted-y)} .honesty-block{margin:26px 0;font-size:13.5px;color:var(--muted);background:var(--surface-lit);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:18px 20px;text-wrap:pretty;box-shadow:var(--shadow-card)} .honesty-block .note-h{display:block;font-family:var(--body);font-weight:700;font-size:13px;color:var(--gold-deep);margin-bottom:6px} .honesty-block b{color:var(--ink);font-weight:700} .model-top{padding:38px 0 8px} .model-name{font-family:var(--display);font-weight:900;font-size:clamp(24px,3.4vw,36px);letter-spacing:-0.03em;color:var(--ink);margin-bottom:8px;text-wrap:balance} .model-sub{font-family:var(--mono);font-size:12.5px;color:var(--muted-y);display:flex;gap:14px;flex-wrap:wrap;align-items:center} .model-sub b{color:var(--ink)} .rank-explain{color:var(--muted);font-size:13px;margin-top:10px;max-width:64ch;text-wrap:pretty} .model-body{max-width:760px;margin-top:8px} .model-verdict{background:var(--surface-lit);border:1px solid var(--line-2);border-radius:var(--r);padding:22px 24px;margin:0 0 26px;box-shadow:var(--shadow-card)} .model-verdict .mv-k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:10px} .model-verdict .mv-q{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-0.015em;color:var(--ink);margin:0 0 10px} .model-verdict p{color:var(--ink-2);font-size:14.5px;line-height:1.72;margin:0} .also-sold{margin-top:12px;font-size:13px;color:var(--muted-y)} .model-actions{margin:18px 0 0} .model-section{margin:30px 0} .model-section h2{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-0.015em;color:var(--ink);margin-bottom:14px} .peer-list{width:100%;border-collapse:collapse;margin-top:6px;border-top:1px solid var(--line-2)} .peer-list thead tr{display:grid;grid-template-columns:30px 1fr auto;gap:12px;padding:10px 4px 6px} .peer-list thead th{text-align:left;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted-y)} .peer-list thead th:last-child{text-align:right} .peer-row{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;padding:13px 4px;border-bottom:1px solid var(--line);transition:background .16s} .peer-row:hover{background:rgba(255,212,0,0.10)} .peer-row .prk a{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:7px;background:var(--paper)} .peer-row .pnm a{display:block;font-weight:600;font-size:13.5px;color:var(--ink)} .peer-row .pnm .sub{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);font-weight:400;margin-top:2px} .peer-row .pcost a{display:block;font-family:var(--mono);font-weight:700;font-size:14px;color:var(--ink);text-align:right} .no-peers{color:var(--muted);font-size:13.5px;padding:12px 4px} .source-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--muted-y);margin-top:6px;overflow-wrap:anywhere} .source-line>span,.source-line a{min-width:0;max-width:100%} .source-line a{color:var(--gold-deep)} .source-line a:hover{color:var(--ink)} .source-line code{word-break:break-all;overflow-wrap:anywhere} .read-hero{ display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);gap:28px;align-items:stretch; } .read-illus{ position:relative;background:var(--surface-lit); border:2px solid var(--ink);border-radius:var(--r); padding:24px 24px 20px;display:flex;flex-direction:column; box-shadow:var(--shadow-lift);overflow:hidden; } .read-illus::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0.5; background-image: linear-gradient(rgba(23,19,10,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(23,19,10,0.05) 1px, transparent 1px); background-size:26px 26px; mask-image:radial-gradient(120% 100% at 50% 34%, #000 42%, transparent 84%); } .read-illus::after{ content:"";position:absolute;left:50%;top:40%;transform:translate(-50%,-50%); width:70%;height:56%;border-radius:50%;z-index:0;pointer-events:none;filter:blur(30px); background:radial-gradient(closest-side, rgba(255,212,0,.42), transparent 70%); } .ri-badge{ position:relative;z-index:2;align-self:flex-start; font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.14em;color:var(--ink); border:1px solid var(--ink);border-radius:var(--r-pill);padding:5px 11px; } .illus-svg{position:relative;z-index:1;display:block;width:100%;max-width:280px;height:auto;margin:6px auto 4px;flex:1 1 auto} .ri-read{position:relative;z-index:2;text-align:center;margin-top:2px;border-top:1px solid var(--line-2);padding-top:14px} .ri-big{font-family:var(--mono);font-weight:700;font-size:clamp(40px,6vw,54px);color:var(--ink);line-height:1;letter-spacing:-0.03em;text-shadow:0 1px 0 rgba(255,255,255,.5)} .ri-big .cur{font-size:0.42em;color:var(--gold-deep);position:relative;top:-0.42em;margin-right:0.04em} .ri-big .unit{font-size:0.28em;color:var(--muted);letter-spacing:0.08em;margin-left:0.1em} .ri-cap{font-family:var(--mono);font-size:10px;color:var(--muted-y);text-transform:uppercase;letter-spacing:0.12em;font-weight:700;margin-top:6px} .read-copy{ background:var(--surface-lit);border:2px solid var(--ink);border-radius:var(--r); padding:30px 32px;display:flex;flex-direction:column;position:relative;overflow:hidden; box-shadow:var(--shadow-lift); } .read-copy::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--volt),var(--gold))} .read-copy .mv-k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:12px} .read-copy .mv-q{font-family:var(--display);font-weight:800;font-size:clamp(21px,2.6vw,28px);letter-spacing:-0.02em;color:var(--ink);margin:0 0 14px;line-height:1.06;text-wrap:balance} .read-verdict{color:var(--ink-2);font-size:16px;line-height:1.72;margin:0;font-weight:500;text-wrap:pretty} .read-copy .also-sold{margin-top:14px;font-size:13.5px;color:var(--muted-y)} .read-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2)} .read-meta .rm{display:flex;flex-direction:column;font-family:var(--body);font-size:11px;color:var(--muted-y);text-transform:uppercase;letter-spacing:0.06em;font-weight:600} .read-meta .rm b{font-family:var(--mono);font-size:19px;color:var(--ink);letter-spacing:-0.02em;text-transform:none;font-variant-numeric:tabular-nums;margin-bottom:1px} .read-copy .model-actions{margin-top:auto;padding-top:22px} .band-head{margin-bottom:26px;max-width:70ch} .band-head h2{font-size:clamp(24px,3vw,34px);letter-spacing:-0.025em;color:var(--ink);margin-bottom:10px} .band-head p{color:var(--muted);font-size:14.5px;text-wrap:pretty} .model-body{max-width:820px} .model-lede{color:var(--ink-2);font-size:15px;line-height:1.72;margin:0 0 16px;font-weight:500;text-wrap:pretty} .mbars{display:flex;flex-direction:column;gap:12px;margin:8px 0 4px} .mbar{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:16px;align-items:center} .mbar .mb-k{font-size:13px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap} .mbar.is-this .mb-k{color:var(--ink);font-weight:700} .mb-tag{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink);background:var(--volt);border:1px solid var(--ink);border-radius:var(--r-pill);padding:2px 7px;line-height:1.2} .mbar .mb-track{height:12px;border-radius:var(--r-pill);background:#E7D8A6;overflow:hidden;box-shadow:inset 0 1px 2px rgba(90,60,5,.16)} .mbar .mb-track>i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--gold),var(--gold-deep))} .mbar.is-this .mb-track>i{background:var(--ink)} .mbar .mb-v{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;min-width:56px} .model-drivers{color:var(--muted)} .model-drivers p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 12px} .model-drivers ul{color:var(--muted);font-size:15px;line-height:1.7;margin:0;padding-left:22px} .model-drivers li{margin-bottom:8px} .model-drivers strong{color:var(--ink)} .model-qa h3{font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--ink);margin:18px 0 8px} .model-qa h3:first-child{margin-top:0} .model-qa p{color:var(--muted);font-size:15px;line-height:1.7;margin:0 0 12px} @media(max-width:860px){ .read-hero{grid-template-columns:1fr;gap:20px} .illus-svg{max-width:220px} } @media(max-width:520px){ .read-copy{padding:24px 22px} .mbar{grid-template-columns:1fr auto;gap:6px 12px} .mbar .mb-track{grid-column:1 / -1;order:3} .mbar .mb-v{order:2} } .calc-picker{display:flex;gap:12px;margin-bottom:4px;flex-wrap:wrap} .calc-picker .field{flex:1;min-width:200px;margin-bottom:18px} .data-table{margin:22px 0} .notfound{padding:120px 0;text-align:center} .notfound__code{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:0.14em;color:var(--gold-deep);text-transform:uppercase} .notfound h1{font-size:clamp(28px,4vw,40px);margin:14px 0 18px;color:var(--ink)} .notfound p{color:var(--muted);font-size:15px;max-width:44ch;margin:0 auto 26px} .notfound__links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} @media(max-width:640px){ .page-head{padding:40px 0 30px} } .g-lab{font-family:var(--mono);font-size:10px;fill:#6A5F42;font-variant-numeric:tabular-nums} .g-std{font-family:var(--mono);font-size:8.5px;fill:#B87A05;letter-spacing:.3px;font-variant-numeric:tabular-nums} .calc-how{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px} .calc-how li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);font-weight:600} .calc-how li b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--volt);font-family:var(--mono);font-size:12px;font-weight:700;flex:none} .search-form{display:flex;gap:12px;max-width:640px;margin:6px 0 30px;align-items:stretch} .search-field{flex:1;display:flex;align-items:center;gap:10px;background:var(--surface-lit);border:1px solid var(--ink);border-radius:var(--r-pill);padding:12px 20px;color:var(--muted-y);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)} .search-field input{flex:1;min-width:0;background:none;border:0;outline:0;font:600 16px var(--body);color:var(--ink)} .search-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px} .sr{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r);text-decoration:none;color:var(--ink);transition:transform .12s,box-shadow .16s,border-color .16s} .sr:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:0 12px 24px -14px rgba(23,19,10,.4)} .srn{font-weight:700;font-size:14.5px;line-height:1.25} .src{font-family:var(--mono);font-weight:700;color:var(--gold-deep);white-space:nowrap;font-variant-numeric:tabular-nums} .sr-empty{grid-column:1/-1;color:var(--muted-y);font-size:15px;padding:8px 0} @media(max-width:520px){.search-form{flex-direction:column}.search-results{grid-template-columns:1fr}} .guide-groups{display:flex;flex-direction:column;gap:40px} .guide-group__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line-2)} .guide-group__head h2{font-family:var(--display);font-weight:800;font-size:clamp(20px,2.6vw,26px);letter-spacing:-0.02em;color:var(--ink);margin:0} .guide-group__head span{font-family:var(--mono);font-size:11px;color:var(--muted-y);white-space:nowrap} .guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .gcard{display:flex;flex-direction:column;gap:9px;padding:22px 22px 20px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r);text-decoration:none;color:var(--ink);transition:transform .14s,box-shadow .18s,border-color .18s} .gcard:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:0 16px 30px -18px rgba(23,19,10,.45)} .gcard__tag{align-self:flex-start;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:0.08em;font-weight:700;color:var(--ink);background:var(--volt);border-radius:var(--r-pill);padding:3px 10px} .gcard__title{font-family:var(--display);font-weight:700;font-size:17px;line-height:1.25;letter-spacing:-0.01em;color:var(--ink)} .gcard__dek{font-size:13.5px;line-height:1.55;color:var(--muted);flex:1} .gcard__meta{font-family:var(--mono);font-size:10.5px;color:var(--muted-y);margin-top:2px} .guide-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap} .guide-related{margin-top:36px;padding-top:22px;border-top:1px solid var(--line-2)} .guide-related h2{font-family:var(--display);font-weight:800;font-size:19px;color:var(--ink);margin:0 0 14px} .guide-related__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} .guide-related a{display:block;padding:14px 16px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r);text-decoration:none;color:var(--ink);font-weight:600;font-size:14px;line-height:1.3;transition:transform .12s,border-color .16s} .guide-related a:hover{transform:translateY(-2px);border-color:var(--ink)} @media(max-width:520px){.guide-grid,.guide-related__row{grid-template-columns:1fr}}