:root{color-scheme:dark;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5;--cyan: #00d4ff;--green: #00ff88;--bg: #0a0a0a;--surface: #141414;--surface2: #1e1e1e;--text: #e0e0e0;--text-dim: #888;--border: rgba(255, 255, 255, .08)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(135deg,#0d0221,#0a0a0a,#020d1a);background-size:400% 400%;animation:bgShift 15s ease infinite}@keyframes bgShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.app{max-width:1100px;margin:0 auto;padding:1.5rem 1rem;min-height:100vh;display:flex;flex-direction:column}.app-header{text-align:center;padding:2rem 0 1.5rem}.logo{font-size:2rem;font-weight:800;letter-spacing:.04em;margin-bottom:.35rem}.tagline{font-size:.85rem;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim)}.main-area{flex:1}.studio-layout{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:start}.canvas-panel{display:flex;flex-direction:column;gap:1rem}.canvas-grid{display:grid;grid-template-columns:repeat(16,1fr);width:min(480px,calc(100vw - 2rem));height:min(480px,calc(100vw - 2rem));border:2px solid var(--cyan);border-radius:4px;overflow:hidden;box-shadow:0 0 20px #00d4ff26;cursor:crosshair;touch-action:none}.canvas-grid.no-grid .pixel{border:none}.canvas-grid.with-grid .pixel{border:.5px solid rgba(255,255,255,.06)}.pixel{aspect-ratio:1;transition:none;user-select:none;-webkit-user-select:none}.pixel:active{filter:brightness(1.3)}.preview-section{display:flex;align-items:center;gap:.75rem}.preview-label{font-size:.7rem;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim)}.preview-box{border:1px solid var(--border);border-radius:4px;overflow:hidden;line-height:0}.preview-box canvas{display:block}.controls-panel{display:flex;flex-direction:column;gap:1.25rem;min-width:240px}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-label{font-size:.65rem;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim)}.btn{font-family:inherit;font-size:.8rem;font-weight:600;border:1px solid var(--border);border-radius:6px;padding:.5rem 1rem;background:var(--surface);color:var(--text);cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.btn:hover:not(:disabled){background:var(--surface2);border-color:#ffffff26}.btn:disabled{opacity:.35;cursor:not-allowed}.tool-row{display:flex;gap:.5rem}.btn-tool.active{border-color:var(--green);color:var(--green);background:#00ff8814}.action-row{display:flex;gap:.5rem;flex-wrap:wrap}.btn-action.active{border-color:var(--cyan);color:var(--cyan)}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}.color-swatch{aspect-ratio:1;border:2px solid transparent;border-radius:4px;cursor:pointer;transition:all .15s ease;padding:0}.color-swatch:hover{transform:scale(1.15)}.color-swatch.selected{border-color:#fff;box-shadow:0 0 8px #ffffff4d;transform:scale(1.1)}.custom-color-row{margin-top:.25rem}.custom-color-label{font-size:.75rem;color:var(--text-dim);display:flex;align-items:center;gap:.5rem;cursor:pointer}.custom-color-label input[type=color]{width:28px;height:28px;border:1px solid var(--border);border-radius:4px;background:none;cursor:pointer;padding:0}.mint-group{margin-top:.5rem}.btn-mint{font-size:1rem;font-weight:800;letter-spacing:2px;padding:.85rem 1.5rem;border:none;border-radius:8px;background:var(--surface2);color:var(--text-dim);width:100%}.btn-mint.enabled{background:linear-gradient(135deg,#00d4ff,#0f8);color:#0a0a0a;box-shadow:0 0 20px #00d4ff4d,0 0 40px #00ff8826;animation:mintGlow 2s ease-in-out infinite;cursor:pointer}.btn-mint.enabled:hover{box-shadow:0 0 30px #00d4ff80,0 0 60px #00ff8840;transform:translateY(-1px)}@keyframes mintGlow{0%,to{box-shadow:0 0 20px #00d4ff4d,0 0 40px #00ff8826}50%{box-shadow:0 0 30px #00d4ff80,0 0 60px #00ff8840}}.nft-reveal{display:flex;flex-direction:column;align-items:center;gap:1.5rem;animation:cardReveal .5s ease-out}@keyframes cardReveal{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.nft-card{background:#000c;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:2px solid;border-radius:16px;padding:2rem;max-width:360px;width:100%;display:flex;flex-direction:column;align-items:center;gap:.75rem;position:relative;overflow:hidden}.nft-card.legendary-shimmer:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,transparent 30%,rgba(255,190,11,.08) 50%,transparent 70%);background-size:200% 100%;animation:shimmer 3s linear infinite;pointer-events:none}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.nft-art-container{border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden;line-height:0}.nft-art-container canvas{display:block}.nft-name{font-size:1.5rem;font-weight:800;margin-top:.5rem;text-align:center}.rarity-badge{font-size:.65rem;font-weight:700;letter-spacing:2px;padding:.25rem .75rem;border-radius:999px}.edition-text{font-size:.85rem;color:var(--text-dim)}.traits-row{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}.trait-chip{font-size:.65rem;padding:.2rem .55rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:var(--text-dim);background:#ffffff08}.contract-text{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;color:var(--text-dim);margin-top:.25rem}.token-text{font-size:.7rem;color:var(--text-dim)}.floor-price{font-size:.9rem;margin-top:.25rem}.floor-value{font-weight:700;color:var(--green)}.floor-label{color:var(--text-dim);font-size:.75rem}.nft-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.btn-share{background:linear-gradient(135deg,#1a1a2e,#16213e);border-color:#ffffff26;color:#fff}.btn-share:hover:not(:disabled){border-color:var(--cyan)}.btn-mint-another{border-color:var(--green);color:var(--green);background:#00ff880d}.btn-mint-another:hover{background:#00ff881f}.btn-view-collection{border-color:var(--cyan);color:var(--cyan);background:#00d4ff0d}.btn-view-collection:hover{background:#00d4ff1f}.collection-section{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}.collection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.section-title{font-size:1.1rem;font-weight:700;color:var(--cyan)}.btn-clear{font-size:.7rem;border-color:#ff006e44;color:#ff006e;background:#ff006e0d}.btn-clear:hover{background:#ff006e1f}.stats-bar{font-size:.75rem;color:var(--text-dim);padding:.5rem 0;border-bottom:1px solid var(--border);margin-bottom:1rem}.empty-collection{color:var(--text-dim);font-size:.85rem;text-align:center;padding:2rem 0}.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.collection-thumb{background:var(--surface);border:1px solid;border-radius:8px;padding:.75rem;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;gap:.5rem}.collection-thumb:hover{transform:translateY(-2px);border-color:#ffffff26;box-shadow:0 4px 12px #0006}.collection-thumb canvas{border-radius:4px;display:block}.thumb-info{text-align:center;display:flex;flex-direction:column;gap:.15rem}.thumb-name{font-size:.7rem;font-weight:600;color:var(--text)}.thumb-rarity{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:grid;place-items:center;padding:1rem;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{position:relative;max-height:90vh;overflow-y:auto}.modal-close{position:absolute;top:-.5rem;right:-.5rem;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.2rem;cursor:pointer;z-index:10;display:grid;place-items:center;transition:all .2s ease}.modal-close:hover{border-color:var(--cyan);color:var(--cyan)}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);background:var(--surface2);border:1px solid var(--cyan);color:var(--cyan);padding:.65rem 1.25rem;border-radius:8px;font-size:.8rem;font-weight:600;z-index:2000;animation:toastIn .3s ease;box-shadow:0 0 20px #00d4ff33}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.app-footer{text-align:center;padding:2rem 0 1rem;font-size:.7rem;color:var(--text-dim);border-top:1px solid rgba(0,212,255,.1);margin-top:3rem;letter-spacing:1px}@media(max-width:720px){.studio-layout{grid-template-columns:1fr;justify-items:center}.controls-panel{min-width:unset;width:100%;max-width:480px}.canvas-grid{width:min(360px,calc(100vw - 2rem));height:min(360px,calc(100vw - 2rem))}.logo{font-size:1.4rem}.palette{grid-template-columns:repeat(8,1fr)}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}