.feat-hero{background:var(--canvas-deep);padding-block:calc(var(--space-3xl) + 4rem) var(--space-3xl);text-align:center;position:relative;overflow:hidden}.feat-hero__blob{border-radius:var(--radius-circle);pointer-events:none;filter:blur(80px);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;position:absolute}.feat-hero__blob--1{background:radial-gradient(circle, var(--secondary-trans40) 0%, transparent 65%);width:60vw;max-width:700px;height:60vw;max-height:700px;animation-name:fblob-1;animation-duration:calc(20s / clamp(.001, var(--motion), 1));top:-20%;left:-10%}.feat-hero__blob--2{background:radial-gradient(circle, var(--secondary-trans30) 0%, transparent 65%);width:55vw;max-width:650px;height:55vw;max-height:650px;animation-name:fblob-2;animation-duration:calc(28s / clamp(.001, var(--motion), 1));bottom:-20%;right:-15%}@keyframes fblob-1{0%{transform:translate(0)scale(1)}to{transform:translate(3rem,2rem)scale(1.07)}}@keyframes fblob-2{0%{transform:translate(0)scale(1)}to{transform:translate(-3rem,-2rem)scale(.94)}}.feat-hero__grain{pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");background-size:300px 300px;width:200%;height:200%;position:absolute;inset:-50%}.feat-hero__container{z-index:1;align-items:center;gap:var(--space-m);padding-inline:var(--section-inline);flex-direction:column;display:flex;position:relative}.feat-hero__back{font-size:var(--text-xs);color:var(--canvas-text-dim);transition:color var(--duration-fast) var(--ease-out);margin-bottom:var(--space-m);align-self:flex-start;align-items:center;gap:.4em;text-decoration:none;display:inline-flex}.feat-hero__back:hover{color:var(--white);text-decoration:none}.feat-hero__tag{font-size:var(--text-xs);font-weight:var(--weight-5);color:var(--secondary-light-1);letter-spacing:var(--tracking-wide);text-transform:uppercase;background:var(--secondary-trans10);border:1px solid var(--secondary-trans30);border-radius:var(--radius-pill);align-items:center;gap:.6em;padding:.4em .9em;display:inline-flex}.feat-hero__tag-dot{border-radius:var(--radius-circle);background:var(--secondary);width:6px;height:6px;box-shadow:0 0 6px var(--secondary);display:inline-block}.feat-hero__title{font-size:var(--text-display);font-weight:var(--weight-8);color:var(--white);letter-spacing:-.03em;text-wrap:balance;max-width:18ch;line-height:1.08}.feat-hero__title em{background:linear-gradient(135deg, var(--secondary-light-1), var(--secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:normal}.feat-hero__desc{font-size:var(--text-s);color:var(--canvas-text-dim);max-width:50ch;line-height:var(--leading-l)}.feat-section{padding-block:var(--space-3xl);border-bottom:1px solid var(--secondary-trans20);background:linear-gradient(var(--secondary-trans10) 1px, transparent 1px), linear-gradient(90deg, var(--secondary-trans10) 1px, transparent 1px), linear-gradient(160deg, var(--canvas-mid) 0%, var(--canvas-dark) 100%);background-size:3.5rem 3.5rem,3.5rem 3.5rem,auto}.feat-section--alt{background:linear-gradient(var(--secondary-trans10) 1px, transparent 1px), linear-gradient(90deg, var(--secondary-trans10) 1px, transparent 1px), linear-gradient(340deg, var(--canvas-dark) 0%, var(--canvas-base) 100%);background-size:3.5rem 3.5rem,3.5rem 3.5rem,auto}.feat-section__container{padding-inline:var(--section-inline)}.feat-section__inner{gap:var(--space-3xl);grid-template-columns:1fr 1fr;align-items:center;display:grid}.feat-section__inner--reverse{direction:rtl}.feat-section__inner--reverse>*{direction:ltr}.feat-section__content{gap:var(--space-m);flex-direction:column;display:flex}.feat-section__icon{color:var(--secondary);align-items:center;display:flex}.feat-section__title{font-size:var(--text-xl);font-weight:var(--weight-8);color:var(--white);letter-spacing:-.02em;line-height:1.1}.feat-section__tagline{font-size:var(--text-m);font-weight:var(--weight-5);color:var(--secondary-light-1);line-height:var(--leading-s);font-style:italic}.feat-section__desc{font-size:var(--text-s);color:var(--canvas-text-dim);line-height:var(--leading-l);max-width:56ch}.feat-section__bullets{gap:var(--space-s);margin-top:var(--space-s);flex-direction:column;list-style:none;display:flex}.feat-section__bullet{font-size:var(--text-s);color:var(--canvas-text);line-height:var(--leading-m);align-items:flex-start;gap:.65em;display:flex}.feat-section__bullet-icon{color:var(--secondary);flex-shrink:0;margin-top:.1em}.feat-section__visual{justify-content:center;align-items:center;display:flex;position:relative}.feat-section__glow{background:radial-gradient(ellipse 70% 60% at 50% 50%, var(--secondary-trans20) 0%, transparent 70%);filter:blur(2rem);border-radius:var(--radius-circle);pointer-events:none;position:absolute;inset:-3rem}.feat-section__frame{border-radius:var(--radius-l);width:100%;box-shadow:0 4px 12px var(--black-30), 0 16px 48px var(--black-50), 0 0 0 1px var(--secondary-trans20);position:relative;overflow:hidden}.feat-section__img{border-radius:var(--radius-l);width:100%;height:auto;display:block}.feat-section__visual--placeholder .feat-section__placeholder{z-index:1;justify-content:center;align-items:center;gap:var(--space-m);aspect-ratio:16/10;background:var(--canvas-surface-dim);border-radius:var(--radius-l);border:1px solid var(--canvas-border);width:100%;color:var(--canvas-text-muted);flex-direction:column;display:flex;position:relative}.feat-section__visual--placeholder .feat-section__placeholder span{font-size:var(--text-s);font-weight:var(--weight-6);letter-spacing:var(--tracking-wide);text-transform:uppercase}.feat-cta{padding-block:var(--space-3xl);text-align:center;border-top:1px solid var(--canvas-border-dim);background:linear-gradient(var(--secondary-trans10) 1px, transparent 1px), linear-gradient(90deg, var(--secondary-trans10) 1px, transparent 1px), radial-gradient(ellipse 80% 70% at 50% 50%, var(--secondary-trans30) 0%, transparent 65%), var(--canvas-dark);background-size:3.5rem 3.5rem,3.5rem 3.5rem,auto,auto}.feat-cta__container{padding-inline:var(--section-inline);align-items:center;gap:var(--space-l);flex-direction:column;display:flex}.feat-cta__heading{font-size:var(--text-xxl);font-weight:var(--weight-8);color:var(--white);letter-spacing:-.03em;text-wrap:balance;max-width:18ch;line-height:1.1}.feat-cta__heading em{background:linear-gradient(135deg, var(--secondary-light-1), var(--secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:normal}.feat-cta__btn{font-size:var(--text-m);font-weight:var(--weight-7);color:var(--white);background:var(--secondary);border-radius:var(--radius-3);border:1px solid var(--secondary);transition:background var(--duration-base) var(--ease-out), gap var(--duration-base) var(--ease-out);align-items:center;gap:.5em;padding:.9em 2.2em;text-decoration:none;display:inline-flex}.feat-cta__btn:hover{background:var(--secondary-dark-1);border-color:var(--secondary-dark-1);color:var(--white);gap:.75em;text-decoration:none}.feat-cta__btn:visited{color:var(--white)}@media (width<=860px){.feat-section__inner,.feat-section__inner--reverse{gap:var(--space-xl);direction:ltr;grid-template-columns:1fr}.feat-section__inner--reverse>*{direction:ltr}.feat-hero__back{align-self:center}}@media (width<=480px){.feat-hero__title{font-size:var(--text-xxl)}}.feat-demo{z-index:1;background:var(--canvas-surface-dim);border:1px solid var(--canvas-border);border-radius:var(--radius-l);width:100%;box-shadow:0 4px 16px var(--black-30), 0 24px 64px var(--black-50), 0 0 0 1px var(--secondary-trans10);position:relative;overflow:hidden}.colour-demo{padding:var(--space-l);gap:var(--space-m);flex-direction:column;display:flex}.colour-demo__header{justify-content:space-between;align-items:center;display:flex}.colour-demo__label{font-size:var(--text-xs);font-weight:var(--weight-6);color:var(--canvas-text-dim);letter-spacing:var(--tracking-wide);text-transform:uppercase}.colour-demo__hue-value{font-size:var(--text-xs);font-weight:var(--weight-7);font-family:var(--font-mono);color:var(--secondary-light-1);background:var(--secondary-trans10);border:1px solid var(--secondary-trans30);border-radius:var(--radius-pill);text-align:center;min-width:4ch;padding:.2em .7em}.colour-demo__slider{-webkit-appearance:none;appearance:none;border-radius:var(--radius-pill);cursor:pointer;background:linear-gradient(90deg,oklch(62.4% .155 0),oklch(62.4% .155 60),oklch(62.4% .155 120),oklch(62.4% .155 180),oklch(62.4% .155 240),oklch(62.4% .155 300),oklch(62.4% .155 360));border:none;outline:none;width:100%;height:10px}.colour-demo__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:var(--radius-circle);background:var(--white);border:2px solid var(--canvas-border-mid);width:22px;height:22px;box-shadow:0 2px 8px var(--black-50);cursor:grab;transition:transform var(--duration-fast) var(--ease-out)}.colour-demo__slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}.colour-demo__slider::-moz-range-thumb{border-radius:var(--radius-circle);background:var(--white);border:2px solid var(--canvas-border-mid);width:22px;height:22px;box-shadow:0 2px 8px var(--black-50);cursor:grab}.colour-demo__swatches{gap:var(--space-s);grid-template-columns:repeat(5,1fr);display:grid}.colour-demo__swatch-wrap{flex-direction:column;align-items:center;gap:.4em;display:flex}.colour-demo__swatch{aspect-ratio:1;border-radius:var(--radius-m);background:var(--secondary);width:100%;box-shadow:0 2px 8px var(--black-30);transition:background var(--duration-fast) var(--ease-out)}.colour-demo__swatch-label{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--canvas-text-muted);text-align:center}.colour-demo__code{background:var(--canvas-deep);border:1px solid var(--canvas-border);border-radius:var(--radius-m);overflow:hidden}.colour-demo__code-header{border-bottom:1px solid var(--canvas-border-dim);font-size:var(--text-xs);color:var(--canvas-text-muted);letter-spacing:var(--tracking-wide);text-transform:uppercase;justify-content:space-between;align-items:center;padding:.5em 1em;display:flex}.colour-demo__pre{user-select:none;margin:0;padding:.85em 1em;overflow-x:auto}.colour-demo__pre code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--canvas-text);white-space:pre;line-height:1.7;display:block}.dm-demo{flex-direction:column;gap:0;display:flex;overflow:hidden}.dm-presets{align-items:center;gap:var(--space-s);padding:var(--space-s) var(--space-m);background:var(--canvas-deep);border-bottom:1px solid var(--canvas-border-dim);flex-wrap:wrap;display:flex}.dm-presets__label{font-size:var(--text-xs);font-weight:var(--weight-6);color:var(--canvas-text-muted);letter-spacing:var(--tracking-wide);text-transform:uppercase;white-space:nowrap;flex-shrink:0}.dm-presets__btns{flex-wrap:wrap;gap:.3em;display:flex}.dm-preset{font-size:var(--text-xs);font-weight:var(--weight-6);color:var(--canvas-text-muted);background:var(--canvas-surface);border:1px solid var(--canvas-border);border-radius:var(--radius-m);cursor:pointer;transition:color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);align-items:center;gap:.4em;padding:.35em .7em;display:inline-flex}.dm-preset--active,.dm-preset:hover{color:var(--white);background:var(--canvas-border);border-color:var(--secondary-trans60)}.dm-preset__dot{border-radius:var(--radius-circle);flex-shrink:0;width:8px;height:8px;box-shadow:0 0 4px}.dm-preset[data-palette=forest] .dm-preset__dot{background:var(--secondary);box-shadow:0 0 4px var(--secondary-trans70)}.dm-preset[data-palette=ocean] .dm-preset__dot{background:oklch(62.4% .155 220);box-shadow:0 0 4px oklch(62.4% .155 220/.7)}.dm-preset[data-palette=ember] .dm-preset__dot{background:oklch(62.4% .155 45);box-shadow:0 0 4px oklch(62.4% .155 45/.7)}.dm-preset[data-palette=violet] .dm-preset__dot{background:oklch(62.4% .155 285);box-shadow:0 0 4px oklch(62.4% .155 285/.7)}.dm-demo__bar{justify-content:space-between;align-items:center;gap:var(--space-s);padding:var(--space-s) var(--space-m);background:var(--canvas-dark);border-bottom:1px solid var(--canvas-border);display:flex}.dm-demo__toggle-group{background:var(--canvas-surface);border:1px solid var(--canvas-border);border-radius:var(--radius-pill);gap:0;padding:3px;display:flex}.dm-demo__toggle{font-size:var(--text-xs);font-weight:var(--weight-6);color:var(--canvas-text-muted);border-radius:calc(var(--radius-pill) - 3px);cursor:pointer;transition:color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out);background:0 0;border:none;align-items:center;gap:.4em;padding:.35em .85em;display:inline-flex}.dm-demo__toggle--active{color:var(--white);background:var(--canvas-border)}.dm-demo__attr{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--secondary);background:var(--secondary-trans10);border:1px solid var(--secondary-trans20);border-radius:var(--radius-pill);white-space:nowrap;padding:.2em .6em}.dm-preview{background:var(--background);transition:background .35s var(--ease-out), border-color .35s var(--ease-out)}.dm-nav{align-items:center;gap:var(--space-m);padding:.6em var(--space-m);background:var(--surface);border-bottom:1px solid var(--border-color);transition:background .35s var(--ease-out), border-color .35s var(--ease-out);display:flex}.dm-nav__logo{font-size:var(--text-xs);font-weight:var(--weight-8);color:var(--color);letter-spacing:-.01em;transition:color .35s var(--ease-out);margin-right:auto}.dm-nav__link{font-size:var(--text-xs);color:var(--color-muted);transition:color .35s var(--ease-out)}.dm-nav__cta{font-size:var(--text-xs);font-weight:var(--weight-7);color:var(--white);background:var(--secondary);border-radius:var(--radius-pill);transition:background .35s var(--ease-out);padding:.3em .75em}.dm-body{gap:var(--space-m);padding:var(--space-m);grid-template-columns:1fr auto;align-items:start;display:grid}.dm-card{background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-m);padding:var(--space-m);transition:background .35s var(--ease-out), border-color .35s var(--ease-out);flex-direction:column;gap:.5em;display:flex}.dm-card__tag{font-size:var(--text-xs);font-weight:var(--weight-7);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--secondary);transition:color .35s var(--ease-out)}.dm-card__heading{font-size:var(--text-m);font-weight:var(--weight-8);color:var(--color);letter-spacing:-.02em;transition:color .35s var(--ease-out);margin:0;line-height:1.15}.dm-card__text{font-size:var(--text-xs);color:var(--color-muted);transition:color .35s var(--ease-out);margin:0;line-height:1.55}.dm-card__footer{border-top:1px solid var(--border-color);transition:border-color .35s var(--ease-out);align-items:center;gap:.75em;margin-top:.25em;padding-top:.5em;display:flex}.dm-card__btn{font-size:var(--text-xs);font-weight:var(--weight-7);color:var(--white);background:var(--secondary);border-radius:var(--radius-3);transition:background .35s var(--ease-out);padding:.35em .8em}.dm-card__link{font-size:var(--text-xs);color:var(--secondary);transition:color .35s var(--ease-out)}.dm-tokens{flex-direction:column;gap:.3em;min-width:0;display:flex}.dm-token{background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-s);transition:background .35s var(--ease-out), border-color .35s var(--ease-out);justify-content:space-between;align-items:center;gap:.5em;padding:.28em .5em;display:flex}.dm-token__name{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted);white-space:nowrap;transition:color .35s var(--ease-out)}.dm-token__swatch{border-radius:var(--radius-2);border:1px solid var(--border-color);width:16px;height:16px;transition:background .35s var(--ease-out), border-color .35s var(--ease-out);flex-shrink:0}.dm-token__swatch--bg{background:var(--background)}.dm-token__swatch--surface{background:var(--surface)}.dm-token__swatch--color{background:var(--color)}.dm-token__swatch--muted{background:var(--color-muted)}.dm-token__swatch--border{background:var(--border-color)}.dm-token__swatch--accent{background:var(--secondary)}.dm-code-wrap{background:var(--canvas-deep);border-top:1px solid var(--canvas-border-dim);overflow:hidden}.dm-code-header{border-bottom:1px solid var(--canvas-border-dim);font-size:var(--text-xs);color:var(--canvas-text-muted);letter-spacing:var(--tracking-wide);text-transform:uppercase;align-items:center;padding:.5em 1em;display:flex}.dm-code-pre{user-select:none;max-height:8rem;margin:0;padding:.75em 1em;overflow-x:auto}.dm-code-pre code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--canvas-text-dim);white-space:pre;line-height:1.75;display:block}.cq-demo{padding:var(--space-m) var(--space-m) var(--space-m);gap:var(--space-m);flex-direction:column;display:flex}.cq-demo__header{justify-content:space-between;align-items:center;gap:var(--space-s);display:flex}.cq-demo__label{font-size:var(--text-xs);font-weight:var(--weight-6);color:var(--canvas-text-dim);letter-spacing:var(--tracking-wide);text-transform:uppercase;align-items:center;gap:.5em;display:flex}.cq-demo__label:before{content:"↔";color:var(--secondary)}.cq-demo__note{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-7);color:var(--secondary-light-1);background:var(--secondary-trans10);border:1px solid var(--secondary-trans30);border-radius:var(--radius-pill);text-align:center;min-width:5ch;padding:.2em .7em}.cq-demo__resizable{resize:horizontal;border:1px solid var(--secondary-trans50);border-radius:var(--radius-m);background:var(--canvas-dark);width:100%;min-width:180px;max-width:100%;box-shadow:inset 0 1px 0 var(--white-10);overflow:hidden}.cq-demo__inner{padding:var(--space-m);flex-direction:column;gap:.15em;display:flex}.cq-demo__size{font-weight:var(--weight-7);color:var(--white);white-space:nowrap;text-overflow:ellipsis;margin:0;line-height:1.1;overflow:hidden}.cq-demo__size--xxxl{font-size:var(--text-xxxl);color:var(--secondary-light-1)}.cq-demo__size--xxl{font-size:var(--text-xxl);color:var(--canvas-text-bright)}.cq-demo__size--xl{font-size:var(--text-xl);color:var(--canvas-text-bright)}.cq-demo__size--m{font-size:var(--text-m);color:var(--canvas-text)}.cq-demo__size--s{font-size:var(--text-s);color:var(--canvas-text-muted);font-weight:var(--weight-4);white-space:normal;line-height:var(--leading-l)}.cq-demo__tokens{border-top:1px solid var(--canvas-border-dim);padding-top:var(--space-s);flex-direction:column;gap:.3em;display:flex}.cq-demo__token{justify-content:space-between;align-items:center;gap:var(--space-s);display:flex}.cq-demo__token-name{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--canvas-text-muted)}.cq-demo__token-note{font-size:var(--text-xs);color:var(--canvas-text-muted)}.cq-demo__token-note strong{color:var(--secondary);font-weight:var(--weight-7)}.sp-demo{padding:0 0 var(--space-m);gap:var(--space-m);flex-direction:column;display:flex}.sp-demo__screenshot{border-radius:calc(var(--radius-l) - 4px) calc(var(--radius-l) - 4px) 0 0;border-bottom:1px solid var(--canvas-border);overflow:hidden}.sp-demo__screenshot-img{object-fit:cover;object-position:top left;width:100%;height:150px;display:block}.sp-demo .sp-demo__section{padding-inline:var(--space-m);gap:var(--space-s);flex-direction:column;display:flex}.sp-demo__control-row{justify-content:space-between;align-items:center;display:flex}.sp-demo__ctrl-label{font-size:var(--text-xs);font-weight:var(--weight-6);color:var(--canvas-text-dim);letter-spacing:var(--tracking-wide);text-transform:uppercase}.sp-demo__ratio-display{font-size:var(--text-xs);font-weight:var(--weight-7);font-family:var(--font-mono);color:var(--secondary-light-1);background:var(--secondary-trans10);border:1px solid var(--secondary-trans30);border-radius:var(--radius-pill);text-align:center;min-width:7ch;padding:.2em .7em}.sp-demo__base-display{font-size:var(--text-xs);font-weight:var(--weight-7);font-family:var(--font-mono);color:var(--canvas-text-dim)}.sp-demo__ratio-btns{flex-wrap:wrap;gap:.35em;display:flex}.sp-demo__ratio-btn{font-size:var(--text-xs);font-weight:var(--weight-6);color:var(--canvas-text-muted);background:var(--canvas-surface);border:1px solid var(--canvas-border);border-radius:var(--radius-m);cursor:pointer;transition:color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);flex-direction:column;align-items:center;gap:.15em;padding:.45em .65em;display:flex}.sp-demo__ratio-btn span{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-8);color:var(--canvas-text-muted);transition:color var(--duration-fast) var(--ease-out)}.sp-demo__ratio-btn--active,.sp-demo__ratio-btn:hover{color:var(--secondary-light-1);background:var(--secondary-trans10);border-color:var(--secondary-trans40)}.sp-demo__ratio-btn--active span,.sp-demo__ratio-btn:hover span{color:var(--secondary)}.sp-demo__base-slider{-webkit-appearance:none;appearance:none;border-radius:var(--radius-pill);background:linear-gradient(to right, var(--secondary) 0%, var(--secondary-dark-2) 100%);cursor:pointer;border:none;outline:none;width:100%;height:8px}.sp-demo__base-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:var(--radius-circle);background:var(--white);border:2px solid var(--canvas-border-mid);width:20px;height:20px;box-shadow:0 2px 8px var(--black-50);cursor:grab;transition:transform var(--duration-fast) var(--ease-out)}.sp-demo__base-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}.sp-demo__base-slider::-moz-range-thumb{border-radius:var(--radius-circle);background:var(--white);border:2px solid var(--canvas-border-mid);width:20px;height:20px;box-shadow:0 2px 8px var(--black-50);cursor:grab}.sp-demo__scale{padding-inline:var(--space-m);padding-block:var(--space-xs);border-top:1px solid var(--canvas-border-dim);border-bottom:1px solid var(--canvas-border-dim);flex-direction:column;gap:.4em;display:flex}.sp-demo__row{flex-direction:column;gap:.2em;display:flex}.sp-demo__row-meta{justify-content:space-between;align-items:center;display:flex}.sp-demo__token,.sp-demo__px-val{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--canvas-text-muted)}.sp-demo__bar-wrap{background:var(--canvas-border-dim);border-radius:var(--radius-pill);height:5px;overflow:hidden}.sp-demo__bar{background:linear-gradient(to right, var(--secondary), var(--secondary-trans50));border-radius:var(--radius-pill);height:100%;transition:width .3s var(--ease-out)}.sp-demo__code-wrap{margin-inline:var(--space-m);background:var(--canvas-deep);border:1px solid var(--canvas-border);border-radius:var(--radius-m);overflow:hidden}.sp-demo__code-header{border-bottom:1px solid var(--canvas-border-dim);font-size:var(--text-xs);color:var(--canvas-text-muted);letter-spacing:var(--tracking-wide);text-transform:uppercase;justify-content:space-between;align-items:center;padding:.5em 1em;display:flex}.sp-demo__pre{user-select:none;max-height:8rem;margin:0;padding:.65em 1em;overflow-x:auto}.sp-demo__pre code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--canvas-text-dim);white-space:pre;line-height:1.75;display:block}.typo-demo{padding:var(--space-m) var(--space-l) var(--space-l);gap:var(--space-m);flex-direction:column;display:flex}.typo-demo__section{gap:var(--space-s);flex-direction:column;display:flex}.typo-demo__control-row{justify-content:space-between;align-items:center;display:flex}.typo-demo__ctrl-label{font-size:var(--text-xs);font-weight:var(--weight-6);color:var(--canvas-text-dim);letter-spacing:var(--tracking-wide);text-transform:uppercase}.typo-demo__ratio-display{font-size:var(--text-xs);font-weight:var(--weight-7);font-family:var(--font-mono);color:var(--secondary-light-1);background:var(--secondary-trans10);border:1px solid var(--secondary-trans30);border-radius:var(--radius-pill);text-align:center;min-width:7ch;padding:.2em .7em}.typo-demo__base-display{font-size:var(--text-xs);font-weight:var(--weight-7);font-family:var(--font-mono);color:var(--canvas-text-dim)}.typo-demo__ratio-btns{flex-wrap:wrap;gap:.35em;display:flex}.typo-demo__ratio-btn{font-size:var(--text-xs);font-weight:var(--weight-6);color:var(--canvas-text-muted);background:var(--canvas-surface);border:1px solid var(--canvas-border);border-radius:var(--radius-m);cursor:pointer;transition:color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);flex-direction:column;align-items:center;gap:.15em;padding:.45em .65em;display:flex}.typo-demo__ratio-btn span{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-8);color:var(--canvas-text-muted);transition:color var(--duration-fast) var(--ease-out)}.typo-demo__ratio-btn--active,.typo-demo__ratio-btn:hover{color:var(--secondary-light-1);background:var(--secondary-trans10);border-color:var(--secondary-trans40)}.typo-demo__ratio-btn--active span,.typo-demo__ratio-btn:hover span{color:var(--secondary)}.typo-demo__base-slider{-webkit-appearance:none;appearance:none;border-radius:var(--radius-pill);background:linear-gradient(to right, var(--secondary) 0%, var(--secondary-dark-2) 100%);cursor:pointer;border:none;outline:none;width:100%;height:8px}.typo-demo__base-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:var(--radius-circle);background:var(--white);border:2px solid var(--canvas-border-mid);width:20px;height:20px;box-shadow:0 2px 8px var(--black-50);cursor:grab;transition:transform var(--duration-fast) var(--ease-out)}.typo-demo__base-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15)}.typo-demo__base-slider::-moz-range-thumb{border-radius:var(--radius-circle);background:var(--white);border:2px solid var(--canvas-border-mid);width:20px;height:20px;box-shadow:0 2px 8px var(--black-50);cursor:grab}.typo-demo__scale{padding-block:var(--space-xs);border-top:1px solid var(--canvas-border-dim);border-bottom:1px solid var(--canvas-border-dim);flex-direction:column;gap:.35em;display:flex}.typo-demo__row{flex-direction:column;gap:.2em;display:flex}.typo-demo__row-meta{justify-content:space-between;align-items:center;display:flex}.typo-demo__token,.typo-demo__px-val{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--canvas-text-muted)}.typo-demo__bar-wrap{background:var(--canvas-border-dim);border-radius:var(--radius-pill);height:3px;margin-block:.1em;overflow:hidden}.typo-demo__bar{background:linear-gradient(to right, var(--secondary), var(--secondary-dark-2));border-radius:var(--radius-pill);height:100%;transition:width .3s var(--ease-out)}.typo-demo__sample{font-weight:var(--weight-7);color:var(--white);white-space:nowrap;text-overflow:ellipsis;max-width:100%;transition:font-size .3s var(--ease-out);line-height:1;overflow:hidden}.typo-demo__code-wrap{background:var(--canvas-deep);border:1px solid var(--canvas-border);border-radius:var(--radius-m);overflow:hidden}.typo-demo__code-header{border-bottom:1px solid var(--canvas-border-dim);font-size:var(--text-xs);color:var(--canvas-text-muted);letter-spacing:var(--tracking-wide);text-transform:uppercase;justify-content:space-between;align-items:center;padding:.5em 1em;display:flex}.typo-demo__pre{user-select:none;max-height:9rem;margin:0;padding:.65em 1em;overflow-x:auto}.typo-demo__pre code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--canvas-text-dim);white-space:pre;line-height:1.75;display:block}@media (width<=860px){.colour-demo__swatches{gap:var(--space-xs);grid-template-columns:repeat(5,1fr)}.darkmode-demo__vars{grid-template-columns:1fr}}@media (width<=480px){.colour-demo__swatches{gap:.3em}.colour-demo__swatch-label{font-size:var(--text-xs)}.typo-demo__ratio-btns{gap:.25em}.typo-demo__ratio-btn{padding:.35em .5em}}