:root{color-scheme:light;--ink:#233349;--muted:#6d7886;--line:#e3e8ed;--accent:#425b77;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:var(--ink);background:#fff}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}header,footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 5vw;border-bottom:1px solid var(--line)}.brand{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:23px}.brand small{display:block;font:10px sans-serif;letter-spacing:.12em;margin-top:7px}nav{display:flex;gap:28px;font-size:12px}nav a{padding:10px 0}nav [aria-current]{border-bottom:1px solid var(--ink)}main{max-width:1220px;margin:auto;padding:42px 36px 64px}.page-intro{margin-bottom:30px}.eyebrow{font-size:9px;letter-spacing:.24em;margin:0 0 10px;color:var(--muted)}h1,h2{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:500}h1{font-size:clamp(22px,2.4vw,30px);margin:0;letter-spacing:.06em}.player{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(30px,5vw,68px);align-items:center}.scene{aspect-ratio:1;width:100%;background:url('/assets/fantasy-lake.png') center/cover;border-radius:18px;box-shadow:0 18px 45px #162e4714}.transport{min-width:0;padding:10px 0;display:flex;flex-direction:column;align-items:center}.track-info{width:100%;margin-bottom:27px}.phase-badge{display:inline-block;font-size:10px;letter-spacing:.06em;color:var(--accent);background:#f2f5f7;border-radius:20px;padding:5px 11px;margin-bottom:15px}.track-info h2{font-size:clamp(27px,3vw,36px);line-height:1.5;margin:0;letter-spacing:.04em;overflow-wrap:anywhere}.track-info p{font-size:11px;letter-spacing:.08em;color:var(--muted);margin:8px 0 0;line-height:1.6}.track-progress{width:100%}.track-times{display:flex;justify-content:space-between;font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--muted);margin-top:4px}input[type=range]{display:block;appearance:none;-webkit-appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:pointer;accent-color:var(--accent)}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:4px;background:#e0e6ec}input[type=range]::-moz-range-track{height:3px;border-radius:4px;background:#e0e6ec}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;margin-top:-3.5px;border:0;border-radius:50%;background:var(--accent)}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--accent)}input[type=range]:disabled{opacity:.4;cursor:default}.playback{display:flex;align-items:center;justify-content:center;width:100%;padding:20px 0 17px}button{font:inherit;cursor:pointer;min-height:44px;border:1px solid var(--line);border-radius:24px;padding:10px 20px;background:white;color:var(--ink)}.primary-play{display:grid;place-items:center;width:64px;height:64px;min-height:64px;padding:0;border:0;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 5px 16px #23334919;transition:transform .18s ease,background .18s ease}.primary-play:hover{background:#354d69;transform:translateY(-1px)}.primary-play:active{transform:scale(.96)}.primary-play svg{width:27px;height:27px;fill:currentColor}.primary-play .pause-icon{display:none}.primary-play[data-playing=true] .play-icon{display:none}.primary-play[data-playing=true] .pause-icon{display:block}.volume{display:flex;align-items:center;gap:14px;width:68%;margin:0 0 24px}.volume svg{width:18px;height:18px;flex:none;fill:none;stroke:#7b8997;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.volume input{min-width:0}.timer-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border-top:1px solid var(--line);padding:18px 0}.dial{display:flex;align-items:center;gap:15px;min-width:0}#timer-progress{width:76px;height:76px;flex:none}.dial svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}.dial circle{fill:none;stroke-width:4.5}.dial-track{stroke:#edf0f3}#progress-ring{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear}.dial-content{display:flex;flex-direction:column;align-items:flex-start;min-width:0}#remaining-label{font-size:10px;letter-spacing:.05em;color:var(--muted)}#clock{font-family:"Optima","Helvetica Neue",sans-serif;font-size:30px;line-height:1.2;font-weight:300;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin-top:4px}.timer-actions{display:flex;gap:2px;flex:none}.icon-button{display:grid;place-items:center;min-width:44px;width:44px;height:44px;padding:0;border:0;background:transparent;color:#7b8997}.icon-button:hover{color:var(--ink);background:#f3f6f8}.icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.up-next{display:flex;align-items:center;gap:13px;width:100%;border-top:1px solid var(--line);padding-top:18px}.up-next img{width:48px;height:48px;object-fit:cover;border-radius:8px}.up-next>div{min-width:0}.up-next span{font-size:9px;color:var(--muted)}.up-next p{font-size:12px;line-height:1.6;margin:2px 0 0}.up-next small{display:inline-block;font-size:10px;color:var(--muted);margin-left:12px;font-weight:400;white-space:nowrap}.player[data-phase=short],.player[data-phase=long]{--accent:#528583}.settings{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:34px}.settings summary{list-style:none;cursor:pointer;padding:22px 2px;display:flex;align-items:center;gap:18px;font-size:13px}.settings summary::-webkit-details-marker{display:none}.settings summary:after{content:'+';margin-left:auto;font-size:22px;font-weight:300}.settings[open] summary:after{content:'−'}.settings summary span{font-size:11px;color:var(--muted)}.settings-body{padding:8px 0 30px}.settings-columns{display:grid;grid-template-columns:1fr 1fr;gap:48px}.settings h2{font-size:20px;margin:0 0 20px}.settings label{display:block;font-size:12px;line-height:1.7;margin:15px 0 7px}select,input[type=number],textarea{width:100%;font:inherit;color:var(--ink);border:1px solid #d7dfe6;border-radius:8px;background:#fafcfd;padding:12px;margin-top:6px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.subtle,.settings-body>p{font-size:12px;line-height:1.9;color:var(--muted)}#audio-status{font-size:12px;color:#7c3b35}#audio-status:empty{display:none}audio{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}footer{border-top:1px solid var(--line);font-size:11px;color:var(--muted)}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #819bb7;outline-offset:4px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-width:760px){header{padding:20px 22px;align-items:flex-start}.brand{font-size:19px}nav{gap:13px;font-size:10px;flex-wrap:wrap;justify-content:flex-end;max-width:150px}main{padding:25px 22px 40px}.page-intro{margin-bottom:22px}.eyebrow{font-size:8px}h1{font-size:21px}.player{grid-template-columns:1fr;gap:24px;max-width:440px;margin:auto}.scene{border-radius:15px}.transport{padding:0}.track-info{margin-bottom:18px}.phase-badge{margin-bottom:10px}.track-info h2{font-size:27px}.track-info p{font-size:10px}.playback{padding:17px 0}.volume{width:64%;margin-bottom:22px}#timer-progress{width:64px;height:64px}.dial{gap:12px}#clock{font-size:28px}.timer-panel{padding:16px 0}.settings{margin-top:28px}.settings-columns{grid-template-columns:1fr;gap:32px}.settings summary{flex-wrap:wrap;gap:8px}.settings summary span{font-size:10px}.up-next{padding-top:16px}}@media(max-width:360px){main{padding-left:18px;padding-right:18px}.timer-actions{gap:0}.icon-button{width:44px;min-width:44px}.up-next small{display:block;margin-left:0}}

/* Small playback indicator; not an audio measurement or a navigation control. */
.scene{position:relative}
.playback-wave{position:absolute;right:18px;bottom:18px;display:flex;align-items:center;justify-content:center;gap:3px;width:65px;height:36px;padding:7px 10px;border-radius:18px;background:rgba(18,30,48,.32);color:rgba(255,255,255,.86);pointer-events:none}
.playback-wave i{display:block;width:2px;height:18px;border-radius:2px;background:currentColor;transform:scaleY(.28);animation:playback-pulse 1.1s ease-in-out infinite alternate;animation-play-state:paused}
.playback-wave[data-playing=true] i{animation-play-state:running}
.playback-wave i:nth-child(3n+1){animation-duration:.83s;animation-delay:-.35s}
.playback-wave i:nth-child(3n+2){animation-duration:1.27s;animation-delay:-.8s}
.playback-wave i:nth-child(even){height:13px;animation-delay:-.55s}
@keyframes playback-pulse{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.playback-wave i{animation:none;transform:scaleY(.4)}.playback-wave[data-playing=true] i{transform:scaleY(.8)}}
.brand:has(>.brand-mark){display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:10px}.brand>.brand-mark{grid-row:1/3;display:block;width:42px;height:42px;border-radius:10px}.brand:has(>.brand-mark) small{display:block}
@media(max-width:760px){header>.brand:has(>.brand-mark){flex:none;white-space:nowrap;column-gap:8px}.brand>.brand-mark{width:24px;height:24px}header>nav{min-width:0}}

/* 作業の終わりの鐘（設定内） */
.chime-toggle{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;margin-top:.9rem;font-size:.92rem;cursor:pointer}
.chime-toggle input{width:1.1rem;height:1.1rem;accent-color:currentColor}
.chime-toggle small{flex-basis:100%;opacity:.7;font-size:.8rem}