@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap";:root{--paper:#f3eee3;--paper-deep:#e9e0d0;--ink:#18202d;--ink-soft:#3d4654;--night:#101a2a;--night-soft:#17253a;--line:rgba(24,32,45,.16);--light-line:rgba(238,233,220,.18);--saffron:#d49a45;--saffron-bright:#efb254;--copper:#a75f39;--green:#365746;--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--mono:"DM Mono",monospace;--ease:cubic-bezier(.23,1,.32,1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,a{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}.site-shell{min-height:100vh;overflow:hidden;position:relative}.mandala-edge{position:fixed;inset:12px;pointer-events:none;z-index:10;border:1px solid rgba(166,95,57,.3);outline:1px solid rgba(166,95,57,.12);outline-offset:5px}.mandala-edge:before,.mandala-edge:after{content:"✦";position:absolute;color:var(--saffron);font-size:13px;background:var(--paper);padding:0 8px}.mandala-edge:before{top:-10px;left:50%;transform:translate(-50%)}.mandala-edge:after{bottom:-10px;left:50%;transform:translate(-50%)}.site-nav{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,6vw,92px);border-bottom:1px solid var(--line);position:relative;z-index:20;background:#f3eee3e6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:700;letter-spacing:4px}.slash{color:var(--saffron);font-weight:400}.vak-mark{display:inline-block;width:42px;height:42px;position:relative;filter:drop-shadow(0 3px 4px rgba(24,32,45,.12))}.vak-mark.compact{width:27px;height:27px;filter:none}.mark-core{position:absolute;width:19px;height:19px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);background:var(--saffron);border:2px solid var(--paper)}.compact .mark-core{width:12px;height:12px;border-width:1px}.mark-wing{position:absolute;top:7px;width:19px;height:29px;background:var(--night);clip-path:polygon(50% 0,100% 22%,78% 100%,50% 76%,22% 100%,0 22%)}.compact .mark-wing{top:4px;width:12px;height:19px}.mark-wing.left{left:0;transform:rotate(-28deg)}.mark-wing.right{right:0;transform:rotate(28deg)}.nav-links{display:flex;gap:29px;margin-left:auto;margin-right:40px}.nav-links button,.footer-links{font:11px var(--mono);color:var(--ink-soft);transition:color .18s}.nav-links button:hover{color:var(--saffron)}.nav-actions{display:flex;align-items:center;gap:18px}.nav-github{font:11px var(--mono);display:flex;align-items:center;gap:7px;color:var(--ink-soft)}.nav-github:hover{color:var(--saffron)}.menu-button{display:none}.hero-section{max-width:1440px;margin:auto;min-height:650px;padding:100px clamp(28px,8vw,120px) 90px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;position:relative}.hero-copy{position:relative;z-index:2}.eyebrow{font:10px var(--mono);text-transform:uppercase;letter-spacing:2px;color:var(--copper);display:flex;align-items:center;gap:9px}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--saffron);box-shadow:0 0 0 5px #d49a4526}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-2px}h1{font-size:clamp(60px,7.2vw,108px);line-height:.95;margin:25px 0 28px;color:var(--night)}h1 em,h2 em{color:var(--copper);font-weight:500}h2{font-size:clamp(40px,5vw,68px);line-height:.98;margin-bottom:22px}.hero-lede{max-width:460px;color:var(--ink-soft);font-size:16px;line-height:1.7}.hero-actions{display:flex;gap:23px;align-items:center;margin:34px 0}.primary-button{background:var(--night);color:var(--paper);padding:14px 18px;display:inline-flex;align-items:center;gap:10px;font-size:12px;transition:transform .18s var(--ease),background .18s}.primary-button:hover{background:var(--copper);transform:translateY(-2px)}.text-button{display:inline-flex;align-items:center;gap:8px;font:11px var(--mono);color:var(--ink-soft)}.text-button:hover{color:var(--copper)}.hero-proof{display:flex;gap:20px;flex-wrap:wrap;color:var(--green);font:10px var(--mono)}.hero-proof span{display:flex;align-items:center;gap:5px}.hero-portrait{min-height:470px;position:relative;display:grid;place-items:center}.portrait-frame{width:min(380px,70vw);height:470px;position:relative;overflow:hidden;background:var(--night);border:1px solid rgba(24,32,45,.3);box-shadow:18px 20px #d49a452e}.portrait-frame:before{content:"";position:absolute;inset:14px;border:1px solid rgba(243,238,227,.45);z-index:1;pointer-events:none}.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center 24%;filter:saturate(.88) contrast(1.03)}.portrait-label{position:absolute;bottom:0;left:0;right:0;padding:17px 20px;background:linear-gradient(transparent,#101a2aed);color:var(--paper);display:flex;flex-direction:column;gap:5px}.portrait-label span{font:9px var(--mono);letter-spacing:1px;color:var(--saffron-bright)}.portrait-label strong{font:14px var(--serif);font-style:italic;font-weight:500}.portrait-orbit{position:absolute;border:1px solid rgba(166,95,57,.5);border-radius:50%;pointer-events:none}.orbit-one{width:430px;height:430px;transform:rotate(34deg)}.orbit-two{width:510px;height:210px;transform:rotate(-27deg)}.hero-stamp{position:absolute;bottom:36px;right:0;display:flex;align-items:center;gap:7px;font:9px var(--mono);line-height:1.4;color:var(--copper);background:var(--paper);padding:7px 9px}.hero-stamp .vak-mark{width:28px;height:28px}.hero-stamp .mark-wing{top:5px;width:13px;height:19px}.hero-stamp .mark-core{width:12px;height:12px}.ticker{background:var(--night);color:var(--paper);overflow:hidden;border-top:1px solid var(--saffron);border-bottom:1px solid var(--saffron)}.ticker-inner{width:max-content;display:flex;gap:28px;padding:14px 0;animation:ticker 24s linear infinite;font:10px var(--mono);text-transform:uppercase;letter-spacing:1.5px}.ticker i{color:var(--saffron);font-style:normal}.section-block,.dark-section{padding:108px clamp(28px,8vw,120px);max-width:1440px;margin:auto}.section-kicker{font:10px var(--mono);color:var(--copper);letter-spacing:2px;text-transform:uppercase;margin-bottom:44px}.section-kicker.light{color:var(--saffron-bright)}.split-heading,.portfolio-heading,.dark-heading{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end}.split-heading p,.portfolio-heading p,.dark-heading p{max-width:460px;color:var(--ink-soft);line-height:1.75;font-size:14px}.dark-heading p{color:#b7c1c7}.inline-link{display:inline-flex;align-items:center;gap:8px;color:var(--copper);font:11px var(--mono);border-bottom:1px solid rgba(167,95,57,.4);padding-bottom:5px;margin-top:13px}.inline-link:hover{color:var(--saffron)}.principles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:68px}.principles-grid article{border-top:1px solid var(--line);padding:22px 10px 10px 0}.card-index{font:10px var(--mono);color:var(--saffron)}.principles-grid h3{font-size:21px;font-family:var(--serif);font-weight:500;margin:20px 0 8px}.principles-grid p{font-size:13px;line-height:1.65;color:var(--ink-soft);max-width:310px}.dark-section{max-width:none;background:var(--night);color:var(--paper);position:relative}.dark-section:before{content:"V";position:absolute;right:7%;top:10%;font:500 280px var(--serif);color:#d49a450e;pointer-events:none}.dark-heading{position:relative;z-index:1}.dark-heading h2{color:var(--paper)}.tutorial-count{align-self:start;justify-self:end;color:var(--saffron);font:12px var(--mono)}.tutorial-count strong{font:80px var(--serif);font-weight:500;letter-spacing:-6px}.tutorial-count span{color:#afbac2}.tutorial-layout{display:grid;grid-template-columns:260px 1fr;gap:30px;margin-top:67px;position:relative;z-index:1}.step-list{display:flex;flex-direction:column;border-top:1px solid var(--light-line)}.step-list button{display:grid;grid-template-columns:34px 1fr 15px;align-items:center;gap:6px;text-align:left;padding:18px 8px;border-bottom:1px solid var(--light-line);color:#9da9b4;font:11px var(--mono);transition:color .2s,background .2s}.step-list button strong{font:15px var(--serif);color:var(--paper);font-weight:500}.step-list button svg{opacity:0;transition:opacity .2s,transform .2s}.step-list button.active,.step-list button:hover{color:var(--saffron-bright);background:#d49a4512}.step-list button.active svg{opacity:1;transform:rotate(-90deg)}.lesson-card{display:grid;grid-template-columns:1fr 1.1fr;background:#16253a;border:1px solid var(--light-line);min-height:300px}.lesson-copy{padding:38px}.lesson-tag{font:10px var(--mono);color:var(--saffron-bright);text-transform:uppercase;letter-spacing:1px}.lesson-copy h3{font:32px var(--serif);font-weight:500;margin:20px 0 12px}.lesson-copy p{color:#b9c4ca;font-size:13px;line-height:1.7}.light-link{color:var(--saffron-bright);border-color:#efb25466}pre{margin:0;padding:38px 28px;background:#0b1320;color:#dce4df;font:12px/1.8 var(--mono);white-space:pre-wrap;display:flex;align-items:center}.portfolio-heading{align-items:center}.profile-card{display:flex;align-items:center;gap:13px;justify-self:end;border:1px solid var(--line);padding:14px 16px;min-width:275px}.profile-card:hover{border-color:var(--saffron)}.profile-card>div:nth-child(2){display:flex;flex:1;flex-direction:column;gap:4px}.profile-card strong{font:15px var(--serif);font-weight:500}.profile-card span{font:10px var(--mono);color:var(--copper)}.profile-avatar{width:38px;height:38px;background:var(--night);color:var(--saffron);display:grid;place-items:center;font:11px var(--mono)}.portfolio-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px;margin-top:64px}.feature-card{min-height:250px;border:1px solid var(--line);padding:24px;position:relative;overflow:hidden}.feature-card.featured{background:var(--night);color:var(--paper)}.feature-meta{display:flex;justify-content:space-between;color:var(--copper);font:10px var(--mono);text-transform:uppercase;letter-spacing:1px}.featured .feature-meta{color:var(--saffron-bright)}.feature-card h3{font:32px var(--serif);font-weight:500;margin:38px 0 12px}.feature-card p{font-size:13px;line-height:1.65;color:var(--ink-soft);max-width:320px}.featured p{color:#bfc9cc}.feature-card a{position:absolute;bottom:23px;display:flex;align-items:center;gap:8px;color:var(--saffron-bright);font:11px var(--mono)}.quote-mark{position:absolute;right:18px;bottom:-25px;color:#a65f392e;font:180px var(--serif)}.stack-row{display:flex;gap:7px;position:absolute;bottom:25px}.stack-row span{font:9px var(--mono);border:1px solid var(--line);padding:6px 8px;color:var(--copper)}.roadmap-list{margin-top:65px;border-top:1px solid var(--light-line);position:relative;z-index:1}.roadmap-list article{display:grid;grid-template-columns:48px 1fr 20px;gap:16px;align-items:center;padding:24px 0;border-bottom:1px solid var(--light-line)}.roadmap-list article>span{font:11px var(--mono);color:var(--saffron)}.roadmap-list h3{font:19px var(--serif);font-weight:500;margin:0 0 7px}.roadmap-list p{margin:0;color:#aebac0;font-size:12px;line-height:1.55}.roadmap-list code{font:11px var(--mono);color:var(--saffron-bright)}.roadmap-foot{display:flex;justify-content:space-between;margin-top:28px;color:#9ba7ae;font:10px var(--mono);position:relative;z-index:1}.roadmap-foot a{color:var(--saffron-bright);display:flex;align-items:center;gap:7px}.progress-ring{justify-self:end;display:flex;align-items:baseline;gap:3px}.progress-ring strong{font:88px var(--serif);font-weight:500;color:var(--saffron)}.progress-ring span{font:18px var(--mono);color:var(--saffron)}.progress-ring small{display:block;color:#9ba7ae;font:10px var(--mono);white-space:nowrap}.cta-section{max-width:1440px;margin:auto;padding:108px clamp(28px,8vw,120px);background:var(--paper)}.cta-card{background:var(--paper-deep);padding:57px 7%;display:flex;justify-content:space-between;align-items:center;gap:40px;position:relative;overflow:hidden;border:1px solid var(--line)}.cta-card h2{font-size:clamp(35px,4.6vw,62px);margin:17px 0}.cta-card p{color:var(--ink-soft);font-size:13px;max-width:410px;line-height:1.65}.cta-orb{position:absolute;right:15%;width:230px;height:230px;border:1px solid rgba(166,95,57,.25);border-radius:50%;display:grid;place-items:center}.cta-orb:before,.cta-orb:after{content:"";position:absolute;border:1px solid rgba(166,95,57,.2);border-radius:50%}.cta-orb:before{inset:24px}.cta-orb:after{inset:50px}.cta-orb .vak-mark{opacity:.6}.cta-card>*{position:relative;z-index:1}.cta-actions{display:flex;flex-direction:column;align-items:start;gap:20px;min-width:220px}.text-button.dark{color:var(--copper)}.site-footer{border-top:1px solid var(--line);padding:28px clamp(28px,6vw,92px);display:flex;gap:24px;align-items:center;color:var(--ink-soft);font-size:11px}.footer-brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:13px;letter-spacing:2px}.site-footer p{flex:1;margin:0;font-size:11px}.footer-links{display:flex;gap:17px}.footer-links a{display:flex;align-items:center;gap:4px}.footer-links a:hover{color:var(--saffron)}[data-reveal]{opacity:0;transform:translateY(18px)}[data-reveal].is-visible{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}.hero-section.is-visible{opacity:1;transform:none}@keyframes ticker{to{transform:translate(-25%)}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}[data-reveal]{opacity:1;transform:none}}@media (max-width:900px){.site-nav{padding:0 30px}.hero-section{grid-template-columns:1fr;padding-top:70px}.hero-portrait{order:-1;min-height:400px}.portrait-frame{height:390px;width:320px}.portrait-orbit{transform:scale(.8)}.split-heading,.portfolio-heading,.dark-heading{grid-template-columns:1fr;gap:25px}.tutorial-count{justify-self:start}.tutorial-layout{grid-template-columns:1fr}.step-list{display:grid;grid-template-columns:1fr 1fr}.step-list button{border-right:1px solid var(--light-line)}.portfolio-grid{grid-template-columns:1fr 1fr}.featured{grid-column:span 2}.cta-card{display:block}.cta-actions{margin-top:30px}.cta-orb{right:-80px}.site-footer{flex-wrap:wrap}.site-footer p{flex-basis:100%;order:3}}@media (max-width:600px){.mandala-edge{inset:7px}.site-nav{height:64px;padding:0 19px}.nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--paper);padding:18px 20px;border-bottom:1px solid var(--line);flex-direction:column;gap:15px}.nav-links.open{display:flex}.menu-button{display:block}.nav-github{font-size:0}.nav-github svg{width:18px;height:18px}.hero-section{padding:55px 22px 75px}.hero-portrait{min-height:340px}.portrait-frame{width:260px;height:330px}.portrait-orbit{transform:scale(.6)}.hero-stamp{right:4px;bottom:15px}.hero-lede{font-size:14px}.hero-actions{align-items:flex-start;flex-direction:column;gap:18px}.hero-proof{gap:10px;font-size:9px}.section-block,.dark-section{padding:75px 22px}.section-kicker{margin-bottom:30px}.principles-grid{grid-template-columns:1fr;margin-top:45px}.principles-grid article{padding-bottom:19px}.lesson-card{display:block}.lesson-copy{padding:27px}.lesson-card pre{padding:25px 20px;font-size:10px}.step-list{grid-template-columns:1fr}.portfolio-grid{grid-template-columns:1fr;margin-top:43px}.featured{grid-column:auto}.profile-card{justify-self:start;min-width:0;width:100%}.roadmap-list article{grid-template-columns:30px 1fr 18px}.roadmap-foot{display:block;line-height:1.8}.roadmap-foot a{margin-top:12px}.progress-ring{justify-self:start}.progress-ring strong{font-size:67px}.cta-section{padding:75px 22px}.cta-card{padding:35px 24px}.cta-orb{opacity:.45;right:-100px;top:100px}.site-footer{padding:26px 22px;display:block}.site-footer p{margin:16px 0}.footer-links{gap:12px;flex-wrap:wrap}}.profile-banner{margin-top:25px;max-width:460px;height:88px;position:relative;overflow:hidden;border:1px solid var(--line)}.profile-banner img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.8)}.profile-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,26,42,.58),transparent 65%)}.profile-banner span{position:absolute;z-index:1;left:14px;bottom:12px;color:var(--paper);font:9px var(--mono);letter-spacing:1px;text-transform:uppercase}.hero-diagram{min-height:470px;position:relative;display:grid;place-items:center}.diagram-orbit{position:absolute;border:1px solid rgba(166,95,57,.5);border-radius:50%;pointer-events:none}.diagram-orbit.orbit-one{width:430px;height:430px;transform:rotate(34deg)}.diagram-orbit.orbit-two{width:510px;height:210px;transform:rotate(-27deg)}.diagram-core{width:250px;height:250px;border:1px solid var(--copper);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle,rgba(212,154,69,.16),transparent 68%);box-shadow:0 0 0 18px #d49a450d,0 0 0 42px #d49a4509}.diagram-core .vak-mark{width:58px;height:58px}.diagram-core .mark-wing{top:10px;width:25px;height:39px}.diagram-core .mark-core{width:25px;height:25px}.diagram-core strong{font:600 16px var(--mono);letter-spacing:4px}.diagram-core span{font:9px var(--mono);color:var(--copper);text-transform:uppercase;letter-spacing:1px}.diagram-note{position:absolute;color:var(--copper);font:10px var(--mono);letter-spacing:1px}.note-top{top:62px;right:14%}.note-bottom{bottom:70px;left:13%}.tutorial-downloads{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:24px}.download-link{display:inline-flex;align-items:center;gap:8px;color:var(--night);background:var(--saffron-bright);padding:10px 13px;font:10px var(--mono);transition:transform .18s var(--ease),background .18s}.download-link:hover{transform:translateY(-2px);background:#f4c16c}.light-text{color:var(--saffron-bright)}.lesson-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}.lesson-button{display:inline-flex;align-items:center;gap:7px;color:var(--paper);border:1px solid rgba(239,178,84,.35);padding:9px 11px;font:10px var(--mono);transition:background .18s,border-color .18s}.lesson-button:hover{background:#efb2541f;border-color:var(--saffron-bright)}.check-button{color:var(--saffron-bright)}.lesson-output{display:flex;align-items:center;gap:8px;margin-top:15px;color:#9da9b4;font:10px var(--mono)}.lesson-output.checked{color:#9bd1a7}.output-dot{width:7px;height:7px;border-radius:50%;background:#6b7782}.checked .output-dot{background:#6bc17c;box-shadow:0 0 0 4px #6bc17c1f}.code-window{display:flex;flex-direction:column;min-width:0;background:#0b1320}.code-window-bar{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid rgba(238,233,220,.1);color:#74828d;font:9px var(--mono)}.code-window-bar>span:first-child{display:flex;gap:5px}.code-window-bar i{display:block;width:7px;height:7px;border-radius:50%;background:#45515b}.code-window-bar i:first-child{background:#b1684b}.code-window-bar i:nth-child(2){background:#c99e4b}.code-window-bar i:nth-child(3){background:#65906b}.code-status{color:var(--saffron-bright)}.code-window pre{flex:1}.code-window code{color:#dce4df}@media (max-width:900px){.hero-diagram{order:-1;min-height:400px}.diagram-orbit.orbit-one{transform:scale(.8) rotate(34deg)}.diagram-orbit.orbit-two{transform:scale(.8) rotate(-27deg)}}@media (max-width:600px){.hero-diagram{min-height:330px}.diagram-core{width:190px;height:190px}.diagram-core .vak-mark{width:44px;height:44px}.diagram-core .mark-wing{top:7px;width:19px;height:29px}.diagram-core .mark-core{width:19px;height:19px}.diagram-core strong{font-size:13px}.diagram-core span{font-size:8px}.diagram-orbit.orbit-one{transform:scale(.6) rotate(34deg)}.diagram-orbit.orbit-two{transform:scale(.6) rotate(-27deg)}.note-top{top:35px;right:6%}.note-bottom{bottom:32px;left:6%}.tutorial-downloads{align-items:flex-start;flex-direction:column;gap:14px}}
