:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Sans", "Yu Gothic UI", Meiryo, Roboto, Arial, sans-serif;--bg-deep: #0d1024;--bg-veil: #0a0c1c;--ink: #eef1fb;--ink-dim: #c3c8e6;--muted: #9096bd;--faint: #6d7298;--panel: rgba(24, 28, 54, .46);--panel-strong: rgba(28, 33, 62, .72);--panel-hi: rgba(255, 255, 255, .05);--line: rgba(255, 255, 255, .09);--line-soft: rgba(255, 255, 255, .06);--line-strong: rgba(255, 255, 255, .16);--radius-lg: 22px;--radius-md: 16px;--radius-sm: 12px;--shadow-panel: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 50px -24px rgba(0, 0, 0, .7), 0 4px 16px -8px rgba(0, 0, 0, .5);--shadow-float: 0 22px 60px -22px rgba(0, 0, 0, .75);--ease: cubic-bezier(.22, 1, .36, 1);--accent: #38bdf8;--accent-2: #22d3ee;--accent-soft: rgba(56, 189, 248, .16);--accent-line: rgba(56, 189, 248, .5);--glow: rgba(56, 189, 248, .55);--on-accent: #08121d;--aurora-1: rgba(37, 99, 235, .5);--aurora-2: rgba(34, 211, 238, .42);--aurora-3: rgba(30, 64, 175, .4)}.app.mode-focus{--accent: #38bdf8;--accent-2: #22d3ee;--accent-soft: rgba(56, 189, 248, .16);--accent-line: rgba(56, 189, 248, .5);--glow: rgba(56, 189, 248, .55);--aurora-1: rgba(37, 99, 235, .5);--aurora-2: rgba(34, 211, 238, .42);--aurora-3: rgba(30, 64, 175, .4)}.app.mode-shortBreak{--accent: #10b981;--accent-2: #34d399;--accent-soft: rgba(16, 185, 129, .15);--accent-line: rgba(16, 185, 129, .5);--glow: rgba(16, 185, 129, .5);--aurora-1: rgba(16, 185, 129, .42);--aurora-2: rgba(5, 150, 105, .36);--aurora-3: rgba(13, 148, 136, .36)}.app.mode-longBreak{--accent: #fbbf24;--accent-2: #fb923c;--accent-soft: rgba(251, 191, 36, .15);--accent-line: rgba(251, 191, 36, .48);--glow: rgba(251, 176, 64, .5);--on-accent: #241606;--aurora-1: rgba(245, 158, 11, .4);--aurora-2: rgba(249, 115, 22, .34);--aurora-3: rgba(217, 119, 6, .34)}*{box-sizing:border-box}html{background:var(--bg-veil)}html,body,#root{min-height:100%}body{margin:0;min-width:320px;color:var(--ink);font-family:var(--font-sans);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;background:radial-gradient(120% 80% at 50% -10%,#171b3a 0%,transparent 60%),linear-gradient(180deg,var(--bg-deep) 0%,var(--bg-veil) 100%);background-attachment:fixed}button,input,select{font:inherit;color:inherit}button{-webkit-tap-highlight-color:transparent}h1,h2,h3{margin:0}:where(button,input,select,[tabindex],summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}.app{position:relative;isolation:isolate;min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,384px);align-items:center;gap:clamp(20px,3vw,40px);width:min(1220px,100vw - 44px);margin:0 auto;--app-pad-top: clamp(20px, 4vh, 44px);--app-pad-bottom: clamp(20px, 4vh, 44px);padding:var(--app-pad-top) env(safe-area-inset-right,0px) max(var(--app-pad-bottom),env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px)}.app:before,.app:after{content:"";position:fixed;inset:-30%;z-index:-1;pointer-events:none;will-change:transform;transition:background 1.2s var(--ease)}.app:before{background:radial-gradient(38% 42% at 24% 30%,var(--aurora-1),transparent 70%),radial-gradient(34% 40% at 78% 26%,var(--aurora-2),transparent 72%);filter:blur(58px) saturate(1.2);opacity:.85;animation:drift-a 42s var(--ease) infinite alternate}.app:after{background:radial-gradient(40% 46% at 70% 74%,var(--aurora-3),transparent 72%),radial-gradient(30% 34% at 30% 82%,var(--aurora-1),transparent 74%);filter:blur(66px) saturate(1.15);opacity:.7;animation:drift-b 55s var(--ease) infinite alternate}@keyframes drift-a{0%{transform:translate3d(-4%,-2%,0) scale(1.05) rotate(0)}to{transform:translate3d(5%,4%,0) scale(1.15) rotate(8deg)}}@keyframes drift-b{0%{transform:translate3d(3%,4%,0) scale(1.1) rotate(0)}to{transform:translate3d(-5%,-3%,0) scale(1.02) rotate(-6deg)}}.stage{display:grid;justify-items:center;gap:clamp(18px,2.6vh,30px)}@media(min-width:861px){.stage{position:sticky;top:max(16px,calc((100dvh - 700px)/2));align-self:start}}.stage-head{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.eyebrow{margin:0;color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.stage-title{font-size:clamp(1.05rem,1.4vw,1.28rem);font-weight:600;letter-spacing:.01em;color:var(--ink-dim)}.glass{position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);box-shadow:var(--shadow-panel);backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25)}.mode-tabs{display:inline-flex;gap:6px;padding:6px;border-radius:999px}.mode-tab{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;min-width:92px;padding:8px 18px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)}.mode-tab:hover{color:var(--ink);background:var(--panel-hi)}.mode-tab:active{transform:scale(.97)}.mode-tab__label{font-size:.95rem;font-weight:700;letter-spacing:.01em}.mode-tab__time{font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--faint);font-variant-numeric:tabular-nums}.mode-tab.is-active{color:var(--on-accent);border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 8px 24px -10px var(--glow),0 1px #ffffff40 inset}.mode-tab.is-active .mode-tab__time{color:color-mix(in srgb,var(--on-accent) 62%,transparent)}.timer-ring{position:relative;width:clamp(280px,40vw,452px);aspect-ratio:1;display:grid;place-items:center}.ring-svg{width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}.ring-track{fill:none;stroke:#ffffff12;stroke-width:12}.ring-progress{fill:none;stroke:url(#ringGrad);stroke-width:12;stroke-linecap:round;filter:drop-shadow(0 0 10px var(--glow));transition:stroke-dashoffset .2s linear}.ring-lead{fill:#fff;filter:drop-shadow(0 0 9px var(--glow))}.ring-breathe{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}.timer-ring.is-running .ring-breathe{animation:breathe 4.6s ease-in-out infinite}@keyframes breathe{0%,to{opacity:0;transform:scale(1)}50%{opacity:.32;transform:scale(1.045)}}.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none}.ring-tag{font-size:.74rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}.ring-time{font-size:clamp(72px,15vw,140px);line-height:.92;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--ink);text-shadow:0 6px 40px rgba(0,0,0,.4)}.ring-status{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;letter-spacing:.02em;color:var(--muted)}.ring-status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint);transition:background .3s var(--ease),box-shadow .3s var(--ease)}.timer-ring.is-running .ring-status{color:var(--ink-dim)}.timer-ring.is-running .ring-status:before{background:var(--accent);box-shadow:0 0 10px var(--glow);animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.35}}.session-dots{display:inline-flex;align-items:center;gap:10px}.session-dots__label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}.session-dots__row{display:inline-flex;gap:9px}.dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line-strong);background:transparent;transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}.dot.is-done{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 10px -1px var(--glow);transform:scale(1.05)}.controls{display:flex;align-items:center;justify-content:center;gap:14px}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:180px;min-height:60px;padding:0 30px;border:none;border-radius:999px;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2));font-size:1.02rem;font-weight:700;letter-spacing:.02em;cursor:pointer;box-shadow:0 14px 34px -12px var(--glow),0 1px #ffffff4d inset;transition:transform .2s var(--ease),box-shadow .25s var(--ease),filter .2s var(--ease)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px var(--glow),0 1px #ffffff59 inset;filter:brightness(1.05)}.btn-primary:active{transform:translateY(0) scale(.98)}.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:1px solid var(--line);border-radius:50%;background:var(--panel-hi);color:var(--ink-dim);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .2s var(--ease),border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}.btn-icon:hover{color:var(--ink);border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-2px)}.btn-icon:active{transform:translateY(0) scale(.96)}.side{display:grid;align-content:center;gap:16px;min-width:0}.card{padding:20px}.card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.card__title{display:flex;flex-direction:column;gap:2px}.card__title h2{font-size:1.02rem;font-weight:700;letter-spacing:.01em}.toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:var(--panel-hi);color:var(--muted);cursor:pointer;transition:all .25s var(--ease)}.toggle-btn:hover{color:var(--ink);border-color:var(--accent-line)}.toggle-btn.is-on{color:var(--on-accent);border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 8px 20px -10px var(--glow)}.sound-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sound-chip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-height:62px;padding:11px 12px;border:1px solid var(--line-soft);border-radius:var(--radius-md);background:var(--panel-hi);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .25s var(--ease),background .25s var(--ease),transform .2s var(--ease)}.sound-chip:hover{border-color:var(--accent-line);transform:translateY(-1px)}.sound-chip__key{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#ffffff14;color:var(--muted);font-size:.72rem;font-weight:700}.sound-chip__text{min-width:0}.sound-chip__name{font-size:.9rem;font-weight:700}.sound-chip__detail{font-size:.72rem;color:var(--muted);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sound-chip.is-active{border-color:var(--accent-line);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-line) inset}.sound-chip.is-active .sound-chip__key{color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2))}.field{margin-top:16px}.field__label{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-size:.82rem;font-weight:600;color:var(--ink-dim)}.field__value{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--range-fill, 50%),rgba(255,255,255,.12) var(--range-fill, 50%),rgba(255,255,255,.12) 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:none;box-shadow:0 0 0 4px var(--accent-soft),0 2px 6px #0006;transition:box-shadow .2s var(--ease)}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 6px var(--accent-soft),0 2px 8px #0006}input[type=range]::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:#fff;box-shadow:0 0 0 4px var(--accent-soft)}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:40px;padding:6px 0}.switch-row+.switch-row{border-top:1px solid var(--line-soft)}.switch-row__text{display:flex;flex-direction:column;gap:2px}.switch-row__label{font-size:.9rem;font-weight:600;color:var(--ink)}.switch-row__hint{font-size:.74rem;color:var(--muted)}.switch{position:relative;flex-shrink:0;width:46px;height:27px;border-radius:999px;border:none;background:#ffffff24;cursor:pointer;transition:background .25s var(--ease)}.switch:after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0006;transition:transform .25s var(--ease)}.switch.is-on{background:linear-gradient(135deg,var(--accent),var(--accent-2))}.switch.is-on:after{transform:translate(19px)}.sheet-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:0;border:none;background:transparent;color:var(--ink);cursor:pointer;font-size:1.02rem;font-weight:700}.sheet-toggle__chevron{margin-left:auto;color:var(--muted);transition:transform .3s var(--ease)}.sheet-toggle[aria-expanded=true] .sheet-toggle__chevron{transform:rotate(180deg)}.sheet-body{display:grid;gap:18px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}.section-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}.duration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.num-field{display:grid;gap:6px}.num-field__label{font-size:.78rem;color:var(--muted)}.num-input{display:flex;align-items:center;gap:4px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-hi);transition:border-color .2s var(--ease)}.num-input:focus-within{border-color:var(--accent-line)}.num-input input{width:100%;min-width:0;border:none;background:transparent;color:var(--ink);font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;-moz-appearance:textfield}.num-input input::-webkit-outer-spin-button,.num-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.num-input__unit{font-size:.76rem;color:var(--faint)}.stepper{display:inline-flex;align-items:center;gap:8px}.stepper button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--panel-hi);color:var(--ink);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}.stepper button:hover{border-color:var(--accent-line);background:var(--accent-soft)}.stepper__value{min-width:40px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.stat{display:grid;gap:4px}.stat__value{display:flex;align-items:baseline;gap:3px;font-size:1.6rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}.stat__unit{font-size:.82rem;font-weight:600;color:var(--muted)}.stat__label{font-size:.74rem;color:var(--muted)}.stat--accent .stat__value{color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text}.spark{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;padding-top:12px;border-top:1px solid var(--line-soft)}.spark__col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}.spark__track{display:flex;align-items:flex-end;justify-content:center;width:100%;height:42px}.spark__bar{width:100%;max-width:20px;min-height:4px;border-radius:5px;background:linear-gradient(180deg,var(--accent),var(--accent-2));opacity:.9;transition:height .4s var(--ease)}.spark__bar.is-empty{background:#ffffff1a}.spark__bar.is-today{box-shadow:0 0 10px -1px var(--glow)}.spark__day{font-size:.62rem;color:var(--faint)}.spark__day.is-today{color:var(--accent);font-weight:700}.app.zen-active .zen-dim{opacity:.06;transition:opacity 2s var(--ease)}.app.zen-active .zen-dim-soft{opacity:.42;transition:opacity 2s var(--ease)}.app.zen-active .zen-dim:hover,.app.zen-active .zen-dim:focus-within,.app.zen-active .zen-dim-soft:hover,.app.zen-active .zen-dim-soft:focus-within{opacity:1;transition:opacity .35s var(--ease)}@media(max-height:840px)and (min-width:861px){.app{--app-pad-top: 14px;--app-pad-bottom: 14px}.stage{gap:14px}.timer-ring{width:clamp(260px,48vh,420px)}.side{gap:12px}.card{padding:16px}.card__head{margin-bottom:12px}.sound-chip{min-height:52px;padding:8px 12px}.stats-grid{margin-bottom:12px}.spark__track{height:34px}}@media(max-width:860px){.app{grid-template-columns:1fr;align-items:start;gap:26px;width:min(560px,100vw - 32px);--app-pad-top: 24px;--app-pad-bottom: 40px}.side{align-content:start}.timer-ring{width:clamp(260px,74vw,380px)}}@media(max-width:440px){.app{width:calc(100vw - 28px)}.card{padding:16px}.mode-tabs{display:flex;width:100%}.mode-tab{min-width:0;flex:1;padding:8px 10px}.duration-grid{grid-template-columns:1fr}}.btn-primary,.btn-icon,.mode-tab,.sound-chip,.switch,.toggle-btn{-webkit-user-select:none;user-select:none;touch-action:manipulation}@media(prefers-reduced-motion:reduce){.app:before,.app:after{animation:none}.timer-ring.is-running .ring-breathe,.timer-ring.is-running .ring-status:before{animation:none}.ring-progress{transition:none}}