.ex{--ex-green:#2f8f5b;--ex-green-ink:#fffbf0;--ex-forest:#185537;--ex-forest-ink:#b4dec3;--ex-mint:#b4dec3;--ex-mint-ink:#123f29;--ex-gold:#f5c655;--ex-gold-ink:#523a09;--ex-sand:#fae3b7;--ex-sand-ink:#7c580d;--ex-red:#d4553b;--ex-red-ink:#fffbf0;--ex-blush:#f7c0b0;--ex-blush-ink:#7c2414;--ex-night:#18251f;--ex-night-ink:#f5c655;--ex-cream:#fffbf0;--ex-cream-ink:#1e2a24}main:has(.pg-hero){--ex-green:#2f8f5b;--ex-green-ink:#fffbf0;--ex-forest:#185537;--ex-forest-ink:#b4dec3;--ex-mint:#b4dec3;--ex-mint-ink:#123f29;--ex-gold:#f5c655;--ex-gold-ink:#523a09;--ex-sand:#fae3b7;--ex-sand-ink:#7c580d;--ex-red:#d4553b;--ex-red-ink:#fffbf0;--ex-blush:#f7c0b0;--ex-blush-ink:#7c2414;--ex-night:#18251f;--ex-night-ink:#f5c655;--ex-cream:#fffbf0;--ex-cream-ink:#1e2a24}.ex{--ex-gap:10px;--ex-row:150px;--ex-step:calc(4px + 6px * var(--ss-motion-energy,1));padding-inline:var(--ss-space-page-gutter);padding-block:0 var(--ss-space-section);margin-inline:calc(50% - 50vw);overflow-x:clip}.ex-hero{align-items:center;gap:var(--ss-space-gap-loose);min-height:520px;margin-block:var(--ss-space-gap) var(--ss-space-section);border:var(--ss-outline-component) solid var(--ss-color-border-strong);border-radius:var(--ss-radius-card);background:linear-gradient(var(--ss-color-border-subtle) 1px, transparent 1px) 0 0 / 80px 80px, linear-gradient(90deg, var(--ss-color-border-subtle) 1px, transparent 1px) 0 0 / 80px 80px, var(--ss-color-bg-surface);grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding:clamp(24px,5vw,64px);display:grid;position:relative;overflow:hidden}.ex-hero__copy{z-index:1;gap:var(--ss-space-gap-loose);max-width:680px;display:grid;position:relative}.ex-kicker{font:var(--ss-type-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ss-color-text-brand);margin:0}.ex-hero__title{letter-spacing:-.02em;text-wrap:balance;margin:0;font-family:Rubik,system-ui,sans-serif;font-size:clamp(40px,6.5vw,84px);font-weight:700;line-height:.98}.ex-hero__lead{font:var(--ss-type-body);color:var(--ss-color-text-muted);margin:0}.ex-hero__hubert{z-index:1;place-items:center;display:grid;position:relative}.ex-hero__block{border-radius:var(--ss-radius-card);animation:ex-sidestep-in var(--ss-motion-enter-spring-duration) var(--ss-motion-enter-spring) both;position:absolute}.ex-hero__block--gold{background:var(--ex-gold);width:160px;height:160px;top:-40px;right:6%}.ex-hero__block--red{background:var(--ex-red);width:120px;height:240px;animation-delay:calc(var(--ss-motion-sequence-stagger) * 2);bottom:60px;right:-40px}.ex-hero__block--green{background:var(--ex-green);width:240px;height:80px;animation-delay:calc(var(--ss-motion-sequence-stagger) * 4);bottom:-30px;left:40%}@keyframes ex-sidestep-in{0%{opacity:0;transform:translateX(calc(var(--ss-motion-enter-distance) * -2))}to{opacity:1;transform:none}}.ex-section{gap:var(--ss-space-gap-loose);margin-block:var(--ss-space-section);display:grid}.ex-section__title{letter-spacing:-.01em;margin:0;font-family:Rubik,system-ui,sans-serif;font-size:clamp(32px,4vw,52px);font-weight:700}.ex-section__lead{color:var(--ss-color-text-muted);margin:0}.ex-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:var(--ex-row);grid-auto-flow:dense;gap:var(--ex-gap);display:grid}@media (max-width:900px){.ex-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:560px){.ex-grid{--ex-row:140px;grid-template-columns:repeat(2,minmax(0,1fr))}.ex-hero{grid-template-columns:1fr}}.ex-tile{--bg:var(--ex-green);--ink:var(--ex-green-ink);grid-column:span min(var(--w), 6);grid-row:span var(--h);border-radius:var(--ss-radius-card);outline:var(--ss-outline-component) dashed color-mix(in srgb, var(--ss-color-text-primary) 35%, transparent);outline-offset:-2px;color:var(--ink);transition:outline-color var(--ss-motion-feedback-duration) ease;outline-color:#0000;text-decoration:none;position:relative}@media (max-width:900px){.ex-tile{grid-column:span min(var(--w), 4)}}@media (max-width:560px){.ex-tile{grid-column:span min(var(--w), 2);grid-row:span min(var(--h), 2)}}.ex-tile[data-hue=green]{--bg:var(--ex-green);--ink:var(--ex-green-ink)}.ex-tile[data-hue=forest]{--bg:var(--ex-forest);--ink:var(--ex-forest-ink)}.ex-tile[data-hue=mint]{--bg:var(--ex-mint);--ink:var(--ex-mint-ink)}.ex-tile[data-hue=gold]{--bg:var(--ex-gold);--ink:var(--ex-gold-ink)}.ex-tile[data-hue=sand]{--bg:var(--ex-sand);--ink:var(--ex-sand-ink)}.ex-tile[data-hue=red]{--bg:var(--ex-red);--ink:var(--ex-red-ink)}.ex-tile[data-hue=blush]{--bg:var(--ex-blush);--ink:var(--ex-blush-ink)}.ex-tile[data-hue=night]{--bg:var(--ex-night);--ink:var(--ex-night-ink)}.ex-tile[data-hue=cream]{--bg:var(--ex-cream);--ink:var(--ex-cream-ink)}.ex-tile[data-hue=cream] .ex-tile__face{box-shadow:inset 0 0 0 var(--ss-outline-component) var(--ss-color-border-strong)}.ex-tile__face{border-radius:inherit;background:var(--bg);transition:transform var(--ss-motion-feedback-spring-duration,.2s) var(--ss-motion-feedback-spring,ease-out);grid-template-rows:auto auto 1fr;padding:18px 20px;display:grid;position:absolute;inset:0;overflow:hidden}.ex-tile[data-active]{outline-color:color-mix(in srgb, var(--ss-color-text-primary) 35%, transparent)}.ex-tile[data-active] .ex-tile__face{transform:translateX(var(--ex-step)) translateY(calc(var(--ex-step) * -.5))}.ex-tile:focus-visible{outline:var(--ss-outline-focus) solid var(--ss-color-focus-ring);outline-offset:var(--ss-outline-focus-offset)}.ex-tile__label{font-family:Rubik,system-ui,sans-serif;font-size:clamp(20px,2vw,28px);font-weight:700;line-height:1.05}.ex-tile__note{font:var(--ss-type-body-small);opacity:.85;margin-top:4px}.ex-tile__preview{pointer-events:none;justify-content:flex-end;align-items:flex-end;min-height:0;padding-top:8px;display:flex}.ex-tile__preview>*{max-width:100%}.ex-stack{gap:8px;width:min(100%,320px);display:grid}.ex-row{align-items:center;gap:var(--ss-space-gap);flex-wrap:wrap;display:flex}.ex-ghost{font:var(--ss-type-title);opacity:.5}.ex-code{font:var(--ss-type-code);font-size:26px}.ex-type{transform-origin:100% 100%;transition:transform var(--ss-motion-celebration-spring-duration) var(--ss-motion-celebration-spring);font-family:Rubik,system-ui,sans-serif;font-size:92px;font-weight:700;line-height:.8}.ex-tile[data-active] .ex-type{transform:scale(var(--ss-motion-celebration-scale)) rotate(calc(-4deg * var(--ss-motion-energy,1)))}.ex-stairs{align-items:flex-end;gap:6px;height:100%;display:flex}.ex-stairs span{width:28px;height:calc(20px + var(--i) * 14px);transition:transform var(--ss-motion-enter-spring-duration) var(--ss-motion-enter-spring) calc(var(--i) * var(--ss-motion-sequence-stagger));border-radius:6px}.ex-tile[data-active] .ex-stairs span{transform:translateY(calc(var(--i) * -10px * var(--ss-motion-energy,1) - 6px))}.ex-curve{width:70%;max-width:240px;overflow:visible}.ex-curve path{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round}.ex-curve__dot{fill:currentColor;offset-path:path("M8 72 C 50 72, 60 8, 112 8");offset-distance:0%;transition:offset-distance calc(var(--ss-motion-celebration-duration) * 2) cubic-bezier(.4, 0, .2, 1)}.ex-tile[data-active] .ex-curve__dot{offset-distance:100%}.ex-space{justify-items:end;gap:4px;display:grid}.ex-space span{height:8px;width:calc(var(--s) * 1px);transition:width var(--ss-motion-state-change-spring-duration) var(--ss-motion-state-change-spring) calc(var(--i) * var(--ss-motion-sequence-stagger));background:currentColor;border-radius:4px;display:block}.ex-tile[data-active] .ex-space span{width:calc(var(--s) * 3px)}.ex-shape{width:72px;height:72px;transition:border-radius var(--ss-motion-state-change-spring-duration) var(--ss-motion-state-change-spring), width var(--ss-motion-state-change-spring-duration) var(--ss-motion-state-change-spring);background:currentColor;border-radius:4px}.ex-tile[data-active] .ex-shape{border-radius:36px;width:120px}.ex-toast-room{width:100%;height:100%;position:relative}.ex-toast-room>*{transform-origin:100% 100%;position:absolute!important;inset:auto 0 0 auto!important}.ex-modal{width:100%;height:100%;transition:background var(--ss-motion-enter-duration) ease;background:0 0;border-radius:12px;place-items:center;display:grid;position:relative}.ex-tile[data-active] .ex-modal{background:#00000040}.ex-modal__box{border:var(--ss-outline-component) solid var(--ss-color-border-strong);border-radius:var(--ss-radius-control);background:var(--ss-color-bg-raised);color:var(--ss-color-text-primary);font:var(--ss-type-body-small);opacity:0;transform:translateY(var(--ss-motion-enter-distance)) scale(var(--ss-motion-enter-scale));transition:opacity var(--ss-motion-enter-duration) ease, transform var(--ss-motion-enter-spring-duration) var(--ss-motion-enter-spring);gap:2px;padding:12px 16px;display:grid}.ex-tile[data-active] .ex-modal__box{opacity:1;transform:none}.ex-tooltip{justify-items:end;gap:6px;display:grid}.ex-tooltip__dot{border:var(--ss-outline-component) solid currentColor;border-radius:50%;place-items:center;width:40px;height:40px;font-weight:700;display:grid}.ex-tooltip__bubble{background:var(--ss-color-inverse-bg);color:var(--ss-color-inverse-text);font:var(--ss-type-caption);opacity:0;transition:opacity var(--ss-motion-enter-duration) ease, transform var(--ss-motion-enter-spring-duration) var(--ss-motion-enter-spring);border-radius:8px;padding:6px 10px;transform:translateY(6px)}.ex-tile[data-active] .ex-tooltip__bubble{opacity:1;transform:none}.ex-hop{width:100%;height:100%;position:relative}.ex-hop span{background:currentColor;border-radius:50%;width:44px;height:44px;position:absolute;bottom:0;left:10%}.ex-tile[data-active] .ex-hop span{animation:ex-hop calc(var(--ss-motion-celebration-duration) * 2.4) var(--ss-motion-celebration-easing) infinite}@keyframes ex-hop{0%{transform:none}35%{transform:translateX(120%) translateY(calc(var(--ss-motion-celebration-distance) * -1.4)) scale(var(--ss-motion-celebration-scale))}70%{transform:translate(240%)}to{transform:translate(240%)}}.ex-cta{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.ex-cta__tile{border-radius:var(--ss-radius-card);min-height:180px;transition:transform var(--ss-motion-feedback-spring-duration,.2s) var(--ss-motion-feedback-spring,ease-out);align-items:flex-end;padding:24px;font-family:Rubik,system-ui,sans-serif;font-size:clamp(26px,3vw,40px);font-weight:700;text-decoration:none;display:flex}.ex-cta__tile[data-hue=gold]{background:var(--ex-gold);color:var(--ex-gold-ink)}.ex-cta__tile[data-hue=forest]{background:var(--ex-forest);color:var(--ex-forest-ink)}.ex-cta__tile:hover{transform:translateX(var(--ex-step))}.ex-cta__tile:focus-visible{outline:var(--ss-outline-focus) solid var(--ss-color-focus-ring);outline-offset:var(--ss-outline-focus-offset)}html:has(.ex){overflow-x:clip}.ex>*{max-width:1400px;margin-inline:auto}.ex>.ex-hero{margin-inline:auto}.ex-cta__tile[data-hue=red]{background:var(--ex-red);color:var(--ex-red-ink)}.ex-split{align-items:center;gap:var(--ss-space-gap-loose) clamp(24px, 5vw, 64px);grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.ex-split__words{gap:var(--ss-space-gap);align-content:start;display:grid}@media (max-width:820px){.ex-split{grid-template-columns:minmax(0,1fr)}}.ex-lesson{justify-self:end;width:100%;max-width:620px}.ex-tools{gap:var(--ex-gap);display:grid}.ex-tool{--bg:var(--ex-green);--ink:var(--ex-green-ink);border-radius:var(--ss-radius-card);background:var(--bg);color:var(--ink);transition:transform var(--ss-motion-feedback-spring-duration,.2s) var(--ss-motion-feedback-spring,ease-out);align-items:center;gap:18px;padding:18px 22px;text-decoration:none;display:flex}.ex-tool[data-hue=forest]{--bg:var(--ex-forest);--ink:var(--ex-forest-ink)}.ex-tool[data-hue=gold]{--bg:var(--ex-gold);--ink:var(--ex-gold-ink)}.ex-tool[data-hue=red]{--bg:var(--ex-red);--ink:var(--ex-red-ink)}.ex-tool:hover{transform:translateX(var(--ex-step))}.ex-tool:focus-visible{outline:var(--ss-outline-focus) solid var(--ss-color-focus-ring);outline-offset:var(--ss-outline-focus-offset)}.ex-tool__logo{fill:currentColor;flex:none;width:40px;height:40px}.ex-tool__text{gap:2px;display:grid}.ex-tool__text strong{font-family:Rubik,system-ui,sans-serif;font-size:clamp(20px,2vw,24px)}.ex-tool__text span{font:var(--ss-type-body-small)}.ex-split,.ex>.ym{margin-block:calc(var(--ss-space-section) * 2.25)}.ex-custom{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.ex-custom .ex-split__words{order:2}@media (max-width:820px){.ex-custom{grid-template-columns:minmax(0,1fr)}.ex-custom .ex-split__words{order:0}}.ex-reveal{opacity:0;transform:translateX(calc(var(--ex-from,-1) * (var(--ss-motion-enter-distance) * 2 + 8px)));transition:opacity var(--ss-motion-enter-duration) ease, transform var(--ss-motion-enter-spring-duration) var(--ss-motion-enter-spring);transition-delay:var(--ex-delay,0s)}.ex-reveal[data-inview]{opacity:1;transform:none}.ex-reveal--right{--ex-from:1;--ex-delay:calc(var(--ss-motion-sequence-stagger) * 3)}@media (scripting:none){.ex-reveal{opacity:1;transform:none}}.ex-tool__logo{transition:transform var(--ss-motion-celebration-spring-duration,.3s) var(--ss-motion-celebration-spring,ease-out)}.ex-tool:hover .ex-tool__logo,.ex-tool:focus-visible .ex-tool__logo{transform:rotate(calc(-14deg * var(--ss-motion-energy,1))) scale(var(--ss-motion-celebration-scale,1.2))}@media (max-width:560px){.ex-hero{min-height:0;padding:32px 20px 24px}.ex-hero__block--gold{width:72px;height:72px;top:-20px;right:-20px}.ex-hero__block--red{width:56px;height:120px;bottom:30%;right:-24px}.ex-hero__block--green{width:140px;height:48px;bottom:-24px;left:30%}.ex-kicker{font-size:12px}}.ex-split>*,.ex-lesson,.ex-lesson>*{min-width:0;max-width:100%}main:has(.pg-hero){max-width:1080px}main:has(.pg-hero) h2{margin:var(--ss-space-section) 0 var(--ss-space-gap);letter-spacing:-.01em;font-family:Rubik,system-ui,sans-serif;font-size:clamp(26px,3vw,36px);font-weight:700}.pg-hero{margin-block:var(--ss-space-gap) var(--ss-space-section);border:var(--ss-outline-component) solid var(--ss-color-border-strong);border-radius:var(--ss-radius-card);background:linear-gradient(var(--ss-color-border-subtle) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(90deg, var(--ss-color-border-subtle) 1px, transparent 1px) 0 0 / 64px 64px, var(--ss-color-bg-surface);padding:clamp(28px,5vw,56px);position:relative;overflow:hidden}.pg-hero__copy{z-index:1;gap:var(--ss-space-gap-loose);max-width:720px;display:grid;position:relative}.pg-hero__copy .ex-kicker{margin:0}.pg-hero__title{letter-spacing:-.02em;text-wrap:balance;margin:0;font-family:Rubik,system-ui,sans-serif;font-size:clamp(36px,5.5vw,68px);font-weight:700;line-height:1}.pg-hero__lead p{color:var(--ss-color-text-muted);margin:0;font-size:18px}.pg-hero__block{border-radius:var(--ss-radius-card);animation:ex-sidestep-in var(--ss-motion-enter-spring-duration) var(--ss-motion-enter-spring) both;position:absolute}.pg-hero__block--a{width:140px;height:140px;top:-44px;right:5%}.pg-hero__block--b{width:100px;height:180px;animation-delay:calc(var(--ss-motion-sequence-stagger) * 2);bottom:-40px;right:-36px}.pg-hero__block[data-hue=gold]{background:var(--ex-gold,#f5c655)}.pg-hero__block[data-hue=red]{background:var(--ex-red,#d4553b)}.pg-hero__block[data-hue=green]{background:var(--ex-green,#2f8f5b)}.pg-hero__block[data-hue=mint]{background:var(--ex-mint,#b4dec3)}.pg-hero__block[data-hue=blush]{background:var(--ex-blush,#f7c0b0)}@media (max-width:700px){.pg-hero__copy{padding-right:24px}.pg-hero__block--a{width:64px;height:64px;top:-16px;right:-16px}.pg-hero__block--b{width:48px;height:96px;bottom:-24px;right:-20px}}main:has(.pg-hero) .ex-tile{--ex-step:calc(4px + 6px * var(--ss-motion-energy,1))}main:has(.pg-hero) .ex-grid{--ex-row:132px;--ex-gap:10px}main:has(.pg-hero) .ex-tile__note{opacity:1;max-width:46ch}.pg-section__head{margin-bottom:var(--ss-space-gap-loose);flex-wrap:wrap;align-items:baseline;gap:4px 16px;display:flex}.pg-section__head h2{margin:0!important}.pg-section__head p{margin:0}.pg-section{margin-block:var(--ss-space-section)}.pg-back{margin:0}.pg-back a{min-height:var(--ss-space-target-min);color:var(--ss-color-text-brand);font:var(--ss-type-label);align-items:center;gap:6px;text-decoration:none;display:inline-flex}.pg-back a:before{content:"←";transition:transform var(--ss-motion-feedback-spring-duration,.2s) var(--ss-motion-feedback-spring,ease)}.pg-back a:hover:before{transform:translateX(calc(-4px * var(--ss-motion-energy,1)))}.pg-stage{border:var(--ss-outline-component) solid var(--ss-color-border-strong);border-radius:var(--ss-radius-card);background:var(--ss-color-bg-surface);overflow:hidden}.pg-stage__label{background:var(--ex-forest);color:var(--ex-mint);flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:12px 20px;display:flex}.pg-stage__label strong{font-family:Rubik,system-ui,sans-serif;font-size:18px}.pg-stage__label span{font:var(--ss-type-body-small);opacity:.9}.pg-stage>.panel{border:0;border-radius:0;align-content:center;min-height:220px;padding:clamp(20px,4vw,40px)}.pg-next{gap:var(--ex-gap,10px);margin-top:var(--ss-space-section);grid-template-columns:1fr 1fr;display:grid}.pg-next a{border-radius:var(--ss-radius-card);background:var(--ex-gold);color:#523a09;transition:transform var(--ss-motion-feedback-spring-duration,.2s) var(--ss-motion-feedback-spring,ease);gap:2px;padding:20px;text-decoration:none;display:grid}.pg-next a:last-child{text-align:right;background:var(--ex-green);color:#fffbf0}.pg-next a:hover{transform:translateX(calc(var(--ex-step,8px) * -1))}.pg-next a:last-child:hover{transform:translateX(var(--ex-step,8px))}.pg-next span{font:var(--ss-type-caption);opacity:.85}.pg-next strong{font-family:Rubik,system-ui,sans-serif;font-size:24px}main:has(.pg-hero) .swatch i{border-radius:12px;height:72px}