.demo{max-width:var(--wide-width);padding:var(--spacing-8) var(--spacing-6) var(--spacing-24);margin:0 auto}.back{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-muted);text-decoration:none}.back:hover{color:var(--color-brand)}.kicker{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-brand);margin:var(--spacing-4) 0 var(--spacing-3);font-weight:700;display:block}.demo h1{letter-spacing:-1.2px;text-wrap:balance;max-width:24ch;font-size:clamp(2rem,5vw,2.75rem)}.demo>header .lead{margin-top:var(--spacing-4);color:var(--color-muted);font-size:var(--font-size-lg);max-width:70ch;line-height:1.6}.demo code{font-family:var(--font-mono);background:var(--color-surface);border-radius:4px;padding:.1em .4em;font-size:.9em}.features{margin-top:var(--spacing-12);gap:var(--spacing-6);grid-template-columns:repeat(2,1fr);display:grid}@media (width<=800px){.features{grid-template-columns:1fr}}.feature{padding:var(--spacing-6);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.feature h2{font-size:var(--font-size-xl)}.feature>p{margin-top:var(--spacing-2);color:var(--color-text-secondary);line-height:1.55}.erstatter{font-size:var(--font-size-xs);font-family:var(--font-mono);color:var(--color-muted)!important}.feature button{margin-top:var(--spacing-4);border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--font-size-sm);cursor:pointer;border-radius:999px;padding:.6em 1.2em}.feature button:hover{border-color:var(--color-brand);color:var(--color-brand)}.vt-demo{margin-top:var(--spacing-4);align-items:center;gap:var(--spacing-4);display:flex}.vt-box{border-radius:var(--radius);background:var(--color-brand);width:64px;height:64px;color:var(--color-on-brand);font-weight:700;font-size:var(--font-size-xl);view-transition-name:vt-box;justify-content:center;align-items:center;display:flex}.vt-box.alt{background:color-mix(in srgb, var(--color-brand) 60%, black);border-radius:50%}@keyframes scrollbar-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.scroll-track{margin-top:var(--spacing-4);background:var(--color-border);border-radius:999px;height:6px;overflow:hidden}.scroll-bar{transform-origin:0;background:var(--color-brand);width:100%;height:100%;animation:linear scrollbar-fill scroll(root)}@keyframes reveal-in{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}.reveal-demo{margin-top:var(--spacing-6);align-items:center;height:140px;display:flex}.reveal-card{padding:var(--spacing-4);background:var(--color-bg-subtle);border-radius:var(--radius);animation:linear both reveal-in view();animation-range:entry cover 40%}@supports not (animation-timeline:scroll()){.scroll-bar{animation:none;transform:scaleX(.6)}.reveal-card{animation:none}}.ld-demo{margin-top:var(--spacing-4);padding:var(--spacing-5);border-radius:var(--radius);color:light-dark(#1b1c1e,#fafaf8);background:light-dark(#fafaf8,#1b1c1e);border:1px solid light-dark(#e7e4db,#333)}.cq-demo{margin-top:var(--spacing-4);width:100%;max-width:480px;padding-right:var(--spacing-6);position:relative;container:cq-card/inline-size}.cq-card{gap:var(--spacing-3);padding:var(--spacing-4);background:var(--color-bg-subtle);border-radius:var(--radius);flex-direction:column;display:flex}.cq-thumb{border-radius:var(--radius);background:color-mix(in srgb, var(--color-brand) 25%, var(--color-bg-subtle));width:100%;height:64px}.cq-body{flex-direction:column;gap:2px;display:flex}.cq-body span{color:var(--color-muted);font-size:var(--font-size-sm)}@container cq-card (width>=340px){.cq-card{flex-direction:row;align-items:center}.cq-thumb{flex-shrink:0;width:96px;height:72px}}.cq-handle{cursor:ew-resize;color:var(--color-muted);user-select:none;touch-action:none;position:absolute;top:50%;right:0;transform:translateY(-50%)}.has-demo{margin-top:var(--spacing-4);gap:var(--spacing-2);flex-direction:column;padding:0;list-style:none;display:flex}.has-demo li{padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius);transition:background .15s,color .15s}.has-demo li:has(input:checked){background:var(--color-brand);color:var(--color-on-brand)}.has-demo label{align-items:center;gap:var(--spacing-2);cursor:pointer;display:flex}.balance-demo{margin-top:var(--spacing-4);gap:var(--spacing-4);flex-direction:column;display:flex}.balance-demo .tag{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-brand)}.balance-demo h3{background:var(--color-bg-subtle);max-width:20ch;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius);font-size:var(--font-size-base);margin-top:4px}.popover-box{padding:var(--spacing-4);border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-bg);max-width:280px;margin:0}.popover-box:popover-open{animation:.15s reveal-in}.starter-box{margin-top:var(--spacing-4);opacity:0;padding:var(--spacing-4);background:var(--color-bg-subtle);border-radius:var(--radius);transition:opacity .3s ease, transform .3s ease, display .3s allow-discrete;display:none;transform:translateY(-8px)}.starter-box.shown{opacity:1;display:block;transform:none;@starting-style{opacity:0;transform:translateY(-8px)}}.mix-demo{margin-top:var(--spacing-4);gap:var(--spacing-2);display:flex}.mix-swatch{border-radius:var(--radius);height:56px;font-size:var(--font-size-xs);font-family:var(--font-mono);color:#1b1c1e;flex:1;justify-content:center;align-items:center;display:flex}.emdash-box{margin-top:var(--spacing-16);padding:var(--spacing-8);background:var(--color-bg-subtle);border-radius:var(--radius-lg)}.emdash-box h2{font-size:var(--font-size-2xl);margin-top:var(--spacing-2);max-width:30ch}.emdash-box ul{margin-top:var(--spacing-6);gap:var(--spacing-3) var(--spacing-8);grid-template-columns:repeat(2,1fr);padding:0;list-style:none;display:grid}@media (width<=700px){.emdash-box ul{grid-template-columns:1fr}}.emdash-box li{color:var(--color-text-secondary);padding-left:1.6em;line-height:1.55;position:relative}.emdash-box li:before{content:"";background:var(--color-brand);border-radius:50%;width:7px;height:7px;position:absolute;top:.55em;left:.15em}