*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fafafa;--bg-secondary:#fff;--bg-tertiary:#f0f0f0;--text:#171717;--text-muted:#525252;--border:#e5e5e5;--accent:#b8860b;--accent-hover:#9a7209;--success:#34d399;--radius:.5rem;--transition:.15s cubic-bezier(.4,0,.2,1);--font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;flex-direction:column;min-height:100vh;font-weight:400;display:flex}header{border-bottom:1px solid var(--border);background:var(--bg-secondary);z-index:10;justify-content:space-between;align-items:center;height:56px;padding:0 2rem;display:flex;position:sticky;top:0}.logo{letter-spacing:-.025em;color:var(--text);align-items:center;gap:.625rem;font-size:.9375rem;font-weight:500;text-decoration:none;display:flex}.logo-mark{background:var(--accent);border-radius:4px;flex-shrink:0;width:24px;height:24px}.header-left{align-items:center;gap:1rem;display:flex}.header-desc{color:var(--text-muted);font-size:.8125rem}.header-actions{align-items:center;gap:.5rem;display:flex}main{flex:1;grid-template-columns:1fr 340px;display:grid;overflow:hidden}.canvas-pane{background:radial-gradient(ellipse at 50% 40%, #e5c07b0a 0%, transparent 65%), repeating-linear-gradient(0deg, transparent, transparent 39px, var(--border) 39px, var(--border) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, var(--border) 39px, var(--border) 40px), var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:3rem;display:flex}#the-div{width:200px;height:200px;transition:background-color var(--transition), border-radius var(--transition), box-shadow var(--transition), width var(--transition), height var(--transition);background-color:#7ba7e5;border-radius:8px;position:relative;box-shadow:0 20px 60px #7ba7e533,0 4px 16px #00000080}#the-div:after{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,#ffffff14 0%,#0000 55%);position:absolute;inset:0}.canvas-hint{color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-size:.6875rem;font-weight:500}.panel{background:var(--bg-secondary);border-left:1px solid var(--border);flex-direction:column;display:flex;overflow-y:auto}.panel-section{border-bottom:1px solid var(--border);padding:1.5rem}.panel-section:last-child{border-bottom:none}.section-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:1rem;font-size:.6875rem;font-weight:600}.prop-row{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.prop-row:last-child{margin-bottom:0}.prop-label{color:var(--text);white-space:nowrap;font-size:.8125rem;font-weight:500}.prop-value{font-family:var(--font-mono);color:var(--text-muted);text-align:right;min-width:40px;font-size:.75rem}.color-wrap{align-items:center;gap:.5rem;display:flex}.color-swatch{border-radius:var(--radius);border:1px solid var(--border);cursor:pointer;width:28px;height:28px;transition:border-color var(--transition);flex-shrink:0;position:relative;overflow:hidden}.color-swatch:hover{border-color:var(--text-muted)}.color-swatch input[type=color]{opacity:0;cursor:pointer;width:calc(100% + 8px);height:calc(100% + 8px);position:absolute;inset:-4px}.color-swatch-preview{pointer-events:none;background-color:#7ba7e5;width:100%;height:100%}.hex-input{font-family:var(--font-mono);background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);width:88px;transition:border-color var(--transition);padding:.375rem .625rem;font-size:.8125rem}.hex-input:focus{border-color:var(--accent);outline:none}.range-wrap{flex-direction:column;gap:.5rem;display:flex}input[type=range]{appearance:none;background:var(--bg-tertiary);cursor:pointer;border-radius:99px;outline:none;width:100%;height:3px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:2px solid var(--bg-secondary);width:16px;height:16px;box-shadow:0 0 0 1px var(--accent);transition:transform var(--transition), box-shadow var(--transition);border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 0 3px #e5c07b40}input[type=range]::-moz-range-thumb{background:var(--accent);border:2px solid var(--bg-secondary);cursor:pointer;border-radius:50%;width:16px;height:16px}.range-labels{color:var(--text-muted);justify-content:space-between;font-size:.6875rem;display:flex}.size-inputs{gap:.5rem;display:flex}.size-field{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--transition);flex:1;align-items:center;gap:.375rem;padding:.375rem .625rem;display:flex}.size-field:focus-within{border-color:var(--accent)}.size-field label{color:var(--text-muted);font-size:.6875rem;font-weight:500}.size-field input{color:var(--text);font-family:var(--font-mono);background:0 0;border:none;outline:none;width:44px;font-size:.8125rem}.size-unit{color:var(--text-muted);font-size:.6875rem}.toggle-row{justify-content:space-between;align-items:center;display:flex}.toggle{flex-shrink:0;width:36px;height:20px;position:relative}.toggle input{opacity:0;width:0;height:0}.toggle-track{background:var(--bg-tertiary);border:1px solid var(--border);cursor:pointer;transition:background var(--transition), border-color var(--transition);border-radius:99px;position:absolute;inset:0}.toggle-track:before{content:"";background:var(--text-muted);width:12px;height:12px;transition:transform var(--transition), background var(--transition);border-radius:50%;position:absolute;top:3px;left:3px}.toggle input:checked+.toggle-track{background:var(--accent);border-color:var(--accent)}.toggle input:checked+.toggle-track:before{background:var(--bg);transform:translate(16px)}.css-preview{background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);color:var(--text-muted);white-space:pre;padding:1rem;font-size:.75rem;line-height:1.75;overflow-x:auto}.css-prop{color:var(--text-muted)}.css-val{color:var(--accent)}.css-semi{color:var(--border)}.btn-export{background:var(--accent);width:100%;color:var(--bg);border-radius:var(--radius);font-family:var(--font-sans);cursor:pointer;transition:background var(--transition), transform var(--transition);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.875rem;font-weight:500;display:flex}.btn-export:hover{background:var(--accent-hover)}.btn-export:active{transform:scale(.99)}.btn-export.copied{background:var(--success);color:#0a0a0a}.btn-export svg{flex-shrink:0}@media (width<=720px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}.canvas-pane{min-height:280px;padding:2rem 1.5rem}.panel{border-left:none;border-top:1px solid var(--border)}}