:root{color-scheme:dark;--bg:#080d14;--panel:#101923;--line:#293b4b;--cyan:#51d9f5;--muted:#8fa6bb;--amber:#ffbe52;--text:#eaf3ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#142334,var(--bg) 65%);color:var(--text);font:15px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:100vh;padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));-webkit-tap-highlight-color:transparent}header,main{max-width:820px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:20px 0 12px}.brand{font-size:29px;font-weight:800;letter-spacing:6px}.subbrand{display:block;font-size:9px;letter-spacing:4px;color:var(--muted);margin-top:3px}button,input,select{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;background:linear-gradient(#172330,#0d151e);border:1px solid var(--line);border-radius:5px;cursor:pointer;font-weight:650;letter-spacing:.5px}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button.active,.primary{border-color:var(--cyan);background:linear-gradient(120deg,#12435a,#113357);box-shadow:inset 0 0 15px #00cfff12;color:#f0fdff}button:disabled{opacity:.4;cursor:default}input,select{min-height:44px;background:#0b121c;border:1px solid var(--line);border-radius:4px;padding:9px;width:100%;min-width:0}input[type=checkbox]{width:20px;min-height:20px;accent-color:var(--cyan)}input[type=range]{accent-color:var(--cyan);padding:0;border:0;background:transparent}label{display:block;color:var(--muted);font-size:12px;line-height:1.6;margin:12px 0}label input,label select{margin-top:5px;color:var(--text)}.check{display:flex;gap:10px;align-items:center}.check input{margin:0}.segmented{display:flex;gap:7px;margin-bottom:12px}.segmented button{flex:1}.toolbar{display:flex;gap:9px;margin-bottom:12px}.toolbar select{flex:1}.statusbar{display:flex;justify-content:space-between;font:10px ui-monospace,monospace;letter-spacing:1px;color:var(--muted);padding:3px 0 13px}#status{color:#52e8b0}#status.preview{color:var(--amber)}.notice{font-size:10px;color:var(--muted);border-left:2px solid #42617a;padding-left:8px;margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;gap:5px}.notice button{font-size:9px;background:transparent;padding:5px 8px}.bank{display:flex;gap:7px;overflow-x:auto;scroll-snap-type:x mandatory;margin-bottom:10px;padding-bottom:3px}.clockmini{flex:0 0 145px;text-align:left;border-left:3px solid var(--cyan);scroll-snap-align:start;padding:11px}.clockmini strong{display:block;font:25px ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:750;letter-spacing:-1px;margin-top:5px}.clockmini small{color:var(--muted);font-size:9px}.clockmini .name{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.monitor,.panel,.row,.participant,.result{border:1px solid var(--line);background:linear-gradient(130deg,#121e2a,#0b121a);border-radius:5px}.monitorHead{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;font-size:11px;letter-spacing:1.5px;color:var(--muted)}.monitorHead button{padding:4px 11px;margin-left:3px;font-size:20px}.monitorFoot{padding:12px;font:9px ui-monospace,monospace;display:flex;justify-content:space-between;color:var(--muted)}#earth{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(#12314a,#080f19 67%);touch-action:none}canvas{width:100%;height:100%;display:block}#pins{position:absolute;inset:0;pointer-events:none}.pin{position:absolute;pointer-events:auto;padding:4px 8px;min-height:44px;font:11px ui-monospace,monospace;background:#071422df;border:1px solid #51d9f588;transform:translate(-50%,-50%);max-width:115px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 0 12px #00cfff24}.pin.selected{color:var(--cyan);border-color:var(--cyan)}.panel{padding:14px;margin:12px 0}.paneltitle{font:11px ui-monospace,monospace;letter-spacing:1.2px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);gap:8px}.paneltitle button{font-size:9px;padding:7px}.ruler{display:flex;justify-content:space-between;color:var(--muted);font:10px ui-monospace,monospace}#previewLabel{font:11px ui-monospace,monospace;color:var(--cyan);margin:14px 0 5px}#exact{font-size:10px;min-height:44px;background:transparent;border:0;padding-left:0}.big{width:100%;min-height:54px;display:flex;justify-content:center;gap:15px;align-items:center;letter-spacing:1px;margin:12px 0}#alignOpen{justify-content:space-between;padding:15px 20px}#rows{margin-top:10px}.row{margin-bottom:8px;padding:13px;display:grid;grid-template-columns:1fr auto;gap:4px;border-left:3px solid var(--cyan)}.row .rowname{font-size:14px;font-weight:700}.row .city,.row .meta{font-size:10px;color:var(--muted);margin-top:5px}.row .time{font:clamp(22px,7vw,34px) ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:750;letter-spacing:-1px;align-self:center}.row .actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:5px}.row .actions button{font-size:11px;padding:6px 12px}.pagehead{display:flex;justify-content:space-between;gap:10px;align-items:center}h1{font-size:22px;letter-spacing:2px}h2{font-size:18px;letter-spacing:1px}.muted{color:var(--muted);font-size:12px;line-height:1.65}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.participant{padding:9px 13px;margin:9px 0;display:grid;grid-template-columns:1fr auto;gap:5px}.participant label{margin:6px 0;color:var(--text);font-size:13px}.participant .hours{font-size:11px;color:var(--muted)}.participant .editHours{grid-column:1/-1;justify-self:end;font-size:10px}.required{color:var(--amber)!important}.result{padding:14px;margin:13px 0;border-left:3px solid var(--cyan)}.result.partial{border-left-color:var(--amber)}.result h3{margin:2px 0 8px;font-size:17px;letter-spacing:1px}.result .localresult{display:flex;justify-content:space-between;gap:10px;border-top:1px solid #ffffff0d;padding:9px 0;font-size:12px}.localresult small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.outside{color:var(--amber)}.resultActions{display:flex;gap:8px}.resultActions button{flex:1}.error{color:#ffb1a4;font-size:13px;line-height:1.5}dialog{background:#0e1823;border:1px solid #486075;color:var(--text);border-radius:8px;padding:20px;width:calc(100% - 24px);max-width:520px;max-height:90dvh;overflow:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(5px)}fieldset{border:1px solid var(--line);border-radius:4px;padding:10px;margin:15px 0}legend{font-size:11px;color:var(--cyan);letter-spacing:1px}.days{display:flex;justify-content:space-between;flex-wrap:wrap}.days label{display:flex;flex-direction:column;align-items:center;gap:5px}.danger{color:#ffb1a4;width:100%;margin-top:12px}#toast{position:fixed;bottom:24px;left:20px;right:20px;max-width:600px;margin:auto;background:#193647;border:1px solid var(--cyan);padding:15px;z-index:99;font-size:13px}#toast button{margin-left:15px} [hidden]{display:none!important}@media(min-width:700px){.bank .clockmini{flex:1}#earth{max-height:560px;aspect-ratio:auto;height:560px}.row .time{font-size:38px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}} 

/* Phone-first flow: reachable actions, readable clocks, expandable detail. */
html{scroll-padding-bottom:100px}body{padding-bottom:calc(100px + env(safe-area-inset-bottom));-webkit-text-size-adjust:100%}header{padding:12px 0 8px}.brand{font-size:25px}.statusbar{gap:10px;padding-bottom:10px}.statusbar span{min-width:0;overflow-wrap:anywhere}.notice{min-height:32px;margin-bottom:8px}.notice button{font-size:10px}.clockmini{flex-basis:164px}.clockmini strong{font-size:26px;white-space:nowrap}.clockmini small{font-size:10px}.monitorHead{padding:4px 10px}.monitorFoot{gap:10px;line-height:1.5}#focused{text-align:right;overflow-wrap:anywhere}#earth{height:clamp(220px,36dvh,340px);aspect-ratio:auto}.actiondock{position:fixed;bottom:0;left:0;right:0;z-index:10;padding:8px max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom));background:#080d14f2;border-top:1px solid var(--line);backdrop-filter:blur(16px)}.actiondock .big{max-width:820px;margin:0 auto}.actiondock span{font-size:12px;font-weight:400;letter-spacing:0}.timepanel{padding:0}.timebody{padding:0 14px 12px}summary{min-height:48px;padding:14px;cursor:pointer;font-size:12px;font-weight:650;color:var(--cyan)}summary span{display:inline-block;color:var(--muted);font-size:11px;font-weight:400;margin-left:8px}#live:disabled{display:none}#previewLabel{line-height:1.6}.row{grid-template-columns:minmax(0,1fr);gap:6px}.row .rowname{overflow-wrap:anywhere}.row .time{font-size:34px;white-space:nowrap}.row .city,.row .meta{font-size:12px;line-height:1.4}.row .actions{margin-top:-46px;align-self:end}.row .actions button{min-width:44px}.row .time{padding-bottom:48px}.row .actions{margin-top:-48px}.sectionhead{display:flex;justify-content:space-between;align-items:center;gap:12px}.sectionhead h2{font-size:14px;letter-spacing:0}.sectionhead span{font-size:12px;color:var(--muted)}.participant{grid-template-columns:minmax(0,1fr) auto;padding:8px 12px;gap:0 8px}.participant label{min-height:44px;margin:0;overflow-wrap:anywhere}.participant .check input{flex-shrink:0}.participant .hours{grid-column:1;align-self:center;line-height:1.5;overflow-wrap:anywhere}.participant .editHours{grid-column:2;grid-row:2;font-size:11px;padding:8px}.participant .required{font-size:12px}.two{grid-template-columns:repeat(2,minmax(0,1fr))}input,select{font-size:16px;max-width:100%}.pagehead{flex-wrap:wrap}.pagehead h1{font-size:20px}.localresult>div{min-width:0;overflow-wrap:anywhere}.localresult>div:last-child{text-align:right;flex-shrink:0;max-width:62%}.result .localresult{font-size:13px}.localresult small{font-size:11px;line-height:1.4}dialog{padding:16px;max-height:calc(100dvh - 32px);overscroll-behavior:contain}dialog .pagehead{position:sticky;top:-16px;background:#0e1823;z-index:2;padding:8px 0}dialog .close{min-width:44px}dialog details{border:1px solid var(--line);border-radius:5px;margin:12px 0}dialog details>label,dialog details>.two{margin-left:10px;margin-right:10px}dialog fieldset{border:0;margin:0}dialog .editorSave{position:sticky;bottom:-16px;background:#0e1823;padding:4px 0}.days label{min-width:32px;min-height:54px}.check{min-height:44px}#toast{bottom:calc(88px + env(safe-area-inset-bottom))}#webInstall{border-top:1px solid var(--line);padding-top:14px}#installApp{width:100%}
@media(min-width:700px){#earth{height:480px;max-height:none}.row{grid-template-columns:minmax(0,1fr) auto}.row .time{padding:0}.row .actions{margin:0}.participant{padding:10px 16px}.clockmini{min-width:164px}.bank .clockmini{flex:1 0 164px}}
@media(max-width:350px){.two{grid-template-columns:1fr}.participant{padding:8px}.participant .required{font-size:11px;gap:6px}.actiondock span{font-size:10px}.clockmini{flex-basis:160px}h1{letter-spacing:0}.pagehead h1{font-size:18px}}
#align>.pagehead{position:sticky;top:0;background:#080d14f5;z-index:3;padding:8px 0;backdrop-filter:blur(12px)}#results{scroll-margin-top:70px}
.bank .clockmini{flex:0 0 auto;min-width:164px;width:max-content}.clockmini .name{max-width:220px}

/* Compact List: identity and clock share the top, difference shares the action row. */
#rows .row{grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;padding:12px;margin-bottom:8px;align-items:start}
#rows .identity{min-width:0;align-self:center}#rows .rowname{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
#rows .city{font-size:11px;line-height:1.4;margin-top:4px;overflow-wrap:anywhere}
#rows .clockface{text-align:right;min-width:0}#rows .time{font-size:30px;line-height:1.15;padding:0;white-space:nowrap;font-variant-numeric:tabular-nums}#rows .time.longtime{font-size:24px}
#rows .date{font-size:10px;line-height:1.4;margin-top:4px;white-space:nowrap}
#rows .rowfooter{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #ffffff0b;padding-top:6px;min-width:0}
#rows .difference{font-size:10px;line-height:1.4;margin:0;flex:1;min-width:0;overflow-wrap:anywhere;color:var(--muted)}
#rows .actions{grid-column:auto;margin:0;align-self:center;flex-shrink:0;gap:4px}#rows .actions button{min-width:44px;min-height:44px;padding:6px 10px;font-size:11px}
@media(max-width:350px){#rows .row{padding:10px;gap:6px 8px}#rows .rowname{font-size:13px}#rows .time{font-size:25px}#rows .time.longtime{font-size:20px}#rows .date{font-size:9px}#rows .city{font-size:10px}#rows .difference{font-size:9px}}

/* Quieter surfaces keep local times and primary actions in focus. */
:root{--line:#263544;--muted:#a0b1c1}button{border-radius:8px;letter-spacing:.2px;background:#14202c}button.active,.primary{background:#15465c;box-shadow:none}.monitor,.panel,.row,.participant,.result{border-radius:10px;background:#101a25}input,select{border-radius:7px}header{padding:16px 0 10px}.segmented{padding:4px;gap:4px;background:#0b131d;border:1px solid var(--line);border-radius:12px}.segmented button{border-color:transparent;background:transparent}.segmented button.active{background:#193748;border-color:#39667c}.notice{border:0;padding:0 4px;min-height:32px;margin-top:-6px;font-size:11px}.notice button{border:0;min-height:44px;color:var(--muted);font-size:11px}.row .actions button{background:transparent;border-color:transparent;color:var(--muted)}#rows .actions button[aria-pressed=true]{color:var(--cyan)}#rows .actions button:disabled{opacity:.22}#rows .difference{font-size:11px;text-transform:none}#rows .row{border-left-width:2px}.previewbanner{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #826333;background:#292319;border-radius:8px;padding:8px 12px;margin-bottom:12px;color:#ffce7b}.previewbanner strong,.previewbanner span{display:block;font-size:12px;line-height:1.6}.previewbanner button{font-size:12px;flex-shrink:0;background:transparent;border-color:#826333}.empty{text-align:center;padding:28px 16px;color:var(--muted);border:1px dashed var(--line);border-radius:10px}.empty h2{color:var(--text);font-size:18px;letter-spacing:0}.empty p{font-size:13px;line-height:1.6}.empty button{margin-top:8px}summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}#align>.muted{margin-top:0}#prefs .pagehead h2{letter-spacing:0}.result h3{letter-spacing:0} @media(max-width:350px){#rows .difference{font-size:10px}.previewbanner{padding:8px}.previewbanner span{font-size:11px}}