@charset "UTF-8";
:root{color-scheme:light;--red:#9f1e22;--red-dark:#7f171b;--ink:#303238;--muted:#717277;--paper:#fafafa;--line:#dcdddf;--bg:#efefef;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;border-top:4px solid var(--red)}a{color:inherit}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b75559;outline-offset:4px}button{cursor:pointer}button svg{display:block}p,h1,h2,h3{margin:0}button,input{border-radius:8px}.site-header{min-height:106px;padding:22px max(4.5vw,24px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#fafafaf2;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:16px;text-decoration:none}.brand-mark{width:58px;height:58px;display:grid;place-items:center;background:var(--red);color:#fff;font-size:20px;font-weight:750;letter-spacing:.02em}.brand-wordmark{color:var(--red);font-size:23px;font-weight:650;letter-spacing:-.035em}.brand-wordmark>span{display:block;margin-top:3px;color:#73757a;font-size:9px;font-weight:500;letter-spacing:.17em}.header-right{display:flex;align-items:center;gap:26px;font-size:13px}.portal-label{color:var(--red);padding:9px 0;border-bottom:1px solid var(--red)}.preview-label{padding:5px 10px;background:#ececee;border:1px solid #d9dadd;color:#6d6e74;border-radius:4px;font-size:11px;letter-spacing:.025em}.page{max-width:1392px;padding:48px 56px 42px;margin:0 auto}.intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:.17em;color:var(--red)}h1{font-size:clamp(32px,3.4vw,49px);font-weight:500;letter-spacing:-.055em;line-height:1.15;margin-top:13px;color:#3a3b40}h1>span{color:var(--red)}.intro-note{font-size:13px;line-height:1.65;color:#797a80;padding-bottom:3px}.welcome-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr);gap:24px;align-items:stretch}.japan-panel{background:linear-gradient(128deg,#fcfcfc 0%,#f7f7f8 100%);border:1px solid #d4d6d9;border-radius:22px;padding:26px 30px 20px;box-shadow:0 9px 24px #282d3404;display:flex;flex-direction:column;min-width:0}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.panel-top .eyebrow{display:flex;align-items:center;gap:9px}.japan-dot{display:block;background:var(--red);width:7px;height:7px;border-radius:50%}.live-label{font-size:11px;color:#7a7b80;display:flex;gap:6px;align-items:center}.live-label i{width:5px;height:5px;background:#9a9da2;border-radius:50%}.japan-content{display:grid;grid-template-columns:minmax(180px,1fr) minmax(200px,.95fr);gap:22px;align-items:center;flex:1;padding:27px 0}.main-dial-wrap{position:relative;max-width:284px;width:100%;margin:auto}.clock-dial{display:block;width:100%;height:auto;overflow:visible}.main-dial{filter:drop-shadow(0 10px 13px #44464d10)}.clock-rim{fill:#e0e2e5;stroke:#cdd0d4;stroke-width:.7}.clock-face{fill:#f6f7f8;stroke:#fff;stroke-width:1}.main-dial .clock-face{fill:url(#japan-face)}.clock-minute-mark,.studio-clock-minute-mark{stroke:#b3b6bc;stroke-width:1;stroke-linecap:round}.clock-hour-mark,.studio-clock-hour-mark{stroke:#73777d;stroke-width:1.8;stroke-linecap:round}.clock-numerals{fill:#555960;font:500 16px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums}.clock-hour-hand,.clock-minute-hand{stroke:#343638;stroke-linecap:round}.clock-hour-hand{stroke-width:7}.clock-minute-hand{stroke-width:4.6}.clock-second-hand{stroke:var(--red);stroke-width:1.6;stroke-linecap:round}.clock-pin{fill:var(--red)}.clock-pin-center{fill:#fafafa}.japan-details{padding-left:4px}.country-label{color:#87888e;font-weight:600;font-size:9px;letter-spacing:.14em}.japan-details .country-label{color:var(--red);font-size:10px}.japan-details h2{font-size:24px;font-weight:550;letter-spacing:-.045em;margin-top:4px}.japan-details h2>span{color:#95969b;font-size:17px;font-weight:400;letter-spacing:-.04em}.japan-time{display:block;font-size:clamp(30px,3.35vw,46px);line-height:1.2;letter-spacing:-.045em;font-weight:450;font-variant-numeric:tabular-nums;color:var(--red);margin:19px 0 9px;white-space:nowrap}.japan-date{font-size:12px;line-height:1.7;color:#6e7076;max-width:210px}.time-meta{display:flex;gap:10px;align-items:center;color:#96979c;font-size:10px;font-variant-numeric:tabular-nums;margin-top:14px}.time-meta>span+span{padding-left:10px;border-left:1px solid #d8d9dc}.japan-bottom{border-top:1px solid var(--line);padding-top:17px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;color:#888a90}.daypart{padding:3px 8px;background:#e9e9ec;border-radius:20px;color:#71737a;white-space:nowrap}.login-panel{padding:28px 30px 24px;background:#fff;border-radius:22px;border:1px solid #d8d9dc;box-shadow:0 10px 30px #252a3004}.login-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;color:#a5a6aa}.login-panel h2{font-size:29px;line-height:1.2;color:var(--red);font-weight:550;letter-spacing:-.04em;margin-top:13px}.login-intro{color:#84858b;font-size:11px;line-height:1.6;margin-top:7px;margin-bottom:23px}.login-panel label{font-size:11px;font-weight:600;color:#55575d;display:block;margin:15px 0 7px}.login-panel input{display:block;width:100%;padding:12px 14px;height:46px;border:1px solid #d9dade;background:#f9f9fa;color:#6d6f76;font-size:13px;outline-offset:2px}.login-panel input::placeholder{color:#a1a2a7}.password-field{position:relative}.password-field input{padding-right:45px;font-size:15px;letter-spacing:2px}.password-field button{position:absolute;top:2px;right:3px;border:0;background:transparent;width:42px;height:42px;color:#96979e;display:grid;place-items:center}.sign-in{background:var(--red);border:1px solid var(--red);color:white;padding:13px 17px;min-height:47px;width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px;font-weight:550;margin-top:21px;transition:background .15s}.sign-in:hover{background:var(--red-dark);border-color:var(--red-dark)}.sign-in>span{font-size:20px;line-height:1}.preview-help{font-size:10px;color:#93949b;margin-top:9px;text-align:center}.login-footnote{display:flex;gap:10px;align-items:start;margin-top:24px;padding-top:17px;border-top:1px solid #e7e7e9}.small-rule{background:var(--red);width:3px;height:23px;margin-top:2px;flex-shrink:0}.login-footnote p{font-size:10px;line-height:1.6;color:#85868d;max-width:260px}.world-section{margin-top:34px}.world-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.world-heading h2{font-size:17px;font-weight:550;letter-spacing:-.02em}.world-heading p{font-size:10px;color:#85878d}.world-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.world-card{display:grid;grid-template-columns:minmax(0,1fr) 72px;grid-template-rows:auto auto auto auto;column-gap:8px;background:#f9f9fa;border:1px solid #d8d9dd;border-radius:16px;padding:20px 20px 14px;min-width:0}.city-heading{grid-column:1;grid-row:1;align-self:start}.city-heading h3{font-size:18px;font-weight:550;letter-spacing:-.04em;margin-top:5px;white-space:nowrap}.world-dial{grid-column:2;grid-row:1/4;width:72px;align-self:center;justify-self:end}.world-time{grid-column:1;grid-row:2;font-size:28px;line-height:1.2;font-weight:450;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:15px;white-space:nowrap}.world-date{grid-column:1/-1;grid-row:3;color:#878990;font-size:10px;margin-top:5px}.world-meta{grid-column:1/-1;grid-row:4;display:flex;justify-content:space-between;gap:8px;font-size:9px;color:#93959b;border-top:1px solid #e3e4e7;padding-top:11px;margin-top:14px;font-variant-numeric:tabular-nums}.site-footer{max-width:1280px;border-top:1px solid #d6d7da;margin:0 auto;padding:21px 0 28px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#93959b}.site-footer strong{font-weight:600;color:#73757b}.footer-divider{padding:0 8px;color:#c1c2c6}dialog{border:1px solid #d9dadd;border-radius:20px;background:#fff;color:var(--ink);padding:30px;max-width:460px;width:calc(100% - 32px);box-shadow:0 25px 90px #1c1f3540}dialog::backdrop{background:#34343e66;backdrop-filter:blur(4px)}dialog h2{font-size:25px;font-weight:500;line-height:1.3;letter-spacing:-.035em;margin-top:12px;color:var(--red)}dialog p{font-size:14px;color:#767780;line-height:1.65;margin-top:16px}.dialog-actions a{display:block;margin-top:18px;text-align:center;font-size:12px;color:var(--red);text-underline-offset:4px}.dialog-actions .sign-in{justify-content:center}
@media(min-width:1600px){.page{padding-top:60px;padding-bottom:48px}.japan-content{padding:34px 0}.login-panel{padding:32px 36px}.main-dial-wrap{max-width:300px}}
@media(max-width:1190px){.page{padding:38px 32px}.welcome-grid{grid-template-columns:minmax(0,1.45fr) minmax(310px,1fr)}.japan-panel{padding:24px}.japan-content{grid-template-columns:minmax(150px,1fr) minmax(176px,1fr);gap:15px}.japan-details h2{font-size:22px}.japan-details h2>span{font-size:14px}.japan-time{font-size:36px}.world-card{padding:17px 15px 13px;grid-template-columns:minmax(0,1fr) 59px}.world-dial{width:59px}.city-heading h3{font-size:17px}.country-label{font-size:8px}.world-time{font-size:25px}.site-footer{margin:0 32px}}
@media(max-width:950px){.welcome-grid{grid-template-columns:minmax(0,1.25fr) minmax(295px,1fr);gap:18px}.japan-content{grid-template-columns:1fr;gap:20px;padding:22px 0}.main-dial-wrap{max-width:204px}.japan-details{text-align:center;padding:0}.japan-details h2{font-size:22px}.japan-time{font-size:35px;margin:10px 0 5px}.japan-date{max-width:none}.time-meta{justify-content:center;margin-top:7px}.japan-bottom{font-size:9px}.login-panel{align-self:center}.world-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.world-card{grid-template-columns:minmax(0,1fr) 82px;padding:20px}.world-dial{width:82px}.country-label{font-size:9px}.city-heading h3{font-size:19px}.world-time{font-size:29px}.login-panel{padding:27px 25px}}
@media(max-width:670px){.site-header{min-height:86px;padding:17px 21px;gap:14px}.brand{gap:11px}.brand-mark{width:47px;height:47px;font-size:16px}.brand-wordmark{font-size:18px}.brand-wordmark>span{font-size:7px;letter-spacing:.12em}.header-right{gap:0}.portal-label{display:none}.preview-label{font-size:9px;padding:4px 6px}.page{padding:30px 20px}.intro{margin-bottom:24px;display:block}.intro .eyebrow{font-size:8px}h1{font-size:34px;line-height:1.1;max-width:300px;margin-top:11px}.intro-note{display:none}.welcome-grid{grid-template-columns:1fr;gap:20px}.japan-panel{padding:20px 22px 17px;border-radius:20px}.japan-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:17px;padding:27px 0}.main-dial-wrap{max-width:180px}.japan-details{text-align:left}.japan-details h2{font-size:19px;line-height:1.3}.japan-details h2>span{display:block;font-size:12px}.japan-time{font-size:28px;margin-top:12px;letter-spacing:-.05em}.japan-date{font-size:10px;line-height:1.6}.japan-details .country-label{font-size:8px}.time-meta{justify-content:flex-start;font-size:8px;gap:7px;margin-top:9px}.time-meta>span+span{padding-left:7px}.japan-bottom{font-size:9px;line-height:1.4}.panel-top .eyebrow{font-size:8px}.live-label{font-size:10px}.login-panel{padding:25px 25px 21px;border-radius:20px}.login-panel h2{font-size:29px}.login-intro{font-size:12px;margin-bottom:23px}.login-panel label{font-size:12px}.login-panel input{font-size:16px;height:48px}.login-panel .password-field input{font-size:15px}.password-field button{height:44px}.sign-in{font-size:14px;min-height:49px}.preview-help{font-size:10px}.login-footnote{margin-top:21px;padding-top:15px}.login-footnote p{font-size:11px;max-width:270px}.world-section{margin-top:29px}.world-heading{margin-bottom:15px}.world-heading h2{font-size:18px}.world-heading p{font-size:10px}.world-grid{gap:12px}.world-card{grid-template-columns:minmax(0,1fr);padding:17px 17px 13px;position:relative}.city-heading{grid-column:1;grid-row:1}.country-label{font-size:8px;letter-spacing:.1em}.city-heading h3{font-size:19px}.world-dial{grid-column:1;grid-row:2;width:81px;justify-self:start;margin-top:17px}.world-time{grid-column:1;grid-row:3;font-size:29px;margin-top:15px}.world-date{grid-column:1;grid-row:4;font-size:10px;margin-top:5px;line-height:1.5;max-width:130px}.world-meta{grid-column:1;grid-row:5;font-size:8px;margin-top:12px;padding-top:10px;gap:5px;flex-wrap:wrap}.site-footer{margin:0 20px;padding:21px 0 25px;font-size:9px;flex-direction:column;gap:8px}.clock-second-hand{stroke-width:1.8}}
@media(max-width:360px){.brand-wordmark{font-size:16px}.preview-label{font-size:8px}.page{padding-inline:15px}.japan-panel{padding-inline:18px}.japan-content{gap:12px}.japan-time{font-size:25px}.world-card{padding-inline:13px}.city-heading h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}.clock-second-hand{display:none}}
.clock-mark{stroke:#b3b6bc}.clock-mark-major{stroke:#73777d}.clock-numeral{fill:#555960;font-size:16px}
.country-label,.live-label,.intro-note,.japan-date,.time-meta,.japan-bottom,.daypart,.login-intro,.preview-help,.login-footnote p,.world-heading p,.world-date,.world-meta,.site-footer{color:#686a70}
.login-panel label{font-size:13px}.login-intro{font-size:13px}.login-footnote p{font-size:12px}.preview-help{font-size:11px}.japan-bottom{font-size:11px}.time-meta{font-size:11px}.world-date{font-size:11px}.world-meta{font-size:10px}.world-heading p{font-size:11px}.site-footer{font-size:11px}.world-dial{width:88px}.world-card{grid-template-columns:minmax(0,1fr) 88px}
@media(max-width:1190px) and (min-width:951px){.world-dial{width:64px}.world-card{grid-template-columns:minmax(0,1fr) 64px}}
@media(max-width:670px){.japan-bottom{font-size:10px}.time-meta{font-size:9px}.world-card{grid-template-columns:minmax(0,1fr)}.world-dial{width:81px}.world-time{font-size:32px}.world-meta{font-size:9px}.japan-date{font-size:11px}}
@media(max-width:360px){.header-right{display:none}.japan-bottom{font-size:9px}}

/* Live login keeps native form submission and clear, accessible feedback. */
[hidden]{display:none!important}.login-help{font-size:11px;color:#686a70;margin-top:12px;line-height:1.65;text-align:center}.login-message{font-size:13px;line-height:1.5;border-left:3px solid var(--red);background:#f4f4f5;padding:12px;margin-top:16px;color:#4c4e54}.login-message ul{padding-left:18px;margin:6px 0 0}.login-error{color:#861b20;background:#fff4f4}.login-panel input[aria-invalid="true"]{border-color:var(--red)}.demo-banner{padding:10px 20px;background:#fff2cf;text-align:center;font-size:13px}html:not([data-clocks-ready]) .clock-dial,html:not([data-clocks-ready]) .live-label{visibility:hidden}@media(max-width:670px){.login-panel .password-field input{font-size:16px}.login-help{font-size:11px}}
/* Sign-in modes change the page labels only; account permissions remain server-controlled. */
.sign-in-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;margin:20px 0 18px;border:1px solid #d9dade;border-radius:11px;background:#f0f0f2}.sign-in-modes a{min-height:44px;display:flex;align-items:center;justify-content:center;padding:9px 8px;border:1px solid transparent;border-radius:7px;text-decoration:none;text-align:center;font-size:13px;font-weight:600;line-height:1.3;color:#595c63}.sign-in-modes a:hover{background:#e2e3e6;color:#3f4248}.sign-in-modes a[aria-current="page"]{background:var(--red);border-color:var(--red);color:#fff}.sign-in-modes a[aria-current="page"]:hover{background:var(--red-dark);border-color:var(--red-dark)}.sign-in-modes+h2{margin-top:0}
/* The wrapper has no layout box on phones and tablets. */
.welcome-stage{display:contents}.world-discover{display:none}
@media(min-width:1024px){
  html{scroll-behavior:smooth;scroll-padding-top:24px}
  .site-header{min-height:80px;padding-block:14px}.brand-mark{width:50px;height:50px;font-size:18px}
  .page{padding-top:20px}
  .welcome-stage{display:flex;flex-direction:column;justify-content:center;gap:22px;min-height:calc(100vh - 104px);min-height:calc(100svh - 104px)}
  .welcome-stage>.intro{margin-bottom:0;width:100%}.welcome-stage>.welcome-grid{width:100%}
  .welcome-stage h1{font-size:clamp(34px,3vw,45px);line-height:1.1;margin-top:10px}
  .welcome-stage .login-panel{padding:22px 26px 18px}
  .welcome-stage .sign-in-modes{margin-top:14px;margin-bottom:12px}
  .welcome-stage .login-panel h2{font-size:26px}
  .welcome-stage .login-intro{margin-bottom:16px}
  .welcome-stage .login-panel label{margin-top:11px;margin-bottom:5px}
  .welcome-stage .sign-in{margin-top:14px}
  .welcome-stage .login-footnote{margin-top:16px;padding-top:12px}
  .world-discover{display:inline-flex;align-self:center;align-items:center;justify-content:center;gap:12px;min-height:32px;padding:4px 12px;color:#686a70;text-decoration:none;font-size:12px;font-weight:500;letter-spacing:.02em;border-radius:20px}
  .world-discover span{font-size:18px;line-height:1}.world-discover:hover{background:#e2e3e5;color:var(--red)}
  .world-section{scroll-margin-top:24px;margin-top:34px}
}
@media(min-width:1024px) and (max-height:850px){
  .site-header{min-height:68px;padding-block:9px}.brand-mark{width:48px;height:48px;font-size:17px}.brand-wordmark{font-size:21px}
  .page{padding-top:14px}
  .welcome-stage{gap:10px;min-height:calc(100vh - 86px);min-height:calc(100svh - 86px)}
  .welcome-stage h1{font-size:32px;line-height:1.1;margin-top:6px}.welcome-stage .intro .eyebrow{font-size:9px}.welcome-stage .intro-note{font-size:12px}
  .welcome-stage .login-panel{padding:16px 24px 14px}.welcome-stage .login-heading{display:flex}.welcome-stage .login-intro{display:block;font-size:12px;line-height:1.4;margin-top:4px;margin-bottom:6px}
  .welcome-stage .sign-in-modes{padding:3px;margin-top:0;margin-bottom:10px}.welcome-stage .sign-in-modes a{min-height:40px;padding-block:7px}
  .welcome-stage .login-panel h2{font-size:24px;line-height:1.2}
  .welcome-stage .login-panel label{font-size:12px;line-height:1.5;margin-top:7px;margin-bottom:4px}
  .welcome-stage .login-panel input{height:40px;padding-block:9px}.welcome-stage .password-field button{height:36px}
  .welcome-stage .sign-in{min-height:42px;padding-block:10px;margin-top:10px}
  .welcome-stage .login-help{font-size:11px;line-height:1.45;margin-top:8px}
  .welcome-stage .login-footnote{margin-top:10px;padding-top:8px}.welcome-stage .login-footnote p{font-size:11px;line-height:1.45;max-width:none}.welcome-stage .small-rule{height:21px}
  .welcome-stage .japan-panel{padding:22px 26px 18px}.welcome-stage .japan-content{padding-block:20px}.welcome-stage .main-dial-wrap{max-width:252px}
  .welcome-stage .japan-bottom{padding-top:13px}.world-discover{min-height:28px;padding-block:2px;font-size:11px}
}
@media(min-width:1024px) and (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Center only the world-time analog dials on the existing phone layout. */
@media(max-width:670px){.world-card .world-dial{justify-self:center}}

/* On phones each world-time card reads as one centered composition. */
@media(max-width:670px){
  .world-card{justify-items:center;text-align:center;padding-top:20px;padding-bottom:16px}
  .world-card .city-heading{width:100%;min-width:0}
  .world-card .city-heading h3{font-size:clamp(18px,4.4vw,20px)}
  .world-card .world-dial{justify-self:center;width:clamp(80px,22vw,104px);margin-top:18px}
  .world-card .world-time{margin-top:14px}
  .world-card .world-date{max-width:none;justify-self:center;margin-top:4px}
  .world-card .world-meta{justify-self:stretch;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1.4;margin-top:13px;padding-top:10px}
}

/* Give the main JAPAN label a similar visual width to Kyoto at each layout. */
.japan-details .country-label{font-size:17.1px;font-weight:650;letter-spacing:.055em;line-height:1.25}
@media(max-width:1190px){.japan-details .country-label{font-size:15.8px}}
@media(max-width:670px){.japan-details .country-label{font-size:13.6px}}

/* A quieter JAPAN label with a closer city heading on phones. */
@media(max-width:670px){
  .japan-details .country-label{font-size:12px;font-weight:600;line-height:1.15}
  .japan-details h2{margin-top:1px}
}

/* Use the studio red for country names in every World time card. */
.world-card .country-label{color:var(--red)}

/* A flat square face belongs only to the main desktop Japan clock. */
.desktop-square-face{display:none}
@media(min-width:1024px){
  .main-dial{filter:none}
  .main-dial>.clock-rim,.main-dial>.clock-face,.main-dial>[data-clock-marks],.main-dial>[data-clock-numerals]{display:none}
  .main-dial>.desktop-square-face{display:block}
  .square-face{fill:#fdfdfd;stroke:#d9dbde;stroke-width:.9}
  .square-minute-mark{stroke:#b9bbbf;stroke-width:1.15;stroke-linecap:round}
  .square-hour-mark{stroke:#54575c;stroke-width:1.7;stroke-linecap:round}
  .square-numeral{fill:#34363a;font:550 22px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-1px}
  .welcome-stage .japan-content{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:28px}
  .welcome-stage .main-dial-wrap{max-width:320px}
  .welcome-stage .japan-details{padding-left:0}
}
@media(min-width:1024px) and (max-height:850px){
  .welcome-stage .main-dial-wrap{max-width:282px}
  .welcome-stage .japan-content{gap:24px}
}
/* Quiet, circular world faces: local daytime is light and local nighttime dark. */
.world-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.world-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 14px 16px;background:#f9f9fa;min-width:0}
.world-card .world-dial{order:0;align-self:center;justify-self:center;width:min(100%,132px);margin:0 auto 17px;filter:none}
.world-card .city-heading{order:1;width:100%;min-width:0}
.world-card .city-heading h3{font-size:18px;line-height:1.3;margin-top:5px;white-space:nowrap}
.world-card .country-label{color:var(--red);font-size:8px;line-height:1.4;letter-spacing:.1em}
.world-card .world-time{order:2;font-size:28px;margin-top:12px;line-height:1.2}
.world-card .world-date{order:3;font-size:11px;line-height:1.5;margin-top:4px;max-width:none}
.world-card .world-meta{order:4;align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;line-height:1.4;margin-top:14px;padding-top:11px}
.world-card .clock-rim{fill:#e6e7e9;stroke:none}
.world-card .clock-face{fill:#fff;stroke:none}
.world-card .clock-numeral{fill:#303238;font-size:19px;font-weight:550}
.world-card .clock-hour-hand{stroke-width:5.1}
.world-card .clock-minute-hand{stroke-width:3.7}
.world-card .clock-second-hand{stroke-width:1.4}
.world-card[data-clock-phase="night"] .clock-rim{fill:#34353a}
.world-card[data-clock-phase="night"] .clock-face{fill:#34353a}
.world-card[data-clock-phase="night"] .clock-numeral{fill:#fafafa}
.world-card[data-clock-phase="night"] .clock-hour-hand,.world-card[data-clock-phase="night"] .clock-minute-hand{stroke:#fafafa}
.world-card[data-clock-phase="night"] .clock-second-hand{stroke:#e9767a}
.world-card[data-clock-phase="night"] .clock-pin{fill:#e9767a}
.world-card[data-clock-phase="night"] .clock-pin-center{fill:#34353a}
.world-card--extra,.world-card--wide{display:none}
@media(min-width:1024px){
  .world-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .world-card--extra{display:flex}
  .world-card .world-dial{width:min(100%,124px)}
  .world-card .city-heading h3{font-size:17px}
  .world-card .world-time{font-size:26px}
}
@media(min-width:1600px){
  .world-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .world-card--wide{display:flex}
  .world-card{padding-inline:12px}
  .world-card .city-heading h3{font-size:16px}
  .world-card .world-dial{width:min(100%,116px)}
  .world-card .world-time{font-size:25px}
}
@media(max-width:670px){
  .world-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .world-card{padding:20px 13px 16px}
  .world-card .world-dial{width:clamp(92px,25vw,120px);margin-bottom:15px}
  .world-card .city-heading h3{font-size:clamp(17px,4.4vw,20px)}
  .world-card .world-time{font-size:30px;margin-top:12px}
  .world-card .world-meta{font-size:9px}
}

/* Five desktop cities share one compact frame, like a world-clock widget. */
.world-section{max-width:1000px;margin-inline:auto}
.world-heading{padding-inline:3px}
.world-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:24px 16px 20px;background:#f9f9fa;border:1px solid #d5d7da;border-radius:28px}
.world-card{padding:0 8px;border:0;border-radius:0;background:transparent;box-shadow:none}
.world-card .world-dial{width:min(100%,112px);margin:0 auto 12px}
.world-card .city-heading h3{font-size:17px;margin-top:3px}
.world-card .country-label{font-size:8px}
.world-card .world-time{font-size:24px;margin-top:9px}
.world-card .world-date{font-size:10.5px;margin-top:3px}
.world-card .world-meta{border:0;padding:0;margin-top:9px;flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:8px;row-gap:2px;font-size:9px}
@media(min-width:1024px){
  .world-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
}
@media(max-width:670px){
  .world-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:22px 10px 20px;column-gap:0;row-gap:25px;border-radius:24px}
  .world-card{padding-inline:6px}
  .world-card .world-dial{width:clamp(92px,25vw,112px);margin-bottom:12px}
  .world-card .city-heading h3{font-size:18px}
  .world-card .world-time{font-size:26px}
  .world-card .world-meta{flex-direction:column;gap:2px}
}

/* Align the shared world-clock frame with both main desktop panels above. */
@media(min-width:1024px){
  .world-section{max-width:none;width:100%;margin-inline:0}
  .world-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(min-width:1600px){
  .world-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
}