*,*:before,*:after{box-sizing:border-box}:root{--bg: #0f172a;--surface: #1e293b;--surface-hover: #334155;--border: #334155;--text: #f1f5f9;--text-muted: #94a3b8;--accent: #06b6d4;--accent-hover: #22d3ee}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}.app{max-width:700px;margin:0 auto;padding:2rem}.header{margin-bottom:2rem}.back{display:inline-block;color:var(--text-muted);text-decoration:none;margin-bottom:1rem;font-size:.9rem;transition:color .2s}.back:hover{color:var(--accent)}.header-content{display:flex;justify-content:space-between;align-items:flex-start}h1{margin:0 0 .25rem;font-size:1.75rem}.header p{color:var(--text-muted);margin:0}.btn{padding:.625rem 1.25rem;font-size:.9rem;font-weight:500;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s}.btn:hover{background:var(--surface-hover);border-color:var(--accent)}.btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}.btn.primary:hover{background:var(--accent-hover)}.preview{margin-bottom:2rem}.preview-swatch{height:200px;border-radius:12px;margin-bottom:1rem}.preview-actions{display:flex;gap:.75rem}.controls{background:var(--surface);padding:1.5rem;border-radius:12px;margin-bottom:1.5rem}.control{margin-bottom:1.25rem}.control:last-child{margin-bottom:0}.control label{display:block;font-size:.9rem;color:var(--text-muted);margin-bottom:.5rem}.control select{width:100%;padding:.625rem;font-size:.9rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text)}.control input[type=range]{flex:1;accent-color:var(--accent)}.color-row{display:flex;align-items:center;gap:1rem}.color-row input[type=color]{width:48px;height:32px;padding:0;border:none;border-radius:6px;cursor:pointer;background:transparent}.color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-row input[type=color]::-webkit-color-swatch{border:none;border-radius:6px}.color-row span{min-width:40px;text-align:right;font-family:SF Mono,Monaco,Consolas,monospace;font-size:.85rem;color:var(--text-muted)}.toggle{display:flex;align-items:center;gap:.5rem;font-size:.85rem;cursor:pointer;margin-left:auto}.toggle input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.output{background:var(--surface);padding:1.5rem;border-radius:12px;margin-bottom:2rem}.output label{display:block;font-size:.9rem;color:var(--text-muted);margin-bottom:.5rem}.output pre{margin:0;padding:1rem;background:var(--bg);border-radius:8px;font-family:SF Mono,Monaco,Consolas,monospace;font-size:.85rem;overflow-x:auto;white-space:pre-wrap;word-break:break-all}.footer{text-align:center;padding-top:2rem;border-top:1px solid var(--border);color:var(--text-muted);font-size:.9rem}.footer a{color:var(--accent);text-decoration:none}.footer a:hover{text-decoration:underline}.footer-credit{margin-top:.5rem;font-size:.8rem}