@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-dark: #0f1115;--bg-panel: rgba(255, 255, 255, .03);--bg-panel-hover: rgba(255, 255, 255, .05);--border-glass: rgba(255, 255, 255, .1);--border-glass-light: rgba(255, 255, 255, .15);--text-main: #ffffff;--text-muted: #8b949e;--grad-sunset: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);--grad-ocean: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--grad-aurora: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);--grad-midnight: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--grad-candy: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 24px;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background-color:var(--bg-dark);color:var(--text-main);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glass-panel{background:var(--bg-panel);border:1px solid var(--border-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-md)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-glass-light);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.w-full{width:100%}.h-full{height:100%}.app-container{display:flex;flex-direction:column;min-height:100vh}.header{height:60px;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-glass)}.header h1{font-size:1.25rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.main-content{display:flex;flex:1;overflow:hidden}.workspace{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;padding:2rem;position:relative}.sidebar{width:320px;border-left:1px solid var(--border-glass);background:#0f111580;display:flex;flex-direction:column}.code-editor-section{flex:1;display:flex;flex-direction:column;padding:1.5rem}textarea.raw-code-input{flex:1;width:100%;background:var(--bg-panel);border:1px solid var(--border-glass);border-radius:var(--radius-md);padding:1rem;color:var(--text-main);font-family:var(--font-mono);font-size:.875rem;resize:none;outline:none;transition:border-color .2s}textarea.raw-code-input:focus{border-color:#ffffff4d}.controls-section{padding:1.5rem;border-top:1px solid var(--border-glass);display:flex;flex-direction:column;gap:1.5rem}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:600}.theme-presets{display:flex;flex-wrap:wrap;gap:.5rem}.theme-btn{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .2s,border-color .2s}.theme-btn:hover{transform:scale(1.1)}.theme-btn.active{border-color:#fff}.export-btn{width:100%;padding:.75rem;background:var(--text-main);color:var(--bg-dark);border:none;border-radius:var(--radius-md);font-weight:600;font-size:.875rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:transform .1s,opacity .2s}.export-btn:hover{opacity:.9}.export-btn:active{transform:scale(.98)}input[type=range]{-webkit-appearance:none;width:100%;background:transparent}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:var(--text-main);cursor:pointer;margin-top:-6px}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:var(--bg-panel-hover);border-radius:2px}.canvas-wrapper{transition:padding .3s ease;min-width:400px;max-width:100%}.mac-window{border-radius:var(--radius-md);box-shadow:0 20px 60px #0006,0 0 1px #fff6 inset;background:#1e1e1e;overflow:hidden;position:relative}.mac-window-header{height:2.5rem;display:flex;align-items:center;padding:0 1rem;gap:.5rem;background:#ffffff0d;border-bottom:1px solid rgba(255,255,255,.05)}.mac-traffic-light{width:12px;height:12px;border-radius:50%}.mac-traffic-light.close{background-color:#ff5f56}.mac-traffic-light.minimize{background-color:#ffbd2e}.mac-traffic-light.maximize{background-color:#27c93f}.shiki-container{padding:1.5rem;font-family:var(--font-mono);font-size:.875rem;line-height:1.5;overflow-x:auto}.shiki-container pre{margin:0;background:transparent!important}.toast{position:absolute;bottom:2rem;left:50%;transform:translate(-50%) translateY(20px);opacity:0;background:var(--text-main);color:var(--bg-dark);padding:.75rem 1.5rem;border-radius:2rem;font-weight:500;font-size:.875rem;box-shadow:0 10px 30px #00000080;pointer-events:none;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.toast.show{transform:translate(-50%) translateY(0);opacity:1}