:root { --paper:#fff; --ink:#151515; --muted:#62625e; --field:#f5f5f1; --rule:#deded7; --rule-strong:#99998f; --mono:'DM Mono',monospace; color-scheme:light; }
:root[data-theme='dark'] { --paper:#141514; --ink:#f3f3ed; --muted:#b4b6ad; --field:#20221e; --rule:#3d4037; --rule-strong:#858b78; color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.65 'Manrope',sans-serif; }
a { color:inherit; text-underline-offset:3px; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #648239; outline-offset:4px; }
[hidden] { display:none!important; }
.page-shell { max-width:1560px; margin-inline:auto; padding-inline:36px; }
.skip { position:fixed; left:16px; top:-100px; z-index:10; padding:12px; background:var(--ink); color:var(--paper); }
.skip:focus { top:10px; }
.study-strip { display:flex; justify-content:space-between; gap:16px; background:#171a13; color:#e8eddd; padding:8px 36px; font:10px var(--mono); letter-spacing:.04em; }
.public-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:24px; border-bottom:1px solid var(--rule); }
.wordmark { text-decoration:none; font-size:23px; font-weight:700; letter-spacing:-1px; }
.wordmark span { display:inline-block; margin-left:12px; color:var(--muted); font-size:12px; font-weight:400; letter-spacing:0; }
.header-actions { display:flex; align-items:center; gap:12px; }
.kicker { font-family:var(--mono); text-transform:uppercase; }
.video-guide .video-subnav { padding-block:22px; }
.video-guide .video-hero { padding-top:64px; }
.video-guide .video-hero h1 { max-width:9ch; }
.hero-number { font:clamp(110px,20vw,270px)/.8 'Manrope',sans-serif; letter-spacing:-.09em; margin:0 0 22px; }
.hero-ledger { border:1px solid var(--rule); padding:30px; background:var(--field); }
.hero-ledger p { margin:0; }
.hero-ledger .kicker { margin-bottom:30px; }
.hero-ledger .ledger-line { border-top:1px solid var(--rule-strong); padding-top:20px; margin-top:30px; font:12px/1.7 var(--mono); }
.hero-glimpses { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:26px; }
.hero-glimpses img { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--rule); }
.technique-card .frame-open { width:100%; margin-block:8px 14px; }
.technique-card .frame-open img { width:100%; }
.screen-caption { padding-top:14px; }
.screen-caption h3 { font-size:19px; line-height:1.35; letter-spacing:-.02em; }
.screen-caption p { font-size:13px; color:var(--muted); }
.screen-caption .card-bottom { font-size:12px; }
.video-guide .video-stats { margin-bottom:28px; }
.pagination { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:24px 0; border-top:1px solid var(--rule); margin-top:30px; }
.pagination span { font:12px var(--mono); color:var(--muted); }
.pagination button:disabled { opacity:.4; cursor:not-allowed; }
.technique-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.technique-card { padding:28px; border:1px solid var(--rule); }
.technique-card h2 { font-size:27px; letter-spacing:-.04em; margin:0 0 14px; }
.technique-card p { color:var(--muted); }
.technique-card li { margin-top:7px; }
.video-guide .study-table { min-width:1050px; }
.video-guide .video-footer { padding-bottom:50px; }
.video-article { max-width:950px; padding-block:48px; }
.video-article h1 { font-size:clamp(36px,6vw,64px); letter-spacing:-.06em; line-height:1.08; }
.video-article h2 { margin-top:45px; }
.video-article code { overflow-wrap:anywhere; }
@media(max-width:700px) { .page-shell { padding-inline:18px; } .study-strip { padding-inline:18px; } .study-strip span:last-child,.wordmark span { display:none; } .public-header { gap:12px; } .header-actions .source-link { display:none; } .technique-grid { grid-template-columns:1fr; } .hero-ledger { padding:24px; } .video-guide .video-hero { padding-top:40px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }