*{box-sizing:border-box}body{margin:0;font:14px/1.5 system-ui,sans-serif}.app{min-height:100vh;background:var(--vs-bg);color:var(--vs-text)}.app>header{display:flex;align-items:center;gap:24px;padding:12px 24px;color:var(--vs-text);background:var(--vs-surface)}.app>header.vs-glass{position:sticky;top:0;z-index:40;border-radius:0;border-width:0 0 2px;border-color:var(--vs-accent);box-shadow:none}.app>header>b{font-size:17px;letter-spacing:-.05em;white-space:nowrap}.app>header>b:before{content:"/";display:inline-block;margin-right:9px;font:800 20px/1 var(--vs-font-mono);color:var(--vs-primary);background:var(--vs-brand-graphite);padding:3px 7px}.app>header span{font:11px var(--vs-font-mono);color:var(--vs-muted)}.app>header .vs-button[aria-pressed=true]{color:var(--vs-text);background:var(--vs-surface-muted);border-bottom:2px solid var(--vs-accent)}main{max-width:1100px;margin:auto;padding:28px 24px}.intro{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;padding:16px 0 20px;border-bottom:1px solid var(--vs-border)}h1{font-size:30px;line-height:1.15;letter-spacing:-.045em;margin:12px 0}h2{font-size:20px;letter-spacing:-.025em}.title-mark{color:var(--vs-accent);font-family:var(--vs-font-mono)}a{color:var(--vs-link);text-underline-offset:3px}small{font:11px var(--vs-font-mono);color:var(--vs-muted);letter-spacing:.05em}.intro small{display:inline-block;padding:3px 6px;border:1px solid var(--vs-border)}.intro p{color:var(--vs-muted);max-width:580px;margin:8px 0 0}.intro a{font:12px var(--vs-font-mono)}.toolbar{display:flex;gap:20px;align-items:end;margin:24px 0}.toolbar .vs-field{flex:1;margin:0}.stats{margin:0 0 8px;padding:16px 0;border-bottom:1px solid var(--vs-border)}.stats>.vs-stat{padding:0 16px;border-left:2px solid var(--vs-border-subtle)}.stats>.vs-stat:first-child{border-left-color:var(--vs-primary)}.stats .vs-stat-value{font-family:var(--vs-font-mono);font-size:25px;letter-spacing:-.04em}.project{display:flex;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--vs-border)}.samples{display:grid;grid-template-columns:1fr 1fr;gap:32px}main>footer{margin-top:32px;padding-top:16px;border-top:1px solid var(--vs-border);font:12px var(--vs-font-mono);color:var(--vs-muted)}.application-examples{margin-top:36px;padding-top:24px;border-top:1px solid var(--vs-border)}.application-examples .vs-field{margin-bottom:8px}.application-examples .vs-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--vs-grid-min, 220px)),1fr))}.material-preview{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px;margin-bottom:28px;background:var(--vs-primary);color:var(--vs-on-primary);border:1px solid var(--vs-on-primary);box-shadow:4px 4px 0 var(--vs-accent)}.material-preview small{color:inherit}.material-preview h2{font-size:25px;letter-spacing:-.04em;margin:8px 0}.material-preview p{max-width:580px;margin:8px 0 0}.material-symbol{flex-shrink:0;font:800 64px/1 system-ui,sans-serif;letter-spacing:-7px;border-left:1px solid currentColor;padding:12px 20px}.material-symbol span{font:700 28px var(--vs-font-mono);vertical-align:top;letter-spacing:0}@media(max-width:700px){.app>header.vs-glass{position:static;flex-wrap:wrap;gap:10px}.intro,.toolbar{flex-wrap:wrap}.samples{grid-template-columns:1fr}.material-symbol{display:none}.material-preview h2{font-size:21px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}