@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--bg-gradient: linear-gradient(135deg, #070b19 0%, #0f172a 100%);--card-bg: rgba(30, 41, 59, .45);--card-border: rgba(255, 255, 255, .06);--accent: #10b981;--accent-glow: rgba(16, 185, 129, .25);--text-primary: #f8fafc;--text-secondary: #94a3b8;--button-hover: #059669;--slider-track: #334155}[data-theme=light]{--bg-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);--card-bg: rgba(226, 232, 240, .6);--card-border: rgba(0, 0, 0, .08);--accent: #059669;--accent-glow: rgba(5, 150, 105, .2);--text-primary: #0f172a;--text-secondary: #64748b;--button-hover: #047857;--slider-track: #cbd5e1}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,system-ui,-apple-system,sans-serif}body{background:var(--bg-gradient);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:stretch;padding:24px}.app{width:100%;max-width:960px;background:#0f172a99;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:24px;padding:40px;box-shadow:0 20px 50px #0000004d;display:flex;flex-direction:column;gap:32px;min-height:calc(100vh - 48px);justify-content:space-between}header{border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:20px}.header-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}header h1{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(90deg,#34d399,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.site-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;padding:14px 16px;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:20px}.site-nav a{display:inline-block;padding:10px 14px;border-radius:999px;background:#0f172ae6;color:var(--text-primary);font-size:.95rem;text-decoration:none;border:1px solid transparent;transition:all .25s ease}.site-nav a:hover{background:#10b98129;border-color:var(--accent)}.home-pages{margin-top:24px;padding:20px 0 0;border-bottom:1px solid rgba(255,255,255,.08)}.home-pages h2{font-size:1.5rem;margin-bottom:18px;color:var(--text-primary)}.home-pages-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.home-page-card{display:block;padding:18px 20px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:18px;color:var(--text-primary);text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}.home-page-card:hover{border-color:var(--accent);box-shadow:0 20px 40px #10b9811f;transform:translateY(-2px)}.home-page-card h3{margin-bottom:10px;font-size:1.1rem}.home-page-card p{color:var(--text-secondary);font-size:.95rem;line-height:1.6}.footer-content{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}.footer-nav{display:flex;flex-wrap:wrap;gap:12px}.footer-nav a{padding:8px 14px;border-radius:999px;background:#ffffff14;color:var(--text-primary);text-decoration:none;border:1px solid transparent;transition:all .25s ease;font-size:.92rem}.footer-nav a:hover{background:#10b98124;border-color:var(--accent)}.theme-toggle{background:var(--card-bg);border:1px solid var(--card-border);padding:10px 12px;border-radius:8px;font-size:1.4rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;min-width:45px;height:45px;flex-shrink:0}.theme-toggle:hover{background:#1e293bb3;border-color:#ffffff26;transform:scale(1.05)}.theme-toggle:active{transform:scale(.95)}.subtitle{color:var(--text-secondary);font-size:1.05rem;margin-top:8px;font-weight:300}main{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;flex:1 1 auto}.controls{display:flex;flex-direction:column;gap:24px}.control-group{display:flex;flex-direction:column;gap:10px}.label-row{display:flex;justify-content:space-between;align-items:center}label{font-size:.95rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.value-display{font-size:1.1rem;font-weight:600;color:var(--accent)}input[type=range]{-webkit-appearance:none;width:100%;background:transparent;cursor:pointer}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:6px;background:var(--slider-track);border-radius:3px}input[type=range]::-webkit-slider-thumb{height:18px;width:18px;border-radius:50%;background:var(--accent);margin-top:-6px;-webkit-appearance:none;box-shadow:0 0 10px var(--accent-glow);transition:transform .1s ease,background-color .1s ease}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background:#34d399}.preset-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.preset-btn{background:var(--card-bg);border:1px solid var(--card-border);padding:14px;border-radius:12px;color:var(--text-primary);text-align:left;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:4px}.preset-btn:hover{background:#1e293bb3;border-color:#ffffff26;transform:translateY(-2px)}.preset-btn.active{background:#10b98114;border-color:var(--accent);box-shadow:0 0 15px var(--accent-glow)}.preset-name{font-weight:600;font-size:1rem}.preset-meta{color:var(--text-secondary);font-size:.8rem}.timer-input-wrapper{display:flex;align-items:center;gap:12px}input[type=number]{background:var(--card-bg);border:1px solid var(--card-border);border-radius:8px;color:var(--text-primary);padding:8px 12px;font-size:1rem;width:80px;outline:none;text-align:center}input[type=number]:focus{border-color:var(--accent)}.action-row{display:flex;gap:16px;margin-top:10px}.action-row button{flex:1;border:none;padding:14px 20px;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;justify-content:center;align-items:center;gap:8px}#btn-start{background:var(--accent);color:#042f1a;box-shadow:0 4px 15px var(--accent-glow)}#btn-start:hover:not(:disabled){background:var(--button-hover);transform:translateY(-2px);box-shadow:0 6px 20px var(--accent-glow)}#btn-start:disabled{background:#1e293b;color:#475569;cursor:not-allowed;box-shadow:none}#btn-stop{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#ef4444}#btn-stop:hover:not(:disabled){background:#ef444433;transform:translateY(-2px)}#btn-stop:disabled{background:transparent;border-color:#ffffff0d;color:#475569;cursor:not-allowed;transform:none}.right-panel{display:flex;flex-direction:column;gap:28px}.visualizer-container{height:200px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden}.visualizer-pulse{width:80px;height:80px;background:radial-gradient(circle,#34d39966,#60a5fa00 70%);border-radius:50%;border:2px solid var(--accent);box-shadow:0 0 30px var(--accent-glow);opacity:.3;transition:all .3s ease}.visualizer-pulse.playing{animation:pulse infinite cubic-bezier(.4,0,.6,1);opacity:1}@keyframes pulse{0%{transform:scale(.9);box-shadow:0 0 20px #34d3994d;border-color:#34d39999}50%{transform:scale(1.4);box-shadow:0 0 50px #60a5fa99;border-color:#60a5facc}to{transform:scale(.9);box-shadow:0 0 20px #34d3994d;border-color:#34d39999}}.visualizer-status{position:absolute;bottom:16px;font-size:.85rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary)}.info-card{background:var(--card-bg);border:1px solid var(--card-border);padding:24px;border-radius:16px;max-height:800px;overflow-y:auto}.info-card h1{font-size:1.5rem;margin-bottom:16px;color:var(--text-primary);font-weight:700;letter-spacing:-.01em}.info-card h2{font-size:1.25rem;margin-top:20px;margin-bottom:12px;color:#34d399;font-weight:600}.info-card h3{font-size:1.05rem;margin-top:16px;margin-bottom:10px;color:var(--text-primary);font-weight:600}.info-card p{font-size:.95rem;line-height:1.7;color:var(--text-secondary);margin-bottom:16px}.info-card strong{color:var(--text-primary);font-weight:600}.info-card ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.info-card li{font-size:.9rem;color:var(--text-secondary);display:flex;align-items:flex-start;gap:8px;line-height:1.5}.info-card li:before{content:"•";color:var(--accent);font-weight:700;flex-shrink:0}footer{text-align:center;font-size:.85rem;color:var(--text-secondary);border-top:1px solid rgba(255,255,255,.05);padding-top:20px;font-weight:300}.faq-section{max-width:1200px;margin:60px auto;padding:0 20px 40px}.faq-section h2{font-size:2rem;margin-bottom:40px;color:var(--text-primary);text-align:center;font-weight:700}.faq-container{display:flex;flex-direction:column;gap:12px}.faq-item{background:var(--card-bg);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:0;cursor:pointer;transition:all .3s ease}.faq-item:hover{border-color:var(--accent);box-shadow:0 4px 12px #10b9811a}.faq-question{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-size:1rem;font-weight:600;color:var(--text-primary);list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .3s ease}.faq-question:hover{color:var(--accent)}.faq-question:after{content:"▼";font-size:.8rem;color:var(--accent);transition:transform .3s ease;margin-left:12px}.faq-item[open] .faq-question:after{transform:rotate(180deg)}.faq-answer{padding:0 20px 16px;color:var(--text-secondary);line-height:1.7}.faq-answer p{font-size:.95rem;margin:0}.faq-answer strong{color:var(--text-primary);font-weight:600}@media (max-width: 768px){.faq-section h2{font-size:1.5rem;margin-bottom:30px}.faq-question{padding:14px 16px;font-size:.95rem}.faq-answer{padding:0 16px 14px}.faq-answer p{font-size:.9rem}}@media (max-width: 768px){body{padding:12px;align-items:stretch}.app{padding:24px;min-height:calc(100vh - 48px);justify-content:space-between}main{grid-template-columns:1fr;gap:30px}.preset-list{grid-template-columns:1fr}.header-top{flex-direction:column;align-items:stretch}.theme-toggle{align-self:flex-start}header h1{font-size:2rem}}