:root{color-scheme:light;--ink:#1c1e1d;--muted:#56605b;--dark:#14171a;--dark-2:#1c2324;--line:#dce4df;--green:#2d6a50;--mint:#a3e9c5;--paper:#f8faf8;--pale:#eef5f0;font-family:Inter,"Segoe UI",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
:focus-visible{outline:3px solid #78d5a6;outline-offset:4px}
.skip-link{position:absolute;left:1rem;top:-5rem;z-index:20;padding:.75rem 1rem;background:#fff;color:var(--ink)}
.skip-link:focus{top:1rem}
.wrap{width:min(100% - 3rem,1160px);margin-inline:auto}
.site-header,.hero,.site-footer{background:var(--dark);color:#f1f5f2}
.site-header{border-bottom:1px solid #2a3532}
.header-inner{min-height:80px;display:flex;align-items:center;gap:2.75rem}
.brand{display:inline-flex;flex-shrink:0}
.brand img,.site-footer img{display:block;width:auto;height:30px}
.site-header nav{display:flex;align-items:center;gap:2rem;margin-left:auto}
.site-header nav a,.header-github{font-size:.875rem;font-weight:550;color:#d1dad4}
.site-header nav a:hover,.header-github:hover{color:#fff}
.header-github{padding:.65rem .9rem;border:1px solid #50655a;border-radius:7px;white-space:nowrap}
.header-github span,.button span{margin-left:.5rem}
.hero{position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:5% -12% 0 35%;background:radial-gradient(ellipse at 54% 43%,rgba(52,139,91,.37),transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(114,189,143,.16),transparent 55%);pointer-events:none}
.hero:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(163,233,197,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(163,233,197,.055) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(90deg,transparent 12%,#000 100%);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);align-items:center;gap:5rem;padding-block:7.5rem 8rem}
.eyebrow{margin:0 0 1.35rem;color:var(--green);font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.hero .eyebrow{color:var(--mint)}
h1,h2,h3,p{margin-top:0}
h1{max-width:11ch;margin-bottom:1.6rem;font-size:clamp(3.5rem,6.1vw,6rem);line-height:1.02;letter-spacing:-.065em;font-weight:650}
h1 span{color:var(--mint)}
.hero-lead{max-width:35rem;color:#c6d1ca;font-size:1.13rem;line-height:1.7}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.75rem 1.15rem;border-radius:7px;font-size:.9rem;font-weight:700;line-height:1.2;white-space:nowrap}
.button:hover{text-decoration:none;filter:brightness(1.08)}
.button-primary{background:var(--mint);color:#133b29}
.button-secondary{border:1px solid #5b6c62;color:#fff}
.hero-note{margin:1.25rem 0 0;color:#9baaa0;font-size:.8rem}
.handoff-demo{overflow:hidden;border:1px solid #455b50;border-radius:11px;background:#202a27;box-shadow:0 28px 70px rgba(0,0,0,.22)}
.demo-bar{height:43px;display:flex;align-items:center;gap:1rem;padding:0 1.15rem;border-bottom:1px solid #3c5146;color:#a9bfb0;font:600 .72rem/1.3 ui-monospace,"Cascadia Code",Consolas,monospace}
.demo-dots,.terminal-dots{display:flex;gap:5px}
.demo-dots i,.terminal-dots i{width:7px;height:7px;border-radius:50%;background:#718d7d}
.demo-dots i:first-child,.terminal-dots i:first-child{background:#a3e9c5}
.demo-status{margin-left:auto;color:#a3e9c5}
.demo-replay{display:inline-flex;align-items:center;gap:.25rem;min-height:26px;padding:.25rem .5rem;border:1px solid #52715d;border-radius:4px;background:transparent;color:#d3ead9;font:600 .68rem ui-monospace,"Cascadia Code",Consolas,monospace;cursor:pointer;white-space:nowrap;transition:background-color .2s,border-color .2s}
.demo-replay:hover{background:#314638;border-color:#91bca0}
.demo-replay[hidden]{display:none}
.demo-replay span{font-size:1rem;line-height:.6}
.demo-body{padding:1.65rem 1.75rem 1.9rem}
.demo-session{display:flex;align-items:center;gap:.65rem;color:#a8baaf;font-size:.8rem}
.demo-session strong{margin-left:auto;color:#eef6f0;font-size:.85rem}
.session-node{width:10px;height:10px;border:2px solid var(--mint);border-radius:50%;flex:none}
.demo-record{margin:1rem 0 0 4px;padding:1.25rem 1.35rem;border-left:2px solid #5e9f78;border-radius:0 7px 7px 0;background:#2b3932}
.record-label{margin:0 0 1rem;color:var(--mint);font:600 .72rem ui-monospace,"Cascadia Code",Consolas,monospace}
.demo-record dl{display:grid;gap:.65rem;margin:0}
.demo-record dl div{display:grid;grid-template-columns:6.4rem 1fr;gap:.6rem}
.demo-record dt{color:#9aafa2;font-size:.77rem}
.demo-record dd{margin:0;color:#f1f6f1;font-size:.8rem;line-height:1.45}
.demo-transfer{display:flex;align-items:center;gap:.9rem;margin:.75rem 0 .75rem 8px;color:#91ac99;font:600 .67rem ui-monospace,"Cascadia Code",Consolas,monospace}
.demo-transfer span:first-child{width:2px;height:34px;background:#669f76}
.demo-command{margin:1rem 0 0 1.2rem;padding:.75rem 1rem;border:1px solid #455c4b;border-radius:6px;background:#202a27;color:#f0f6ef;font:500 .77rem ui-monospace,"Cascadia Code",Consolas,monospace;white-space:nowrap;overflow:auto}
.demo-result{display:flex;gap:.6rem;align-items:baseline;margin:.75rem 0 0 1.2rem;color:#adc5b5;font:.72rem/1.5 ui-monospace,"Cascadia Code",Consolas,monospace}
.demo-result strong{color:#dcf4e1;font-weight:600}
.result-mark{color:var(--mint)}
.command-text{display:inline-block;position:relative}
.command-text:after{content:"";position:absolute;inset:0;background:#202a27;transform:scaleX(0);transform-origin:right}
.prompt{color:var(--mint);margin-right:.65rem}
.cursor{display:inline-block;width:6px;height:1em;margin-left:4px;background:var(--mint);vertical-align:-2px}
.demo-footer{padding:.9rem 1.75rem;border-top:1px solid #3c5146;color:#adc1b1;font-size:.72rem}
.live-dot{display:inline-block;width:6px;height:6px;margin-right:.45rem;border-radius:50%;background:var(--mint);vertical-align:1px}
.section{padding-block:7rem}
.section-heading{max-width:700px;margin-bottom:3rem}
h2{margin-bottom:1.15rem;font-size:clamp(2.35rem,4.3vw,4rem);line-height:1.12;letter-spacing:-.05em;font-weight:650}
.section-heading>p:last-child,.how-copy>p:not(.eyebrow),.principle-list p{max-width:62ch;color:var(--muted);font-size:1rem;line-height:1.75}
.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;overflow:hidden}
.feature{min-height:255px;padding:1.5rem;border-right:1px solid var(--line);background:#fff}
.feature:last-child{border:0}
.feature-symbol{display:block;height:66px;color:var(--green);font-size:2rem;line-height:1}
.feature h3,.principle-list h3{margin-bottom:.65rem;font-size:1.04rem;letter-spacing:-.02em}
.feature p{margin-bottom:0;color:var(--muted);font-size:.89rem;line-height:1.65}
.how{background:var(--pale)}
.how-heading{display:grid;grid-template-columns:1.1fr .75fr;gap:4rem;align-items:end;margin-bottom:3rem}
.how-heading h2{margin-bottom:0}
.how-heading>p{max-width:39ch;margin:0 0 .3rem;color:var(--muted);font-size:1rem;line-height:1.7}
.flow{display:grid;grid-template-columns:minmax(270px,.7fr) minmax(0,1.3fr);border:1px solid #b8cbbd;border-radius:12px;overflow:hidden;box-shadow:0 26px 65px rgba(34,74,48,.12)}
.flow-steps{display:flex;flex-direction:column;padding:1rem;background:#f8fbf8}
.flow-step{display:grid;grid-template-columns:2.5rem 1fr 1rem;align-items:start;gap:1rem;width:100%;padding:1.5rem 1.1rem;border:0;border-bottom:1px solid #dce8de;background:transparent;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.flow-step:last-of-type{border-bottom:0}
.flow-step:not(:disabled):hover{background:#eaf3ec}
.flow-step.is-active{border-radius:7px;background:#dceee2}
.step-index{padding-top:.15rem;color:#4e795d;font:700 .79rem ui-monospace,"Cascadia Code",Consolas,monospace}
.flow-step strong,.flow-step small{display:block}
.flow-step strong{font-size:1rem;line-height:1.3}
.flow-step small{margin-top:.55rem;color:#53665a;font-size:.83rem;line-height:1.5}
.step-arrow{color:#518762;opacity:0;transform:translate(-4px,4px);transition:opacity .2s,transform .2s}
.flow-step.is-active .step-arrow{opacity:1;transform:none}
.flow-note{margin:auto 1.1rem .5rem;color:#65786b;font-size:.75rem;line-height:1.45}
.flow-stage{min-width:0;background:#17221d;color:#edf5ee}
.flow-stage-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid #3c5146;color:#a8bead;font:600 .73rem ui-monospace,"Cascadia Code",Consolas,monospace}
.stage-indicator{white-space:nowrap;color:var(--mint)}
.stage-indicator span{display:inline-block;width:6px;height:6px;margin-right:.3rem;border-radius:50%;background:currentColor;vertical-align:2px}
.flow-panel{padding:1.6rem 1.5rem 1.2rem}
.flow-panel[hidden]{display:none}
.flow-panel-head{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-bottom:1.25rem}
.flow-panel-head span{color:#a3d7af;font:.7rem ui-monospace,"Cascadia Code",Consolas,monospace;white-space:nowrap}
.flow-panel-head strong{font-size:.83rem;font-weight:600;text-align:right}
.flow-terminal{overflow:hidden;border:1px solid #3a5743;border-radius:8px;background:#101915}
.flow-terminal-bar{display:flex;align-items:center;gap:1rem;height:39px;padding:0 1rem;border-bottom:1px solid #2c4534;color:#9bb4a2;font:600 .71rem ui-monospace,"Cascadia Code",Consolas,monospace}
.terminal-path{margin-left:auto;color:#799484}
.flow-terminal-body{min-height:235px;padding:1.45rem 1.35rem;color:#f0f6ef;font:.82rem/1.65 ui-monospace,"Cascadia Code",Consolas,monospace;overflow-x:auto}
.flow-terminal-body>p{margin:0 0 .4rem}
.flow-command-text{display:inline-block;position:relative;max-width:calc(100% - 2rem);vertical-align:top}
.flow-command-text:after{content:"";position:absolute;inset:0;background:#101915;transform:scaleX(0);transform-origin:right}
.flow-output{display:flex;gap:1rem;margin-top:1.4rem;color:#a9c0ae}
.output-line{flex:0 0 2px;align-self:stretch;background:#76a884}
.flow-output p{max-width:40ch;margin:0}
.flow-record dl{display:grid;gap:.35rem;margin:0}
.flow-record dl div{display:grid;grid-template-columns:6.4rem minmax(0,1fr);gap:.8rem}
.flow-record dt{color:#8daf9a}
.flow-record dd{margin:0;color:#e8f2e9}
.flow-panel-foot{margin:1.1rem 0 0;color:#afc5b5;font-size:.8rem}
.flow-docs{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;border-top:1px solid #3c5146;color:var(--mint);font-size:.84rem;font-weight:650}
.flow-docs:hover{background:#23362a;text-decoration:none}
.principles-grid{display:grid;grid-template-columns:.85fr 1fr;gap:8rem}
.principle-list{border-top:1px solid var(--line)}
.principle-list>div{padding:1.35rem 0;border-bottom:1px solid var(--line)}
.principle-list p{margin:0;font-size:.9rem}
.closing{background:#dceee2}
.closing-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:4.5rem}
.closing h2{margin-bottom:.55rem;font-size:clamp(2rem,3.5vw,3.3rem)}
.closing p{margin:0;color:#496453}
.closing .button-primary{background:#225f40;color:#fff}
.site-footer{border-top:1px solid #2a3532}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:108px}
.site-footer img{height:26px}
.footer-inner div{display:flex;gap:2rem;color:#b9c6bd;font-size:.82rem}
@media(max-width:1000px){.hero-grid{gap:2.5rem}.principles-grid{gap:4rem}.feature{padding:1.2rem}.how-heading{gap:2rem}.flow{grid-template-columns:minmax(245px,.8fr) minmax(0,1.2fr)}}
@media(max-width:760px){.wrap{width:min(100% - 2rem,560px)}.header-inner{min-height:70px;flex-wrap:wrap;gap:1rem;padding-block:1rem}.brand img{height:26px}.site-header nav{order:3;width:100%;gap:1.5rem;margin:0}.header-github{margin-left:auto}.hero-grid,.principles-grid,.how-heading,.flow{grid-template-columns:1fr}.hero-grid{padding-block:4.5rem 5rem}.hero-copy{max-width:560px}.handoff-demo{max-width:560px}.section{padding-block:5rem}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature:nth-child(2){border-right:0}.feature:nth-child(-n+2){border-bottom:1px solid var(--line)}.feature{min-height:220px}.principles-grid{gap:3rem}.how-heading{gap:1rem}.flow-steps{padding:.5rem}.flow-step{padding:1rem}.flow-note{margin:1rem}.closing-inner{padding-block:3.5rem}}
@media(max-width:480px){.wrap{width:min(100% - 2rem,420px)}.brand img{height:23px}.header-github{font-size:.73rem;padding:.55rem .65rem}h1{font-size:clamp(3.25rem,12vw,4.2rem)}.hero-lead{font-size:1rem}.hero-actions{align-items:stretch}.button{font-size:.83rem}.demo-body{padding:1.25rem}.demo-record{padding:1rem}.demo-record dl div{grid-template-columns:1fr;gap:.1rem}.demo-footer{padding-inline:1.25rem}.feature-grid{grid-template-columns:1fr}.feature,.feature:nth-child(2){min-height:0;border-right:0;border-bottom:1px solid var(--line)}.feature:last-child{border:0}.feature-symbol{height:48px}.flow-panel{padding:1.25rem 1rem 1rem}.flow-panel-head{display:block}.flow-panel-head strong{display:block;margin-top:.45rem;text-align:left}.flow-terminal-body{padding:1rem;font-size:.72rem;min-height:205px}.flow-record dl{gap:.65rem}.flow-record dl div{grid-template-columns:1fr;gap:0}.flow-stage-top,.flow-docs{padding-inline:1rem}.closing-inner{align-items:flex-start;flex-direction:column}.footer-inner{align-items:flex-start;flex-direction:column;justify-content:center;padding-block:2rem;gap:1rem}}
@media(max-width:480px){.demo-status{display:none}.demo-bar{gap:.5rem;padding-inline:.75rem}}
@media(prefers-reduced-motion:no-preference){
  .hero:before{animation:glow-in 1.8s ease-out both}
  .handoff-demo.is-playing .demo-session:first-child{animation:row-in .4s ease-out both}
  .handoff-demo.is-playing .demo-record{animation:row-in .55s ease-out .4s both}
  .handoff-demo.is-playing .demo-transfer span:first-child{animation:trace-in .65s ease-out 1.25s both;transform-origin:top}
  .handoff-demo.is-playing .demo-transfer span:last-child{animation:fade-in .4s ease-out 1.55s both}
  .handoff-demo.is-playing .demo-session.next{animation:row-in .4s ease-out 2s both}
  .handoff-demo.is-playing .demo-command{animation:row-in .3s ease-out 2.4s both}
  .handoff-demo.is-playing .command-text:after{animation:cover-away .8s steps(25,end) 2.7s both}
  .handoff-demo.is-playing .cursor{animation:fade-in .1s linear 3.5s both}
  .handoff-demo.is-playing .demo-result{animation:row-in .45s ease-out 3.6s both}
  .handoff-demo.is-playing .live-dot{animation:status-pulse .5s ease-out 3.75s both}
  .flow-panel.is-entering{animation:row-in .35s ease-out both}
  .flow-panel.is-entering .flow-command{animation:row-in .35s ease-out .08s both}
  .flow-panel.is-entering .flow-command:nth-child(2){animation-delay:.45s}
  .flow-panel.is-entering .flow-command-text:after{animation:cover-away .7s steps(30,end) .2s both}
  .flow-panel.is-entering .flow-command:nth-child(2) .flow-command-text:after{animation-delay:.55s}
  .flow-panel.is-entering .flow-output{animation:row-in .4s ease-out .9s both}
}
@keyframes glow-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes row-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes trace-in{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cover-away{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes status-pulse{50%{transform:scale(1.8);box-shadow:0 0 0 4px rgba(163,233,197,.15)}to{transform:scale(1);box-shadow:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.demo-replay,.step-arrow{transition:none}}