:root{ --bg:#070b14; --bg2:#0a1120; --accent:#5ea7ff; --accent-hi:#8fc4ff; --accent2:#8a6cff; --ink:#eaf1ff; --ink-dim:#8fa1bc; color-scheme:dark; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; }
a{ color:var(--accent-hi); }
.wrap{ max-width:760px; margin:0 auto; padding:56px 20px 80px; }
.back{ display:inline-block; margin-bottom:28px; color:var(--ink-dim); text-decoration:none; font-size:14px; }
.back:hover{ color:var(--accent-hi); }
h1{ font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:clamp(30px,6vw,46px); line-height:1.1; margin:0 0 12px; }
.sub{ color:var(--ink-dim); font-size:16px; line-height:1.6; margin:0 0 28px; }
.kicker{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.kicker .date{ color:var(--ink-dim); letter-spacing:0.06em; }
.meta{ color:var(--ink-dim); font-size:14px; margin:0 0 30px; }

/* index */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.chip{ font:500 13px 'Inter',sans-serif; color:var(--ink-dim); background:transparent; border:1px solid rgba(94,167,255,0.25); border-radius:999px; padding:7px 14px; cursor:pointer; }
.chip.on{ color:#04101f; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-color:transparent; }
.card{ display:block; padding:20px; border:1px solid rgba(94,167,255,0.18); border-radius:12px; text-decoration:none; color:var(--ink); margin-bottom:16px; transition:border-color .15s; }
.card:hover{ border-color:rgba(94,167,255,0.5); }
.card h2{ font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:23px; line-height:1.2; margin:0 0 8px; }
.card p{ color:var(--ink-dim); font-size:15px; line-height:1.6; margin:0; }
.empty{ color:var(--ink-dim); }

/* post */
article h2{ font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:clamp(22px,4vw,28px); margin:38px 0 12px; }
article h3{ font-size:18px; margin:28px 0 10px; }
article p, article li{ color:#cfd9ec; line-height:1.75; font-size:16.5px; }
article p{ margin:0 0 18px; }
article ul, article ol{ padding-left:22px; margin:0 0 18px; }
article blockquote{ border-left:3px solid var(--accent); margin:26px 0; padding:4px 0 4px 18px; color:var(--ink); font-style:italic; }
article table{ width:100%; border-collapse:collapse; margin:0 0 20px; font-size:15px; }
article th, article td{ border:1px solid rgba(94,167,255,0.18); padding:8px 10px; text-align:left; }
article th{ color:var(--ink); background:rgba(94,167,255,0.06); }
/* Phones: a wide table scrolls sideways inside the post instead of pushing the whole page sideways. */
@media (max-width:700px){ article table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } article th, article td{ min-width:96px; } }
article img{ max-width:100%; height:auto; }
.hero{ margin:0 0 30px; }
.hero img{ width:100%; height:auto; border-radius:12px; border:1px solid rgba(94,167,255,0.18); display:block; }
.hero figcaption{ color:var(--ink-dim); font-size:12.5px; margin-top:8px; }
.cta{ margin-top:44px; padding:22px; border:1px solid rgba(94,167,255,0.25); border-radius:12px; background:rgba(94,167,255,0.06); }
.cta-title{ color:var(--ink); font-weight:600; }
.cta p{ color:var(--ink-dim); margin:8px 0 0; line-height:1.6; }
.btn{ display:inline-block; margin-top:12px; padding:10px 20px; border-radius:8px; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#04101f; font-weight:600; text-decoration:none; }
.sources{ margin-top:34px; padding-top:18px; border-top:1px solid rgba(94,167,255,0.15); }
.sources-title{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px; }
.sources ul{ margin:0; padding-left:18px; }
.sources li{ color:var(--ink-dim); font-size:14px; line-height:1.8; }
footer{ text-align:center; color:var(--ink-dim); font-size:13px; padding:24px 20px 40px; }
footer a{ color:var(--ink-dim); }

/* ---- post extras (SEO & reading aids) ---- */
.progress{ position:fixed; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transform:scaleX(0); transform-origin:0 50%; z-index:20; }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--ink-dim); margin-bottom:22px; }
.crumbs a{ color:var(--ink-dim); text-decoration:none; }
.crumbs a:hover{ color:var(--accent-hi); }
.crumbs .here{ color:var(--ink); }
.meta a{ color:var(--accent-hi); text-decoration:none; }
.box-title{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.box-sub{ font-weight:600; font-size:14px; color:var(--ink); margin:14px 0 6px; }
.brief{ padding:18px 20px; border:1px solid rgba(94,167,255,0.22); border-left:3px solid var(--accent); border-radius:12px; background:rgba(94,167,255,0.05); margin:0 0 22px; }
.brief p{ color:var(--ink); line-height:1.65; font-size:16px; margin:0; }
.brief ul{ margin:0; padding-left:20px; }
.brief li{ color:#cfd9ec; line-height:1.65; font-size:15px; margin-bottom:4px; }
.toc{ border:1px solid rgba(94,167,255,0.18); border-radius:12px; padding:12px 18px; margin:0 0 28px; background:rgba(10,17,32,0.92); }
.toc summary{ cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); }
.toc ol{ margin:10px 0 2px; padding-left:20px; }
.toc li{ margin:6px 0; font-size:14.5px; line-height:1.45; }
.toc a{ color:var(--ink-dim); text-decoration:none; }
.toc a:hover, .toc a.on{ color:var(--accent-hi); }
@media (min-width:1200px){
  .toc{ position:fixed; top:110px; left:calc(50% - 380px - 262px); width:236px; max-height:calc(100vh - 140px); overflow:auto; margin:0; }
}
article h2{ scroll-margin-top:24px; }
.video{ position:relative; padding-top:56.25%; margin:28px 0; border-radius:12px; overflow:hidden; border:1px solid rgba(94,167,255,0.18); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.tldr{ margin:30px 0 0; padding:16px 20px; border-radius:12px; background:linear-gradient(90deg,rgba(94,167,255,0.12),rgba(138,108,255,0.10)); color:var(--ink); line-height:1.65; font-size:15.5px; }
.tldr span{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.1em; color:var(--accent-hi); margin-right:6px; }
.faq{ margin-top:38px; }
.faq h2, .more-posts h2{ font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:clamp(22px,4vw,26px); margin:0 0 14px; }
.faq details{ border:1px solid rgba(94,167,255,0.18); border-radius:10px; padding:0 16px; margin-bottom:10px; }
.faq summary{ cursor:pointer; padding:14px 0; font-weight:600; color:var(--ink); line-height:1.45; }
.faq details p{ color:#cfd9ec; line-height:1.7; margin:0 0 14px; font-size:15.5px; }
.share{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:30px; }
.share-label{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-dim); margin-right:4px; }
.share a, .share button{ font:500 13.5px 'Inter',sans-serif; color:var(--ink); background:transparent; border:1px solid rgba(94,167,255,0.3); border-radius:999px; padding:7px 14px; text-decoration:none; cursor:pointer; }
.share a:hover, .share button:hover{ border-color:var(--accent); color:var(--accent-hi); }
.extras{ display:grid; grid-template-columns:1fr; gap:14px; margin-top:34px; }
@media (min-width:700px){ .extras{ grid-template-columns:1fr 1fr; } }
.panel{ padding:20px; border:1px solid rgba(94,167,255,0.22); border-radius:12px; background:rgba(94,167,255,0.05); }
.panel p{ color:var(--ink-dim); line-height:1.6; margin:0; font-size:15px; }
.panel .small{ font-size:13px; margin-top:10px; }
.machine{ display:block; padding:10px 12px; border-radius:9px; text-decoration:none; color:var(--ink); border:1px solid rgba(94,167,255,0.14); margin-bottom:8px; }
.machine b{ display:block; font-size:15px; }
.machine span{ display:block; color:var(--ink-dim); font-size:13px; line-height:1.45; margin-top:2px; }
.machine.on, .machine:hover{ border-color:var(--accent); background:rgba(94,167,255,0.08); }
.offer .more{ display:inline-block; margin:12px 0 0 12px; font-size:14px; }
.bio{ display:flex; gap:16px; align-items:flex-start; margin-top:34px; padding:20px; border-top:1px solid rgba(94,167,255,0.15); border-bottom:1px solid rgba(94,167,255,0.15); }
.avatar{ flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-family:'Big Shoulders Display',sans-serif; font-weight:800; font-size:20px; color:#04101f; background:linear-gradient(135deg,var(--accent),var(--accent2)); }
.bio-name{ font-weight:600; margin-bottom:4px; }
.bio-name a{ color:var(--ink); text-decoration:none; }
.bio p{ color:var(--ink-dim); font-size:14.5px; line-height:1.6; margin:0 0 8px; }
.bio a{ font-size:14px; }
.more-posts{ margin-top:38px; }
.mini-list{ display:grid; gap:10px; }
.mini{ display:block; padding:14px 16px; border:1px solid rgba(94,167,255,0.16); border-radius:10px; text-decoration:none; }
.mini:hover{ border-color:rgba(94,167,255,0.5); }
.mini .kicker{ display:block; margin-bottom:6px; font-size:10.5px; }
.mini-title{ display:block; color:var(--ink); font-weight:600; line-height:1.35; font-size:15.5px; }
.mini-date{ display:block; color:var(--ink-dim); font-size:12.5px; margin-top:6px; }
.field-note{ margin:30px 0 0; padding:16px 20px; border-left:3px solid var(--accent-hi); border-radius:0 12px 12px 0; background:rgba(94,167,255,0.07); color:var(--ink); line-height:1.65; font-size:15.5px; }
.field-note span{ display:block; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.1em; color:var(--accent-hi); margin-bottom:6px; text-transform:uppercase; }
/* Free 3D model download box (after the article) */
.dlbox{ margin:34px 0 8px; padding:16px; border:1px solid rgba(94,167,255,0.28); border-radius:14px; background:linear-gradient(135deg,rgba(94,167,255,0.08),rgba(138,108,255,0.06)); display:grid; gap:14px; }
@media (min-width:640px){ .dlbox:not(.all){ grid-template-columns:42% 1fr; align-items:center; } }
.dlbox .dl-img img{ display:block; width:100%; height:auto; border-radius:10px; background:#070b14; }
.dlbox h3{ margin:0 0 6px; font-size:21px; color:var(--ink); }
.dlbox p{ margin:0 0 6px; font-size:15px; line-height:1.6; color:#cfd9ec; }
.dlbox .dl-act{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; }
.dlbox .dl-act .btn{ margin-top:6px; }
.dlbox .more{ color:var(--accent-hi); font-weight:600; font-size:14.5px; text-decoration:none; }
.dlbox .small{ font-size:12.5px; color:var(--ink-dim); margin-top:8px; }
.dl-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.dl-mini{ display:grid; gap:2px; text-decoration:none; color:var(--ink); font-size:13.5px; }
.dl-mini img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:9px; border:1px solid rgba(94,167,255,0.18); margin-bottom:4px; }
.dl-mini span{ color:var(--ink-dim); font-size:11.5px; }
.dl-mini:hover img{ border-color:var(--accent); }