@font-face{font-family:'Google Sans Flex';src:url('assets/google-sans-flex.ttf') format('truetype');font-weight:1 1000;font-display:swap}
:root{font-family:'Google Sans Flex',system-ui,sans-serif;font-variation-settings:'ROND' 100;color:#727272;background:#f2f2f2;color-scheme:light;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}body{margin:0;min-width:240px}button,input{font:inherit;font-variation-settings:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent;color:inherit}button:focus-visible,input:focus-visible{outline:2px solid #9a9a9a;outline-offset:4px}svg{display:block}body:has(.clock-drawer){overflow:hidden}
.canvas{--clock-size:min(420px,calc(100vw - 48px));height:100svh;overflow-x:auto;overflow-y:hidden;scroll-snap-type:none;scrollbar-width:none;scrollbar-color:#d4d4d4 transparent;overscroll-behavior:contain;touch-action:pinch-zoom;scroll-behavior:auto}.clock-track{display:flex;align-items:center;justify-content:flex-start;gap:61.6px;width:max-content;min-width:100%;min-height:100%;padding:72px max(24px,calc((100vw - var(--clock-size))/2)) 140px}.world-clock{width:var(--clock-size);flex:none;margin:0;scroll-snap-align:center}
.clock-face{width:100%;height:auto;aspect-ratio:1;--base:#fff;--ink:#1f1f1f;--minor:#b6b6b6;--major:#272727;--numbers:#727272}.clock-face.night{--base:#292929;--ink:#f2f2f2;--minor:#626262;--major:#c6c6c6;--numbers:#bfbfbf}.dial{fill:var(--base)}.marker{stroke:var(--minor);stroke-width:2;stroke-linecap:round}.marker.major{stroke:var(--major);stroke-width:4.5}.numerals{fill:var(--numbers);font-size:32px;font-weight:650}.hour,.minute,.hub,.mini-pivot{fill:var(--ink)}.second,.pivot{fill:#edc949}.pivot-dot{fill:var(--base)}
.city{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:0;font-size:48px;line-height:58px;font-weight:700;white-space:normal;color:#272727}
.add-position{position:fixed;bottom:max(32px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:5}.add-clock{height:80px;border:0;background:#fff;color:#272727;box-shadow:0 4px 24px #00000007;overflow:hidden;display:grid;place-items:center;padding:0}.add-content{display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;font-size:19px;font-weight:600}.add-content svg{flex:none}
.drawer-backdrop{position:fixed;inset:0;background:#0000001c;backdrop-filter:blur(5px);z-index:10}.clock-drawer{position:fixed;z-index:11;left:50%;bottom:24px;transform:translateX(-50%);width:min(760px,calc(100vw - 40px));height:min(680px,calc(100dvh - 48px));background:#fff;color:#727272;box-shadow:0 20px 100px #00000012;overflow:hidden}.drawer-content{display:flex;flex-direction:column;height:100%;min-height:0;padding:16px;gap:0}
.drawer-heading{display:flex;align-items:center;justify-content:space-between;flex:none;margin-bottom:16px}.drawer-heading h2{font-size:15px;font-weight:600;margin:0;letter-spacing:.1px}.drawer-heading h2>span{margin-left:5px;font-size:12px;color:#a7a7a7}.close-drawer,.remove-clock{display:grid;place-items:center;border:0;background:transparent;border-radius:50%;padding:6px}.close-drawer:hover{background:#f2f2f2}.selected-clocks{display:flex;gap:10px;overflow-x:auto;flex:none;scrollbar-width:none;scrollbar-color:#ddd transparent;padding:0 0 8px;scroll-snap-type:x proximity}.selected-card{position:relative;flex:0 0 252px;scroll-snap-align:start;border-radius:20px;background:#f5f5f5;padding:10px 26px 10px 10px}.selected-clock{display:flex;align-items:center;gap:12px;border:0;padding:0;background:transparent;text-align:left;width:100%}.selected-clock .clock-face{width:56px;flex:none}.selected-clock .marker{stroke-width:3}.selected-clock .marker.major{stroke-width:5}.selected-clock .numerals{font-size:34px}.selected-details{display:flex;flex-direction:column;gap:5px;min-width:0}.selected-city{font-size:15px;font-weight:600;line-height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.selected-country{font-weight:400}.selected-relation{font-size:12px;white-space:nowrap;color:#919191}.selected-time{font-size:12px;font-weight:600;display:flex;align-items:center;gap:3px}.selected-time>span{font-size:10px;font-weight:400}.selected-time .default-mark{display:inline-flex;align-items:center;gap:3px;margin-left:5px;color:#a3a3a3;font-size:9px}.remove-clock{position:absolute;right:6px;top:6px;color:#a5a5a5;padding:4px}.remove-clock:hover{background:#e8e8e8;color:#727272}
.results-heading{display:flex;justify-content:space-between;font-size:12px;color:#9a9a9a;flex:none;margin:14px 6px 0}.results-heading span:last-child{font-size:11px}.city-results{flex:1;min-height:80px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;perspective:850px}.city-results::-webkit-scrollbar{display:none}.city-options{padding:8px 0;transform-style:preserve-3d}.wheel-row{height:64px;transform-origin:center center;will-change:transform;transform-style:preserve-3d}.city-option{width:100%;height:64px;display:flex;align-items:center;gap:16px;padding:8px 12px;border:0;background:transparent;border-radius:15px;text-align:left;color:#727272}.city-option:hover{background:#f6f6f6}.city-option:focus-visible{outline-offset:-3px;background:#f6f6f6}.option-place{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}.option-place>span:first-child{font-size:20px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.option-country{font-weight:400}.option-zone{font-size:11px;color:#ababab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-time{font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap;display:flex;align-items:baseline;gap:4px}.option-time span{font-size:10px;color:#9a9a9a}.option-action{display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid #e8e8e8;border-radius:50%;color:#999}.option-action.is-selected{border-color:transparent;background:#f2f2f2;color:#727272}
.search-form{display:flex;align-items:center;gap:12px;background:#f4f4f4;border-radius:999px;flex:none;padding:0 20px;min-height:56px;margin-top:8px}.search-form>svg{flex:none}.search-form input{border:0;background:transparent;outline:0!important;min-width:0;width:100%;font-size:18px;color:#727272;padding:16px 0}.search-form input::placeholder{color:#a8a8a8}.search-form:focus-within{box-shadow:0 0 0 2px #dedede}.search-form input::-webkit-search-cancel-button{display:none}.search-form button{border:0;background:transparent;padding:5px;display:grid;place-items:center}.no-results{min-height:160px;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;font-size:18px}.no-results button{font-size:14px;border:0;background:#f4f4f4;padding:10px 16px;border-radius:20px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

@media(max-width:600px){.clock-track{padding-block:48px 132px}.clock-drawer{width:calc(100vw - 20px);bottom:10px;height:min(690px,calc(100dvh - 20px))}.drawer-content{padding:16px}.selected-card{flex-basis:240px}.option-place>span:first-child{font-size:18px}.option-time{font-size:15px}.city-option{gap:8px;padding-inline:6px}.search-form{min-height:56px;padding-inline:14px}.search-form input{font-size:17px}.add-position{bottom:max(24px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.wheel-row{will-change:auto}}

/* Keep offscreen clock captions inside the horizontal canvas's scroll area. */
.world-clock{position:relative}
/* The wheel rotates the visuals; its full-size, flat button stays easy to tap. */
.city-option{transform-style:preserve-3d}.option-visual{display:flex;align-items:center;gap:16px;width:100%;height:100%;pointer-events:none;transform-style:preserve-3d;will-change:transform}
@media(max-width:600px){.option-visual{gap:8px}}
@media(prefers-reduced-motion:reduce){.option-visual{will-change:auto}}
.clock-drawer{bottom:var(--drawer-bottom,24px);height:min(680px,var(--drawer-maxheight,calc(100dvh - 48px)))}.city-results{min-height:0}
.clock-drawer[data-compact=true] .drawer-content{padding:12px 16px}.clock-drawer[data-compact=true] .drawer-heading{margin-bottom:8px}.clock-drawer[data-compact=true] .selected-card{padding:8px 26px 8px 8px}.clock-drawer[data-compact=true] .selected-clock .clock-face{width:48px}.clock-drawer[data-compact=true] .selected-details{gap:3px}.clock-drawer[data-compact=true] .selected-clocks{padding-bottom:4px}.clock-drawer[data-compact=true] .results-heading{margin-top:6px}.clock-drawer[data-compact=true] .search-form{min-height:48px;margin-top:4px}.clock-drawer[data-compact=true] .search-form input{padding:10px 0}
@media(max-width:600px){.clock-drawer{bottom:var(--drawer-bottom,10px);height:min(690px,var(--drawer-maxheight,calc(100dvh - 20px)))}}
/* Retain the original white pivot dot and bold city typography in both themes. */
.pivot-dot{fill:#fff}.city{font-weight:700}
.clock-drawer .selected-relation,.clock-drawer .results-heading,.clock-drawer .option-zone,.clock-drawer .option-time span,.clock-drawer .default-mark{color:#727272}

/* Center the first clock; subsequent clocks extend to the right at a 61.6px gap. */
.clock-visual{transform-style:preserve-3d;will-change:transform}
.drawer-heading{position:absolute;top:12px;right:12px;margin:0;z-index:2}
.selected-clocks{margin-right:36px;margin-bottom:0;min-height:0;gap:8px}
.selected-clocks:empty{display:none}
.city-results{margin-top:0}
.selected-city{white-space:normal}
@media(prefers-reduced-motion:reduce){.clock-visual{will-change:auto}}

/* Hide scrollbar chrome while retaining every scrolling interaction. */
*{scrollbar-width:none}*::-webkit-scrollbar{display:none;width:0;height:0}
.clock-caption{margin-top:40px;text-align:center}.clock-offset{display:block;margin-top:6px;font-size:20px;line-height:28px;font-weight:550;letter-spacing:.04em;color:#909090;white-space:nowrap}

.add-content svg path{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}

/* Transparent, masked backdrop filters soften only the overflowing list edges. */
.city-results-frame{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate}
.city-results-frame .city-results{height:100%;min-height:0;mask-image:none;-webkit-mask-image:none}
.selected-clocks:empty~.city-results-frame{margin-top:32px}
.progressive-blur{position:absolute;left:0;right:0;height:15%;max-height:88px;z-index:2;pointer-events:none;opacity:0;transition:opacity 160ms ease;background:transparent}
.progressive-blur[data-active=true]{opacity:1}
.progressive-blur--top{top:0;--direction:to bottom}.progressive-blur--bottom{bottom:0;--direction:to top}
.progressive-blur>span{position:absolute;inset:0;background:transparent;backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur));mask-image:linear-gradient(var(--direction),#000 var(--start),transparent var(--end));-webkit-mask-image:linear-gradient(var(--direction),#000 var(--start),transparent var(--end))}
@media(prefers-reduced-motion:reduce){.progressive-blur{transition:none}}

.canvas{user-select:none;-webkit-user-select:none}.world-clock{cursor:grab;outline:none}.world-clock:focus-visible{outline:2px solid #909090;outline-offset:12px;border-radius:40px}.world-clock[data-dragging=true]{z-index:3}.canvas[data-pointer-dragging=true],.canvas[data-pointer-dragging=true] *{cursor:grabbing}.clock-drag{touch-action:pinch-zoom}
.remove-edge{position:fixed;inset:0 0 auto;height:80px;z-index:6;display:flex;justify-content:center;align-items:flex-start;padding-top:22px;pointer-events:none;color:#272727;background:linear-gradient(#27272712,transparent)}
/* With no selected-card strip, reserve only a small corner for Close. */
.clock-drawer .city-results-frame{margin-top:24px}

/* Search floats below the white list surface; there is no filled footer beneath it. */
.clock-drawer{background:transparent;box-shadow:none;overflow:visible}
.clock-drawer .drawer-content{padding:0;gap:8px}
.drawer-list-surface{display:flex;flex-direction:column;flex:1;min-height:0;padding:16px;background:#fff;border-radius:32px;overflow:hidden;box-shadow:0 20px 100px #00000012}
.clock-drawer .city-results-frame{margin-top:0}
.clock-drawer .search-form{margin:0;border-radius:999px;box-shadow:0 4px 24px #00000007}
.clock-drawer[data-compact=true] .drawer-content{padding:0}
.clock-drawer[data-compact=true] .drawer-list-surface{padding:12px 16px}

/* List reaches the panel edges; spacing belongs to each row. */
.clock-drawer .drawer-list-surface,.clock-drawer[data-compact=true] .drawer-list-surface{padding:0}
.city-options{padding:0}
.city-option{position:relative;padding:16px 28px;border-radius:0;color:#272727;isolation:isolate}
.city-option:hover,.city-option:focus-visible{background:transparent}
.city-option:disabled{color:#bfbfbf;cursor:default}
.city-row-hover{position:absolute;inset:6px 12px;background:#f2f2f2;border-radius:999px;z-index:-1;pointer-events:none}
.option-visual{position:relative}
.clock-drawer .search-form{background:#fff}
.clock-drawer .search-form input{color:#272727}
.clock-drawer .search-form>svg{color:#909090}
@media(max-width:600px){.city-option{padding-inline:24px}}
.city-option:focus-visible{outline:2px solid #909090;outline-offset:-6px;border-radius:999px}

/* Equal insets, quiet toggles, and continuous panel corners. */
*:focus,*:focus-visible{outline:none!important}
.clock-drawer .search-form:focus-within{box-shadow:0 4px 24px #00000007}
.clock-drawer{width:min(480px,calc(100vw - 40px))}
.clock-drawer .drawer-content{gap:12px}
.clock-drawer .drawer-list-surface,.clock-drawer[data-compact=true] .drawer-list-surface{padding:12px;border-radius:36px;corner-shape:superellipse(1.5)}
.city-option{padding:16px 28px;color:#272727;border-radius:999px}
.city-option[data-selected=true]{color:#29a329}
.city-row-hover{inset:0;opacity:0;transition:opacity 100ms ease}
.city-option:hover .city-row-hover,.city-option:focus-visible .city-row-hover{opacity:1}
.clock-drawer .search-form,.clock-drawer[data-compact=true] .search-form{min-height:72px;padding-inline:24px;border-radius:999px;corner-shape:superellipse(1.2)}
.clock-drawer .search-form input,.clock-drawer[data-compact=true] .search-form input{padding:24px 0;font-size:20px;line-height:24px;font-weight:650}
.clock-drawer .search-form input::placeholder{font-weight:650}
.add-clock.context-remove{color:#909090}
@media(max-width:600px){.clock-drawer{width:min(480px,calc(100vw - 20px))}}

/* Blur is now applied to individual row contents, with no overlapping layers. */
.clock-drawer .drawer-list-surface,.clock-drawer[data-compact=true] .drawer-list-surface{padding:0 12px;border-radius:56px}
.clock-drawer .search-form,.clock-drawer[data-compact=true] .search-form{border-radius:999px;corner-shape:superellipse(1.05)}
.city-results{touch-action:pinch-zoom;user-select:none;-webkit-user-select:none}
.city-row-hover{transition:opacity 220ms ease-in-out}
.clock-face-wrap{position:relative}
.clock-context-position{position:absolute;left:calc(50% - 40px);top:calc(50% - 40px);width:80px;height:80px;z-index:6}
.clock-context-position .context-remove{width:80px;height:80px;border-radius:40px}

/* The contextual control rides the upper rim, clear of the hands. */
.clock-context-position{top:-40px}
.clock-drag{transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform,opacity,filter}

/* Let scrolling content reach the panel clip; spacing belongs to each row. */
.clock-drawer .drawer-list-surface,.clock-drawer[data-compact=true] .drawer-list-surface{padding:0}

/* Inset the content, while the scroll/edge-effect viewport stays flush. */
.city-options{padding:12px}

/* Empty search keeps the illustration centered inside the flush panel viewport. */
.city-results[data-empty=true] .city-options{height:100%;display:grid;place-items:center}
.no-results{min-height:0;gap:20px;color:#909090;font-size:16px;line-height:24px;font-weight:700;text-align:center}
.empty-clock{width:112px;height:112px;overflow:visible;filter:drop-shadow(0 3px 12px #00000012)}


/* Phone proportions leave breathing room around the clock and floating picker. */
@media (max-width:600px), (max-width:900px) and (max-height:500px){
  .canvas{--clock-size:min(280px,72vw,max(96px,calc((100svh - 240px)/1.1)))}
  .clock-track{padding-block:40px 128px}
  .clock-caption{margin-top:24px}
  .city{font-size:30px;line-height:36px}
  .clock-offset{font-size:14px;line-height:20px;letter-spacing:.03em}
  .clock-drawer{width:min(340px,calc(100vw - 48px));bottom:var(--drawer-bottom,24px);height:min(500px,68svh,var(--drawer-maxheight,calc(100dvh - 48px)))}
  .clock-drawer .drawer-content{gap:10px}
  .clock-drawer .drawer-list-surface,.clock-drawer[data-compact=true] .drawer-list-surface{border-radius:40px}
  .clock-drawer .city-option{padding-inline:18px}
  .clock-drawer .option-place>span:first-child{font-size:16px;line-height:22px}
  .clock-drawer .search-form,.clock-drawer[data-compact=true] .search-form{min-height:56px;padding-inline:18px}
  .clock-drawer .search-form input,.clock-drawer[data-compact=true] .search-form input{padding-block:16px;font-size:16px;line-height:24px}
  .clock-drawer .search-form>svg{width:20px;height:20px}
}
@media (max-width:900px) and (max-height:500px){
  .canvas{--clock-size:min(240px,72vw,max(96px,calc((100svh - 230px)/1.1)))}
  .clock-track{padding-block:20px 140px}
  .clock-caption{margin-top:16px}
  .city{font-size:26px;line-height:32px}
  .clock-offset{font-size:13px;line-height:18px}
}