:root {
  --guide-bg: #05070b;
  --guide-panel: #0a0d13;
  --guide-card: #0d1119;
  --guide-line: rgba(225, 234, 247, 0.12);
  --guide-muted: #8e98a8;
  --guide-text: #edf1f7;
  --guide-lime: #c6ff4a;
  --guide-cyan: #55d9ff;
  --guide-orange: #ff9d5c;
  --guide-font: 'DM Sans', sans-serif;
  --guide-display: 'Manrope', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 88px; }
body { background: var(--guide-bg); color: var(--guide-text); font-family: var(--guide-font); }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: radial-gradient(circle at 52% 12%, rgba(85,217,255,.055), transparent 32%), var(--guide-bg); }
a { color: inherit; }
button, input { font: inherit; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.reading-progress { position: fixed; z-index: 200; inset: 0 0 auto; height: 2px; background: transparent; }
.reading-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--guide-cyan), var(--guide-lime)); box-shadow: 0 0 12px var(--guide-cyan); }

.guide-nav { position: fixed; inset: 0 0 auto; z-index: 100; min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px clamp(20px, 4vw, 56px); background: rgba(5,7,11,.78); border-bottom: 1px solid rgba(255,255,255,.07); backdrop-filter: blur(18px); }
.guide-brand { display: inline-flex; width: fit-content; align-items: center; }
.guide-brand img { display: block; width: 142px; height: auto; }
.guide-nav nav { display: flex; gap: 28px; }
.guide-nav nav a, .nav-action { color: var(--guide-muted); font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; transition: color .2s; }
.guide-nav nav a:hover { color: var(--guide-text); }
.nav-action { justify-self: end; color: var(--guide-lime); padding: 11px 16px; border: 1px solid rgba(198,255,74,.32); border-radius: 99px; }
.nav-action:hover { color: #071000; background: var(--guide-lime); }

.hero { min-height: 100svh; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(440px,.9fr); align-items: center; gap: 4vw; padding: 120px max(24px, calc((100vw - 1180px)/2)) 80px; border-bottom: 1px solid var(--guide-line); }
.hero-grid { position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(150,170,200,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(150,170,200,.12) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to right, black, transparent 80%); }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.hero-orb--one { width: 500px; height: 500px; right: -200px; top: -160px; background: radial-gradient(circle, rgba(85,217,255,.12), transparent 68%); }
.hero-orb--two { width: 420px; height: 420px; left: 30%; bottom: -330px; background: radial-gradient(circle, rgba(198,255,74,.08), transparent 70%); }
.hero-copy { position: relative; z-index: 2; padding-block: 30px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 30px; color: var(--guide-muted); font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.hero-kicker span { width: 7px; height: 7px; border-radius: 50%; background: var(--guide-lime); box-shadow: 0 0 15px var(--guide-lime); }
.hero h1 { max-width: 800px; font: 700 clamp(3.25rem, 6.5vw, 6.4rem)/.94 var(--guide-display); letter-spacing: -.065em; }
.hero h1 em { color: var(--guide-lime); font-style: normal; }
.hero-deck { max-width: 650px; margin-top: 28px; color: #aab3c2; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.65; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 26px; color: #697383; font: 500 10px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.hero-meta span:not(:first-child)::before { content: '/'; margin-right: 26px; color: #353c47; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.guide-button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; padding: 0 21px; border: 1px solid rgba(255,255,255,.16); border-radius: 4px; color: #c7ced9; background: rgba(255,255,255,.025); font: 600 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: transform .2s, border-color .2s, background .2s; }
.guide-button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.34); }
.guide-button--primary { color: #0b1001; border-color: var(--guide-lime); background: var(--guide-lime); }
.guide-button--primary:hover { background: #d5ff78; border-color: #d5ff78; }
.hero-system { position: relative; z-index: 2; width: min(100%, 540px); aspect-ratio: 1.2; justify-self: end; }
.hero-system > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-system > svg path { fill: none; stroke: rgba(105,214,255,.23); stroke-width: 1; stroke-dasharray: 4 7; }
.system-label { position: absolute; inset: 5px auto auto 50%; transform: translateX(-50%); color: #586374; font: 500 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; }
.system-core { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 150px; height: 150px; display: grid; place-content: center; text-align: center; border-radius: 50%; border: 1px solid rgba(198,255,74,.55); background: radial-gradient(circle, rgba(198,255,74,.12), #070a0f 65%); box-shadow: 0 0 80px rgba(198,255,74,.09), inset 0 0 30px rgba(198,255,74,.06); }
.system-core::before, .system-core::after { content: ''; position: absolute; inset: -15px; border: 1px solid rgba(198,255,74,.13); border-radius: 50%; }
.system-core::after { inset: -35px; border-style: dashed; animation: rotate-ring 24s linear infinite; }
.core-pulse { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--guide-lime); top: 18px; left: 50%; box-shadow: 0 0 12px var(--guide-lime); }
.core-title { font: 700 20px/1 var(--guide-display); letter-spacing: .15em; color: var(--guide-lime); }
.system-core small { margin-top: 9px; color: #798493; font: 400 8px/1 var(--font-mono); letter-spacing: .08em; }
.system-node { position: absolute; z-index: 3; min-width: 116px; padding: 14px 16px; border: 1px solid var(--guide-line); border-radius: 6px; background: rgba(9,13,19,.88); color: #b7c0cc; font: 600 12px/1 var(--guide-display); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.system-node span { display: block; margin-bottom: 6px; color: var(--guide-cyan); font: 500 8px/1 var(--font-mono); letter-spacing: .12em; }
.system-node--data { left: 2%; top: 10%; }.system-node--tools { right: 1%; top: 10%; }.system-node--skills { left: -3%; top: 49%; }.system-node--logs { right: -2%; top: 51%; }.system-node--trust { left: 50%; bottom: 2%; transform: translateX(-50%); }
.signal { position: absolute; z-index: 4; width: 5px; height: 5px; border-radius: 50%; background: var(--guide-cyan); box-shadow: 0 0 10px var(--guide-cyan); animation: signal-pulse 2.8s ease-in-out infinite; }
.signal--one { left: 31%; top: 33%; }.signal--two { right: 31%; top: 35%; animation-delay: -.9s; }.signal--three { left: 49%; bottom: 27%; animation-delay: -1.8s; }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; color: #596372; text-decoration: none; font: 500 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }
.scroll-cue i { display: block; width: 38px; height: 1px; background: #596372; position: relative; overflow: hidden; }
.scroll-cue i::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: var(--guide-lime); animation: scan 2.3s ease-in-out infinite; }
@keyframes rotate-ring { to { transform: rotate(360deg); } }
@keyframes signal-pulse { 0%,100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes scan { 50%,100% { transform: translateX(100%); } }

.section-index { color: #657080; font: 500 10px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.thesis { display: grid; grid-template-columns: 180px minmax(0,1fr) 300px; gap: 60px; padding-block: 120px; border-bottom: 1px solid var(--guide-line); }
.thesis-copy { max-width: 670px; }
.large-copy { color: #dce2eb; font: 500 clamp(1.45rem, 2.6vw, 2rem)/1.4 var(--guide-display); letter-spacing: -.025em; }
.large-copy strong { color: var(--guide-lime); font-weight: 600; }
.thesis-copy > p:last-child, .deep-copy > p, .flywheel-copy > p:not(.large-copy), .trust-copy > p, .closing-copy p { margin-top: 26px; color: var(--guide-muted); font-size: 1rem; line-height: 1.8; }
.source-note { align-self: end; padding: 20px; border-top: 1px solid var(--guide-line); background: rgba(255,255,255,.015); }
.source-note span, .layer-details span, .apprentice-note span, .deliverable span { display: block; margin-bottom: 10px; color: var(--guide-cyan); font: 500 9px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.source-note p { color: #727d8c; font-size: .8rem; line-height: 1.7; }

.architecture, .field-guide, .resolver-section, .jit-section, .scorecard { padding-block: 130px; border-bottom: 1px solid var(--guide-line); }
.section-heading { display: grid; grid-template-columns: 1fr 360px; align-items: end; gap: 60px; margin-bottom: 58px; }
.section-heading h2, .deep-copy h2, .trust-copy h2, .how-to h2 { margin-top: 18px; font: 600 clamp(2.4rem, 5vw, 4.5rem)/1.03 var(--guide-display); letter-spacing: -.055em; }
.section-heading > p { color: var(--guide-muted); font-size: .95rem; line-height: 1.75; }
.architecture-lab { border: 1px solid var(--guide-line); background: var(--guide-panel); }
.mode-switch { display: flex; padding: 7px; border-bottom: 1px solid var(--guide-line); }
.mode-switch button { flex: 1; padding: 15px; border: 0; color: #737d8d; background: transparent; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.mode-switch button.is-active { color: var(--guide-text); background: #131821; box-shadow: inset 0 -2px var(--guide-orange); }
.architecture-canvas { display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; }
.architecture-copy { padding: clamp(30px, 5vw, 62px); border-right: 1px solid var(--guide-line); }
.architecture-status { display: flex; align-items: center; gap: 10px; color: var(--guide-orange); font: 500 10px/1 var(--font-mono); letter-spacing: .09em; text-transform: uppercase; }
.architecture-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.architecture-copy h3 { max-width: 520px; margin-top: 25px; font: 600 clamp(1.6rem,3vw,2.5rem)/1.15 var(--guide-display); letter-spacing: -.035em; }
.architecture-copy > p { max-width: 570px; margin-top: 20px; color: var(--guide-muted); line-height: 1.75; }
.architecture-copy ul { list-style: none; margin-top: 25px; }
.architecture-copy li { position: relative; margin-top: 10px; padding-left: 20px; color: #aab3c1; font-size: .88rem; }
.architecture-copy li::before { content: '-'; position: absolute; left: 0; color: var(--guide-orange); }
.architecture-diagram { display: grid; place-items: center; padding: 45px; background: radial-gradient(circle, rgba(255,157,92,.05), transparent 55%); }
.diagram-shell { width: 100%; max-width: 440px; padding: 24px; border: 1px solid rgba(255,157,92,.23); border-radius: 7px; background: rgba(5,7,11,.7); }
.diagram-label { color: #606b7a; font: 500 9px/1 var(--font-mono); letter-spacing: .12em; }
.diagram-flow { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 120px; }
.diagram-flow i { color: #414a58; font-style: normal; }
.diagram-box { padding: 14px 12px; border: 1px solid #333c49; border-radius: 4px; color: #8d98a8; font: 500 9px/1 var(--font-mono); }
.diagram-box--ai { color: var(--guide-orange); border-color: rgba(255,157,92,.48); background: rgba(255,157,92,.08); }
.diagram-caption { color: #647080; font-size: .76rem; line-height: 1.6; text-align: center; }
.architecture-canvas[data-architecture="native"] .architecture-status { color: var(--guide-lime); }
.architecture-canvas[data-architecture="native"] .architecture-copy li::before { color: var(--guide-lime); }
.architecture-canvas[data-architecture="native"] .architecture-diagram { background: radial-gradient(circle, rgba(198,255,74,.065), transparent 55%); }
.architecture-canvas[data-architecture="native"] .diagram-shell { border-color: rgba(198,255,74,.28); }
.architecture-canvas[data-architecture="native"] .diagram-flow { flex-direction: column; }
.architecture-canvas[data-architecture="native"] .diagram-box--ai { color: var(--guide-lime); border-color: rgba(198,255,74,.5); background: rgba(198,255,74,.08); }

.layer-explorer { display: grid; grid-template-columns: 240px minmax(0,1fr); border: 1px solid var(--guide-line); background: var(--guide-panel); }
.layer-tabs { display: flex; flex-direction: column; padding: 10px; border-right: 1px solid var(--guide-line); }
.layer-tabs button { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 0 16px; border: 0; border-left: 2px solid transparent; color: #788393; background: transparent; font-size: .85rem; text-align: left; cursor: pointer; transition: all .2s; }
.layer-tabs button span { color: #4d5765; font: 500 9px/1 var(--font-mono); }
.layer-tabs button:hover { color: #c4ccd7; background: rgba(255,255,255,.025); }
.layer-tabs button[aria-selected="true"] { color: var(--guide-text); border-left-color: var(--guide-lime); background: rgba(198,255,74,.04); }
.layer-tabs button[aria-selected="true"] span { color: var(--guide-lime); }
.layer-panel { min-height: 540px; display: grid; grid-template-columns: 70px minmax(0,1fr) minmax(250px,.75fr); gap: 25px; padding: clamp(32px,5vw,64px); outline: none; }
.layer-number { color: rgba(198,255,74,.22); font: 500 2.5rem/1 var(--font-mono); }
.layer-kicker { color: var(--guide-cyan); font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .11em; }
.layer-content h3 { max-width: 530px; margin-top: 22px; font: 600 clamp(1.8rem,3.5vw,3rem)/1.12 var(--guide-display); letter-spacing: -.04em; }
.layer-content > p { max-width: 600px; margin-top: 24px; color: var(--guide-muted); line-height: 1.8; }
.layer-details { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 38px; }
.layer-details > div { padding: 18px; border-top: 1px solid var(--guide-line); background: rgba(255,255,255,.015); }
.layer-details p { color: #8e98a8; font-size: .82rem; line-height: 1.65; }
.layer-visual { position: relative; align-self: stretch; min-height: 340px; border: 1px solid var(--guide-line); overflow: hidden; background-image: linear-gradient(rgba(150,170,200,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(150,170,200,.06) 1px, transparent 1px); background-size: 30px 30px; }
.data-source, .data-core { position: absolute; display: grid; place-items: center; border: 1px solid rgba(85,217,255,.28); background: #0b1017; color: #84909f; font: 500 9px/1 var(--font-mono); }
.data-source { width: 48px; height: 38px; }.data-source:nth-of-type(1) { left: 10%; top: 12%; }.data-source:nth-of-type(2) { right: 10%; top: 20%; }.data-source:nth-of-type(3) { left: 16%; bottom: 13%; }
.data-core { left: 50%; top: 50%; width: 120px; height: 120px; transform: translate(-50%,-50%); border-radius: 50%; color: var(--guide-lime); border-color: rgba(198,255,74,.4); box-shadow: 0 0 40px rgba(198,255,74,.07); text-align: center; line-height: 1.8; }
.data-core small { color: #5f6977; font-size: 7px; }
.data-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--guide-cyan); box-shadow: 0 0 8px var(--guide-cyan); animation: signal-pulse 2s infinite; }.data-dot--1 { left: 36%; top: 30%; }.data-dot--2 { right: 28%; top: 42%; animation-delay: -.6s; }.data-dot--3 { left: 34%; bottom: 28%; animation-delay: -1.2s; }

.deep-dive { padding-block: 130px; border-bottom: 1px solid var(--guide-line); }
.deep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(60px,9vw,130px); margin-top: 50px; align-items: center; }
.deep-copy h2, .trust-copy h2 { font-size: clamp(2.2rem,4vw,3.7rem); }
.deep-copy strong { color: var(--guide-lime); }
.friction-lab { padding: clamp(28px,4vw,45px); border: 1px solid var(--guide-line); background: var(--guide-panel); }
.lab-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 38px; color: #7b8695; font: 500 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.lab-header output { color: var(--guide-lime); font-size: 1.35rem; }
.friction-lab label { color: #c2cad5; font-size: .86rem; }
.friction-lab input { width: 100%; margin: 26px 0 8px; accent-color: var(--guide-lime); }
.range-labels { display: flex; justify-content: space-between; color: #525c6a; font: 400 8px/1 var(--font-mono); text-transform: uppercase; }
.question-meter { margin-top: 40px; }
.question-meter > span { color: #7b8695; font-size: .75rem; }
.question-meter > div { height: 6px; margin-top: 12px; background: #171c24; overflow: hidden; }
.question-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--guide-cyan), var(--guide-lime)); transition: width .25s; }
.question-meter strong { display: block; margin-top: 10px; color: #d6dce5; font: 500 11px/1 var(--font-mono); }
#friction-insight { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--guide-line); color: #788393; font-size: .82rem; line-height: 1.7; }

.resolver-grid { display: grid; grid-template-columns: 1.15fr .85fr; border: 1px solid var(--guide-line); }
.resolver-flow { min-height: 570px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px; background-image: radial-gradient(circle, rgba(85,217,255,.055), transparent 48%), linear-gradient(rgba(150,170,200,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(150,170,200,.05) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; }
.request-bubble { max-width: 430px; padding: 18px 22px; border: 1px solid var(--guide-line); border-radius: 7px; background: #111620; color: #cbd2dc; font-size: .9rem; line-height: 1.55; }
.resolver-arrow { height: 72px; width: 1px; position: relative; background: linear-gradient(var(--guide-cyan), rgba(85,217,255,.1)); }
.resolver-arrow span { position: absolute; top: 31px; left: 16px; color: #515c6b; font: 400 8px/1 var(--font-mono); white-space: nowrap; }
.resolver-core { width: 210px; padding: 22px; border: 1px solid rgba(198,255,74,.4); background: rgba(198,255,74,.05); text-align: center; color: var(--guide-lime); font: 600 14px/1 var(--guide-display); letter-spacing: .1em; }
.resolver-core small { display: block; margin-top: 9px; color: #697483; font: 400 8px/1 var(--font-mono); letter-spacing: .06em; }
.tool-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 58px; }
.tool-row span { padding: 10px 13px; border: 1px solid rgba(85,217,255,.2); background: #0b1017; color: #82909f; font: 400 8px/1 var(--font-mono); }
.resolver-rules { display: flex; flex-direction: column; border-left: 1px solid var(--guide-line); }
.resolver-rules > div { flex: 1; padding: 34px; border-bottom: 1px solid var(--guide-line); }
.resolver-rules > div:last-child { border-bottom: 0; }
.resolver-rules span { color: var(--guide-lime); font: 500 9px/1 var(--font-mono); letter-spacing: .12em; }
.resolver-rules h3 { margin-top: 12px; font: 600 1.15rem/1.25 var(--guide-display); }
.resolver-rules p { margin-top: 10px; color: var(--guide-muted); font-size: .8rem; line-height: 1.65; }

.flywheel-section { padding-block: 130px; overflow: hidden; border-bottom: 1px solid var(--guide-line); background: #080b10; }
.flywheel { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.flywheel-ring { position: relative; aspect-ratio: 1; }
.flywheel-ring svg { position: absolute; inset: 8%; width: 84%; height: 84%; animation: rotate-ring 55s linear infinite; }
.flywheel-ring svg circle { fill: none; stroke: rgba(255,255,255,.06); stroke-width: 1; }
.flywheel-ring svg path { fill: none; stroke: var(--guide-lime); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 80 190; opacity: .5; }
.flywheel-center { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; transform: translate(-50%,-50%); display: grid; place-content: center; text-align: center; border-radius: 50%; background: #0e131a; border: 1px solid rgba(198,255,74,.3); }
.flywheel-center b { color: var(--guide-lime); font: 600 15px/1.15 var(--guide-display); letter-spacing: .08em; }
.flywheel-center small { margin-top: 8px; color: #606c7b; font: 400 8px/1.4 var(--font-mono); }
.flywheel-node { position: absolute; min-width: 125px; padding: 14px; border: 1px solid var(--guide-line); background: #10151d; box-shadow: 0 15px 30px rgba(0,0,0,.35); }
.flywheel-node span { color: var(--guide-cyan); font: 500 8px/1 var(--font-mono); }.flywheel-node b { display: block; margin-top: 5px; font: 600 13px/1 var(--guide-display); }.flywheel-node small { display: block; margin-top: 6px; color: #667180; font: 400 8px/1 var(--font-mono); }
.flywheel-node--1 { left: 38%; top: 1%; }.flywheel-node--2 { right: 0; top: 42%; }.flywheel-node--3 { left: 39%; bottom: 1%; }.flywheel-node--4 { left: 0; top: 42%; }
.flywheel-copy .large-copy { margin-bottom: 28px; }
.apprentice-note { margin-top: 36px; padding: 24px; border-left: 2px solid var(--guide-lime); background: rgba(198,255,74,.035); }
.apprentice-note p { color: #9ba5b3; font-size: .85rem; line-height: 1.7; }

.trust-section { padding-block: 130px; border-bottom: 1px solid var(--guide-line); }
.trust-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(60px,9vw,120px); align-items: center; margin-top: 55px; }
.trust-principles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.trust-principles span { padding: 8px 11px; border: 1px solid var(--guide-line); color: #82909f; font: 400 8px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.activity-window { border: 1px solid var(--guide-line); background: #0b0f15; box-shadow: 0 35px 90px rgba(0,0,0,.35); }
.window-bar { display: flex; align-items: center; gap: 6px; padding: 13px 16px; border-bottom: 1px solid var(--guide-line); color: #798493; font: 400 9px/1 var(--font-mono); }
.window-bar i { width: 7px; height: 7px; border-radius: 50%; background: #313945; }.window-bar span { margin-left: 8px; }.window-bar b { margin-left: auto; color: var(--guide-lime); font-weight: 400; }
.activity-item { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 22px; border-bottom: 1px solid var(--guide-line); }
.activity-item:last-child { border-bottom: 0; }.activity-item--agent { background: rgba(85,217,255,.025); }
.activity-avatar { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #313b49; border-radius: 5px; color: #a4aebb; font: 500 9px/1 var(--font-mono); }.activity-item--agent .activity-avatar { color: var(--guide-cyan); border-color: rgba(85,217,255,.3); }
.activity-item b { color: #cbd2db; font-size: .78rem; }.activity-item small { margin-left: 8px; color: #525d6b; font: 400 8px/1 var(--font-mono); }.activity-item p { margin-top: 7px; color: #84909f; font-size: .77rem; line-height: 1.6; }
.activity-chip { display: inline-block; margin-top: 10px; padding: 5px 8px; border: 1px solid rgba(85,217,255,.2); color: var(--guide-cyan); font: 400 7px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }.activity-chip--mint { color: var(--guide-lime); border-color: rgba(198,255,74,.2); }

.jit-demo { max-width: 960px; margin-inline: auto; border: 1px solid var(--guide-line); background: #0a0e14; box-shadow: 0 40px 100px rgba(0,0,0,.35); }
.jit-prompt { display: flex; gap: 18px; padding: 22px 26px; border-bottom: 1px solid var(--guide-line); }.jit-prompt span { color: var(--guide-lime); font: 500 8px/1.5 var(--font-mono); }.jit-prompt p { color: #b9c1cc; font-size: .86rem; }
.jit-generated { padding: clamp(24px,4vw,42px); }.jit-top { display: flex; justify-content: space-between; color: #5e6977; font: 400 8px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }.jit-top b { color: var(--guide-cyan); font-weight: 400; }
.runway-chart { height: 240px; display: grid; grid-template-columns: 45px 1fr; margin-top: 34px; }.chart-y { display: flex; flex-direction: column; justify-content: space-between; color: #4e5866; font: 400 7px/1 var(--font-mono); padding-bottom: 22px; }.chart-lines { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 22px; }.chart-lines > i { height: 1px; background: rgba(255,255,255,.06); }.chart-lines svg { position: absolute; inset: 0 0 22px; width: 100%; height: calc(100% - 22px); overflow: visible; }.chart-lines path { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }.chart-base { stroke: var(--guide-cyan); }.chart-scenario { stroke: var(--guide-lime); stroke-dasharray: 6 6; }
.scenario-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.scenario-cards div { padding: 16px; border: 1px solid var(--guide-line); }.scenario-cards span { display: block; color: #65707f; font-size: .7rem; }.scenario-cards b { display: block; margin-top: 8px; font: 600 1.15rem/1 var(--guide-display); }.scenario-cards div:nth-child(2) b { color: var(--guide-lime); }
.jit-caption { max-width: 700px; margin: 26px auto 0; color: #677281; font: 400 10px/1.7 var(--font-mono); text-align: center; }

.how-to { padding-block: 140px; background: #eef1eb; color: #11151a; }
.how-to .section-index { color: #727a71; }.how-to h2 { margin-top: 18px; font-size: clamp(2.8rem,5vw,4.8rem); }
.how-to-head { display: grid; grid-template-columns: 1fr 280px; align-items: end; gap: 50px; }
.check-progress { padding: 20px; border: 1px solid #cbd0c8; background: rgba(255,255,255,.4); }.check-progress > span { color: #757c74; font: 500 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }.check-progress b { float: right; font: 500 10px/1 var(--font-mono); }.check-progress > div { clear: both; height: 5px; margin-top: 17px; background: #d8ddd5; }.check-progress i { display: block; width: 0; height: 100%; background: #182117; transition: width .3s; }.check-progress button { margin-top: 12px; padding: 0; border: 0; background: transparent; color: #7a8179; font: 500 8px/1 var(--font-mono); text-transform: uppercase; cursor: pointer; }
.how-to-intro { max-width: 690px; margin-top: 36px; color: #626961; font-size: 1rem; line-height: 1.75; }
.build-steps { margin-top: 75px; border-top: 1px solid #c9cec6; }
.build-step { display: grid; grid-template-columns: 45px 80px 1fr; gap: 24px; padding: 55px 0; border-bottom: 1px solid #c9cec6; }
.step-check { width: 30px; height: 30px; padding: 0; border: 1px solid #aeb5ac; border-radius: 50%; background: transparent; cursor: pointer; transition: all .2s; }.step-check span { display: block; width: 10px; height: 6px; margin: -2px auto 0; border: solid transparent; border-width: 0 0 2px 2px; transform: rotate(-45deg); }.build-step.is-complete .step-check { background: #182117; border-color: #182117; }.build-step.is-complete .step-check span { border-color: #d5ff78; }.build-step.is-complete .step-body h3 { text-decoration-color: rgba(20,30,20,.25); }
.step-num { color: #8b9289; font: 500 11px/1 var(--font-mono); padding-top: 9px; }.step-time { color: #65715f; font: 500 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .11em; }.step-body h3 { margin-top: 10px; font: 650 clamp(1.7rem,3vw,2.45rem)/1.18 var(--guide-display); letter-spacing: -.035em; }.step-body > p { max-width: 730px; margin-top: 18px; color: #555d55; line-height: 1.75; }.step-body ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; list-style: none; margin-top: 27px; }.step-body li { position: relative; padding: 14px 14px 14px 28px; border-top: 1px solid #bdc4ba; color: #555d55; font-size: .8rem; line-height: 1.55; }.step-body li::before { content: '+'; position: absolute; left: 8px; color: #253321; font-family: var(--font-mono); }
.prompt-box { margin-top: 30px; border: 1px solid #c6cbc3; background: #e5e9e2; }.prompt-box > div { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #c6cbc3; color: #757d74; font: 500 8px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }.copy-prompt { padding: 0; border: 0; background: transparent; color: #354332; font: inherit; cursor: pointer; }.prompt-box pre { padding: 18px; color: #333a33; font: 400 .75rem/1.7 var(--font-mono); white-space: pre-wrap; }
.deliverable { margin-top: 28px; padding: 20px; border-left: 2px solid #3e5337; background: #e5e9e2; }.deliverable span { color: #4d6047; }.deliverable p { color: #525b51; font-size: .83rem; line-height: 1.6; }.autonomy-scale { display: flex; align-items: center; gap: 12px; margin-top: 30px; color: #4e574d; font: 500 8px/1 var(--font-mono); text-transform: uppercase; }.autonomy-scale i { flex: 1; height: 1px; background: #aeb6ab; position: relative; }.autonomy-scale i::after { content: ''; position: absolute; right: 0; top: -2px; border-left: 4px solid #aeb6ab; border-top: 2px solid transparent; border-bottom: 2px solid transparent; }

.score-grid { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--guide-line); }.score-grid > div { min-height: 180px; padding: 28px; border-right: 1px solid var(--guide-line); border-bottom: 1px solid var(--guide-line); }.score-grid > div:nth-child(3n) { border-right: 0; }.score-grid > div:nth-last-child(-n+3) { border-bottom: 0; }.score-grid span { color: var(--guide-lime); font: 500 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }.score-grid b { display: block; margin-top: 34px; font: 500 1.05rem/1.45 var(--guide-display); }

.closing { padding-block: 145px 110px; }.closing-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 90px; margin-top: 55px; }.closing h2 { font: 600 clamp(3rem,6vw,5.7rem)/.98 var(--guide-display); letter-spacing: -.06em; }.closing h2 em { color: var(--guide-lime); font-style: normal; }.closing-copy p:first-child { margin-top: 0; }.closing-cta { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: 100px; padding: 35px 0; border-top: 1px solid var(--guide-line); border-bottom: 1px solid var(--guide-line); }.closing-cta span { color: var(--guide-cyan); font: 500 9px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }.closing-cta h3 { max-width: 620px; margin-top: 10px; font: 500 clamp(1.3rem,2.6vw,2rem)/1.3 var(--guide-display); }
.guide-footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 25px; padding: 35px max(24px,calc((100vw - 1180px)/2)); border-top: 1px solid var(--guide-line); color: #5f6978; font-size: .75rem; }.guide-footer .guide-brand { grid-row: span 2; }.guide-footer p { color: #8a95a4; }.guide-footer div { display: flex; gap: 20px; }.guide-footer a { text-decoration: none; }.guide-footer > span { grid-column: 2; font: 400 8px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.16,1,.3,1); }.reveal.is-visible { opacity: 1; transform: none; }.no-js .reveal, .reduced-motion .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 980px) {
  .guide-nav { grid-template-columns: 1fr auto; }.guide-nav nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 130px; }.hero-system { justify-self: center; width: min(540px,90vw); margin-top: 20px; }.scroll-cue { display: none; }
  .thesis { grid-template-columns: 130px 1fr; }.source-note { grid-column: 2; }
  .section-heading { grid-template-columns: 1fr 300px; }
  .layer-panel { grid-template-columns: 55px 1fr; }.layer-visual { grid-column: 2; min-height: 280px; }
  .flywheel { gap: 55px; }.trust-grid { gap: 55px; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 32px, 1180px); }
  .guide-nav { min-height: 66px; padding: 10px 16px; }.guide-brand img { width: 124px; }.nav-action { padding: 9px 11px; font-size: 9px; }
  .hero { min-height: auto; padding: 120px 20px 70px; }.hero h1 { font-size: clamp(3rem,15vw,5rem); }.hero-meta span:not(:first-child)::before { display: none; }.hero-system { transform: scale(.92); margin-block: 0 -20px; }.system-node { min-width: 90px; padding: 11px; font-size: 10px; }.system-core { width: 124px; height: 124px; }
  .thesis, .section-heading, .deep-grid, .flywheel, .trust-grid, .how-to-head, .closing-grid { grid-template-columns: 1fr; }
  .thesis { gap: 30px; padding-block: 85px; }.source-note { grid-column: auto; }.section-heading { gap: 25px; margin-bottom: 40px; }.section-heading > p { max-width: 520px; }
  .architecture, .field-guide, .resolver-section, .jit-section, .scorecard, .deep-dive, .trust-section { padding-block: 90px; }
  .architecture-canvas { grid-template-columns: 1fr; }.architecture-copy { border-right: 0; border-bottom: 1px solid var(--guide-line); }.architecture-diagram { padding: 32px 20px; }
  .layer-explorer { grid-template-columns: 1fr; }.layer-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--guide-line); }.layer-tabs button { flex: 0 0 auto; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }.layer-tabs button[aria-selected="true"] { border-left-color: transparent; border-bottom-color: var(--guide-lime); }.layer-panel { grid-template-columns: 1fr; min-height: auto; }.layer-number { font-size: 1.5rem; }.layer-visual { grid-column: auto; }
  .resolver-grid { grid-template-columns: 1fr; }.resolver-flow { min-height: 500px; padding: 25px; }.resolver-rules { border-left: 0; border-top: 1px solid var(--guide-line); }
  .flywheel-section { padding-block: 90px; }.flywheel { gap: 60px; }.flywheel-ring { max-width: 520px; width: 100%; margin-inline: auto; }.flywheel-copy { order: -1; }
  .activity-window { max-width: 600px; }
  .how-to { padding-block: 90px; }.check-progress { max-width: 320px; }.build-steps { margin-top: 50px; }.build-step { grid-template-columns: 38px 1fr; gap: 14px; }.step-num { display: none; }.step-body ul { grid-template-columns: 1fr; gap: 5px; }.prompt-box { margin-left: -52px; }.autonomy-scale { flex-wrap: wrap; }.autonomy-scale i { min-width: 20px; }
  .score-grid { grid-template-columns: repeat(2,1fr); }.score-grid > div, .score-grid > div:nth-child(3n) { border-right: 1px solid var(--guide-line); border-bottom: 1px solid var(--guide-line); }.score-grid > div:nth-child(2n) { border-right: 0; }.score-grid > div:nth-last-child(-n+2) { border-bottom: 0; }
  .closing { padding-block: 95px 75px; }.closing-grid { gap: 15px; }.closing-cta { align-items: flex-start; flex-direction: column; margin-top: 60px; }
  .guide-footer { grid-template-columns: 1fr; }.guide-footer .guide-brand { grid-row: auto; }.guide-footer > span { grid-column: auto; }
}

@media (max-width: 480px) {
  .hero-system { width: 108vw; margin-left: -8vw; }.hero-actions .guide-button { width: 100%; }.system-node--skills { left: 3%; }.system-node--logs { right: 3%; }
  .layer-panel { padding: 28px 20px; }.layer-details { grid-template-columns: 1fr; }.layer-visual { min-height: 250px; }
  .flywheel-node { min-width: 100px; padding: 10px; }.flywheel-node--2 { right: -8px; }.flywheel-node--4 { left: -8px; }.flywheel-center { width: 110px; height: 110px; }.flywheel-center b { font-size: 12px; }
  .scenario-cards { grid-template-columns: 1fr; }.runway-chart { height: 190px; }.jit-top { gap: 15px; }
  .score-grid { grid-template-columns: 1fr; }.score-grid > div, .score-grid > div:nth-child(2n), .score-grid > div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--guide-line); }.score-grid > div:last-child { border-bottom: 0; }
  .guide-footer div { flex-wrap: wrap; }
}