:root { --bg:#f6f6f4; --fg:#16161a; --muted:#676770; --card:#fff; --line:#e2e2de; --acc:#c2412d; --ok:#2f7d4f; --warn:#a86b00; --bad:#b3261e; }
@media (prefers-color-scheme: dark) { :root { --bg:#141417; --fg:#ececef; --muted:#9a9aa4; --card:#1d1d22; --line:#2e2e35; --acc:#ef6a52; --ok:#5bbd85; --warn:#e0a83a; --bad:#ef6a62; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
.top { display:flex; align-items:center; gap:16px; padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card); flex-wrap:wrap; }
.brand { font-weight:700; color:var(--fg); text-decoration:none; letter-spacing:.02em; }
nav { display:flex; gap:12px; flex-wrap:wrap; margin-left:auto; } nav a { color:var(--muted); text-decoration:none; } nav a:hover { color:var(--fg); }
main { max-width:1100px; margin:0 auto; padding:20px 16px 60px; }
h1 { font-size:22px; margin:0 0 16px; } h2 { font-size:17px; margin:24px 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; margin-bottom:16px; }
.narrow { max-width:440px; margin:40px auto; }
label { display:block; margin:10px 0 4px; font-size:13px; color:var(--muted); }
label.check { display:flex; gap:8px; align-items:flex-start; color:var(--fg); font-size:14px; } label.check input { margin-top:3px; }
input[type=text], input[type=email], input[type=password], input[type=number], select { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); font:inherit; }
td input, td select { padding:4px 6px; }
button, .btn { display:inline-block; padding:8px 14px; border-radius:6px; border:1px solid var(--acc); background:var(--acc); color:#fff; font:inherit; cursor:pointer; text-decoration:none; }
button.ghost, .btn.ghost { background:transparent; color:var(--fg); border-color:var(--line); }
button.danger { background:var(--bad); border-color:var(--bad); } button:disabled { opacity:.5; cursor:default; }
.muted { color:var(--muted); } .err { color:var(--bad); } .okc { color:var(--ok); }
table { width:100%; border-collapse:collapse; font-size:14px; } th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tablewrap { overflow-x:auto; }
.pill { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; border:1px solid var(--line); }
.s-done { color:var(--ok); border-color:var(--ok); } .s-failed { color:var(--bad); border-color:var(--bad); } .s-running, .s-queued, .s-uploading, .s-encoding { color:var(--warn); border-color:var(--warn); }
video { width:100%; max-height:62vh; background:#000; border-radius:6px; }
.bar { position:relative; height:28px; display:flex; border-radius:4px; overflow:hidden; margin:8px 0; cursor:pointer; border:1px solid var(--line); }
.bar div { height:100%; border-right:1px solid rgba(0,0,0,.25); font-size:11px; color:#fff; overflow:hidden; white-space:nowrap; padding:6px 4px; }
.bar .head { position:absolute; top:0; bottom:0; width:2px; background:var(--fg); padding:0; border:0; pointer-events:none; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.progress { height:6px; background:var(--line); border-radius:3px; overflow:hidden; } .progress > i { display:block; height:100%; background:var(--acc); width:0; }
.gate { position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; padding:16px; z-index:9; }
.gate .card { max-width:420px; }
.gate[hidden] { display:none; }
.attest { font-size:13px; background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:10px; }

textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg); font:inherit; resize:vertical; }
.hero { text-align:center; padding:48px 0 24px; } .hero h1 { font-size:clamp(26px, 5vw, 40px); line-height:1.15; margin:0 auto 14px; max-width:780px; letter-spacing:-.01em; }
.lede { font-size:18px; color:var(--muted); max-width:620px; margin:0 auto; } .hero-cta { justify-content:center; margin-top:22px; }
.mock { max-width:760px; margin:24px auto 40px; }
.mock-screen { aspect-ratio:16/7; border-radius:10px 10px 0 0; background:linear-gradient(135deg, #22252d, #15161b); display:flex; align-items:flex-end; justify-content:space-between; padding:16px 18px; border:1px solid var(--line); border-bottom:0; }
.mock-label { font-size:20px; font-weight:600; color:#fff; } .mock-time { font-variant-numeric:tabular-nums; color:#b8bcc6; }
.mock-bar { position:relative; display:flex; height:34px; border:1px solid var(--line); border-radius:0 0 10px 10px; overflow:hidden; }
.mock-bar > div { height:100%; opacity:.55; display:flex; align-items:center; padding:0 6px; font-size:12px; color:#fff; white-space:nowrap; overflow:hidden; border-right:1px solid rgba(0,0,0,.35); transition:opacity .2s; }
.mock-bar > div.on { opacity:1; } .mock-head { position:absolute; top:-2px; bottom:-2px; width:2px; background:#fff; box-shadow:0 0 6px rgba(255,255,255,.7); }
.points { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin:0 0 32px; }
.points > div { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px; } .points h3 { margin:0 0 6px; font-size:16px; } .points p { margin:0; color:var(--muted); }
.request { max-width:640px; margin:0 auto 24px; } .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; } @media (max-width:560px) { .grid2 { grid-template-columns:1fr; } }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.foot { text-align:center; font-size:13px; padding:12px 0 0; }

/* ---------- mark + wordmark (shared) ---------- */
.wordmark { display:inline-flex; align-items:baseline; gap:.02em; letter-spacing:-.01em; }
.mark { width:1em; height:1em; vertical-align:-.12em; } .mark-x { width:.92em; height:.92em; margin-left:-.1em; vertical-align:-.1em; } .mark-sm { width:14px; height:14px; vertical-align:-2px; }
.mark path { fill:none; stroke-linecap:round; }
.m-base { stroke:currentColor; stroke-opacity:.35; stroke-width:1.6; } .m-tick { stroke:currentColor; stroke-width:2.6; } .m-play { stroke:var(--acc); stroke-width:2.6; } .mark .m-head { fill:var(--acc); stroke:none; }
.brand .wordmark { font-weight:600; }

/* ---------- editorial front page ---------- */
body.ed { --bg:#13110e; --fg:#ece4d6; --muted:#9d958a; --line:rgba(236,228,214,.13); --acc:#d2a466; --card:#18150f;
  background:var(--bg); color:var(--fg); font-family:Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
body.ed .top { background:transparent; border-bottom:1px solid var(--line); padding:18px 24px; }
body.ed .brand { font-family:"Instrument Serif", Georgia, serif; font-size:22px; font-weight:400; } body.ed .brand .wordmark { font-weight:400; }
body.ed nav a { color:var(--muted); font-size:14px; } body.ed nav a:hover { color:var(--fg); }
body.ed main { max-width:980px; padding:0 24px 40px; }
.ed .sc { font-variant:all-small-caps; letter-spacing:.08em; }
.ed-hero { padding:16vh 0 9vh; max-width:760px; }
.ed-title { font-family:"Instrument Serif", Georgia, serif; font-weight:400; font-size:clamp(56px, 11vw, 112px); line-height:.95; margin:0 0 28px; letter-spacing:-.02em; }
.ed-line { font-family:"Instrument Serif", Georgia, serif; font-style:italic; font-size:clamp(24px, 3.6vw, 34px); line-height:1.2; margin:0 0 18px; color:var(--fg); }
.ed-sub { font-size:17px; line-height:1.6; color:var(--muted); max-width:520px; margin:0; }
.ed-cta { display:flex; gap:28px; align-items:center; margin-top:40px; flex-wrap:wrap; } .ed-cta.left { margin-top:24px; }
.ed-btn { display:inline-block; padding:12px 22px; background:var(--fg); color:var(--bg); border:0; border-radius:2px; font:500 14px Inter, sans-serif; letter-spacing:.02em; text-decoration:none; cursor:pointer; transition:background .2s; }
.ed-btn:hover { background:var(--acc); } .ed-btn:disabled { opacity:.5; }
.ed-link { color:var(--fg); text-decoration:none; font-size:14px; border-bottom:1px solid var(--line); padding-bottom:2px; } .ed-link:hover { border-color:var(--acc); }
.ed-tl { padding:6vh 0 10vh; border-top:1px solid var(--line); }
.ed-tl-meta { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; font-size:15px; }
.ed-tl-meta .sc { color:var(--fg); font-size:17px; } .ed-tc { font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px; letter-spacing:.06em; }
.ed-track { position:relative; height:44px; border-bottom:1px solid var(--line); }
.ed-seg { position:absolute; bottom:0; height:100%; border-left:1px solid var(--line); }
.ed-seg span { position:absolute; left:8px; top:2px; font-size:12px; color:var(--muted); white-space:nowrap; transition:color .3s; }
.ed-seg::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .5s ease; }
.ed-seg.on span { color:var(--fg); } .ed-seg.on::after { transform:scaleX(1); }
.ed-head { position:absolute; top:-10px; bottom:-6px; width:1px; background:var(--acc); }
.ed-head i { position:absolute; top:-1px; left:-4px; border:4.5px solid transparent; border-top:6px solid var(--acc); border-bottom:0; }
.ed-scale { display:flex; justify-content:space-between; margin-top:10px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.ed-notes { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid var(--line); }
.ed-notes article { padding:36px 28px 44px 0; } .ed-notes article + article { border-left:1px solid var(--line); padding-left:28px; }
.ed-num { font-size:12px; color:var(--acc); letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.ed-notes h3 { font-family:"Instrument Serif", Georgia, serif; font-weight:400; font-size:26px; line-height:1.15; margin:14px 0 12px; }
.ed-notes p { margin:0; color:var(--muted); line-height:1.65; font-size:15px; }
.ed-request { border-top:1px solid var(--line); padding:9vh 0 6vh; max-width:600px; }
.ed-request h2 { font-family:"Instrument Serif", Georgia, serif; font-weight:400; font-size:44px; margin:0 0 10px; } .ed-muted { color:var(--muted); margin:0 0 28px; }
body.ed label { color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; margin:18px 0 6px; }
body.ed input[type=text], body.ed input[type=email], body.ed textarea { background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:8px 0; color:var(--fg); font:16px Inter, sans-serif; }
body.ed input:focus, body.ed textarea:focus { outline:none; border-bottom-color:var(--acc); }
.ed-thanks { font-family:"Instrument Serif", Georgia, serif; font-size:26px; font-style:italic; }
.ed-foot { display:flex; gap:24px; justify-content:space-between; flex-wrap:wrap; border-top:1px solid var(--line); padding:22px 0 0; font-size:13px; color:var(--muted); }
.ed-foot a { color:var(--muted); } .ed-foot span:first-child { color:var(--fg); }
@media (max-width:720px) {
  .ed-hero { padding:10vh 0 7vh; } .ed-notes { grid-template-columns:1fr; }
  .ed-notes article, .ed-notes article + article { border-left:0; padding:28px 0; } .ed-notes article + article { border-top:1px solid var(--line); }
  .ed-seg span { display:none; } .ed-seg.on span { display:block; } .ed-scale span:nth-child(even) { display:none; }
}
@media (prefers-reduced-motion: reduce) { .ed-seg::after, .ed-seg span { transition:none; } }