diff --git a/.lintstagedrc.json b/.lintstagedrc.json index cb3fa14..899470e 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,6 +1,6 @@ { "*.{js,mjs,ts,astro}": ["prettier --write", "eslint --fix --max-warnings=0 --no-warn-ignored"], - "*.css": ["prettier --write", "stylelint --fix --max-warnings=0"], + "*.css": ["prettier --write", "stylelint --fix --max-warnings=0 --allow-empty-input"], "src/**/*.{astro,css}": ["node .agents/scripts/check-tokens.mjs"], "*.{json,md,yml,yaml}": ["prettier --write"] } diff --git a/chapters.css b/chapters.css index 40241eb..91f1e1e 100644 --- a/chapters.css +++ b/chapters.css @@ -1 +1 @@ -*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.6 var(--font-sans)}main{max-width:1400px;margin:auto;padding:0 5vw}.top{display:flex;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);font:700 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.top a{color:var(--ink);text-decoration:none}.hero{padding:100px 0 70px;max-width:950px}.eyebrow{color:var(--red);font:700 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.hero h1{margin:16px 0;font-size:clamp(52px,9vw,126px);line-height:.9;letter-spacing:-.07em}.hero h1 em,h2 em{font:400 .9em Georgia,serif;color:var(--red)}.hero p{max-width:680px;color:var(--muted);font-size:20px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:100px}.card{min-height:220px;padding:28px;background:var(--paper)}.card b{color:var(--red);font:24px var(--font-mono)}.card h2{margin:18px 0 8px;font-size:25px;letter-spacing:-.04em}.card p{margin:0 0 14px;color:var(--muted)}.card a{color:var(--blue);font-weight:700}.model,.pipeline,.practice{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:80px 0;border-top:1px solid var(--line)}.model h2,.pipeline h2,.practice h2{margin:0;font-size:clamp(34px,5vw,70px);line-height:.95;letter-spacing:-.06em}.panel{padding:28px;background:var(--ink);color:var(--paper)}.panel strong{display:block;color:var(--gold);font:700 12px var(--font-mono);letter-spacing:.1em}.panel code{display:block;margin-top:18px;color:#d6e1e4;font:14px/1.8 var(--font-mono);white-space:pre-wrap}.steps{display:grid;gap:1px;background:var(--line)}.steps article{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:20px;background:var(--paper)}.steps b{color:var(--red);font:20px var(--font-mono)}.steps strong{display:block}.steps span{color:var(--muted)}.links{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 70px}.links a{padding:10px 13px;color:var(--ink);border:1px solid var(--ink);text-decoration:none;font:11px var(--font-mono);text-transform:uppercase}.links a:hover{color:var(--paper);background:var(--ink)}footer{padding:30px 0 70px;color:var(--muted);font-size:13px}@media(max-width:800px){.grid,.model,.pipeline,.practice{grid-template-columns:1fr}.hero{padding:65px 0 45px}.model,.pipeline,.practice{gap:25px;padding:55px 0}}@media(max-width:520px){main{padding:0 16px}.top span{display:none}.hero h1{font-size:56px}.hero p{font-size:17px}.card{min-height:0}.steps article{grid-template-columns:45px 1fr}} +:root{--ink:#122534;--paper:#f6f3ed;--line:#d0d5d2;--muted:#65717a;--blue:#215675;--gold:#ebbf58;--red:#a7483f;--font-sans:manrope,arial,sans-serif;--font-mono:'DM Mono',monospace;}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.6 var(--font-sans)}main{max-width:1400px;margin:auto;padding:0 5vw}.top{display:flex;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);font:700 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.top a{color:var(--ink);text-decoration:none}.hero{padding:100px 0 70px;max-width:950px}.eyebrow{color:var(--red);font:700 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.hero h1{margin:16px 0;font-size:clamp(52px,9vw,126px);line-height:.9;letter-spacing:-.07em}.hero h1 em,h2 em{font:400 .9em Georgia,serif;color:var(--red)}.hero p{max-width:680px;color:var(--muted);font-size:20px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:100px}.card{min-height:220px;padding:28px;background:var(--paper)}.card b{color:var(--red);font:24px var(--font-mono)}.card h2{margin:18px 0 8px;font-size:25px;letter-spacing:-.04em}.card p{margin:0 0 14px;color:var(--muted)}.card a{color:var(--blue);font-weight:700}.model,.pipeline,.practice{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:80px 0;border-top:1px solid var(--line)}.model h2,.pipeline h2,.practice h2{margin:0;font-size:clamp(34px,5vw,70px);line-height:.95;letter-spacing:-.06em}.panel{padding:28px;background:var(--ink);color:var(--paper)}.panel strong{display:block;color:var(--gold);font:700 12px var(--font-mono);letter-spacing:.1em}.panel code{display:block;margin-top:18px;color:#d6e1e4;font:14px/1.8 var(--font-mono);white-space:pre-wrap}.steps{display:grid;gap:1px;background:var(--line)}.steps article{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:20px;background:var(--paper)}.steps b{color:var(--red);font:20px var(--font-mono)}.steps strong{display:block}.steps span{color:var(--muted)}.links{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 70px}.links a{padding:10px 13px;color:var(--ink);border:1px solid var(--ink);text-decoration:none;font:11px var(--font-mono);text-transform:uppercase}.links a:hover{color:var(--paper);background:var(--ink)}footer{padding:30px 0 70px;color:var(--muted);font-size:13px}@media(max-width:800px){.grid,.model,.pipeline,.practice{grid-template-columns:1fr}.hero{padding:65px 0 45px}.model,.pipeline,.practice{gap:25px;padding:55px 0}}@media(max-width:520px){main{padding:0 16px}.top span{display:none}.hero h1{font-size:56px}.hero p{font-size:17px}.card{min-height:0}.steps article{grid-template-columns:45px 1fr}} diff --git a/rules/styles.css b/rules/styles.css index f248347..e01dad1 100644 --- a/rules/styles.css +++ b/rules/styles.css @@ -1,4 +1,4 @@ -*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;margin:0;color:var(--ink);background:var(--paper);font-family:var(--font-sans)}.progress{position:fixed;z-index:20;top:0;left:0;width:100%;height:3px;background:transparent}.progress span{display:block;width:0;height:100%;background:var(--gold)}.topbar{position:sticky;z-index:10;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:72px;padding:0 clamp(24px,5vw,90px);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(14px)}.back{display:flex;align-items:center;gap:11px;color:var(--ink);font:700 10px var(--font-mono);text-decoration:none;text-transform:uppercase}.back b{display:grid;place-items:center;width:30px;height:30px;color:var(--paper);background:var(--accent);font-size:15px}.topbar nav{display:flex;gap:28px}.topbar nav a,.languages{color:var(--muted);font:600 9px var(--font-mono);letter-spacing:.08em;text-decoration:none;text-transform:uppercase}.languages{justify-self:end;display:flex;align-items:center;gap:7px}.languages button{padding:7px;border:0;color:var(--muted);background:transparent;cursor:pointer}.languages button.active{color:var(--paper);background:var(--blue)}main{max-width:1920px;margin:auto;padding:0 clamp(24px,5vw,90px)}.hero{min-height:700px;padding:130px 0 80px}.eyebrow,.section-label,.thesis>span{color:var(--accent);font:600 9px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.hero h1,.intro h2{margin:22px 0 50px;font-size:clamp(64px,8.3vw,148px);line-height:.82;letter-spacing:-.075em}.hero h1 em,.intro h2 em{color:var(--blue);font-family:Georgia,serif;font-weight:400}.hero-foot{display:grid;grid-template-columns:1.3fr .7fr;gap:70px;align-items:end}.hero-foot>p{max-width:750px;margin:0;color:var(--muted);font-size:16px;line-height:1.75}.hero-foot aside{display:grid;gap:8px;padding:23px;border-left:6px solid var(--gold);color:var(--paper);background:var(--deep)}.hero-foot aside span,.hero-foot aside small{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.08em}.hero-foot aside strong{font-size:32px}.thesis{display:grid;grid-template-columns:200px 1fr;gap:35px;align-items:center;margin:0 calc(clamp(24px,5vw,90px) * -1) 130px;padding:35px clamp(24px,5vw,90px);color:var(--paper);background:var(--ink)}.thesis strong{font-size:clamp(20px,2.4vw,38px);line-height:1.2}.section-label{display:flex;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--line)}.section-label span:last-child{color:var(--muted)}.pipeline-section,.skill-section,.examples,.copy-lab{margin-bottom:140px;padding-top:30px}.intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.intro h2{margin:15px 0 0;font-size:clamp(48px,5.6vw,92px)}.intro>p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}.pipeline{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;border:1px solid var(--line);background:var(--paper)}.pipeline button{display:grid;gap:8px;min-height:126px;padding:20px;border:0;color:var(--ink);background:transparent;text-align:left;cursor:pointer}.pipeline button span{color:var(--accent);font:600 9px var(--font-mono)}.pipeline button strong{font:700 13px var(--font-mono)}.pipeline button small{color:var(--muted);font:10px var(--font-mono)}.pipeline button.active{color:var(--paper);background:var(--blue);box-shadow:inset 0 -6px var(--gold)}.pipeline button.active span,.pipeline button.active small{color:var(--gold)}.pipeline>i{align-self:center;color:var(--gold);font-style:normal}.stage-detail{display:grid;grid-template-columns:120px 1.3fr .7fr;gap:35px;min-height:330px;padding:42px;color:var(--paper);background:var(--deep)}.stage-number{color:#ffffff24;font:500 76px var(--font-mono)}.stage-detail>div:nth-child(2)>span,.skill-detail header span{color:var(--gold);font:500 9px var(--font-mono);letter-spacing:.08em}.stage-detail h3,.skill-detail h3{margin:15px 0;font-size:clamp(28px,3vw,48px);letter-spacing:-.05em}.stage-detail p,.skill-detail p{max-width:650px;color:#b8c8d2;font-size:13px;line-height:1.7}.stage-detail a,.skill-detail a,.example-grid a{display:inline-block;margin-top:15px;color:var(--gold);font:600 9px var(--font-mono);letter-spacing:.07em}.stage-detail pre,.skill-detail pre,.example-grid pre,.copy-lab pre{margin:0;overflow:auto;background:#081621}.stage-detail pre{align-self:stretch;padding:28px}.stage-detail code,.skill-detail code,.example-grid code,.copy-lab code{color:#c9d5dc;font:11px/1.7 var(--font-mono)}.skill-console{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.5fr);min-height:570px;border:1px solid var(--line);background:var(--line);gap:1px}.skill-list{display:grid;grid-template-rows:repeat(6,1fr);gap:1px;background:var(--line)}.skill-list button{display:grid;align-content:center;gap:7px;padding:18px 22px;border:0;color:var(--ink);background:var(--paper);text-align:left;cursor:pointer}.skill-list button strong{font:700 12px var(--font-mono)}.skill-list button small{color:var(--muted);font-size:10px}.skill-list button.active{color:var(--paper);background:var(--accent);box-shadow:inset 6px 0 var(--gold)}.skill-list button.active small{color:#f0eef8}.skill-detail{display:grid;align-content:center;padding:50px clamp(30px,5vw,80px);color:var(--paper);background:#5b7098}.skill-detail header{display:grid;gap:9px;padding-bottom:22px;border-bottom:1px solid #ffffff3a}.skill-detail header strong{font-size:12px}.skill-detail pre{margin:20px 0 0;padding:18px}.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:45px;background:var(--line)}.example-grid article{display:grid;grid-template-rows:auto auto 1fr auto;min-height:390px;padding:35px;background:var(--paper)}.example-grid article>span{color:var(--accent);font:600 9px var(--font-mono);letter-spacing:.08em}.example-grid h3{margin:22px 0;font-size:clamp(26px,3vw,42px);line-height:1.05;letter-spacing:-.045em}.example-grid pre{padding:22px}.example-grid a{color:var(--blue)}.copy-lab{display:grid;grid-template-columns:.75fr 1.25fr;gap:1px;color:var(--paper);background:var(--line)}.copy-lab>div{padding:45px;background:var(--accent)}.copy-lab>div span{color:var(--gold);font:600 9px var(--font-mono)}.copy-lab h2{margin:20px 0;font-size:clamp(30px,3.4vw,56px);line-height:1}.copy-lab>div p{max-width:420px;color:#eceaf5;line-height:1.6}.copy-lab article{display:grid;grid-template-rows:auto 1fr auto;min-width:0;background:var(--deep)}.copy-lab button{justify-self:end;display:flex;gap:20px;margin:20px;padding:11px 14px;border:1px solid #ffffff50;color:var(--paper);background:transparent;font:600 9px var(--font-mono);cursor:pointer}.copy-lab pre{padding:26px;white-space:pre-wrap}.copy-lab article>p{min-height:20px;margin:12px 24px;color:var(--gold);font:600 9px var(--font-mono)}.deeper{margin:0 calc(clamp(24px,5vw,90px) * -1);padding:60px clamp(24px,5vw,90px) 100px;background:var(--gold)}.deeper>div{display:flex;justify-content:space-between;gap:30px;margin-bottom:35px}.deeper>div span{color:var(--accent);font:600 9px var(--font-mono)}.deeper>div strong{max-width:700px;font-size:clamp(24px,3vw,44px);line-height:1.1}.deeper nav{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#132b3b}.deeper nav a{display:grid;gap:9px;min-height:160px;padding:25px;color:var(--paper);background:var(--ink);text-decoration:none}.deeper nav span{color:var(--accent);font:600 10px var(--font-mono)}.deeper nav b{font-size:15px}.deeper nav small{color:#9eb0bb;font:9px var(--font-mono)}.topbar a:focus-visible,.topbar button:focus-visible,.pipeline button:focus-visible,.skill-list button:focus-visible,.copy-lab button:focus-visible,.deeper a:focus-visible{outline:3px solid var(--gold);outline-offset:-3px} +:root{--paper:#f5f4f1;--ink:#172f42;--muted:#697b89;--accent:#7c78a8;--blue:#527f9f;--gold:#efc76b;--line:#d8dee2;--deep:#102536;--font-sans:manrope,arial,sans-serif;--font-mono:'DM Mono',monospace;}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;margin:0;color:var(--ink);background:var(--paper);font-family:var(--font-sans)}.progress{position:fixed;z-index:20;top:0;left:0;width:100%;height:3px;background:transparent}.progress span{display:block;width:0;height:100%;background:var(--gold)}.topbar{position:sticky;z-index:10;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:72px;padding:0 clamp(24px,5vw,90px);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(14px)}.back{display:flex;align-items:center;gap:11px;color:var(--ink);font:700 10px var(--font-mono);text-decoration:none;text-transform:uppercase}.back b{display:grid;place-items:center;width:30px;height:30px;color:var(--paper);background:var(--accent);font-size:15px}.topbar nav{display:flex;gap:28px}.topbar nav a,.languages{color:var(--muted);font:600 9px var(--font-mono);letter-spacing:.08em;text-decoration:none;text-transform:uppercase}.languages{justify-self:end;display:flex;align-items:center;gap:7px}.languages button{padding:7px;border:0;color:var(--muted);background:transparent;cursor:pointer}.languages button.active{color:var(--paper);background:var(--blue)}main{max-width:1920px;margin:auto;padding:0 clamp(24px,5vw,90px)}.hero{min-height:700px;padding:130px 0 80px}.eyebrow,.section-label,.thesis>span{color:var(--accent);font:600 9px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.hero h1,.intro h2{margin:22px 0 50px;font-size:clamp(64px,8.3vw,148px);line-height:.82;letter-spacing:-.075em}.hero h1 em,.intro h2 em{color:var(--blue);font-family:Georgia,serif;font-weight:400}.hero-foot{display:grid;grid-template-columns:1.3fr .7fr;gap:70px;align-items:end}.hero-foot>p{max-width:750px;margin:0;color:var(--muted);font-size:16px;line-height:1.75}.hero-foot aside{display:grid;gap:8px;padding:23px;border-left:6px solid var(--gold);color:var(--paper);background:var(--deep)}.hero-foot aside span,.hero-foot aside small{color:var(--gold);font:500 8px var(--font-mono);letter-spacing:.08em}.hero-foot aside strong{font-size:32px}.thesis{display:grid;grid-template-columns:200px 1fr;gap:35px;align-items:center;margin:0 calc(clamp(24px,5vw,90px) * -1) 130px;padding:35px clamp(24px,5vw,90px);color:var(--paper);background:var(--ink)}.thesis strong{font-size:clamp(20px,2.4vw,38px);line-height:1.2}.section-label{display:flex;justify-content:space-between;padding-bottom:15px;border-bottom:1px solid var(--line)}.section-label span:last-child{color:var(--muted)}.pipeline-section,.skill-section,.examples,.copy-lab{margin-bottom:140px;padding-top:30px}.intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.intro h2{margin:15px 0 0;font-size:clamp(48px,5.6vw,92px)}.intro>p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}.pipeline{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;border:1px solid var(--line);background:var(--paper)}.pipeline button{display:grid;gap:8px;min-height:126px;padding:20px;border:0;color:var(--ink);background:transparent;text-align:left;cursor:pointer}.pipeline button span{color:var(--accent);font:600 9px var(--font-mono)}.pipeline button strong{font:700 13px var(--font-mono)}.pipeline button small{color:var(--muted);font:10px var(--font-mono)}.pipeline button.active{color:var(--paper);background:var(--blue);box-shadow:inset 0 -6px var(--gold)}.pipeline button.active span,.pipeline button.active small{color:var(--gold)}.pipeline>i{align-self:center;color:var(--gold);font-style:normal}.stage-detail{display:grid;grid-template-columns:120px 1.3fr .7fr;gap:35px;min-height:330px;padding:42px;color:var(--paper);background:var(--deep)}.stage-number{color:#ffffff24;font:500 76px var(--font-mono)}.stage-detail>div:nth-child(2)>span,.skill-detail header span{color:var(--gold);font:500 9px var(--font-mono);letter-spacing:.08em}.stage-detail h3,.skill-detail h3{margin:15px 0;font-size:clamp(28px,3vw,48px);letter-spacing:-.05em}.stage-detail p,.skill-detail p{max-width:650px;color:#b8c8d2;font-size:13px;line-height:1.7}.stage-detail a,.skill-detail a,.example-grid a{display:inline-block;margin-top:15px;color:var(--gold);font:600 9px var(--font-mono);letter-spacing:.07em}.stage-detail pre,.skill-detail pre,.example-grid pre,.copy-lab pre{margin:0;overflow:auto;background:#081621}.stage-detail pre{align-self:stretch;padding:28px}.stage-detail code,.skill-detail code,.example-grid code,.copy-lab code{color:#c9d5dc;font:11px/1.7 var(--font-mono)}.skill-console{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.5fr);min-height:570px;border:1px solid var(--line);background:var(--line);gap:1px}.skill-list{display:grid;grid-template-rows:repeat(6,1fr);gap:1px;background:var(--line)}.skill-list button{display:grid;align-content:center;gap:7px;padding:18px 22px;border:0;color:var(--ink);background:var(--paper);text-align:left;cursor:pointer}.skill-list button strong{font:700 12px var(--font-mono)}.skill-list button small{color:var(--muted);font-size:10px}.skill-list button.active{color:var(--paper);background:var(--accent);box-shadow:inset 6px 0 var(--gold)}.skill-list button.active small{color:#f0eef8}.skill-detail{display:grid;align-content:center;padding:50px clamp(30px,5vw,80px);color:var(--paper);background:#5b7098}.skill-detail header{display:grid;gap:9px;padding-bottom:22px;border-bottom:1px solid #ffffff3a}.skill-detail header strong{font-size:12px}.skill-detail pre{margin:20px 0 0;padding:18px}.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:45px;background:var(--line)}.example-grid article{display:grid;grid-template-rows:auto auto 1fr auto;min-height:390px;padding:35px;background:var(--paper)}.example-grid article>span{color:var(--accent);font:600 9px var(--font-mono);letter-spacing:.08em}.example-grid h3{margin:22px 0;font-size:clamp(26px,3vw,42px);line-height:1.05;letter-spacing:-.045em}.example-grid pre{padding:22px}.example-grid a{color:var(--blue)}.copy-lab{display:grid;grid-template-columns:.75fr 1.25fr;gap:1px;color:var(--paper);background:var(--line)}.copy-lab>div{padding:45px;background:var(--accent)}.copy-lab>div span{color:var(--gold);font:600 9px var(--font-mono)}.copy-lab h2{margin:20px 0;font-size:clamp(30px,3.4vw,56px);line-height:1}.copy-lab>div p{max-width:420px;color:#eceaf5;line-height:1.6}.copy-lab article{display:grid;grid-template-rows:auto 1fr auto;min-width:0;background:var(--deep)}.copy-lab button{justify-self:end;display:flex;gap:20px;margin:20px;padding:11px 14px;border:1px solid #ffffff50;color:var(--paper);background:transparent;font:600 9px var(--font-mono);cursor:pointer}.copy-lab pre{padding:26px;white-space:pre-wrap}.copy-lab article>p{min-height:20px;margin:12px 24px;color:var(--gold);font:600 9px var(--font-mono)}.deeper{margin:0 calc(clamp(24px,5vw,90px) * -1);padding:60px clamp(24px,5vw,90px) 100px;background:var(--gold)}.deeper>div{display:flex;justify-content:space-between;gap:30px;margin-bottom:35px}.deeper>div span{color:var(--accent);font:600 9px var(--font-mono)}.deeper>div strong{max-width:700px;font-size:clamp(24px,3vw,44px);line-height:1.1}.deeper nav{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#132b3b}.deeper nav a{display:grid;gap:9px;min-height:160px;padding:25px;color:var(--paper);background:var(--ink);text-decoration:none}.deeper nav span{color:var(--accent);font:600 10px var(--font-mono)}.deeper nav b{font-size:15px}.deeper nav small{color:#9eb0bb;font:9px var(--font-mono)}.topbar a:focus-visible,.topbar button:focus-visible,.pipeline button:focus-visible,.skill-list button:focus-visible,.copy-lab button:focus-visible,.deeper a:focus-visible{outline:3px solid var(--gold);outline-offset:-3px} @media(min-width:2200px){main{max-width:2880px;padding-inline:clamp(150px,7vw,300px)}.hero{min-height:900px}.hero h1{font-size:clamp(150px,7vw,220px)}.pipeline button{min-height:170px}.stage-detail{min-height:440px}.skill-console{min-height:720px}} @media(max-width:900px){.topbar{grid-template-columns:1fr auto}.topbar nav{display:none}.hero{min-height:auto}.hero-foot,.intro,.copy-lab{grid-template-columns:1fr}.pipeline{grid-template-columns:1fr 1fr 1fr}.pipeline>i{display:none}.pipeline button{min-height:100px}.stage-detail{grid-template-columns:80px 1fr}.stage-detail pre{grid-column:1/-1}.skill-console{grid-template-columns:1fr}.skill-list{grid-template-columns:1fr 1fr;grid-template-rows:none}.example-grid{grid-template-columns:1fr}.deeper nav{grid-template-columns:1fr 1fr}} diff --git a/skills-review/styles.css b/skills-review/styles.css index 6056c52..b71006b 100644 --- a/skills-review/styles.css +++ b/skills-review/styles.css @@ -1,4 +1,4 @@ -*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:15px/1.6 var(--font-sans)}main{max-width:1500px;margin:auto;padding:0 4vw}.topbar{display:flex;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);color:var(--muted);font:700 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.topbar a{color:var(--ink);text-decoration:none}.hero{max-width:1040px;padding:105px 0 75px}.eyebrow,.status,.purpose span,.review-grid span,.extras span,.preview header span{font:700 10px var(--font-mono);letter-spacing:.1em}.eyebrow{color:#a7483f}.hero h1,.method h2{margin:14px 0;font-size:clamp(48px,8vw,112px);line-height:.92;letter-spacing:-.07em}.hero em,.method em{color:#a7483f;font-family:Georgia,serif;font-weight:400}.hero p:last-child{max-width:620px;color:var(--muted);font-size:18px}.principles{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--line);gap:1px}.principles article{display:grid;gap:10px;min-height:175px;padding:22px;background:var(--paper)}.principles b{color:#a7483f;font:22px var(--font-mono)}.principles strong{font-size:18px}.principles span{color:var(--muted);font-size:13px}.method{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;padding:120px 0 55px}.method h2{font-size:clamp(40px,5vw,70px)}.method ol{margin:0;padding-left:20px;color:var(--muted)}.method li+li{margin-top:9px}.catalog{display:grid;grid-template-columns:320px minmax(0,1fr);border:1px solid var(--line);background:var(--line);gap:1px}.catalog aside{padding:24px;background:#e9eeed}.catalog label{display:block;margin:32px 0 7px;font:700 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.catalog input{width:100%;padding:12px;border:1px solid #9ba7a5;background:var(--paper);font:inherit}.count{color:var(--muted);font:11px var(--font-mono)}#skill-list{display:grid;gap:1px;border-top:1px solid var(--line)}#skill-list button{display:grid;grid-template-columns:1fr auto;gap:3px;padding:14px;border:0;border-bottom:1px solid var(--line);color:var(--ink);background:transparent;text-align:left;cursor:pointer}#skill-list button span{grid-column:1/-1;color:var(--muted);font:10px var(--font-mono)}#skill-list button strong{font-size:13px}#skill-list button small{color:#a7483f;font:9px var(--font-mono);text-transform:uppercase}#skill-list button:hover,#skill-list button.active{color:var(--paper);background:var(--ink)}#skill-list button.active span,#skill-list button.active small{color:var(--gold)}.detail{min-width:0;padding:38px;background:var(--paper)}.detail>header{display:flex;justify-content:space-between;gap:25px;align-items:start}.status{color:#a7483f}.detail h2{margin:5px 0;font-size:clamp(30px,4vw,58px);letter-spacing:-.06em}.detail header p{margin:0;color:var(--muted)}.switch{display:flex;border:1px solid var(--ink)}button{font:inherit}.switch button,.preview button{padding:9px 11px;border:0;background:transparent;cursor:pointer;font:700 10px var(--font-mono)}.switch button.active{color:var(--paper);background:var(--ink)}.purpose{display:grid;grid-template-columns:150px 1fr;gap:20px;margin:45px 0 20px;padding:20px;background:var(--gold)}.purpose p{margin:0;font-size:18px;line-height:1.4}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.review-grid section{padding:22px;background:var(--paper)}.review-grid span{color:#a7483f}.review-grid ul{margin:14px 0 0;padding-left:20px}.review-grid li+li{margin-top:9px}.extras{margin:1px 0 25px;padding:18px 22px;color:var(--paper);background:var(--blue)}.extras span{display:block;margin-bottom:8px;color:var(--gold)}.vote-widget{display:grid;gap:10px;margin:1px 0 25px;padding:18px 22px;color:var(--ink);background:#e5eeeb;border-left:4px solid var(--gold)}.vote-widget>span{color:var(--blue);font:700 10px var(--font-mono);letter-spacing:.1em}.vote-buttons{display:flex;gap:1px;background:var(--line)}.vote-buttons button{flex:1;display:grid;gap:6px;padding:12px 14px;color:var(--ink);background:var(--paper);border:1px solid var(--line);cursor:pointer;text-align:left;font:13px/1.3 inherit}.vote-buttons button b{color:var(--muted);font:11px var(--font-mono)}.vote-buttons button[aria-pressed="true"]{color:var(--paper);background:var(--ink)}.vote-buttons button[aria-pressed="true"] b{color:var(--gold)}.vote-note{margin:0;color:var(--muted);font-size:12px}.preview{border:1px solid var(--ink);background:var(--ink)}.preview header{display:flex;justify-content:space-between;gap:20px;padding:14px;color:var(--paper);border-bottom:1px solid #486175}.preview header span{color:var(--gold)}.preview button{color:var(--paper);border:1px solid #486175}.preview button:hover{background:#29455a}.preview pre{max-height:540px;margin:0;padding:24px;overflow:auto;color:#d6e1e4;background:#0c1a25}.preview code{font:12px/1.65 var(--font-mono);white-space:pre-wrap}.research{margin:100px 0;padding:35px;color:var(--paper);background:var(--violet)}.research .eyebrow{color:var(--gold)}.research>p:not(.eyebrow){max-width:850px;font:20px/1.45 Georgia,serif}.research div{display:flex;flex-wrap:wrap;gap:12px}.research a{padding:8px 10px;color:var(--paper);border:1px solid #ffffff66;font:10px var(--font-mono);text-decoration:none}footer{padding:10px 0 50px;color:var(--muted);font-size:12px}footer code{color:var(--ink)}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #a7483f;outline-offset:2px}@media(max-width:850px){.principles{grid-template-columns:1fr 1fr}.catalog{grid-template-columns:1fr}.method{grid-template-columns:1fr;gap:25px;padding-top:80px}.detail{padding:24px}.review-grid{grid-template-columns:1fr}}@media(max-width:530px){main{padding:0 16px}.topbar span{display:none}.hero{padding:65px 0 45px}.principles{grid-template-columns:1fr}.detail>header,.preview header{display:block}.switch{margin-top:18px;width:max-content}.purpose{grid-template-columns:1fr}.vote-buttons{flex-direction:column}.preview header div{margin-top:12px}} +:root{--ink:#122534;--paper:#f6f3ed;--line:#d0d5d2;--muted:#65717a;--blue:#215675;--gold:#ebbf58;--violet:#6b668f;--font-sans:manrope,arial,sans-serif;--font-mono:'DM Mono',monospace;}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:15px/1.6 var(--font-sans)}main{max-width:1500px;margin:auto;padding:0 4vw}.topbar{display:flex;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);color:var(--muted);font:700 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.topbar a{color:var(--ink);text-decoration:none}.hero{max-width:1040px;padding:105px 0 75px}.eyebrow,.status,.purpose span,.review-grid span,.extras span,.preview header span{font:700 10px var(--font-mono);letter-spacing:.1em}.eyebrow{color:#a7483f}.hero h1,.method h2{margin:14px 0;font-size:clamp(48px,8vw,112px);line-height:.92;letter-spacing:-.07em}.hero em,.method em{color:#a7483f;font-family:Georgia,serif;font-weight:400}.hero p:last-child{max-width:620px;color:var(--muted);font-size:18px}.principles{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--line);gap:1px}.principles article{display:grid;gap:10px;min-height:175px;padding:22px;background:var(--paper)}.principles b{color:#a7483f;font:22px var(--font-mono)}.principles strong{font-size:18px}.principles span{color:var(--muted);font-size:13px}.method{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;padding:120px 0 55px}.method h2{font-size:clamp(40px,5vw,70px)}.method ol{margin:0;padding-left:20px;color:var(--muted)}.method li+li{margin-top:9px}.catalog{display:grid;grid-template-columns:320px minmax(0,1fr);border:1px solid var(--line);background:var(--line);gap:1px}.catalog aside{padding:24px;background:#e9eeed}.catalog label{display:block;margin:32px 0 7px;font:700 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.catalog input{width:100%;padding:12px;border:1px solid #9ba7a5;background:var(--paper);font:inherit}.count{color:var(--muted);font:11px var(--font-mono)}#skill-list{display:grid;gap:1px;border-top:1px solid var(--line)}#skill-list button{display:grid;grid-template-columns:1fr auto;gap:3px;padding:14px;border:0;border-bottom:1px solid var(--line);color:var(--ink);background:transparent;text-align:left;cursor:pointer}#skill-list button span{grid-column:1/-1;color:var(--muted);font:10px var(--font-mono)}#skill-list button strong{font-size:13px}#skill-list button small{color:#a7483f;font:9px var(--font-mono);text-transform:uppercase}#skill-list button:hover,#skill-list button.active{color:var(--paper);background:var(--ink)}#skill-list button.active span,#skill-list button.active small{color:var(--gold)}.detail{min-width:0;padding:38px;background:var(--paper)}.detail>header{display:flex;justify-content:space-between;gap:25px;align-items:start}.status{color:#a7483f}.detail h2{margin:5px 0;font-size:clamp(30px,4vw,58px);letter-spacing:-.06em}.detail header p{margin:0;color:var(--muted)}.switch{display:flex;border:1px solid var(--ink)}button{font:inherit}.switch button,.preview button{padding:9px 11px;border:0;background:transparent;cursor:pointer;font:700 10px var(--font-mono)}.switch button.active{color:var(--paper);background:var(--ink)}.purpose{display:grid;grid-template-columns:150px 1fr;gap:20px;margin:45px 0 20px;padding:20px;background:var(--gold)}.purpose p{margin:0;font-size:18px;line-height:1.4}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.review-grid section{padding:22px;background:var(--paper)}.review-grid span{color:#a7483f}.review-grid ul{margin:14px 0 0;padding-left:20px}.review-grid li+li{margin-top:9px}.extras{margin:1px 0 25px;padding:18px 22px;color:var(--paper);background:var(--blue)}.extras span{display:block;margin-bottom:8px;color:var(--gold)}.vote-widget{display:grid;gap:10px;margin:1px 0 25px;padding:18px 22px;color:var(--ink);background:#e5eeeb;border-left:4px solid var(--gold)}.vote-widget>span{color:var(--blue);font:700 10px var(--font-mono);letter-spacing:.1em}.vote-buttons{display:flex;gap:1px;background:var(--line)}.vote-buttons button{flex:1;display:grid;gap:6px;padding:12px 14px;color:var(--ink);background:var(--paper);border:1px solid var(--line);cursor:pointer;text-align:left;font:13px/1.3 inherit}.vote-buttons button b{color:var(--muted);font:11px var(--font-mono)}.vote-buttons button[aria-pressed="true"]{color:var(--paper);background:var(--ink)}.vote-buttons button[aria-pressed="true"] b{color:var(--gold)}.vote-note{margin:0;color:var(--muted);font-size:12px}.preview{border:1px solid var(--ink);background:var(--ink)}.preview header{display:flex;justify-content:space-between;gap:20px;padding:14px;color:var(--paper);border-bottom:1px solid #486175}.preview header span{color:var(--gold)}.preview button{color:var(--paper);border:1px solid #486175}.preview button:hover{background:#29455a}.preview pre{max-height:540px;margin:0;padding:24px;overflow:auto;color:#d6e1e4;background:#0c1a25}.preview code{font:12px/1.65 var(--font-mono);white-space:pre-wrap}.research{margin:100px 0;padding:35px;color:var(--paper);background:var(--violet)}.research .eyebrow{color:var(--gold)}.research>p:not(.eyebrow){max-width:850px;font:20px/1.45 Georgia,serif}.research div{display:flex;flex-wrap:wrap;gap:12px}.research a{padding:8px 10px;color:var(--paper);border:1px solid #ffffff66;font:10px var(--font-mono);text-decoration:none}footer{padding:10px 0 50px;color:var(--muted);font-size:12px}footer code{color:var(--ink)}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #a7483f;outline-offset:2px}@media(max-width:850px){.principles{grid-template-columns:1fr 1fr}.catalog{grid-template-columns:1fr}.method{grid-template-columns:1fr;gap:25px;padding-top:80px}.detail{padding:24px}.review-grid{grid-template-columns:1fr}}@media(max-width:530px){main{padding:0 16px}.topbar span{display:none}.hero{padding:65px 0 45px}.principles{grid-template-columns:1fr}.detail>header,.preview header{display:block}.switch{margin-top:18px;width:max-content}.purpose{grid-template-columns:1fr}.vote-buttons{flex-direction:column}.preview header div{margin-top:12px}} /* Review surface overrides: keep suggestions readable and packages navigable. */ .extras{color:var(--ink);background:#e5eeeb;border-left:4px solid var(--blue)}.extras span{color:var(--blue)}.extras p{margin:0}.file-tabs{display:flex;gap:1px;overflow-x:auto;padding:10px 14px;background:#122534;border-bottom:1px solid #486175}.file-tabs button{display:grid;gap:1px;min-width:max-content;padding:7px 10px;color:#d6e1e4;background:transparent;border:1px solid #486175;cursor:pointer;text-align:left;font:11px var(--font-mono)}.file-tabs button span{color:#ebbf58;font-size:9px;text-transform:uppercase}.file-tabs button.active,.file-tabs button:hover{color:#122534;background:#ebbf58}.file-tabs button.active span,.file-tabs button:hover span{color:#122534} diff --git a/styles.css b/styles.css index 5e7925c..33bf1e3 100644 --- a/styles.css +++ b/styles.css @@ -1,2 +1,2 @@ -@import url('public/fonts/fonts.css'); *{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:var(--font-sans)}main{padding:28px clamp(24px,6vw,96px) 80px}.topbar,.section-label{display:flex;justify-content:space-between;align-items:center}.brand{color:var(--ink);font-size:12px;font-weight:800;text-decoration:none;text-transform:uppercase}.mark{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:9px;border-radius:50%;color:var(--paper);background:var(--accent)}.edition,.eyebrow,.section-label,.thesis span,.captain span,.workers span,.route-table b,.skill-package>span,.rule span,.callout span,.sources{font:500 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.edition i{display:inline-block;width:6px;height:6px;margin:0 8px;border-radius:50%;background:var(--accent)}.hero{max-width:780px;padding:clamp(75px,12vh,145px) 0 85px}.eyebrow,.section-label,.thesis span{color:var(--accent)}h1{margin:16px 0 24px;font-size:clamp(56px,9vw,126px);line-height:.86;letter-spacing:-.08em}h1 em,h2 em{color:var(--blue);font-family:Georgia,serif;font-weight:400}.lede,.copy>p:last-child,.skills>div:first-child>p:last-child,.worktrees>div:first-child>p,.caption{max-width:570px;color:var(--muted);line-height:1.65}.thesis{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-bottom:110px;padding:28px;background:var(--gold)}.thesis div:first-child{display:grid;gap:16px}.thesis strong{font-size:clamp(24px,4vw,46px);line-height:1.05;letter-spacing:-.04em}.signal{display:flex;align-items:center;gap:10px}.signal i{width:28px;height:28px;border:1px solid var(--ink);background:var(--paper)}.signal i:nth-of-type(3){background:var(--blue)}.signal b{font:500 10px var(--font-mono)}.fleet{margin-bottom:120px}.section-label{padding-bottom:14px;border-bottom:1px solid var(--line)}.section-label span:last-child{color:var(--muted)}.fleet-grid{display:grid;grid-template-columns:.8fr 50px 1.5fr;gap:24px;margin-top:30px;color:var(--paper);background:var(--deep)}.captain{display:grid;align-content:center;gap:16px;padding:32px}.captain span{color:var(--gold)}h2{margin:14px 0 20px;font-size:clamp(36px,5vw,65px);line-height:.98;letter-spacing:-.06em}.captain h2{font-size:clamp(24px,3vw,38px)}.captain code,.workers code{color:var(--gold);font:11px var(--font-mono)}.arrow{display:grid;place-items:center;color:var(--gold);font-size:30px}.workers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#41596b}.workers article{display:grid;align-content:space-between;gap:20px;min-height:180px;padding:22px;background:var(--ink)}.workers span{color:#9eabb4}.workers strong{font-size:16px;line-height:1.2}.caption{margin:22px 0 0 auto}.workflow,.routing,.skills{display:grid;grid-template-columns:.7fr 1fr 1.3fr;gap:40px;align-items:start;margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.phase-tabs{display:grid;gap:8px}.phase-tabs button{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:15px;border:1px solid var(--line);color:var(--ink);background:transparent;font:500 10px var(--font-mono);letter-spacing:.07em;text-align:left;cursor:pointer}.phase-tabs button b{color:var(--accent)}.phase-tabs button.active{color:var(--paper);border-color:var(--ink);background:var(--ink)}.phase-panel{min-height:260px;padding:30px;color:var(--paper);background:var(--accent)}.phase-meta{display:flex;justify-content:space-between;gap:15px;color:var(--gold);font:500 10px var(--font-mono)}.phase-meta small{color:var(--paper);opacity:.7}.phase-panel h3{margin:44px 0 12px;font-size:clamp(24px,3vw,38px);line-height:1.05}.phase-panel p{line-height:1.6;opacity:.82}.phase-panel code{display:block;margin-top:26px;color:var(--gold);font:11px var(--font-mono)}.handoff{margin-bottom:130px}.handoff table{width:100%;margin-top:30px;border-collapse:collapse;text-align:left}.handoff th,.handoff td{padding:17px 14px;border-bottom:1px solid var(--line)}.handoff thead{color:var(--paper);background:var(--ink);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.handoff tbody th{color:var(--blue);font:600 14px var(--font-mono)}.handoff td{color:var(--muted);font-size:13px}.worktrees{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center;margin-bottom:130px;padding:45px;color:var(--paper);background:var(--deep)}.worktrees .eyebrow{color:var(--gold)}.worktrees h2{color:var(--paper)}.worktrees h2 em{color:var(--gold)}.worktrees>div:first-child>p{color:#b0bac1}.worktrees pre{margin:32px 0 0;padding:20px;overflow:auto;color:var(--gold);background:var(--ink)}pre code{font:12px/1.75 var(--font-mono)}.map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:90px}.repo{position:absolute;top:0;left:50%;width:180px;padding:17px;transform:translateX(-50%);color:var(--ink);background:var(--gold)}.map>div:not(.repo){min-height:135px;padding:20px;border:1px solid #41596b;background:var(--ink)}.repo span,.map>div:not(.repo) span{display:block;margin-bottom:12px;color:var(--accent);font:500 9px var(--font-mono)}.repo strong,.map>div:not(.repo) strong{display:block;font:14px var(--font-mono)}.repo small,.map>div:not(.repo) small{display:block;margin-top:12px;color:#9eabb4;font-size:11px}.routing{grid-template-columns:.8fr 1.2fr}.route-table{border-top:1px solid var(--line);border-left:1px solid var(--line)}.route-table>div{display:grid;grid-template-columns:.8fr .9fr 1.4fr}.route-table .head{color:var(--paper);background:var(--ink);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.route-table>div>*{padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.route-table strong{font-size:14px}.route-table b{color:var(--blue);letter-spacing:0;text-transform:none}.route-table small{color:var(--muted);font-size:12px}.skills{grid-template-columns:.8fr 1fr;margin-bottom:90px}.skill-package{display:grid;align-content:start;color:var(--paper);background:var(--blue)}.skill-package>span{padding:20px;color:var(--gold);border-bottom:1px solid #ffffff40}.skill-package>div{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:17px 20px;border-bottom:1px solid #ffffff40}.skill-package code{font:12px var(--font-mono)}.skill-package small{opacity:.7}.skills>pre{grid-column:2;margin:0;padding:28px;overflow:auto;color:#d8dee2;background:var(--ink)}.rule{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-top:55px;padding-top:22px;border-top:4px solid var(--gold)}.rule strong{max-width:850px;font-size:clamp(24px,3.3vw,42px);line-height:1.12}.callout{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-top:70px;padding:27px;background:var(--gold)}.callout strong{max-width:850px;font-size:clamp(22px,3vw,36px);line-height:1.1}.sources{margin-top:90px;color:var(--muted)}.sources p{color:var(--muted);font:13px/1.6 var(--font-sans);letter-spacing:0;text-transform:none}.sources a{color:var(--blue);font-weight:700}@media(max-width:800px){.thesis,.fleet-grid,.workflow,.worktrees,.routing,.skills{grid-template-columns:1fr}.arrow{transform:rotate(90deg);min-height:35px}.workers{grid-template-columns:1fr}.skills>pre{grid-column:auto}.route-table,.handoff{overflow-x:auto}.route-table>div{min-width:620px}.handoff table{min-width:650px}.rule,.callout{grid-template-columns:1fr}}@media(max-width:600px){.edition{display:none}.worktrees{padding:24px}.map{grid-template-columns:1fr;padding-top:90px}} +@import url('public/fonts/fonts.css'); :root{--paper:#f5f4f1;--ink:#172f42;--muted:#697b89;--accent:#7c78a8;--blue:#527f9f;--gold:#efc76b;--line:#d8dee2;--deep:#102536;--font-sans:manrope,arial,sans-serif;--font-mono:'DM Mono',monospace;}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:var(--font-sans)}main{padding:28px clamp(24px,6vw,96px) 80px}.topbar,.section-label{display:flex;justify-content:space-between;align-items:center}.brand{color:var(--ink);font-size:12px;font-weight:800;text-decoration:none;text-transform:uppercase}.mark{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:9px;border-radius:50%;color:var(--paper);background:var(--accent)}.edition,.eyebrow,.section-label,.thesis span,.captain span,.workers span,.route-table b,.skill-package>span,.rule span,.callout span,.sources{font:500 10px var(--font-mono);letter-spacing:.1em;text-transform:uppercase}.edition i{display:inline-block;width:6px;height:6px;margin:0 8px;border-radius:50%;background:var(--accent)}.hero{max-width:780px;padding:clamp(75px,12vh,145px) 0 85px}.eyebrow,.section-label,.thesis span{color:var(--accent)}h1{margin:16px 0 24px;font-size:clamp(56px,9vw,126px);line-height:.86;letter-spacing:-.08em}h1 em,h2 em{color:var(--blue);font-family:Georgia,serif;font-weight:400}.lede,.copy>p:last-child,.skills>div:first-child>p:last-child,.worktrees>div:first-child>p,.caption{max-width:570px;color:var(--muted);line-height:1.65}.thesis{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-bottom:110px;padding:28px;background:var(--gold)}.thesis div:first-child{display:grid;gap:16px}.thesis strong{font-size:clamp(24px,4vw,46px);line-height:1.05;letter-spacing:-.04em}.signal{display:flex;align-items:center;gap:10px}.signal i{width:28px;height:28px;border:1px solid var(--ink);background:var(--paper)}.signal i:nth-of-type(3){background:var(--blue)}.signal b{font:500 10px var(--font-mono)}.fleet{margin-bottom:120px}.section-label{padding-bottom:14px;border-bottom:1px solid var(--line)}.section-label span:last-child{color:var(--muted)}.fleet-grid{display:grid;grid-template-columns:.8fr 50px 1.5fr;gap:24px;margin-top:30px;color:var(--paper);background:var(--deep)}.captain{display:grid;align-content:center;gap:16px;padding:32px}.captain span{color:var(--gold)}h2{margin:14px 0 20px;font-size:clamp(36px,5vw,65px);line-height:.98;letter-spacing:-.06em}.captain h2{font-size:clamp(24px,3vw,38px)}.captain code,.workers code{color:var(--gold);font:11px var(--font-mono)}.arrow{display:grid;place-items:center;color:var(--gold);font-size:30px}.workers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#41596b}.workers article{display:grid;align-content:space-between;gap:20px;min-height:180px;padding:22px;background:var(--ink)}.workers span{color:#9eabb4}.workers strong{font-size:16px;line-height:1.2}.caption{margin:22px 0 0 auto}.workflow,.routing,.skills{display:grid;grid-template-columns:.7fr 1fr 1.3fr;gap:40px;align-items:start;margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.phase-tabs{display:grid;gap:8px}.phase-tabs button{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:15px;border:1px solid var(--line);color:var(--ink);background:transparent;font:500 10px var(--font-mono);letter-spacing:.07em;text-align:left;cursor:pointer}.phase-tabs button b{color:var(--accent)}.phase-tabs button.active{color:var(--paper);border-color:var(--ink);background:var(--ink)}.phase-panel{min-height:260px;padding:30px;color:var(--paper);background:var(--accent)}.phase-meta{display:flex;justify-content:space-between;gap:15px;color:var(--gold);font:500 10px var(--font-mono)}.phase-meta small{color:var(--paper);opacity:.7}.phase-panel h3{margin:44px 0 12px;font-size:clamp(24px,3vw,38px);line-height:1.05}.phase-panel p{line-height:1.6;opacity:.82}.phase-panel code{display:block;margin-top:26px;color:var(--gold);font:11px var(--font-mono)}.handoff{margin-bottom:130px}.handoff table{width:100%;margin-top:30px;border-collapse:collapse;text-align:left}.handoff th,.handoff td{padding:17px 14px;border-bottom:1px solid var(--line)}.handoff thead{color:var(--paper);background:var(--ink);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.handoff tbody th{color:var(--blue);font:600 14px var(--font-mono)}.handoff td{color:var(--muted);font-size:13px}.worktrees{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center;margin-bottom:130px;padding:45px;color:var(--paper);background:var(--deep)}.worktrees .eyebrow{color:var(--gold)}.worktrees h2{color:var(--paper)}.worktrees h2 em{color:var(--gold)}.worktrees>div:first-child>p{color:#b0bac1}.worktrees pre{margin:32px 0 0;padding:20px;overflow:auto;color:var(--gold);background:var(--ink)}pre code{font:12px/1.75 var(--font-mono)}.map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:90px}.repo{position:absolute;top:0;left:50%;width:180px;padding:17px;transform:translateX(-50%);color:var(--ink);background:var(--gold)}.map>div:not(.repo){min-height:135px;padding:20px;border:1px solid #41596b;background:var(--ink)}.repo span,.map>div:not(.repo) span{display:block;margin-bottom:12px;color:var(--accent);font:500 9px var(--font-mono)}.repo strong,.map>div:not(.repo) strong{display:block;font:14px var(--font-mono)}.repo small,.map>div:not(.repo) small{display:block;margin-top:12px;color:#9eabb4;font-size:11px}.routing{grid-template-columns:.8fr 1.2fr}.route-table{border-top:1px solid var(--line);border-left:1px solid var(--line)}.route-table>div{display:grid;grid-template-columns:.8fr .9fr 1.4fr}.route-table .head{color:var(--paper);background:var(--ink);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.route-table>div>*{padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.route-table strong{font-size:14px}.route-table b{color:var(--blue);letter-spacing:0;text-transform:none}.route-table small{color:var(--muted);font-size:12px}.skills{grid-template-columns:.8fr 1fr;margin-bottom:90px}.skill-package{display:grid;align-content:start;color:var(--paper);background:var(--blue)}.skill-package>span{padding:20px;color:var(--gold);border-bottom:1px solid #ffffff40}.skill-package>div{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:17px 20px;border-bottom:1px solid #ffffff40}.skill-package code{font:12px var(--font-mono)}.skill-package small{opacity:.7}.skills>pre{grid-column:2;margin:0;padding:28px;overflow:auto;color:#d8dee2;background:var(--ink)}.rule{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-top:55px;padding-top:22px;border-top:4px solid var(--gold)}.rule strong{max-width:850px;font-size:clamp(24px,3.3vw,42px);line-height:1.12}.callout{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-top:70px;padding:27px;background:var(--gold)}.callout strong{max-width:850px;font-size:clamp(22px,3vw,36px);line-height:1.1}.sources{margin-top:90px;color:var(--muted)}.sources p{color:var(--muted);font:13px/1.6 var(--font-sans);letter-spacing:0;text-transform:none}.sources a{color:var(--blue);font-weight:700}@media(max-width:800px){.thesis,.fleet-grid,.workflow,.worktrees,.routing,.skills{grid-template-columns:1fr}.arrow{transform:rotate(90deg);min-height:35px}.workers{grid-template-columns:1fr}.skills>pre{grid-column:auto}.route-table,.handoff{overflow-x:auto}.route-table>div{min-width:620px}.handoff table{min-width:650px}.rule,.callout{grid-template-columns:1fr}}@media(max-width:600px){.edition{display:none}.worktrees{padding:24px}.map{grid-template-columns:1fr;padding-top:90px}} main{max-width:1840px;margin-inline:auto}.reading-progress{position:fixed;inset:0 0 auto;z-index:20;height:3px;background:transparent}.reading-progress span{display:block;width:0;height:100%;background:var(--gold);transition:width .15s ease}.chapter-links{display:flex;gap:22px;margin-left:auto;margin-right:32px}.chapter-links a{color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.08em;text-decoration:none;text-transform:uppercase}.chapter-links a:hover{color:var(--ink)}.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:80px;align-items:end}.hero-index{display:grid;gap:14px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.hero-index span,.hero-index small{color:var(--muted);font:500 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.hero-index strong{font-size:clamp(27px,3vw,48px);line-height:.95;letter-spacing:-.06em}.hero-index em{color:var(--accent);font-family:Georgia,serif;font-weight:400}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr) 1.6fr;gap:1px;margin:0 0 110px;background:var(--line);border-top:1px solid var(--line);border-left:1px solid var(--line)}.hero-stats div,.hero-stats p{min-height:110px;margin:0;padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}.hero-stats div{display:flex;align-items:center;gap:16px}.hero-stats strong{font:500 34px var(--font-mono);color:var(--blue)}.hero-stats span{color:var(--muted);font:500 10px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.hero-stats p{display:grid;place-items:center;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}.failure-map{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.failure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:30px;background:var(--line);border-left:1px solid var(--line)}.failure-grid article{min-height:220px;padding:24px;background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.failure-grid span{color:var(--accent);font:500 11px var(--font-mono)}.failure-grid strong{display:block;margin:52px 0 12px;font-size:22px}.failure-grid p{max-width:300px;margin:0;color:var(--muted);font-size:13px;line-height:1.6}.skill-principles{display:grid;gap:10px;margin-top:30px;color:var(--blue);font:500 10px var(--font-mono);letter-spacing:.06em;text-transform:uppercase}.skill-principles span{color:var(--blue)}@media(min-width:2200px){main{max-width:1960px}.hero{grid-template-columns:minmax(0,1fr) 380px}.hero h1{font-size:clamp(100px,7vw,160px)}body{font-size:18px}}@media(max-width:800px){.chapter-links{display:none}.hero{display:block}.hero-index{max-width:300px;margin-top:50px}.hero-stats{grid-template-columns:1fr 1fr;margin-bottom:80px}.hero-stats p{grid-column:1/-1}.failure-grid{grid-template-columns:1fr}.failure-grid article{min-height:0}.failure-grid strong{margin-top:30px}}