:root{--bg-color: #0d1117;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--accent-blue: #3b82f6;--accent-blue-hover: #2563eb;--accent-purple: #8b5cf6;--text-primary: #f8fafc;--text-secondary: #94a3b8;--transition-speed: .3s}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:center;background-image:radial-gradient(at 0% 0%,hsla(253,16%,7%,1) 0,transparent 50%),radial-gradient(at 50% 0%,hsla(225,39%,30%,.2) 0,transparent 50%),radial-gradient(at 100% 0%,hsla(339,49%,30%,.2) 0,transparent 50%);background-attachment:fixed}*{box-sizing:border-box}h1,h2,h3,p{margin:0}button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}input{font-family:inherit}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:20px;box-shadow:0 8px 32px #0000005e}.glass-button{background:#ffffff14;border:1px solid var(--glass-border);border-radius:12px;padding:10px 16px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all var(--transition-speed) ease;color:var(--text-primary)}.glass-button:hover{background:#ffffff26;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.glass-button:active{transform:translateY(0)}.glass-button.primary{background:linear-gradient(135deg,var(--accent-blue),var(--accent-purple));border:none;font-weight:600}.glass-button.primary:hover{box-shadow:0 4px 15px #8b5cf666;filter:brightness(1.1)}.glass-input{width:100%;background:#0003;border:1px solid var(--glass-border);border-radius:12px;padding:16px;color:var(--text-primary);font-size:1.1rem;letter-spacing:1px;transition:border-color var(--transition-speed) ease}.glass-input:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 2px #3b82f633}.app-container{width:100%;max-width:600px;padding:2rem;margin:2rem}.app-header{text-align:center;margin-bottom:2rem}.app-title{font-size:2.5rem;font-weight:800;background:linear-gradient(to right,#60a5fa,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}.app-subtitle{color:var(--text-secondary);font-size:1rem}.control-section{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2.5rem}.input-wrapper{position:relative}.button-group{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.display-section{display:flex;flex-direction:column;gap:2rem}.code-card{padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1.5rem;background:#ffffff08;border-radius:16px}.code-title{font-size:1.2rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:.5rem}.code-render-area{background:#fff;padding:1rem;border-radius:12px;display:flex;justify-content:center;align-items:center;min-height:200px;width:100%;max-width:100%;overflow:auto}.code-render-area svg{max-width:100%;height:auto}.download-controls{display:flex;flex-direction:column;gap:1rem;width:100%}.select-group{display:flex;gap:1rem;justify-content:center}.glass-select{background:#0003;border:1px solid var(--glass-border);color:var(--text-primary);padding:8px 12px;border-radius:8px;font-size:.9rem;outline:none;cursor:pointer}.glass-select option{background:var(--bg-color)}.download-btn{width:100%;padding:12px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .5s ease forwards}