:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0b1628;--surface: rgba(255, 255, 255, .04);--surface-hover: rgba(255, 255, 255, .08);--border: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .15);--text: #e8edf5;--text-muted: rgba(232, 237, 245, .55);--accent: #4a9eff;--warm: #ff6b35;--warm-dim: rgba(255, 107, 53, .15)}*{box-sizing:border-box;margin:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.hero{position:relative;text-align:center;padding:4rem 1.5rem 3rem;background:linear-gradient(180deg,#0e1f3d 0%,var(--bg) 100%);overflow:hidden}.hero-tag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}.hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;letter-spacing:-.03em;margin-bottom:.75rem}.hero-sub{max-width:28rem;margin:0 auto;color:var(--text-muted);font-size:1rem}.snowflakes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.snowflake{position:absolute;color:#ffffff40;font-size:.8rem;animation:fall linear infinite}@keyframes fall{0%{transform:translateY(-1rem) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(100vh) rotate(360deg);opacity:0}}.snowflake:nth-child(1){left:5%;animation-duration:8s;animation-delay:0s}.snowflake:nth-child(2){left:12%;animation-duration:11s;animation-delay:1s}.snowflake:nth-child(3){left:20%;animation-duration:9s;animation-delay:3s}.snowflake:nth-child(4){left:28%;animation-duration:12s;animation-delay:.5s}.snowflake:nth-child(5){left:35%;animation-duration:10s;animation-delay:2s}.snowflake:nth-child(6){left:42%;animation-duration:7s;animation-delay:4s}.snowflake:nth-child(7){left:50%;animation-duration:13s;animation-delay:1.5s}.snowflake:nth-child(8){left:58%;animation-duration:9s;animation-delay:3.5s}.snowflake:nth-child(9){left:65%;animation-duration:11s;animation-delay:.8s}.snowflake:nth-child(10){left:72%;animation-duration:8s;animation-delay:2.5s}.snowflake:nth-child(11){left:78%;animation-duration:14s;animation-delay:1.2s}.snowflake:nth-child(12){left:85%;animation-duration:10s;animation-delay:4.5s}.snowflake:nth-child(13){left:92%;animation-duration:9s;animation-delay:.3s}.snowflake:nth-child(14){left:8%;animation-duration:12s;animation-delay:5s}.snowflake:nth-child(15){left:48%;animation-duration:11s;animation-delay:2.8s}.snowflake:nth-child(16){left:30%;animation-duration:10s;animation-delay:6s}.snowflake:nth-child(17){left:55%;animation-duration:8s;animation-delay:3.2s}.snowflake:nth-child(18){left:70%;animation-duration:13s;animation-delay:.7s}.snowflake:nth-child(19){left:90%;animation-duration:9s;animation-delay:4.2s}.snowflake:nth-child(20){left:15%;animation-duration:11s;animation-delay:5.5s}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;max-width:72rem;margin:0 auto;padding:2rem 1.5rem}.hat-card{background:var(--surface);border:1px solid var(--border);border-radius:.75rem;padding:1.5rem;cursor:pointer;transition:background .2s,border-color .2s,transform .2s;display:flex;gap:1rem}.hat-card:hover{background:var(--surface-hover);border-color:var(--border-hover);transform:translateY(-2px)}.hat-card.selected{border-color:var(--accent);background:#4a9eff0f}.hat-icon{font-size:2.2rem;flex-shrink:0;line-height:1}.hat-body{flex:1;min-width:0}.hat-card h3{font-size:1.05rem;font-weight:600;margin-bottom:.4rem;letter-spacing:-.01em}.hat-desc{font-size:.82rem;color:var(--text-muted);margin-bottom:.75rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.hat-meta{display:flex;align-items:center;gap:1rem;margin-bottom:.75rem}.material{font-size:.72rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-muted);background:#ffffff0d;padding:.15rem .5rem;border-radius:.25rem}.warmth{display:flex;gap:2px;font-size:.75rem}.warmth-pip.active{filter:none}.warmth-pip:not(.active){color:#ffffff26}.hat-footer{display:flex;align-items:center;justify-content:space-between}.color-swatches{display:flex;gap:4px}.swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.12)}.swatch.lg{width:22px;height:22px}.price{font-size:1.1rem;font-weight:700;color:var(--text)}.detail-panel{position:fixed;right:0;top:0;bottom:0;width:min(400px,90vw);background:#101d33;border-left:1px solid var(--border);padding:2rem;overflow-y:auto;z-index:100;animation:slideIn .3s ease}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.close-btn{position:absolute;top:1rem;right:1rem;background:none;border:1px solid var(--border);color:var(--text-muted);width:2rem;height:2rem;border-radius:.375rem;cursor:pointer;font-size:.85rem;display:grid;place-items:center;transition:color .15s,border-color .15s}.close-btn:hover{color:var(--text);border-color:var(--border-hover)}.detail-icon{font-size:3rem;display:block;margin-bottom:1rem}.detail-panel h2{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.75rem}.detail-panel>p{color:var(--text-muted);font-size:.9rem;margin-bottom:1.5rem}.detail-specs{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1rem;margin-bottom:2rem}.detail-specs dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);align-self:center}.detail-specs dd{font-size:.9rem}.detail-price{font-size:1.3rem;font-weight:700;color:var(--warm)}.cta{width:100%;padding:.85rem;background:var(--accent);color:#fff;border:none;border-radius:.5rem;font-size:.95rem;font-weight:600;cursor:pointer;transition:filter .15s}.cta:hover{filter:brightness(1.15)}.footer{text-align:center;padding:3rem 1.5rem;color:var(--text-muted);font-size:.85rem;border-top:1px solid var(--border);margin-top:1rem}