:root{--bg: #06090f;--bg-2: #0c1018;--surface: rgba(255, 255, 255, .04);--cyan: #00e5ff;--violet: #7000ff;--red: #ff1744;--amber: #ffab00;--text: #e2e8f0;--text-dim: #909aa8;--text-faint: #637082;--text-placeholder: #728496;--border: rgba(0, 229, 255, .18);--border-bright: rgba(0, 229, 255, .5);--glow-cyan: rgba(0, 229, 255, .18);--glow-violet: rgba(112, 0, 255, .2);--font-mono: "IBM Plex Mono", "Courier New", monospace;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--sp-8: 64px;--size-2xs: .75rem;--size-xs: .8125rem;--size-sm: .875rem;--size-base: 1rem;--size-lg: 1.25rem;--size-xl: 1.5rem;--tracking-wide: .06em;--tracking-wider: .12em;--ease-out: cubic-bezier(.16, 1, .3, 1);--duration-fast: .15s;--duration-base: .24s;--duration-slow: .4s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased}body{background:var(--bg);color:var(--text);font-family:var(--font-mono);min-height:100vh}.showcase{max-width:1040px;margin:0 auto;padding:var(--sp-7) var(--sp-5)}.showcase__header{margin-bottom:var(--sp-7);padding-bottom:var(--sp-5);border-bottom:1px solid var(--border)}.showcase__title{font-size:2.5rem;font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--text)}.showcase__title .bracket{color:var(--cyan)}.showcase__subtitle{margin-top:var(--sp-2);font-size:var(--size-xs);color:var(--text-faint);text-transform:uppercase;letter-spacing:var(--tracking-wider)}.showcase__section{margin-bottom:var(--sp-7)}.showcase__section-title{font-size:var(--size-xs);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--cyan);margin-bottom:var(--sp-4);padding-bottom:var(--sp-2);border-bottom:1px solid var(--border)}.showcase__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-5)}.showcase__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}.showcase__col{display:flex;flex-direction:column;gap:var(--sp-4);max-width:360px}.showcase__item-label{font-size:var(--size-2xs);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--text-faint);margin-bottom:var(--sp-2)}.showcase__form{display:flex;flex-direction:column;gap:var(--sp-4);max-width:400px}.hud-btn{align-self:flex-start;background:transparent;border:1px solid var(--border);color:var(--cyan);font-family:var(--font-mono);font-size:var(--size-xs);text-transform:uppercase;letter-spacing:var(--tracking-wider);padding:var(--sp-2) var(--sp-4);cursor:pointer;transition:background var(--duration-fast) ease,border-color var(--duration-fast) ease}.hud-btn:hover{background:#00e5ff0f;border-color:var(--border-bright)}.showcase__output{margin-top:var(--sp-4);padding:var(--sp-3);background:var(--surface);border:1px solid var(--border);font-size:var(--size-xs);color:var(--cyan);min-height:3.5em;white-space:pre;opacity:.85}.showcase__output:empty:before{content:"— awaiting transmission —";color:var(--text-faint)}.dt-group{margin-bottom:var(--sp-6)}.dt-group__title{font-size:var(--size-xs);letter-spacing:var(--tracking-wide);color:var(--text-dim);margin-bottom:var(--sp-3)}.dt-group__hint{font-size:var(--size-xs);color:var(--text-faint);margin-bottom:var(--sp-3)}.swatches{display:flex;flex-wrap:wrap;gap:var(--sp-4)}.swatch{display:flex;flex-direction:column;gap:var(--sp-1)}.swatch__bg{width:72px;height:72px}.swatch--border .swatch__bg{background:var(--surface)}.swatch__name{font-size:var(--size-xs);letter-spacing:var(--tracking-wide);color:var(--text)}.swatch__hex{font-size:var(--size-2xs);color:var(--text-faint);white-space:nowrap}.type-specimen{border:1px solid var(--border);background:var(--surface);padding:var(--sp-4)}.type-specimen__sample{font-size:var(--size-base);line-height:2;color:var(--text)}.type-specimen__meta{margin-top:var(--sp-3);font-size:var(--size-xs);color:var(--text-faint);letter-spacing:var(--tracking-wide)}.type-scale{display:flex;flex-direction:column;gap:var(--sp-3)}.type-scale__item{display:flex;align-items:baseline;gap:var(--sp-5)}.type-scale__token{flex-shrink:0;width:180px;font-size:var(--size-xs);letter-spacing:var(--tracking-wide);color:var(--text-faint)}.spacing-scale{display:flex;flex-direction:column;gap:var(--sp-3)}.spacing-row{display:flex;align-items:center;gap:var(--sp-4)}.spacing-row__token{flex-shrink:0;width:140px;font-size:var(--size-xs);letter-spacing:var(--tracking-wide);color:var(--text-faint)}.spacing-row__bar{height:3px;background:var(--cyan);min-width:3px}.motion-demos{display:flex;flex-direction:column;gap:var(--sp-4)}.motion-demo-row{display:flex;align-items:center;gap:var(--sp-4)}.motion-demo__token{flex-shrink:0;width:310px;font-size:var(--size-xs);letter-spacing:var(--tracking-wide);color:var(--text-faint)}.motion-demo__track{flex:1;height:28px;position:relative;border:1px solid var(--border);cursor:pointer;overflow:hidden}.motion-demo__pill{position:absolute;left:4px;top:50%;width:20px;height:20px;background:var(--cyan);transform:translateY(-50%);transition:left var(--md-duration, .24s) var(--md-ease, ease),background var(--duration-fast) ease}.motion-demo__track:hover .motion-demo__pill{left:calc(100% - 24px);background:var(--cyan);box-shadow:0 0 10px var(--glow-cyan)}@media (prefers-reduced-motion: reduce){.motion-demo__pill{transition:none}}