@import"https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700&display=swap";:root{--color-bg: #0D0D0D;--color-surface: #171717;--color-surface-elevated: #1F1F1F;--color-border: #2A2A2A;--color-text: #FAFAFA;--color-text-muted: #8A8A8A;--color-accent: #E85D04;--color-accent-hover: #F97316;--color-preview-bg: #F5F0EB;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--font-family: "Bricolage Grotesque", system-ui, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font-family);background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{height:100vh;display:flex;flex-direction:column;overflow:hidden}.header{padding:20px 32px;border-bottom:1px solid var(--color-border);flex-shrink:0;display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--color-text)}.logo span{color:var(--color-accent)}.gradient-link{display:flex;align-items:center;gap:8px;padding:8px 14px;background-color:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.85rem;font-weight:500;text-decoration:none;transition:all .15s ease}.gradient-link:hover{border-color:var(--color-text-muted);transform:translateY(-1px)}.gradient-link svg{flex-shrink:0}.main{flex:1;display:grid;grid-template-columns:1fr 400px;min-height:0}.preview-section{display:flex;flex-direction:column;padding:32px;gap:20px;min-height:0}.preview-container{flex:1;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);transition:background-color .3s ease;min-height:0}.preview-box{width:200px;height:200px;border-radius:var(--radius-lg);transition:box-shadow .15s ease}.preview-controls{display:flex;gap:24px;flex-shrink:0}.controls-section{background-color:var(--color-surface);border-left:1px solid var(--color-border);display:flex;flex-direction:column;min-height:0}.controls-inner{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:28px}.controls-inner::-webkit-scrollbar{width:6px}.controls-inner::-webkit-scrollbar-track{background:transparent}.controls-inner::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}.controls-inner::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.section-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted)}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.presets{display:flex;flex-direction:column;gap:12px}.preset-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.preset-btn{flex:1;padding:10px 12px;background-color:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-family:var(--font-family);font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s ease}.preset-btn:hover{background-color:var(--color-border);border-color:var(--color-text-muted)}.shadow-layers{display:flex;flex-direction:column}.add-layer-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background-color:var(--color-accent);border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;transition:background-color .15s ease}.add-layer-btn:hover{background-color:var(--color-accent-hover)}.layer-tabs{display:flex;gap:8px;flex-wrap:wrap}.layer-tab{display:flex;align-items:center;gap:6px;padding:8px 14px;background-color:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-family:var(--font-family);font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s ease}.layer-tab:hover{border-color:var(--color-text-muted)}.layer-tab.active{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff}.remove-layer{display:flex;align-items:center;justify-content:center;width:16px;height:16px;background:transparent;border:none;color:inherit;font-size:1rem;line-height:1;cursor:pointer;opacity:.6;transition:opacity .15s ease}.remove-layer:hover{opacity:1}.sliders-container{display:flex;flex-direction:column;gap:20px}.slider-control{display:flex;flex-direction:column;gap:10px}.slider-header{display:flex;justify-content:space-between;align-items:center}.slider-header label{font-size:.85rem;font-weight:500;color:var(--color-text)}.slider-value{font-size:.8rem;font-weight:500;color:var(--color-text-muted);font-variant-numeric:tabular-nums;min-width:40px;text-align:right}.slider-root{position:relative;display:flex;align-items:center;width:100%;height:20px;touch-action:none;-webkit-user-select:none;user-select:none}.slider-track{position:relative;flex-grow:1;height:4px;background-color:var(--color-border);border-radius:2px}.slider-range{position:absolute;height:100%;background-color:var(--color-accent);border-radius:2px}.slider-thumb{display:block;width:18px;height:18px;background-color:var(--color-text);border-radius:50%;box-shadow:0 2px 8px #0006;cursor:grab;transition:transform .15s ease,box-shadow .15s ease}.slider-thumb:hover{transform:scale(1.1)}.slider-thumb:active{cursor:grabbing}.slider-thumb:focus{outline:none;box-shadow:0 0 0 3px #e85d044d,0 2px 8px #0006}.control-row{display:flex;gap:20px;align-items:flex-start}.color-control{display:flex;flex-direction:column;gap:8px}.color-control.inline{flex:1}.color-control label{font-size:.85rem;font-weight:500;color:var(--color-text)}.color-input-wrapper{display:flex;align-items:center;gap:10px;padding:6px 10px;background-color:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.color-input-wrapper input[type=color]{width:24px;height:24px;padding:0;border:none;border-radius:4px;cursor:pointer;background:none}.color-input-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-input-wrapper input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.color-input-wrapper span{font-size:.8rem;font-weight:500;color:var(--color-text-muted);text-transform:uppercase;font-variant-numeric:tabular-nums}.switch-control{display:flex;flex-direction:column;gap:8px}.switch-control label{font-size:.85rem;font-weight:500;color:var(--color-text)}.switch-root{width:44px;height:24px;background-color:var(--color-border);border-radius:12px;position:relative;cursor:pointer;border:none;transition:background-color .15s ease}.switch-root[data-state=checked]{background-color:var(--color-accent)}.switch-thumb{display:block;width:18px;height:18px;background-color:#fff;border-radius:50%;box-shadow:0 1px 3px #0000004d;transition:transform .15s ease;transform:translate(3px)}.switch-thumb[data-state=checked]{transform:translate(23px)}.output-section{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--color-border)}.output-header{display:flex;justify-content:space-between;align-items:center}.copy-btn{padding:8px 16px;background-color:var(--color-accent);border:none;border-radius:var(--radius-sm);color:#fff;font-family:var(--font-family);font-size:.8rem;font-weight:600;cursor:pointer;transition:background-color .15s ease;min-width:80px}.copy-btn:hover{background-color:var(--color-accent-hover)}.output-code{display:block;padding:16px;background-color:var(--color-surface-elevated);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:SF Mono,Fira Code,monospace;font-size:.75rem;line-height:1.6;color:var(--color-text);word-break:break-all;white-space:pre-wrap}.reset-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background-color:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);cursor:pointer;transition:all .15s ease}.reset-btn:hover{background-color:var(--color-surface-elevated);border-color:var(--color-text-muted);color:var(--color-text)}@media (max-width: 900px){.main{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.controls-section{border-left:none;border-top:1px solid var(--color-border)}.preview-section{padding:20px}.preview-box{width:160px;height:160px}.preview-controls{flex-wrap:wrap}}