:root{--paper:#fff;--soft:#f5f8fa;--ink:#0d1b2a;--muted:#526579;--rule:#dce5eb;--brand:#0087ad;--cyan:#42dfff;--pale:#e7f7fb;--amber:#ffb648;--night:#071b2b;--grid:#173447;--night-muted:#aec3d2;--geometry:#718899;--radius:8px;--header:76px;--ease:cubic-bezier(.2,.8,.2,1);--transition:200ms;--wave-duration:1.8s;font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-padding-top:calc(var(--header) + 24px)}body{margin:0;line-height:1.75}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}svg{display:block}figure,p,h1,h2,h3{margin:0}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px}a:hover{color:var(--brand)}button:disabled{cursor:default}[hidden]{display:none!important}.svg-definitions{position:absolute;width:0;height:0;overflow:hidden}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;top:-80px;left:16px;z-index:100;background:var(--paper);padding:12px 20px;border:2px solid var(--brand)}.skip-link:focus{top:8px}
.site-header{position:sticky;top:0;z-index:20;min-height:var(--header);display:flex;align-items:center;gap:32px;padding:12px 32px;background:var(--paper);border-bottom:1px solid var(--rule)}.wordmark{display:flex;gap:12px;align-items:center;font-size:24px;font-weight:750;letter-spacing:-.6px;white-space:nowrap}.wordmark svg{color:var(--brand)}.top-nav{display:flex;gap:28px;margin-left:24px;font-size:14px;font-weight:650}.top-nav a,.github-link{padding:8px 0;white-space:nowrap}.header-search{margin-left:auto;display:flex;gap:12px;align-items:center;padding:8px 12px;border:1px solid var(--rule);border-radius:4px;font-size:13px;color:var(--muted)}.header-search svg,.search-field svg{stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}kbd{font-family:inherit;margin-left:16px;color:var(--muted)}.github-link{font-size:14px;font-weight:650}
.page-shell{max-width:1600px;margin:auto;display:grid;grid-template-columns:152px minmax(0,1fr)}.knowledge-rail{border-right:1px solid var(--rule);padding:40px 20px;position:sticky;top:var(--header);align-self:start;height:calc(100dvh - var(--header));font-size:13px}.knowledge-rail>p{font-size:14px;font-weight:700;margin-bottom:32px}.knowledge-rail nav{position:relative;display:grid;gap:24px}.knowledge-rail nav:before{content:"";position:absolute;width:1px;top:20px;bottom:20px;left:7px;background:var(--rule)}.knowledge-rail nav a{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;color:var(--muted)}.knowledge-rail nav a:before{content:"";width:8px;height:8px;flex-shrink:0;border:2px solid var(--night-muted);border-radius:50%;background:var(--paper);margin-left:2px}.knowledge-rail nav a:first-child{color:var(--brand);font-weight:700}.knowledge-rail nav a:first-child:before{border-color:var(--brand);background:var(--pale)}.rail-note{position:absolute;bottom:40px;font:10px/1.7 ui-monospace,monospace;letter-spacing:1px;color:var(--muted)}main{min-width:0;padding:0 40px}.hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:32px;align-items:center;min-height:600px;padding:48px 0 56px;border-bottom:1px solid var(--rule)}.eyebrow{font-size:12px;letter-spacing:1.5px;font-weight:600;color:var(--muted);margin-bottom:24px}.hero h1{font-size:clamp(36px,3.6vw,56px);line-height:1.28;letter-spacing:-2.5px;font-weight:800;word-break:keep-all}.hero-description{font-size:18px;color:var(--muted);margin-top:24px;line-height:1.8;word-break:keep-all}.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}.button{display:inline-flex;justify-content:center;align-items:center;gap:24px;min-height:52px;padding:12px 20px;border-radius:4px;font-size:14px;font-weight:650;transition:background var(--transition) var(--ease),color var(--transition) var(--ease)}.primary{background:var(--brand);border:1px solid var(--brand);color:var(--paper)}.primary:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}.secondary{background:var(--paper);border:1px solid var(--rule)}.secondary:hover{background:var(--soft)}.scroll-cue{display:flex;align-items:center;gap:12px;margin-top:40px;color:var(--muted);font-size:12px}.mouse-mark{display:block;width:16px;height:28px;border:1px solid var(--muted);border-radius:12px;position:relative}.mouse-mark:before{content:"";position:absolute;top:5px;left:7px;width:1px;height:7px;background:var(--muted)}
.hero-figure,.story-figure{min-width:0;background:var(--night);color:var(--paper);border-radius:var(--radius);overflow:hidden}.scene-topline{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px 0;color:var(--night-muted);font:11px/1.5 ui-monospace,monospace;letter-spacing:.6px}.hero-diagram{width:100%;aspect-ratio:660/460}.hero-figure figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px 20px;font-size:11px;color:var(--night-muted)}.hero-figure figcaption>span{display:flex;gap:8px;align-items:center}.hero-figure figcaption i{width:6px;height:6px;background:var(--cyan);border-radius:50%}.hero-figure a:hover,.story-figure a:hover{color:var(--cyan)}.hero-figure figcaption>a{font:9px ui-monospace,monospace;white-space:nowrap}.field-glow{fill:none;stroke:var(--cyan);stroke-width:42px;opacity:.15;filter:blur(8px)}.wavefront{fill:none;stroke:var(--cyan);stroke-width:46px;stroke-dasharray:2 24;opacity:.9;animation:wave var(--wave-duration) linear infinite}.forward-wave{animation-direction:reverse}.adjoint-wave{stroke:var(--amber)}.amber-glow{stroke:var(--amber)}@keyframes wave{to{stroke-dashoffset:52}}.source-line{stroke:var(--cyan);stroke-width:6px}.output-line{stroke:var(--cyan);stroke-width:6px}.inactive-source{stroke:var(--geometry);stroke-width:6px}.adjoint-source{stroke:var(--amber);stroke-width:6px}.design-outline{fill:none;stroke:var(--night-muted);stroke-width:1.5px;stroke-dasharray:5 5}.diagram-label{fill:var(--night-muted);font-size:14px}.diagram-label text:nth-last-child(-n+2){font-weight:500}.hero-diagram .diagram-label text:nth-last-child(-n+2),.propagation .diagram-label text:nth-last-child(-n+2){font-size:28px;fill:var(--paper)}
.light-story{padding:72px 0 48px;border-bottom:1px solid var(--rule)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px}.section-heading .eyebrow{margin-bottom:12px}h2{font-size:clamp(28px,2.5vw,36px);font-weight:750;letter-spacing:-1.2px;line-height:1.35;word-break:keep-all}.text-link{font-size:13px;font-weight:650;color:var(--brand);text-decoration:underline;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center;gap:12px}.story-layout{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:40px;position:relative}.story-step{min-height:76dvh;display:flex;flex-direction:column;justify-content:center;align-items:start;padding:64px 0;scroll-margin-top:calc(var(--header) + 32px)}.step-number{font:12px/1.5 ui-monospace,monospace;letter-spacing:1px;color:var(--brand);margin-bottom:24px}.step-number.adjoint-ink{color:#966000}.story-step h3{font-size:clamp(32px,3vw,44px);line-height:1.35;letter-spacing:-1.8px;margin-bottom:24px;font-weight:750;word-break:keep-all}.story-step p{font-size:16px;color:var(--muted);word-break:keep-all}.story-step .step-detail{margin-top:24px;font-size:13px}.step-next{font-size:12px;color:var(--muted);display:flex;gap:12px;align-items:center;margin-top:32px;min-height:44px}.story-step .text-link{margin-top:24px}.story-figure{position:sticky;top:calc(var(--header) + 24px);align-self:start;margin-top:24px}.story-diagram{width:100%;aspect-ratio:660/460}.scene-topline button{background:transparent;color:var(--night-muted);border:1px solid var(--grid);border-radius:4px;font:11px/1.5 inherit;min-height:44px;padding:8px 12px;letter-spacing:0}.scene-topline button:hover{background:var(--grid)}.scene-explanation{padding:0 24px 20px;min-height:72px}.scene-explanation strong{display:block;font-size:14px;font-weight:600}.scene-explanation>span{font-size:11px;color:var(--night-muted)}.stage-nav{display:flex;gap:4px;margin:0 24px;border-top:1px solid var(--grid);padding-top:12px}.stage-nav a{display:flex;align-items:center;gap:8px;flex:1;min-height:44px;justify-content:center;font-size:12px;color:var(--night-muted);border-radius:4px}.stage-nav a[aria-current]{color:var(--cyan);background:var(--grid)}.stage-nav a span{font:10px ui-monospace,monospace}.data-credit{font-size:10px;line-height:1.7;color:var(--night-muted);margin:12px 24px 20px}.data-credit a{text-decoration:underline;text-underline-offset:3px}.adjoint-layer,.update-layer{display:none}.story-figure[data-stage="2"] .forward-layer,.story-figure[data-stage="3"] .forward-layer,.story-figure[data-stage="3"] .design-label{display:none}.story-figure[data-stage="2"] .adjoint-layer,.story-figure[data-stage="3"] .update-layer{display:block}.story-figure[data-stage="3"] .design-outline{stroke:var(--paper)}.gradient-card{fill:var(--night);stroke:var(--grid)}.strong-label{display:none}.gradient-title{fill:var(--paper);font-size:17px;font-weight:650}.scale-label{fill:var(--night-muted);font:12px ui-monospace,monospace}.optimizer-arrow{fill:none;stroke:var(--cyan);stroke-width:2px}.optimizer-label{fill:var(--night-muted);font-size:12px}.story-footnote{font-size:12px;color:var(--muted);max-width:75ch;margin-top:24px}.animated-scene.is-offscreen .wavefront,.motion-paused .wavefront{animation-play-state:paused}.motion-reduced .wavefront{animation:none}
.examples-section{padding:64px 0;border-bottom:1px solid var(--rule)}.reading-order{font-size:12px;color:var(--muted);white-space:nowrap}.reading-order span{padding:0 8px}.catalog-controls{display:flex;align-items:center;justify-content:space-between;gap:24px}.filters{display:flex;gap:8px;flex-wrap:wrap}.filters button{min-height:44px;min-width:64px;padding:8px 16px;border:0;border-radius:4px;background:var(--soft);color:var(--muted);font-size:13px}.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}.filters button:hover{background:var(--rule);color:var(--ink)}.filters button[aria-pressed="true"]:hover{background:var(--ink);color:var(--paper)}.search-field{display:flex;align-items:center;gap:8px;border:1px solid var(--rule);border-radius:4px;padding:0 12px;color:var(--muted)}.search-field input{width:200px;max-width:100%;min-height:44px;border:0;background:transparent;color:var(--ink);font-size:13px;padding:8px 0}.search-field:focus-within{outline:3px solid var(--brand);outline-offset:3px}.search-field input:focus-visible{outline:none}.result-count{color:var(--muted);font-size:12px;margin:16px 0}.example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.example-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;transition:background var(--transition) var(--ease)}.example-card:hover{background:var(--soft);color:var(--ink)}.example-card>svg{width:100%;aspect-ratio:400/180}.example-card>div{display:flex;flex-direction:column;flex:1;padding:20px}.card-kicker{font-size:11px;color:var(--brand);margin-bottom:8px}.example-card h3{font-size:19px;line-height:1.5;letter-spacing:-.6px;font-weight:700;word-break:keep-all}.example-card p{color:var(--muted);font-size:13px;line-height:1.8;margin-top:8px;word-break:keep-all}.card-footer{margin-top:auto;padding-top:24px;font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:8px}.card-footer span{font-size:16px;color:var(--ink)}.empty-state{padding:64px 24px;text-align:center;background:var(--soft);border-radius:var(--radius)}.empty-state p{margin:12px 0 24px;color:var(--muted);font-size:14px}.all-posts{margin-top:32px;color:var(--muted);font-size:13px}.all-posts summary{cursor:pointer;min-height:44px;padding:8px 0}.all-posts li{margin-bottom:12px}.all-posts a{text-decoration:underline;text-underline-offset:3px}
.concept-section{padding:64px 0;border-bottom:1px solid var(--rule)}.section-heading>p{font-size:13px;color:var(--muted)}.concept-list{border-top:1px solid var(--rule)}.concept-list details{border-bottom:1px solid var(--rule)}.concept-list summary{cursor:pointer;min-height:64px;padding:20px 8px;font-size:14px;list-style-position:inside}.concept-list summary span{display:inline-block;min-width:176px;font-weight:650;font-size:14px;margin:0 16px 0 8px}.concept-list details p{padding:0 32px 24px;max-width:80ch;font-size:14px;color:var(--muted)}.concept-list a{display:inline-block;text-decoration:underline;color:var(--brand);text-underline-offset:3px}.learning-section{padding:64px 0 72px}.learning-section>p:not(.eyebrow){font-size:14px;color:var(--muted);margin-top:16px}.learning-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:40px 0 24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}.learning-path li{min-width:0}.learning-path a{display:flex;flex-direction:column;padding:24px 16px 24px 0;min-height:136px}.learning-path a>span{font:12px ui-monospace,monospace;color:var(--brand);margin-bottom:12px}.learning-path strong{font-size:14px;font-weight:650;word-break:keep-all}.learning-path small{font-size:12px;color:var(--muted);margin-top:8px}.site-footer{border-top:1px solid var(--rule);padding:32px 0;display:flex;align-items:center;justify-content:space-between;gap:24px}.footer-brand{font-weight:700;font-size:16px}.site-footer p{font-size:12px;color:var(--muted);margin-top:8px}.site-footer nav{display:flex;gap:20px;font-size:12px;color:var(--muted)}
@media(min-width:1600px){.hero h1{font-size:56px}.hero{min-height:680px}.hero-figure{max-width:680px}.story-figure{max-width:720px}}
@media(max-width:1240px){.site-header{gap:20px;padding:12px 24px}.top-nav{margin-left:8px;gap:20px}.header-search span{display:none}.header-search{padding:12px}.header-search kbd{margin-left:0}.wordmark{font-size:20px}.page-shell{grid-template-columns:128px minmax(0,1fr)}main{padding:0 28px}.knowledge-rail{padding:32px 16px}.hero{gap:24px;min-height:540px}.hero h1{font-size:40px;letter-spacing:-2px}.hero-description{font-size:16px}.button{gap:16px;padding:12px 16px}.story-layout{gap:24px;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}.story-step h3{font-size:36px}.story-step p{font-size:14px}.story-step .step-detail{font-size:12px}.reading-order{display:none}.example-grid{gap:16px}.example-card>div{padding:16px}.example-card h3{font-size:17px}.concept-list summary span{min-width:150px}.hero-figure figcaption>a{display:none}}
@media(max-width:960px){.page-shell{grid-template-columns:1fr}.knowledge-rail{display:none}.top-nav{gap:16px}.github-link{display:none}.hero h1{font-size:40px}.hero{min-height:520px}.hero-actions{gap:8px}.hero-description{font-size:16px}.story-step{min-height:72dvh}.catalog-controls{align-items:start}.search-field input{width:160px}.example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{align-items:start}.story-heading{display:block}.story-heading .text-link{margin-top:16px}.learning-path{grid-template-columns:repeat(2,minmax(0,1fr))}.learning-path li:nth-child(-n+2){border-bottom:1px solid var(--rule)}.scene-topline{padding:16px 16px 0}.scene-explanation{padding:0 16px 16px}.stage-nav{margin:0 16px}.data-credit{margin:12px 16px 16px}.hero-figure figcaption{padding:0 16px 16px}}
@media(max-width:680px){:root{--header:64px}.site-header{padding:10px 16px;gap:12px;min-height:var(--header)}.wordmark{font-size:18px;gap:8px;letter-spacing:-.5px}.wordmark svg{width:32px;height:24px}.top-nav{margin-left:auto;font-size:12px;gap:12px}.top-nav a:nth-child(n+2){display:none}.header-search{margin-left:0;padding:10px;border:0}.header-search kbd{display:none}main{padding:0 20px}.hero{display:flex;flex-direction:column;align-items:stretch;padding:40px 0 32px;gap:32px;min-height:0}.hero h1{font-size:clamp(32px,8.7vw,48px);letter-spacing:-1.8px;line-height:1.35}.eyebrow{font-size:11px;margin-bottom:16px}.hero-description{font-size:16px;margin-top:20px}.desktop-break{display:none}.hero-actions{margin-top:24px;gap:12px}.button{min-height:48px;padding:12px 16px;font-size:13px}.scroll-cue{margin-top:24px;font-size:11px}.hero-figure .scene-topline{font-size:9px}.hero-figure figcaption{font-size:10px}.hero-diagram{max-height:280px}.light-story{padding-top:48px;padding-bottom:32px}.section-heading{margin-bottom:24px}h2{font-size:28px;letter-spacing:-1px}.story-layout{display:flex;flex-direction:column;gap:0}.story-figure{order:-1;top:calc(var(--header) + 8px);z-index:5;margin-top:0;width:100%}.story-diagram{max-height:245px}.scene-topline{padding-top:8px;font-size:10px;min-height:44px}.scene-topline button{font-size:10px;min-height:36px;padding:6px 8px}.scene-explanation{padding-bottom:8px;min-height:52px}.scene-explanation strong{font-size:12px}.scene-explanation>span{font-size:10px}.stage-nav{padding-top:4px}.stage-nav a{min-height:36px;font-size:11px}.data-credit{font-size:9px;margin-top:4px;margin-bottom:8px}.story-step{min-height:65dvh;padding:48px 8px 40px;scroll-margin-top:calc(var(--header) + 400px)}.step-number{font-size:11px;margin-bottom:16px}.story-step h3{font-size:32px;line-height:1.3;margin-bottom:16px}.story-step h3 br{display:none}.story-step p{font-size:14px}.story-step .step-detail{margin-top:16px;font-size:12px}.story-step p br{display:none}.step-next{margin-top:20px}.story-footnote{font-size:11px;margin-top:0}.examples-section,.concept-section{padding:48px 0}.catalog-controls{flex-direction:column;gap:16px}.filters{gap:6px;width:100%}.filters button{min-width:0;flex:1;padding:8px 12px;font-size:12px}.search-field{width:100%}.search-field input{width:100%}.example-grid{grid-template-columns:minmax(0,1fr);gap:20px}.example-card>svg{max-height:180px}.example-card>div{padding:20px}.example-card h3{font-size:20px}.example-card p{font-size:14px}.card-kicker{font-size:12px}.card-footer{font-size:12px;padding-top:20px}.section-heading>p{display:none}.concept-list summary{font-size:13px;padding:16px 0}.concept-list summary span{display:block;margin:0 0 4px 20px;min-width:0;font-size:14px}.concept-list details p{padding:0 8px 24px;font-size:13px}.learning-section{padding:48px 0}.learning-path{margin-top:24px}.learning-path a{padding:24px 12px 24px 0}.learning-path strong{font-size:13px}.learning-path small{font-size:11px}.site-footer{align-items:start;flex-direction:column}.site-footer nav{flex-wrap:wrap;gap:20px}.all-posts ol{padding-left:20px}}
@media(max-height:720px) and (min-width:681px){.story-figure{top:calc(var(--header) + 8px)}.story-diagram{max-height:350px}.scene-topline{padding-top:8px}.data-credit{margin-bottom:12px}.scene-explanation{min-height:52px;padding-bottom:8px}.stage-nav{padding-top:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wavefront{animation:none}.button,.example-card{transition:none}}
.mobile-update{display:none}.scene-topline{font-size:12px;font-weight:500}.scene-topline button{font-family:inherit;font-size:12px;font-weight:500;color:var(--paper)}.scale-label{fill:var(--paper)}.story-figure[data-stage="3"] #density-grid{animation:density-reveal 1s var(--ease) both}@keyframes density-reveal{from{opacity:0}to{opacity:1}}.motion-paused #density-grid,.motion-reduced #density-grid{animation:none!important}
@media(max-width:680px){.story-step{justify-content:flex-start;min-height:58dvh;padding:24px 8px 32px;scroll-margin-top:var(--scene-height,400px)}.story-step p{font-size:16px}.story-step .step-detail{font-size:14px}.story-figure[data-stage="3"] .story-diagram{display:none}.story-figure[data-stage="3"] .mobile-update{display:block}.mobile-update{padding:16px}.mobile-data-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.mobile-data-panels svg{width:100%;aspect-ratio:1;max-height:170px}.mobile-data-panels figcaption{font-size:12px;line-height:1.5;margin-top:8px;color:var(--paper);text-align:center}.mobile-scale{display:flex;align-items:center;gap:8px;font:12px ui-monospace,monospace;margin-top:12px}.mobile-scale i{height:8px;flex:1;background:linear-gradient(90deg,#053061,#4393c3,#f7f7f7,#d6604d,#67001f)}.mobile-update p{font-size:12px;line-height:1.6;color:var(--night-muted);margin-top:8px}.mobile-update .mobile-pipeline{font-size:13px;color:var(--paper)}.scene-topline{font-size:11px}.scene-topline button,.stage-nav a{min-height:44px}.scene-topline button{font-size:11px}.scene-explanation strong{font-size:13px}.scene-explanation>span{font-size:11px}.data-credit{font-size:10px}.story-figure[data-stage="3"] .scene-explanation{display:none}}
@media(prefers-reduced-motion:reduce){#density-grid{animation:none!important}}
@media print{.site-header,.knowledge-rail,.hero-figure,.story-figure,.catalog-controls,.scroll-cue{display:none}.page-shell{display:block}main{padding:0}.hero{display:block;min-height:0}.story-layout{display:block}.story-step{min-height:0;padding:24px 0}.example-grid{grid-template-columns:repeat(2,1fr)}.example-card{break-inside:avoid}.light-story,.examples-section,.concept-section,.learning-section{padding:24px 0}}
.learning-section .path-subtitle{margin:56px 0 0;font-size:20px;font-weight:700;line-height:1.3;word-break:keep-all}
.example-card>.example-thumbnail{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:contain;background:var(--soft);border-bottom:1px solid var(--rule)}.catalog-visual-note{max-width:70ch;margin:0 0 24px;color:var(--muted);font-size:14px;line-height:1.8;word-break:keep-all}