:root{color-scheme:light;--bg:#fff8f1;--surface:#fff;--ink:#32261c;--muted:#8d755f;--line:#efdfd1;--soft:#fff0df;--accent:#f27726;--accent-dark:#c34d13;--shadow:0 18px 45px #a6724220;--chip:#fff0df}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse 850px 340px at 60% -110px,#ffe1b9,transparent),var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,"Segoe UI",Arial,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a{color:inherit;text-decoration:none}a:hover{color:var(--accent-dark)}:focus-visible{outline:3px solid #f7a667;outline-offset:3px}[hidden]{display:none!important}.skip{position:absolute;left:-9999px;top:4px;background:var(--surface);padding:10px;z-index:90}.skip:focus{left:8px}.shell{width:min(1200px,calc(100% - 40px));margin:auto}
.topbar{display:flex;align-items:center;gap:16px;min-height:91px;border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:900;letter-spacing:-1.1px;white-space:nowrap}.logo small{display:block;font-size:9px;letter-spacing:2.3px;color:var(--muted);font-weight:850;line-height:1}.logo-mark{display:grid;place-items:center;width:44px;height:44px;background:linear-gradient(145deg,#ffaf55,#e85c13);color:#fff;border-radius:14px;font-size:31px;box-shadow:0 8px 18px #de763a50}.accent{color:var(--accent)}.nav{display:flex;align-items:center;gap:14px;margin-left:auto}.nav a{font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap}.nav a:hover{color:var(--accent)}.plain,.outline,.subtle,.primary,.cta,.icon-button{border-radius:10px;font-weight:800;transition:background .15s,transform .15s}.plain{border:1px solid var(--line);color:var(--ink);background:var(--surface);padding:9px 11px}.plain:hover,.outline:hover,.subtle:hover{background:var(--soft)}.primary,.cta{background:var(--accent);border:1px solid var(--accent);color:#fff;padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;gap:6px}.primary:hover,.cta:hover{background:var(--accent-dark);color:#fff}.outline{border:1px solid #efbe94;background:var(--surface);color:var(--accent-dark);padding:10px 13px}.subtle{background:var(--soft);border:1px solid var(--line);color:var(--ink);padding:10px 13px}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center;padding:65px 0 35px}.eyebrow{display:inline-flex;align-items:center;gap:9px;color:#d36018;font-size:10px;letter-spacing:1.3px;font-weight:900}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#f47f27;box-shadow:0 0 0 5px #f6a96235}.hero h1{font-size:clamp(42px,5.2vw,68px);line-height:1.06;letter-spacing:-3px;margin:18px 0 17px;max-width:640px}.hero h1 em{color:var(--accent);font-style:normal}.hero-left>p{color:var(--muted);font-size:15px;line-height:1.8;max-width:490px}.hero-tags{display:flex;flex-wrap:wrap;gap:9px;color:#9d6949;font-size:11px;margin:21px 0 28px}.hero-tags span{background:var(--chip);padding:6px 10px;border:1px solid var(--line);border-radius:99px}.hero-clock{position:relative;overflow:hidden;min-height:307px;background:radial-gradient(circle at 90% 14%,#ffc9818c,transparent 48%),linear-gradient(145deg,#ff9b3c,#e56417);padding:30px;border-radius:25px;color:#fff;box-shadow:0 32px 60px #d5742942}.hero-clock:after{content:"";position:absolute;width:290px;height:290px;border:1px solid #ffffff39;border-radius:50%;right:-120px;bottom:-145px;box-shadow:0 0 0 45px #ffffff13,0 0 0 95px #ffffff10;pointer-events:none}.hero-clock-head,.clock-footer{position:relative;z-index:1;display:flex;justify-content:space-between;gap:8px;align-items:center}.hero-clock-head{font-size:10px;font-weight:900;letter-spacing:.9px}.dot.light{background:#fff5d9;box-shadow:0 0 0 4px #ffffff30}.digital{position:relative;z-index:1;font-size:clamp(54px,5.5vw,78px);font-weight:830;font-variant-numeric:tabular-nums;letter-spacing:-3px;margin-top:47px;line-height:1}.digital small{font-size:.36em;letter-spacing:-.4px;color:#fff4df}.hero-clock>p{font-weight:750;margin:8px 0 33px}.clock-footer{border-top:1px solid #ffffff70;padding-top:16px;font-size:11px;font-weight:750}
.browser-warning{border:1px solid #e9c39a;background:var(--soft);color:var(--ink);padding:15px 18px;border-radius:13px;font-size:12px;line-height:1.7;margin:0 0 26px}.browser-warning strong{color:var(--accent-dark)}
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:21px;align-items:start}.panel{background:var(--surface);border:1px solid var(--line);border-radius:19px;box-shadow:var(--shadow);padding:25px;min-width:0;scroll-margin-top:22px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:19px}.panel-head h2{font-size:26px;letter-spacing:-.8px;margin:6px 0}.panel-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.emoji{font-size:21px}.chip{white-space:nowrap;border:1px solid #edcbaa;background:var(--chip);color:#ae571c;font-size:10px;font-weight:850;border-radius:99px;padding:7px 9px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:850;color:var(--muted);margin-bottom:13px}.field input,.field select,.field textarea,.world-controls select{background:var(--surface);border:1px solid #ead3c0;border-radius:9px;min-height:41px;padding:9px 10px;color:var(--ink);outline:0;min-width:0;width:100%}.field input:focus,.field select:focus,.field textarea:focus,.timer-inputs input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #f19c6040}.field-label{display:block;color:var(--muted);font-weight:850;font-size:11px;margin:0 0 10px}.field-label small{font-weight:550}.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-bottom:15px}.days label{min-width:0}.days input{position:absolute;opacity:0}.days span{display:grid;place-items:center;padding:10px 0;border-radius:8px;border:1px solid var(--line);font-weight:760;font-size:10px;background:var(--bg);cursor:pointer}.days input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}.days input:focus-visible+span{outline:3px solid #f8ac76;outline-offset:2px}.form-actions{display:flex;gap:9px;flex-wrap:wrap}.alarm-list{display:grid;gap:8px;margin-top:20px}.alarm-item{display:flex;align-items:center;gap:10px;padding:12px;background:var(--bg);border:1px solid var(--line);border-radius:11px}.alarm-detail{flex:1;min-width:0}.alarm-detail strong{display:block;font-size:22px;letter-spacing:-.6px;font-variant-numeric:tabular-nums}.alarm-detail small{color:var(--muted);font-size:11px;display:block;overflow:hidden;text-overflow:ellipsis}.alarm-item.off{opacity:.65}.alarm-actions{display:flex;align-items:center;gap:7px}.switch{position:relative;width:39px;height:23px;display:inline-block}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;background:#c5c0b9;border-radius:100px;transition:background .2s}.switch span:before{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 3px #0003}.switch input:checked+span{background:var(--accent)}.switch input:checked+span:before{transform:translateX(16px)}.switch input:focus-visible+span{outline:3px solid #f9b47f}.icon-button{border:1px solid var(--line);background:var(--surface);color:var(--ink);min-width:33px;min-height:33px;font-size:20px}.icon-button:hover{background:var(--soft)}
.instrument{background:linear-gradient(160deg,var(--soft),var(--bg));border:1px solid var(--line);border-radius:15px;padding:29px 16px;text-align:center}.instrument-label{color:#ae602f;font-size:11px;font-weight:900;letter-spacing:1.1px}.instrument-time{font-size:clamp(37px,4vw,58px);font-variant-numeric:tabular-nums;font-weight:830;letter-spacing:-1.6px;margin:18px 0 23px;white-space:nowrap}.instrument-time span{font-size:.48em;color:var(--accent-dark)}.button-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.button-strip button{min-width:85px}.list-top{display:flex;justify-content:space-between;align-items:center;gap:7px;margin:19px 0 6px}.list-top h3{margin:0;font-size:13px}.text-button{background:none;border:0;color:var(--accent-dark);font-weight:800;font-size:11px}.lap-list{max-height:185px;overflow:auto;padding:0;margin:6px 0 0;list-style:none}.lap-list li:not(.muted-line){display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:10px 4px;font-variant-numeric:tabular-nums}.lap-list li strong{margin-left:auto}.muted-line{color:var(--muted);font-size:12px;padding:12px 0}
.timer-presets,.focus-types{display:flex;flex-wrap:wrap;gap:7px;margin:9px 0 18px}.timer-presets button,.focus-types button{border:1px solid var(--line);background:var(--bg);color:var(--muted);border-radius:8px;padding:8px 10px;font-size:11px;font-weight:800}.timer-presets button:hover,.focus-types button:hover,.focus-types button.active{background:var(--accent);border-color:var(--accent);color:#fff}.timer-inputs{display:flex;justify-content:center;align-items:center;gap:9px;margin:2px 0 16px}.timer-inputs label{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:var(--muted);font-weight:800}.timer-inputs input{width:72px;height:44px;border:1px solid var(--line);border-radius:9px;text-align:center;background:var(--surface);color:var(--ink);font-size:23px;font-weight:850;font-variant-numeric:tabular-nums}.timer-instrument{padding-top:17px}.ring{--fill:0%;width:225px;height:225px;max-width:100%;margin:6px auto 20px;border-radius:50%;background:conic-gradient(var(--accent) var(--fill),#e5d4c6 var(--fill));padding:9px}.ring-inside{height:100%;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px}.ring-inside small{font-size:10px;color:var(--muted);font-weight:850}.ring-inside strong{font-size:32px;letter-spacing:-1px}.ring-inside span{font-size:11px;color:var(--muted)}.instrument-sub{color:var(--muted);font-size:12px;margin:-9px 0 20px}.session-note{color:var(--muted);font-size:11px;margin:18px 0 0}
.calendar-panel,.world-panel{margin-top:24px}.calendar-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.9fr);gap:22px}.calendar-main{min-width:0}.calendar-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}.calendar-title{font-size:21px;font-weight:890;letter-spacing:-.6px;margin-right:auto}.calendar-toolbar .icon-button{height:37px;min-width:37px}.cal-today{font-size:12px}.weekday-grid,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.weekday-grid{text-align:center;color:var(--muted);font-size:10px;font-weight:900;margin-bottom:9px}.calendar-day{min-height:70px;border:1px solid var(--line);background:var(--bg);border-radius:9px;text-align:left;padding:8px;color:var(--ink);font-weight:800;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:5px}.calendar-day.outside{opacity:.45}.calendar-day.today{border-color:var(--accent);background:var(--soft)}.calendar-day.selected{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 7px 15px #ee8b4937}.calendar-day .event-dots{font-size:10px;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}.calendar-day.selected .event-dots{color:#fff}.calendar-day:not(.selected) .event-dots{color:var(--accent)}.calendar-day:hover{border-color:var(--accent)}.calendar-side{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:17px}.calendar-side h3{margin:0 0 6px;font-size:18px}.calendar-explain{font-size:11px;color:var(--muted);margin:0 0 14px}.event-form button{width:100%}.event-list{display:grid;gap:9px}.event-item{background:var(--surface);border:1px solid var(--line);padding:11px;border-radius:9px}.event-item strong{display:block;overflow-wrap:anywhere}.event-item p{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted);font-size:11px;margin:5px 0}.event-actions{display:flex;gap:9px;align-items:center;margin-top:10px}.event-actions button{border:0;background:var(--soft);color:var(--accent-dark);padding:7px;border-radius:7px;font-size:10px;font-weight:800}
.world-controls{display:flex;align-items:end;gap:10px;max-width:420px}.world-controls .field{flex:1}.world-controls>.primary{margin-bottom:13px}.world-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:10px 0 8px}.world-card{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}.world-card>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:5px}.world-card strong{font-size:14px}.world-card .time{font-size:clamp(20px,2.5vw,29px);font-weight:890;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin:12px 0 6px}.world-card small{color:var(--muted);font-size:10px}.world-card button{border:0;background:none;color:var(--muted);padding:4px;font-size:16px}.world-card button:hover{color:var(--accent)}
.more-tools{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:32px 0;padding:24px 28px;border:1px solid var(--line);border-radius:15px;background:var(--soft)}.more-tools h2{margin:0 0 5px;font-size:21px}.more-tools p{margin:0;color:var(--muted);font-size:12px}.more-tools a{border-radius:10px;background:var(--accent);color:#fff;font-size:12px;padding:12px 15px;font-weight:800;white-space:nowrap}.footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding:26px 0 36px;color:var(--muted);font-size:11px}.footer p{margin:0}
.toast{position:fixed;right:18px;bottom:18px;z-index:99;max-width:calc(100vw - 36px);padding:12px 17px;border-radius:10px;color:#fff;background:#ba561c;box-shadow:0 14px 35px #0005;font-weight:790}.ring-overlay{position:fixed;z-index:200;inset:0;display:grid;place-items:center;background:#21160dcf;padding:18px}.ring-card{width:min(460px,100%);padding:32px;border-radius:23px;background:var(--surface);text-align:center;box-shadow:0 25px 85px #0007}.ring-symbol{font-size:70px;animation:wobble .7s ease-in-out infinite alternate}.ring-card h2{font-size:30px;margin:10px}.ring-card p{color:var(--muted);margin:0 0 24px}@keyframes wobble{to{transform:rotate(13deg)}}.tabular{font-variant-numeric:tabular-nums}
body.dark{color-scheme:dark;--bg:#151821;--surface:#202531;--ink:#f7f0e7;--muted:#b7acaa;--line:#41414a;--soft:#352c2a;--chip:#423327;--shadow:0 18px 45px #0003;background:#151821}body.dark .hero-tags{color:#f0bb96}body.dark .hero-clock{color:#fff}body.dark .browser-warning strong{color:#ffa767}body.dark .eyebrow{color:#ffac75}body.dark .ring{background:conic-gradient(var(--accent) var(--fill),#4a4142 var(--fill))}body.dark .calendar-day.selected{color:#fff}body.dark .ring-inside{background:var(--surface)}
@media(max-width:1120px){.nav{gap:8px}.nav a{font-size:10px}.topbar{gap:8px}.logo{font-size:20px}.shell{width:calc(100% - 32px)}.world-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:870px){.topbar{flex-wrap:wrap;padding:13px 0}.nav{width:100%;order:3;overflow:auto;padding:8px 0;justify-content:space-between}.hero{grid-template-columns:1fr;padding-top:44px;gap:25px}.hero-clock{max-width:650px;width:100%}.tool-grid{grid-template-columns:1fr}.calendar-layout{grid-template-columns:1fr}.calendar-side{max-width:none}}
@media(max-width:510px){.shell{width:calc(100% - 22px)}.logo{font-size:20px}.logo-mark{width:38px;height:38px}.settings{font-size:10px;padding:7px}.topbar{gap:7px}.topbar .settings:first-of-type{margin-left:auto}.nav{gap:15px}.hero{padding-top:34px}.hero h1{font-size:41px;letter-spacing:-2px}.hero-left>p{font-size:13px}.hero-clock{padding:22px;min-height:260px}.digital{font-size:53px}.hero-clock>p{margin-bottom:28px}.panel{padding:17px}.panel-head h2{font-size:24px}.panel-head p{font-size:11px}.form-row{gap:8px}.form-actions .outline{flex:1}.days{gap:3px}.days span{font-size:9px;padding:10px 0}.instrument-time{font-size:39px}.button-strip button{min-width:75px;padding:10px}.timer-inputs input{width:62px}.calendar-day{min-height:57px;padding:6px}.calendar-toolbar{gap:7px}.calendar-title{font-size:17px}.calendar-toolbar .icon-button{min-width:30px;height:32px}.cal-today{padding:8px}.world-grid{gap:8px}.world-card{padding:11px}.world-controls{flex-wrap:wrap}.more-tools{align-items:flex-start;flex-direction:column;padding:19px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ring-symbol{animation:none}.plain,.outline,.subtle,.primary,.cta,.icon-button{transition:none}}


/* Keep hidden weekday checkboxes from expanding the page. */
#alarmDays label{position:relative}
#alarmDays input[type=checkbox]{position:absolute;top:0;left:0;width:1px!important;height:1px!important;min-height:0!important;opacity:0;pointer-events:none}
@media(max-width:350px){.topbar{gap:5px}.logo{font-size:18px}.logo-mark{width:34px;height:34px}.settings{padding:6px;font-size:9px}.nav{width:100%;max-width:100%;overflow-x:auto;justify-content:flex-start;gap:13px}}

/* Status messages should never block controls on a narrow screen. */
.toast{pointer-events:none}

/* Support long countdowns, including 200, 1,000 and 10,000 hours. */
#timerH{width:92px}
.timer-instrument .ring-inside strong{font-size:clamp(20px,2.3vw,28px);letter-spacing:-.7px;max-width:100%;white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:510px){#timerH{width:82px;font-size:19px}.timer-instrument .ring-inside strong{font-size:23px}}