*{box-sizing:border-box}body{margin:0;background:#f8f8f5;color:#20211f;font:15px/1.6 system-ui,sans-serif}main{position:relative;width:min(calc(100% - 32px),540px);margin:clamp(32px,12svh,115px) auto 0;text-align:center}h1{margin:0 0 22px;font-size:20px;letter-spacing:-.04em;line-height:44px}.board{display:flex;align-items:center;justify-content:center;gap:2px;font:750 clamp(21px,8vw,48px)/1 ui-monospace,monospace;font-variant-numeric:tabular-nums}.board:has(>:nth-child(14)){font-size:clamp(16px,5.6vw,33px)}.board:has(>:nth-child(17)){font-size:clamp(12px,4.5vw,27px)}.digit{position:relative;display:grid;place-items:center;width:1.02em;height:1.26em;border-radius:5px;background:linear-gradient(#303136 50%,#222327 50%);color:white}.digit:after{content:"";position:absolute;inset:50% 0 auto;border-top:1px solid #1118}.decimal{font-size:.62em}.turn{animation:turn .30s ease-out}.decimal.turn{animation-duration:.10s}@keyframes turn{from{transform:perspective(180px) rotateX(-76deg)}to{transform:none}}@media(prefers-reduced-motion:reduce){.turn{animation:none}}
.note{color:#555953;font-size:13px}.work-time{display:flex;justify-content:center;gap:4px 12px;flex-wrap:wrap;margin:15px 0 22px;font-variant-numeric:tabular-nums}.gathered{margin:0 0 3px}.gathered strong{color:#262a24}#completed:empty,#goal:empty{display:none}#completed{max-height:1.6em;max-width:280px;margin:auto;overflow-y:auto;scroll-snap-type:y mandatory}#completed p{margin:0;scroll-snap-align:start}#goal{margin:0}footer{margin:33px auto 0}#sayings{min-height:3.2em;margin:0 auto;max-width:340px}
.preferences,.sharing{position:absolute;top:0;z-index:2}.preferences{right:44px}.sharing{right:0}.preferences summary,.sharing summary{display:grid;place-items:center;width:44px;height:44px;list-style:none;cursor:pointer;font-size:20px}.preferences summary::-webkit-details-marker,.sharing summary::-webkit-details-marker{display:none}.panel,.share-panel{position:absolute;right:0;top:44px;width:min(260px,calc(100vw - 76px));padding:12px;background:white;border:1px solid #d9dcd5;border-radius:10px;box-shadow:0 8px 24px #0001}.share-panel{width:145px}.share-panel button{width:100%;margin:3px 0}button,input{font:inherit;border:1px solid #a8aca4;border-radius:7px;padding:6px 8px;background:white;color:inherit}button{cursor:pointer}form{display:flex;gap:4px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:9px}#salary{width:110px;font-size:16px}.modes{border:0;margin:0 0 9px;padding:0;display:flex;justify-content:center;gap:8px;font-size:13px}#message,#share-status{margin:0;font-size:12px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ad-slot{pointer-events:none}.ad-side{display:none}.ad-bottom{width:min(100%,468px);height:90px;margin:18px auto 0}@media(min-width:1024px){.ad-side{display:block;position:absolute;top:0;width:160px;height:600px}.ad-left{right:calc(100% + 24px)}.ad-right{left:calc(100% + 24px)}}@media(max-width:600px){.ad-bottom{width:min(100%,320px);height:50px}footer{margin-top:25px}}
#settings{gap:0;flex-wrap:nowrap}#settings label{margin-right:7px;font-size:13px;white-space:nowrap}#settings input{min-width:0;width:108px;height:40px;padding:0 8px;border-radius:7px 0 0 7px;border-right:0;font-variant-numeric:tabular-nums}#settings .unit{height:40px;display:grid;place-items:center;padding-right:7px;border-block:1px solid #a8aca4;font-size:12px;color:#555953}#settings button{height:40px;min-width:44px;border-radius:0 7px 7px 0;font-size:13px;background:#252722;color:#fff;border-color:#252722}.panel input[type=time]{max-width:112px;padding:4px;font-size:12px}.panel>label{display:flex;align-items:center;justify-content:space-between;margin:5px auto;max-width:190px}
:root{color-scheme:dark}body{background:#151719;color:#f0eee8}.note{color:#b5bac1}#countdown{color:#a6d8c0}.gathered strong{color:#f0eee8}.panel,.share-panel{background:#25282c;border-color:#45494f}button,input{background:#25282c;border-color:#62666c}#settings .unit{color:#b5bac1;border-color:#62666c}
.ad-slot{background:#ece6d9;color:#262a28;border-radius:8px;overflow:hidden}.ad-slot>div{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px}.ad-slot small{font-size:10px;letter-spacing:.06em}.ad-slot strong{font-size:21px;line-height:1.25}.ad-right{background:#cdded6}.ad-bottom{background:#ddd7eb}.ad-bottom>div{flex-direction:row;flex-wrap:wrap;gap:4px 12px}.ad-bottom strong{font-size:16px}
#clock-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0;line-height:44px;font-size:clamp(16px,5.2vw,20px)}#custom-name{width:112px;font-size:16px}
.site-nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 20px;margin:0 auto 30px;color:#f0eee8}.site-nav nav{display:flex;gap:12px}.site-nav a,.mini{color:#b5bac1;text-decoration:none;font-size:13px}.site-nav a[aria-current]{color:#a6d8c0;text-decoration:underline;text-underline-offset:5px}.mini{display:block;margin:-18px 0 15px}.tool form{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:16px 0}.tool button{min-height:40px}.tool input{width:110px}.tool .board{margin:15px 0}.tool h1{padding:0;margin-bottom:0}.tool footer{margin-top:20px}.tool .ad-bottom{background:transparent}.tool .note{min-height:1.6em}.quick-watch .board{font-size:clamp(24px,9vw,60px);min-height:1.3em}.quick-watch #controls button{width:104px;min-height:44px}.quick-watch #start{background:#a6d8c0;color:#15211b;border-color:#a6d8c0}.quick-watch #stop{background:#ead6ab;color:#252017;border-color:#ead6ab}.quick-watch #minutes-label{flex-basis:100%}.quick-watch select{font:inherit;background:#25282c;color:#f0eee8;border:1px solid #62666c;border-radius:6px;padding:4px}
.laps{list-style:none;margin:8px auto;padding:0;max-height:7em;overflow:auto;color:#b5bac1;font-size:13px;font-variant-numeric:tabular-nums}.laps:empty{display:none}
.quick-times{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;align-items:center}.quick-times[hidden]{display:none}.quick-times button{padding:4px 10px;font-size:13px}.recent-times{font-size:12px;color:#b5bac1}.recent-times button{min-height:34px}
#controls #minutes,#controls #seconds{width:64px}
.preset-grid{display:grid;width:min(100%,320px);margin:auto;gap:6px}.preset-grid>div{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.preset-grid button{padding-inline:4px}.timer-entry{display:flex;align-items:center;gap:7px}.timer-entry label{white-space:nowrap;font-size:13px}.quick-watch .timer-entry #reset{width:auto}.timer-entry #minutes,.timer-entry #seconds{margin-left:3px}.timer-controls{align-items:center}
.timer-entry{flex-wrap:wrap;justify-content:center}.timer-entry select{min-width:43px}.timer-entry #minutes,.timer-entry #seconds{width:auto;margin-left:0}
.preset-rows{display:grid;width:min(100%,420px);margin:auto;gap:6px}.preset-row{display:flex;gap:3px;min-width:0}.preset-row button{flex:1;min-width:0;white-space:nowrap;padding-inline:0;font-size:clamp(10px,2.9vw,13px)}

.timer-face,.dday .day-count,.dday .day-menus{width:min(100%,454px);margin-inline:auto}.timer-face{--timer-font:clamp(24px,9vw,60px);display:grid}.timer-face .board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) .6fr repeat(2,minmax(0,1fr)) .6fr repeat(2,minmax(0,1fr));width:100%;font-size:var(--timer-font)}.timer-face .board .digit{width:100%}.timer-face .preset-rows{width:100%;min-width:0;margin:0;grid-template-columns:minmax(0,1fr)}.timer-face .preset-row{width:100%}.timer-face .preset-row{gap:4px}

.site-nav nav{align-items:center;flex-wrap:wrap;justify-content:center}.nav-actions{display:inline-flex;gap:2px}.nav-actions .preferences,.nav-actions .sharing{position:relative;top:auto;right:auto}.nav-actions summary{width:34px;height:36px}.nav-actions .panel,.nav-actions .share-panel{top:36px}
#alarm-sound{font:inherit;color:inherit;background:#25282c;border:1px solid #62666c;border-radius:6px;padding:5px}
.panel .compact-setting,#settings{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:nowrap}.panel .compact-setting input,#settings input#salary{width:86px;height:34px;padding:4px 6px;font-size:16px}.panel .compact-setting button,#settings button{height:34px;min-width:42px;padding:0 5px;font-size:12px}.panel #settings .unit{height:34px}.settings-close{display:block;width:100%;margin-top:9px;font-size:13px}
#board-style{font:inherit;color:inherit;background:#25282c;border:1px solid #62666c;border-radius:6px;padding:5px}[data-board-style="digital"] .board .digit,[data-board-style="dots"] .board .digit{color:transparent;background-color:#202326;background-repeat:no-repeat;background-position:center;background-size:auto 87%;animation:none}[data-board-style="digital"] .board .digit{background-image:var(--digit-digital)}[data-board-style="dots"] .board .digit{background-image:var(--digit-dots)}[data-board-style="digital"] .board .digit:after,[data-board-style="dots"] .board .digit:after{display:none}
.nav-actions .preferences .panel{width:min(292px,calc(100vw - 44px));padding:12px;display:grid;gap:8px;text-align:left}
.preferences .panel>label,.preferences #settings{display:grid;grid-template-columns:72px minmax(0,1fr) 44px;gap:5px;align-items:center;max-width:none;margin:0;min-width:0;font-size:13px}
.preferences .panel>label input,.preferences .panel>label select,.preferences #settings input#salary{width:100%;max-width:none;min-width:0;height:34px;margin:0;padding:4px 7px;border:1px solid #62666c;border-radius:6px;font-size:13px}
.preferences .panel>label input[type=time],.preferences .panel>label #board-style{grid-column:2 / -1}
.preferences #settings{grid-template-columns:72px minmax(0,1fr) auto 44px}
.preferences #settings label{margin:0}.preferences #settings .unit{border:0;padding:0;height:auto}
.preferences .panel>label button,.preferences #settings button{width:44px;min-width:0;height:34px;border-radius:6px;padding:0;font-size:12px}
.preferences .modes{margin:2px 0 0;padding-left:77px;justify-content:flex-start;gap:7px;white-space:nowrap}
.preferences .modes label{display:flex;align-items:center;gap:2px}.preferences .modes input{margin:0;accent-color:#a6d8c0}
.preferences #message:empty{display:none}.preferences .settings-close{margin:2px 0 0;height:34px}
@media(max-width:600px){.nav-actions .preferences .panel,.nav-actions .sharing .share-panel{position:fixed;top:104px;left:50%;right:auto;transform:translateX(-50%);max-height:calc(100dvh - 116px);overflow:auto}.nav-actions .preferences .panel{width:min(292px,calc(100vw - 24px))}}
.preferences .panel #screen-mode{grid-column:2 / -1;background:#25282c;color:inherit}
:root[data-theme=light]{color-scheme:light}
[data-theme=light] body{background:#f4f0e7;color:#232522}
[data-theme=light] .site-nav,[data-theme=light] .gathered strong{color:#232522}
[data-theme=light] .note,[data-theme=light] .site-nav a,[data-theme=light] .mini,[data-theme=light] .laps{color:#53574e}
[data-theme=light] #countdown,[data-theme=light] .site-nav a[aria-current]{color:#285a43}
[data-theme=light] .digit{background:linear-gradient(#eee9df 50%,#e4ded2 50%);color:#232522}
[data-theme=light] .digit:after{border-color:#b9b1a2}
[data-theme=light][data-board-style=digital] .board .digit,[data-theme=light][data-board-style=dots] .board .digit{background-color:#202326;color:transparent}
[data-theme=light] .panel,[data-theme=light] .share-panel{background:#fffaf1;border-color:#c4bcad}
[data-theme=light] button,[data-theme=light] input,[data-theme=light] .tool select,[data-theme=light] .preferences select{background:#fdf9ef;color:#232522;border-color:#aaa292}
[data-theme=light] #settings .unit{color:#53574e}
.money-basis{margin:8px 0 0}.money-basis button{border:0;padding:4px;background:transparent;color:inherit;text-decoration:underline;font-size:inherit}
.site-nav{margin-bottom:0;padding:4px 10px}
main{margin-top:clamp(26px,6svh,58px)}
.tool .mini{margin:0 0 12px}
.tool .board{margin:12px 0 24px}
.tool .timer-face .preset-rows{margin:0}
.tool form{margin-top:20px}
.money-basis{margin-top:18px}
.tool #display+.note{margin:0 0 14px}
@media(max-width:600px){
 .site-nav{flex-direction:column;gap:3px}
 .site-nav nav{flex-wrap:nowrap;gap:clamp(4px,1.8vw,10px)}
 .site-nav nav>a{white-space:nowrap;font-size:12px}
 .nav-actions{gap:0}
 .nav-actions summary{width:32px}
 main{margin-top:24px}
}
.share-panel:has(.reopen-guide[open]){width:min(270px,calc(100vw - 24px))}
.nav-actions .share-panel .reopen-guide summary{display:block;width:auto;height:auto;padding:6px 0;font-size:13px;text-decoration:underline;cursor:pointer}
.reopen-guide p{margin:6px 0;text-align:left;font-size:12px;line-height:1.55}

.tool-tabs,.day-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.tool-tabs{margin:10px auto -8px}.tool-tabs a{color:inherit;font-size:13px}.dday h2{font-size:15px}.dday .board{font-size:clamp(28px,10vw,54px)}.dday #editor,.day-list{margin:18px auto 0;max-width:340px}.dday #event-form{display:grid;gap:7px}.dday #event-form label{display:grid;grid-template-columns:75px 1fr;align-items:center;text-align:left;font-size:13px}.dday #event-form input{width:100%;min-width:0}.day-list ul{list-style:none;padding:0}.day-list li{display:flex;gap:5px;margin:5px 0}.day-list li button:first-child{flex:1;text-align:left;overflow-wrap:anywhere}.dday [hidden]{display:none!important}.dday #goal-note{overflow-wrap:anywhere}
.dday .day-actions button{font-size:12px;min-height:32px;min-width:44px;padding:4px 10px;white-space:nowrap}
.dday #event-name,.dday #remaining{overflow-wrap:anywhere}
.dday #editor>summary,.dday .day-list button,.dday .day-list summary{min-height:44px}
.dday #editor>summary,.dday .day-list summary{align-content:center;cursor:pointer}
@media(max-width:480px){
 .dday{width:calc(100% - 32px);margin-top:20px}
 .dday .mini{margin:0 0 8px}
 .dday .board{font-size:clamp(26px,9vw,43px)}
 .dday #event-form{gap:10px}
 .dday #event-form label{grid-template-columns:minmax(0,1fr);gap:4px}
 .dday #event-form input{min-height:44px;font-size:16px}
 .dday .day-actions{gap:6px}
 .dday .day-actions button{padding-inline:9px}
 .dday .day-list li button:last-child{min-width:44px}
}
.dday .day-count{display:flex;align-items:baseline;justify-content:center;gap:clamp(6px,3vw,14px);white-space:nowrap}.dday .day-count .board{margin:4px 0}
.dday .day-cheer{min-height:3.2em;max-width:340px;margin:18px auto 0;text-wrap:balance;word-break:keep-all}

.dday #focus-day p{margin:4px 0}
.dday #event-actions{margin-top:8px}
.dday #editor,.dday .day-manage{margin:6px auto 0;max-width:340px}
.dday .day-manage>summary,.dday #editor>summary{min-height:32px;align-content:center;cursor:pointer;font-size:13px}
.dday .day-manage .day-list,.dday .day-manage footer{margin-top:6px}
.dday #day-status:empty{display:none}
.dday .day-cheer{margin-top:8px}

.dday #event-name{margin:6px 0 0;font-size:18px}

.dday #today-date{font-size:13px}


 .dday .day-count{flex-wrap:wrap;align-items:center;gap:4px 8px}
.dday #day-clock{width:100%;margin:0}
.dday #day-clock-board{font-size:var(--timer-font)}
.dday #remaining:empty{display:none}


.dday .day-menus{position:relative;margin:6px auto 0;padding-top:36px}
.dday .day-menus>details{margin:0}
.dday .day-menus>details>summary{position:absolute;top:0;width:50%;min-height:36px;white-space:nowrap}
.dday .day-menus>#editor>summary{left:0}
.dday .day-menus>.day-manage>summary{right:0}

.dday .day-menus{margin-top:12px;padding-top:44px}
.dday .day-menus>details>summary{min-height:44px}
.dday .day-count{margin-block:10px}

.dday .day-count{flex-wrap:nowrap;container-type:inline-size}
.dday #day-clock-board{font-size:clamp(20px,9cqw,54px)}
.dday #day-clock{width:auto;margin:0}
.dday #day-clock-board{display:flex;width:auto}
.dday #day-clock-board .digit{width:1.02em}

.dday #day-clock-board:has(>:nth-child(10)){font-size:clamp(16px,8cqw,48px)}
.dday #day-clock-board:has(>:nth-child(12)){font-size:clamp(13px,6.8cqw,42px)}

.dday .day-menus>#editor>summary{left:0;width:100%}
.dday #event-actions{gap:4px}
.dday #event-actions button{padding-inline:6px}

.finish-dialog{width:min(340px,calc(100% - 32px));padding:22px;border:1px solid #55595e;border-radius:14px;background:#202225;color:#f0eee8;text-align:left}
.finish-dialog::backdrop{background:#0009}
.finish-title{display:block;font-size:17px}
.finish-dialog p{margin:5px 0 0;font-size:13px}
.finish-dialog label{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13px}
.finish-dialog input[type=checkbox]{appearance:auto;width:16px;height:16px;margin:0;padding:0;accent-color:#a6d8c0}
.finish-dialog form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 0}
.finish-dialog button{min-height:44px;font-size:13px}
.finish-share{background:#a6d8c0;color:#15211b;border-color:#a6d8c0}
.finish-status:empty{display:none}
[data-theme=light] .finish-dialog{background:#f8f5ee;color:#232522;border-color:#d6d0c5}

.finish-dialog .finish-title{margin:0}.finish-dialog .finish-status{min-height:0}
.tool-tabs{gap:16px}.tool-tabs a{display:grid;align-items:center;min-height:36px;text-decoration:none}.tool-tabs a[aria-current]{font-weight:700;text-decoration:underline;text-underline-offset:4px}

.world-clocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:min(100%,454px);margin:10px auto}
.world-clocks button{border:1px solid #62666c;border-radius:8px;padding:4px 6px;line-height:1.3;min-height:60px;font-size:12px}
.world-clocks button[aria-pressed=true]{border-color:#a6d8c0;box-shadow:inset 0 0 0 1px #a6d8c0}
.world-clocks strong,.world-clocks small{display:block;font-variant-numeric:tabular-nums}
.world-clocks strong{font-size:clamp(17px,5.5vw,22px)}
.world-clocks small{font-size:11px}

.world-clocks{width:100%}
@media(max-width:600px){
 .world-clocks{width:calc(100% + 16px);margin-inline:-8px}
}
@media(min-width:601px){
 .world-clocks{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.quick-watch #clock-face{margin-bottom:0}.quick-watch #clock-date{margin:3px 0 12px;font-size:clamp(14px,4.5vw,20px);font-weight:600;color:inherit}

.tool:has(>.mini){margin-top:12px}.tool>.mini{margin:0 0 8px}





@media(min-width:760px){.site-nav .tools-group,.tool-tabs{display:none}.tool-tabs+main.tool:has(>.mini){margin-top:50px}}


@keyframes tool-menu-reveal {
 from {opacity:0;transform:translateX(-5px)}
 to {opacity:1;transform:translateX(0)}
}
@media (prefers-reduced-motion:no-preference){
 .tool-tabs a{animation:tool-menu-reveal 180ms ease-out both}
 .site-nav .tools-direct[href="stopwatch.html"],.tool-tabs a:nth-child(2){animation-delay:35ms}
 .site-nav .tools-direct[href="alarm.html"],.tool-tabs a:nth-child(3){animation-delay:70ms}
 .site-nav .tools-direct[href="clock.html"],.tool-tabs a:nth-child(4){animation-delay:105ms}
}
.site-nav:has(+.tool-tabs){flex-direction:column;gap:3px}.site-nav:has(+.tool-tabs) nav{flex-wrap:nowrap}

 .site-nav nav>.tools-direct{
 display:block;max-width:0;min-width:0;margin-left:calc(-1 * var(--tools-gap,12px));
 overflow:hidden;white-space:nowrap;opacity:0;visibility:hidden;
 transition:max-width 160ms ease,margin-left 160ms ease,opacity 160ms ease,visibility 160ms;
 transition-delay:var(--close-delay,0ms);
}
.site-nav nav>.tools-direct[href="timer.html"]{--close-delay:495ms}
@media(min-width:610px){.site-nav nav>.tools-direct[href="timer.html"]{max-width:65px;margin-left:0;opacity:1;visibility:visible;transition-delay:0ms}}
.site-nav nav>.tools-direct[href="stopwatch.html"]{--close-delay:330ms}
@media(min-width:660px){.site-nav nav>.tools-direct[href="stopwatch.html"]{max-width:65px;margin-left:0;opacity:1;visibility:visible;transition-delay:165ms}}
.site-nav nav>.tools-direct[href="alarm.html"]{--close-delay:165ms}
@media(min-width:710px){.site-nav nav>.tools-direct[href="alarm.html"]{max-width:65px;margin-left:0;opacity:1;visibility:visible;transition-delay:330ms}}
.site-nav nav>.tools-direct[href="clock.html"]{--close-delay:0ms}
@media(min-width:760px){.site-nav nav>.tools-direct[href="clock.html"]{max-width:65px;margin-left:0;opacity:1;visibility:visible;transition-delay:495ms}}
@media(max-width:600px){.site-nav nav{--tools-gap:clamp(4px,1.8vw,10px)}}
@media(prefers-reduced-motion:reduce){.site-nav nav>.tools-direct{transition:none}}

.site-nav:has(+.tool-tabs) nav{gap:10px;--tools-gap:10px}
@media(min-width:720px) and (max-width:759.98px){
 .site-nav nav>.tools-group{
  --group-width:clamp(0px,calc((760px - 100vw) * 2),80px);
  max-width:var(--group-width);overflow:hidden;white-space:nowrap;
  margin-left:clamp(-10px,calc(var(--group-width) - 10px),0px);
 }
}
.site-nav:has(+.tool-tabs) nav>a{white-space:nowrap;font-size:12px}.site-nav:has(+.tool-tabs) .nav-actions{gap:0}.site-nav:has(+.tool-tabs) .nav-actions>details>summary{width:32px}

@media (min-width:610px) and (max-width:759.98px) and (prefers-reduced-motion:no-preference){
 .tool-tabs{
  --tool-rise:clamp(0px,calc((100vw - 610px) * .24),36px);
  transform:translateY(calc(-1 * var(--tool-rise)));
  opacity:clamp(0,calc((760px - 100vw) / 150px),1);
  position:relative;
  z-index:1;
 }
}



.external-browser{text-align:center;margin:4px 12px;font-size:12px}.external-browser a,.external-browser small{display:block;color:inherit;margin:4px 0}.external-browser summary{cursor:pointer}

#welcome{max-height:calc(100dvh - 32px);overflow:auto}#welcome p+p{margin-top:10px}.external-browser small:empty{display:none}.external-browser input{width:100%}

.preferences #settings button,.preferences .settings-name-apply,.preferences .settings-listen{box-sizing:border-box;width:44px;min-width:44px;height:34px;min-height:34px;padding:0;border-radius:6px;font-size:12px;font-weight:700}
.preferences #settings button{background:#a6d8c0;color:#152b22;border-color:#a6d8c0}
.preferences .settings-name-apply{background:#c1d3ed;color:#192e49;border-color:#c1d3ed}
.preferences .settings-listen{background:#eddbaf;color:#392b13;border-color:#eddbaf}
.preferences .settings-close{background:#39444b;color:#fff;border-color:#687780}

.nav-actions .settings-shortcut{width:32px;height:36px;border:0;background:none;padding:0;color:inherit;font-size:18px}
.preferences.inline-settings{position:static;width:min(100%,340px);margin:8px auto}
.inline-settings>summary{width:auto;height:auto;min-height:34px;font-size:13px}
.inline-settings .panel{position:static;display:grid;gap:6px;width:100%;background:#25282c;color:#f0eee8;box-shadow:none;text-align:left}
.inline-settings .settings-category>summary{display:block;width:auto;height:auto;padding:5px;font-size:13px;cursor:pointer}
.inline-settings .settings-category>label{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:5px 0;font-size:13px}
.inline-settings #settings button,.inline-settings label button{background:#a6d8c0;color:#15211b;border-color:#a6d8c0}
.inline-settings .settings-close{background:#343e3a;color:#e5f5ed;border-color:#637c71;margin-top:4px}
[data-theme=light] .inline-settings .panel{background:#f8f5ee;color:#232522}

.external-browser{text-align:center;margin:4px 12px;font-size:12px}.external-browser a,.external-browser small{display:block;color:inherit;margin:4px 0}.external-browser summary{cursor:pointer}

.preferences.inline-settings .settings-name-apply{background:#c1d3ed;color:#192e49;border-color:#c1d3ed}.preferences.inline-settings .settings-listen{background:#eddbaf;color:#392b13;border-color:#eddbaf}
#welcome .external-browser a{display:grid;place-items:center;min-height:48px;padding:8px 10px;border-radius:8px;background:#a6d8c0;color:#152b22;font-size:16px;font-weight:800;text-decoration:none}
.finish-dialog#alarm-dialog{text-align:center}.finish-dialog#alarm-dialog #dismiss-alarm{display:block;width:100%;margin:16px 0 0}

#display:fullscreen{display:flex;align-items:center;justify-content:center;gap:clamp(2px,1vw,12px);margin:0;background:#17191b;color:#f6f4ee;font-size:clamp(28px,12vw,180px)}#display:fullscreen .digit{width:1.02em}#timer-fullscreen{margin:8px auto;font-size:13px}

.compact-time-tool .timer-face{--timer-font:clamp(25px,10vw,70px);width:min(100%,520px)}
.compact-time-tool[data-mode=up] #display{font-size:clamp(24px,10vw,70px)}
.compact-time-tool[data-mode=up] #display:has(>:nth-child(10)){font-size:clamp(21px,8.8vw,60px)}

.tool-tabs{gap:6px}
.tool-tabs a{padding-inline:8px;border-radius:7px;font-weight:600}
.tool-tabs a[aria-current],.site-nav nav>a[aria-current]{background:#a6d8c026;color:#bce9d3;font-weight:800;text-decoration:none;box-shadow:inset 0 -2px #a6d8c0;border-radius:6px}
[data-theme=light] .tool-tabs a[aria-current],[data-theme=light] .site-nav nav>a[aria-current]{background:#d8ebe0;color:#234c38;box-shadow:inset 0 -2px #458464}
.compact-time-tool #display:not(:fullscreen){margin-block:clamp(22px,5vw,36px)}

.compact-time-tool>.mini{margin-bottom:clamp(22px,5vw,36px)}.compact-time-tool #display:not(:fullscreen){margin-top:0}

body:has(>.site-footer){min-height:100dvh;display:flex;flex-direction:column}.site-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin:auto 16px 16px;padding-top:24px;font-size:12px}.site-footer a,.privacy-page a{color:inherit}.privacy-page{width:min(calc(100% - 32px),680px);text-align:left;overflow-wrap:anywhere}.privacy-page h1{margin:10px 0;font-size:24px}.privacy-page h2{margin:20px 0 6px;font-size:16px}.privacy-page p{margin:6px 0}

.income-category{display:flex;gap:6px;justify-content:center}
.income-category button{font-size:12px;min-height:34px}
.income-category [aria-pressed=true]{background:#a6d8c0;color:#152b22}
.preferences .modes[hidden]{display:none}
.nav-actions .preferences .panel{top:60px}
@media(max-width:600px){.nav-actions .preferences .panel{top:clamp(112px,24dvh,180px);max-height:calc(100dvh - clamp(112px,24dvh,180px) - 16px)}}

.menu-clock{text-align:center;margin:2px 0 0;font-size:12px;font-variant-numeric:tabular-nums}

.menu-clock{display:flex;justify-content:center;flex-wrap:wrap;gap:2px 12px;margin:2px 12px 0}
#sayings{word-break:keep-all;overflow-wrap:normal;text-wrap:balance;line-height:1.65}

#sayings .saying-clause{display:inline-block;max-width:100%;word-break:keep-all}#sayings{min-height:3.3em}

/* Shared settings layout, including narrow mobile screens. */
.nav-actions .preferences .panel{
 grid-template-columns:minmax(0,1fr);min-width:0;
 width:min(320px,calc(100vw - 24px));
}
.preferences .panel>*,.preferences .panel>label>*{min-width:0}
.preferences .panel [hidden]{display:none!important}
.preferences .panel>label{grid-template-columns:64px minmax(0,1fr) 44px}
.preferences #settings{grid-template-columns:64px minmax(0,1fr) auto 44px;margin:0}
.preferences .modes{padding:0;justify-content:center;flex-wrap:wrap;white-space:normal}
.preferences .modes input{width:auto;height:auto}
.preferences .panel>label input,.preferences .panel>label select,.preferences #settings input#salary{
 height:40px;font-size:16px;width:100%;max-width:100%;
}
.preferences .panel>label button,.preferences #settings button{
 width:44px;min-width:44px;height:40px;min-height:40px;
}
.preferences #settings .unit{align-self:center}
.preferences .settings-close{height:40px;min-height:40px}
.preferences .income-category{min-width:0}
.preferences .income-category button{font-size:13px;padding:4px 10px}
/* Tool faces share the same top, spacing and tile dimensions. */
.tool-tabs-spacer{height:36px}
.tool.dday{margin-top:12px}
@media(min-width:760px){.tool.dday{margin-top:50px}}
.dday .mini{margin-bottom:clamp(22px,5vw,36px)}
.compact-time-tool>.mini{margin-bottom:clamp(22px,5vw,36px)}
.compact-time-tool .timer-face,.dday .day-count{
 --timer-font:clamp(25px,10vw,70px);width:min(100%,520px);
}
.compact-time-tool #display:not(:fullscreen){margin-top:28px}
.dday #focus-day{position:relative}
.dday #event-name{height:28px;line-height:28px;font-size:15px;margin:0}
.dday .day-count{margin:0 auto}
.dday #day-clock{width:100%;margin:0}
.dday #day-clock-board{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) .6fr repeat(2,minmax(0,1fr)) .6fr repeat(2,minmax(0,1fr));
 width:100%;font-size:var(--timer-font);margin:0 0 clamp(22px,5vw,36px);
}
.dday #day-clock-board .digit{width:100%}
.dday #day-clock-board:has(>:nth-child(9)){display:flex;font-size:clamp(24px,8vw,60px)}
.dday #day-clock-board:has(>:nth-child(9)) .digit{width:1.02em}
.tool.timer-layout #controls{display:flex;flex-direction:column;gap:8px}
.tool.timer-layout .timer-entry{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.tool.timer-layout .timer-entry #reset{min-height:44px}
.timer-main-actions{display:flex;justify-content:center;gap:8px;width:100%}
.quick-watch #controls .timer-main-actions button{width:120px}
.timer-layout .preset-row button{font-size:clamp(11px,3.3vw,14px);font-weight:600;padding:4px 1px}
#status{font-weight:650;font-size:14px;color:#a6d8c0}
[data-theme=light] #status{color:#285a43}
.notice-dialog{text-align:center}
.notice-dialog button{width:100%;margin-top:16px;min-height:44px}
.dday #event-actions{gap:8px}
.dday #event-actions button{min-height:40px;padding:6px 12px;font-size:13px}
.dday #done{background:#a6d8c0;color:#152b22;border-color:#a6d8c0}
.backup-menu{margin:8px auto 0;width:min(100%,340px);font-size:12px}
.backup-menu>summary{cursor:pointer;padding:4px}
.backup-menu .day-actions{margin-top:6px}

/* Moneywatch text hierarchy. */
.money-goals{font-size:13px;line-height:1.6;margin:10px 0 16px}
.money-goals #completed{color:#aeb5bb}
.money-goals #goal strong{font-size:15px;color:#a6d8c0;font-weight:750}
.money-basis{font-size:12px;color:#aeb5bb}
#month-total{font-weight:750;color:#f0eee8}
#pay-target{font-size:12px;color:#aeb5bb}
#sayings{font-size:14px;line-height:1.6}
@media(min-width:601px){#sayings{font-size:15px}}
[data-theme=light] .money-goals #goal strong{color:#285a43}
[data-theme=light] #month-total{color:#232522}
#board{font-size:clamp(34px,10vw,72px)}
#board:has(>:nth-child(9)){font-size:clamp(24px,7.5vw,54px)}
#board:has(>:nth-child(12)){font-size:clamp(18px,5.6vw,40px)}
#board:has(>:nth-child(15)){font-size:clamp(14px,4.3vw,30px)}
#board:has(>:nth-child(18)){font-size:clamp(11px,3.5vw,24px)}
#alarm-warning{word-break:keep-all;line-height:1.6}
#alarm-warning:empty{display:none}
#status{word-break:keep-all;line-height:1.6}
.backup-menu .day-actions button{min-height:40px}

.money-summary>p{margin:0;line-height:1.6}.money-summary>.money-basis{margin-top:3px}.money-summary .money-basis button{padding-block:2px}

#welcome .welcome-steps{padding-left:18px;margin:12px 0;font-size:13px;line-height:1.6;word-break:keep-all}#welcome .welcome-steps li+li{margin-top:9px}#welcome .welcome-note{font-size:12px;color:#afb8bf}#welcome form{position:sticky;bottom:-22px;padding-block:8px;background:inherit}

#welcome .finish-title{font-size:18px;line-height:1.45;letter-spacing:-.03em}
#welcome p{line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
#welcome .welcome-intro{margin-top:12px;font-size:14px}
#welcome .welcome-intro strong{font-weight:750;color:#bce9d3}
#welcome .welcome-purpose{color:#c1c6cd;font-size:13px}
#welcome .welcome-steps{color:#c1c6cd;font-size:13px}
#welcome .welcome-steps strong{color:#f0eee8;font-size:14px;font-weight:750}
#welcome .welcome-steps b{color:#e0e6e2;font-weight:650}
#welcome .welcome-tools{padding-top:10px;border-top:1px solid #ffffff20}
#welcome .welcome-note{font-size:12px;line-height:1.5}
#welcome .welcome-share{font-weight:650;font-size:13px;margin-top:12px}
[data-theme=light] #welcome .welcome-intro strong{color:#285a43}
[data-theme=light] #welcome .welcome-purpose,[data-theme=light] #welcome .welcome-steps{color:#53574e}
[data-theme=light] #welcome .welcome-steps strong,[data-theme=light] #welcome .welcome-steps b{color:#232522}
[data-theme=light] #welcome .welcome-tools{border-color:#23252220}

/* Compact shared page rhythm: keep faces and touch targets unchanged. */
.site-nav{padding-block:2px;gap:3px 14px}
main{margin-top:16px}
main:not(.tool) h1{margin-bottom:12px}
.tool:has(>.mini),.tool.dday{margin-top:8px}
.compact-time-tool>.mini,.dday .mini{margin-bottom:12px}
.compact-time-tool #display:not(:fullscreen){margin-top:28px;margin-bottom:16px}
.dday #day-clock-board{margin-bottom:16px}
.money-goals{margin:6px 0 10px;line-height:1.5}
main>footer,.tool footer{margin-top:16px}
.tool form{margin-block:12px}
.dday .day-menus{margin-top:8px;padding-top:28px}
@media(min-width:760px){
 .tool-tabs+main.tool:has(>.mini),.tool.dday{margin-top:20px}
}

/* Daily ranking layout preview; sample records are explicitly marked. */
.site-nav .ranking-ticker{display:flex;align-items:center;gap:8px;width:min(100%,390px);min-height:32px;padding:3px 8px;border:1px solid #a6d8c02b;border-radius:6px;background:#a6d8c009;color:inherit;font-size:11px;text-align:left;line-height:1.4}
.ranking-caption{white-space:nowrap;color:#a6d8c0;font-size:10px}.ranking-caption small{color:#b5bac1;font-size:9px}
.ranking-window{flex:1;min-width:0;overflow:hidden}.ranking-entry{display:flex;justify-content:space-between;align-items:center;gap:8px;white-space:nowrap;font-variant-numeric:tabular-nums}.ranking-entry b,.ranking-entry strong{color:#bce9d3}.ranking-entry strong{margin-left:5px}
.ranking-dialog{width:min(430px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto}.ranking-dialog h2{font-size:18px}.ranking-list{list-style:none;padding:0;margin:12px 0}.ranking-list li{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:9px 0;border-bottom:1px solid #ffffff15;font-size:12px;font-variant-numeric:tabular-nums}.ranking-list strong{color:#bce9d3;margin-left:5px}.ranking-dialog form button{width:100%;min-height:40px}
@media(max-width:1100px){.site-nav .ranking-ticker{flex-basis:100%;order:3;margin-inline:auto}.site-nav{flex-wrap:wrap}}
@media(max-width:600px){.site-nav .ranking-ticker{width:min(100%,390px);flex-basis:auto}.ranking-caption{font-size:9px}.ranking-entry{font-size:10px;gap:4px}.ranking-entry strong{margin-left:3px}}
[data-theme=light] .ranking-caption,[data-theme=light] .ranking-entry b,[data-theme=light] .ranking-entry strong,[data-theme=light] .ranking-list strong{color:#285a43}

.ranking-pages{display:flex;justify-content:center;gap:6px;margin:12px 0}.ranking-pages button{min-width:36px;min-height:36px;padding:4px}.ranking-pages button[aria-current]{background:#a6d8c0;color:#152b22;font-weight:750}

#day-summary .ranking-name{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px;text-align:left}#ranking-nickname{width:100%;min-width:0;font-size:16px;height:40px}#day-summary .ranking-consent{font-size:11px;line-height:1.5;color:#b5bac1}#day-summary form button{min-height:40px}#day-summary .finish-share{font-size:12px;padding-inline:8px}

/* Finish popup: clear, compact actions without shrinking touch targets. */
#day-summary{width:min(360px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow-y:auto;padding:20px 18px;border-radius:16px}
#day-summary h2{font-size:18px;line-height:1.45;letter-spacing:-.035em;text-wrap:balance;margin:0 0 12px}
#day-summary #day-duration-label{font-size:12px;color:#b5bac1;margin:0 0 4px}
#day-summary #day-total{display:block;font-size:30px;line-height:1.25;font-variant-numeric:tabular-nums}
#day-summary #day-duration:empty{display:none}
#day-summary .ranking-name{margin-top:18px;padding-top:14px;border-top:1px solid #ffffff18;font-size:12px;grid-template-columns:48px minmax(0,1fr)}
#day-summary #ranking-nickname{height:40px;border-radius:8px;padding:6px 10px;font-size:16px}
#day-summary label:has(#share-private-total){margin-top:10px;font-size:12px;text-align:left}
#day-summary .ranking-consent{margin-top:8px;text-align:left;font-size:11px;line-height:1.55;color:#aeb5bb}
#day-summary form{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;margin:16px 0 0}
#day-summary form button{width:100%;min-width:0;height:42px;min-height:42px;padding:0 8px;border-radius:8px;white-space:nowrap;font-size:12px;line-height:1.3}
#day-summary #close-day-summary{background:transparent;color:#c2c8cd;border-color:#535b61;font-weight:500}
#day-summary #share-day{background:#a6d8c0;color:#163326;border-color:#a6d8c0;font-weight:750}
#day-summary #share-day:disabled{opacity:.65;cursor:wait}
#day-summary #day-share-status{font-size:12px;line-height:1.5;margin-top:10px;word-break:keep-all}
[data-theme=light] #day-summary #close-day-summary{color:#51594f;border-color:#aeb8aa}
[data-theme=light] #day-summary .ranking-name{border-color:#23252220}
[data-theme=light] #day-summary .ranking-consent,[data-theme=light] #day-summary #day-duration-label{color:#62685d}

/* Compact ranking list and centered footer. */
.ranking-dialog{padding:18px}
.ranking-dialog h2{margin:0 0 6px;font-size:17px}
.ranking-dialog .ranking-guide{font-size:11px;line-height:1.5;margin:0;color:#b5bac1;word-break:keep-all}
.ranking-dialog .ranking-state:empty{display:none}
.ranking-dialog .ranking-state{font-size:11px;margin-top:6px}
.ranking-dialog .ranking-list{margin:9px 0}
.ranking-dialog .ranking-list li{padding:5px 0;line-height:1.5;min-height:28px}
.ranking-dialog .ranking-pages{gap:5px;margin:10px 0 0}
.ranking-dialog .ranking-pages button{width:26px;min-width:26px;height:26px;min-height:26px;padding:0;font-size:11px;border-radius:5px;line-height:1}
.ranking-dialog form{display:flex;justify-content:center;margin:8px 0 0}
.ranking-dialog form button{width:76px;min-width:0;height:28px;min-height:28px;padding:0 10px;font-size:11px;border-radius:6px}
[data-theme=light] .ranking-dialog .ranking-guide{color:#62685d}

/* Compact shared preferences: smaller footprint, readable mobile inputs. */
.nav-actions .preferences .panel{width:min(272px,calc(100vw - 24px));padding:10px;gap:5px;border-radius:9px}
.preferences .panel>label{grid-template-columns:52px minmax(0,1fr) 36px;gap:4px;font-size:12px}
.preferences #settings{grid-template-columns:52px minmax(0,1fr) auto 36px;gap:4px}
.preferences #settings label,.preferences #settings .unit{font-size:12px}
.preferences .panel>label input,.preferences .panel>label select,.preferences #settings input#salary{height:34px;padding:3px 6px;font-size:16px}
.preferences .panel>label button,.preferences #settings button{width:36px;min-width:36px;height:34px;min-height:34px;font-size:11px}
.preferences .settings-close{height:34px;min-height:34px;font-size:12px;margin-top:2px}
.preferences .income-category{gap:5px}
.preferences .income-category button{min-height:30px;padding:3px 8px;font-size:12px}
.preferences .modes{margin:0;gap:6px;font-size:12px}
.preferences .panel #message{font-size:11px;line-height:1.4}

/* Shared popup typography: one step smaller with tighter tracking. */
.finish-dialog{letter-spacing:-.025em;font-size:14px}
.finish-dialog .finish-title,.finish-dialog h2{font-size:17px;letter-spacing:-.04em}
.finish-dialog p,.finish-dialog label{font-size:12px;line-height:1.55}
.finish-dialog button{font-size:12px;letter-spacing:-.025em}
#welcome .finish-title{font-size:17px}
#welcome .welcome-intro{font-size:13px}
#welcome .welcome-purpose,#welcome .welcome-steps,#welcome .welcome-share{font-size:12px}
#welcome .welcome-steps strong{font-size:13px}
#welcome .welcome-note{font-size:11px}
#welcome .external-browser a{font-size:15px}
#day-summary h2{font-size:17px}
#day-summary #day-duration-label{font-size:11px}
#day-summary #day-total{font-size:29px;letter-spacing:-.035em}
#day-summary .ranking-name,#day-summary label:has(#share-private-total){font-size:11px}
#day-summary .ranking-consent{font-size:10px}
#day-summary form button{font-size:11px}
#day-summary #day-share-status{font-size:11px}
.ranking-dialog h2{font-size:16px}
.ranking-dialog .ranking-guide,.ranking-dialog .ranking-state{font-size:10px}
.ranking-dialog .ranking-list li{font-size:11px}
.ranking-dialog .ranking-pages button,.ranking-dialog form button{font-size:10px}
/* Editable fields remain 16px to avoid mobile browser zoom. */
.finish-dialog input:not([type=checkbox]),.finish-dialog select,.finish-dialog textarea{font-size:16px}

/* Empty advertising placeholders stay subordinate to the tools. */
.ad-slot.ad-placeholder{background:transparent;border:1px dashed #ffffff16;border-radius:5px;color:#747b80;box-shadow:none}
.ad-slot.ad-placeholder::before{content:'광고 영역';display:grid;place-items:center;width:100%;height:100%;font-size:9px;font-weight:400;letter-spacing:.02em;opacity:.55}
[data-theme=light] .ad-slot.ad-placeholder{background:transparent;border-color:#23252218;color:#8c9088}

.ad-slot.ad-placeholder{border-color:#ffffff30}.ad-slot.ad-placeholder::before{content:none}[data-theme=light] .ad-slot.ad-placeholder{border-color:#23252230}

/* Mobile hierarchy: compact spacing without miniature text. */
.preferences .panel>label{grid-template-columns:64px minmax(0,1fr) 36px;letter-spacing:normal;word-break:keep-all;white-space:nowrap}
.preferences #settings{grid-template-columns:64px minmax(0,1fr) auto 36px}
.preferences .panel>label input,.preferences .panel>label select{white-space:normal}
.preferences .panel>label button,.preferences #settings button{font-size:12px}
.site-nav .ranking-ticker{border-color:#ffffff16;background:transparent;color:#aab1b8}
.ranking-caption{font-size:11px;color:#b5bac1}
.ranking-entry{font-size:11px;letter-spacing:normal;font-weight:400}
.ranking-entry b,.ranking-entry strong{color:#c4d8cd;font-weight:600}
.menu-clock{font-size:11px;color:#969fa7}
#clock-name{font-size:18px;font-weight:650;letter-spacing:-.025em}
.money-goals{font-size:13px;line-height:1.6}
.money-goals #completed{font-size:12px;color:#a4adb4}
.money-goals #goal strong{font-size:14px}
.money-summary{margin-top:12px}
.money-summary>p{font-size:12px;line-height:1.65}
.money-summary .money-basis{font-size:12px;color:#a4adb4}
#month-total{font-weight:650}
#sayings{font-size:13px;line-height:1.65;color:#b5bac1;letter-spacing:normal}
#finish-day{min-height:40px}
.finish-dialog{letter-spacing:normal}
.finish-dialog .finish-title,.finish-dialog h2{letter-spacing:-.025em}
.finish-dialog p,.finish-dialog label{font-size:13px;line-height:1.6}
.finish-dialog button{font-size:13px;letter-spacing:normal}
#welcome .welcome-purpose,#welcome .welcome-steps,#welcome .welcome-share{font-size:13px}
#welcome .welcome-note{font-size:12px}
#day-summary #day-duration-label,#day-summary .ranking-name,#day-summary label:has(#share-private-total){font-size:12px}
#day-summary .ranking-consent,#day-summary #day-share-status{font-size:12px;line-height:1.6}
#day-summary form button{font-size:12px}
.ranking-dialog .ranking-guide,.ranking-dialog .ranking-state{font-size:12px;line-height:1.55}
.ranking-dialog .ranking-list li{font-size:12px;letter-spacing:normal;line-height:1.6;padding:5px 0}
.ranking-dialog .ranking-list li>span:last-child{font-size:11px;white-space:nowrap}
.ranking-dialog .ranking-list strong{font-size:12px}
.ranking-dialog .ranking-pages button,.ranking-dialog form button{font-size:12px}
.ranking-dialog .ranking-pages button{position:relative}
@media(min-width:360px){.ranking-dialog .ranking-list li{font-size:13px}}
@media(max-width:600px){.site-nav .ranking-ticker{width:calc(100vw - 32px)}.ranking-entry{font-size:11px}.ranking-caption{font-size:10px}}
[data-theme=light] .site-nav .ranking-ticker{border-color:#23252220;color:#62685d}
[data-theme=light] .ranking-caption,[data-theme=light] #sayings,[data-theme=light] .money-summary .money-basis{color:#62685d}

#welcome .welcome-tools{margin-top:14px;padding:12px;border:1px solid #a6d8c030;border-radius:9px;background:#a6d8c009;text-align:left}
#welcome .welcome-pc-title{display:block;font-size:14px;line-height:1.5;color:#bce9d3;font-weight:750;letter-spacing:-.025em;word-break:keep-all}
#welcome .welcome-tools p{margin:7px 0 0;font-size:12px;line-height:1.65;color:#c1c6cd;word-break:keep-all}
#welcome .welcome-tools b{color:#f0eee8;font-weight:700}
[data-theme=light] #welcome .welcome-tools{border-color:#45846435;background:#45846409}
[data-theme=light] #welcome .welcome-pc-title{color:#285a43}
[data-theme=light] #welcome .welcome-tools p{color:#53574e}
[data-theme=light] #welcome .welcome-tools b{color:#232522}

/* PC guide stays highlighted, without an extra enclosing box. */
#welcome .welcome-tools{border:0;background:transparent;border-radius:0;padding:0;margin-top:10px}
#welcome .welcome-pc-title{line-height:1.45}
#welcome .welcome-pc-title br{display:none}
#welcome .welcome-tools p{margin-top:5px}
[data-theme=light] #welcome .welcome-tools{border:0;background:transparent}

#welcome [data-browser-guide]:has(.external-browser){margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid #ffffff20}
#welcome .external-browser{margin:0;text-align:left}
#welcome .external-browser>p:first-child{font-size:14px;font-weight:750;color:#bce9d3;margin:0}
#welcome .external-browser .external-reason{font-size:12px;margin:2px 0 7px}
#welcome .external-browser a{margin:6px 0;text-align:center}
#welcome .external-browser small{font-size:11px;line-height:1.45;color:#aeb5bb}
[data-theme=light] #welcome .external-browser>p:first-child{color:#285a43}
[data-theme=light] #welcome [data-browser-guide]:has(.external-browser){border-color:#23252220}

/* Keep each ranking record together around the center. */
.ranking-entry{justify-content:center;gap:10px}
.ranking-dialog .ranking-list{width:min(100%,310px);margin-inline:auto}
.ranking-dialog .ranking-list li{justify-content:center;gap:12px}
.ranking-dialog .ranking-person{flex:0 1 126px;min-width:0;text-align:left}
.ranking-dialog .ranking-list li>span:last-child{flex:0 1 150px;text-align:right}
@media(max-width:359px){.ranking-entry{gap:6px}.ranking-dialog .ranking-list li{gap:8px}}

/* Header items use the same rails as the ranking strip. */
@media(max-width:600px){
 .site-nav{width:calc(100% - 32px);margin-inline:auto;padding-inline:0}
 .site-nav nav{width:100%;justify-content:space-between;gap:4px}
 .site-nav:has(+.tool-tabs) nav{gap:4px}
 .site-nav .ranking-ticker{width:100%}
 .tool-tabs{width:calc(100% - 32px);justify-content:space-between;gap:4px}
 .tool-tabs a{flex:1;text-align:center;padding-inline:4px}
}

/* Give navigation text more weight than utility icons. */
.nav-actions{gap:0}
.nav-actions .preferences>summary,.nav-actions .sharing>summary,.site-nav:has(+.tool-tabs) .nav-actions>details>summary{width:28px;height:34px;font-size:16px}
.nav-actions .sharing>summary svg{width:16px;height:16px}
.site-nav nav>a,.site-nav:has(+.tool-tabs) nav>a{font-size:14px;font-weight:600}
@media(max-width:600px){
 .site-nav nav,.site-nav:has(+.tool-tabs) nav{gap:3px}
 .site-nav nav>a,.site-nav:has(+.tool-tabs) nav>a{font-size:14px}
 .nav-actions .preferences>summary,.nav-actions .sharing>summary,.site-nav:has(+.tool-tabs) .nav-actions>details>summary{width:26px;height:34px}
 .tool-tabs a{font-size:14px}
}

/* Compact mobile menu and ranking share the same centered width. */
@media(max-width:600px){
 .site-nav{width:min(calc(100% - 32px),360px)}
 .site-nav nav,.site-nav .ranking-ticker{width:100%}
 .tool-tabs{width:min(calc(100% - 32px),360px)}
 .tool-tabs a{flex:1}
}

/* Navigation remains subordinate to the brand and page heading. */
.site-nav nav>a,.site-nav:has(+.tool-tabs) nav>a{font-size:13px;font-weight:500}
.site-nav nav>a[aria-current]{font-size:13px;font-weight:650}
.tool-tabs a{font-size:13px;font-weight:500}
.tool-tabs a[aria-current]{font-weight:650}

/* Highlight the ranking, while keeping navigation quiet. */
.site-nav .ranking-ticker{min-height:36px;padding:5px 8px;border-color:#a6d8c04a;background:#a6d8c010;gap:7px}
.ranking-caption{font-size:11px;font-weight:650;color:#a6d8c0;letter-spacing:normal}
.ranking-entry{font-size:12px;color:#e2e8e4;gap:8px;letter-spacing:normal}
.ranking-entry>.ranking-person{font-size:13px;font-weight:750;color:#c5efda}
.ranking-entry strong{font-size:12px;font-weight:700;color:#c5efda}
@media(max-width:359px){.ranking-entry{font-size:11px;gap:5px}.ranking-entry>.ranking-person{font-size:12px}.ranking-entry strong{font-size:11px}.ranking-caption{font-size:10px}}
[data-theme=light] .site-nav .ranking-ticker{background:#4584640c;border-color:#45846450}
[data-theme=light] .ranking-caption,[data-theme=light] .ranking-entry>.ranking-person,[data-theme=light] .ranking-entry strong{color:#285a43}
[data-theme=light] .ranking-entry{color:#53574e}

/* Slim ranking strip, keeping its readable type. */
.site-nav .ranking-ticker{min-height:27px;padding:2px 5px;gap:5px;border-radius:4px;line-height:1.35}
.ranking-entry{gap:6px}
.ranking-entry strong{margin-left:3px}
@media(max-width:359px){.ranking-entry{gap:4px}}

/* Four consistent top-level destinations, with clock-specific subtabs. */
.site-nav nav{gap:10px;align-items:center}
.site-nav nav>a{white-space:nowrap}
.tool-tabs{display:flex}
.tool-tabs-spacer{height:36px}
@media(max-width:600px){
 .site-nav nav,.site-nav:has(+.tool-tabs) nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:3px}
 .site-nav nav>a,.site-nav:has(+.tool-tabs) nav>a{text-align:center;font-size:13px;padding:3px 0}
 .nav-actions{justify-self:end}
 .tool-tabs{gap:4px;justify-content:center}
}
@media(min-width:760px){.tool-tabs{display:flex;margin-top:8px;margin-bottom:-8px;height:36px}.tool-tabs-spacer{height:36px}}

@media(max-width:600px){
 .site-nav nav,.site-nav:has(+.tool-tabs) nav{grid-template-columns:1fr .75fr 1.4fr .7fr auto;gap:2px}
 .site-nav nav>a,.site-nav:has(+.tool-tabs) nav>a{font-size:12px}
}

/* Compact clock subtabs match the slim ranking strip. */
.tool-tabs{height:27px;min-height:27px;margin:6px auto -4px;gap:4px;align-items:center}
.tool-tabs a{height:27px;min-height:27px;padding:2px 7px;font-size:12px;line-height:1.35;border-radius:4px}
.tool-tabs-spacer{height:29px}
@media(max-width:600px){.tool-tabs a{font-size:12px;padding:2px 4px}}
@media(min-width:760px){.tool-tabs{height:27px;min-height:27px;margin:6px auto -4px}.tool-tabs-spacer{height:29px}}

/* Trim preset button padding; preserve existing row/column gaps. */
.timer-layout .preset-row button{min-height:30px;height:30px;padding:2px 1px;line-height:1.3}

/* Compact presets in both dimensions; keep the 4px gaps. */
.timer-layout .preset-row{justify-content:center}
.timer-layout .preset-row button{flex:0 1 auto;width:auto;min-width:0;padding:2px 7px}
.timer-layout .preset-row[aria-label="시간"] button{padding-inline:9px}
.tool.timer-layout form#controls{margin:8px 0}
.tool.timer-layout #controls{gap:5px}
.timer-layout .timer-main-actions{gap:8px}
.quick-watch.timer-layout #controls .timer-main-actions button{min-height:34px;height:34px;padding:3px 10px;line-height:1.3;font-size:13px}
@media(max-width:359px){.timer-layout .preset-row button{padding-inline:5px}.timer-layout .preset-row[aria-label="시간"] button{padding-inline:7px}}

/* Presets fill the timer width evenly, with compact interiors. */
.timer-layout .preset-row{justify-content:space-between}
.timer-layout .preset-row button,.timer-layout .preset-row[aria-label="시간"] button{flex:1 1 0;min-width:0;width:auto;padding:2px 1px}

/* Balance setting labels and values; remove surplus vertical padding. */
.nav-actions .preferences .panel{padding:7px 10px;gap:4px}
.preferences .panel>label,.preferences #settings label{font-size:13px;line-height:1.4}
.preferences .panel>label input,.preferences .panel>label select,.preferences #settings input#salary{height:30px;padding:2px 6px;font-size:14px;line-height:1.35}
.preferences .panel>label button,.preferences #settings button{height:30px;min-height:30px;font-size:12px}
.preferences .settings-close{height:30px;min-height:30px;margin-top:1px;font-size:12px}
.preferences .income-category button{min-height:26px;height:26px;padding:2px 8px}
.preferences .modes{line-height:1.4;margin:0}

/* Wider settings rows accommodate the full daily-sales label. */
.nav-actions .preferences .panel{width:min(320px,calc(100vw - 20px))}
.preferences .panel>label{grid-template-columns:80px minmax(0,1fr) 36px}
.preferences #settings{grid-template-columns:80px minmax(0,1fr) auto 36px}
.preferences #settings label{margin:0;white-space:nowrap}

.preferences .panel>label{grid-template-columns:90px minmax(0,1fr) 36px}.preferences #settings{grid-template-columns:90px minmax(0,1fr) auto 36px}

.preferences .panel>label.settings-title-row{grid-template-columns:minmax(0,1fr) 36px}.preferences .settings-title-row #custom-name{width:100%;min-width:0}

/* Income selection: plain heading, one radio row and one amount row. */
.preferences .amount-settings-title{margin:5px 0 0;font-size:12px;line-height:1.4;font-weight:650;color:inherit;text-align:left}
.preferences .modes{display:flex;justify-content:flex-start;flex-wrap:nowrap;gap:10px;margin:0;padding:0;line-height:1.5;font-size:12px}
.preferences .modes label{white-space:nowrap;display:flex;align-items:center;gap:3px}
.preferences .modes input{margin:0;width:13px;height:13px;flex:none}

/* Menu and ranking share one fluid width, without breakpoint jumps. */
.site-nav,.site-nav:has(+.tool-tabs){width:min(calc(100% - 32px),600px);display:flex;flex-direction:column;gap:3px;margin-inline:auto;padding-inline:0}
.site-nav nav,.site-nav:has(+.tool-tabs) nav{display:grid;grid-template-columns:1fr .8fr 1.45fr .8fr auto;width:100%;gap:clamp(2px,.7vw,8px);align-items:center;justify-content:normal}
.site-nav nav>a,.site-nav:has(+.tool-tabs) nav>a,.site-nav nav>a[aria-current]{font-size:clamp(12px,calc(10px + .5vw),14px);text-align:center;padding:3px 0;white-space:nowrap}
.site-nav .ranking-ticker{width:100%;max-width:none;flex-basis:auto;margin-inline:0}
.tool-tabs{width:min(calc(100% - 32px),600px)}

#day-summary .ranking-consent{font-size:11px;line-height:1.6;margin:10px 0 0;white-space:nowrap;letter-spacing:-.025em}
#day-summary label:has(#share-private-total){font-size:11px;line-height:1.6;margin:4px 0 0;gap:6px;white-space:nowrap;letter-spacing:-.025em}

#day-summary .finish-ranking-tease{margin:9px 0 0;font-size:12px;line-height:1.5;word-break:keep-all}
#day-summary .finish-ranking-tease>span{display:block;color:#c5efda;font-weight:650}
#day-summary .finish-ranking-tease small{display:block;margin-top:3px;color:#aeb5bb;font-size:11px}
[data-theme=light] #day-summary .finish-ranking-tease>span{color:#285a43}

#day-summary .ranking-name-help{font-size:11px;color:#aeb5bb;text-align:left;line-height:1.5;word-break:keep-all;margin:4px 0 0}

.duplicate-name-dialog{width:min(340px,calc(100% - 24px));padding:18px;text-align:left}
.duplicate-name-dialog h2{font-size:16px;line-height:1.4}
.duplicate-name-dialog p{margin-top:8px;font-size:12px;line-height:1.55;word-break:keep-all}
.duplicate-name-dialog form{margin-top:12px;gap:8px}
.duplicate-name-dialog button{min-height:34px;font-size:12px;padding:4px 8px}
.duplicate-name-dialog .duplicate-share-status:empty{display:none}

.money-goals .goal-ranking-line{display:block;margin:4px auto 0;padding:0;border:0;background:transparent;color:#aeb5bb;font-size:12px;line-height:1.6;font-weight:400;letter-spacing:normal;word-break:keep-all}
.money-goals .goal-ranking-line:hover{color:#c5efda}
[data-theme=light] .money-goals .goal-ranking-line{color:#62685d}

#day-summary .round-reset-notice{font-size:11px;line-height:1.5;margin:8px 0 0;color:#c5efda;word-break:keep-all;text-align:left}
.round-result{margin:5px auto 0;font-size:12px;line-height:1.5;color:#c5efda;word-break:keep-all;text-align:center}
.round-result[hidden]{display:none}
[data-theme=light] #day-summary .round-reset-notice,[data-theme=light] .round-result{color:#285a43}

.income-start-dialog{width:min(340px,calc(100% - 24px));padding:14px;text-align:left}
.income-start-dialog h2{font-size:16px;line-height:1.4;margin:0 0 10px}
.income-start-dialog form{display:block;margin:0}
.income-start-dialog fieldset{display:flex;justify-content:space-between;gap:6px;margin:0 0 8px;padding:0;border:0}
.income-start-dialog fieldset label{margin:0;display:flex;align-items:center;gap:3px;font-size:12px;white-space:nowrap}
.income-start-dialog input[type=radio]{margin:0;accent-color:#a6d8c0}
.income-start-dialog .income-start-amount{display:grid;grid-template-columns:85px minmax(0,1fr) auto;gap:5px;margin:0;font-size:12px;align-items:center}
#income-start-value{width:100%;min-width:0;height:34px;padding:4px 6px;font-size:16px}
.income-start-dialog .income-start-actions{display:grid;grid-template-columns:64px 1fr;gap:8px;margin-top:10px}
.income-start-dialog button{min-height:34px;height:34px;padding:4px 8px;font-size:12px}
#income-start-status{font-size:11px;line-height:1.4;margin:5px 0 0;word-break:keep-all}
#income-start-status:empty{display:none}

/* A single quiet line links the amount, elapsed round time and today's rank. */
.money-goals{margin:8px 0 10px;min-height:20px}
.money-goals .goal-ranking-line{display:inline-block;max-width:100%;margin:0;padding:2px 0;min-height:24px;font-size:12px;line-height:20px;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.money-goals .goal-ranking-line:focus-visible{outline:2px solid #a6d8c0;outline-offset:3px;border-radius:4px}

/* Keep in-app browser handoff guidance together and compact. */
.external-browser{margin:4px 12px;font-size:12px;line-height:1.45;text-wrap:pretty}
.external-browser>p:first-child,#welcome .external-browser>p:first-child{margin:0;font-size:13px;font-weight:500;line-height:1.45;word-break:keep-all;color:inherit}
.external-browser a,#welcome .external-browser a{display:grid;place-items:center;min-height:36px;padding:5px 10px;margin:5px 0 3px;border-radius:7px;background:#a6d8c0;color:#152b22;font-size:14px;line-height:1.4;font-weight:700;text-decoration:none}
.external-browser small,#welcome .external-browser small{margin:3px 0 0;font-size:11px;line-height:1.4}
#welcome [data-browser-guide]:has(.external-browser){margin:0 0 8px;padding-bottom:8px}
.external-browser button{padding:3px 8px;margin-top:4px;font-size:12px;line-height:1.4}

.external-browser button,#welcome .external-browser button{min-height:28px;width:auto;padding:3px 8px;margin:4px 0 0;font-size:12px;line-height:1.4}

/* Emphasize the time and rank without competing with the amount board. */
.goal-ranking-line .progress-time{font-size:inherit;font-weight:650;color:#f0eee8}
.goal-ranking-line .progress-divider{color:#747e86}
.goal-ranking-line .progress-rank{font-weight:650;color:#a6d8c0}
[data-theme=light] .goal-ranking-line .progress-time{color:#232522}
[data-theme=light] .goal-ranking-line .progress-rank{color:#285a43}
/* The same handoff guide has compact, intentional spacing inside and outside welcome. */
.external-browser,#welcome .external-browser{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.external-browser>p:first-child,#welcome .external-browser>p:first-child{margin:0;font-size:12px;line-height:1.45;font-weight:400}
.external-browser p strong{font-weight:700;color:#bce9d3}
[data-theme=light] .external-browser p strong{color:#285a43}
.external-browser a,#welcome .external-browser a{min-height:32px;padding:4px 12px;margin:0;font-size:13px;line-height:1.4}
.external-browser small,#welcome .external-browser small{margin:0;font-size:11px;line-height:1.4}
.external-browser button,#welcome .external-browser button{margin:0;min-height:28px}
body>.external-browser{width:min(calc(100% - 32px),600px);margin:5px auto 4px}
body>.external-browser a{align-self:center;max-width:100%;width:max-content}
#welcome .external-browser a{align-self:stretch}
#welcome [data-browser-guide]:has(.external-browser){margin:0 0 6px;padding-bottom:6px}

/* Optional analytics choices stay separate from tool controls and welcome dialogs. */
.analytics-consent{position:fixed;z-index:30;bottom:8px;left:50%;transform:translateX(-50%);width:min(610px,calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid #62666c;border-radius:8px;background:#25282c;color:#f0eee8;box-shadow:0 3px 16px #0003}
.analytics-consent[hidden],body:has(dialog[open]) .analytics-consent{display:none!important}
.analytics-consent p{font-size:12px;line-height:1.4;margin:0}
.analytics-consent-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.analytics-consent button{min-height:30px;padding:3px 10px;font-size:12px;line-height:1.4}
.analytics-consent button:first-child{background:#a6d8c0;color:#152b22;border-color:#a6d8c0}
.analytics-consent a{font-size:11px;color:inherit;white-space:nowrap}
.site-footer .analytics-settings{font:inherit;font-size:11px;line-height:1.4;padding:0;border:0;background:transparent;color:inherit;text-decoration:underline;cursor:pointer}
body.has-analytics-consent:not(:has(dialog[open])){padding-bottom:var(--analytics-consent-height,82px)}
[data-theme=light] .analytics-consent{background:#fffaf1;color:#232522;border-color:#bac6b9}
@media(max-width:600px){.analytics-consent{flex-wrap:wrap;justify-content:center;gap:5px;text-align:center}.analytics-consent-actions{justify-content:center}}