*{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#0a0a0a;min-height:100vh;font-family:Courier New,monospace;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}.app{flex-direction:column;align-items:center;min-height:100vh;padding:20px 16px;display:flex}header{text-align:center;margin-bottom:20px}.title{color:#ff6b4a;text-shadow:0 0 20px #ff6b4a66;margin-bottom:6px;font-family:"Press Start 2P",monospace;font-size:28px}.tagline{color:#666;font-size:13px;font-style:italic}.intro{text-align:center;width:100%;max-width:640px;margin-bottom:8px}.intro-text{color:#999;margin-bottom:10px;font-size:13px;line-height:1.5}.intro-terminal{background:#111;border:1px solid #222;padding:10px 14px;overflow-x:auto}.intro-terminal code{color:#4caf50;white-space:nowrap;font-family:Courier New,monospace;font-size:13px}main{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:640px;display:flex}.preview-container{background:#111;border:2px solid #222;justify-content:center;align-items:center;padding:12px;display:flex}.preview-canvas{width:280px;height:280px;image-rendering:pixelated;image-rendering:crisp-edges}.customizer{flex-direction:column;gap:8px;width:100%;display:flex}.option-row{background:#111;border:1px solid #222;flex-direction:column;align-items:center;gap:6px;padding:10px;display:flex}.option-label{color:#888;text-transform:uppercase;font-family:"Press Start 2P",monospace;font-size:9px}.option-thumbnails{flex-wrap:wrap;flex:1;justify-content:center;gap:4px;display:flex}.option-thumb{cursor:pointer;background:#fff;border:2px solid #333;flex-direction:column;justify-content:center;align-items:center;gap:1px;width:64px;padding:2px;transition:border-color .15s;display:flex}.option-thumb-label{color:#1a1a1a;text-align:center;word-wrap:break-word;width:100%;font-family:Courier New,monospace;font-size:10px;line-height:1.2}.option-thumb.selected .option-thumb-label{color:#ff6b4a}.option-thumb:hover{border-color:#555}.option-thumb.selected{border-color:#ff6b4a}.mini-preview{width:56px;height:56px;image-rendering:pixelated;image-rendering:crisp-edges;display:block}.mini-preview-empty{color:#999;justify-content:center;align-items:center;width:56px;height:56px;font-size:16px;display:flex}.color-picker{flex-direction:column;flex:1;align-items:center;gap:8px;display:flex}.color-swatches{flex-wrap:wrap;justify-content:center;gap:5px;display:flex}.color-swatch{cursor:pointer;border:2px solid #333;border-radius:50%;width:26px;height:26px;transition:border-color .15s}.color-swatch:hover{border-color:#666}.color-swatch.selected{border-color:#fff;box-shadow:0 0 6px #ffffff4d}.color-swatch-custom{color:#0000;justify-content:center;align-items:center;font-size:12px;display:flex;background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red)!important}.custom-color-input{align-items:center;gap:8px;display:flex}.custom-color-input input[type=color]{cursor:pointer;background:0 0;border:none;width:36px;height:36px;padding:0}.custom-color-input input[type=text]{color:#e0e0e0;background:#1a1a1a;border:1px solid #333;width:100px;padding:6px 10px;font-family:Courier New,monospace;font-size:14px}.custom-color-input input[type=text]:focus{border-color:#ff6b4a;outline:none}.share-section{flex-direction:column;gap:10px;width:100%;display:flex}.terminal-box{background:#111;border:1px solid #222;width:100%;overflow:hidden}.terminal-header{color:#666;background:#1a1a1a;border-bottom:1px solid #222;justify-content:space-between;align-items:center;padding:6px 10px;font-family:Courier New,monospace;font-size:10px;display:flex}.terminal-copy-btn{color:#4caf50;cursor:pointer;background:#333;border:1px solid #4caf50;padding:3px 8px;font-family:"Press Start 2P",monospace;font-size:7px;transition:all .15s}.terminal-copy-btn:hover{color:#fff;background:#4caf50}.terminal-input{color:#4caf50;box-sizing:border-box;background:#0a0a0a;border:none;outline:none;width:100%;padding:8px 10px;font-family:Courier New,monospace;font-size:12px}.share-buttons{flex-wrap:wrap;gap:8px;display:flex}.share-btn{cursor:pointer;color:#e0e0e0;text-align:center;white-space:nowrap;background:#1a1a1a;border:2px solid #333;flex:1;padding:10px 16px;font-family:"Press Start 2P",monospace;font-size:9px;transition:all .15s}.share-btn:hover{transform:translateY(-1px)}.share-btn:active{transform:translateY(0)}.share-x{color:#1da1f2;border-color:#1da1f2}.share-x:hover{color:#fff;background:#1da1f2}.share-download{color:#ab47bc;border-color:#ab47bc}.share-download:hover{color:#fff;background:#ab47bc}.share-link{color:#ff6b4a;border-color:#ff6b4a}.share-link:hover{color:#fff;background:#ff6b4a}.toast{color:#fff;z-index:100;background:#333;padding:10px 16px;font-family:"Press Start 2P",monospace;font-size:9px;animation:.2s ease-out toastIn;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@keyframes toastIn{0%{opacity:0;transform:translate(-50%)translateY(10px)}to{opacity:1;transform:translate(-50%)translateY(0)}}footer{text-align:center;color:#666;margin-top:auto;padding:24px 0 16px;font-size:14px}footer a{color:#ff6b4a;text-decoration:none}footer a:hover{text-decoration:underline}@media (width<=480px){.app{padding:12px 10px}.title{font-size:20px}.tagline{font-size:11px}.preview-canvas{width:220px;height:220px}.preview-container{padding:8px}.option-row{padding:6px 8px}.option-label{font-size:8px}.option-thumbnails{gap:3px}.option-thumb{width:52px}.mini-preview,.mini-preview-empty{width:44px;height:44px}.option-thumb-label{font-size:8px}.color-swatch{width:22px;height:22px}.share-btn{padding:8px 10px;font-size:7px}.terminal-input{font-size:10px}}@media (width<=360px){.title{font-size:16px}.preview-canvas{width:180px;height:180px}.share-buttons{flex-direction:column}}