.feat-hero{position:relative;overflow:hidden;background:var(--canvas-deep);padding-block:calc(var(--space-3xl) + 4rem) var(--space-3xl);text-align:center}.feat-hero__blob{position:absolute;border-radius:var(--radius-circle);pointer-events:none;filter:blur(80px);animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}.feat-hero__blob--1{top:-20%;left:-10%;width:60vw;height:60vw;max-width:700px;max-height:700px;background:radial-gradient(circle,var(--secondary-trans40) 0%,transparent 65%);animation-name:fblob-1;animation-duration:calc(20s/clamp(.001,var(--motion),1))}.feat-hero__blob--2{bottom:-20%;right:-15%;width:55vw;height:55vw;max-width:650px;max-height:650px;background:radial-gradient(circle,var(--secondary-trans30) 0%,transparent 65%);animation-name:fblob-2;animation-duration:calc(28s/clamp(.001,var(--motion),1))}@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{position:absolute;inset:-50%;width:200%;height:200%;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}.feat-hero__container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-m);padding-inline:var(--section-inline)}.feat-hero__back{display:inline-flex;align-items:center;gap:.4em;font-size:var(--text-xs);color:var(--canvas-text-dim);text-decoration:none;transition:color var(--duration-fast) var(--ease-out);align-self:flex-start;margin-bottom:var(--space-m)}.feat-hero__back:hover{color:var(--white);text-decoration:none}.feat-hero__tag{display:inline-flex;align-items:center;gap:.6em;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);padding:.4em .9em;border-radius:var(--radius-pill)}.feat-hero__tag-dot{display:inline-block;width:6px;height:6px;border-radius:var(--radius-circle);background:var(--secondary);box-shadow:0 0 6px var(--secondary)}.feat-hero__title{font-size:var(--text-display);font-weight:var(--weight-8);color:var(--white);line-height:1.08;letter-spacing:-.03em;max-width:18ch;text-wrap:balance}.feat-hero__title em{font-style:normal;background:linear-gradient(135deg,var(--secondary-light-1),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.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{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3xl);align-items:center}.feat-section__inner--reverse{direction:rtl}.feat-section__inner--reverse>*{direction:ltr}.feat-section__content{display:flex;flex-direction:column;gap:var(--space-m)}.feat-section__icon{display:flex;align-items:center;color:var(--secondary)}.feat-section__title{font-size:var(--text-xl);font-weight:var(--weight-8);color:var(--white);line-height:1.1;letter-spacing:-.02em}.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{list-style:none;display:flex;flex-direction:column;gap:var(--space-s);margin-top:var(--space-s)}.feat-section__bullet{display:flex;align-items:flex-start;gap:.65em;font-size:var(--text-s);color:var(--canvas-text);line-height:var(--leading-m)}.feat-section__bullet-icon{flex-shrink:0;color:var(--secondary);margin-top:.1em}.feat-section__visual{position:relative;display:flex;align-items:center;justify-content:center}.feat-section__glow{position:absolute;inset:-3rem;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}.feat-section__frame{position:relative;width:100%;border-radius:var(--radius-l);overflow:hidden;box-shadow:0 4px 12px var(--black-30),0 16px 48px var(--black-50),0 0 0 1px var(--secondary-trans20)}.feat-section__img{display:block;width:100%;height:auto;border-radius:var(--radius-l)}.feat-section__visual--placeholder .feat-section__placeholder{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-m);width:100%;aspect-ratio:16 / 10;background:var(--canvas-surface-dim);border-radius:var(--radius-l);border:1px solid var(--canvas-border);color:var(--canvas-text-muted)}.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);display:flex;flex-direction:column;align-items:center;gap:var(--space-l)}.feat-cta__heading{font-size:var(--text-xxl);font-weight:var(--weight-8);color:var(--white);line-height:1.1;letter-spacing:-.03em;max-width:18ch;text-wrap:balance}.feat-cta__heading em{font-style:normal;background:linear-gradient(135deg,var(--secondary-light-1),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.feat-cta__btn{display:inline-flex;align-items:center;gap:.5em;font-size:var(--text-m);font-weight:var(--weight-7);color:var(--white);text-decoration:none;background:var(--secondary);padding:.9em 2.2em;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)}.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(max-width:860px){.feat-section__inner,.feat-section__inner--reverse{grid-template-columns:1fr;direction:ltr;gap:var(--space-xl)}.feat-section__inner--reverse>*{direction:ltr}.feat-hero__back{align-self:center}}@media(max-width:480px){.feat-hero__title{font-size:var(--text-xxl)}}.feat-demo{position:relative;z-index:1;width:100%;background:var(--canvas-surface-dim);border:1px solid var(--canvas-border);border-radius:var(--radius-l);overflow:hidden;box-shadow:0 4px 16px var(--black-30),0 24px 64px var(--black-50),0 0 0 1px var(--secondary-trans10)}.colour-demo{padding:var(--space-l);display:flex;flex-direction:column;gap:var(--space-m)}.colour-demo__header{display:flex;align-items:center;justify-content:space-between}.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);padding:.2em .7em;border-radius:var(--radius-pill);min-width:4ch;text-align:center}.colour-demo__slider{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:var(--radius-pill);background:linear-gradient(to right,#cf5983,oklch(.624 .155 60),oklch(.624 .155 120),oklch(.624 .155 180),oklch(.624 .155 240),#976ed6,#cf5983);cursor:pointer;outline:none;border:none}.colour-demo__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:var(--radius-circle);background:var(--white);border:2px solid var(--canvas-border-mid);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{width:22px;height:22px;border-radius:var(--radius-circle);background:var(--white);border:2px solid var(--canvas-border-mid);box-shadow:0 2px 8px var(--black-50);cursor:grab}.colour-demo__swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-s)}.colour-demo__swatch-wrap{display:flex;flex-direction:column;align-items:center;gap:.4em}.colour-demo__swatch{width:100%;aspect-ratio:1;border-radius:var(--radius-m);background:var(--secondary);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{display:flex;align-items:center;justify-content:space-between;padding:.5em 1em;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}.colour-demo__pre{margin:0;padding:.85em 1em;overflow-x:auto;user-select:none}.colour-demo__pre code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--canvas-text);line-height:1.7;white-space:pre;display:block}.dm-demo{display:flex;flex-direction:column;gap:0;overflow:hidden}.dm-presets{display:flex;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}.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{display:flex;gap:.3em;flex-wrap:wrap}.dm-preset{display:inline-flex;align-items:center;gap:.4em;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);padding:.35em .7em;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)}.dm-preset--active,.dm-preset:hover{color:var(--white);background:var(--canvas-border);border-color:var(--secondary-trans60)}.dm-preset__dot{width:8px;height:8px;border-radius:var(--radius-circle);flex-shrink:0;box-shadow:0 0 4px currentColor}.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(.624 .155 220);box-shadow:0 0 4px oklch(.624 .155 220 / .7)}.dm-preset[data-palette=ember] .dm-preset__dot{background:#d1632a;box-shadow:0 0 4px #d1632ab3}.dm-preset[data-palette=violet] .dm-preset__dot{background:#8076e0;box-shadow:0 0 4px #8076e0b3}.dm-demo__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);padding:var(--space-s) var(--space-m);background:var(--canvas-dark);border-bottom:1px solid var(--canvas-border)}.dm-demo__toggle-group{display:flex;gap:0;background:var(--canvas-surface);border:1px solid var(--canvas-border);border-radius:var(--radius-pill);padding:3px}.dm-demo__toggle{display:inline-flex;align-items:center;gap:.4em;font-size:var(--text-xs);font-weight:var(--weight-6);color:var(--canvas-text-muted);background:transparent;border:none;border-radius:calc(var(--radius-pill) - 3px);padding:.35em .85em;cursor:pointer;transition:color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out)}.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);padding:.2em .6em;border-radius:var(--radius-pill);white-space:nowrap}.dm-preview{background:var(--background);transition:background .35s var(--ease-out),border-color .35s var(--ease-out)}.dm-nav{display:flex;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)}.dm-nav__logo{font-size:var(--text-xs);font-weight:var(--weight-8);color:var(--color);margin-right:auto;letter-spacing:-.01em;transition:color .35s var(--ease-out)}.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);padding:.3em .75em;border-radius:var(--radius-pill);transition:background .35s var(--ease-out)}.dm-body{display:grid;grid-template-columns:1fr auto;gap:var(--space-m);padding:var(--space-m);align-items:start}.dm-card{background:var(--surface);border:1px solid var(--border-color);border-radius:var(--radius-m);padding:var(--space-m);display:flex;flex-direction:column;gap:.5em;transition:background .35s var(--ease-out),border-color .35s var(--ease-out)}.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);line-height:1.15;letter-spacing:-.02em;margin:0;transition:color .35s var(--ease-out)}.dm-card__text{font-size:var(--text-xs);color:var(--color-muted);line-height:1.55;margin:0;transition:color .35s var(--ease-out)}.dm-card__footer{display:flex;align-items:center;gap:.75em;padding-top:.5em;border-top:1px solid var(--border-color);margin-top:.25em;transition:border-color .35s var(--ease-out)}.dm-card__btn{font-size:var(--text-xs);font-weight:var(--weight-7);color:var(--white);background:var(--secondary);padding:.35em .8em;border-radius:var(--radius-3);transition:background .35s var(--ease-out)}.dm-card__link{font-size:var(--text-xs);color:var(--secondary);transition:color .35s var(--ease-out)}.dm-tokens{display:flex;flex-direction:column;gap:.3em;min-width:0}.dm-token{display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:.28em .5em;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)}.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{flex-shrink:0;width:16px;height:16px;border-radius:var(--radius-2);border:1px solid var(--border-color);transition:background .35s var(--ease-out),border-color .35s var(--ease-out)}.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{display:flex;align-items:center;padding:.5em 1em;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}.dm-code-pre{margin:0;padding:.75em 1em;overflow-x:auto;max-height:8rem;user-select:none}.dm-code-pre code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--canvas-text-dim);line-height:1.75;white-space:pre;display:block}.cq-demo{padding:var(--space-m) var(--space-m) var(--space-m);display:flex;flex-direction:column;gap:var(--space-m)}.cq-demo__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s)}.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;display:flex;align-items:center;gap:.5em}.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);padding:.2em .7em;border-radius:var(--radius-pill);min-width:5ch;text-align:center}.cq-demo__resizable{resize:horizontal;overflow:hidden;min-width:180px;max-width:100%;width:100%;border:1px solid var(--secondary-trans50);border-radius:var(--radius-m);background:var(--canvas-dark);box-shadow:inset 0 1px 0 var(--white-10)}.cq-demo__inner{padding:var(--space-m);display:flex;flex-direction:column;gap:.15em}.cq-demo__size{margin:0;font-weight:var(--weight-7);color:var(--white);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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{display:flex;flex-direction:column;gap:.3em;border-top:1px solid var(--canvas-border-dim);padding-top:var(--space-s)}.cq-demo__token{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s)}.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);display:flex;flex-direction:column;gap:var(--space-m)}.sp-demo__screenshot{border-radius:calc(var(--radius-l) - 4px) calc(var(--radius-l) - 4px) 0 0;overflow:hidden;border-bottom:1px solid var(--canvas-border)}.sp-demo__screenshot-img{display:block;width:100%;height:150px;object-fit:cover;object-position:top left}.sp-demo .sp-demo__section{padding-inline:var(--space-m);display:flex;flex-direction:column;gap:var(--space-s)}.sp-demo__control-row{display:flex;align-items:center;justify-content:space-between}.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);padding:.2em .7em;border-radius:var(--radius-pill);min-width:7ch;text-align:center}.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{display:flex;flex-wrap:wrap;gap:.35em}.sp-demo__ratio-btn{display:flex;flex-direction:column;align-items:center;gap:.15em;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);padding:.45em .65em;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)}.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;width:100%;height:8px;border-radius:var(--radius-pill);background:linear-gradient(to right,var(--secondary) 0%,var(--secondary-dark-2) 100%);cursor:pointer;outline:none;border:none}.sp-demo__base-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:var(--radius-circle);background:var(--white);border:2px solid var(--canvas-border-mid);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{width:20px;height:20px;border-radius:var(--radius-circle);background:var(--white);border:2px solid var(--canvas-border-mid);box-shadow:0 2px 8px var(--black-50);cursor:grab}.sp-demo__scale{padding-inline:var(--space-m);display:flex;flex-direction:column;gap:.4em;padding-block:var(--space-xs);border-top:1px solid var(--canvas-border-dim);border-bottom:1px solid var(--canvas-border-dim)}.sp-demo__row{display:flex;flex-direction:column;gap:.2em}.sp-demo__row-meta{display:flex;align-items:center;justify-content:space-between}.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{height:5px;background:var(--canvas-border-dim);border-radius:var(--radius-pill);overflow:hidden}.sp-demo__bar{height:100%;background:linear-gradient(to right,var(--secondary),var(--secondary-trans50));border-radius:var(--radius-pill);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{display:flex;align-items:center;justify-content:space-between;padding:.5em 1em;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}.sp-demo__pre{margin:0;padding:.65em 1em;overflow-x:auto;max-height:8rem;user-select:none}.sp-demo__pre code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--canvas-text-dim);line-height:1.75;white-space:pre;display:block}.typo-demo{padding:var(--space-m) var(--space-l) var(--space-l);display:flex;flex-direction:column;gap:var(--space-m)}.typo-demo__section{display:flex;flex-direction:column;gap:var(--space-s)}.typo-demo__control-row{display:flex;align-items:center;justify-content:space-between}.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);padding:.2em .7em;border-radius:var(--radius-pill);min-width:7ch;text-align:center}.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{display:flex;flex-wrap:wrap;gap:.35em}.typo-demo__ratio-btn{display:flex;flex-direction:column;align-items:center;gap:.15em;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);padding:.45em .65em;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)}.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;width:100%;height:8px;border-radius:var(--radius-pill);background:linear-gradient(to right,var(--secondary) 0%,var(--secondary-dark-2) 100%);cursor:pointer;outline:none;border:none}.typo-demo__base-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:var(--radius-circle);background:var(--white);border:2px solid var(--canvas-border-mid);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{width:20px;height:20px;border-radius:var(--radius-circle);background:var(--white);border:2px solid var(--canvas-border-mid);box-shadow:0 2px 8px var(--black-50);cursor:grab}.typo-demo__scale{display:flex;flex-direction:column;gap:.35em;padding-block:var(--space-xs);border-top:1px solid var(--canvas-border-dim);border-bottom:1px solid var(--canvas-border-dim)}.typo-demo__row{display:flex;flex-direction:column;gap:.2em}.typo-demo__row-meta{display:flex;align-items:center;justify-content:space-between}.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{height:3px;background:var(--canvas-border-dim);border-radius:var(--radius-pill);overflow:hidden;margin-block:.1em}.typo-demo__bar{height:100%;background:linear-gradient(to right,var(--secondary),var(--secondary-dark-2));border-radius:var(--radius-pill);transition:width .3s var(--ease-out)}.typo-demo__sample{font-weight:var(--weight-7);color:var(--white);line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:font-size .3s var(--ease-out)}.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{display:flex;align-items:center;justify-content:space-between;padding:.5em 1em;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}.typo-demo__pre{margin:0;padding:.65em 1em;overflow-x:auto;max-height:9rem;user-select:none}.typo-demo__pre code{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--canvas-text-dim);line-height:1.75;white-space:pre;display:block}@media(max-width:860px){.colour-demo__swatches{grid-template-columns:repeat(5,1fr);gap:var(--space-xs)}.darkmode-demo__vars{grid-template-columns:1fr}}@media(max-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}}