:root{--bg: oklch(98% .01 250);--surface: oklch(100% 0 0);--surface-2: oklch(96% .005 250);--border: oklch(90% .008 250);--border-strong: oklch(82% .01 250);--text: oklch(22% .02 260);--text-muted: oklch(50% .015 260);--text-faint: oklch(65% .012 260);--accent: oklch(58% .18 270);--accent-soft: oklch(92% .05 270);--work: oklch(75% .16 145);--work-edge: oklch(60% .18 145);--awake: oklch(85% .13 90);--awake-edge: oklch(70% .15 90);--asleep: oklch(35% .04 260);--asleep-fg: oklch(70% .03 260);--danger: oklch(65% .21 25);--shadow: 0 1px 2px rgba(20,20,40,.04), 0 8px 24px rgba(20,20,40,.06);--radius: 14px;--radius-sm: 8px;--bar-h: 56px;--gap: 14px}:root.dark{--bg: oklch(15% .015 260);--surface: oklch(20% .015 260);--surface-2: oklch(24% .018 260);--border: oklch(28% .018 260);--border-strong: oklch(36% .02 260);--text: oklch(96% .01 260);--text-muted: oklch(70% .012 260);--text-faint: oklch(52% .012 260);--accent: oklch(72% .18 270);--accent-soft: oklch(28% .06 270);--work: oklch(58% .18 145);--work-edge: oklch(75% .2 145);--awake: oklch(55% .14 90);--awake-edge: oklch(78% .18 90);--asleep: oklch(28% .025 260);--asleep-fg: oklch(55% .02 260);--shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;font-feature-settings:"cv11","ss01","ss03";-webkit-font-smoothing:antialiased;line-height:1.5}body{min-height:100vh}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;color:inherit;cursor:pointer}.app{max-width:1080px;margin:0 auto;padding:28px 20px 80px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:12px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--text)}.brand a{color:inherit}.brand a:hover{text-decoration:none}.brand-mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent) 0%,oklch(70% .18 320) 100%);display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800}.topbar-actions{display:flex;gap:8px;align-items:center}.icon-btn{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;transition:background .12s ease,color .12s ease,border-color .12s ease}.icon-btn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}.icon-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.icon-btn.primary:hover{filter:brightness(1.08);color:#fff}.hero{margin:28px 0 22px}.hero h1{font-size:clamp(28px,4vw,40px);line-height:1.1;letter-spacing:-.02em;font-weight:800;margin:0 0 10px}.hero h1 .grad{background:linear-gradient(135deg,var(--accent) 0%,oklch(70% .18 320) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{color:var(--text-muted);font-size:16px;margin:0;max-width:60ch}.picker{position:relative;margin:18px 0 24px}.picker input{width:100%;padding:14px 16px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);font-size:16px;color:var(--text);outline:none;transition:border-color .12s ease,box-shadow .12s ease}.picker input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.suggestions{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);max-height:320px;overflow-y:auto;z-index:30;padding:6px}.suggestions[hidden]{display:none}.suggestion{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;background:none;border:0;width:100%;text-align:left;color:var(--text)}.suggestion:hover,.suggestion.active{background:var(--surface-2)}.suggestion .flag{font-size:20px}.suggestion .meta{display:flex;flex-direction:column;gap:1px}.suggestion .city{font-weight:600;font-size:14px}.suggestion .country{font-size:12px;color:var(--text-muted)}.suggestion .tz{margin-left:auto;color:var(--text-faint);font-size:12px;font-variant-numeric:tabular-nums}.empty{background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--radius);padding:40px 24px;text-align:center;color:var(--text-muted)}.empty h2{margin:0 0 8px;font-size:18px;color:var(--text)}.empty p{margin:0 0 16px}.empty .quick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.empty .quick button{background:var(--surface-2);border:1px solid var(--border);padding:6px 12px;border-radius:999px;font-size:13px;color:var(--text)}.empty .quick button:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.board{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 0 0;overflow:hidden}.board-header{display:grid;grid-template-columns:var(--label-w, 280px) 1fr;align-items:end;gap:var(--gap);padding:4px 18px 6px}.hour-axis{display:grid;grid-template-columns:repeat(24,1fr);height:22px;color:var(--text-faint);font-size:10px;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}.hour-axis span{text-align:center;line-height:22px}.city-row{display:grid;grid-template-columns:var(--label-w, 280px) 1fr;gap:var(--gap);padding:12px 18px;border-top:1px solid var(--border);align-items:center;position:relative}.city-row:first-of-type{border-top:0}.host-tag{font-size:9px;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:2px 5px;border-radius:4px;letter-spacing:.05em;flex-shrink:0}.city-label{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;min-width:0}.city-flag{font-size:22px;line-height:1;flex-shrink:0}.city-info{min-width:0;flex:1}.city-name{font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px;min-width:0}.city-name .name-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.city-sub{font-size:11px;color:var(--text-faint);display:flex;gap:6px;align-items:center;font-variant-numeric:tabular-nums}.city-sub .dot{color:var(--text-faint)}.city-time{font-variant-numeric:tabular-nums;font-weight:700;font-size:16px;color:var(--text);letter-spacing:-.01em}.city-time .ampm{font-size:11px;font-weight:600;color:var(--text-muted);margin-left:3px}.city-time .day-tag{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:4px;font-size:10px;font-weight:700;color:var(--text-muted);background:var(--surface-2);letter-spacing:.04em;vertical-align:2px}.city-time .day-tag.tomorrow{color:#d64938;background:#ffe8e3;background:oklch(95% .04 30)}.city-time .day-tag.yesterday{color:#0c82bf;background:#dff1ff;background:oklch(95% .03 240)}:root.dark .city-time .day-tag.tomorrow{background:#492923}:root.dark .city-time .day-tag.yesterday{background:#152b3b}.row-remove{background:transparent;border:0;color:var(--text-faint);padding:4px 6px;border-radius:6px;font-size:18px;line-height:1}.row-remove:hover{color:var(--danger);background:var(--surface-2)}.bar{position:relative;height:var(--bar-h);border-radius:10px;overflow:hidden;background:var(--asleep);border:1px solid var(--border);display:grid;grid-template-columns:repeat(24,1fr)}.bar-cell{position:relative;border-right:1px solid color-mix(in srgb,var(--asleep) 60%,black)}.bar-cell:last-child{border-right:0}.bar-cell.work{background:linear-gradient(180deg,var(--work) 0%,color-mix(in srgb,var(--work) 92%,black) 100%)}.bar-cell.awake{background:linear-gradient(180deg,var(--awake) 0%,color-mix(in srgb,var(--awake) 92%,black) 100%)}.bar-cell.asleep{background:var(--asleep)}.bar-cell .h-label{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:10px;color:#0000008c;font-variant-numeric:tabular-nums;pointer-events:none}.bar-cell.asleep .h-label{color:var(--asleep-fg)}.bar-cell.midnight:before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:#ffffff8c}:root.dark .bar-cell.midnight:before{background:#ffffff40}.slider-track{margin:14px 18px 0;display:grid;grid-template-columns:var(--label-w, 280px) 1fr;gap:var(--gap);align-items:center}.slider-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-muted)}.slider-meta .dot-state{width:10px;height:10px;border-radius:999px;display:inline-block}.dot-state.green{background:var(--work-edge);box-shadow:0 0 0 4px color-mix(in srgb,var(--work) 30%,transparent)}.dot-state.yellow{background:var(--awake-edge);box-shadow:0 0 0 4px color-mix(in srgb,var(--awake) 30%,transparent)}.dot-state.red{background:var(--danger);box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 25%,transparent)}.slider-line{position:relative;height:28px;cursor:grab}.slider-line:active{cursor:grabbing}.slider-line input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:28px;background:transparent;outline:none;margin:0}.slider-line input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--border);border-radius:3px}.slider-line input[type=range]::-moz-range-track{height:6px;background:var(--border);border-radius:3px}.slider-line input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;background:var(--accent);border:3px solid white;border-radius:999px;margin-top:-8px;box-shadow:0 2px 6px #00000040;cursor:grab}.slider-line input[type=range]::-moz-range-thumb{width:22px;height:22px;background:var(--accent);border:3px solid white;border-radius:999px;box-shadow:0 2px 6px #00000040;cursor:grab}:root.dark .slider-line input[type=range]::-webkit-slider-thumb{border-color:var(--surface)}:root.dark .slider-line input[type=range]::-moz-range-thumb{border-color:var(--surface)}.now-marker,.pick-marker{position:absolute;top:0;bottom:0;width:2px;pointer-events:none;z-index:5}.pick-marker{background:var(--accent);box-shadow:0 0 0 1px #fff6,0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent)}.pick-marker.green{background:var(--work-edge)}.pick-marker.yellow{background:var(--awake-edge)}.pick-marker.red{background:var(--danger)}.pick-marker:after{content:"";position:absolute;top:-4px;left:50%;transform:translate(-50%);width:10px;height:10px;border-radius:999px;background:inherit}.now-marker{background:#72819980;border-left:1px dashed oklch(60% .04 260 / .8);width:0}.bar-overlay{position:relative}.footer-actions{display:flex;justify-content:space-between;gap:12px;padding:14px 18px 18px;flex-wrap:wrap}.footer-actions .left,.footer-actions .right{display:flex;gap:8px;flex-wrap:wrap}.legend{display:flex;gap:14px;margin:18px 0 6px;padding:0 18px;font-size:12px;color:var(--text-muted)}.legend .lg{display:inline-flex;align-items:center;gap:6px}.legend .swatch{width:14px;height:10px;border-radius:3px}.legend .swatch.work{background:var(--work)}.legend .swatch.awake{background:var(--awake)}.legend .swatch.asleep{background:var(--asleep);border:1px solid var(--border-strong)}.content-block{margin-top:40px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}.content-block h2{margin-top:0;font-size:22px;letter-spacing:-.01em}.content-block h3{font-size:16px;letter-spacing:-.005em}.content-block p{color:var(--text-muted)}.faq summary{cursor:pointer;padding:12px 0;font-weight:600;list-style:none;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font-size:18px;color:var(--text-muted)}.faq details[open] summary:after{content:"−"}.faq details:first-of-type summary{border-top:0}.faq p{margin:0 0 12px}.pair-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:18px}.pair-card{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--surface-2);border-radius:10px;font-size:14px;color:var(--text);border:1px solid transparent;transition:background .12s,border-color .12s}.pair-card:hover{background:var(--accent-soft);border-color:var(--accent);text-decoration:none}.pair-card .arrow{color:var(--text-faint)}.site-footer{margin-top:60px;padding:24px 0;border-top:1px solid var(--border);text-align:center;color:var(--text-faint);font-size:13px}.site-footer a{color:var(--text-muted)}@media (max-width: 820px){:root{--label-w: 200px;--gap: 10px;--bar-h: 50px}.hour-axis span:nth-child(2n){display:none}.city-time{font-size:14px}.city-time .ampm,.city-sub{display:none}.bar-cell .h-label{font-size:8px}}@media (max-width: 640px){:root{--label-w: 100%;--gap: 0;--bar-h: 46px}.app{padding:18px 14px 60px}.board{padding:8px 0 0}.board-header{display:none}.city-row{grid-template-columns:1fr;padding:10px 14px;gap:6px;border-top:1px solid var(--border)}.city-row:first-of-type{border-top:0}.slider-track{grid-template-columns:1fr;margin:14px 14px 0;gap:6px}.city-flag{font-size:18px}.bar-cell .h-label{display:block;font-size:8px}.pair-grid{grid-template-columns:1fr}.hero h1{font-size:26px}}body.embed{background:transparent}body.embed .topbar,body.embed .hero,body.embed .content-block,body.embed .site-footer,body.embed .picker{display:none}body.embed .app{padding:12px}