*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #0a1628;--bg-card: rgba(255, 255, 255, .06);--border: rgba(255, 255, 255, .12);--text: #e0e8f0;--text-dim: #7a8da6;--accent: #a8d8ea;--accent-hover: #c8ecf8}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(170deg,#0a1628,#1a2744 40%,#0d1f3c);color:var(--text);min-height:100vh;overflow-x:hidden}.snowfall{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.snowflake-particle{position:absolute;top:-10px;color:#fff6;font-size:10px;animation:fall linear infinite;pointer-events:none}@keyframes fall{0%{transform:translateY(-10px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(360deg);opacity:.2}}main{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:3rem 1.5rem 2rem}header{text-align:center;margin-bottom:2.5rem}h1{font-size:2.5rem;font-weight:300;letter-spacing:.1em;color:var(--accent)}.tagline{color:var(--text-dim);font-size:1rem;margin-top:.3rem;letter-spacing:.05em}.subtitle{color:var(--text-dim);font-size:.85rem;margin-top:.5rem;opacity:.7}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.input-row{display:flex;gap:.5rem;align-items:stretch}textarea{flex:1;background:#0000004d;border:1px solid var(--border);border-radius:8px;padding:.75rem;color:var(--text);font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:.85rem;resize:vertical;outline:none;transition:border-color .2s}textarea:focus{border-color:var(--accent)}.generate-btn{background:#a8d8ea14;border:1px solid var(--border);border-radius:10px;width:48px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;flex-shrink:0}.generate-btn:hover{background:#a8d8ea2e;border-color:var(--accent);transform:scale(1.05)}.generate-btn:active{transform:scale(.95)}.generate-btn .dice{font-size:1.5rem;color:var(--accent);line-height:1}.preview{display:flex;justify-content:center;align-items:center;margin:1.5rem 0;min-height:300px}.preview svg{width:280px;height:280px;filter:drop-shadow(0 0 20px rgba(168,216,234,.3));transition:filter .3s}.preview svg:hover{filter:drop-shadow(0 0 30px rgba(168,216,234,.5))}.actions{display:flex;gap:.5rem;justify-content:center}.actions button{background:#a8d8ea1a;border:1px solid rgba(168,216,234,.25);color:var(--accent);padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.8rem;transition:all .2s}.actions button:hover{background:#a8d8ea33;border-color:var(--accent)}.actions button.copied{background:#64c86433;border-color:#64c86480;color:#90ee90}.examples{margin-top:1.5rem;text-align:center}.examples p{color:var(--text-dim);font-size:.8rem;margin-bottom:.75rem}.example-buttons{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}.example-buttons button{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:.35rem .7rem;border-radius:20px;cursor:pointer;font-size:.75rem;transition:all .2s}.example-buttons button:hover{border-color:var(--accent);color:var(--accent)}.gallery{margin-top:3rem}.gallery h2{text-align:center;font-weight:300;font-size:1.2rem;color:var(--text-dim);margin-bottom:1rem;letter-spacing:.08em}.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.gallery-item{display:flex;flex-direction:column;align-items:center;gap:.3rem}.gallery-item svg{width:100%;height:auto;filter:drop-shadow(0 0 8px rgba(168,216,234,.2));transition:filter .3s,transform .3s}.gallery-item svg:hover{filter:drop-shadow(0 0 16px rgba(168,216,234,.4));transform:scale(1.05)}.gallery-item span{font-size:.65rem;color:var(--text-dim);text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}footer{margin-top:3rem;text-align:center;color:var(--text-dim);font-size:.8rem}footer a{color:var(--accent);text-decoration:none}footer a:hover{text-decoration:underline}footer code{background:#ffffff0f;padding:.15rem .4rem;border-radius:4px;font-size:.75rem}@media(max-width:500px){main{padding:2rem 1rem}h1{font-size:2rem}.preview svg{width:220px;height:220px}.gallery-grid{grid-template-columns:repeat(2,1fr)}.actions{flex-wrap:wrap}}