:root{--paper:#f6f4ed;--ink:#17171f;--blue:#1010a8;--night:#080836;--cyan:#6be5ef;--yellow:#ffe27a;--muted:#66656e;--rule:#d6d4cd;--mono:Menlo,Consolas,"Liberation Mono",monospace;--sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55}button,input{font:inherit}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}a:hover{color:var(--blue)}button{cursor:pointer}img{max-width:100%;height:auto}pre,code,kbd,.mono{font-family:var(--mono)}pre{margin:0;white-space:pre;overflow:auto}code{font-size:.92em}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.08;letter-spacing:-.045em}h1{font-size:clamp(2.6rem,6.3vw,5.7rem);font-weight:800;margin-bottom:0}h2{font-size:clamp(2rem,4vw,3.45rem);margin-bottom:0}h3{font-size:1.55rem;letter-spacing:-.035em}.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;font-weight:700;color:var(--blue);margin-bottom:24px}.skip-link{position:fixed;left:12px;top:-100px;z-index:20;background:var(--yellow);padding:12px}.skip-link:focus{top:12px}a:focus-visible,button:focus-visible{outline:3px solid #da5c12;outline-offset:5px}
.site-header{display:flex;justify-content:space-between;align-items:center;padding-block:28px;border-bottom:1px solid var(--rule);gap:30px}.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:1.35rem;letter-spacing:-.045em;white-space:nowrap}.brand strong{font-weight:800}.brand-dot{color:var(--blue)}nav{display:flex;gap:30px;align-items:center;font-size:.85rem}nav a{text-decoration:none}nav .nav-source{font-family:var(--mono);font-size:.8rem;border-left:1px solid var(--rule);padding-left:30px}.hero{padding-block:70px 56px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:9px}.hero-heading{display:flex;align-items:center;justify-content:space-between;gap:30px}.hero h1 span{color:var(--blue)}.hero-ghost{font-size:1.7rem;line-height:1.2;color:var(--blue);padding:18px 40px 12px 0;overflow:visible;transform:rotate(5deg);animation:float 4s ease-in-out infinite}.hero-description{font-size:1.16rem;max-width:575px;margin:26px 0 28px;color:#50505c;line-height:1.65}.hero-actions{display:flex;gap:28px;align-items:center;flex-wrap:wrap}.button{display:inline-flex;gap:28px;align-items:center;padding:15px 23px;font-weight:700;text-decoration:none;font-size:.92rem;border:1px solid var(--blue)}.primary{background:var(--blue);color:white}.primary:hover{background:var(--night);color:white}.text-link{font-size:.88rem;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}.hero-meta{display:flex;gap:21px;color:var(--muted);font-family:var(--mono);font-size:.68rem;margin-top:27px;flex-wrap:wrap}.hero-meta span+span:before{content:"/";color:#aaa;margin-right:21px}
.workspace{padding-bottom:32px}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:32px}.section-heading .eyebrow{margin-bottom:14px}.section-heading>p{max-width:300px;color:var(--muted);font-size:.92rem;margin-bottom:3px}.workspace .section-heading h2{font-size:clamp(1.6rem,3vw,2.6rem)}.tab-bar{display:flex;gap:0;align-items:stretch;border:1px solid var(--rule);background:#e9e7df;padding:5px;flex-wrap:wrap}.tab-bar button{display:flex;gap:9px;align-items:center;justify-content:center;border:0;background:transparent;padding:12px 19px;color:#55545c;font-family:var(--mono);font-size:.72rem;white-space:nowrap}.tab-bar button[aria-selected=true]{background:var(--blue);color:white}.tab-bar button:hover:not([aria-selected=true]){background:#d9d7cf;color:var(--ink)}.tab-bar kbd{font-size:.65rem;padding:0 4px;border:1px solid currentColor;border-radius:2px}.tab-bar img{filter:none}.shot-panel{margin:0}.shot-panel>a{display:block;background:var(--night);padding:10px;border:1px solid var(--night)}.shot-panel>a img{display:block;width:100%;border-radius:5px}.shot-panel figcaption{display:flex;justify-content:space-between;gap:20px;font-size:.8rem;padding-block:14px;color:var(--muted)}.shot-panel figcaption .mono{font-size:.66rem}.workspace-facts{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding-block:24px;font-size:.84rem;color:#666}.workspace-facts strong{font-size:1.25rem;color:var(--ink);font-family:var(--mono);margin-right:7px;letter-spacing:-.05em}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;padding-block:50px 75px}.feature-key{font-family:var(--mono);font-size:.68rem;color:var(--blue);display:block;margin-bottom:20px;border-bottom:2px solid var(--blue);width:max-content;padding-bottom:4px}.features h3{font-size:1.4rem;margin-bottom:15px}.features p{font-size:.9rem;color:var(--muted);line-height:1.8;margin:0}.learning{padding-block:65px 75px;background:var(--night);color:white}.learning .eyebrow{color:var(--cyan)}.learning .section-heading>p{color:#b8bad2}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:46px}.lesson{display:flex;flex-direction:column;border-top:1px solid #42426a;padding-top:22px;min-width:0}.line-number{font-family:var(--mono);font-size:.8rem;color:var(--cyan);margin-bottom:20px}.lesson h3{font-size:1.7rem;margin-bottom:15px}.lesson>p{color:#b8bad2;font-size:.9rem;min-height:84px;margin-bottom:25px;line-height:1.75}.lesson pre{font-size:.78rem;line-height:1.9;min-height:190px;padding:18px;background:#10104d;border:1px solid #30305f;color:#eeeeff}.lesson .output{min-height:120px;background:transparent;border:0;color:var(--cyan);padding:10px 0 20px;line-height:1.45}.expected-label{font-family:var(--mono);font-size:.61rem;color:#b8bad2;letter-spacing:.07em;margin-top:25px}.lesson .help-contents{font-family:var(--mono);min-height:120px;color:var(--cyan);padding-top:10px;margin-bottom:0;font-size:.8rem}.lesson>a{margin-top:auto;color:white;font-size:.8rem;text-decoration:none;padding-bottom:5px;border-bottom:1px solid #656584;width:max-content;max-width:100%}.lesson>a:hover{color:var(--cyan)}
.install{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;padding-block:85px}.install h2{margin-bottom:22px}.install>div>p:not(.eyebrow){color:var(--muted);font-size:.94rem}.install .install-note{font-size:.77rem!important;max-width:320px;margin-top:25px;line-height:1.8}.install-box{min-width:0;align-self:center}.install-box .tab-bar{background:#e9e7df}.install-panel{padding:20px 22px;background:white;border:1px solid var(--rule);border-top:0}.code-toolbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px;font-family:var(--mono);font-size:.62rem;color:var(--muted)}.copy-button{border:1px solid var(--rule);padding:6px 9px;background:var(--paper);color:var(--ink);font-size:.65rem}.copy-button:hover{border-color:var(--blue);color:var(--blue)}.install-panel pre{font-size:.75rem;line-height:2}.install-panel>p{font-size:.75rem;color:var(--muted);margin:16px 0 0}.first-run{font-size:.72rem;margin:15px 0 0;color:var(--muted)}.first-run kbd{color:var(--blue);font-weight:700}.copy-status{font-size:.7rem;min-height:18px;color:var(--blue);margin:6px 0 0}
.compatibility{display:grid;grid-template-columns:.3fr 1fr;gap:35px;padding-block:30px 55px;border-top:1px solid var(--rule)}.compatibility-label{font-family:var(--mono);font-size:.66rem;color:var(--muted);padding-top:7px}.compatibility h2{font-size:1.45rem;letter-spacing:-.025em;margin-bottom:17px}.compatibility p{color:var(--muted);font-size:.85rem;line-height:1.9;max-width:780px}.compatibility a{font-size:.78rem;font-weight:700}.site-footer{padding-block:30px 45px;border-top:1px solid var(--rule);display:flex;align-items:flex-start;justify-content:space-between;gap:35px}.site-footer .brand{font-size:1.1rem}.site-footer p{font-size:.8rem;color:var(--muted);line-height:1.9;margin:0}.site-footer .mono{font-size:.61rem}.site-footer>div{display:flex;gap:20px;font-size:.75rem}.site-footer>div a{text-decoration:none}[hidden]{display:none!important}
@keyframes float{0%,100%{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@media(max-width:950px){.wrap{width:calc(100% - 56px)}nav{gap:20px}.hero{padding-top:50px}.hero-ghost{font-size:1.25rem;padding-right:5px}.features{gap:28px}.lesson-grid{gap:24px}.lesson pre{font-size:.68rem;padding:12px}.lesson>p{min-height:120px}.install{gap:35px}.install-panel{padding:17px 15px}.install-panel pre{font-size:.65rem}.tab-bar button{padding:11px 14px;font-size:.66rem}}
@media(max-width:700px){.wrap{width:calc(100% - 36px)}.site-header{padding-block:20px;align-items:flex-start;gap:15px}.brand{font-size:1.05rem;gap:8px}.brand img{width:26px}.site-header nav{gap:13px;font-size:.7rem;flex-wrap:wrap;justify-content:flex-end;max-width:190px}nav .nav-source{padding-left:0;border-left:0;font-size:.68rem}.hero{padding-block:42px 45px}.hero .eyebrow{font-size:.6rem;letter-spacing:0}.hero-heading{gap:10px}.hero h1{font-size:clamp(2.5rem,8vw,3.8rem);letter-spacing:-.055em}.hero-ghost{display:none}.hero-description{font-size:1rem;margin-top:21px;line-height:1.7}.hero-actions{gap:20px}.button{font-size:.83rem;padding:13px 18px}.text-link{font-size:.78rem}.hero-meta{gap:12px;font-size:.6rem}.hero-meta span+span:before{margin-right:12px}.section-heading{display:block;margin-bottom:24px}.section-heading>p{margin-top:20px;font-size:.84rem}.section-heading .eyebrow{font-size:.6rem}.tab-bar button{flex:1 1 45%;padding:10px 6px;font-size:.62rem}.shot-panel>a{padding:4px}.shot-panel figcaption{display:block;font-size:.72rem}.shot-panel figcaption .mono{display:block;margin-top:5px;font-size:.6rem}.workspace-facts{flex-wrap:wrap;gap:15px;padding-block:20px;font-size:.75rem}.workspace-facts strong{font-size:1.05rem}.workspace-facts span:last-child{width:100%}.features{grid-template-columns:1fr;gap:30px;padding-block:30px 50px}.feature-key{margin-bottom:12px}.features h3{font-size:1.35rem;margin-bottom:10px}.features p{font-size:.86rem}.learning{padding-block:45px 55px}.lesson-grid{grid-template-columns:1fr;gap:35px;margin-top:35px}.lesson>p{min-height:0;margin-bottom:20px}.lesson pre{font-size:.77rem;min-height:0;padding:16px}.lesson .output,.lesson .help-contents{min-height:0;margin-bottom:20px}.expected-label{margin-top:20px}.line-number{margin-bottom:15px}.lesson h3{font-size:1.65rem}.install{grid-template-columns:1fr;gap:26px;padding-block:50px}.install .install-note{max-width:none}.install-panel{padding:18px 14px}.install-panel pre{font-size:.65rem}.install-box .tab-bar button{flex:1}.first-run{font-size:.65rem}.compatibility{grid-template-columns:1fr;gap:17px;padding-bottom:35px}.site-footer{display:grid;grid-template-columns:1fr;gap:20px;padding-block:25px}.site-footer>div{flex-wrap:wrap}.eyebrow{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}