@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { color-scheme: light; --ink: #172334; --muted: #50677a; --paper: #7ef3ff; --line: #b7d8e8; --navy: #1b3147; --blue: #d9eaf1; --accent: #fb4f14; --accent-soft: #ffd0c2; --green: #568a73; --surface: #fff; --lede: #fff; --shadow: rgba(34, 89, 120, .2); }
html.dark { color-scheme: dark; --ink: #edf3f5; --muted: #94a4b4; --paper: #080d15; --line: #243142; --navy: #b9d7e4; --blue: #142a3b; --accent: #ff7040; --accent-soft: #8f3d28; --green: #79bc9c; --surface: #101925; --lede: #edf3f5; --shadow: #05080d; }
* { box-sizing: border-box; }
html, body { background: var(--paper); transition: background-color .25s ease, color .25s ease; }
html { background: var(--paper); }
html:not(.dark), html:not(.dark) body { background: linear-gradient(90deg, #054be6 0%, #004eff 14.286%, #005fdf 28.571%, #017be1 42.857%, #139eff 57.143%, #2ec2e3 71.429%, #52e0dd 85.714%, #7ef3ff 100%); background-attachment: fixed; }
body { margin: 0; min-width: 320px; color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; }
a { color: inherit; text-decoration: none; }
.shell { width: min(1240px, calc(100% - 64px)); min-height: 100vh; margin: 0 auto; }
.topbar { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.topbar-tools { display: flex; align-items: center; gap: 22px; }
.theme-toggle { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: var(--ink); border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--accent); background: var(--surface); transform: rotate(-8deg); outline: none; }
.theme-icon { width: 21px; height: 21px; }
.icon-lightbulb-off { display: none; }
html.dark .icon-lightbulb { display: none; }
html.dark .icon-lightbulb-off { display: block; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--paper); background: var(--navy); }.brand-mark svg { width: 21px; height: 21px; }
.edition, .eyebrow, .card-index, .status-pill { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.view { padding: 72px 0 28px; }
.home-view { position: relative; isolation: isolate; }
.home-view::before { position: absolute; z-index: 0; content: ''; inset: -72px -18vw 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(255, 255, 255, .7) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .7) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .72) 42%, transparent 78%); }
.home-view > * { position: relative; z-index: 1; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 760px) minmax(150px, 1fr); align-items: center; gap: 48px; }
.hero-agentic-bot { justify-self: end; width: clamp(120px, 16vw, 220px); height: auto; color: #fff; }
.hero-agentic-bot { transform-box: fill-box; transform-origin: center bottom; animation: hero-bot-dance 2.4s ease-in-out infinite; }
.hero-agentic-bot .left-leg { transform-box: fill-box; transform-origin: top center; animation: hero-left-leg-dance 4s ease-in-out infinite; }
.hero-agentic-bot .right-leg { transform-box: fill-box; transform-origin: top center; animation: hero-right-leg-dance 4s ease-in-out infinite; }
.eyebrow { margin: 0 0 22px; color: var(--accent); font-weight: 500; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 22px; font-size: clamp(48px, 7vw, 96px); line-height: .96; letter-spacing: -.065em; font-weight: 600; }
h1 em { color: var(--accent); font-family: 'Space Grotesk', 'DM Sans', sans-serif; font-style: normal; font-weight: 700; letter-spacing: -.075em; }
.lede { max-width: 580px; margin-bottom: 0; color: var(--lede); text-shadow: 0 2px 3px rgba(3, 24, 68, .42), 0 5px 16px rgba(3, 24, 68, .24); font-size: 18px; line-height: 1.65; }
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 78px; }
.mode-card { position: relative; min-height: 270px; display: flex; flex-direction: column; padding: 25px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 18px; background: var(--surface); box-shadow: 0 12px 28px var(--shadow); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .25s ease; }
.mode-card.agentic::after { position: absolute; top: 25px; right: -42px; content: 'COMING SOON'; width: 170px; padding: 7px 0; transform: rotate(35deg); color: #fff; background: var(--accent); box-shadow: 0 4px 12px rgba(23, 35, 52, .25); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; text-align: center; }
.mode-card.agentic { overflow: hidden; }
.mode-card:hover, .mode-card:focus-visible { transform: translateY(-5px); border-color: var(--ink); box-shadow: 0 18px 34px var(--shadow); outline: none; }
.card-index { margin-bottom: 34px; }.mode-icon { display: grid; place-items: center; width: 100%; height: 58px; margin-bottom: 24px; background: transparent; color: var(--navy); }.mode-icon svg { width: 48px; height: 48px; }.agile .mode-icon { color: var(--green); }.agile-rotate .rotating-arrow { transform-box: view-box; transform-origin: 12px 12px; }.mode-card.agile:hover .agile-rotate .rotating-arrow, .mode-card.agile:focus-visible .agile-rotate .rotating-arrow { animation: rotate-ccw 1.5s linear infinite; }.agentic .mode-icon { color: var(--accent); }.agentic .mode-icon.agentic-bot { width: 64px; height: 48px; }.traditional-flow .first-box, .traditional-flow .flow-segment, .traditional-flow .second-box { animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-play-state: paused; }.traditional-flow .flow-segment { transform-box: view-box; animation-timing-function: linear; }.traditional-flow .flow-vertical { transform-origin: 7px 11px; transform: scaleY(0); }.traditional-flow .flow-horizontal { transform-origin: 7px 17px; transform: scaleX(0); }.mode-card.traditional:hover .traditional-flow .first-box, .mode-card.traditional:focus-visible .traditional-flow .first-box { animation-name: first-box-flow; animation-play-state: running; }.mode-card.traditional:hover .traditional-flow .flow-segment, .mode-card.traditional:focus-visible .traditional-flow .flow-segment { animation-play-state: running; }.mode-card.traditional:hover .traditional-flow .flow-vertical, .mode-card.traditional:focus-visible .traditional-flow .flow-vertical { animation-name: draw-flow-vertical; }.mode-card.traditional:hover .traditional-flow .flow-horizontal, .mode-card.traditional:focus-visible .traditional-flow .flow-horizontal { animation-name: draw-flow-horizontal; }.mode-card.traditional:hover .traditional-flow .second-box, .mode-card.traditional:focus-visible .traditional-flow .second-box { animation-name: second-box-flow; animation-play-state: running; }.agentic-bot .bot, .agentic-bot .left-leg, .agentic-bot .right-leg { transform-box: view-box; animation-play-state: paused; }.agentic-bot .left-leg { transform-origin: 8px 20px; }.agentic-bot .right-leg { transform-origin: 16px 20px; }.mode-card.agentic:hover .agentic-bot .bot, .mode-card.agentic:focus-visible .agentic-bot .bot { animation: bot-hop-dance 3.2s ease-in-out infinite; }.mode-card.agentic:hover .agentic-bot .left-leg, .mode-card.agentic:focus-visible .agentic-bot .left-leg { animation: lift-left-leg 3.2s ease-in-out infinite; }.mode-card.agentic:hover .agentic-bot .right-leg, .mode-card.agentic:focus-visible .agentic-bot .right-leg { animation: lift-right-leg 3.2s ease-in-out infinite; }
@keyframes rotate-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes first-box-flow { 0%, 8%, 16% { opacity: .2; } 4%, 12%, 20%, 100% { opacity: 1; } }
@keyframes draw-flow-vertical { 0%, 22% { opacity: 0; transform: scaleY(0); } 28% { opacity: 1; transform: scaleY(0); } 43%, 100% { opacity: 1; transform: scaleY(1); } }
@keyframes draw-flow-horizontal { 0%, 38% { opacity: 0; transform: scaleX(0); } 43% { opacity: 1; transform: scaleX(0); } 58%, 100% { opacity: 1; transform: scaleX(1); } }
@keyframes second-box-flow { 0%, 55% { opacity: 0; } 62% { opacity: .25; } 68% { opacity: 1; } 74% { opacity: .25; } 80%, 100% { opacity: 1; } }
@keyframes bot-hop-dance { 0% { transform-origin: 16px 22px; transform: translateY(0) rotate(0deg); } 6% { transform-origin: 16px 22px; transform: translateY(0) rotate(7deg); } 13% { transform-origin: 16px 22px; transform: translateY(-2px) rotate(7deg); } 20% { transform-origin: 16px 22px; transform: translateY(0) rotate(7deg); } 27% { transform-origin: 16px 22px; transform: translateY(-2px) rotate(7deg); } 34% { transform-origin: 16px 22px; transform: translateY(0) rotate(7deg); } 44% { transform-origin: 16px 22px; transform: translateY(0) rotate(0deg); } 50% { transform-origin: 8px 22px; transform: translateY(0) rotate(0deg); } 56% { transform-origin: 8px 22px; transform: translateY(0) rotate(-7deg); } 63% { transform-origin: 8px 22px; transform: translateY(-2px) rotate(-7deg); } 70% { transform-origin: 8px 22px; transform: translateY(0) rotate(-7deg); } 77% { transform-origin: 8px 22px; transform: translateY(-2px) rotate(-7deg); } 84% { transform-origin: 8px 22px; transform: translateY(0) rotate(-7deg); } 94%, 100% { transform-origin: 8px 22px; transform: translateY(0) rotate(0deg); } }
@keyframes hero-bot-dance { 0%, 8%, 48%, 100% { transform: translateY(0) rotate(0deg); } 16%, 32% { transform: translateY(-6px) rotate(8deg); } 24%, 40% { transform: translateY(0) rotate(8deg); } 58%, 74% { transform: translateY(-6px) rotate(-8deg); } 66%, 82% { transform: translateY(0) rotate(-8deg); } }
@keyframes hero-left-leg-dance { 0%, 48% { transform: rotate(0deg); } 58%, 82% { transform: rotate(-24deg); } 90%, 100% { transform: rotate(0deg); } }
@keyframes hero-right-leg-dance { 0%, 8% { transform: rotate(0deg); } 16%, 40% { transform: rotate(24deg); } 48%, 100% { transform: rotate(0deg); } }
@keyframes lift-left-leg { 0% { transform: rotate(0deg); } 6%, 38% { transform: rotate(-28deg); } 44%, 100% { transform: rotate(0deg); } }
@keyframes lift-right-leg { 0%, 50% { transform: rotate(0deg); } 56%, 88% { transform: rotate(28deg); } 94%, 100% { transform: rotate(0deg); } }
.mode-title { margin-bottom: 10px; font-size: 24px; font-weight: 700; letter-spacing: -.04em; }.mode-description { max-width: 275px; color: var(--muted); line-height: 1.5; }.card-action { display: flex; justify-content: space-between; margin-top: auto; padding-top: 26px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }.card-action span { color: var(--accent); font-size: 16px; }
.home-footer { display: flex; justify-content: space-between; margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.dashboard-view { padding-top: 58px; }.back-link { display: inline-block; margin-bottom: 68px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 12px; }.back-link:hover { color: var(--ink); }.dashboard-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 40px; }.dashboard-heading h1 { margin-bottom: 0; font-size: clamp(44px, 6vw, 78px); }.status-pill { padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); }.placeholder-panel { position: relative; min-height: 450px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 12px 28px var(--shadow); }.placeholder-grid { position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 50px 50px; mask-image: linear-gradient(to bottom, #000, transparent 80%); }.placeholder-content { position: relative; max-width: 460px; padding: 48px 24px; text-align: center; }.mode-icon.large { width: 64px; height: 64px; margin: 0 auto 25px; color: var(--accent); }.mode-icon.large svg { width: 56px; height: 56px; }.placeholder-content h2 { margin-bottom: 12px; font-size: 30px; letter-spacing: -.04em; }.placeholder-content p { margin-bottom: 28px; color: var(--muted); line-height: 1.6; }.button { display: inline-flex; padding: 12px 18px; font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }.button.secondary { border: 1px solid var(--ink); }.button.secondary:hover { color: var(--paper); background: var(--ink); }
.book-view { padding-top: 54px; }.book-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 38px; }.book-heading h1 { max-width: 760px; margin-bottom: 0; font-size: clamp(42px, 6vw, 78px); }.book-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 42px; align-items: start; }.book-nav { position: sticky; top: 24px; padding: 22px 0; border-top: 1px solid var(--line); }.book-nav-label, .book-kicker { margin: 0 0 16px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }.book-chapter { display: block; padding: 9px 12px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; line-height: 1.3; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }.book-chapter:hover, .book-chapter.active { border-left-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }.book-content { min-height: 560px; padding: clamp(28px, 5vw, 72px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 12px 28px var(--shadow); }.book-content h2 { margin-bottom: 28px; font-size: clamp(36px, 5vw, 64px); letter-spacing: -.055em; }.book-content > div { max-width: 720px; color: var(--muted); font-size: 18px; line-height: 1.75; }.book-note { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-family: 'DM Mono', monospace; font-size: 12px; line-height: 1.7; }
.book-lock { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(8, 13, 21, .58); backdrop-filter: blur(8px); }.book-lock-card { width: min(100%, 440px); padding: 42px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); text-align: center; }.book-lock-card h1 { margin-bottom: 14px; font-size: clamp(38px, 5vw, 58px); }.book-lock-card > p:not(.eyebrow):not(.book-pin-error) { color: var(--muted); line-height: 1.6; }.book-pin-form { display: flex; gap: 10px; }.book-lock-card form { display: flex; gap: 10px; margin-top: 26px; }.book-lock-card input { min-width: 0; width: 150px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: transparent; font: 18px 'DM Mono', monospace; letter-spacing: .18em; text-align: center; }.book-lock-card input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); }.book-pin-error { margin: 14px 0 0; color: #b33d58; font: 12px 'DM Mono', monospace; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 800px) { .shell { width: min(100% - 36px, 620px); }.topbar { height: 78px; }.edition { display: none; }.view { padding-top: 52px; }.intro-grid { grid-template-columns: 1fr; gap: 32px; }.hero-agentic-bot { justify-self: start; width: 120px; }.mode-grid { grid-template-columns: 1fr; margin-top: 52px; }.mode-card { min-height: 230px; }.dashboard-heading, .book-heading { display: block; }.status-pill { display: inline-block; margin-top: 20px; }.back-link { margin-bottom: 46px; }.book-layout { grid-template-columns: 1fr; gap: 24px; }.book-nav { position: static; padding-bottom: 0; }.book-chapter { display: inline-block; margin: 0 4px 6px 0; border: 1px solid var(--line); border-radius: 999px; }.book-chapter:hover, .book-chapter.active { border-color: var(--accent); }.book-content { padding: 28px 22px; }.book-lock-card { padding: 30px 20px; }.book-lock-card form { flex-direction: column; align-items: stretch; }.book-lock-card input { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .mode-card { transition: none; }.traditional-flow .first-box, .traditional-flow .flow-segment, .traditional-flow .second-box, .agile-rotate .rotating-arrow, .agentic-bot .bot, .agentic-bot .left-leg, .agentic-bot .right-leg { animation: none !important; opacity: 1; transform: none; } }