/* Able Generation 2.0: motion sheets, cobalt fields and real editor frames. */
@font-face { font-family: Barlow; src: url("fonts/Barlow-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Barlow; src: url("fonts/Barlow-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/BarlowCondensed-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
:root { color-scheme: light; --paper:#f4f6f5; --paper-2:#e8edf7; --ink:#18212f; --ink-2:#414e62; --muted:#56647a; --rule:#cbd2dc; --signal:#2446d8; --signal-hover:#1735b7; --stage:#181b22; --white:#fff; --cover-muted:#d8e2ff; --marker:#f5dc79; --cond:"Barlow Condensed",sans-serif; --body:Barlow,sans-serif; --mono:Consolas,"Liberation Mono",monospace; --margin:84px; --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; scrollbar-color:#8594c6 var(--paper); }
body { margin:0; background:var(--paper); color:var(--ink); font:18px/1.6 var(--body); -webkit-font-smoothing:antialiased; caret-color:var(--signal); }
::selection { background:var(--marker); color:var(--ink); }
:focus-visible { outline:3px solid var(--signal); outline-offset:5px; }
a { color:var(--signal); text-decoration-thickness:1px; text-underline-offset:4px; }
a:hover { color:var(--signal-hover); }
strong,b { font-weight:600; }
code { font:500 .82em var(--mono); background:var(--paper-2); padding:3px 6px; overflow-wrap:anywhere; }
button { touch-action:manipulation; }
button:disabled { opacity:.45; cursor:default; }
main { margin:0; padding:0; }
main > .contents,main > .chapter,main > .notes { max-width:1344px; margin-inline:auto; padding-inline:48px; }
/* The running header retains its existing behaviour. */
.bar { position:sticky; top:0; z-index:10; color:var(--white); background:var(--signal); border-bottom:1px solid #ffffff40; }
.bar nav { max-width:1344px; min-height:64px; padding:10px 48px; margin:auto; display:flex; gap:28px; align-items:center; font:600 14px var(--body); }
.bar a { color:inherit; text-decoration:none; }
.bar a:hover { color:var(--marker); }
.mark { font:700 26px/1 var(--cond); white-space:nowrap; }
.mark span { color:var(--marker); padding:0 4px; }
.where { display:flex; align-items:center; gap:12px; margin-right:auto; min-width:0; }
.where-n { font-variant-numeric:tabular-nums; color:var(--marker); }
.where-t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar button { font:inherit; color:var(--white); background:transparent; border:1px solid #ffffff90; padding:10px 14px; cursor:pointer; white-space:nowrap; transition:background .2s var(--ease),color .2s var(--ease); }
.bar button:hover { color:var(--signal); background:var(--white); }
.bar :focus-visible,.cover :focus-visible { outline-color:var(--marker); }
.gh { white-space:nowrap; }
/* One cobalt field: title and existing drawing, then document metadata. */
.cover { display:flex; flex-direction:column; color:var(--white); background:var(--signal); padding:56px max(48px,calc((100% - 1248px) / 2)) 0; }
.cover-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.16fr); gap:48px; align-items:center; }
.cover-copy { padding-bottom:42px; }
h1 { margin:0; font:700 96px/.92 var(--cond); letter-spacing:-.025em; }
.h1-a { display:block; text-transform:uppercase; }
.h1-b { display:block; margin-top:12px; font-size:42px; line-height:1.05; font-weight:600; letter-spacing:-.01em; }
.tagline { margin:28px 0 14px; max-width:25ch; font:600 27px/1.2 var(--body); text-wrap:balance; }
.lede { margin:0; max-width:43ch; color:var(--cover-muted); font-size:18px; line-height:1.55; }
.built { margin:20px 0 0; max-width:49ch; color:var(--cover-muted); font-size:13px; line-height:1.5; }
.cta { display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin:26px 0 0; }
.cta a { color:var(--white); font:600 14px var(--body); text-underline-offset:6px; }
.cta a:first-child { background:var(--white); color:var(--signal); padding:13px 18px; text-decoration:none; }
.cta a:first-child:hover { background:var(--marker); }
.cta a:last-child:hover { color:var(--marker); }
.docline { order:2; display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px; margin-top:12px; padding:16px 0 18px; border-top:1px solid #ffffff50; color:var(--cover-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.docline span:last-child { margin-left:auto; }
.drawing-wrap { margin:0; min-width:0; padding-bottom:36px; }
.drawing { display:block; width:100%; height:auto; overflow:visible; }
.drawing .sheet { fill:none; stroke:#ffffff45; stroke-width:1; }
.drawing line,.drawing circle,.drawing path { fill:none; stroke:var(--white); stroke-dasharray:1; stroke-dashoffset:.38; animation:trace 1.1s var(--ease) both; animation-delay:calc(var(--i) * 13ms); }
.drawing .ink { stroke-width:1.8; }
.drawing .thin { stroke-width:.9; opacity:.7; stroke-dasharray:none; animation:none; }
.drawing .centre { stroke-width:.9; opacity:.65; stroke-dasharray:12 3 2 3; stroke-dashoffset:0; animation:none; }
.drawing .ext { stroke-width:.9; opacity:.8; }
.drawing .dimline,.drawing .leader { stroke:var(--marker); stroke-width:1.3; }
.drawing .section { fill:#ffffff20; stroke:var(--white); stroke-width:1.5; }
.drawing text { font:400 13px var(--body); fill:var(--white); }
.drawing .dim { fill:var(--marker); font-weight:600; }
.drawing .label { font:600 12px var(--body); letter-spacing:.06em; fill:var(--cover-muted); }
.drawing .block { fill:var(--signal); stroke:#ffffff70; stroke-width:1; }
.drawing .block-title { font:700 15px var(--cond); letter-spacing:.025em; }
.drawing .block-key { font-size:11px; fill:var(--cover-muted); }
.drawing .block-val { font-size:12px; }
.drawing-wrap figcaption { margin-top:12px; max-width:49ch; font:13px/1.5 var(--body); color:var(--cover-muted); }
.drawing-wrap .fig-no { color:var(--marker); display:inline; padding-right:8px; background:transparent; }
@keyframes trace { from { stroke-dashoffset:.38; } to { stroke-dashoffset:0; } }
/* A typographic exposure sheet, with no card shells. */
.contents { padding:48px 0 38px; border-bottom:1px solid var(--rule); }
.contents-title { font:700 42px/1 var(--cond); margin:0 0 24px; }
.toc { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; list-style:none; padding:0; margin:0; }
.toc li { min-width:0; padding:16px 0; border-top:1px solid var(--rule); }
.toc a { display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:baseline; gap:10px; color:var(--ink); text-decoration:none; }
.toc a:hover .t { color:var(--signal); text-decoration:underline; text-underline-offset:4px; }
.toc .n { color:var(--signal); font:600 15px var(--body); font-variant-numeric:tabular-nums; }
.toc .t { font:600 24px/1.08 var(--cond); text-wrap:balance; }
.toc .leader { display:none; }
.toc .p { color:var(--muted); font-size:12px; white-space:nowrap; }
.toc .s { display:block; margin:7px 0 0 35px; color:var(--ink-2); font-size:13px; line-height:1.4; }
.howto { display:grid; grid-template-columns:1fr 1fr; gap:10px 32px; margin-top:24px; color:var(--muted); font-size:13px; line-height:1.5; }
.howto p { margin:0; }
.howto p:last-child { grid-column:1 / -1; padding-top:10px; font-variant-numeric:tabular-nums; }
/* Chapters and screenshot stages. */
.chapter { display:grid; grid-template-columns:var(--margin) minmax(0,1fr); gap:36px; padding:68px 0 48px; border-bottom:1px solid var(--rule); }
.margin { align-self:start; position:sticky; top:90px; }
.margin .sec { display:none; }
.margin .big { display:block; color:var(--signal); font:600 76px/.9 var(--cond); font-variant-numeric:tabular-nums; }
.margin dl { margin:20px 0 0; font-size:11px; line-height:1.4; }
.margin dt { color:var(--muted); }
.margin dd { margin:3px 0 12px; font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; }
.chapter-main { min-width:0; }
.runner { display:none; }
.chapter h2 { max-width:23ch; margin:0; font:700 clamp(38px,4.3vw,60px)/1 var(--cond); letter-spacing:-.015em; text-wrap:balance; }
.subtitle { margin:18px 0 0; color:var(--signal); font:600 21px/1.35 var(--body); max-width:60ch; }
.chapter-head + p { font-size:19px; margin:16px 0 28px; max-width:68ch; }
.chapter h3 { margin:38px 0 12px; font:600 28px/1.15 var(--cond); }
.chapter-main > p { max-width:70ch; }
.plate { margin:30px 0 22px; background:var(--stage); }
.fig-no { display:block; padding:9px 14px; color:#d6dce8; font:600 12px/1.4 var(--body); font-variant-numeric:tabular-nums; }
.plate img { display:block; width:auto; max-width:100%; height:auto; max-height:780px; margin:0 auto; cursor:zoom-in; }
.plate img:focus-visible { outline-offset:-4px; outline-color:var(--marker); }
.plate figcaption { margin:0; padding:13px 12px 15px; background:var(--paper); color:var(--ink-2); border-bottom:1px solid var(--rule); font:14px/1.5 var(--body); }
.plate figcaption strong { color:var(--ink); }
.plates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:30px 0; align-items:start; }
.plates .plate { margin:0; min-width:0; }
.chapter ul { list-style:none; padding:0; margin:24px 0; max-width:72ch; }
.chapter li { padding:12px 0; border-bottom:1px solid var(--rule); font-size:16px; }
.chapter li:first-child { border-top:1px solid var(--rule); }
table { width:100%; border-collapse:collapse; margin:24px 0; font-size:15px; line-height:1.5; }
th { text-align:left; color:var(--ink-2); padding:10px 16px; background:var(--paper-2); font:600 13px var(--body); border-bottom:1px solid var(--rule); }
td { padding:13px 16px; border-bottom:1px solid var(--rule); vertical-align:top; }
td:first-child { font-weight:600; }
/* Folded sheets retain their existing screenshots and code directories. */
.spec { background:var(--paper-2); margin:32px 0 12px; border-top:1px solid #b8c5e8; border-bottom:1px solid #b8c5e8; }
.spec > summary { display:flex; align-items:center; gap:16px; padding:18px 22px; list-style:none; cursor:pointer; font:600 25px/1.15 var(--cond); color:var(--ink); transition:background .2s var(--ease); }
.spec > summary::-webkit-details-marker { display:none; }
.spec > summary strong { font-weight:600; }
.spec > summary:hover { background:#dce4fa; }
.spec-toggle { position:relative; width:30px; height:30px; flex:none; background:var(--signal); }
.spec-toggle::before,.spec-toggle::after { content:""; position:absolute; background:var(--white); inset:14px 8px; }
.spec-toggle::after { inset:8px 14px; transition:transform .2s var(--ease); }
.spec[open] .spec-toggle::after { transform:scaleY(0); }
.spec[open] > summary { border-bottom:1px solid #b8c5e8; }
.spec > :not(summary) { margin-left:24px; margin-right:24px; }
.spec > :last-child { margin-bottom:24px; }
.spec p { font-size:16px; max-width:72ch; }
.spec .plate figcaption { background:var(--paper-2); }
.parts-heading { margin-top:36px !important; font:13px var(--body); color:var(--muted); }
.parts-heading span { color:var(--signal); font-weight:600; margin-right:8px; }
.parts { width:calc(100% - 48px); font:13px/1.55 var(--mono); table-layout:fixed; }
.parts th:first-child { width:38%; }
.parts th { background:#d9e1f3; }
.parts td { overflow-wrap:anywhere; }
.parts td:first-child { font:400 15px/1.45 var(--body); color:var(--ink-2); }
.parts sub { display:block; margin-top:4px; color:var(--muted); font:12px/1.5 var(--body); vertical-align:baseline; }
.notes { padding-block:40px 24px; font-size:16px; }
main > .notes { padding-left:calc(48px + var(--margin) + 36px); }
.notes table { table-layout:fixed; }
.notes td { overflow-wrap:anywhere; }
.foot { max-width:1344px; padding:24px 48px 48px; margin:auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; color:var(--muted); font:13px/1.5 var(--body); }
/* The existing image viewer uses the same stage finish. */
#viewer { padding:0; border:0; width:100vw; height:100vh; max-width:100vw; max-height:100vh; background:transparent; }
#viewer::backdrop { background:#10131af5; }
#viewer figure { margin:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:68px 84px; }
#viewer img { max-width:100%; max-height:calc(100vh - 160px); object-fit:contain; cursor:zoom-out; }
#viewer figcaption { color:#e1e6f0; text-align:center; max-width:900px; font:15px/1.5 var(--body); }
#viewer figcaption .fig-no { padding:0 0 5px; color:var(--marker); }
#viewer button { position:fixed; color:var(--white); background:var(--signal); border:0; padding:12px 18px; font:600 15px var(--body); cursor:pointer; }
#viewer button:hover { background:var(--signal-hover); }
#viewer button:focus-visible { outline-color:var(--marker); }
#viewer .close { top:20px; right:20px; }
#viewer .prev { left:18px; top:calc(50% - 24px); }
#viewer .next { right:18px; top:calc(50% - 24px); }
@media (max-width:1040px) {
 :root { --margin:60px; }
 main > .contents,main > .chapter,main > .notes,.bar nav { padding-left:32px; padding-right:32px; }
 .cover { padding-inline:32px; }
 .cover-grid { gap:28px; }
 .tagline { font-size:24px; }
 .h1-b { font-size:36px; }
 .toc { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .margin .big { font-size:64px; }
}
@media (max-width:700px) {
 :root { --margin:0px; }
 body { font-size:17px; }
 main > .contents,main > .chapter,main > .notes { padding-inline:20px; }
 .bar nav { gap:16px; padding:10px 20px; min-height:62px; flex-wrap:wrap; }
 .mark { font-size:23px; }
 .where { font-size:12px; flex:1; }
 .bar button { padding:8px 10px; font-size:12px; }
 .gh { display:none; }
 .cover { padding:36px 20px 0; }
 .cover-grid { grid-template-columns:1fr; gap:20px; }
 h1 { font-size:84px; }
 .h1-b { margin-top:10px; font-size:36px; }
 .cover-copy { padding-bottom:0; }
 .tagline { max-width:27ch; font-size:24px; margin-top:24px; }
 .lede { font-size:17px; }
 .built { max-width:46ch; }
 .drawing-wrap { max-width:540px; padding-bottom:12px; }
 .docline { gap:10px 20px; font-size:12px; margin-top:16px; }
 .docline span:last-child { margin-left:0; }
 .contents { padding-top:36px; }
 .contents-title { font-size:36px; }
 .toc { grid-template-columns:1fr; }
 .toc .t { font-size:25px; }
 .howto { grid-template-columns:1fr; gap:14px; }
 .chapter { grid-template-columns:1fr; gap:12px; padding:42px 0 30px; }
 .margin { display:flex; position:static; align-items:center; gap:20px; }
 .margin .big { font-size:40px; }
 .margin dl { display:flex; margin:0; align-items:baseline; gap:8px; }
 .margin dt { font-size:12px; }
 .margin dd { margin:0 10px 0 0; font-size:12px; }
 .chapter h2 { font-size:42px; max-width:23ch; }
 .subtitle { font-size:18px; margin-top:16px; }
 .chapter-head + p { font-size:17px; }
 .plates { grid-template-columns:1fr; gap:24px; }
 .plate { margin-top:24px; }
 .plate img { max-height:none; }
 .spec > summary { font-size:23px; padding:16px; gap:12px; }
 .spec > :not(summary) { margin-left:16px; margin-right:16px; }
 .parts { width:calc(100% - 32px); }
 .parts th:first-child { width:38%; }
 .parts td,th { padding:10px 8px; }
 .parts td a { font-size:12px; }
 .parts td:first-child { font-size:13px; }
 .parts sub { font-size:12px; }
 table { table-layout:fixed; }
 td { overflow-wrap:anywhere; padding:10px 8px; }
 .notes { padding:24px 0; }
 .foot { padding:20px 20px 36px; }
 #viewer figure { padding:68px 16px; }
 #viewer .prev,#viewer .next { top:auto; bottom:16px; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none !important; transition:none !important; }
 .drawing line,.drawing circle,.drawing path { stroke-dashoffset:0; }
}
@media print {
 .bar,.cta { display:none; }
 body { background:#fff; }
 .cover { color:var(--ink); background:#fff; }
 .cover p,.docline,.drawing-wrap figcaption { color:var(--ink-2); }
 .drawing line,.drawing circle,.drawing path,.drawing .sheet { stroke:var(--ink); stroke-dashoffset:0; }
 .drawing text { fill:var(--ink); }
 .drawing .block { fill:#fff; }
 .plate { break-inside:avoid; }
 .margin { position:static; }
}