:root{color-scheme:light;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;background:#fff;color:#111}
*{box-sizing:border-box}
body{margin:0;background:#fff}
.watch{width:100%;max-width:440px;margin:auto;text-align:center}
.watch-screen{height:100vh;height:100svh;min-height:200px;max-height:440px;display:grid;grid-template-rows:16% 58% 26%;padding:0 10%}
.watch-heading{align-self:end}
h1{font-size:clamp(16px,8vw,28px);line-height:1.15;font-weight:700;margin:0}
.watch-now{margin:0 0 12px;font-size:13px;color:#59636e}
#day-label{margin-left:5px}
.trip{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:1px}
.route-label{display:flex;align-items:center;gap:5px;margin:0;font-size:clamp(16px,7.5vw,26px);line-height:1.1;font-weight:700;max-width:100%}
.route-label::before{content:"";display:block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--route-color);border:1px solid var(--route-border,var(--route-color))}
[data-route="taka"]{--route-color:#111;--route-border:#111}
[data-route="joto"]{--route-color:#d81424}
[data-route="kuwa"]{--route-color:#005bbb}
.time-label{margin:0;color:#59636e;font-size:clamp(10px,4.5vw,14px);line-height:1.1}
.departure-time{font-size:clamp(48px,26vw,108px);font-weight:750;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.countdown{margin:0;font-size:clamp(12px,6vw,20px);line-height:1.25;color:#087b45;font-weight:650}
.boarding{margin:0;font-size:clamp(15px,7vw,24px);line-height:1.15}
.boarding-detail{margin:0;color:#59636e;font-size:clamp(10px,4.5vw,14px);line-height:1.1}
.watch-controls{align-self:start;padding:0}
button,.watch-footer a{border:0;border-radius:999px;background:#e8edf2;color:#111;font:inherit;font-size:clamp(11px,5vw,16px);font-weight:650;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 16px;cursor:pointer;touch-action:manipulation}
button{max-width:100%}
button:focus-visible,a:focus-visible{outline:2px solid #087b45;outline-offset:2px}
.following-screen{padding:18px 15% 12px}
h2{margin:0 0 14px;font-size:14px;color:#59636e;font-weight:500}
.following-trip{padding:12px 0;border-bottom:1px solid #dde2e7}
.following-trip .departure-time{font-size:36px;line-height:1.15}
.following-trip .route-label{font-size:16px}
.following-trip .boarding,.following-trip .countdown{font-size:16px}
.following-trip .boarding-detail,.following-trip .time-label{font-size:12px}
.watch-footer{padding:16px 17% 22%;font-size:11px;color:#59636e;line-height:1.6}
.watch-footer p{margin:0 0 12px}
.watch-footer a{display:flex;margin:10px 0;font-size:12px;min-height:40px}
.message{font-size:13px;line-height:1.5;margin:0}
@media(min-width:500px){.watch-screen{margin-top:20px}}
@media(max-height:230px){.trip{gap:0}.time-label{font-size:10px}.boarding-detail{font-size:10px}.watch-controls{padding-top:2px}button{min-height:30px;padding:5px 12px}}

/* Keep the direction control comfortably inside the round display. */
.watch-screen .trip{gap:0}
.watch-screen .route-label,.watch-screen .time-label,
.watch-screen .countdown,.watch-screen .boarding,
.watch-screen .boarding-detail{line-height:1}
.watch-screen .departure-time{line-height:.9}
.watch-controls button{
  width:min(70vw,240px);
  min-height:44px;
  padding:8px 14px;
  font-size:clamp(14px,6vw,22px);
  line-height:1.15
}
@media(max-height:230px){
  .watch-controls{padding:0}
  .watch-controls button{min-height:36px;padding:7px 12px}
}