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