/* == Tokens == */
:root {
--paper:#edeee8;
--surface:light-dark(#f8f8f4,#141a19);
--surface-2:light-dark(#e2e4dc,#1b2321);
--ink:light-dark(#14181a,#e8eeea);
--ink-2:light-dark(#484f50,#a7b3ae);
--ink-3:light-dark(#5f6667,#85928c);
--line:light-dark(#d6d9cf,#223029);
--line-strong:light-dark(#b9bdb0,#3a4a42);
--pine:light-dark(#0b6e5c,#3fd0a5);
--pine-deep:light-dark(#07503f,#7ae6c4);
--pine-ink:light-dark(#06241d,#04140f);
--pine-soft:light-dark(#dcebe4,rgba(63,208,165,.1));
--pine-line:light-dark(#a9cfc1,rgba(63,208,165,.34));
--amber:light-dark(#b4531a,#f0a35e);
--amber-soft:light-dark(#f6e3d3,rgba(240,163,94,.12));
--amber-line:light-dark(#e5b992,rgba(240,163,94,.4));
--on-accent:light-dark(#fff,#04140f);
--header-bg:light-dark(rgba(237,238,232,.8),rgba(13,17,17,.8));
--selection:light-dark(#bfe3d6,#1f4a3b);
--shc-sm:light-dark(rgba(20,24,26,.06),rgba(0,0,0,.4));
--shc-md:light-dark(rgba(7,80,63,.35),rgba(0,0,0,.65));
--shc-lg:light-dark(rgba(20,24,26,.35),rgba(0,0,0,.7));
--shadow-sm:0 1px 2px var(--shc-sm);
--shadow-md:0 14px 34px -16px var(--shc-md);
--shadow-lg:0 28px 60px -24px var(--shc-lg);
--ring:0 0 0 3px var(--pine-soft),0 0 0 5px var(--pine);
--font-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
--font-body:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
--font-mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
--fs-hero:clamp(2.4rem,1.2rem + 3.6vw,3.8rem);
--fs-h2:clamp(1.7rem,1.2rem + 1.7vw,2.3rem);
--fs-title:1.0625rem;
--fs-body:1rem;
--fs-small:.9375rem;
--fs-mini:.875rem;
--fs-tiny:.8125rem;
--fs-micro:.75rem;
--fs-label:.6875rem;
--s1:4px;
--s2:8px;
--s3:12px;
--s4:16px;
--s5:24px;
--s6:32px;
--s7:48px;
--s8:64px;
--r-xs:4px;
--r-sm:6px;
--r-md:10px;
--r-lg:14px;
--r-full:999px;
--ease:cubic-bezier(.22,1,.36,1);
--spring:cubic-bezier(.34,1.45,.64,1);
--dur-fast:.2s;
--dur:.3s;
--dur-slow:.5s;
--dur-slower:.8s;
--header-h:60px;
--layout-max:1240px;
--col-max:800px;
--gutter:clamp(20px,4vw,40px);
--tap:44px;
--c-bg:#0b0f0e;
--c-ink:#d9e4de;
--c-dim:#7c8c85;
--c-line:#1e2a26;
--c-line-hi:#2a3a34;
--c-acc:#3fd0a5;
color-scheme:light;
}

:root[data-theme="dark"] {
--paper:#0d1111;
color-scheme:dark;
}

@media (prefers-color-scheme:dark) and (scripting:none) {
:root {
--paper:#0d1111;
color-scheme:dark;
}
}

/* == Base == */
*,*::before,*::after {
box-sizing:border-box;
}

html {
scroll-behavior:smooth;
scroll-padding-top:calc(var(--header-h) + 72px);
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
scrollbar-width:thin;
scrollbar-color:var(--line-strong) transparent;
}

body {
margin:0;
background:var(--paper);
color:var(--ink);
font-family:var(--font-body);
font-size:var(--fs-body);
font-feature-settings:"ss01","cv11";
font-optical-sizing:auto;
line-height:1.62;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

html.theming,
html.theming *,
html.theming *::before,
html.theming *::after {
transition:background-color var(--dur) ease,border-color var(--dur) ease,color var(--dur) ease;
}

h1,h2,h3,h4,p,figure {
margin:0;
}

p,li {
text-wrap:pretty;
}

a {
color:inherit;
}

button {
font:inherit;
color:inherit;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}

img,svg {
max-width:100%;
}

::selection {
background:var(--selection);
color:var(--ink);
}

:focus-visible {
outline:2px solid transparent;
outline-offset:2px;
box-shadow:var(--ring);
}

::-webkit-scrollbar {
width:10px;
height:10px;
}

::-webkit-scrollbar-thumb {
background:var(--line-strong);
border-radius:var(--r-full);
border:2px solid var(--paper);
}

::-webkit-scrollbar-track {
background:transparent;
}

/* == Utilities == */
.icon {
width:1em;
height:1em;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
flex-shrink:0;
}

.mono-num {
font-family:var(--font-mono);
font-variant-numeric:tabular-nums;
letter-spacing:-.01em;
}

.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
border:0;
}

.skip-link {
position:fixed;
top:var(--s3);
left:var(--s3);
z-index:200;
padding:var(--s3) var(--s4);
background:var(--ink);
color:var(--paper);
border-radius:var(--r-md);
font-size:var(--fs-tiny);
font-weight:600;
text-decoration:none;
transform:translateY(-64px);
transition:transform var(--dur-fast) var(--ease);
}

.skip-link:focus-visible {
transform:translateY(0);
}

.kicker {
display:inline-flex;
align-items:center;
gap:var(--s2);
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--ink-3);
}

.kicker-diamond {
width:8px;
height:8px;
border-radius:2px;
background:var(--pine);
box-shadow:0 0 0 3px var(--pine-soft);
transform:rotate(45deg);
}

/* == Type System == */
.hero-title,
.rail-title,
.section-title,
.summary-title,
.tracker-pct {
font-family:var(--font-display);
font-weight:700;
font-variation-settings:"opsz" 96;
letter-spacing:-.03em;
line-height:1.04;
}

.rail-title,
.section-title {
font-size:var(--fs-h2);
color:var(--ink);
text-wrap:balance;
}

.summary-title {
margin:var(--s6) 0 var(--s3);
font-size:1.3rem;
font-weight:650;
color:var(--ink);
}

.summary-title ~ .summary-title {
margin-top:var(--s5);
}

/* == Progress Bar == */
.scroll-progress {
position:fixed;
inset:0 0 auto;
height:2px;
z-index:120;
pointer-events:none;
}

.scroll-progress span {
display:block;
height:100%;
background:linear-gradient(90deg,var(--pine),var(--amber));
box-shadow:0 0 10px var(--pine-line);
transform-origin:0 50%;
transform:scaleX(0);
}

@supports (animation-timeline:scroll()) {
.scroll-progress span {
animation:prog linear both;
animation-timeline:scroll(root);
}
}

@keyframes prog {
to {
transform:scaleX(1);
}
}

/* == Header == */
.site-header {
position:sticky;
top:0;
z-index:100;
background:var(--header-bg);
-webkit-backdrop-filter:blur(14px) saturate(1.3);
backdrop-filter:blur(14px) saturate(1.3);
border-bottom:1px solid transparent;
box-shadow:0 1px 0 var(--line);
transition:box-shadow var(--dur) ease;
}

.site-header.scrolled {
box-shadow:0 1px 0 var(--line),0 10px 30px -18px var(--shc-lg);
}

.header-inner {
max-width:var(--layout-max);
height:var(--header-h);
margin:0 auto;
padding:0 var(--gutter);
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--s4);
}

.brand {
display:flex;
align-items:center;
gap:var(--s3);
text-decoration:none;
}

.brand-mark {
width:34px;
height:34px;
display:grid;
place-items:center;
padding-bottom:2px;
background:linear-gradient(145deg,var(--pine),var(--pine-deep));
color:var(--on-accent);
border-radius:var(--r-md);
font-family:var(--font-display);
font-weight:800;
font-size:1.1rem;
line-height:1;
transition:transform var(--dur-slow) var(--spring);
}

.brand:hover .brand-mark {
transform:rotate(-8deg) scale(1.06);
}

.brand-text {
display:flex;
flex-direction:column;
line-height:1.3;
}

.brand-name {
font-size:var(--fs-mini);
font-weight:650;
letter-spacing:-.01em;
color:var(--ink);
}

.brand-sub {
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--ink-3);
}

.header-actions {
display:flex;
align-items:center;
gap:var(--s2);
}

.header-link {
display:inline-flex;
align-items:center;
gap:var(--s2);
padding:var(--s2) var(--s3);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-full);
box-shadow:var(--shadow-sm);
font-size:var(--fs-tiny);
font-weight:550;
color:var(--ink-2);
text-decoration:none;
transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease,transform var(--dur-fast) var(--ease);
}

.header-link .icon {
width:14px;
height:14px;
}

.header-link:hover {
color:var(--ink);
border-color:var(--line-strong);
transform:translateY(-1px);
}

.theme-toggle {
width:36px;
height:36px;
display:grid;
place-items:center;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-full);
box-shadow:var(--shadow-sm);
cursor:pointer;
transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease,transform var(--dur) var(--spring);
}

.theme-toggle:hover {
color:var(--pine);
border-color:var(--pine-line);
transform:rotate(20deg) scale(1.05);
}

.theme-toggle:active,
.header-link:active,
.copy-btn:active {
transform:scale(.94);
}

.theme-toggle .icon {
width:16px;
height:16px;
}

.theme-toggle .icon-moon {
display:none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
display:none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
display:block;
}

/* == Chip Nav == */
.chip-nav {
display:none;
position:sticky;
top:var(--header-h);
z-index:90;
background:var(--header-bg);
-webkit-backdrop-filter:blur(14px) saturate(1.3);
backdrop-filter:blur(14px) saturate(1.3);
border-bottom:1px solid var(--line);
}

.chip-nav-inner {
display:flex;
gap:var(--s2);
padding:var(--s2) var(--gutter);
overflow-x:auto;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}

.chip-nav-inner::-webkit-scrollbar {
display:none;
}

.chip {
display:inline-flex;
align-items:center;
gap:var(--s2);
flex-shrink:0;
padding:var(--s1) var(--s3) var(--s1) var(--s1);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-full);
box-shadow:var(--shadow-sm);
font-size:var(--fs-micro);
font-weight:600;
color:var(--ink-2);
text-decoration:none;
white-space:nowrap;
transition:border-color var(--dur-fast) ease,background var(--dur-fast) ease,color var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}

.chip-num {
width:24px;
height:24px;
display:grid;
place-items:center;
border:1px solid var(--line-strong);
border-radius:var(--r-full);
font-size:var(--fs-label);
font-weight:700;
color:var(--ink-3);
transition:inherit;
}

.chip:hover {
color:var(--ink);
border-color:var(--line-strong);
}

.chip.active {
background:var(--pine-soft);
border-color:var(--pine-line);
color:var(--pine-deep);
box-shadow:0 0 0 3px var(--pine-soft);
}

.chip.active .chip-num,
.chip.done .chip-num {
background:var(--pine);
border-color:var(--pine);
color:var(--on-accent);
}

/* == Layout == */
.layout {
max-width:var(--layout-max);
margin:0 auto;
padding:0 var(--gutter);
display:grid;
grid-template-columns:268px minmax(0,1fr);
gap:clamp(32px,4vw,64px);
align-items:start;
}

.main {
width:100%;
max-width:var(--col-max);
justify-self:center;
padding:clamp(36px,5vw,64px) 0 var(--s8);
}

.sidebar {
display:block;
}

.side-sticky {
position:sticky;
top:calc(var(--header-h) + var(--s5));
display:grid;
gap:var(--s5);
}

.side-progress {
display:flex;
align-items:center;
gap:var(--s4);
padding:var(--s4);
background:linear-gradient(160deg,var(--surface),var(--paper));
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-sm);
}

.ring {
position:relative;
width:56px;
height:56px;
flex-shrink:0;
}

.ring svg {
width:100%;
height:100%;
transform:rotate(-90deg);
}

.ring-track,
.ring-fill {
fill:none;
stroke-width:5;
cx:28px;
cy:28px;
r:24px;
}

.ring-track {
stroke:var(--surface-2);
}

.ring-fill {
stroke:var(--pine);
stroke-linecap:round;
stroke-dasharray:150.8;
stroke-dashoffset:150.8;
transition:stroke-dashoffset var(--dur-slow) var(--ease);
}

.ring-label {
position:absolute;
inset:0;
display:grid;
place-items:center;
font-family:var(--font-mono);
font-size:var(--fs-micro);
font-weight:700;
color:var(--ink);
}

.side-progress-info {
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
}

.side-progress-title {
font-size:var(--fs-tiny);
font-weight:600;
color:var(--ink);
}

.side-progress-sub {
font-size:var(--fs-label);
color:var(--ink-3);
}

.toc {
display:grid;
gap:2px;
}

.toc-group {
margin:var(--s3) 0 var(--s2);
padding-left:var(--s3);
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--ink-3);
}

.toc-group:first-child {
margin-top:0;
}

.toc-link {
position:relative;
display:flex;
align-items:center;
gap:var(--s3);
padding:var(--s2) var(--s3);
border:1px solid transparent;
border-radius:var(--r-md);
font-size:var(--fs-tiny);
font-weight:500;
color:var(--ink-2);
text-decoration:none;
transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast),transform var(--dur) var(--ease);
}

.toc-link::before {
content:"";
position:absolute;
left:0;
top:30%;
bottom:30%;
width:3px;
border-radius:3px;
background:var(--pine);
transform:scaleY(0);
transition:transform var(--dur) var(--ease);
}

.toc-link .icon {
width:16px;
height:16px;
color:var(--ink-3);
transition:color var(--dur-fast) ease;
}

.toc-link:hover {
background:var(--surface);
color:var(--ink);
transform:translateX(2px);
}

.toc-link.active {
background:var(--pine-soft);
border-color:var(--pine-line);
color:var(--pine-deep);
font-weight:600;
}

.toc-link.active::before {
transform:scaleY(1);
}

.toc-link.active .icon {
color:var(--pine);
}

.toc-no {
width:24px;
height:20px;
display:grid;
place-items:center;
border:1px solid var(--line-strong);
border-radius:var(--r-sm);
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:700;
color:var(--ink-3);
transition:background var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease;
}

.toc-link.active .toc-no,
.toc-link.done .toc-no {
background:var(--pine);
border-color:var(--pine);
color:var(--on-accent);
}

.side-foot {
padding:var(--s4) 0 0 var(--s3);
border-top:1px solid var(--line);
font-size:var(--fs-label);
font-weight:600;
letter-spacing:.1em;
color:var(--ink-3);
}

/* == Hero == */
.hero {
position:relative;
display:grid;
grid-template-columns:1.12fr .88fr;
gap:clamp(28px,4vw,56px);
align-items:center;
}

.hero::before {
content:"";
position:absolute;
inset:calc(var(--s5) * -1) calc(var(--gutter) * -1) calc(var(--s3) * -1);
background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:28px 28px;
opacity:.5;
-webkit-mask-image:radial-gradient(ellipse 62% 68% at 34% 30%,#000 30%,transparent 78%);
mask-image:radial-gradient(ellipse 62% 68% at 34% 30%,#000 30%,transparent 78%);
pointer-events:none;
}

.hero > * {
position:relative;
}

.hero-copy {
display:grid;
gap:var(--s4);
justify-items:start;
}

.hero-title {
font-size:var(--fs-hero);
font-weight:780;
line-height:.98;
color:var(--ink);
text-wrap:balance;
}

.hero-title em {
font-style:normal;
color:var(--pine);
background:linear-gradient(var(--pine-soft),var(--pine-soft)) 0 88%/100% .34em no-repeat;
padding-inline:.04em;
}

.hero-title .nb {
white-space:nowrap;
}

.hero-sub {
max-width:56ch;
font-size:var(--fs-small);
line-height:1.7;
color:var(--ink-2);
}

.callout {
display:flex;
align-items:flex-start;
gap:var(--s3);
max-width:60ch;
padding:var(--s3) var(--s4);
background:var(--pine-soft);
border:1px solid var(--pine-line);
border-left:3px solid var(--pine);
border-radius:var(--r-md);
}

.callout .icon {
width:16px;
height:16px;
margin-top:3px;
color:var(--pine);
}

.callout p {
font-size:var(--fs-tiny);
line-height:1.6;
color:var(--ink-2);
}

.callout-tag {
margin-right:var(--s2);
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--pine);
}

.meta-chips {
display:flex;
flex-wrap:wrap;
gap:var(--s2);
}

.chip-meta {
display:inline-flex;
align-items:center;
gap:var(--s2);
padding:var(--s2) var(--s3);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-full);
box-shadow:var(--shadow-sm);
font-size:var(--fs-tiny);
font-weight:550;
color:var(--ink-2);
}

.chip-meta .icon {
width:14px;
height:14px;
color:var(--pine);
}

/* == Console == */
.console {
overflow:hidden;
background:var(--c-bg);
border:1px solid var(--c-line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-lg),0 0 0 1px rgba(63,208,165,.08);
}

.console-head {
display:flex;
align-items:center;
gap:var(--s3);
padding:var(--s3) var(--s4);
border-bottom:1px solid var(--c-line);
}

.console-dots {
display:inline-flex;
gap:var(--s1);
}

.console-dots i {
width:8px;
height:8px;
border-radius:50%;
background:var(--c-dim);
}

.console-dots i:nth-child(1) {
background:#e5604d;
}

.console-dots i:nth-child(2) {
background:#e9b84a;
}

.console-dots i:nth-child(3) {
background:var(--c-acc);
}

.console-title {
flex:1;
font-size:var(--fs-label);
font-weight:600;
letter-spacing:.08em;
color:var(--c-dim);
}

.console-live {
display:inline-flex;
align-items:center;
gap:var(--s2);
font-size:var(--fs-label);
font-weight:700;
letter-spacing:.1em;
color:var(--c-acc);
}

.live-dot {
width:6px;
height:6px;
border-radius:50%;
background:var(--c-acc);
animation:pulse-dot 2s ease-out infinite;
}

.console-body {
display:grid;
gap:var(--s2);
padding:var(--s4);
font-size:var(--fs-micro);
line-height:1.5;
}

.console-line {
display:flex;
align-items:center;
gap:var(--s2);
color:var(--c-dim);
white-space:nowrap;
opacity:1;
}

.console-line.cmd {
color:var(--c-ink);
font-weight:500;
}

.prompt {
color:var(--c-acc);
font-weight:700;
}

.tick {
display:inline-flex;
color:var(--c-acc);
}

.tick .icon {
width:12px;
height:12px;
stroke-width:2.4;
}

.leader {
flex:1;
min-width:12px;
border-bottom:1px dashed var(--c-line-hi);
transform:translateY(-2px);
}

.cursor {
display:inline-block;
width:7px;
height:13px;
margin-left:var(--s2);
background:var(--c-acc);
vertical-align:-2px;
animation:blink 1.1s steps(2,start) infinite;
}

.console-foot {
display:grid;
grid-template-columns:1fr 1fr;
border-top:1px solid var(--c-line);
}

.console-stat {
display:flex;
flex-direction:column;
gap:var(--s1);
padding:var(--s3) var(--s4);
}

.console-stat + .console-stat {
border-left:1px solid var(--c-line);
}

.stat-label {
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--c-dim);
}

.stat-value {
font-family:var(--font-display);
font-size:1.5rem;
font-weight:700;
color:var(--c-ink);
}

.console-caption {
padding:var(--s2) var(--s4) var(--s3);
font-size:var(--fs-label);
font-style:italic;
color:var(--c-dim);
}

/* == Tracker == */
.tracker {
margin-top:clamp(40px,6vw,64px);
padding:var(--s5);
background:linear-gradient(180deg,var(--surface),var(--paper));
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-md);
}

.tracker-top {
display:flex;
flex-wrap:wrap;
align-items:flex-start;
justify-content:space-between;
gap:var(--s3) var(--s4);
margin-bottom:var(--s4);
}

.tracker-readout {
display:flex;
align-items:center;
gap:var(--s4);
}

.tracker-pct {
font-size:3rem;
font-weight:780;
line-height:1;
color:var(--pine);
font-variant-numeric:tabular-nums;
}

.pct-sign {
margin-left:2px;
font-size:1.4rem;
color:var(--ink-3);
}

.tracker-info {
display:flex;
flex-direction:column;
gap:2px;
}

.tracker-label {
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--ink-3);
}

.tracker-status {
font-size:var(--fs-tiny);
color:var(--ink-2);
}

.reset-progress {
flex-shrink:0;
padding:0;
background:none;
border:none;
cursor:pointer;
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--ink-3);
text-decoration:underline;
text-decoration-color:var(--line-strong);
text-underline-offset:4px;
transition:color var(--dur-fast) ease;
}

.reset-progress:hover {
color:var(--ink);
}

.tracker-segments {
display:flex;
gap:var(--s2);
}

.segment {
position:relative;
flex:1;
height:10px;
overflow:hidden;
background:var(--surface-2);
border-radius:var(--r-xs);
transition:background var(--dur) ease;
}

.segment::after {
content:"";
position:absolute;
inset:0;
border-radius:inherit;
background:linear-gradient(90deg,var(--pine),var(--pine-deep));
transform:scaleX(0);
transform-origin:0 50%;
transition:transform var(--dur-slow) var(--ease);
}

.segment.done::after {
transform:scaleX(1);
}

.tracker-segments.complete .segment {
background:var(--pine);
box-shadow:0 0 12px var(--pine-line);
}

.badges {
display:flex;
flex-wrap:wrap;
gap:var(--s2);
margin-top:var(--s4);
}

.badge {
display:inline-flex;
align-items:center;
gap:var(--s2);
padding:var(--s2) var(--s3);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-md);
font-size:var(--fs-micro);
font-weight:650;
letter-spacing:.01em;
color:var(--ink-2);
}

.badge .icon {
width:14px;
height:14px;
color:var(--pine);
}

.badge-ok {
background:var(--pine-soft);
border-color:var(--pine-line);
color:var(--pine-deep);
}

.badge-row {
display:flex;
flex-wrap:wrap;
gap:var(--s2);
margin:var(--s4) 0;
}

/* == Accordions == */
.acc {
position:relative;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
transition:border-color var(--dur) ease,box-shadow var(--dur) ease,transform var(--dur) var(--ease);
}

.acc:hover {
border-color:var(--line-strong);
transform:translateY(-1px);
}

.acc.open {
border-color:var(--pine-line);
box-shadow:var(--shadow-md);
transform:none;
}

.acc.open::before {
content:"";
position:absolute;
left:-1px;
top:var(--s4);
bottom:var(--s4);
width:3px;
border-radius:0 3px 3px 0;
background:var(--pine);
}

.rail-row.warn .acc.open {
border-color:var(--amber-line);
}

.rail-row.warn .acc.open::before {
background:var(--amber);
}

.acc-h {
margin:0;
}

.acc-btn {
width:100%;
display:flex;
align-items:center;
gap:var(--s4);
padding:var(--s4);
background:none;
border:none;
border-radius:var(--r-lg);
cursor:pointer;
text-align:left;
}

.acc-tile {
width:44px;
height:44px;
display:grid;
place-items:center;
flex-shrink:0;
background:var(--surface-2);
border:1px solid var(--line-strong);
border-radius:var(--r-md);
font-family:var(--font-mono);
font-size:var(--fs-tiny);
font-weight:700;
color:var(--ink-2);
transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}

.acc-tile .icon {
width:20px;
height:20px;
}

.acc.open .acc-tile {
background:var(--pine);
border-color:var(--pine);
color:var(--on-accent);
box-shadow:0 8px 16px -8px var(--pine);
}

.rail-row.warn .acc.open .acc-tile {
background:var(--amber);
border-color:var(--amber);
box-shadow:0 8px 16px -8px var(--amber);
}

.acc-heading {
flex:1;
min-width:0;
display:flex;
flex-direction:column;
gap:2px;
}

.acc-kicker {
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--ink-3);
transition:color var(--dur-fast) ease;
}

.acc.open .acc-kicker {
color:var(--pine);
}

.rail-row.warn .acc.open .acc-kicker {
color:var(--amber);
}

.acc-title {
font-family:var(--font-display);
font-size:var(--fs-title);
font-weight:650;
letter-spacing:-.015em;
line-height:1.3;
color:var(--ink);
}

.acc-meta {
flex-shrink:0;
padding:var(--s1) var(--s3);
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--r-full);
font-size:var(--fs-label);
font-weight:600;
color:var(--ink-3);
white-space:nowrap;
}

.acc-chevron {
width:32px;
height:32px;
display:grid;
place-items:center;
flex-shrink:0;
border:1px solid var(--line);
border-radius:var(--r-full);
color:var(--ink-3);
transition:transform var(--dur-slow) var(--spring),border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast);
}

.acc-chevron .icon {
width:14px;
height:14px;
}

.acc:hover .acc-chevron {
background:var(--pine-soft);
}

.acc.open .acc-chevron {
transform:rotate(180deg);
border-color:var(--pine-line);
color:var(--pine);
}

.rail-row.warn .acc.open .acc-chevron {
border-color:var(--amber-line);
color:var(--amber);
}

.acc-panel {
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows var(--dur-slow) var(--ease);
}

.acc.open .acc-panel {
grid-template-rows:1fr;
}

.acc-panel-inner {
min-height:0;
overflow:hidden;
opacity:0;
transition:opacity var(--dur) ease;
}

.acc.open .acc-panel-inner {
opacity:1;
transition-delay:.1s;
}

.acc-body {
margin:0 var(--s4) var(--s5);
padding-top:var(--s4);
border-top:1px solid var(--line);
}

.acc-body > p {
margin-bottom:var(--s3);
}

/* == Timeline Rail == */
.rail-section {
margin-top:clamp(56px,8vw,80px);
}

.rail-heading {
display:grid;
gap:var(--s3);
margin-bottom:var(--s6);
padding-top:clamp(32px,5vw,48px);
border-top:1px solid var(--line);
}

.rail-heading .kicker {
justify-self:start;
}

.rail-heading-line {
display:none;
}

.steps-rail {
position:relative;
display:grid;
gap:var(--s3);
padding-left:40px;
}

.steps-rail::before {
content:"";
position:absolute;
left:12px;
top:34px;
bottom:34px;
width:2px;
background:repeating-linear-gradient(to bottom,var(--line-strong) 0 4px,transparent 4px 9px);
}

.rail-row {
position:relative;
}

.rail-marker {
position:absolute;
left:-34px;
top:32px;
z-index:1;
width:14px;
height:14px;
background:var(--paper);
border:2px solid var(--line-strong);
border-radius:50%;
transition:background var(--dur) ease,border-color var(--dur) ease,box-shadow var(--dur) ease;
}

.rail-row:has(.acc.open) .rail-marker {
background:var(--pine);
border-color:var(--pine);
box-shadow:0 0 0 5px var(--pine-soft);
animation:pulse-dot 2.4s ease-out infinite;
}

.rail-row.warn:has(.acc.open) .rail-marker {
background:var(--amber);
border-color:var(--amber);
box-shadow:0 0 0 5px var(--amber-soft);
}

/* == Content == */
.feature-list {
list-style:none;
margin:0;
padding:0;
display:grid;
gap:var(--s3);
}

.feature-list li {
position:relative;
padding-left:var(--s5);
font-size:var(--fs-small);
line-height:1.65;
color:var(--ink-2);
}

.feature-list li::before {
content:"";
position:absolute;
left:4px;
top:.7em;
width:6px;
height:6px;
border-radius:50%;
background:var(--pine);
box-shadow:0 0 0 3px var(--pine-soft);
}

.feature-list strong,
.acc-body strong {
font-weight:620;
color:var(--ink);
}

.acc-body p {
font-size:var(--fs-small);
line-height:1.7;
color:var(--ink-2);
}

.acc-body code {
padding:2px 6px;
background:var(--surface-2);
border:1px solid var(--line);
border-radius:var(--r-sm);
font-family:var(--font-mono);
font-size:.85em;
color:var(--ink);
overflow-wrap:anywhere;
}

.step {
padding:var(--s4) 0;
border-top:1px solid var(--line);
}

.step:first-of-type {
padding-top:0;
border-top:none;
}

.step-head {
display:flex;
align-items:baseline;
gap:var(--s3);
margin-bottom:var(--s2);
}

.step-no {
font-family:var(--font-mono);
font-size:var(--fs-micro);
font-weight:700;
letter-spacing:.04em;
color:var(--pine);
}

.step-head h4 {
font-size:var(--fs-small);
font-weight:620;
letter-spacing:-.005em;
color:var(--ink);
}

.step p {
margin:0;
}

.numbered {
list-style:none;
counter-reset:n;
margin:0 0 var(--s3);
padding:0;
display:grid;
gap:var(--s3);
}

.numbered li {
counter-increment:n;
position:relative;
padding-left:40px;
font-size:var(--fs-small);
line-height:1.65;
color:var(--ink-2);
}

.numbered li::before {
content:counter(n,decimal-leading-zero);
position:absolute;
left:0;
top:.1em;
width:28px;
height:22px;
display:grid;
place-items:center;
background:var(--pine-soft);
border:1px solid var(--pine-line);
border-radius:var(--r-sm);
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:700;
color:var(--pine);
}

.cadence-title {
display:flex;
align-items:center;
gap:var(--s3);
margin:var(--s5) 0 var(--s3);
font-size:var(--fs-label);
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--ink-3);
}

.cadence-title::after {
content:"";
flex:1;
height:1px;
background:var(--line);
}

.cadence-title:first-of-type {
margin-top:var(--s4);
}

/* == Tables == */
.table-wrapper {
overflow-x:auto;
margin:var(--s4) 0;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-sm);
scrollbar-width:thin;
-webkit-overflow-scrolling:touch;
}

.acc-body .table-wrapper {
background:var(--paper);
}

table {
width:100%;
min-width:560px;
border-collapse:collapse;
font-size:var(--fs-mini);
}

thead th {
padding:var(--s3) var(--s4);
background:var(--surface-2);
border-bottom:1px solid var(--line);
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
text-align:left;
color:var(--ink-2);
white-space:nowrap;
}

tbody td {
padding:var(--s3) var(--s4);
border-top:1px solid var(--line);
color:var(--ink-2);
vertical-align:middle;
line-height:1.55;
}

tbody tr:first-child td {
border-top:none;
}

tbody tr {
transition:background var(--dur-fast) ease;
}

tbody tr:nth-child(even) {
background:color-mix(in srgb,var(--surface-2) 40%,transparent);
}

tbody tr:hover {
background:var(--pine-soft);
}

tbody td:first-child {
font-family:var(--font-display);
font-weight:600;
color:var(--ink);
white-space:nowrap;
}

thead th:nth-child(2),
tbody td:nth-child(2) {
min-width:200px;
width:30%;
}

.mono-text {
font-family:var(--font-mono);
font-size:var(--fs-micro);
color:var(--ink-2);
white-space:nowrap;
}

.copy-cell {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:var(--s2) var(--s3);
}

.copy-btn {
flex-shrink:0;
min-width:58px;
padding:var(--s1) var(--s3);
background:var(--surface);
border:1px solid var(--line-strong);
border-radius:var(--r-sm);
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:600;
color:var(--ink-2);
text-align:center;
cursor:pointer;
transition:background var(--dur-fast) ease,color var(--dur-fast) ease,border-color var(--dur-fast) ease,transform var(--dur-fast) ease;
}

.copy-btn:hover {
color:var(--pine);
border-color:var(--pine-line);
}

.copy-btn.copied {
background:var(--pine);
border-color:var(--pine);
color:var(--on-accent);
animation:pop var(--dur) var(--spring);
}

.copy-all-row {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:var(--s3);
margin:0 0 var(--s3);
font-size:var(--fs-tiny);
color:var(--ink-3);
}

.pill {
display:inline-flex;
align-items:center;
gap:var(--s2);
padding:var(--s1) var(--s3);
border-radius:var(--r-sm);
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
white-space:nowrap;
}

.pill::before {
content:"";
width:5px;
height:5px;
border-radius:50%;
background:currentColor;
}

.pill-required {
background:var(--pine);
border:1px solid var(--pine);
color:var(--on-accent);
}

.pill-recommended {
background:var(--paper);
border:1px solid var(--line-strong);
color:var(--ink-2);
}

.pill-optional {
background:transparent;
border:1px dashed var(--line-strong);
color:var(--ink-3);
}

.table-caption {
margin-top:calc(var(--s2) * -1);
margin-bottom:var(--s3);
font-size:var(--fs-tiny);
font-style:italic;
color:var(--ink-3);
}

/* == Checklists == */
.check-group {
display:grid;
gap:var(--s2);
margin:var(--s3) 0;
padding:var(--s3);
background:var(--surface-2);
border:1px solid var(--line);
border-radius:var(--r-lg);
}

.check {
display:flex;
align-items:flex-start;
gap:var(--s3);
padding:var(--s3) var(--s4);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-md);
transition:border-color var(--dur-fast) ease,transform var(--dur-fast) var(--ease),background var(--dur-fast) ease;
}

.check:hover {
border-color:var(--pine-line);
transform:translateX(2px);
}

.check.checked,
.check:has(input:checked) {
background:var(--pine-soft);
border-color:var(--pine-line);
}

.check input[type="checkbox"] {
appearance:none;
-webkit-appearance:none;
position:relative;
flex-shrink:0;
width:20px;
height:20px;
margin:2px 0 0;
background:var(--surface);
border:1.5px solid var(--line-strong);
border-radius:var(--r-xs);
cursor:pointer;
transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease;
}

.check input[type="checkbox"]:hover {
border-color:var(--pine);
}

.check input[type="checkbox"]:checked {
background:var(--pine);
border-color:var(--pine);
box-shadow:0 0 0 3px var(--pine-soft);
}

.check input[type="checkbox"]::after {
content:"";
position:absolute;
left:5.5px;
top:1.5px;
width:5px;
height:10px;
border-right:2px solid var(--on-accent);
border-bottom:2px solid var(--on-accent);
transform:rotate(45deg) scale(.3);
opacity:0;
transition:transform var(--dur-fast) var(--spring),opacity var(--dur-fast) ease;
}

.check input[type="checkbox"]:checked::after {
transform:rotate(45deg) scale(1);
opacity:1;
}

.check label {
display:block;
min-width:0;
cursor:pointer;
}

.check-label {
display:block;
font-size:var(--fs-mini);
font-weight:550;
line-height:1.5;
color:var(--ink);
transition:color var(--dur-fast) ease;
}

.check-desc {
display:block;
margin-top:var(--s1);
font-size:var(--fs-tiny);
line-height:1.6;
color:var(--ink-3);
transition:color var(--dur-fast) ease;
}

.check.checked .check-label {
color:var(--ink-3);
text-decoration:line-through;
text-decoration-thickness:1px;
}

.check.checked .check-desc {
opacity:.75;
}

/* == Metrics == */
.metrics {
display:grid;
gap:var(--s5);
margin:var(--s4) 0;
padding:var(--s5);
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--r-lg);
box-shadow:var(--shadow-sm);
}

.acc-body .metrics {
background:var(--paper);
}

.metric {
display:grid;
gap:var(--s2);
}

.metric-top {
display:flex;
align-items:baseline;
justify-content:space-between;
gap:var(--s3);
margin-bottom:var(--s1);
}

.metric-name {
font-family:var(--font-display);
font-size:var(--fs-mini);
font-weight:650;
letter-spacing:-.015em;
color:var(--ink);
}

.metric-delta {
padding:var(--s1) var(--s2);
background:var(--pine-soft);
border:1px solid var(--pine-line);
border-radius:var(--r-sm);
font-family:var(--font-mono);
font-size:var(--fs-label);
font-weight:700;
color:var(--pine-deep);
white-space:nowrap;
}

.metric-row {
display:grid;
grid-template-columns:50px 1fr 58px;
align-items:center;
gap:var(--s3);
}

.metric-row + .metric-row {
margin-top:2px;
}

.metric-tag {
font-size:var(--fs-label);
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--ink-3);
}

.metric-track {
position:relative;
height:12px;
overflow:hidden;
background:repeating-linear-gradient(90deg,var(--surface-2) 0 calc(10% - 2px),transparent calc(10% - 2px) 10%),var(--surface-2);
border-radius:var(--r-xs);
}

.metric-fill {
position:relative;
height:100%;
width:0;
overflow:hidden;
border-radius:var(--r-xs);
transition:width var(--dur-slower) var(--ease) .15s;
}

.metric-fill.before {
background:repeating-linear-gradient(-45deg,var(--line-strong) 0 3px,transparent 3px 7px);
}

.metric-fill.after {
background:linear-gradient(90deg,var(--pine),var(--pine-deep));
box-shadow:inset 0 -1px 0 var(--shc-sm);
}

.metric-fill.after::after {
content:"";
position:absolute;
inset:0;
background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
transform:translateX(-100%);
animation:sheen 3.2s ease-in-out 1.2s infinite;
}

.metric-val {
font-family:var(--font-mono);
font-size:var(--fs-micro);
font-weight:600;
font-variant-numeric:tabular-nums;
color:var(--ink);
text-align:right;
}

/* == Sections & Cards == */
.section {
margin-top:clamp(56px,8vw,80px);
}

.section-head {
display:grid;
gap:var(--s3);
margin-bottom:var(--s5);
}

.section-head .kicker {
justify-self:start;
}

.section-sub {
max-width:60ch;
font-size:var(--fs-small);
line-height:1.7;
color:var(--ink-2);
}

.cards {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:var(--s4);
}

.card {
position:relative;
overflow:hidden;
padding:var(--s5);
background:linear-gradient(180deg,var(--surface),var(--paper));
border:1px solid var(--line);
border-radius:var(--r-lg);
transition:transform var(--dur) var(--ease),box-shadow var(--dur) ease,border-color var(--dur) ease;
}

.card::after {
content:"";
position:absolute;
inset:0 0 auto;
height:3px;
background:linear-gradient(90deg,var(--pine),var(--amber));
transform:scaleX(0);
transform-origin:left;
transition:transform var(--dur-slow) var(--ease);
}

.card:hover {
transform:translateY(-3px);
border-color:var(--pine-line);
box-shadow:var(--shadow-md);
}

.card:hover::after {
transform:scaleX(1);
}

.card-no {
position:absolute;
top:var(--s3);
right:var(--s4);
font-family:var(--font-display);
font-size:1.6rem;
font-weight:800;
color:transparent;
-webkit-text-stroke:1px var(--line-strong);
transition:-webkit-text-stroke-color var(--dur) ease;
}

.card:hover .card-no {
-webkit-text-stroke-color:var(--pine);
}

.card-icon {
width:40px;
height:40px;
display:grid;
place-items:center;
margin-bottom:var(--s4);
background:var(--pine-soft);
border:1px solid var(--pine-line);
border-radius:var(--r-md);
color:var(--pine);
transition:transform var(--dur) var(--spring);
}

.card:hover .card-icon {
transform:scale(1.08) rotate(-4deg);
}

.card-icon .icon {
width:20px;
height:20px;
}

.card-title {
margin-bottom:var(--s2);
font-family:var(--font-display);
font-size:var(--fs-title);
font-weight:650;
letter-spacing:-.015em;
color:var(--ink);
}

.card-desc {
font-size:var(--fs-tiny);
line-height:1.65;
color:var(--ink-2);
}

/* == Footer == */
.site-footer {
margin-top:var(--s8);
background:linear-gradient(180deg,var(--surface),var(--paper));
border-top:1px solid var(--line);
}

.footer-grid {
max-width:var(--layout-max);
margin:0 auto;
padding:clamp(36px,5vw,56px) var(--gutter) var(--s7);
display:grid;
grid-template-columns:1.25fr .85fr .9fr;
gap:clamp(28px,4vw,48px);
}

.footer-brand .brand {
margin-bottom:var(--s4);
}

.footer-tagline {
max-width:38ch;
font-size:var(--fs-tiny);
line-height:1.7;
color:var(--ink-3);
}

.footer-col {
display:grid;
gap:var(--s3);
align-content:start;
}

.footer-col-title {
margin-bottom:var(--s1);
font-size:var(--fs-label);
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--ink-3);
}

.footer-col a {
width:fit-content;
font-size:var(--fs-tiny);
color:var(--ink-2);
text-decoration:none;
background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
transition:background-size var(--dur) var(--ease),color var(--dur-fast) ease;
}

.footer-col a:hover {
color:var(--ink);
background-size:100% 1px;
}

.footer-bar {
border-top:1px solid var(--line);
}

.footer-bar-inner {
max-width:var(--layout-max);
margin:0 auto;
padding:var(--s4) var(--gutter);
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:var(--s2) var(--s4);
font-size:var(--fs-tiny);
color:var(--ink-3);
}

.footer-links {
display:flex;
gap:var(--s4);
}

.footer-links a {
color:var(--ink-3);
text-decoration:none;
transition:color var(--dur-fast) ease;
}

.footer-links a:hover {
color:var(--ink);
}

/* == Back To Top == */
.to-top {
position:fixed;
right:max(var(--s5),env(safe-area-inset-right));
bottom:max(var(--s5),env(safe-area-inset-bottom));
z-index:90;
width:var(--tap);
height:var(--tap);
display:grid;
place-items:center;
background:var(--surface);
border:1px solid var(--line-strong);
border-radius:var(--r-md);
box-shadow:var(--shadow-md);
color:var(--ink-2);
cursor:pointer;
opacity:0;
transform:translateY(10px);
pointer-events:none;
transition:opacity var(--dur) ease,transform var(--dur) var(--ease),color var(--dur-fast) ease,border-color var(--dur-fast) ease;
}

.to-top.show {
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

.to-top:hover {
color:var(--pine);
border-color:var(--pine-line);
transform:translateY(-3px);
}

.to-top .icon {
width:18px;
height:18px;
}

/* == Reveal == */
html.js [data-reveal] {
opacity:0;
filter:blur(4px);
transform:translateY(14px);
transition:opacity var(--dur-slower) var(--ease) var(--d,0ms),transform var(--dur-slower) var(--ease) var(--d,0ms),filter var(--dur-slower) var(--ease) var(--d,0ms);
}

html.js [data-reveal].in-view {
opacity:1;
filter:none;
transform:none;
}

html.js .console[data-reveal]:not(.in-view) .console-line {
opacity:0;
}

html.js .console.in-view .console-line {
animation:line-in var(--dur-slow) var(--ease) both;
}

html.js .console.in-view .console-line:nth-child(1) {
animation-delay:.1s;
}

html.js .console.in-view .console-line:nth-child(2) {
animation-delay:.3s;
}

html.js .console.in-view .console-line:nth-child(3) {
animation-delay:.44s;
}

html.js .console.in-view .console-line:nth-child(4) {
animation-delay:.58s;
}

html.js .console.in-view .console-line:nth-child(5) {
animation-delay:.72s;
}

html.js .console.in-view .console-line:nth-child(6) {
animation-delay:.9s;
}

@keyframes line-in {
from {
opacity:0;
transform:translateX(-8px);
}
to {
opacity:1;
transform:none;
}
}

@keyframes blink {
50% {
opacity:0;
}
}

@keyframes pulse-dot {
0% {
box-shadow:0 0 0 0 var(--pine-line);
}
70% {
box-shadow:0 0 0 7px transparent;
}
100% {
box-shadow:0 0 0 0 transparent;
}
}

@keyframes pop {
50% {
transform:scale(1.12);
}
}

@keyframes sheen {
60%,100% {
transform:translateX(100%);
}
}

/* == Responsive == */
@media (pointer:coarse) {
.theme-toggle,
.header-link {
min-width:var(--tap);
min-height:var(--tap);
justify-content:center;
}

.chip,
.copy-btn,
.reset-progress {
min-height:var(--tap);
}

.toc-link {
min-height:var(--tap);
}
}

@media (min-width:1500px) {
:root {
--layout-max:1320px;
}
}

@media (max-width:1120px) {
.sidebar {
display:none;
}

.chip-nav {
display:block;
}

.layout {
grid-template-columns:minmax(0,1fr);
}

.main {
max-width:none;
justify-self:stretch;
}
}

@media (max-width:1024px) {
.hero {
grid-template-columns:1fr;
}

.console {
max-width:560px;
}
}

@media (max-width:900px) {
.cards {
grid-template-columns:repeat(2,1fr);
}

.footer-grid {
grid-template-columns:1fr 1fr;
}

.footer-brand {
grid-column:1 / -1;
}
}

@media (max-width:768px) {
:root {
--header-h:56px;
}

.brand-name {
font-size:var(--fs-tiny);
}

.header-link span {
display:none;
}

.header-link {
padding:var(--s2) var(--s3);
}

.tracker {
padding:var(--s4);
}

.tracker-readout {
gap:var(--s3);
}

.tracker-pct {
font-size:2.4rem;
}

.acc-btn {
padding:var(--s3);
gap:var(--s3);
}

.acc-tile {
width:40px;
height:40px;
font-size:var(--fs-micro);
}

.acc-tile .icon {
width:18px;
height:18px;
}

.acc-title {
font-size:var(--fs-small);
}

.acc-meta {
display:none;
}

.acc-body {
margin:0 var(--s3) var(--s4);
}

.steps-rail {
padding-left:30px;
}

.steps-rail::before {
left:8px;
}

.rail-marker {
left:-29px;
top:28px;
width:12px;
height:12px;
}

.metric-row {
grid-template-columns:44px 1fr 52px;
}

.metrics {
padding:var(--s4);
}

.footer-grid {
grid-template-columns:1fr;
gap:var(--s5);
}
}

@media (max-width:560px) {
.cards {
grid-template-columns:1fr;
}

.console-foot {
grid-template-columns:1fr;
}

.console-stat + .console-stat {
border-left:none;
border-top:1px solid var(--c-line);
}

.badges {
gap:var(--s2);
}

.badge {
padding:var(--s2) var(--s3);
font-size:var(--fs-label);
}

.copy-all-row {
flex-direction:column;
align-items:flex-start;
}
}

/* == Motion == */
@media (prefers-reduced-motion:reduce) {
:root {
--dur-fast:0s;
--dur:0s;
--dur-slow:0s;
--dur-slower:0s;
}

html {
scroll-behavior:auto;
}

html.js [data-reveal] {
opacity:1;
filter:none;
transform:none;
transition:none;
}

html.js .console.in-view .console-line {
animation:none;
}

.acc-panel-inner {
opacity:1;
}

.cursor,
.live-dot,
.copy-btn.copied,
.metric-fill.after::after,
.rail-row:has(.acc.open) .rail-marker {
animation:none;
}

.acc.open .acc-panel-inner,
.metric-fill {
transition-delay:0s;
}
}

/* == Print == */
@media print {
:root,
:root[data-theme="dark"] {
--paper:#fff;
--surface:#fff;
--surface-2:#f2f2f2;
--ink:#111;
--ink-2:#333;
--ink-3:#555;
--line:#ddd;
--line-strong:#bbb;
--pine:#1e4638;
--pine-deep:#1e4638;
--pine-ink:#1e4638;
--pine-soft:#edf3ee;
--pine-line:#b7cec1;
--amber:#7a4d16;
--amber-soft:#f7ecd8;
--amber-line:#dfc69c;
--on-accent:#fff;
--shadow-sm:none;
--shadow-md:none;
--shadow-lg:none;
color-scheme:light;
}

html .scroll-progress,
html .site-header,
html .chip-nav,
html .sidebar,
html .to-top,
html .console,
html .badges,
html .acc-chevron,
html .skip-link,
html .reset-progress {
display:none;
}

html {
scroll-behavior:auto;
}

body {
font-size:12px;
}

html .acc,
html .acc.open {
box-shadow:none;
break-inside:avoid;
}

html .acc-panel {
grid-template-rows:1fr;
}

html .acc-panel-inner {
overflow:visible;
opacity:1;
}

html.js [data-reveal] {
opacity:1;
filter:none;
transform:none;
}

.metric-fill.after::after {
display:none;
}

.table-wrapper,
.card,
.check,
.metric,
.step {
break-inside:avoid;
}

.rail-section,
.section {
margin-top:32px;
}

a {
text-decoration:none;
color:inherit;
}

.footer-col a[href^="http"]::after {
content:" (" attr(href) ")";
font-size:10px;
color:#555;
}
}