.site-header{position:sticky;z-index:var(--z-header);top:0;border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px)}.nav{display:flex;align-items:center;min-height:4.75rem;gap:var(--space-4)}.brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--text);font-family:var(--font-display);font-size:var(--text-xl);font-weight:650;text-decoration:none}.brand__mark{display:grid;width:2.25rem;aspect-ratio:1;place-items:center;border-radius:44% 56% 52% 48%;background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-inset);transform:rotate(-7deg)}.nav-links{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}.nav-links a{border-radius:var(--radius-pill);color:var(--text);padding:.45rem .75rem;font-weight:800;text-decoration:none}.nav-links a:hover{background:var(--primary-soft);color:var(--primary)}.nav-actions{display:flex;gap:var(--space-2)}.icon-button{display:inline-grid;width:2.75rem;aspect-ratio:1;place-items:center;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform var(--duration-fast),box-shadow var(--duration-fast)}.icon-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.icon-button:active{transform:translateY(2px);box-shadow:none}.icon-sun,.icon-sound-on{display:none}:root[data-theme="dark"] .icon-moon{display:none}:root[data-theme="dark"] .icon-sun{display:block}[data-sound-enabled="true"] .icon-sound-off{display:none}[data-sound-enabled="true"] .icon-sound-on{display:block}.menu-toggle{display:none}.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(12rem,.6fr);align-items:center;gap:var(--space-6);padding-block:clamp(var(--space-7),10vw,var(--space-9));text-align:left}.hero h1{max-width:13ch;margin-bottom:var(--space-4);font-size:var(--text-hero)}.hero__lead{max-width:42rem;color:var(--text-muted);font-size:var(--text-lg)}.hero__mascot{justify-self:center;width:min(100%,18rem);filter:drop-shadow(0 .7rem 0 color-mix(in srgb,var(--primary) 22%,transparent));animation:mascot-bob 3.5s ease-in-out infinite}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:2.8rem;margin:0;border:0;border-radius:var(--radius-pill);background:var(--primary);box-shadow:var(--shadow-inset),var(--shadow-sm);color:var(--on-primary);padding:.65rem 1.2rem;font-weight:900;text-decoration:none;cursor:pointer;transition:transform var(--duration-fast) var(--ease-bounce),box-shadow var(--duration-fast),background var(--duration-fast)}.button:hover{background:var(--primary-hover);text-decoration:none;transform:translateY(-2px)}.button:active{transform:translateY(3px);box-shadow:none}.button--secondary{background:var(--secondary);color:var(--on-secondary)}.button--secondary:hover{background:var(--secondary-hover)}.button--ghost{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);color:var(--text)}.button--small{min-height:2.25rem;padding:.4rem .8rem;font-size:var(--text-sm)}.game-grid,.component-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:var(--space-5)}.game-card,.demo-card{position:relative;display:grid;gap:var(--space-4);overflow:hidden;border:1px solid var(--border);border-top:.4rem solid var(--game-accent);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-md);padding:var(--space-5);transition:transform var(--duration-normal) var(--ease-bounce),box-shadow var(--duration-normal)}.game-card{grid-template-columns:auto 1fr}.game-card::after{content:"";position:absolute;width:5rem;aspect-ratio:1;right:-2rem;bottom:-2.2rem;border-radius:50%;background:var(--game-accent);opacity:.1}.game-card:hover,.demo-card:hover{transform:translateY(-7px) rotate(.35deg);box-shadow:var(--shadow-lg)}.game-card img{width:5.5rem;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.game-card h3{margin-bottom:var(--space-2)}.game-card p{color:var(--text-muted)}.badge,.chip{display:inline-flex;align-items:center;width:max-content;border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:850}.badge{gap:var(--space-1);background:var(--secondary-soft);color:var(--secondary);padding:.25rem .65rem}.chip{border:1px solid var(--border);background:var(--surface);padding:.35rem .75rem}.chip[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}.chip-list,.button-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}.site-footer{margin-top:auto;border-top:1px solid var(--border);background:var(--surface)}.footer-content{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-6)}.contact-form,.form-stack{display:grid;gap:var(--space-3)}label{font-weight:850}input,textarea,select{width:100%;border:2px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text);padding:.75rem .9rem;transition:border var(--duration-fast),box-shadow var(--duration-fast)}input:hover,textarea:hover,select:hover{border-color:var(--text-muted)}input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--focus);box-shadow:0 0 0 .25rem color-mix(in srgb,var(--focus) 20%,transparent)}.field-help{color:var(--text-muted);font-size:var(--text-sm)}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.notice{border-left:.35rem solid var(--success);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm);padding:var(--space-4) var(--space-5)}.game-placeholder{display:grid;min-height:16rem;margin-block:var(--space-6);place-items:center;border:.18rem dashed var(--game-accent);border-radius:var(--radius-lg);background:var(--surface);font-family:var(--font-display);font-weight:650}.error-page{text-align:center;padding-block:clamp(var(--space-8),15vw,10rem)}.error-code{margin:0;color:var(--primary);font-family:var(--font-display);font-size:clamp(5rem,25vw,12rem);font-weight:700;line-height:.8}.correlation{font-size:var(--text-sm)}dialog{width:min(100% - 2rem,34rem);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:var(--shadow-lg);color:var(--text);padding:0}dialog::backdrop{background:rgb(16 11 28 / .68);backdrop-filter:blur(4px)}.modal__header,.modal__body,.modal__footer{padding:var(--space-5)}.modal__header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.modal__header h2{margin:0}.modal__footer{display:flex;justify-content:flex-end;border-top:1px solid var(--border)}.toast-region{position:fixed;z-index:var(--z-toast);right:var(--space-4);bottom:var(--space-4);display:grid;width:min(24rem,calc(100% - 2rem));gap:var(--space-3)}.toast{border:1px solid var(--border);border-left:.35rem solid var(--accent-2);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--shadow-lg);padding:var(--space-4);animation:toast-in var(--duration-normal) var(--ease-bounce)}.confetti-canvas{position:fixed;z-index:var(--z-toast);inset:0;width:100%;height:100%;pointer-events:none}.palette-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--space-4)}.swatch{display:grid;min-height:8rem;align-content:end;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-3);font-weight:900}.swatch--primary{background:var(--primary);color:var(--on-primary)}.swatch--secondary{background:var(--secondary);color:var(--on-secondary)}.swatch--accent-1{background:var(--accent-1);color:var(--on-accent-1)}.swatch--accent-2{background:var(--accent-2);color:var(--on-accent-2)}.swatch--accent-3{background:var(--accent-3);color:var(--on-accent-3)}.swatch output{font-size:var(--text-sm)}.icon-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:var(--space-3)}.icon-sample{display:grid;place-items:center;gap:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);padding:var(--space-4);text-align:center}.icon-sample .icon{width:2rem;height:2rem}.mascot-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}.mascot-sample{display:grid;place-items:center}.mascot-sample svg{width:min(100%,12rem)}@keyframes mascot-bob{50%{transform:translateY(-.7rem) rotate(2deg)}}@keyframes toast-in{from{opacity:0;transform:translateY(1rem) scale(.96)}}@media(max-width:48rem){.menu-toggle{display:inline-grid}.nav-links{position:absolute;inset:calc(100% + 1px) 1rem auto;display:none;align-items:stretch;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-lg);padding:var(--space-3)}.nav-links[data-open="true"]{display:flex}.nav-links a{padding:.7rem 1rem}.hero{grid-template-columns:1fr;text-align:center}.hero h1,.hero__lead{margin-inline:auto}.hero__mascot{grid-row:1;width:10rem}.game-card{grid-template-columns:1fr}.game-card img{width:4.5rem}.footer-content{align-items:flex-start;flex-direction:column}.mascot-row{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.hero__mascot{animation:none}.game-card:hover,.demo-card:hover,.icon-button:hover,.button:hover{transform:none}}