:root{--color-background-primary: #444444;--color-background-secondary: #2a2a2a;--color-background-tertiary: #333;--color-background-input: #1e1e1e;--color-background-slider: #555;--color-text-primary: #ffffff;--color-text-secondary: #ccc;--color-text-accent: #4fc3f7;--color-text-success: #81c784;--color-border-primary: #444;--color-accent-primary: #4fc3f7;--color-accent-secondary: #29b6f6;--shadow-primary: 0 4px 20px rgba(0,0,0,.3);--shadow-secondary: 0 2px 4px rgba(0,0,0,.3)}[data-theme=light]{--color-background-primary: #f5f5f5;--color-background-secondary: #ffffff;--color-background-tertiary: #f5f5f5;--color-background-input: #ffffff;--color-background-slider: #d0d0d0;--color-text-primary: #333333;--color-text-secondary: #666666;--color-text-accent: #030303;--color-text-success: #4caf50;--color-border-primary: #cccccc;--color-accent-primary: #2196f3;--color-accent-secondary: #1976d2;--shadow-primary: 0 4px 20px rgba(0,0,0,.1);--shadow-secondary: 0 2px 4px rgba(0,0,0,.1)}body{align-items:center;background:var(--color-background-primary);box-sizing:border-box;color:var(--color-text-primary);display:flex;flex-direction:column;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;height:100vh;justify-content:center;margin:0;padding:10px}.container{background:var(--color-background-secondary);border-radius:10px;box-shadow:var(--shadow-primary);display:flex;flex-direction:column;width:100%;max-width:800px;padding:15px}.theme-toggle{display:flex;justify-content:flex-end;position:absolute;right:10px;top:10px;z-index:10}.theme-btn{align-items:center;background:var(--color-background-tertiary);border:1px solid var(--color-border-primary);border-radius:50%;box-shadow:var(--shadow-secondary);color:var(--color-text-accent);cursor:pointer;display:flex;font-size:16px;height:40px;justify-content:center;transition:all .5s ease;width:40px}.theme-btn:hover{background:var(--color-accent-primary);border-color:var(--color-accent-primary);color:var(--color-background-primary)}h1{color:var(--color-text-accent);font-size:24px;margin-bottom:10px;text-align:center}.preview-section{margin-bottom:15px;position:relative;text-align:center}.preview-canvas{background:#000;height:60px;width:100%}.controls{display:grid;flex:1;gap:10px;grid-template-columns:1fr 1fr;margin-bottom:15px}@media (max-width: 600px){body{justify-content:flex-start;padding:5px}.container{padding:10px}.controls{display:flex;flex-direction:column;gap:10px}.preview-canvas{height:50px}.code-output{font-size:10px;padding:8px}}.control-group{background:var(--color-background-tertiary);border-radius:8px;padding:12px}.control-group h3{color:var(--color-text-success);font-size:14px;margin-bottom:8px;margin-top:0}.slider-container{margin-bottom:8px}.slider-container label{color:var(--color-text-secondary);display:block;font-size:12px;margin-bottom:3px}.slider-row{align-items:center;display:flex;gap:10px}input[type=range]{background:var(--color-background-slider);border-radius:3px;flex:1;height:6px;outline:none;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--color-accent-primary);border-radius:50%;cursor:pointer;height:18px;width:18px;-webkit-appearance:none}input[type=range]::-moz-range-thumb{background:var(--color-accent-primary);border:none;border-radius:50%;cursor:pointer;height:18px;width:18px}.value-display{background:var(--color-background-input);border:1px solid var(--color-border-primary);border-radius:3px;color:var(--color-text-accent);font-family:monospace;font-size:12px;min-width:60px;outline:none;padding:2px 6px;text-align:right}.value-display:focus{border-color:var(--color-accent-primary)}.code-output{background:var(--color-background-input);border:1px solid var(--color-border-primary);border-radius:8px;color:var(--color-text-accent);flex-shrink:0;font-family:Courier New,monospace;font-size:12px;line-height:1.3;margin-top:10px;padding:10px;position:relative;white-space:pre-wrap;overflow-x:auto;overflow-y:auto;min-height:calc(6 * 1.3em + 20px)}.copy-btn{align-items:center;background:var(--color-accent-primary);border:none;border-radius:4px;box-shadow:var(--shadow-secondary);color:#000;cursor:pointer;display:flex;font-size:14px;height:24px;justify-content:center;position:absolute;right:8px;top:8px;transition:background-color .2s;width:24px;z-index:1000}.copy-btn:hover{background:var(--color-accent-secondary)}@keyframes pulse{0%{border-color:var(--color-border-primary)}50%{border-color:var(--color-accent-primary)}to{border-color:var(--color-border-primary)}}.code-output.copied{animation:pulse .6s ease-in-out}.info{background:var(--color-background-tertiary);border-radius:8px;font-size:14px;line-height:1.5;margin-bottom:20px;padding:15px}.info strong{color:var(--color-text-success)}.footer{margin-top:15px;padding:8px 0;text-align:right;border-top:1px solid var(--color-border-primary);opacity:.7}.footer-content{color:var(--color-text-secondary);font-size:10px;letter-spacing:.3px}.footer-content p{margin:0}.footer a{color:var(--color-text-secondary);text-decoration:none;transition:color .2s ease;font-weight:400}.footer a:hover{color:var(--color-text-primary);opacity:1}