:root{--bg:#f5f3ec;--ink:#172f43;--muted:#5a6a74;--line:#cbd2d3;--accent:#225dba}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,sans-serif}a{color:inherit}button,input,select{font:inherit;color:inherit}button{min-height:44px;border:1px solid var(--line);background:#fffdf7;border-radius:6px;padding:10px 20px;cursor:pointer}button:hover{background:#e8edf1}.primary{background:var(--accent);color:#fff;border-color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}header,main,footer{max-width:1400px;padding:24px 48px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ink);gap:24px}.brand{font:32px/1 Georgia,serif;text-decoration:none;letter-spacing:-.04em}.brand span{color:var(--accent);padding-left:8px}header>span{font-size:14px;color:var(--muted)}.intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:48px 0 40px;align-items:end}.eyebrow{font-size:14px;color:var(--muted);margin:0 0 20px}h1{font:76px/1.02 Georgia,serif;font-weight:400;letter-spacing:-.04em;margin:0}.intro-aside{max-width:460px}.intro-aside p{color:var(--muted);margin:0 0 24px;font-size:18px}.chosen{font:24px ui-monospace,monospace;color:var(--accent)}.toolbar{display:flex;gap:32px;align-items:end;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}label{display:grid;gap:8px;font-size:14px}input[type=date],select{min-height:44px;border:1px solid var(--line);background:#fffdf7;padding:8px 12px;border-radius:6px}input[type=range]{width:100%;accent-color:var(--accent);min-height:36px}.time-control{flex:1;position:relative;grid-template-columns:1fr 1fr}.time-control input{grid-column:1/-1}.time-control output{justify-self:end;font:16px ui-monospace,monospace}.legend{display:flex;gap:24px;padding:20px 0;font-size:13px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:8px}.legend i{width:12px;height:12px;border:1px solid #a7b3bd}.work{background:#ccdccb}.day{background:#eae2cc}.night{background:#dbe1e8}.city{display:grid;grid-template-columns:240px minmax(0,1fr) 40px;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid var(--line)}.city h2{font-size:20px;font-weight:500;margin:0 0 8px}.clock{font:28px ui-monospace,monospace;font-variant-numeric:tabular-nums}.city small{display:block;font-size:13px;color:var(--muted);margin-top:4px}.rail{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px}.cell{height:56px;display:flex;align-items:center;justify-content:center;font:12px ui-monospace,monospace;color:#3b4a52;position:relative}.cell.selected{outline:2px solid var(--accent);outline-offset:3px;z-index:1}.cell.selected:before{content:'';position:absolute;top:-16px;bottom:-16px;width:2px;background:var(--accent);left:50%;opacity:.4}.remove{padding:0;min-width:40px;background:transparent;border:0;font-size:24px}.add-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:24px 0}#status{font-size:14px;color:var(--muted)}.notes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;border-top:1px solid var(--ink);padding:32px 0;margin-top:24px}.notes h2{font:32px/1.15 Georgia,serif;margin:0}.notes p{font-size:14px;color:var(--muted);margin:0}footer{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}.skip{position:absolute;top:-100px}.skip:focus{top:16px;left:16px;background:#fff;padding:12px;z-index:10}@media(max-width:760px){header,main,footer{padding:20px}header>span{display:none}.intro{grid-template-columns:1fr;gap:24px;padding:32px 0}h1{font-size:56px}.intro-aside p{font-size:16px}.chosen{font-size:20px}.toolbar{flex-wrap:wrap;gap:20px}.time-control{flex-basis:100%;order:3}.toolbar>button{margin-left:auto}.legend{gap:12px;flex-wrap:wrap}.city{grid-template-columns:1fr 32px;gap:16px}.city-heading{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}.city-heading small{grid-column:2;text-align:right}.city h2{margin:0}.clock{font-size:24px}.rail{grid-column:1/-1;grid-row:2}.cell{font-size:10px;height:44px}.remove{grid-column:2;grid-row:1}.notes{grid-template-columns:1fr;gap:20px}.notes h2{font-size:28px}footer{flex-wrap:wrap}.add-row select{flex:1;min-width:140px}.add-row>label{width:100%}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media(max-width:760px){body .rail .cell{font-size:12px}body .rail .cell:not(:nth-child(3n+1)):not(.selected){color:transparent}}