:root{--bg:#f5f4ef;--paper:#fff;--ink:#161817;--muted:#60645f;--line:#d9d8d1;--accent:#224d3c;--soft:#e8eee9;--mono:"JetBrains Mono",monospace;--sans:"DM Sans",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5}.shell{width:min(1180px,calc(100% - 40px));margin:0 auto}.site-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:18px max(20px,calc((100vw - 1180px)/2));background:rgba(245,244,239,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:baseline;color:inherit;text-decoration:none}.brand span{font-size:13px;color:var(--muted)}nav{display:flex;gap:20px}nav a{color:var(--muted);font-size:13px;text-decoration:none}nav a:hover{color:var(--ink)}.hero{padding:110px 0 90px}.eyebrow,.kicker{font:600 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}h1{font-size:clamp(48px,7vw,92px);line-height:.98;letter-spacing:-.055em;max-width:900px;margin:18px 0 28px}h2{font-size:clamp(34px,4vw,58px);line-height:1.04;letter-spacing:-.04em;margin:8px 0 14px}h3{font-size:24px;line-height:1.15;letter-spacing:-.025em;margin:6px 0 10px}h4{font-size:14px;margin:0 0 10px;color:var(--muted)}p{margin:0}.hero-copy{font-size:22px;line-height:1.45;max-width:840px;color:#333834}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.button{display:inline-flex;padding:12px 17px;border:1px solid var(--ink);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}.button.primary{background:var(--ink);color:#fff}.credibility{display:flex;gap:10px;flex-wrap:wrap;margin-top:46px}.credibility span{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:13px;color:var(--muted);background:rgba(255,255,255,.45)}.credibility b{color:var(--ink)}.section{padding:88px 0;border-top:1px solid var(--line)}.section-heading{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:end;margin-bottom:44px}.section-heading>p{font-size:17px;color:var(--muted);max-width:560px}.section-heading.compact{grid-template-columns:1fr}.experience-grid,.proof-grid,.analysis-grid,.work-grid{display:grid;gap:16px}.experience-grid{grid-template-columns:repeat(3,1fr)}.experience-grid article,.proof-grid article,.work-grid article,.feature-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px}.experience-grid article>p,.work-grid article>p{font:600 11px var(--mono);text-transform:uppercase;color:var(--accent);margin-bottom:18px}.experience-grid span,.work-grid span,.feature-card p,.proof-grid article>p:not(.kicker){color:var(--muted)}.pillar-section{position:relative}.pillar-number{font:500 72px/1 var(--mono);color:#d5d6d1;margin-bottom:18px}.flow-card{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:center;background:#151817;color:#fff;border-radius:22px;padding:22px;margin-bottom:18px}.flow-step{padding:18px}.flow-step span{font:600 11px var(--mono);text-transform:uppercase;color:#aeb8b1}.flow-step b{display:block;font-size:24px;margin:5px 0}.flow-step p{color:#c6ccc8}.flow-arrow{font-size:28px;color:#69716c}.proof-grid{grid-template-columns:repeat(2,1fr)}.proof-grid article em{display:block;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-style:normal;font-size:13px;color:#444b46}.proof-grid article>a{display:inline-block;margin-top:14px;color:var(--accent);font-weight:700;font-size:14px;text-decoration:none}.analysis-grid{grid-template-columns:repeat(3,1fr)}.feature-card{display:flex;flex-direction:column;gap:22px}.feature-card>a,.work-grid a{margin-top:auto;color:var(--accent);font-weight:700;text-decoration:none}.quiet-link{font-size:13px;color:var(--muted)}.mini-method{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;background:var(--soft);padding:16px;border-radius:14px}.mini-method span,.mini-method strong{padding:10px;border:1px solid #c8d2cb;border-radius:10px;background:#fff;font:500 11px var(--mono);text-align:center}.mini-method strong{grid-column:1/-1;background:var(--accent);color:#fff}.synthesis{padding-bottom:100px}.synthesis-machine{display:grid;grid-template-columns:1fr auto 1.25fr auto 1.25fr auto 1fr auto 1fr;gap:10px;align-items:center}.synthesis-machine>span{color:#8b8f8c}.node{min-height:130px;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff;display:flex;flex-direction:column;justify-content:center}.node small{font:600 10px var(--mono);text-transform:uppercase;color:var(--accent)}.node b{margin-top:7px}.human-node{background:#151817;color:#fff}.human-node small{color:#aeb8b1}.synthesis-note{margin-top:22px;color:var(--muted);max-width:900px}.work-grid{grid-template-columns:repeat(3,1fr)}.work-grid article{display:flex;flex-direction:column;gap:10px}.work-grid article>b{font-size:13px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}.writing-section .article-card+.article-card{margin-top:12px}.article-card strong{white-space:nowrap}.article-card{display:flex;justify-content:space-between;gap:30px;align-items:center;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}.article-card p{font:600 11px var(--mono);text-transform:uppercase;color:var(--accent)}.article-card span{color:var(--muted)}.contact-section{padding:92px 0 110px}.contact-section h2{max-width:920px}footer{display:flex;justify-content:space-between;padding:28px max(20px,calc((100vw - 1180px)/2));border-top:1px solid var(--line);font-size:12px;color:var(--muted)}@media(max-width:900px){nav{display:none}.section-heading{grid-template-columns:1fr;gap:12px}.experience-grid,.analysis-grid,.work-grid{grid-template-columns:1fr}.proof-grid{grid-template-columns:1fr}.flow-card{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg);justify-self:center}.synthesis-machine{grid-template-columns:1fr}.synthesis-machine>span{transform:rotate(90deg);justify-self:center}.hero{padding-top:76px}h1{font-size:56px}}@media(max-width:520px){.shell{width:min(100% - 24px,1180px)}.site-header{padding:14px 12px}.brand span{display:none}.hero{padding:58px 0 70px}.hero-copy{font-size:18px}.section{padding:64px 0}h1{font-size:46px}h2{font-size:36px}.article-card{align-items:flex-start;flex-direction:column}}

/* Router review 2026-09-25: loop drawing on the first screen (desktop target 1440x1000). */
.loop-hero{padding:34px 0 40px}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:end;margin-bottom:22px}
.loop-hero h1{font-size:60px;line-height:1;letter-spacing:-.05em;margin:14px 0 0;max-width:760px}
.updated{margin-left:14px;padding:3px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);letter-spacing:.04em;font-weight:500}
.audience{font-size:16px;line-height:1.45;color:#333834}
.hero-side .hero-actions{margin-top:18px}
.loop-figure{margin:0}
.loop-stage{position:relative;width:1180px;max-width:100%}
.loop-svg{display:block;width:100%;height:auto;font-family:var(--sans)}
.loop-svg .wire{fill:none;stroke:var(--ink);stroke-width:2}
.loop-svg .wire.rare{stroke:var(--muted);stroke-dasharray:7 6}
.loop-svg .wire-label{font:500 12px var(--mono);fill:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.loop-svg .mark-person rect{fill:#151817}
.loop-svg .node-kicker{font:600 11px var(--mono);fill:#aeb8b1;text-transform:uppercase;letter-spacing:.06em}
.loop-svg .node-title{font-weight:700;font-size:19px;fill:#fff}
.loop-svg .node-title.dark{fill:var(--ink)}
.loop-svg .node-sub{font-size:16px;fill:var(--muted)}
.loop-svg .mark-ai{fill:#fff;stroke:var(--ink);stroke-width:2}
.loop-svg .mark-ai.layer{stroke-width:1.5}
.loop-svg .mark-method{fill:var(--soft);stroke:#9fb5a8;stroke-width:1.5}
.loop-svg .layer-title{font-size:20px;fill:var(--ink)}
.loop-svg .layer-num{font:500 14px var(--mono);fill:var(--muted)}
.loop-svg .layer-sub{font-weight:400;font-size:16px;fill:var(--muted)}
.loop-svg .pillar-link:hover .layer-title,.loop-svg .pillar-link:focus .layer-title{text-decoration:underline}
.loop-svg .pillar-link:focus{outline:none}
.loop-svg .pillar-link:focus-visible>rect{stroke:var(--accent);stroke-width:3}
.loop-svg .mark-check polygon{fill:#fff;stroke:var(--ink);stroke-width:2}
.loop-svg .mark-check text{font:600 11px var(--mono);fill:var(--ink)}
.loop-svg .mark-result rect{fill:var(--accent)}
.loop-svg .mark-result text{font-weight:700;font-size:15px;fill:#fff}
.loop-callout{position:absolute;z-index:3}
.loop-callout>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1.5px solid var(--ink);border-radius:999px;background:var(--bg);font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);white-space:nowrap}
.loop-callout>summary::-webkit-details-marker{display:none}
.loop-callout>summary::after{content:"+";font-size:14px;line-height:1}
.loop-callout[open]>summary{background:var(--ink);color:#fff}
.loop-callout[open]>summary::after{content:"−"}
.loop-callout>summary:focus-visible,.disclosure>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.callout-panel{position:absolute;top:calc(100% + 8px);left:0;width:340px;padding:18px 20px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(22,24,23,.16)}
.loop-callout.align-right .callout-panel{left:auto;right:0}
.loop-callout.open-up .callout-panel{top:auto;bottom:calc(100% + 8px)}
.callout-panel h3{font-size:20px}
.callout-panel>p:not(.kicker){color:var(--muted);font-size:15px}
.callout-panel em{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-style:normal;font-size:13px;color:#444b46}
.callout-panel a{display:inline-block;margin-top:12px;color:var(--accent);font-weight:700;font-size:14px;text-decoration:none}
.loop-figure figcaption{margin-top:14px}
.loop-key{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 16px;padding:0;list-style:none;font:500 12px var(--mono);color:var(--muted)}
.loop-key li{display:flex;align-items:center;gap:7px}
.loop-key i{display:inline-block;width:16px;height:12px;border-radius:3px}
.key-person{background:#151817}.key-ai{background:#fff;border:2px solid var(--ink)}.key-method{background:var(--soft);border:1.5px solid #9fb5a8}.key-result{background:var(--accent)}
.loop-key i.key-check{width:11px;height:11px;border:2px solid var(--ink);background:#fff;transform:rotate(45deg);border-radius:1px}
.loop-key i.key-rare{height:0;border-top:2px dashed var(--muted);border-radius:0}
.loop-caption{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:start}
.loop-caption .hero-copy{font-size:17px;max-width:none}
.caveat{font-size:15px;color:var(--muted);border-left:3px solid var(--line);padding-left:14px}
.pillar-proof{font-size:16px;color:var(--muted);max-width:900px}
.pillar-proof a{color:var(--accent);font-weight:600}
#analysis .pillar-proof{margin-top:26px}
.method-frame{list-style:none;margin:0;padding:14px;background:#f1f3ef;border-radius:14px;display:grid;grid-template-rows:repeat(3,72px);gap:22px}
.method-frame .slot{position:relative;display:flex;flex-direction:column;justify-content:center;padding:8px 12px;border-radius:10px;font-size:14px;line-height:1.3}
.method-frame .slot small{font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.method-frame .start{background:#fff;border:1px solid var(--line)}.method-frame .start small{color:var(--muted)}
.method-frame .work{background:var(--soft);border:1.5px solid #9fb5a8}.method-frame .work small{color:var(--accent)}
.method-frame .result{background:var(--accent);color:#fff;font-weight:600}.method-frame .result small{color:#cfe0d6}
.method-frame .slot:not(:last-child)::after{content:"↓";position:absolute;left:50%;bottom:-21px;transform:translateX(-50%);color:var(--ink);font-size:15px;line-height:20px}
.disclosure>summary{cursor:pointer;font-size:13px;color:var(--muted)}
.disclosure>summary:hover{color:var(--ink)}
.disclosure[open]>summary{color:var(--ink)}
.disclosure>p{margin-top:8px;font-size:13px;color:#444b46;background:var(--soft);border-radius:10px;padding:10px 12px}
.feature-card>.disclosure{margin-top:auto}
.proof-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.proof-table th,.proof-table td{text-align:left;vertical-align:top;padding:18px 20px;border-bottom:1px solid var(--line);font-size:14px}
.proof-table thead th{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:#fafaf7}
.proof-table tbody tr:last-child>*{border-bottom:0}
.proof-table tbody th{font-size:17px;width:22%}
.proof-table td:nth-child(2){width:26%}
.proof-table td:nth-child(4){width:24%}
.proof-table td{color:var(--muted)}
.proof-table td>a{color:var(--accent);font-weight:700;text-decoration:none}
.pillar-tag{display:block;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin-bottom:6px}
.proof-table tr:target{background:var(--soft)}

/* Replay cards (2026-09-26): one card per recorded-run replay, generated by tools/build_replays.py. */
.replay-group{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:34px 0 14px}
.replay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.replay-card{display:flex;flex-direction:column;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px}
.replay-card h4{font-size:20px;line-height:1.15;letter-spacing:-.02em;color:var(--ink);margin:0}
.replay-card p{color:var(--muted);font-size:15px}
.replay-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.replay-links .button{padding:8px 13px;font-size:13px}
@media(max-width:900px){.replay-grid{grid-template-columns:1fr}}
/* Phones and narrow tablets: the hero's fixed 360px side column left the headline zero width (2026-10-06 review). */
@media(max-width:900px){.hero-top{grid-template-columns:1fr;gap:20px;align-items:start}.eyebrow .updated{display:inline-block;margin-top:8px}}
/* Visible tooltips on every control (machines/tooltips.js; workspace policy ui-tooltips-default, 2026-10-06). */
.tip-bubble{position:fixed;z-index:60;max-width:300px;background:#161817;color:#fff;border:1px solid #224d3c;border-radius:8px;padding:8px 10px;font:500 13px/1.4 "DM Sans",sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none}
.tip-toast{position:fixed;left:12px;right:12px;bottom:16px;z-index:60;background:#161817;color:#fff;border:1px solid #224d3c;border-radius:10px;padding:10px 12px;font:500 14px/1.4 "DM Sans",sans-serif}
.tip-bubble[hidden],.tip-toast[hidden]{display:none!important}