:root{--ink:#151725;--muted:#62677a;--accent:#5b5ce2;--soft:#f5f6fc;--line:#e5e7f0;--code:#181a27}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#fff}a{color:inherit;text-decoration:none}.container{width:min(1180px,calc(100% - 48px));margin:0 auto}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem;top:1rem;z-index:10;background:#fff;padding:.7rem;border:2px solid var(--accent)}.header{border-bottom:1px solid var(--line);background:#fffffff0}.header__inner{height:76px;display:flex;align-items:center;gap:3rem}.brand{font-weight:800;font-size:1.28rem;letter-spacing:-.04em;white-space:nowrap}.brand span{color:var(--accent);font-size:1rem}.header__nav{display:flex;gap:1.75rem;margin-left:auto;font-size:.91rem;font-weight:600}.header__nav a:hover,.text-link:hover,.section-heading>a:hover{color:var(--accent)}.header__search{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:8px;padding:.55rem .65rem .55rem .8rem;font-size:.86rem;color:var(--muted)}.header__search>span{font-size:1.35rem;line-height:0}.header__search kbd{padding:.12rem .35rem;border:1px solid #dfe1e9;border-radius:4px;background:#f9f9fb;font:inherit;font-size:.7rem}.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:4.5rem;align-items:center;min-height:590px;padding:5.5rem 0}.eyebrow{margin:0 0 1rem;color:var(--accent);text-transform:uppercase;letter-spacing:.09em;font-size:.7rem;font-weight:800}.hero .eyebrow{display:flex;align-items:center;gap:.5rem}.hero .eyebrow span{width:7px;height:7px;border-radius:50%;background:#f0a242}.hero h1{font-size:clamp(3rem,6vw,5.25rem);letter-spacing:-.07em;line-height:.98;margin:0}.hero h1 em{font-style:normal;color:var(--accent)}.hero__lead{font-size:1.12rem;line-height:1.7;max-width:35rem;color:var(--muted);margin:1.8rem 0 2rem}.hero__actions{display:flex;flex-wrap:wrap;gap:.8rem}.button{padding:.85rem 1.2rem;border-radius:8px;font-size:.92rem;font-weight:700;transition:transform .15s,background .15s}.button:hover{transform:translateY(-2px)}.button--primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px #5b5ce23b}.button--primary span{margin-left:.9rem}.button--quiet{background:#f0f1f7}.hero__note{font-size:.78rem;color:#898da0;margin-top:1.25rem}.code-window{overflow:hidden;border-radius:14px;background:var(--code);box-shadow:0 30px 65px #1b1e3526;color:#ebecf7}.code-window__bar{height:44px;padding:0 16px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #2a2d3e}.code-window__bar span{width:9px;height:9px;border-radius:50%;background:#ff665d}.code-window__bar span:nth-child(2){background:#f5bd4b}.code-window__bar span:nth-child(3){background:#4dca76}.code-window__bar p{margin:0 auto;color:#8e94af;font:12px ui-monospace,monospace}.code-window pre{margin:0;padding:1.6rem 1.75rem 1.4rem;overflow:auto;color:#c7cbe1;font:14px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace}.code-window i{color:#fc8a70;font-style:normal}.code-window b{color:#bca8ff;font-weight:400}.code-window strong{color:#b6d98f;font-weight:400}.code-window__result{margin:0 1.35rem 1.35rem;padding:1.15rem 1.25rem;border-radius:8px;background:#fff;color:#1e2030}.code-window__result p{margin:0 0:.85rem;color:#9297a8;text-transform:uppercase;font-size:.62rem;letter-spacing:.08em;font-weight:700}.code-window__result h2{margin:0 0:.3rem;font-size:1.35rem;letter-spacing:-.04em}.code-window__result span{display:block;color:#636879;font-size:.78rem}.code-window__result button{margin-top:.9rem;border:0;border-radius:4px;background:var(--accent);color:#fff;padding:.5rem .75rem;font:600 .7rem inherit}.directions-section{padding:5.75rem 0;background:var(--soft)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:2rem}.section-heading h2,.path-section h2{font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.06em;line-height:1.05;margin:0}.section-heading>a{font-size:.86rem;font-weight:700;color:var(--muted)}.section-heading>a span,.text-link span{color:var(--accent);font-size:1.1rem;margin-left:.4rem}.directions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.direction-card{position:relative;min-height:190px;padding:1.3rem;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;transition:transform .2s,box-shadow .2s}.direction-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px #20233d12}.direction-card__mark{display:grid;place-items:center;width:42px;height:42px;border-radius:9px;background:#f5e4d3;color:#e26722;font-size:.77rem;font-weight:800}.direction-card--blue .direction-card__mark{background:#d9eafb;color:#1d70b8}.direction-card--yellow .direction-card__mark{background:#fbf2c9;color:#897318}.direction-card--cyan .direction-card__mark{background:#d7f0f7;color:#1c849d}.direction-card--green .direction-card__mark{background:#dcefe5;color:#24825b}.direction-card--violet .direction-card__mark{background:#e9def8;color:#7850b2}.direction-card h3{margin:2rem 0 .35rem;font-size:1.15rem;letter-spacing:-.035em}.direction-card p{margin:0;color:var(--muted);font-size:.84rem}.direction-card__arrow{position:absolute;right:1.3rem;bottom:1.15rem;color:#989dad}.path-section{display:grid;grid-template-columns:.7fr 1.3fr;gap:6rem;padding:6rem 0}.path-section__intro>p:not(.eyebrow){color:var(--muted);line-height:1.65;max-width:24rem}.text-link{display:inline-block;margin-top:1rem;font-size:.88rem;font-weight:700}.learning-path{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}.learning-path li{display:grid;grid-template-columns:3rem 1fr 1.2rem;gap:1rem;align-items:center;padding:1.2rem 0;border-bottom:1px solid var(--line)}.learning-path li>span{font:700 .76rem ui-monospace,monospace;color:#9296a8}.learning-path h3{margin:0 0:.25rem;font-size:1rem;letter-spacing:-.025em}.learning-path p{margin:0;color:var(--muted);font-size:.78rem}.learning-path b{font-size:1.15rem;color:var(--accent);font-weight:400}.latest-section{padding:5.5rem 0;background:#191b29;color:#f7f7fb}.latest-section .eyebrow{color:#a9aaf4}.latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}.latest-grid article{padding:1.5rem;border:1px solid #303445;border-radius:10px;background:#202333}.tag{display:inline-block;margin:0;border-radius:3px;padding:.28rem .45rem;background:#453029;color:#ffb496;font-size:.62rem;font-weight:800}.tag--css{background:#26394c;color:#9ed2ff}.tag--js{background:#454221;color:#f5e97d}.latest-grid h3{font-size:1.18rem;line-height:1.25;letter-spacing:-.035em;margin:1.35rem 0 .7rem}.latest-grid h3 code{font-size:.88em;color:#e5e2a6}.latest-grid article>p:not(.tag){margin:0;color:#b4b7c6;font-size:.85rem;line-height:1.6}.latest-grid a{display:inline-block;margin-top:1.3rem;color:#c4c5ff;font-size:.8rem;font-weight:700}.latest-grid a span{margin-left:.4rem}.footer{padding:2.4rem 0;border-top:1px solid var(--line)}.footer__inner{display:flex;align-items:center;gap:2rem}.footer p,.footer small{margin:0;color:var(--muted);font-size:.76rem}.footer small{margin-left:auto}@media(max-width:800px){.container{width:min(100% - 32px,1180px)}.header__inner{height:64px;gap:1rem}.header__nav{display:none}.header__search{margin-left:auto}.header__search kbd{display:none}.hero{grid-template-columns:1fr;gap:2.8rem;min-height:0;padding:4rem 0}.hero h1{font-size:3.3rem}.directions-section,.latest-section{padding:4rem 0}.directions-grid{grid-template-columns:repeat(2,1fr)}.path-section{grid-template-columns:1fr;gap:2rem;padding:4rem 0}.latest-grid{grid-template-columns:1fr}.footer__inner{flex-wrap:wrap;gap:.8rem}.footer small{margin-left:0;width:100%}}@media(max-width:440px){.header__search{font-size:0;padding:.45rem .6rem}.header__search>span{font-size:1.3rem}.hero h1{font-size:2.8rem}.directions-grid{grid-template-columns:1fr}.direction-card{min-height:150px}.section-heading{align-items:start;gap:1rem;flex-direction:column}.code-window pre{font-size:12px;padding:1.2rem}.code-window__result{margin:.8rem}.hero__actions{display:grid}.button{text-align:center}.footer p{width:100%}}