:root { --bg:#151515; --fg:#fff; --text:#cfcfcf; --mute:#8f8f8f; --line:#2a2a2a; --frame:#3a3a3a; --screen:#000; --ember:#ff5a1f; --w:72rem; --article:46rem; }
* { box-sizing:border-box }
html { color-scheme:dark; -webkit-text-size-adjust:100%; scrollbar-gutter:stable }
body { margin:0; overflow-wrap:anywhere; background:var(--bg); color:var(--fg); font:16px/1.55 "Geist",system-ui,-apple-system,sans-serif; font-feature-settings:"ss01" }
a { color:inherit; text-decoration:none }
.wrap { max-width:var(--w); margin:0 auto; padding:0 24px }
.mono, .kicker, .meta { font-family:"Geist Mono",ui-monospace,monospace; font-size:.78rem; color:var(--mute); letter-spacing:.02em }
.kicker { text-transform:uppercase }

/* header */
header.top { position:sticky; top:0; background:rgba(21,21,21,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line); z-index:2 }
header.top .wrap { display:flex; align-items:center; gap:2rem; height:60px }
.brand { display:flex; align-items:center; gap:.65rem; font-weight:600; font-size:1.1rem; letter-spacing:-.01em }
.brand img { width:36px; height:36px; border-radius:8px }
header.top nav { display:flex; gap:1.4rem; margin-left:auto; font-size:.92rem; align-items:center }
header.top nav a { color:var(--mute) }
header.top nav a:hover { color:var(--fg) }
header.top nav a.lang { border-left:1px solid var(--line); padding-left:1.4rem }
header.top nav a.store { color:var(--fg); font-weight:500 }

/* home */
.hero { text-align:center; padding:5rem 0 2.5rem }
.hero h1 { font-size:clamp(2.4rem,5.2vw,4.2rem); font-weight:600; letter-spacing:-.035em; line-height:1.02; margin:.8rem auto 1.1rem; max-width:20ch }
.hero .lead { font-size:1.15rem; color:var(--text); max-width:38rem; margin:0 auto 1.6rem }
.hero .meta { margin:.9rem 0 0 }
.button { display:inline-block; background:var(--fg); color:var(--bg); padding:.7rem 1.15rem; border-radius:8px; font-weight:500; line-height:1.2 }
.button:hover { background:var(--ember); color:var(--fg) }
.screen { margin:0; }
.screen img { width:100%; height:auto; display:block; background:var(--screen); border:1px solid var(--frame); border-radius:10px; box-shadow:0 24px 60px rgba(0,0,0,.45); object-fit:cover }
.screen figcaption { margin:.6rem 0 0; font-family:"Geist Mono",ui-monospace,monospace; font-size:.75rem; color:var(--mute); letter-spacing:.02em }
.shot { margin:0 0 2rem }
.shot img { aspect-ratio:16/6.8; object-position:center top }

.facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.facts div { padding:1.4rem 1.25rem 1.4rem 0; border-right:1px solid var(--line) }
.facts div+div { padding-left:1.25rem }
.facts div:last-child { border-right:0 }
.facts .num { font-family:"Geist Mono",monospace; font-size:.8rem; color:var(--ember) }
.facts b { display:block; font-weight:600; letter-spacing:-.01em; margin:.3rem 0 .25rem; font-size:1.05rem }
.facts p { margin:0; color:var(--text); font-size:.92rem }

.row { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:3rem; align-items:center; padding:3.5rem 0; border-top:1px solid var(--line) }
.row.flip { grid-template-columns:minmax(0,3fr) minmax(0,2fr) }
.row h2 { font-size:1.75rem; font-weight:600; letter-spacing:-.025em; line-height:1.12; margin:0 0 .7rem }
.row p { margin:0 0 .8rem; color:var(--text) }
.row p a { border-bottom:1px solid #4a4a4a }
.row p a:hover { border-color:var(--ember) }
.row .screen img { border-radius:8px; box-shadow:0 16px 40px rgba(0,0,0,.4) }
.row img.crop-top { aspect-ratio:16/6.5; object-position:center top }
.row img.crop-player { aspect-ratio:16/9 }
.row ul { margin:0; padding-left:1.1rem; color:var(--text) }
.row li { margin:.2rem 0 }

.fit { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem; padding:3.5rem 0 2.5rem; border-top:1px solid var(--line) }
.fit h3, .idx h3 { font-size:1.2rem; font-weight:600; letter-spacing:-.02em; margin:0 0 .6rem }
.fit ul { margin:0; padding:0; list-style:none; color:var(--text) }
.fit li { padding:.45rem 0; border-bottom:1px solid var(--line) }
.fit .no { color:var(--mute) }
.fit .more { margin:.8rem 0 0; font-size:.92rem }
.fit .more a:hover { color:var(--ember) }

.idx { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem; padding:1rem 0 4rem }
.idx.one { grid-template-columns:minmax(0,1fr); padding:0 0 2rem }
.idx h3 a:hover { color:var(--ember) }
.idx div > a { display:block; padding:.55rem 0; border-bottom:1px solid var(--line) }
.idx div > a:hover { color:var(--ember) }
.idx a small { display:block; color:var(--mute); font-size:.85rem }

/* article pages */
.article { max-width:var(--article); padding-top:3.5rem; padding-bottom:3rem }
.article h1 { font-size:clamp(1.9rem,4vw,2.6rem); font-weight:600; letter-spacing:-.03em; line-height:1.08; margin:0 0 .8rem }
.article .lead { font-size:1.15rem; color:var(--text); margin:0 0 2rem }
.article h2 { font-size:1.35rem; font-weight:600; letter-spacing:-.02em; margin:2.4rem 0 .6rem }
.article h3 { font-size:1.05rem; font-weight:600; margin:1.6rem 0 .4rem }
.article p, .article ul, .article ol, .article table, .article pre { margin:0 0 1rem; color:var(--text) }
.article strong { color:var(--fg) }
.article li { margin:.25rem 0 }
.article a { border-bottom:1px solid #4a4a4a }
.article a:hover { border-color:var(--ember); color:var(--fg) }
.article code, .article pre { font-family:"Geist Mono",ui-monospace,monospace; font-size:.9em }
.article pre { background:#0d0d0d; border:1px solid var(--line); border-radius:8px; padding:.85rem 1rem; overflow:auto }
.article code { background:#242424; padding:.08em .35em; border-radius:4px; color:var(--fg) }
.article pre code { background:none; padding:0 }
.article table { border-collapse:collapse; width:100%; font-size:.95rem }
.article th, .article td { text-align:left; padding:.5rem .6rem .5rem 0; border-bottom:1px solid var(--line); vertical-align:top }
.article th { color:var(--mute); font-weight:500; font-size:.85rem }
.article img { max-width:100%; height:auto }
.cta { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.25rem 0; margin:2.5rem 0 1rem }
.cta p { margin:0 0 .8rem }
.cta p:last-child { margin:0 }
.cta .meta { margin-left:.75rem }
.sources { color:var(--mute); font-size:.85rem }

footer { border-top:1px solid var(--line); padding:1.5rem 0 3rem; color:var(--mute); font-size:.85rem }
footer p { margin:0 0 .4rem }
footer a { border-bottom:1px solid #3a3a3a }
footer a:hover { color:var(--fg) }

@media (max-width:800px) {
  header.top .wrap { height:auto; flex-wrap:wrap; padding-top:12px; padding-bottom:12px; gap:.6rem 1rem }
  header.top nav { margin-left:0; gap:1rem; flex-wrap:wrap }
  .hero { padding-top:3rem } .hero h1 { font-size:2.2rem }
  .row, .row.flip, .fit, .idx { grid-template-columns:minmax(0,1fr); gap:1.5rem }
  .row.flip .screen { order:2 }
  .facts { grid-template-columns:minmax(0,1fr) minmax(0,1fr) } .facts div, .facts div+div { border-right:0; border-bottom:1px solid var(--line); padding-left:0 }
  .facts div:nth-child(odd) { padding-right:1rem } .facts div:nth-child(even) { padding-left:1rem }
  .shot img { aspect-ratio:16/9 }
}