@charset "UTF-8";
:root{color-scheme:light;--bg:#eef0f3;--ink:#303744;--muted:#666e7a;--line:#d5dae2;--accent:#b94e2b;font-family:"Segoe UI","Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 40% 25%,#ffffff 0,transparent 62%),linear-gradient(150deg,#f2f3f5,#e7eaee);color:var(--ink);min-width:280px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:7px}button:not(.timer-device):active{transform:translateY(1px)}[hidden]{display:none!important}svg{width:22px;height:22px;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-80px;left:20px;z-index:20;padding:12px;background:var(--ink);color:var(--bg);border-radius:8px}.skip-link:focus{top:12px}
.page-shell{max-width:1220px;margin:auto;padding:0 56px}header{height:96px;display:flex;justify-content:space-between;align-items:center;gap:14px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-size:17px;font-weight:600;letter-spacing:-.35px}.brand img{border-radius:10px;flex-shrink:0}.icon-button{width:44px;height:44px;flex-shrink:0;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:background .2s,box-shadow .2s}.icon-button:hover{border-color:#c8ced7;background:linear-gradient(#fff,#e8ecf1);box-shadow:0 2px 4px #2835440a,inset 0 1px 0 #fff}
main{min-height:calc(100svh - 96px);display:flex;align-items:center;justify-content:center;padding:0 0 96px}.timer-section{width:100%;max-width:850px;text-align:center;position:relative}.timer-device{display:block;position:relative;width:100%;padding:32px 29px 51px;border:1px solid #c6ccd5;border-radius:28px;background:linear-gradient(175deg,#fff 0%,#f2f4f7 18%,#e7ebf0 65%,#d8dee6 100%);box-shadow:inset 0 2px 1px #fff,inset 2px 0 2px #fff9,inset -2px 0 2px #fff7,inset 0 -2px 2px #a6b0bd55,0 2px 0 #c0c8d3,0 5px 0 #b7c0cb,0 9px 0 #a9b4c1,0 11px 2px #66798a22,0 30px 34px -13px #25364b38,0 55px 75px -39px #36435340;isolation:isolate;transition:transform .2s,box-shadow .2s}.timer-device::before{content:"";position:absolute;inset:2px;z-index:-1;border-radius:26px;background:repeating-linear-gradient(0deg,#fff1 0,#fff1 1px,#64778903 1px,#64778903 2px);pointer-events:none}.timer-device::after{content:"";position:absolute;left:6%;right:6%;bottom:-29px;height:18px;border-radius:50%;background:#45536620;filter:blur(13px);z-index:-2;pointer-events:none}.timer-device:hover:not([aria-disabled="true"]){transform:translateY(-2px)}.timer-device:active:not([aria-disabled="true"]){transform:translateY(3px)}.timer-device[aria-disabled="true"]{cursor:default}
.device-face{display:grid;grid-template-columns:1.48fr 1fr;gap:17px;padding:12px;border:1px solid #bdc5cf;border-radius:13px;background:linear-gradient(180deg,#cdd4dc,#edf0f4 3%,#f6f7f9 65%,#e3e8ed);box-shadow:inset 0 2px 4px #2a3b501a,0 1px 0 #fff,0 -1px 0 #ffffffad}.gauge-panel,.digital-panel{display:flex;align-items:center;justify-content:center;position:relative;min-width:0;border:1px solid #b6c0c9;border-radius:7px;box-shadow:inset 0 3px 7px #3b4c601f,inset 0 -1px 1px #fff9,0 1px 0 #fff;overflow:hidden}.gauge-panel{padding:13px 12px;background:linear-gradient(160deg,#dce2e6,#edf0f2 55%,#d8dfe4)}.gauge-panel::after,.digital-panel::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(165deg,#ffffff4d 0%,#ffffff0a 37%,transparent 38%,transparent 70%,#ffffff1a);pointer-events:none}.bars{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:4px;align-items:stretch;width:100%;height:132px}.bar{display:block;border-radius:3px;background:linear-gradient(180deg,#ffffff40,transparent 35%,#a1541729),linear-gradient(90deg,#ffffff40,transparent 60%,#9e571d1a),var(--segment-color);box-shadow:inset 1px 0 1px #fff6,inset -1px 0 1px #a35c3b33,0 1px 2px #ae653329;transition:opacity .3s,filter .3s}.bar.spent{background:linear-gradient(180deg,#c8d0d8,#d6dce3);box-shadow:inset 0 1px 2px #586e861a;opacity:.58}.digital-panel{background:linear-gradient(150deg,#dde6e9,#edf3f3 45%,#d9e3e7);padding:12px}.time{font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;font-size:clamp(47px,7vw,84px);font-weight:350;letter-spacing:-3px;line-height:1.16;font-variant-numeric:tabular-nums;white-space:nowrap;color:#344450;text-shadow:0 1px 1px #fff,0 2px 2px #2b435012}.time>span{color:#70818b;font-weight:300;margin:0 1px}
.device-light{position:absolute;top:14px;left:29px;width:5px;height:5px;background:linear-gradient(#c4ccd4,#8f9da9);border-radius:50%;box-shadow:inset 0 1px 1px #40536255,0 1px 0 #fff}.timer-device[data-status="running"] .device-light{background:#f29762;box-shadow:0 0 4px #ea9a6380,inset 0 1px 1px #fff8,0 1px 0 #fff}.timer-device[data-status="completed"] .device-light{background:#69a588;box-shadow:inset 0 1px 1px #fff8,0 1px 0 #fff}.device-action{position:absolute;right:28px;bottom:12px;width:27px;height:27px;border:1px solid #c1cbd5;border-radius:50%;background:linear-gradient(#f9fafc,#d8e0e9);box-shadow:inset 0 1px 0 #fff,0 1px 2px #3346581c;color:#a94a29;display:flex;justify-content:center;align-items:center}.device-action svg{width:15px;height:15px}.timer-device[aria-disabled="true"] .device-action{opacity:0}.timer-device[data-status="completed"] .device-action{color:#508267}.reset-button{position:absolute;right:6px;top:calc(100% + 26px)}.notice{font-size:12px;line-height:1.8;color:var(--accent);max-width:540px;margin:38px auto 0}
dialog{background:#f5f7fa;color:var(--ink);border:1px solid var(--line);border-radius:20px;width:min(440px,calc(100% - 32px));padding:28px;box-shadow:0 30px 100px #24293833;max-height:calc(100dvh - 40px);overflow:auto}dialog::backdrop{background:#22283c66;backdrop-filter:blur(6px)}dialog h2{font-size:18px;font-weight:600;line-height:1.7;margin:0 0 20px}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.small-button{font-size:12px;padding:10px 16px;min-height:44px;background:#e8edf3;border:1px solid var(--line);border-radius:8px}.small-button:hover{border-color:var(--muted)}.danger-button{background:#bd4726;color:#fff;border:0;border-radius:8px;font-size:12px;min-height:44px;padding:10px 16px}
@media(max-width:700px){.page-shell{padding:0 24px}header{height:80px}.brand{font-size:15px;gap:10px}.brand img{width:28px;height:28px}main{min-height:calc(100svh - 80px);padding-bottom:80px}.timer-device{padding:27px 19px 44px;border-radius:23px}.timer-device::before{border-radius:21px}.device-face{grid-template-columns:1.2fr 1fr;gap:12px;padding:10px}.gauge-panel{padding:11px 9px}.bars{height:108px;gap:3px}.time{font-size:61px;letter-spacing:-2px}.digital-panel{padding:9px}.device-light{top:12px;left:24px}.device-action{right:21px;bottom:10px;width:25px;height:25px}}
@media(max-width:440px){.page-shell{padding:0 20px}.brand{font-size:13px;letter-spacing:-.25px;gap:8px}.brand img{width:26px;height:26px}.timer-device{padding:24px 13px 42px;border-radius:20px}.timer-device::before{border-radius:18px}.device-face{grid-template-columns:1.16fr 1fr;gap:9px;padding:8px;border-radius:10px}.gauge-panel{padding:9px 7px}.bars{height:83px;gap:2px}.bar{border-radius:2px}.digital-panel{padding:7px}.time{font-size:43px;letter-spacing:-2px}.time>span{margin:0}.device-light{top:10px;left:19px}.device-action{right:18px;bottom:10px;width:24px;height:24px}}
@media(max-width:350px){.page-shell{padding:0 14px}.brand{font-size:11px;gap:7px}.brand img{width:24px;height:24px}.timer-device{padding:23px 10px 39px}.device-face{gap:7px;padding:6px}.bars{height:75px;gap:1.5px}.gauge-panel{padding:8px 6px}.time{font-size:36px;letter-spacing:-1.5px}.digital-panel{padding:5px}}
@media(max-height:560px) and (min-width:701px){header{height:65px}main{min-height:calc(100svh - 65px);padding:15px 0 45px}.bars{height:95px}.time{font-size:68px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
@media(forced-colors:active){.timer-device,.device-face,.gauge-panel,.digital-panel,.device-action{border:1px solid ButtonText}.bar{background:Highlight}.bar.spent{background:Canvas;border:1px solid GrayText;opacity:1}.time,.time>span{color:CanvasText}}
.timer-stage,.timer-assembly{position:relative;width:100%}.alarm-stop{margin:30px auto 0;padding:13px 24px;min-height:48px;border:1px solid #a94527;border-radius:10px;background:linear-gradient(#c76342,#b74c2b);color:#fff;box-shadow:inset 0 1px 0 #ffffff40,0 3px 6px #73321c1a;font-size:14px;font-weight:600}.alarm-stop:hover{background:linear-gradient(#b95534,#a83f22)}
@media(max-width:700px) and (orientation:portrait){
  main{padding:22px 0 40px;min-height:calc(100svh - 80px)}
  .timer-section{--mobile-length:min(700px,calc(100svh - 240px));--mobile-depth:min(260px,calc(100vw - 76px));display:flex;flex-direction:column;align-items:center}
  .timer-stage{width:var(--mobile-depth);height:var(--mobile-length);flex-shrink:0}
  .timer-assembly{position:absolute;left:50%;top:50%;width:var(--mobile-length);height:var(--mobile-depth);transform:translate(-50%,-50%) rotate(90deg);transform-origin:center}
  .timer-device{height:100%;padding:28px 19px 44px;border-radius:23px;display:flex;align-items:stretch}
  .timer-device::before{border-radius:21px}
  .device-face{width:100%;height:100%;grid-template-columns:1.48fr 1fr;gap:12px;padding:10px}
  .gauge-panel{padding:11px 9px}.bars{height:100%;gap:3px}
  .digital-panel{padding:9px}.time{font-size:clamp(34px,calc(var(--mobile-length)*.105),74px);letter-spacing:-2px}
  .device-light{top:12px;left:24px}.device-action{right:21px;bottom:10px}
  .reset-button{right:14px;bottom:0;top:auto;width:44px;height:44px}
  .alarm-stop{margin-top:25px}.notice{margin:20px auto 0;max-width:100%}
}