*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden;background:#000}.canvas-container{position:fixed;inset:0;z-index:0;transition:opacity .4s ease}.canvas-container.fading{opacity:0}.canvas-container canvas{display:block}.overlay{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .5s ease}.overlay.visible{opacity:1}.overlay-title{position:absolute;bottom:100px;left:32px;pointer-events:auto}.overlay-title h1{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:36px;font-weight:300;letter-spacing:.05em;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.8)}.overlay-title p{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:14px;font-weight:300;color:#ffffffb3;margin-top:4px;text-shadow:0 1px 10px rgba(0,0,0,.8)}.overlay-seed{position:absolute;top:24px;right:24px;display:flex;align-items:center;gap:8px;pointer-events:auto}.overlay-seed button{background:#ffffff1a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .2s}.overlay-seed button:hover{background:#fff3}.seed-number{font-family:Courier New,monospace;font-size:14px;color:#fff9;min-width:60px;text-align:center}.thumbnail-strip{position:fixed;bottom:20px;left:20px;right:20px;z-index:10;display:flex;gap:8px;padding:8px 12px;background:#0006;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:12px;border:1px solid rgba(255,255,255,.08);opacity:0;transition:opacity .5s ease;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none}.thumbnail-strip::-webkit-scrollbar{display:none}.thumbnail-strip.visible{opacity:1}.thumbnail{width:64px;min-width:64px;height:48px;border-radius:6px;border:2px solid transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:border-color .2s,transform .2s;position:relative;overflow:hidden}.thumbnail:hover{transform:scale(1.1)}.thumbnail.active{border-width:2px}.thumbnail-label{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:8px;font-weight:500;color:#fffc;text-transform:uppercase;letter-spacing:.08em}.thumbnail-swatch{display:flex;gap:2px}.thumbnail-swatch span{width:8px;height:8px;border-radius:50%}@media(max-width:600px){.overlay-title h1{font-size:24px}.overlay-title{bottom:80px;left:16px}.thumbnail{width:48px;height:36px}.thumbnail-label{font-size:6px}}