@font-face{font-family:"Instrument Sans";src:url('/assets/instrument-sans-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/inter-variable.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
/* latin-ext */

/* latin */

/* latin-ext */

/* latin */




:root{
/* Core */
--wh-graphite:#2F363B;--wh-cyan:#15C8E1;--wh-blue:#609FE5;
--wh-cyan-deep:#10A8BE;--wh-cyan-press:#0D8FA2;
/* Neutrals */
--wh-neutral-light:#F6F8F8;--wh-deep-dark:#172124;
/* Secondary — data & semantic use only */
--wh-green:#20D68A;--wh-cyan-alt:#09E9DB;--wh-purple:#736CD7;--wh-orange:#E7A13D;--wh-yellow:#EBE63B;--wh-red:#E8522D;
/* Graphite-tinted neutral ramp */
--wh-gray-0:#FFFFFF;--wh-gray-50:#F6F8F8;--wh-gray-100:#ECEFF0;--wh-gray-200:#DCE1E2;--wh-gray-300:#BEC5C8;--wh-gray-400:#909A9E;--wh-gray-500:#6B757A;--wh-gray-600:#4C5559;--wh-gray-700:#2F363B;--wh-gray-800:#222A2E;--wh-gray-900:#172124;
/* Surfaces */
--surface-page:var(--wh-neutral-light);--surface-card:#FFFFFF;--surface-raised:var(--wh-gray-100);--surface-dark:var(--wh-deep-dark);--surface-graphite:var(--wh-graphite);
/* Text */
--text-heading:var(--wh-graphite);--text-body:var(--wh-gray-600);--text-muted:var(--wh-gray-500);--text-inverse:#FFFFFF;--text-inverse-muted:var(--wh-gray-300);--text-link:var(--wh-cyan-deep);
/* Borders */
--border-default:var(--wh-gray-200);--border-strong:var(--wh-gray-300);--border-focus:var(--wh-cyan);--border-dark:rgba(255,255,255,.14);
/* Actions — primary is cyan */
--action-primary:var(--wh-cyan);--action-primary-hover:var(--wh-cyan-deep);--action-primary-active:var(--wh-cyan-press);--action-primary-fg:var(--wh-deep-dark);
/* Semantic — risk scale */
--risk-low:var(--wh-green);--risk-moderate:var(--wh-orange);--risk-attention:var(--wh-yellow);--risk-high:var(--wh-red);
--status-success:#12A86C;--status-success-bg:#E4F8EF;--status-warning:#B9761F;--status-warning-bg:#FBF0E0;--status-danger:#C93E1C;--status-danger-bg:#FBEAE5;--status-info:var(--wh-cyan-deep);--status-info-bg:#E2F6F9;
/* Data-viz categories — analytical, per brand guidance */
--data-1:var(--wh-blue);--data-2:var(--wh-purple);--data-3:var(--wh-cyan);--data-4:var(--wh-green);--data-5:var(--wh-orange);
}
:root{
--font-display:"Instrument Sans","Inter",-apple-system,sans-serif;
--font-sans:"Inter",-apple-system,"Segoe UI",sans-serif;
/* Headings + large metrics — Instrument Sans */
--text-display:600 56px/1.08 var(--font-display);--text-h1:600 40px/1.15 var(--font-display);--text-h2:600 30px/1.22 var(--font-display);--text-h3:600 21px/1.3 var(--font-display);--text-metric:600 44px/1 var(--font-display);
/* Body + UI — Inter */
--text-body-lg:400 17px/1.6 var(--font-sans);--text-body-md:400 15px/1.6 var(--font-sans);--text-body-sm:400 13px/1.5 var(--font-sans);
--text-label:500 13px/1.3 var(--font-sans);--text-caption:400 12px/1.4 var(--font-sans);--text-overline:600 11px/1.3 var(--font-sans);
--tracking-tight:-0.02em;--tracking-normal:0;--tracking-wide:0.1em;
}
body{font-family:var(--font-sans);color:var(--text-body)}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading)}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--wh-cyan-press);text-decoration:underline}
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
--size-control-sm:32px;--size-control-md:40px;--size-control-lg:48px;
/* Layout */
--layout-max:1280px;--layout-max-text:1200px;--layout-gutter:32px;--section-y:96px;
}
:root{
--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-pill:999px;
/* Minimal shadows — no glow, no glassmorphism */
--shadow-sm:0 1px 2px rgba(47,54,59,.06);--shadow-md:0 2px 8px rgba(47,54,59,.08);--shadow-lg:0 8px 28px rgba(47,54,59,.14);
--ease-standard:cubic-bezier(.4,0,.2,1);/* @kind other */
--dur-fast:120ms;/* @kind other */
--dur-med:220ms;/* @kind other */
--dur-slow:420ms;/* @kind other */
--focus-ring:0 0 0 3px rgba(21,200,225,.35);
}


    body{margin:0;background:#F6F8F8;color:#2F363B;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
    a{color:#10A8BE;text-decoration:none}a:hover{color:#0D8FA2}
  
.ref-1{min-height:100vh;background:#F6F8F8;overflow:clip}
.ref-2{position:sticky;top:0;z-index:50;background:rgba(246,248,248,.3);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(220,225,226,.5)}
.ref-3{max-width:1280px;margin:0 auto;padding:16px clamp(16px,4vw,32px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ref-4{display:flex;align-items:center;gap:12px;color:#181314}
.ref-5{height:30px;width:auto;display:block}
.ref-6{font:700 30px/1 Inter,'Helvetica Neue',Arial,sans-serif;letter-spacing:-0.045em;color:#181314}
.ref-7{color:#FF0F19}
.ref-8{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ref-9{padding:10px 16px;border-radius:8px;color:#2F363B;font:500 15px/1 Inter,sans-serif}
.ref-10{max-width:1280px;margin:0 auto;padding:48px clamp(16px,4vw,32px) 96px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:48px;align-items:center}
.ref-11{display:flex;flex-direction:column;gap:28px;container-type:inline-size;min-width:0}
.ref-12{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:999px;background:#fff;border:1px solid #DCE1E2;font:600 12px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#2F363B}
.ref-13{width:20px;height:20px;border-radius:999px;background:#15C8E1;display:grid;place-items:center}
.ref-14{margin:0;font:600 clamp(28px,14cqi,76px)/1.02 'Instrument Sans',sans-serif;letter-spacing:-0.03em;color:#172124;text-wrap:balance}
.ref-15{white-space:nowrap;color:#10A8BE;text-decoration:underline;text-decoration-color:rgba(21,200,225,.25);text-decoration-thickness:10px;text-underline-offset:2px;text-decoration-skip-ink:none}
.ref-16{margin:0;max-width:520px;font:400 19px/1.6 Inter,sans-serif;color:#4C5559;text-wrap:pretty}
.ref-17{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ref-18{font:400 14px/1.4 Inter,sans-serif;color:#6B757A}
.ref-19{position:relative;border-radius:24px;background:#fff;border:1px solid #DCE1E2;padding:clamp(20px,4vw,32px);display:flex;flex-direction:column;gap:28px;overflow:hidden;background-image:linear-gradient(rgba(24,19,20,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(24,19,20,.05) 1px,transparent 1px);background-size:32px 32px}
.ref-20{display:flex;justify-content:space-between;align-items:center;font:600 11px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6B757A}
.ref-21{flex:1;display:grid;place-items:center}
.ref-22{display:flex;align-items:flex-end;gap:clamp(14px,3vw,22px);height:170px;transform-origin:50% 100%}
.ref-23{width:26px;height:26px;border-radius:999px;background:#8D8F93;transform-origin:50% 100%;transition:transform 420ms cubic-bezier(.4,0,.2,1),opacity 420ms cubic-bezier(.4,0,.2,1)}
.ref-24{width:58px;height:70px;border-radius:999px;border:13px solid #181314;box-sizing:border-box;transform-origin:50% 100%;transition:transform 420ms cubic-bezier(.4,0,.2,1),opacity 420ms cubic-bezier(.4,0,.2,1)}
.ref-25{width:124px;height:150px;border-radius:999px;border:24px solid #FF0F19;box-sizing:border-box;transform-origin:50% 100%;transition:transform 420ms cubic-bezier(.4,0,.2,1),opacity 420ms cubic-bezier(.4,0,.2,1)}
.ref-26{margin:0;font:600 26px/1.2 'Instrument Sans',sans-serif;color:#181314;letter-spacing:-0.01em}
.ref-27{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.ref-28{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,32px) 96px;display:flex;flex-direction:column;gap:32px}
.ref-29{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ref-30{display:flex;flex-direction:column;gap:12px}
.ref-31{font:600 12px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#10A8BE}
.ref-32{margin:0;font:600 clamp(36px,4.5vw,52px)/1.05 'Instrument Sans',sans-serif;letter-spacing:-0.02em;color:#172124}
.ref-33{margin:0;font:400 16px/1.5 Inter,sans-serif;color:#6B757A}
.ref-34{border-radius:24px;background:#fff;border:1px solid #DCE1E2;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));overflow:hidden}
.ref-35{padding:clamp(24px,5vw,40px);display:flex;flex-direction:column;gap:20px}
.ref-36{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ref-37{font:600 12px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6B757A}
.ref-38{margin:0;font:600 clamp(32px,3.6vw,44px)/1.08 'Instrument Sans',sans-serif;letter-spacing:-0.02em;color:#172124}
.ref-39{margin:0;max-width:460px;font:400 17px/1.6 Inter,sans-serif;color:#4C5559}
.ref-40{display:flex;flex-direction:column;gap:16px;align-items:flex-start;margin-top:8px}
.ref-41{font:400 13px/1.5 Inter,sans-serif;color:#6B757A}
.ref-42{background:#E2F6F9;display:grid;place-items:center;padding:clamp(24px,5vw,40px);min-height:280px;min-width:0}
.ref-43{width:100%;max-width:none;display:flex;flex-direction:column;gap:16px}
.ref-44{border-radius:16px;background:#172124;padding:20px;display:flex;flex-direction:column;gap:4px;font:500 clamp(12px,3.2vw,14px)/1.6 ui-monospace,Menlo,monospace;min-height:200px;overflow-x:auto}
.ref-45{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ref-46{display:flex;gap:6px}
.ref-47{width:10px;height:10px;border-radius:999px;background:#4C5559}
.ref-48{font:500 12px/1 Inter,sans-serif;color:#909A9E}
.ref-49{margin-top:8px;color:#15C8E1}
.ref-50{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.ref-51{border-radius:16px;background:#fff;border:1px solid #DCE1E2;padding:28px;display:flex;flex-direction:column;gap:16px}
.ref-52{width:52px;height:52px;border-radius:14px;background:#E2F6F9;color:#10A8BE;display:grid;place-items:center;font:600 18px/1 'Instrument Sans',sans-serif}
.ref-53{margin:0;font:600 26px/1.15 'Instrument Sans',sans-serif;letter-spacing:-0.01em;color:#172124}
.ref-54{margin:0;flex:1;font:400 16px/1.55 Inter,sans-serif;color:#4C5559}
.ref-55{padding-top:16px;border-top:1px solid #ECEFF0}
.ref-56{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,32px) 96px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px}
.ref-57{display:flex;flex-direction:column;gap:16px}
.ref-58{margin:0;font:600 clamp(36px,4.5vw,52px)/1.08 'Instrument Sans',sans-serif;letter-spacing:-0.02em;color:#172124;text-wrap:balance}
.ref-59{display:flex;flex-direction:column;gap:20px;padding-top:28px}
.ref-60{margin:0;font:400 18px/1.65 Inter,sans-serif;color:#4C5559;text-wrap:pretty}
.ref-61{align-self:flex-start}
.ref-62{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,32px) 64px}
.ref-63{border-radius:24px;background:#172124;padding:clamp(32px,6vw,56px) clamp(24px,5vw,48px);display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.ref-64{font:600 12px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#15C8E1}
.ref-65{margin:0;font:600 clamp(32px,4vw,48px)/1.05 'Instrument Sans',sans-serif;letter-spacing:-0.02em;color:#fff}
.ref-66{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px;border-radius:12px;background:#15C8E1;color:#172124;font:600 17px/1 Inter,sans-serif}
.ref-67{max-width:1280px;margin:0 auto;padding:24px clamp(16px,4vw,32px) 40px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid #DCE1E2}
.ref-68{display:flex;align-items:center;gap:8px}
.ref-69{height:24px;width:auto;display:block}
.ref-70{font:600 20px/1 'Instrument Sans',sans-serif;letter-spacing:-0.02em;color:#172124}
.ref-71{color:#FF0F19}
.ref-72{font:400 13px/1.4 Inter,sans-serif;color:#6B757A}
.ref-73{font:500 13px/1 Inter,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{line-height:1.6}a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid #10a8be;outline-offset:4px}button{font-family:inherit;cursor:pointer}a.button:hover{text-decoration:none}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 20px;border-radius:8px;font:600 14px/1.3 Inter,sans-serif;transition:background .2s,color .2s;text-align:center}.button-primary{background:#15c8e1;color:#172124}.button-primary:hover{background:#10a8be;color:#fff}.button-secondary{background:white;border:1px solid #dce1e2;color:#2f363b}.button-secondary:hover{background:#eceff0}.button-text{padding-left:0;color:#10a8be}.badge{display:inline-block;border-radius:999px;font:500 11px/1.5 Inter,sans-serif;padding:5px 10px}.badge-info{background:#e2f6f9;color:#08798a}.badge-neutral{background:#eceff0;color:#4c5559}.language-tabs{display:flex;padding:4px;border-radius:10px;background:#ccebf0;gap:4px}.language-tabs button{flex:1;border:0;border-radius:7px;background:transparent;color:#4c5559;font-weight:600;padding:10px 12px;min-height:40px}.language-tabs button[aria-selected="true"]{background:white;color:#172124;box-shadow:0 1px 3px #17212415}#code-content{display:block;font:inherit;color:white;white-space:pre;line-height:1.65;min-height:138px}#code-panel{max-width:100%}.learning-step{display:flex;flex-direction:column;gap:7px;border:1px solid #dce1e2;border-radius:12px;background:white;padding:13px 12px;transition:background .22s,color .22s,border-color .22s;font:600 15px/1 Inter,sans-serif;color:#181314}.step-number{font-size:11px;color:#6b757a}.learning-step[data-step="0"].active{background:#8d8f93;border-color:#8d8f93}.learning-step[data-step="1"].active{background:#181314;border-color:#181314;color:white}.learning-step[data-step="2"].active{background:#ff0f19;border-color:#ff0f19;color:white}.learning-step[data-step="3"].active{background:#15c8e1;border-color:#15c8e1}.learning-step.active .step-number{color:inherit}.logo-shape{opacity:.35;transform:scale(.9)}.logo-shape.active{opacity:1;transform:translateY(-8px) scale(1.04)}.motion-toggle{align-self:flex-end;background:transparent;border:0;border-bottom:1px solid #bec5c8;color:#4c5559;font-size:11px;padding:3px 0}.skip-link{position:absolute;top:-100px;left:16px;z-index:100;background:white;padding:12px}.skip-link:focus{top:8px}.hero-copy h1{font-size:clamp(28px,11.5cqi,70px)!important}.hero-copy h1 span{white-space:nowrap!important}.hero-illustration{min-height:440px}.path-grid>div{min-width:0}.homepage-header nav a:not(.button):hover{background:#eceff0}footer a{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:600px){html{scroll-padding-top:155px}.homepage-header{gap:14px!important}.homepage-header nav{width:100%;justify-content:space-between;gap:0!important}.homepage-header nav>a{padding:10px 12px!important;font-size:13px!important}.hero-grid{padding-top:32px!important;padding-bottom:64px!important;gap:32px!important}.hero-copy>p{font-size:17px!important}.hero-illustration{min-height:420px}.learning-steps{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important}.learning-step{padding:12px 8px;font-size:13px}.badge-neutral{white-space:normal}#about{gap:20px!important}footer{gap:14px!important}section{scroll-margin-top:0}main>section:last-child a{font-size:14px!important;padding:0 14px!important;max-width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.logo-shape{opacity:1;transform:none}}

.illustration-caption{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.illustration-caption .motion-toggle{flex-shrink:0;white-space:nowrap;line-height:1.4;margin-bottom:2px}
@media(max-width:600px){.illustration-caption>p{font-size:clamp(16px,5vw,22px)}.illustration-caption .motion-toggle{font-size:10px}}