:root{--bg:#ededed;--card:#fafafa;--ink:#242424;--muted:#707070;--line:#c9c9c9;--accent:#5f5f5f;--remote:#4b4b4b;--origin-bg:#fff1f1;--origin-line:#edcccc;--origin-accent:#a56363;--destination-bg:#eef7ff;--destination-line:#c9dff0;--destination-accent:#5d82a3;--sunrise:#b77900}*{box-sizing:border-box}html{background:var(--bg);color:var(--ink);font-family:Manrope,sans-serif}body{margin:0;min-height:100vh;display:grid;place-items:center;padding:clamp(14px,4vw,56px)}button,input,select{font:inherit}main{width:min(1260px,100%)}.clocks{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}.offset-stack{display:grid;gap:12px;width:270px}.offset-card{width:380px;min-width:380px;margin:12px auto 0;border:1px solid var(--line);background:var(--card);padding:20px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left}.offset-card .kind{margin:0;line-height:1.5;max-width:100px}.offset-card .kind:before{display:none}.offset-card .clock{flex:none;white-space:nowrap;font-size:clamp(43px,5vw,62px)}.travel-card{width:270px;margin:12px auto 0;border:1px solid var(--line);background:var(--card);padding:20px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}.travel-card .kind{margin:0}.travel-card .kind:before{display:none}.travel-card .date-field{justify-content:flex-end}.clock-card{background:var(--card);border:1px solid var(--line);min-width:0}.clock-card.origin-card{background:var(--origin-bg);border-color:var(--origin-line)}.clock-card.remote{background:var(--destination-bg);border-color:var(--destination-line)}.card-top{padding:26px 28px 22px;display:flex;align-items:flex-start;justify-content:space-between}.kind,.label{font:500 10px DM Mono,monospace;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin:0 0 8px}.kind:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--origin-accent);margin-right:7px}.remote .kind:before{background:var(--destination-accent)}h1{font-size:25px;line-height:1.1;letter-spacing:-.035em;margin:0;font-weight:600}.round-button,.change-button{border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}.round-button{border-radius:50%;width:38px;height:38px;font-size:21px}.change-button{border-radius:20px;padding:9px 14px;font-size:10px;text-transform:uppercase;letter-spacing:.09em}.round-button:hover,.change-button:hover{background:var(--ink);color:white}.location-data{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 28px}.location-data p{display:grid;grid-template-columns:120px 1fr;gap:10px;margin:7px 0;font:400 11px/1.4 DM Mono,monospace}.location-data span{color:var(--muted)}.location-data strong{font-weight:500;overflow-wrap:anywhere}.clock-content{padding:29px 28px 25px}.clock-content.muted{opacity:.3}.times{display:grid;grid-template-columns:1fr 1fr;gap:20px}.times>div:last-child{text-align:right}.clock{font:500 clamp(43px,5vw,62px)/1 DM Mono,monospace;letter-spacing:-.07em;margin:0;font-variant-numeric:tabular-nums}.primary-time{max-width:100%}.time-details{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(70px,1fr) 106px;align-items:center;gap:9px 12px}.time-details>span,.time-details>label{color:var(--muted);font:400 9px DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em}.time-details>span:nth-child(2),.time-details>span:nth-child(3){text-align:center;font-size:8px}.time-details strong{text-align:center;font:500 13px DM Mono,monospace}.time-details strong:nth-child(6),.time-details strong:nth-child(9){color:var(--accent)}.remote .time-details strong:nth-child(6),.remote .time-details strong:nth-child(9){color:var(--remote)}.wake-control{width:106px}.time-details input{width:106px;height:32px;border:1px solid var(--line);background:transparent;color:var(--ink);padding:0 6px;font:500 12px DM Mono,monospace}.wake-control output{display:block;margin-top:5px;text-align:center;color:var(--ink);font:500 12px DM Mono,monospace}.time-details input:focus{outline:1px solid var(--accent);outline-offset:1px}.clock.solar{color:var(--accent)}.sunrise-time{margin:10px 0 0;color:var(--muted);font:400 10px DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em}.sunrise-time span{color:var(--ink);font-weight:500;margin-left:5px}.wake-time{display:flex;align-items:center;gap:8px;width:max-content;margin-top:18px;color:var(--muted);font:400 9px DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em}.times>div:last-child .wake-time{margin-left:auto}.wake-time input{width:86px;height:32px;border:1px solid var(--line);background:transparent;color:var(--ink);padding:0 7px;font:500 13px DM Mono,monospace}.solar-wake span{width:86px;height:32px;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);font:500 13px DM Mono,monospace;letter-spacing:0}.wake-time input:focus{outline:1px solid var(--accent);outline-offset:1px}.remote .clock.solar{color:var(--remote)}.stats{border-top:1px solid var(--line);margin-top:28px;padding-top:21px;display:grid;grid-template-columns:repeat(3,1fr)}.stats>div+div{border-left:1px solid var(--line);padding-left:18px}.stats p{font:500 18px DM Mono,monospace;margin:0 0 6px}.stats span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.location-error{margin:18px 28px 0;padding:11px 12px;border:1px solid rgba(36,36,36,.3);display:flex;align-items:center;justify-content:space-between;font-size:11px}.location-error[hidden]{display:none}.location-error button{border:0;background:var(--accent);color:white;padding:7px 11px;cursor:pointer}.plan-card{width:min(760px,100%);margin:0 auto 12px;border:1px solid var(--line);background:var(--card)}.plan-title{margin:0;padding:20px 22px;border-bottom:1px solid var(--line);text-align:center;font-size:25px;line-height:1.1;font-weight:600;letter-spacing:-.035em}.travel-date{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);color:var(--muted);font:500 10px DM Mono,monospace;text-transform:uppercase;letter-spacing:.1em}.date-picker{position:relative}.date-field{display:flex}.date-field input{width:122px;height:36px;border:1px solid var(--line);border-right:0;background:transparent;color:var(--ink);padding:0 10px;font:500 12px DM Mono,monospace}.date-field input:focus{outline:1px solid var(--accent);outline-offset:-1px}.date-field button{width:36px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-size:16px}.calendar{position:absolute;z-index:20;right:0;top:43px;width:294px;padding:12px;background:var(--card);border:1px solid var(--line);box-shadow:0 14px 45px #24242426;text-transform:none;letter-spacing:0}.calendar[hidden]{display:none}.calendar.table-calendar{position:fixed;z-index:40;left:50%;right:auto;top:50%;transform:translate(-50%,-50%)}.calendar-head{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;margin-bottom:9px}.calendar-head strong{text-align:center;font:500 12px DM Mono,monospace}.calendar-head button{height:30px;border:0;background:transparent;color:var(--ink);font-size:21px;cursor:pointer}.calendar-week,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-week span{text-align:center;padding:5px 0;color:var(--muted);font:500 8px DM Mono,monospace;text-transform:uppercase}.calendar-days button,.calendar-blank{height:34px}.calendar-days button{border:0;background:transparent;color:var(--ink);font:400 10px DM Mono,monospace;cursor:pointer}.calendar-days button:hover{background:#e7e7e7}.calendar-days button.selected{background:var(--ink);color:white}.calendar-days button.today{outline:1px solid var(--accent);outline-offset:-3px}.calendar-days button:disabled{color:#b5b5b5;cursor:default;background:transparent}.plan-table-wrap{overflow-x:auto}.plan-table{width:100%;border-collapse:collapse;table-layout:fixed}.plan-table th,.plan-table td{padding:10px 12px;border-bottom:0;text-align:left}.plan-table th{color:var(--muted);font:500 9px DM Mono,monospace;text-transform:uppercase;letter-spacing:.1em}.plan-table .group-heading{text-align:center}.heading-sunrise{margin-left:8px;color:var(--sunrise)}.plan-table td{font:500 13px DM Mono,monospace;font-variant-numeric:tabular-nums}.plan-table tr:last-child td{border-bottom:0}.plan-table .date-cell{display:flex;align-items:center;gap:9px}.plan-table .has-edit-button{padding:4px}.quiet-button{border:1px solid rgba(36,36,36,.25);border-radius:4px;background:rgba(36,36,36,.06);color:var(--ink);cursor:pointer}.quiet-button:hover{border-color:rgba(36,36,36,.45);background:rgba(36,36,36,.11)}.origin-ghost{border-color:var(--origin-line);background:var(--origin-bg)}.origin-ghost:hover{border-color:var(--origin-accent);background:#fde5e5}.destination-ghost{border-color:var(--destination-line);background:var(--destination-bg)}.destination-ghost:hover{border-color:var(--destination-accent);background:#e2f1fd}.quiet-button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.heading-button{display:block;width:100%;padding:7px 8px;font:inherit;text-transform:inherit;letter-spacing:inherit;white-space:normal;overflow-wrap:anywhere;line-height:1.35}.table-edit-button{display:flex;width:100%;align-items:center;justify-content:flex-start;padding:7px 8px;text-align:left;font:inherit;white-space:nowrap}.table-edit-button .sunrise-delta{margin-left:10px}.sunrise-delta{margin-left:12px;color:var(--sunrise);font-size:11px;font-weight:500}dialog{border:0;padding:0;width:min(560px,calc(100% - 28px));max-height:calc(100vh - 28px);background:var(--card);color:var(--ink);box-shadow:0 24px 90px #24242444}dialog::backdrop{background:#24242488;backdrop-filter:blur(3px)}form{padding:26px}.dialog-top{display:flex;justify-content:space-between;align-items:center}.dialog-top h2{font-size:22px;margin:0 0 20px}.dialog-top button{border:0;background:none;font-size:26px;cursor:pointer}.current-location-option{width:100%;height:42px;margin-bottom:10px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;font-size:11px}.current-location-option:hover{background:#e7e7e7}.search-row{display:grid;grid-template-columns:1fr auto}.search{width:100%;height:44px;border:1px solid var(--line);background:white;padding:0 12px;outline:none}.search-row button{border:0;background:var(--ink);color:white;padding:0 16px;cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.07em}.search-row button:disabled{opacity:.5}.search-status{min-height:16px;margin:7px 0 0;color:var(--muted);font:400 10px DM Mono,monospace}.city-list{max-height:310px;overflow:auto;margin:0 0 16px}.city-option{width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:13px 3px;display:flex;justify-content:space-between;text-align:left;cursor:pointer}.city-option:hover{color:var(--accent)}.city-option span{font-size:12px;font-weight:600}.city-option small{font:400 10px DM Mono,monospace;color:var(--muted)}details{border-top:1px solid var(--line);padding-top:15px}summary{font-size:11px;color:var(--muted);cursor:pointer}.custom-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}.custom-grid label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.custom-grid input,.custom-grid select{display:block;width:100%;height:38px;border:1px solid var(--line);background:white;margin-top:5px;padding:0 8px;font-size:11px}.use-button{border:0;background:var(--ink);color:white;padding:10px 14px;margin-top:12px;font-size:11px;cursor:pointer}@media(max-width:760px){body{display:block;padding:12px}.clocks{grid-template-columns:1fr;gap:12px}.offset-stack{grid-template-columns:1fr;width:100%}.offset-card{min-width:0;width:auto;max-width:100%;margin:12px 0 0;padding:18px 10px}.offset-card .clock{font-size:40px}.card-top{padding:21px 20px 18px}.location-data{padding:13px 20px}.location-data p{grid-template-columns:105px 1fr}.clock-content{padding:24px 20px 21px}.clock{font-size:46px}.stats{margin-top:38px}.stats>div+div{padding-left:10px}.stats p{font-size:15px}.stats span{font-size:8px}.location-error{margin:14px 20px 0}.plan-card{margin:0 0 12px}.travel-date{padding:15px 16px}.plan-table{min-width:0}.plan-table th,.plan-table td{padding:9px 7px;font-size:10px}.sunrise-delta{margin-left:6px;font-size:9px}.custom-grid{grid-template-columns:1fr}}@media(max-width:370px){.clock{font-size:39px}.location-data p{grid-template-columns:92px 1fr;font-size:10px}}