:root{--bg:#f4f3ed;--ink:#252b28;--muted:#777c73;--line:#dcded4;--accent:#ed633d;--green:#547363}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}.shell{max-width:1300px;margin:auto;padding:0 58px}header{height:106px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:19px;font-weight:750;letter-spacing:1px}.logo{font-size:36px;color:var(--accent);font-weight:400}.brand-en{font-size:10px;letter-spacing:1.5px;margin-left:12px;border-left:1px solid #c8cbbf;padding-left:18px}.domain{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.domain span{color:var(--accent);margin-left:10px}.intro{display:flex;justify-content:space-between;align-items:center;padding:58px 0 46px}.eyebrow{font-size:10px;letter-spacing:2px;display:flex;align-items:center;gap:9px;color:var(--muted)}.eyebrow>span{width:7px;height:7px;border-radius:50%;background:var(--accent)}h1{font-size:58px;line-height:1.3;letter-spacing:-2px;margin:20px 0 22px;position:relative;width:fit-content;font-weight:650}.accent{color:var(--accent)}h1 svg{position:absolute;width:195px;right:0;bottom:-9px;fill:none;stroke:var(--accent);stroke-width:2;opacity:.65}.intro p{font-size:14px;color:var(--muted);line-height:1.9;margin:0}.mobile{display:none}.orbit{width:300px;height:265px;position:relative;margin-right:35px;flex-shrink:0}.orbit-ring{position:absolute;border:1px solid #cbd1c5;border-radius:50%;width:240px;height:240px;left:30px;top:0}.ring-one{transform:rotate(-32deg) scaleX(.44)}.ring-two:after{content:'';position:absolute;border-top:1px solid #cbd1c5;width:100%;top:50%;transform:rotate(-32deg)}.orbit-core{position:absolute;left:117px;top:65px;font-size:88px;line-height:1;color:var(--accent);font-family:Georgia,serif}.orbit-city{position:absolute;font-size:10px;letter-spacing:2px;display:flex;gap:9px;align-items:center;background:var(--bg);padding:5px}.orbit-city i{width:8px;height:8px;border-radius:50%;background:var(--green);outline:5px solid var(--bg)}.orbit-yyz{top:20px;left:30px}.orbit-yvr{top:155px;left:5px}.orbit-pek{right:0;top:132px}.orbit-pek i{background:var(--accent)}.orbit-note{position:absolute;bottom:0;font-size:8px;letter-spacing:2px;left:71px;color:var(--muted)}.converter{border:1px solid var(--line);border-radius:18px;background:#fafaf6;padding:0 24px;box-shadow:0 8px 25px #30382804}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:20px 0}.mode{display:flex;align-items:center;gap:8px;font-size:12px}.live-dot{height:6px;width:6px;background:#73957a;border-radius:50%;box-shadow:0 0 0 4px #73957a12}.live-dot.paused{background:var(--accent);box-shadow:0 0 0 4px #ed633d12}.actions{display:flex;gap:18px;align-items:center}button,select{font:inherit;cursor:pointer}button{transition:background .2s,transform .2s}button:active{transform:translateY(1px)}.text-button{background:none;border:0;font-size:11px;color:var(--muted);padding:10px 0}.text-button span{margin-left:8px}.now-button{font-size:11px;border:1px solid var(--line);border-radius:7px;padding:9px 13px;background:transparent;color:var(--ink)}.now-button:hover{background:#eeeee5}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.city-card{border:1px solid var(--line);background:#f0f1e8;min-width:0;border-radius:12px;padding:22px 23px 18px;position:relative;overflow:hidden;transition:border-color .2s,background .2s}.city-card[data-city=beijing]{background:#f6eee3}.city-card.selected{border-color:var(--accent);background:#fff4e9}.city-top{display:flex;justify-content:space-between;align-items:center}.airport{font-size:10px;letter-spacing:2px;color:var(--muted)}.day-status{font-size:10px;color:var(--green);display:flex;align-items:center;gap:5px}.city-name{white-space:nowrap;margin:21px 0 4px;font-size:23px;letter-spacing:1px;font-weight:650}.city-en{font-size:9px;letter-spacing:2px;color:var(--muted)}.time-wrap{margin:22px 0 14px;display:flex;align-items:center;gap:6px}.time-input{font-family:inherit;font-size:47px;letter-spacing:-2px;font-weight:400;width:100%;min-width:0;color:var(--ink);border:0;background:transparent;outline:none;padding:0;line-height:1.2;font-variant-numeric:tabular-nums;border-radius:4px}.time-input::-webkit-calendar-picker-indicator{width:15px;opacity:.3;margin:0;padding:0;cursor:pointer}.time-input:focus{box-shadow:0 2px 0 var(--accent)}.date-line{display:flex;align-items:center;justify-content:space-between;gap:4px}.date-input{max-width:143px;min-width:0;font:inherit;font-size:11px;border:0;background:transparent;color:#646d62;padding:5px 0;outline:none}.date-input:focus{box-shadow:0 2px 0 var(--accent)}.date-input::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}.day-diff{font-size:10px;color:var(--accent);white-space:nowrap}.city-bottom{border-top:1px solid #d5d8cb;margin-top:20px;padding-top:13px;display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:9px;color:var(--muted)}.zone{font-variant-numeric:tabular-nums;font-size:10px;white-space:nowrap}.converter-bottom{padding:18px 0;display:flex;justify-content:space-between;font-size:10px;color:#8c9186}.tiny-clock{margin-left:7px}.feedback{font-size:12px;color:#ac431e;line-height:1.8}.feedback:not(:empty){margin-top:15px}.ambiguity{font-size:12px;padding-top:12px;line-height:2}.ambiguity select{padding:5px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink)}.insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px;padding:35px 0 32px}.insight{display:flex;gap:13px}.insight-icon{font-size:22px;color:var(--green);line-height:1.1}.insight h2{font-size:12px;font-weight:600;margin:2px 0 9px}.insight p{font-size:11px;color:var(--muted);line-height:1.9;margin:0}.notes{border-top:1px solid var(--line);padding:18px 0;color:var(--muted);font-size:11px}.notes summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between}.notes summary::-webkit-details-marker{display:none}.notes p{max-width:800px;line-height:2}.notes a{color:var(--green)}footer{margin-top:16px;padding:23px 0 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;color:#92968b}.footer-divider{padding:0 12px;color:#c3c6ba}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}@media(min-width:1250px){.time-input{font-size:55px}}@media(max-width:1000px){.shell{padding:0 30px}.city-card{padding:18px 16px}.time-input{font-size:40px}.orbit{margin-right:0;transform:scale(.85);transform-origin:right}.insights{gap:20px}}@media(max-width:740px){.shell{padding:0 22px}header{height:78px}.brand{font-size:17px}.brand-en{display:none}.domain{font-size:8px;letter-spacing:1px}.intro{padding:35px 0 31px}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:43px;margin:16px 0 23px}.intro p{font-size:12px}.mobile{display:block}.orbit{display:none}.converter{padding:0 14px;border-radius:14px}.toolbar{padding:16px 0}.mode{font-size:10px}.actions{gap:12px}.text-button{font-size:10px}.text-button span{display:none}.now-button{font-size:10px;padding:8px 9px}.cards{grid-template-columns:1fr;gap:11px}.city-card{padding:17px 19px 13px;display:grid;grid-template-columns:1fr 1.35fr;column-gap:15px}.city-top{grid-column:1/-1}.city-name{white-space:nowrap;margin:13px 0 4px;font-size:21px;grid-column:1;grid-row:2}.city-en{grid-column:1;grid-row:3;align-self:start}.time-wrap{grid-column:2;grid-row:2/4;margin:8px 0;align-self:center}.time-input{font-size:44px;letter-spacing:-1.5px}.date-line{grid-column:1/-1;margin-top:12px}.date-input{max-width:155px;font-size:12px}.city-bottom{grid-column:1/-1;margin-top:9px;padding-top:10px}.converter-bottom{font-size:9px;padding:15px 0}.insights{grid-template-columns:1fr;padding:29px 3px;gap:23px}.insight h2{font-size:13px;margin-bottom:5px}.insight p{font-size:12px}.insight-icon{min-width:23px}.notes{font-size:11px}footer{font-size:9px;line-height:1.8;gap:12px;align-items:flex-start}footer>span:last-child{text-align:right;max-width:100px}.footer-divider{padding:0 5px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

main{padding-top:28px}@media(max-width:740px){main{padding-top:22px}}

.time-wrap{flex-direction:column;align-items:flex-start;gap:7px;min-height:92px;justify-content:flex-start}.period-select{font-size:11px;color:var(--green);background:#ffffff65;border:1px solid #d5d8cb;border-radius:5px;padding:5px 6px;min-height:30px}.period-select[hidden]{display:none}.format-row{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:34px;margin-top:12px;font-size:10px;color:var(--muted)}.format-toggle{display:flex;background:#e6e4db;border-radius:6px;padding:3px;gap:2px}.format-toggle button{border:0;background:transparent;color:var(--muted);padding:5px 9px;border-radius:4px;font-size:10px}.format-toggle button[aria-pressed=true]{background:#fafaf6;color:var(--ink);box-shadow:0 1px 3px #00000010}@media(max-width:740px){.time-wrap{min-height:85px;justify-content:center;gap:4px}.period-select{font-size:10px;padding:3px 5px;min-height:27px}.format-row{margin-top:8px}}
/* Compact cards keep all three cities in the initial phone viewport. */
@media(max-width:740px){
 .shell{padding:0 14px}header{height:54px}.logo{font-size:29px}.brand{font-size:16px}main{padding-top:10px}
 .converter{padding:0 10px;border-radius:12px}.toolbar{padding:9px 0}.actions{gap:10px}.cards{gap:8px}
 .city-card{padding:10px 12px;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);column-gap:8px;border-radius:10px}
 .city-top{display:none}.city-name{grid-column:1;grid-row:1;margin:7px 0 3px;font-size:19px;align-self:end}.city-en{grid-column:1;grid-row:2;font-size:8px;letter-spacing:1.4px}
 .time-wrap{grid-column:2;grid-row:1/3;min-height:59px;margin:0;gap:2px;align-self:center;align-items:flex-end;justify-content:center}
 .time-input{width:100%;font-size:35px;letter-spacing:-1px;text-align:right;line-height:1.12}.period-select{min-height:26px;font-size:10px;padding:2px 5px}
 .date-line{grid-column:1/-1;grid-row:3;margin-top:3px}.date-input{font-size:12px;padding:4px 0;min-height:27px}.day-diff{font-size:9px}
 .city-bottom{grid-column:1;grid-row:4;border:0;margin:3px 0 0;padding:0;align-self:center}.city-bottom>span:first-child{display:none}
 .format-row{grid-column:2;grid-row:4;justify-content:flex-end;min-height:28px;margin-top:3px;font-size:9px}.format-row>span{white-space:nowrap}.format-row:has(.format-toggle)>span{display:none}
 .format-toggle{padding:2px;gap:1px}.format-toggle button{padding:5px 8px;min-height:25px;font-size:10px}
 .converter-bottom{padding:9px 0;font-size:9px}.insights{padding-top:22px}
}
@media(max-width:740px){
 .city-card{padding:8px 12px;row-gap:0}.city-name{margin-top:2px}.time-wrap{min-height:51px}.time-input{font-size:32px}.period-select{min-height:24px;padding:1px 5px}
 .date-line{margin-top:1px}.date-input{min-height:25px;padding:3px 0}.format-row{min-height:27px;margin-top:1px}.city-bottom{margin-top:1px}.converter-bottom{padding:7px 0}
}