:root{--bg:#0d0d1a;--bg-2:#1d2b53;--surface:#ffffff0d;--text:#f8f0e3;--text-dim:#c2c3c7;--text-muted:#83769c;--text-placeholder:#5f574f;--green:#00e436;--red:#ff004d;--yellow:#ffec27;--blue:#29adff;--purple:#7e2553;--orange:#ffa300;--pink:#ff77a8;--brown:#ab5236;--success:var(--green);--danger:var(--red);--warning:var(--yellow);--info:var(--blue);--border:#29adff38;--border-solid:#1d2b53;--border-width:1px;--border-width-thick:2px;--font-pixel:"Dogica", "Press Start 2P", monospace;--font-body:"JetBrains Mono", "Courier New", monospace;--size-2xs:.75rem;--size-xs:.875rem;--size-sm:1rem;--size-md:1.25rem;--size-lg:1.5rem;--size-xl:2rem;--size-2xl:2.5rem;--size-3xl:3rem;--tracking-wide:.06em;--tracking-wider:.1em;--tracking-widest:.15em;--px:4px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--radius:0px;--duration-fast:80ms;--duration-base:.12s;--ease-step:steps(4);--ease-step-1:steps(1);--ease-out:ease-out;--shadow-xs:1px 1px 0 #000c;--shadow-sm:2px 2px 0 #000c;--shadow-md:3px 3px 0 #000c;--shadow-lg:4px 4px 0 #000c;--glow-green:0 0 8px #00e43673;--glow-blue:0 0 8px #29adff73;--glow-red:0 0 8px #ff004d73;--glow-yellow:0 0 8px #ffec2766}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg,#0d0d1a);color:var(--text,#f8f0e3);font-family:var(--font-body,"JetBrains Mono", monospace);font-size:var(--size-sm,1rem);min-height:100dvh;line-height:1.6}.site-header{text-align:center;padding:var(--sp-10) var(--sp-6) var(--sp-8);border-bottom:var(--border-width,2px) solid var(--border,#29adff38)}.site-title{font-family:var(--font-pixel,"Press Start 2P", monospace);font-size:var(--size-2xl,2.5rem);color:var(--green,#00e436);text-shadow:var(--glow-green);letter-spacing:var(--tracking-wider,.1em);margin-bottom:var(--sp-3)}.site-sub{font-family:var(--font-body);font-size:var(--size-xs,.875rem);color:var(--text-muted,#83769c);letter-spacing:var(--tracking-wide,.06em)}.showcase{max-width:1100px;padding:var(--sp-10) var(--sp-6);gap:var(--sp-12);flex-direction:column;margin:0 auto;display:flex}.section{gap:var(--sp-6);flex-direction:column;display:flex}.section-title{font-family:var(--font-pixel,"Press Start 2P", monospace);font-size:var(--size-xs,.875rem);color:var(--blue,#29adff);letter-spacing:var(--tracking-widest,.15em);text-transform:uppercase;border-bottom:var(--border-width) solid var(--border);padding-bottom:var(--sp-3)}.swatch-grid{gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(120px,1fr));display:grid}.swatch{background:var(--c);color:var(--text,#f8f0e3);padding:var(--sp-4);aspect-ratio:1;border:var(--border-width) solid #ffffff14;flex-direction:column;justify-content:flex-end;gap:2px;display:flex}.swatch span{font-family:var(--font-body);font-size:.7rem;font-weight:700}.swatch small{font-family:var(--font-body);opacity:.75;font-size:.65rem}.type-demo{gap:var(--sp-4);padding:var(--sp-6);background:var(--bg-2,#1d2b53);border:var(--border-width) solid var(--border);flex-direction:column;display:flex}.type-pixel{font-family:var(--font-pixel,"Press Start 2P", monospace)}.type-body{font-family:var(--font-body)}.type-muted{color:var(--text-muted,#83769c)}.type-3xl{font-size:var(--size-3xl,3rem);color:var(--yellow,#ffec27);text-shadow:var(--glow-yellow)}.type-xl{font-size:var(--size-xl,2rem);color:var(--red,#ff004d)}.type-lg{font-size:var(--size-lg,1.5rem);color:var(--text,#f8f0e3)}.type-sm{font-size:var(--size-sm,1rem);color:var(--text-dim,#c2c3c7)}.type-xs{font-size:var(--size-xs,.875rem)}.divider{border:none;border-top:var(--border-width) solid var(--border);margin:var(--sp-2) 0}.component-row{align-items:top;gap:var(--sp-4);flex-wrap:wrap;display:flex}.site-footer{text-align:center;padding:var(--sp-8) var(--sp-6);color:var(--text-muted,#83769c);font-size:var(--size-xs);border-top:var(--border-width) solid var(--border)}.site-footer a{color:var(--blue,#29adff);text-decoration:none}