@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Fraunces:opsz,wght@9..144,500;9..144,700&display=swap";:root{--bg-deep:#06131a;--bg-mid:#0d2430;--bg-light:#11394d;--ink:#ecf7ff;--ink-soft:#ecf7ffb8;--panel:#06151f8f;--panel-border:#8adcff38;--primary:#26d2bd;--primary-strong:#14a691;--primary-soft:#26d2bd29;--accent:#ffd36e;--shadow:0 24px 44px #02080e73;--button-border:#aeecff38;--button-bg:#ffffff14;--control-border:#aeecff24}:root[data-theme=light]{--bg-deep:#f2f8ff;--bg-mid:#e6f2ff;--bg-light:#d9ecff;--ink:#102331;--ink-soft:#102331a8;--panel:#ffffffb8;--panel-border:#29699c2e;--primary:#06c;--primary-strong:#0052a3;--primary-soft:#0066cc1f;--accent:#ab6a00;--shadow:0 18px 36px #1634542e;--button-border:#0066cc47;--button-bg:#0066cc14;--control-border:#0066cc2e}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{min-width:320px;color:var(--ink);background:radial-gradient(900px 700px at 8% -10%, #ffd36e2e, transparent 52%), radial-gradient(780px 520px at 95% 5%, #26d2bd2e, transparent 48%), radial-gradient(640px 560px at 70% 110%, #629bff29, transparent 52%), linear-gradient(145deg, var(--bg-deep), var(--bg-mid) 48%, var(--bg-light));text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-attachment:fixed;font-family:Space Grotesk,Avenir Next,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;position:relative;overflow:hidden}.backdrop{pointer-events:none;background-image:linear-gradient(#94d6ff14 1px,#0000 1px),linear-gradient(90deg,#94d6ff14 1px,#0000 1px);background-size:46px 46px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle at 50% 12%,#000,#0000 78%);mask-image:radial-gradient(circle at 50% 12%,#000,#0000 78%)}.app-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:1.15rem;max-width:1180px;margin:0 auto;padding:1.35rem 1rem 2rem;display:grid;position:relative}.topbar{grid-column:span 12;justify-content:flex-end;align-items:center;gap:.75rem;display:flex}.panel{background:var(--panel);border:1px solid var(--panel-border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);border-radius:22px;padding:1.15rem;animation:.36s both fade-up}.hero-card{grid-column:span 12;padding:1.4rem}.controls-panel,.timer-panel{grid-column:span 6}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--accent);background:#ffd36e21;border:1px solid #ffd36e59;border-radius:999px;align-items:center;margin:0;padding:.34rem .66rem;font-size:.7rem;font-weight:700;display:inline-flex}.theme-toggle{border:1px solid var(--panel-border);background:var(--panel);color:var(--ink);border-radius:999px;align-items:center;gap:.5rem;padding:.5rem .9rem;font-weight:600;transition:transform .14s,filter .14s;display:inline-flex}.theme-toggle:hover{filter:brightness(1.05);transform:translateY(-1px)}h1,h2,.current-note,.timer-face{font-family:Fraunces,Iowan Old Style,serif}h1{letter-spacing:-.03em;max-width:18ch;margin:.5rem 0;font-size:clamp(2rem,5.2vw,4rem);line-height:.95}h2{margin:0;font-size:1.45rem}.lede,.panel-heading p,.label,.range-hints,.playback-message{color:var(--ink-soft)}.lede{max-width:58ch;margin:0;font-size:1rem}.hero-chips{flex-wrap:wrap;gap:.45rem;margin-top:1rem;display:flex}.chip{color:#ecf7ffeb;text-transform:lowercase;background:#ffffff14;border:1px solid #a2e6ff38;border-radius:999px;padding:.34rem .72rem;font-size:.82rem}.now-playing{margin-top:1rem;border:1px solid var(--control-border);text-align:center;background:radial-gradient(circle at 10% 15%,#26d2bd2e,#0000 48%),linear-gradient(165deg,#ffffff14,#ffffff08);border-radius:18px;width:320px;max-width:100%;min-height:120px;margin-inline:auto;padding:1.2rem;position:relative;overflow:hidden}.now-playing.idle{animation:1.7s ease-in-out infinite note-box-pulse}.now-playing.paused .current-note{opacity:.85}.current-note{color:var(--ink);text-shadow:0 0 24px #26d2bd47,0 0 54px #ffd36e33;margin-top:0;font-size:clamp(5rem,20vw,10rem);line-height:.9;display:block}.playback-message{text-align:center;width:320px;max-width:100%;min-height:1.4em;margin:.8rem auto 0;font-size:.95rem}.panel-heading{gap:.3rem;margin-bottom:.85rem;display:grid}.panel-heading p{margin:0;font-size:.92rem}.control-block{border:1px solid var(--control-border);background:#ffffff0d;border-radius:16px;margin-bottom:1.15rem;padding:.9rem}.slider-row,.toggle-row,.button-row,.target-time-info{justify-content:space-between;align-items:center;gap:.7rem;display:flex}.slider-row label,.toggle-row label{font-weight:600}.slider-row output{color:var(--ink);font-size:1.45rem;font-weight:700}input[type=range]{width:100%;accent-color:var(--primary)}.range-hints{justify-content:space-between;margin-top:.35rem;font-size:.82rem;display:flex}.target-time-info{border-top:1px solid var(--control-border);margin-top:.7rem;padding-top:.7rem}.target-time{color:var(--accent);font-size:1.16rem;font-weight:700}.toggle{border:1px solid var(--button-border);background:var(--button-bg);color:var(--ink);border-radius:999px;padding:.5rem .9rem}.toggle-row .toggle{margin-left:auto}.toggle-row+.toggle-row{margin-top:.65rem}.toggle.enabled,.primary-button{background:linear-gradient(145deg, var(--primary), var(--primary-strong));border:1px solid #0000;color:#fff!important}.button-row{flex-wrap:wrap;margin-top:.95rem}.transport-row{justify-content:center}.note-pop{animation:.22s note-pop}.primary-button,.secondary-button,.ghost-button{border-radius:12px;padding:.72rem 1rem;font-weight:700;transition:transform .14s,opacity .14s,filter .14s}.secondary-button{border:1px solid var(--button-border);background:var(--button-bg);color:var(--ink)}.ghost-button{border:1px solid var(--button-border);color:var(--ink-soft);background:0 0}.primary-button:hover,.secondary-button:hover,.ghost-button:hover,.toggle:hover{filter:brightness(1.06);transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled{opacity:.45;filter:none;cursor:not-allowed;transform:none}.timer-panel{flex-direction:column;justify-content:space-between;align-items:center;display:flex}.timer-face{text-align:center;width:100%;color:var(--ink);border:1px solid var(--control-border);background:radial-gradient(circle at 20% 10%,#ffd36e33,#0000 45%),linear-gradient(165deg,#ffffff17,#ffffff08);border-radius:16px;flex:1;justify-content:center;align-items:center;margin:.4rem 0 .9rem;padding:1.4rem 1rem;font-size:clamp(2.6rem,9vw,4.3rem);display:flex}.button-row.compact{justify-content:center}.app-footer{max-width:1180px;color:var(--ink-soft);justify-content:space-between;align-items:center;gap:.8rem;margin:.15rem auto 1.15rem;padding:0 1rem;font-size:.9rem;display:flex;position:relative}.app-footer p{align-items:center;gap:.4rem;margin:0;display:inline-flex}.app-version{opacity:.5;font-variant-numeric:tabular-nums;font-size:.75rem}.footer-links{align-items:center;gap:.5rem;display:inline-flex}.social-link{border:1px solid var(--panel-border);width:2rem;height:2rem;color:var(--ink-soft);opacity:.78;background:#ffffff08;border-radius:999px;justify-content:center;align-items:center;text-decoration:none;transition:transform .14s,filter .14s,opacity .14s;display:inline-flex}.social-link:hover{filter:brightness(1.05);opacity:1;transform:translateY(-1px)}.heart-icon{color:#ff6a7a}.coffee-button{border:1px solid var(--panel-border);color:var(--ink);opacity:.82;background:#ffffff08;border-radius:999px;justify-content:center;align-items:center;gap:.4rem;padding:.36rem .7rem;font-size:.82rem;font-weight:600;text-decoration:none;transition:transform .14s,filter .14s,opacity .14s;display:inline-flex}.coffee-button:hover{filter:brightness(1.05);opacity:1;transform:translateY(-1px)}@media (width<=900px){.controls-panel,.timer-panel{grid-column:span 12}.panel{padding:1rem}}@media (width<=640px){.app-grid{padding:1rem .85rem 1.35rem}.slider-row,.target-time-info{flex-direction:column;align-items:flex-start}.toggle-row{width:100%}.button-row{flex-direction:column;align-items:stretch}.app-footer{flex-direction:column;align-items:flex-start}.footer-links{width:100%}}@keyframes fade-up{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes note-pop{0%{opacity:0;transform:translateY(8px)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes note-pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes idle-float{0%{opacity:.2;transform:translate(-50%,-50%)scale(.92)}50%{opacity:.42;transform:translate(-50%,-50%)scale(1.08)}to{opacity:.2;transform:translate(-50%,-50%)scale(.92)}}@keyframes note-box-pulse{0%{border-color:var(--control-border);transform:scale(1);box-shadow:0 0 #26d2bd00}50%{border-color:#26d2bd47;transform:scale(1.01);box-shadow:0 0 20px #26d2bd24}to{border-color:var(--control-border);transform:scale(1);box-shadow:0 0 #26d2bd00}}