@import "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600&family=Sora:wght@300;400;500;600&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}body{color:#f3f4f8;background-color:#0b0f1a;font-family:Sora,system-ui,sans-serif}#root{flex-direction:column;min-height:100vh;display:flex}::selection{color:#fff;background-color:#f6c87c59}:root{--color-bg-primary:#0b0f1a;--color-bg-secondary:#141b2c;--color-bg-tertiary:#1b2438;--color-surface:#141c2dc7;--color-surface-light:#222e46b8;--color-text-primary:#f3f4f8;--color-text-secondary:#cbd4e1;--color-text-muted:#8f9ab0;--color-accent:#f6c87c;--color-accent-strong:#f4b44f;--color-accent-cool:#7cc0f6;--color-accent-mint:#5de3c6;--gradient-primary:linear-gradient(160deg, #0b0f1a 0%, #141b2c 45%, #0d1220 100%);--gradient-card:linear-gradient(150deg, #192234e6, #0c111ef2);--shadow-sm:0 6px 16px #02061459;--shadow-md:0 12px 30px #02061473;--shadow-lg:0 24px 50px #0206148c;--shadow-glow:0 0 50px #f6c87c40;--border-radius-sm:12px;--border-radius-md:20px;--border-radius-lg:28px;--border-radius-full:9999px;--transition-fast:.15s ease;--transition-normal:.3s ease;--transition-slow:.5s ease;--font-sans:"Sora", system-ui, sans-serif;--font-display:"Fraunces", serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);background:var(--color-bg-primary);color:var(--color-text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}.app{background:var(--gradient-primary);flex-direction:column;min-height:100vh;display:flex;position:relative}.app:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle at 10% 20%,#7cc0f62e,#0000 45%),radial-gradient(circle at 80% 10%,#f6c87c2e,#0000 40%),radial-gradient(circle at 60% 80%,#5de3c624,#0000 45%);position:fixed;inset:0}.app:after{content:"";opacity:.3;pointer-events:none;z-index:0;background:repeating-linear-gradient(120deg,#ffffff08 0 1px,#0000 1px 10px);position:fixed;inset:0}.header{text-align:center;z-index:1;background:linear-gradient(#050912bf,#0000);padding:1.9rem 1.5rem 1.4rem;position:relative}.title{font-family:var(--font-display);letter-spacing:.12em;color:var(--color-text-primary);text-shadow:0 0 24px #7cc0f659;justify-content:center;align-items:center;gap:.6rem;margin-bottom:.35rem;font-size:2.2rem;font-weight:500;display:flex}.title-icon{font-size:1.8rem;animation:6s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.subtitle{color:var(--color-text-secondary);letter-spacing:.08em;font-size:.95rem;font-weight:300}.main{z-index:1;flex-direction:column;flex:1;align-items:center;gap:1.75rem;padding:0 1.25rem 2rem;display:flex;position:relative}.visualizer-container{aspect-ratio:1;border-radius:var(--border-radius-lg);width:100%;max-width:470px;box-shadow:var(--shadow-lg), var(--shadow-glow);background:#080c16d9;border:1px solid #ffffff14;position:relative;overflow:hidden}.visualizer-canvas{width:100%;height:100%;display:block}.start-hint{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#080c1673;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.start-hint p{color:var(--color-text-secondary);text-align:center;padding:0 1rem;font-size:.95rem;animation:2.2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.session-card{border-radius:var(--border-radius-md);background:var(--gradient-card);width:100%;max-width:520px;box-shadow:var(--shadow-md);border:1px solid #ffffff14;flex-direction:column;gap:.6rem;padding:1.2rem 1.4rem;display:flex}.session-row{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.session-label{text-transform:uppercase;letter-spacing:.2em;color:#cbd4e1bf;font-size:.75rem}.session-title{color:#f7f6fb;font-size:1.2rem;font-weight:500}.session-meta{color:#e1e6ef;text-align:right;flex-direction:column;gap:.35rem;font-size:.88rem;display:flex}.session-tip{color:#e2e7f0;font-size:.92rem}.controls{flex-direction:column;gap:1.25rem;width:100%;max-width:420px;display:flex}.play-button{background:linear-gradient(120deg, var(--color-accent), var(--color-accent-cool));border-radius:var(--border-radius-full);color:#1b1b1b;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md), 0 0 35px #7cc0f659;border:none;justify-content:center;align-items:center;gap:.75rem;padding:1rem 1.75rem;font-size:1rem;font-weight:600;display:flex}.play-button:hover{box-shadow:var(--shadow-lg), 0 0 45px #f6c87c66;transform:translateY(-2px)}.play-button:active{transform:translateY(0)}.play-button.playing{background:var(--color-surface);color:var(--color-text-primary);box-shadow:var(--shadow-md)}.play-button.playing:hover{background:var(--color-surface-light)}.play-icon{width:22px;height:22px}.play-icon svg{width:100%;height:100%}.slider-group{flex-direction:column;gap:.5rem;display:flex}.slider-label{color:var(--color-text-secondary);justify-content:space-between;font-size:.95rem;display:flex}.slider-value{color:var(--color-accent);font-weight:600}.slider{appearance:none;border-radius:var(--border-radius-full);cursor:pointer;background:linear-gradient(90deg,#7cc0f680,#f6c87c80);outline:none;width:100%;height:8px}.slider::-webkit-slider-thumb{appearance:none;background:var(--color-accent-strong);cursor:pointer;width:22px;height:22px;transition:all var(--transition-fast);border-radius:50%;box-shadow:0 0 12px #f6b44f99}.slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.slider::-moz-range-thumb{background:var(--color-accent-strong);cursor:pointer;border:none;border-radius:50%;width:22px;height:22px;box-shadow:0 0 12px #f6b44f99}.timer-group{flex-direction:column;gap:.5rem;display:flex}.timer-select{flex-direction:column;gap:.4rem;display:flex}.timer-select select{border-radius:var(--border-radius-sm);background:var(--color-surface);width:100%;color:var(--color-text-primary);transition:border var(--transition-fast), box-shadow var(--transition-fast);border:1px solid #ffffff14;outline:none;padding:.65rem .9rem;font-size:.95rem}.timer-select select:focus-visible{border-color:var(--color-accent);box-shadow:0 0 0 2px #f6c87c33}.timer-note{color:var(--color-text-muted);font-size:.82rem}.selector-toggle{border-radius:var(--border-radius-full);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-normal);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#141c2d99;border:1px solid #ffffff1f;justify-content:center;align-items:center;gap:.5rem;padding:.8rem 1.6rem;font-size:.95rem;display:flex}.selector-toggle:hover{border-color:var(--color-accent);color:var(--color-text-primary);background:#f6c87c1a}.toggle-icon{width:18px;height:18px;transition:transform var(--transition-normal)}.toggle-icon.open{transform:rotate(180deg)}.bowl-selector{border-radius:var(--border-radius-md);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);width:100%;max-width:640px;box-shadow:var(--shadow-md);background:#0d121ee6;border:1px solid #ffffff14;flex-direction:column;gap:1.6rem;padding:1.6rem;animation:.4s fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.bowl-category{flex-direction:column;gap:.8rem;display:flex}.category-title{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.2em;border-bottom:1px solid #ffffff0f;padding-bottom:.25rem;font-size:.78rem;font-weight:600}.bowl-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.9rem;display:grid}.bowl-button{border-radius:var(--border-radius-sm);cursor:pointer;transition:all var(--transition-normal);background:#192234bf;border:1px solid #ffffff14;flex-direction:column;align-items:center;padding:1rem .75rem .95rem;display:flex;position:relative;overflow:hidden}.bowl-button:before{content:"";background:var(--bowl-color,var(--color-accent));opacity:.6;height:3px;transition:opacity var(--transition-fast);position:absolute;top:0;left:0;right:0}.bowl-button:hover{border-color:var(--bowl-color,var(--color-accent));background:#232e44cc;transform:translateY(-3px);box-shadow:0 10px 24px #02061473}.bowl-button:hover:before{opacity:1}.bowl-button.active{border-color:var(--bowl-color,var(--color-accent));background:#f6c87c1f;box-shadow:0 0 18px #f6c87c40}.bowl-button.active:before{opacity:1;height:4px}.bowl-button:active{transform:scale(.98)}.bowl-icon{background:radial-gradient(circle at 30% 30%, #ffffff40, transparent 70%), var(--bowl-color,var(--color-accent));width:48px;height:48px;transition:all var(--transition-normal);border-radius:50%;margin-bottom:.65rem;box-shadow:0 0 22px #fff3,inset 0 -6px 12px #0000004d,inset 0 6px 12px #ffffff26}.bowl-button:hover .bowl-icon{transform:scale(1.08)}.bowl-info{text-align:center;flex-direction:column;align-items:center;gap:.25rem;display:flex}.bowl-name{color:var(--color-text-primary);font-size:.95rem;font-weight:500;line-height:1.3}.bowl-frequency{color:var(--bowl-color,var(--color-accent));font-size:.8rem;font-weight:600}.bowl-description{color:var(--color-text-muted);max-width:120px;font-size:.7rem;line-height:1.3}.footer{text-align:center;z-index:1;background:linear-gradient(#0000,#050912b3);padding:1.25rem;position:relative}.footer p{color:var(--color-text-muted);letter-spacing:.18em;font-size:1rem}@media (width<=480px){.header{padding:1.5rem 1rem 1rem}.title{font-size:1.7rem}.subtitle{font-size:.85rem}.session-row{flex-direction:column;align-items:flex-start}.session-meta{text-align:left}.visualizer-container{border-radius:var(--border-radius-md);max-width:100%}.bowl-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.bowl-button{padding:.85rem .5rem .75rem}.bowl-icon{width:40px;height:40px}.bowl-name{font-size:.85rem}.bowl-description{font-size:.65rem}}@media (width>=768px){.header{padding:2.2rem 2rem 1.4rem}.title{gap:.8rem;font-size:2.9rem}.title-icon{font-size:2.3rem}.subtitle{font-size:1.1rem}.visualizer-container{max-width:540px}.bowl-grid{grid-template-columns:repeat(4,1fr)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms;animation-duration:.01ms;animation-iteration-count:1}}:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-bg-secondary)}::-webkit-scrollbar-thumb{background:var(--color-surface-light);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}