@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{--cream:#f5eedb;--paper:#fffdf6;--green:#00734f;--ink:#173b2b;--red:#c8102e;--blue:#1a2b6b;--muted:#747a68}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d47d35;outline-offset:6px}button{color:inherit}h1,h2,h3,p{margin-top:0}h1,h2{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.055em;line-height:1.04}h1{font-size:clamp(52px,6vw,92px)}h2{font-size:clamp(36px,4vw,60px)}em{font-weight:500}p{line-height:1.65}header{height:108px;max-width:1440px;margin:auto;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #173b2b25}.brand{display:flex;align-items:center;gap:12px;font-size:10px;font-weight:700;letter-spacing:1.7px;line-height:1.4}.brand-icon{display:inline-grid;place-items:center;border:1px solid currentColor;width:47px;height:43px;border-radius:9px 9px 4px 4px;font-size:21px;letter-spacing:0;background:var(--green);color:var(--cream)}nav{display:flex;align-items:center;gap:32px;font-size:12px}nav>a:not(.download){border-bottom:1px solid currentColor;padding-bottom:4px}.download{background:var(--green);color:var(--paper);border:0;border-radius:5px;padding:16px 23px;display:inline-flex;align-items:center;gap:22px;text-align:left;font-size:17px;font-weight:600;transition:transform .2s,background .2s}.download:hover{transform:translateY(-3px);background:#005f41}.download small{display:block;font-size:10px;font-weight:400;letter-spacing:.3px}.download.small{padding:12px 19px;font-size:12px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;line-height:1.6}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 0 4px #00734f10}.hero-actions{display:flex;gap:26px;align-items:center}.hero-actions>a:not(.download){font-size:12px}.platform-note{display:block;font-size:8px;letter-spacing:1.7px;margin-top:15px;color:#7c816e}.apple{width:22px;height:22px;flex-shrink:0}.note-icon{width:12px;height:12px;vertical-align:-2px;margin-right:4px}.text-button{border:0;background:none;font-size:11px;padding:12px 0}.sky-type{position:absolute;right:30px;top:-30px;font-size:210px;line-height:1;color:#bec9ad55;letter-spacing:10px;z-index:-1}.bus-art{position:relative;max-width:1050px;margin:auto}.bus-art svg{width:100%;display:block}.arrival-plate{background:var(--paper);border:1px solid #e4dcc4;border-radius:6px;padding:18px 20px;box-shadow:0 4px 12px #1c1f1b0c;color:var(--blue)}.arrival-plate>div{display:flex;gap:20px;align-items:center}.arrival-plate b{color:var(--red);font-size:52px;letter-spacing:-3px}.arrival-plate>div>span{font-size:8px;line-height:1.8;flex:1}.arrival-plate strong:not(.minutes){font-size:17px;line-height:1.15}.arrival-plate small{display:block;font-size:10px}.arrival-plate .minutes{font-size:42px;line-height:1;text-align:center;color:var(--green)}.minutes small{font-size:8px;letter-spacing:2px;margin-top:5px}.arrival-plate>div+div{margin-top:10px}.arrival-plate .estimate{margin-inline:-8px;padding:6px 8px;border:1.5px dashed #c9bc9e;border-radius:4px}.arrival-plate .estimate .minutes{color:var(--muted)}.estimate-mark{display:inline-block;width:10px;height:7px;border:1px dashed;border-radius:2px;margin-right:7px}.arrival-plate p{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #e4dcc4;margin:12px 0 0;padding-top:9px;font-size:9px!important;color:#8a8167!important}footer{border-top:1px solid #74856b40;margin:0 6%;padding:25px 0;display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:.5px}[data-theme=dark] .sky-type{color:#82937020}[data-theme=dark] .bus-art svg{filter:drop-shadow(0 0 18px #f7e1a324)}#route-door{transition:transform .4s}
.neon{position:absolute;border:2px solid #be895c;color:#e4b986;box-shadow:0 0 12px #dca26344,inset 0 0 10px #dca26333;text-shadow:0 0 12px #dfad70;font-family:serif;padding:12px;line-height:1.2}.road{position:absolute;bottom:0;left:0;width:100%;height:140px;background:linear-gradient(#0a1714,#1d3028);border-top:8px solid #435345;transform:skewY(-2deg)}input[type=range]{width:85px;accent-color:#c7d5b3;cursor:pointer}
/* Shared UI */
.skip{position:fixed;top:-60px;left:20px;z-index:20;background:var(--paper);color:#173b2b;padding:15px}.skip:focus{top:10px}dialog{border:1px solid #b3bea1;border-radius:12px;background:var(--cream);color:#173b2b;width:min(440px,90vw);padding:40px;box-shadow:0 20px 100px #0005}dialog::backdrop{background:#071b13aa;backdrop-filter:blur(5px)}dialog h2{font-size:38px;margin:25px 0 20px}dialog p{font-size:14px;color:#687360}.dialog-close{position:absolute;right:15px;top:10px;border:0;background:none;font-size:28px}.stops-dialog{width:min(420px,94vw);padding:28px 20px 24px}.stops-dialog h2{margin:0 0 8px}.stops-dialog h3{margin:18px 0 8px;font-size:13px;color:var(--street-accent)}.stops-dialog h3 small{margin-left:4px;font-size:10px;letter-spacing:1px;color:var(--street-muted)}.stops-dialog .arrival-plate{padding:12px 16px}.stops-dialog .arrival-plate b{min-width:52px;text-align:center;font-size:30px;letter-spacing:-1.5px}.stops-dialog .arrival-plate strong:not(.minutes){font-size:15px}.stops-dialog .arrival-plate .minutes{font-size:26px}.plate-key{display:flex;gap:18px;font-size:10px;color:var(--street-muted)}[hidden]{display:none!important}
@media(max-width:900px){header{padding:0 5%;height:90px}}
@media(max-width:600px){header{height:82px}.brand{font-size:8px;letter-spacing:1px;gap:8px}.brand-icon{width:39px;height:36px;font-size:18px}nav{gap:12px}nav>a:not(.download){font-size:9px;max-width:91px;line-height:1.6}nav .download.small{font-size:10px;padding:11px}.eyebrow{font-size:8px;letter-spacing:1.4px}.hero-actions{gap:18px}.download{padding:13px 18px;font-size:15px;gap:18px}.hero-actions>a:not(.download){font-size:10px}.text-button{font-size:9px}.bus-art{width:115%;margin-left:-7%}.sky-type{font-size:130px;top:-8px}.arrival-plate{padding:14px}.arrival-plate>div{gap:14px}.arrival-plate b{font-size:43px}.arrival-plate strong:not(.minutes){font-size:15px}footer{flex-wrap:wrap;font-size:8px;gap:18px}footer>span{order:3;flex-basis:100%}footer>a:last-child{margin-left:auto}input[type=range]{width:68px}}
/* Evening changes the street, while cream acrylic and painted bus colours
   remain physical materials. Keep these roles separate from --green/--cream. */
.day-page {
  --street: #f5eedb;
  --street-ink: #173b2b;
  --street-muted: #687360;
  --street-accent: #00734f;
  --street-edge: #173b2b30;
  --neighbourhood: #e9e7d2;
  background-color: var(--street);
  color: var(--street-ink);
}
[data-theme=dark] .day-page {
  --street: #0d1914;
  --street-ink: #f0ead8;
  --street-muted: #afbaa9;
  --street-accent: #9bd1b0;
  --street-edge: #afc3a638;
  --neighbourhood: #182a20;
}
.day-page,
.day-page :where(header, footer, section, p, span, h1, h2, em, article, button, a, dialog, .arrival-plate) {
  transition: background-color .45s ease, color .45s ease,
    border-color .45s ease, outline-color .45s ease, box-shadow .45s ease;
}
.day-page :is(header, footer) {
  border-color: var(--street-edge);
}
.day-page .platform-note {
  color: var(--street-muted);
}
[data-theme=dark] .day-page .status-dot {
  background: #9bd1b0;
  box-shadow: 0 0 0 4px #9bd1b014, 0 0 12px #9bd1b040;
}
[data-theme=dark] .day-page .brand-icon {
  background: #004c35;
  color: #f7ebd2;
  border-color: #9bd1b070;
}
[data-theme=dark] .day-page .download {
  background-color: #c8dfbb;
  color: #153b28;
  box-shadow: 0 3px 18px #b9d4980a;
}
[data-theme=dark] .day-page .download:hover{ background-color: #e0edce; }
[data-theme=dark] .day-page .bus-stage {
  background: radial-gradient(ellipse at 55% 70%, #31402a 0, #192b20 48%, #122219 100%);
}
[data-theme=dark] .day-page .street-line {
  background: repeating-linear-gradient(90deg, transparent 0 40px, #8b9573 40px 105px);
}
[data-theme=dark] .day-page .sky-type{ color: #aec49d12; }
[data-theme=dark] .day-page .arrival-plate {
  background-color: #f7ebd2;
  border-color: #c3b58e;
  box-shadow: 0 0 26px #ffd9a018, 0 4px 12px #0003;
}
[data-theme=dark] .day-page .arrival-plate p {
  color: #6b624e !important;
  border-color: #c9bc9e;
}
[data-theme=dark] .day-page dialog {
  background-color: #1b2d23;
  color: var(--street-ink);
  border-color: #68816b;
}
[data-theme=dark] .day-page dialog p{ color: var(--street-muted); }
[data-theme=dark] .day-page :is(button, a):focus-visible {
  outline-color: #efc28b;
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* The route: vertical scroll drives the bus horizontally through the districts */
.route-page{--far:color-mix(in oklch,var(--street-ink) 12%,var(--street));--mid:color-mix(in oklch,var(--street-ink) 30%,var(--street));--near:color-mix(in oklch,var(--street-ink) 55%,var(--street));--road:#d9d6bd;overflow-x:hidden}
[data-theme=dark] .route-page{--far:#14261c;--mid:#233d2e;--near:#3a5643;--road:#1a2a20}
.landmarks .far{fill:var(--far)}.landmarks .mid{fill:var(--mid)}.landmarks .near{fill:var(--near);color:var(--near)}.landmarks .shade{fill:color-mix(in oklch,var(--near),#000 15%)}
.window{fill:var(--street);opacity:.35}.neon rect{fill:var(--red)}.neon text{fill:var(--street)}
[data-theme=dark] .route-page .window{fill:#f4d468;opacity:.6}
/* Night-only architectural lights. Slow colour cycles suggest the real installations. */
.route-page .night-light{display:none}
[data-theme=dark] .route-page .night-light{display:inline;stroke:none}
[data-theme=dark] .route-page .night-windows{fill:url(#night-win)}
[data-theme=dark] .route-page .night-grid{fill:url(#night-led)}
[data-theme=dark] .route-page .night-edge{fill:none;stroke:#dce9ec;stroke-width:1.2;opacity:.8;filter:drop-shadow(0 0 2px #dce9ec55)}
[data-theme=dark] .route-page .night-warm{stroke:#e8cf91}
[data-theme=dark] .route-page .hsbc-frame{stroke:#e5e5d7;filter:drop-shadow(0 0 2px #e8cf9155)}
[data-theme=dark] .route-page .night-colour{color:#da91b7;animation:skyline-colour 96s ease-in-out infinite;filter:drop-shadow(0 0 2px currentColor)}
[data-theme=dark] .route-page .night-edge.night-colour{stroke:currentColor}
[data-theme=dark] .route-page .hsbc-bands{fill:currentColor;opacity:.42}
[data-theme=dark] .route-page .hsbc-light{color:#89ccc7;stroke-width:2;opacity:.8;animation-delay:-32s}
[data-theme=dark] .route-page .hsbc-roof{stroke:#fff0e5;opacity:.95}
[data-theme=dark] .route-page :is(.boc-frame,.boc-edge,.boc-facet){stroke:#fff;stroke-width:.9;opacity:1;filter:drop-shadow(0 0 1.6px #ffffffaa)}
[data-theme=dark] .route-page .boc-windows{opacity:.18}
.route-page .boc-mast{fill:var(--near)}.route-page .boc-mast-side{fill:var(--mid)}
[data-theme=dark] .route-page .boc-left{fill:#263d32}
[data-theme=dark] .route-page .boc-dim{opacity:.6}
[data-theme=dark] .route-page .boc-windows.boc-dim{opacity:.1}
[data-theme=dark] .route-page .boc-mast{fill:#67796e}
[data-theme=dark] .route-page .boc-mast-side{fill:#43594d}
[data-theme=dark] .route-page .boc-beacon{fill:#d18b84}
[data-theme=dark] .route-page :is(.observation-rim,.observation-spokes){stroke:#e5ece7;filter:drop-shadow(0 0 2px #e5ece755)}
[data-theme=dark] .route-page .observation-rim{stroke-width:1.5;opacity:.7}
[data-theme=dark] .route-page .observation-spokes{opacity:.5}
[data-theme=dark] .route-page .henderson-edge{stroke:#d5e6ed;stroke-width:.7;opacity:.25}
[data-theme=dark] .route-page .henderson-shimmer{stroke:#e1eff5;stroke-width:1.1;stroke-dasharray:4 16;opacity:.45;animation:henderson-flow 60s linear infinite}
[data-theme=dark] .route-page .henderson-bands{stroke:#d5e6ed;stroke-width:1.5;opacity:.18}
[data-theme=dark] .route-page .lippo-windows{opacity:.7}
@keyframes henderson-flow{0%{stroke-dashoffset:0;opacity:.35}65%{stroke-dashoffset:-100;opacity:.55}75%,100%{stroke-dashoffset:-100;opacity:.25}}

[data-theme=dark] .route-page .ifc-crown{stroke:#f5ead7;opacity:.95;filter:drop-shadow(0 0 2.5px #f5ead780)}
[data-theme=dark] .route-page .ck-face{fill:#111d1c}
[data-theme=dark] .route-page .ck-mullions{stroke:#293c36}
[data-theme=dark] .route-page .ck-stars{fill:#e0e7ee;opacity:.65}
[data-theme=dark] .route-page .ck-sparkle{fill:currentColor;color:#8fcfc6;animation:skyline-colour 120s ease-in-out -40s infinite,skyline-sparkle 18s ease-in-out infinite alternate}
[data-theme=dark] .route-page .aia-lantern{fill:#e3e6cb;opacity:.22;filter:drop-shadow(0 0 3px #e3e6cb55)}
[data-theme=dark] .route-page .aia-struts{color:#92ccc6;stroke-width:.7;opacity:.5;animation-delay:-40s}
[data-theme=dark] .route-page .aia-screen{fill:currentColor;opacity:.75;animation-delay:-64s}
[data-theme=dark] .route-page .plaza-crown{color:#97cbb6;stroke-width:1.6;animation-duration:180s;animation-delay:-60s}
[data-theme=dark] .route-page .plaza-spire{color:#dab48d;animation:skyline-colour 180s ease-in-out infinite,skyline-sparkle 24s ease-in-out infinite alternate}
[data-theme=dark] .route-page .hopewell-ribs{color:#9ac8df;stroke-width:.7;opacity:.45;animation-delay:-48s}
[data-theme=dark] .route-page .hopewell-crown{color:#9ac8df;animation-delay:-48s}
/* The Center: closer neon bars at the crown, with staggered spectrum colours. */
[data-theme=dark] .route-page #the-center .night-colour{animation-name:center-spectrum;animation-duration:120s}
[data-theme=dark] .route-page .center-bars{stroke-width:.8;opacity:.55}
[data-theme=dark] .route-page .center-upper{color:#db9bcb;animation-delay:-80s}
[data-theme=dark] .route-page .center-middle{color:#91cbd4;animation-delay:-40s}
[data-theme=dark] .route-page .center-lower{color:#e1b28b}
[data-theme=dark] .route-page .center-chevrons{color:#b9b0e6;stroke:currentColor;stroke-width:1.2;opacity:.85;animation-delay:-60s}
@keyframes center-spectrum{0%,100%{color:#df939f}17%{color:#e1b28b}33%{color:#d6d08b}50%{color:#94cba5}67%{color:#91bfe1}83%{color:#c49cdd}}
@keyframes skyline-colour{0%,100%{color:#da91b7}33%{color:#89ccc7}66%{color:#b5a0df}}
@keyframes skyline-sparkle{from{opacity:.4}to{opacity:.85}}
[data-theme=dark] .route-page :is(.jardine-window,.hku-clock,.hku-arcade){fill:#e8cf91;opacity:.65}
[data-theme=dark] .route-page .night-sign{fill:#eee7d5;filter:drop-shadow(0 0 2px #eee7d555)}
[data-theme=dark] .route-page .sign-cool{fill:#a7c9ed}
[data-theme=dark] .route-page .times-sign{fill:#293a60}
[data-theme=dark] .route-page #sogo .window{fill:#dfdfce;opacity:.75;filter:drop-shadow(0 0 2px #dfdfce44)}
[data-theme=dark] .route-page .ferry-star{fill:#eee5c8}

[data-theme=dark] .route-page .neon{filter:drop-shadow(0 0 6px #ff4f7a);animation:flicker 5s steps(1) infinite}[data-theme=dark] .route-page .neon rect{fill:#ff2e63}[data-theme=dark] .route-page .neon text{fill:#fff2b0}
@keyframes flicker{0%,100%{opacity:1}7%{opacity:.6}8%{opacity:1}52%{opacity:.75}54%{opacity:1}55%{opacity:.6}56%{opacity:1}}
.route-page header{position:fixed;inset:0 0 auto;z-index:3;max-width:none;border:0;background:linear-gradient(var(--street) 40%,transparent)}
.route-page header nav{display:flex;align-items:center;gap:18px}
.day-page #day-light{display:inline-flex;align-items:center;padding:11px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:5px;font-size:12px;font-weight:600;color:var(--street-ink);transition:background .2s}.day-page #day-light:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.day-page #day-light svg{width:16px;height:16px;flex:none}.day-page #day-light .sun,[data-theme=dark] .day-page #day-light .moon{display:none}[data-theme=dark] .day-page #day-light .sun{display:block}
.route-scroll{position:relative}
.route-viewport{position:sticky;top:0;height:100vh;height:100dvh;overflow:clip;touch-action:pan-y;background:var(--street)}
.route-page .sky-type{top:auto;bottom:34%;right:auto;left:6%;font-size:min(260px,30vw)}
.route-page .platform-note{font-size:11px;color:var(--street-muted)}
.skyline{position:absolute;left:0;bottom:30%;width:max(600vw,2400px);height:34vh;will-change:transform;pointer-events:none}
.landmarks{position:absolute;left:0;right:0;bottom:30%;height:min(38vh,320px);width:100%;pointer-events:none}
.territory-copy,.territory .arrival-plate{position:relative;z-index:1}
.route-track{position:absolute;inset:0;margin:0;padding:0;list-style:none;display:flex;will-change:transform}
.territory{flex:0 0 var(--stop,100vw);height:100%;padding:max(15vh,110px) 8% 0;position:relative;display:grid;grid-template-columns:minmax(0,560px) auto;align-items:start;align-content:start;gap:40px}
/* Fade stop content only: solid scenery must occlude the harbour behind it. */
.territory-copy{opacity:.5;transition:opacity .5s}
.territory.active .territory-copy{opacity:1}
.territory h1{margin:14px 0;font-size:clamp(38px,4.6vw,64px)}
.territory h2{margin:14px 0 12px;font-size:clamp(28px,3.4vw,48px)}
.territory h1 em,.territory h2 em{color:var(--street-accent)}
.territory-copy>p:not(.eyebrow){font-size:15px;color:var(--street-muted);max-width:420px}
.territory .arrival-plate{align-self:start;min-width:280px;margin-top:10vh}
.stops-button{border:1px solid var(--street-accent);background:none;color:var(--street-accent);border-radius:40px;padding:11px 20px;font-size:12px;font-weight:600}
.road{position:absolute;left:0;right:0;bottom:0;height:30%;background:var(--road);border-top:3px solid var(--street-edge)}
.road:before{content:"";position:absolute;left:0;right:-140px;top:52%;height:4px;background:repeating-linear-gradient(90deg,#f4d468 0 60px,transparent 60px 140px);transform:translate3d(var(--dash,0),0,0);will-change:transform}
.route-bus{position:absolute;left:clamp(8px,18vw,26vw);bottom:12%;width:min(560px,60vw);margin:0}
.route-bus.moving{animation:bob .35s infinite alternate ease-in-out}
@keyframes bob{to{transform:translateY(-3px)}}

.route-strip{position:fixed;left:6%;right:6%;bottom:10px;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;font-size:10px;letter-spacing:1.5px;font-weight:700}
.route-strip:before,.route-progress{content:"";position:absolute;left:0;right:0;bottom:38px;height:2px;background:var(--street-edge);z-index:-1}
.route-progress{background:var(--street-accent);transform-origin:left;transform:scaleX(0)}
.route-strip button{border:0;background:none;color:var(--street-muted);display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;transition:color .3s}
.route-strip button i{width:12px;height:12px;border-radius:50%;background:var(--street);border:2px solid var(--street-edge);transition:.3s}
.route-strip button[aria-current=step]{color:var(--street-ink)}
.route-strip button[aria-current=step] i{background:var(--street-accent);border-color:var(--street-accent);box-shadow:0 0 0 5px #00734f22}
@media(max-width:900px){.territory{grid-template-columns:1fr;padding-top:11vh;gap:10px}.territory .arrival-plate{margin-top:0;align-self:start;max-width:340px}.route-page .sky-type{display:none}.territory .arrival-plate{transform:scale(.9);transform-origin:left top}.route-bus{left:6vw;width:80vw;bottom:14%}.route-strip:before,.route-progress{bottom:17px}.route-strip button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.route-strip button{gap:0}.territory h2{font-size:clamp(26px,7vw,32px)}.territory-copy>p:not(.eyebrow){font-size:14px}.territory .arrival-plate{padding:12px 16px}.territory .arrival-plate b{font-size:40px}.territory .arrival-plate .minutes{font-size:32px}.day-page header nav>:is(button,.download){min-height:40px}.day-page #day-light{padding:0;align-self:stretch;aspect-ratio:1;justify-content:center}.day-page #day-light span{display:none}.route-page header{background:linear-gradient(var(--street) 55%,transparent)}}
@media(min-width:901px) and (max-height:700px){.territory{padding-top:max(11vh,110px)}.territory h1{font-size:clamp(34px,4vw,48px);margin:10px 0}.route-bus{width:min(400px,42vw);bottom:8%}}
.door-toggle{position:absolute;left:67%;top:28%;width:9%;height:52%;border:0;background:none;cursor:pointer;border-radius:4px}
/* Small discoveries across the water, kept on a slower plane than the street. */
.route-page{--harbour-tone:color-mix(in oklch,var(--far) 70%,var(--mid))}
.harbour-view{position:absolute;right:5%;bottom:50%;width:min(39vw,540px);color:var(--harbour-tone)}
.harbour-view svg{display:block;width:100%;overflow:visible;opacity:.8}
.kowloon-low{fill:var(--harbour-tone);opacity:.2}
.icc,.mplus{fill:var(--harbour-tone)}
.icc-face{fill:var(--street);opacity:.2}
.icc-crown,.harbour-ripples{stroke:var(--harbour-tone)}
.mplus-screen{fill:var(--harbour-tone)}
.mplus-art{stroke:var(--street);opacity:.5}
.harbour-reflection{opacity:.2}
.star-ferry{fill:var(--mid);color:var(--mid)}
.ferry-deck{fill:var(--street)}
.ferry-windows{stroke:var(--mid)}
.ferry-wake{stroke:var(--harbour-tone);opacity:.5}
/* ICC's cool LED strips stay dim across the harbour. */
[data-theme=dark] .route-page .icc{fill:#203533}
[data-theme=dark] .route-page .icc-face{fill:#91bac5;opacity:.1}
[data-theme=dark] .route-page .icc-day-glass{display:none}
[data-theme=dark] .route-page .icc-night-glass{fill:url(#icc-night-glass)}
[data-theme=dark] .route-page .icc-led-strip{stroke:#9ecbd6;stroke-width:.7;opacity:.3}
[data-theme=dark] .route-page .icc-corners{fill:none;stroke:#9ecbd6;stroke-width:.7;opacity:.28}
[data-theme=dark] .route-page .icc-crown{stroke:#a8cdd7;stroke-width:1;opacity:.4}
[data-theme=dark] .mplus-screen{fill:var(--harbour-tone)}
[data-theme=dark] .mplus-art{stroke:#e7c391;opacity:.45}
[data-theme=dark] .harbour-reflection{stroke:#d8bc83;opacity:.45}
.route-track{pointer-events:none}
.territory.active .territory-copy{pointer-events:auto}
.territory .arrival-plate{width:310px;min-width:0;max-width:100%;margin-top:24px}
.ride-caption{position:absolute;left:6%;right:6%;bottom:9%;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:10px;color:var(--street-muted);letter-spacing:1px}
#route-location{min-width:0;background:var(--road);padding:4px 0}
.request-lamp{fill:#738675}
.stop-requested .request-lamp{fill:#ff6b46;filter:drop-shadow(0 0 7px #ff6633)}
.door-toggle:hover{box-shadow:inset 0 0 0 2px #f5eedb88}
.route-bus:after{content:"";position:absolute;left:91%;top:57%;width:35%;height:32%;background:linear-gradient(90deg,#f8e6ab33,transparent);clip-path:polygon(0 38%,100% 0,100% 100%,0 62%);pointer-events:none;opacity:0}
[data-theme=dark] .route-bus:after{opacity:1}
@media(max-width:900px){
  .territory{padding-top:max(13vh,100px);overflow-x:clip}
  .route-page{--lm-h:clamp(19vh,100vh - 690px,21vh)}
  .road{height:26%}
  .skyline{bottom:26%;height:20vh}
  .landmarks{bottom:26%;left:50%;height:var(--lm-h);width:max(100%,var(--lm-h)*10/3);margin-left:calc(max(100%,var(--lm-h)*10/3)/-2)}
  .harbour-view{right:4%;bottom:calc(26% + 11vh);width:60vw;max-width:none}
  .territory .arrival-plate{margin-top:16px;transform:none;width:290px}
  .ride-caption{bottom:7%;font-size:9px;letter-spacing:.3px}
  }
@media(max-width:900px) and (max-height:740px){
  .territory{padding-top:94px}
  .territory h1{font-size:30px;margin:10px 0}
  .territory h2{font-size:27px;margin:10px 0}
  .territory-copy>p:not(.eyebrow){font-size:12px;line-height:1.55;margin-bottom:12px}
  .territory .eyebrow{font-size:7px;margin-bottom:10px}
  .territory .download{font-size:13px;padding:11px 14px}
  .territory .platform-note{font-size:8px;margin-top:10px}
  .territory .arrival-plate{margin-top:12px;padding:10px 14px}
  .territory .arrival-plate b{font-size:32px}
  .territory .arrival-plate .minutes{font-size:28px}
  .territory .arrival-plate p{margin-top:7px;padding-top:7px}
  .route-page{--lm-h:clamp(9vh,100vh - 560px,21vh)}
  .harbour-view{bottom:calc(26% + 6vh);width:48vw}
}
/* A passenger calls out as the bus leaves Wan Chai. */
.bus-speech{position:absolute;left:38%;bottom:calc(85% + 12px);z-index:2;width:max-content;max-width:90%;margin:0;padding:11px 17px;border:1px solid var(--street-edge);border-radius:12px;background:var(--street);color:var(--street-ink);font-size:14px;line-height:1.4;box-shadow:0 4px 14px #0000000c;pointer-events:none;opacity:0;transform:translate(-50%,5px);transition:opacity .2s,transform .2s}
.bus-speech:after{content:"";position:absolute;left:60%;bottom:-6px;width:10px;height:10px;background:var(--street);border-right:1px solid var(--street-edge);border-bottom:1px solid var(--street-edge);transform:rotate(45deg)}
.bus-speech.is-visible{opacity:1;transform:translate(-50%,0)}
/* The depot: a sixth stop past the terminus, holding the site links as shop signs. */
.depot{position:absolute;inset:0;margin:0;border:0;font-size:inherit;pointer-events:none;will-change:transform}
.plate-off,.off-duty .plate-on{display:none}.off-duty .plate-off{display:inline}
.signs{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:20px}
.shop-sign{display:flex;white-space:nowrap;flex-direction:column;align-items:center;gap:8px;min-width:72px;padding:12px 10px 10px;border:2px solid var(--red);border-radius:4px;background:var(--paper);color:var(--street-ink);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;transition:transform .2s}
.shop-sign b{writing-mode:vertical-rl;font-family:serif;font-size:22px;letter-spacing:4px;color:var(--red)}
.shop-sign:hover{transform:translateY(-3px)}.shop-sign[aria-current=page]{background:var(--red);color:var(--paper)}.shop-sign[aria-current=page] b{color:inherit}
[data-theme=dark] .day-page .shop-sign{background:var(--street);border-color:#ff2e63;color:#fff2b0;box-shadow:0 0 12px #ff2e6355,inset 0 0 10px #ff2e6333}
[data-theme=dark] .day-page .shop-sign b{color:#fff2b0;text-shadow:0 0 10px #ff4f7a}
[data-theme=dark] .day-page .shop-sign:nth-child(2) b{animation:flicker 5s steps(1) infinite}
[data-theme=dark] .day-page .shop-sign[aria-current=page]{background:#ff2e63;color:#fff2b0}
@media(max-width:900px) and (max-height:740px){.signs{margin-top:12px;gap:8px}.shop-sign{min-width:66px;padding:9px 6px 8px}.shop-sign b{font-size:18px}}
/* Notices: privacy, support and terms pages reached from the depot. */
.notice-page main{max-width:680px;margin:auto;padding:36px 6% 64px}
.notice-page h1{font-size:clamp(40px,6vw,64px);margin:32px 0 14px}.notice-page h1 em{color:var(--street-accent)}
.notice-page h2{font-family:'DM Sans',Arial,sans-serif;font-size:17px;font-weight:700;letter-spacing:0;margin:32px 0 6px}
.notice-page main :is(p,li){font-size:15px;color:var(--street-muted)}.notice-page main a:not(.back-on-board){text-decoration:underline}
.back-on-board{display:inline-flex;flex-direction:column;gap:3px;padding:9px 12px;border:2px solid var(--street-accent);border-radius:4px 4px 0 0;background:var(--paper);color:var(--green);font-size:9px;font-weight:700;letter-spacing:2px}.back-on-board b{font-size:18px;letter-spacing:4px}
.notice-page footer{max-width:680px;margin:auto;padding:28px 6% calc(72px + env(safe-area-inset-bottom))}.notice-page footer .signs{margin:0}
.route-strip button:last-of-type i{border-radius:2px}
@media(max-width:600px){.signs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.shop-sign{min-width:0;padding:10px 4px 8px;font-size:8px;letter-spacing:.5px}}

/* Language switch drawn as the red stop button by the minibus door. */
.lang-toggle{width:40px;height:40px;flex:none;border-radius:50%;border:3px solid #7a1020;background:radial-gradient(circle at 35% 30%,#ea3f56,var(--red) 65%);color:#fff9e5;font:700 13px/1 'DM Sans',Arial,sans-serif;letter-spacing:.5px;box-shadow:inset 0 -3px 0 #8a0d22,0 2px 0 #00000033;cursor:pointer;transition:transform .1s,box-shadow .1s}
.lang-toggle:hover{filter:brightness(1.08)}
.lang-toggle:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 #8a0d22}
[data-theme=dark] .lang-toggle{box-shadow:inset 0 -3px 0 #8a0d22,0 0 14px #ff3b5a66}