:root{--terracotta: #b6483c;--terracotta-soft: #c96b5d;--moss: #4f7d46;--moss-deep: #3c6135;--ink: #2e3a2a;--ink-soft: #55624f;--glass: rgba(252, 250, 243, .62);--glass-strong: rgba(252, 250, 243, .85);--glass-line: rgba(46, 58, 42, .14);--font-ui: "Nunito", "Segoe UI", sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-ui);color:var(--ink);background:#22301f;overflow:hidden;-webkit-font-smoothing:antialiased}button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer}:focus-visible{outline:3px solid rgba(182,72,60,.6);outline-offset:2px;border-radius:8px}.scene{position:relative;height:100dvh;overflow:hidden;display:grid;place-items:center}.bg{position:absolute;top:0;right:0;bottom:0;left:0;background-position:center;background-size:cover;transition:opacity 1.4s ease}.bg-focus{background-image:url(/backgrounds/focus.webp)}.bg-break{background-image:url(/backgrounds/break.webp);opacity:0}.bg-break.is-visible{opacity:1}.bg-tint{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 100% at 50% 42%,#141c100d 40%,#141c1061);pointer-events:none}.card{position:relative;z-index:10;width:min(360px,92vw);display:flex;flex-direction:column;align-items:center;padding:18px 22px 20px;border-radius:22px;background:var(--glass);backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px) saturate(1.15);border:1px solid rgba(252,250,243,.55);box-shadow:0 18px 50px #121a0e59,inset 0 1px #ffffff80;animation:cardIn .55s cubic-bezier(.22,1,.36,1) both}@keyframes cardIn{0%{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.controls-row{display:flex;gap:7px;margin-bottom:4px}.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:var(--ink);background:#fcfaf38c;border:1px solid var(--glass-line);transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s,color .2s}.icon-btn:hover{transform:translateY(-2px);background:var(--glass-strong)}.icon-btn.is-active{background:var(--terracotta);border-color:var(--terracotta);color:#fdf8ef}.icon-btn.is-off{color:#2e3a2a73}.dial{position:relative;width:min(250px,66vw);aspect-ratio:1;margin-top:6px}.ring{width:100%;height:100%}.ring-track{fill:none;stroke:#fcfaf3e6;stroke-width:13}.ring-fill{fill:none;stroke:var(--terracotta);stroke-width:13;stroke-linecap:round;transition:stroke-dasharray .3s linear,stroke .6s ease}.card-break .ring-fill{stroke:var(--moss)}.clock{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:clamp(46px,13vw,56px);font-weight:800;letter-spacing:.01em;font-variant-numeric:tabular-nums;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.5)}.cycle-row{display:flex;align-items:center;gap:5px;margin-top:8px;padding:6px 14px;border-radius:999px;background:#fcfaf38c;border:1px solid var(--glass-line)}.cycle-label{font-size:13.5px;font-weight:700;color:var(--ink-soft);margin-right:3px}.tomato{width:18px;height:18px;display:block;transition:transform .4s}.tomato.is-filled{transform:scale(1.1)}.mode-row{display:flex;gap:8px;margin-top:12px}.mode-btn{padding:8px 14px;border-radius:12px;font-size:13.5px;font-weight:700;color:var(--ink-soft);background:#fcfaf38c;border:1px solid var(--glass-line);transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s,color .2s,border-color .2s}.mode-btn:hover{transform:translateY(-1px);background:var(--glass-strong)}.mode-btn.is-active{background:var(--terracotta);border-color:var(--terracotta);color:#fdf8ef}.card-break .mode-btn.is-active{background:var(--moss);border-color:var(--moss)}.log{width:100%;margin-top:14px;padding:12px 14px 10px;border-radius:14px;background:#fcfaf399;border:1px solid var(--glass-line);animation:logIn .3s ease both}@keyframes logIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.log-head{display:flex;align-items:baseline;gap:8px;padding-bottom:7px;border-bottom:1px dashed rgba(46,58,42,.25)}.log-title{font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}.log-sum{font-size:12.5px;font-weight:700;color:var(--terracotta)}.log-clear{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink-soft);opacity:.7;transition:opacity .2s,color .2s}.log-clear:hover{opacity:1;color:var(--terracotta)}.log-empty{padding:12px 0 6px;text-align:center;font-size:13px;color:var(--ink-soft)}.log-list{list-style:none;max-height:148px;overflow-y:auto;padding-top:4px}.log-list::-webkit-scrollbar{width:6px}.log-list::-webkit-scrollbar-thumb{background:#2e3a2a40;border-radius:3px}.log-row{display:grid;grid-template-columns:52px 1fr auto;gap:8px;padding:5px 2px;font-size:13px;font-weight:600;color:var(--ink)}.log-row.is-break{color:var(--ink-soft)}.log-at{font-variant-numeric:tabular-nums;color:var(--ink-soft)}.log-mode{font-weight:700}.log-row.is-break .log-mode{color:var(--moss-deep)}.log-min{font-variant-numeric:tabular-nums}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:4vh 4vw;background:#121a0e73;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:scrimIn .25s ease both}@keyframes scrimIn{0%{opacity:0}to{opacity:1}}.settings{width:min(380px,94vw);padding:18px 20px 16px;border-radius:20px;background:var(--glass-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(252,250,243,.6);box-shadow:0 18px 50px #121a0e66;animation:cardIn .4s cubic-bezier(.22,1,.36,1) both}.settings-head{display:flex;align-items:center;padding-bottom:10px;border-bottom:1px dashed rgba(46,58,42,.25)}.settings-head h2{font-size:17px;font-weight:800;letter-spacing:.04em;color:var(--ink)}.settings-close{margin-left:auto;width:32px;height:32px;display:grid;place-items:center;font-size:20px;border-radius:50%;color:var(--ink-soft);transition:background .2s,color .2s,transform .25s}.settings-close:hover{background:var(--terracotta);color:#fdf8ef;transform:rotate(90deg)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;padding-top:14px}.set-field{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--ink-soft)}.set-input{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}.set-input input{width:60px;padding:6px 8px;font-family:var(--font-ui);font-size:14px;font-weight:800;text-align:center;color:var(--ink);background:#fcfaf3cc;border:1.5px solid var(--glass-line);border-radius:9px;outline:none;transition:border-color .2s}.set-input input:focus{border-color:var(--terracotta)}.settings-toggles{margin-top:14px;display:flex;flex-direction:column;gap:8px}.set-toggle{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer}.set-toggle input{width:16px;height:16px;accent-color:var(--terracotta)}.settings-note{margin-top:12px;font-size:12px;font-weight:600;color:var(--ink-soft);opacity:.8}.art-credit{position:fixed;left:14px;bottom:12px;z-index:30;font-size:11px;font-weight:600;letter-spacing:.08em;color:#fcfaf3d9;text-shadow:0 1px 3px rgba(18,26,14,.7);pointer-events:none}@media (max-width: 420px){.card{padding:14px 14px 16px}.controls-row{flex-wrap:wrap;justify-content:center}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:.15s!important}.bg,.ring-fill{transition:none}}.music-dock{position:fixed;right:18px;bottom:16px;z-index:35;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.music-btn{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;color:var(--ink);background:var(--glass-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(252,250,243,.6);box-shadow:0 8px 24px #121a0e59;transition:transform .25s cubic-bezier(.22,1,.36,1),background .2s,color .2s}.music-btn:hover{transform:translateY(-2px)}.music-btn.is-open{background:var(--terracotta);border-color:var(--terracotta);color:#fdf8ef}.music-panel{position:fixed;right:18px;bottom:72px;width:320px;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;background:var(--glass-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(252,250,243,.6);box-shadow:0 14px 40px #121a0e66;animation:dockIn .3s cubic-bezier(.22,1,.36,1) backwards;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s,visibility .3s}.music-panel.is-hidden{animation:none;transform:translateY(14px);opacity:0;visibility:hidden;pointer-events:none}@keyframes dockIn{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.music-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.music-tab{flex:1;padding:6px 10px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--ink-soft);background:#fcfaf38c;border:1px solid var(--glass-line);transition:background .2s,color .2s,border-color .2s}.music-tab:hover{background:#fcfaf3d9}.music-tab.is-active{background:var(--terracotta);border-color:var(--terracotta);color:#fdf8ef}.music-frame{border-radius:10px;display:block}@media (max-width: 720px){.music-dock{right:12px;bottom:12px}.music-panel{position:fixed;left:12px;right:68px;bottom:12px;width:auto}.music-frame{width:auto;height:auto;aspect-ratio:16 / 9}.music-frame iframe{width:100%;height:100%}}.music-frame{border-radius:10px;overflow:hidden;line-height:0}.music-frame iframe{display:block;border:0}.volume-row{display:flex;align-items:center;gap:8px;padding:2px 4px 0;color:var(--ink-soft)}.volume-icon{flex-shrink:0}.volume-slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:18px;background:transparent;cursor:pointer}.volume-slider::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:#2e3a2a38}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;margin-top:-4.5px;border-radius:50%;background:var(--terracotta);border:2px solid #fdf8ef;box-shadow:0 1px 4px #121a0e59}.volume-slider::-moz-range-track{height:5px;border-radius:3px;background:#2e3a2a38}.volume-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--terracotta);border:2px solid #fdf8ef}.volume-slider::-moz-range-progress{height:5px;border-radius:3px;background:var(--terracotta)}.volume-val{min-width:22px;text-align:right;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-soft)}.log-row.is-partial{opacity:.75}.log-partial{margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:#c4975a38;color:#8a6430;vertical-align:1px}
