@font-face{font-family:DSEG;src:url('/tools/timer/assets/DSEG7Classic-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;--bg:#0c0f12;--text:#e6ebe8;--muted:#98a39d;--line:#26302b;--accent:#9fd9b4;--panel:#131a17}
body[data-tone=brown]{--bg:#140f0b;--accent:#e2b58b;--line:#33271e;--panel:#1b1510}body[data-tone=pink]{--bg:#130d11;--accent:#f0b3cb;--line:#33232b;--panel:#1b1318}body[data-tone=white]{--bg:#0e1013;--accent:#d8dde3;--line:#2a2f35;--panel:#15181c}
body[data-tone=rain]{--bg:#0b1014;--accent:#9cc7de}body[data-tone=candle]{--bg:#07060a;--accent:#f3b56b;--line:#2b2018}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Noto Sans JP",sans-serif}
a{color:inherit}button,select,input{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}
.calm-stage{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;isolation:isolate}
.calm-stage::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(40% 35% at 50% 45%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);opacity:.8;animation:calm-drift 18s ease-in-out infinite alternate}
.calm-stage[data-canvas=on]::before{display:none}
body.is-playing .calm-stage::before{animation-duration:9s;opacity:1}
@keyframes calm-drift{from{transform:translate(-3%,-2%) scale(1)}to{transform:translate(3%,2%) scale(1.08)}}
.calm-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.calm-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;font-size:12px;color:var(--muted);position:relative;z-index:2}
.calm-top a{text-decoration:none}.calm-top a:hover{color:var(--text)}
.calm-title{margin:0;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--muted)}
.calm-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:12px 18px 56px;text-align:center;position:relative;z-index:2;transition:opacity .6s}
.calm-player{display:flex;flex-direction:column;align-items:center;gap:14px}
.calm-play{min-width:150px;min-height:150px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:17px;letter-spacing:.05em;transition:background .3s,transform .3s}
.calm-play:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}.calm-play[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.calm-button{min-height:42px;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 80%,transparent)}.calm-button:hover{border-color:var(--accent)}.calm-button.quiet{background:transparent}
.calm-row{display:flex;flex-wrap:wrap;gap:12px 18px;justify-content:center;align-items:center}
.calm-field{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.calm-field select{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 10px}.calm-field input[type=range]{width:150px;accent-color:var(--accent)}
.calm-check{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.calm-check input{accent-color:var(--accent);width:16px;height:16px}
.calm-hint{margin:0;font-size:12px;color:var(--muted);min-height:1.6em}
.calm-phase{margin:0;font-size:clamp(18px,3vw,26px);letter-spacing:.04em}
.calm-clock{margin:0;font:600 clamp(64px,16vw,160px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums}
.calm-message{margin:0;font-size:clamp(18px,3.4vw,30px);max-width:26ch}
body[data-phase=break]{--accent:#f3c98b}body[data-phase=break] .calm-stage::before{animation-duration:6s;opacity:1}
body.is-running .calm-stage::before{animation-duration:30s}
.calm-shake .calm-clock{animation:calm-nudge .35s}@keyframes calm-nudge{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.calm-orb{width:min(46vw,260px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,color-mix(in srgb,var(--accent) 70%,white),color-mix(in srgb,var(--accent) 35%,transparent) 60%,transparent 72%);transform:scale(.45);transition:transform 4s ease-in-out;box-shadow:0 0 80px color-mix(in srgb,var(--accent) 30%,transparent)}
.calm-orb.full{transform:scale(1)}.calm-count{margin:0;font-size:14px;color:var(--muted);min-height:1.5em}
.calm-face{transition:transform 3s ease}.calm-bigclock{margin:0;font:600 clamp(56px,17vw,260px)/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.calm-face[data-style=digital] .calm-bigclock{font-family:DSEG,ui-monospace,monospace;font-weight:700;font-size:clamp(44px,14vw,220px)}
.calm-date{margin:14px 0 0;font-size:clamp(14px,2.4vw,26px);color:var(--muted)}
body[data-color=white]{--accent:#eef2f0}body[data-color=amber]{--accent:#f5a324}body[data-color=green]{--accent:#39ff7a}
body.idle{cursor:none}body.idle .calm-panel,body.idle .calm-top,body.idle .calm-row,body.idle .calm-hint{opacity:0;transition:opacity .8s}
body[data-kind=candle] .calm-center{justify-content:flex-start;padding-top:4px}body[data-kind=rainwindow] .calm-center{justify-content:flex-end}
.calm-scroll{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:11px;color:var(--muted);text-decoration:none;z-index:2}
.calm-about{max-width:760px;margin:0 auto;padding:56px 22px 40px;color:var(--muted);font-size:14px}
.calm-about h1{color:var(--text);font-size:clamp(26px,4vw,36px);font-weight:550;letter-spacing:-.02em;margin:0 0 10px}
.calm-about h2{color:var(--text);font-size:16px;font-weight:550;margin:28px 0 8px}.calm-about h3{color:var(--text);font-size:14px;font-weight:550;margin:16px 0 4px}.calm-about p{margin:6px 0}
.calm-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}.calm-links a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text)}.calm-links a:hover{border-color:var(--accent)}
.calm-footer{max-width:760px;margin:0 auto;padding:22px 22px 48px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;font-size:12px;color:var(--muted)}
.calm-footer a{text-decoration:none}.calm-footer a:hover{color:var(--text)}
.calm-hub{max-width:980px;margin:0 auto;padding:40px 22px}.calm-hub h1{font-size:clamp(34px,6vw,56px);font-weight:550;letter-spacing:-.03em;margin:26px 0 10px}.calm-hub>p{color:var(--muted);max-width:620px}
.calm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}.calm-cards a{display:block;min-height:150px;padding:20px;border:1px solid var(--line);border-radius:14px;text-decoration:none;background:var(--panel)}.calm-cards a:hover{border-color:var(--accent)}
.calm-cards h2{font-size:17px;font-weight:550;margin:0 0 8px}.calm-cards p{margin:0;font-size:13px;color:var(--muted)}.calm-cards span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
@media(max-width:700px){.calm-cards{grid-template-columns:1fr}.calm-links{grid-template-columns:1fr}.calm-play{min-width:130px;min-height:130px}.calm-field input[type=range]{width:120px}}
@media(prefers-reduced-motion:reduce){.calm-stage::before{animation:none}.calm-orb{transition-duration:0s!important}.calm-shake .calm-clock{animation:none}html{scroll-behavior:auto}}