:root{--night:#0a1424;--harbour:#235389;--mist:#c5d5de;--red:#d44e4e;--salmon:#e69991;--bg:var(--night);--text:#e6eef3;--muted:#8ea3b5;--line-hair:#c5d5de21;--glow-top:#235389;--cyan:#45e6ff;--pink:#ff4fa3;--red-neon:#ff5a5f;--island:#2f8fe0;--tsuen-wan:#ec3a33;--kwun-tong:#1fb35f;--tung-chung:#f99d4a;--tko:#9a63c6;--east-rail:#6cc4ec;--line:var(--island);--bamboo:#b8924f;--bamboo-node:#6f5326;--tie:#15110c;--site-yellow:#f3c623;--flower:#fff;--flower-star:#de2910;--display:"Big Shoulders Display", "Oswald", Impact, sans-serif;--body:"IBM Plex Sans", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, monospace;--zh:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{scroll-padding-top:4.5rem}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{background:radial-gradient(ellipse 80% 50% at 20% 0%, #23538959, transparent 70%), radial-gradient(ellipse 60% 40% at 90% 30%, #8c74b51a, transparent 70%), var(--bg);color:var(--text);font:400 1.02rem/1.7 var(--body);-webkit-font-smoothing:antialiased;background-attachment:fixed;margin:0}a{color:var(--line)}.red{color:var(--red)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.bauhinia .petal{fill:var(--flower)}.bauhinia .petal-line{fill:none;stroke:var(--flower-star);stroke-width:1.2px}.bauhinia .petal-star{fill:var(--flower-star)}.neon-sign{--tube:var(--red-neon);border:2px solid var(--tube);box-shadow:0 0 6px color-mix(in srgb, var(--tube) 70%, transparent), 0 0 22px color-mix(in srgb, var(--tube) 35%, transparent), inset 0 0 12px color-mix(in srgb, var(--tube) 25%, transparent);background:#0a1424d9;border-radius:6px;flex-direction:column;flex-shrink:0;align-items:center;padding:.85rem .6rem;display:inline-flex}.neon-char{font:700 2.6rem/1 var(--display);letter-spacing:.08em;color:#fff;text-shadow:0 0 2px #fff, 0 0 8px var(--tube), 0 0 18px var(--tube), 0 0 36px var(--tube)}.neon-sign--vertical .neon-char{font-family:var(--zh);writing-mode:vertical-rl;font-weight:900}@media (prefers-reduced-motion:no-preference){.flicker .neon-char{animation:7s infinite flicker}}@keyframes flicker{0%,18%,22%,25%,53%,57%,to{opacity:1}20%,24%,55%{opacity:.35;text-shadow:none}}.category-nav{z-index:20;border-bottom:1px solid #0000;transition:background .25s,border-color .25s,backdrop-filter .25s;position:sticky;top:0}.category-nav.is-scrolled{backdrop-filter:blur(10px);border-bottom-color:var(--line-hair);background:#0a1424e0}.nav-inner{justify-content:space-between;align-items:center;gap:2.5rem;max-width:60rem;margin:0 auto;padding:.85rem 16px .7rem;display:flex}.wordmark{font:500 1.35rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--text);flex-shrink:0;align-items:center;gap:.6rem;text-decoration:none;display:inline-flex}.wordmark-flower{background:var(--red);border-radius:3px;width:1.6rem;height:1.6rem;padding:.14rem}.line-map{scrollbar-width:none;flex:1;max-width:34rem;margin:0;padding:0;list-style:none;display:flex;overflow-x:auto}.line-map li{flex:1 0 auto;min-width:4.25rem;position:relative}.line-map li:not(:last-child):after{content:"";background:linear-gradient(90deg, var(--line) 50%, var(--next,var(--line)) 50%);width:100%;height:5px;position:absolute;top:calc(.5rem - 2.5px);left:50%}.line-map li:first-child{--next:var(--tsuen-wan)}.line-map li:nth-child(2){--next:var(--kwun-tong)}.line-map li:nth-child(3){--next:var(--tung-chung)}.line-map li:nth-child(4){--next:var(--tko)}.line-map li:nth-child(5){--next:var(--east-rail)}.line-map a{z-index:1;font:500 .78rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-direction:column;align-items:center;gap:.4rem;text-decoration:none;transition:color .2s;display:flex;position:relative}.station{width:1rem;height:1rem;box-shadow:0 0 0 2px var(--line);background:#f4f4ef;border:3px solid #0a1424;border-radius:50%;transition:transform .2s,background .2s}.line-map a:hover,.line-map a:focus-visible,.line-map a[aria-current]{color:var(--text)}.line-map a:hover .station,.line-map a:focus-visible .station{transform:scale(1.15)}.line-map a[aria-current] .station{background:var(--line);transform:scale(1.25)}.skyline-banner{position:relative;overflow:hidden}.banner-inner{z-index:1;justify-content:space-between;gap:1.5rem;max-width:60rem;margin:0 auto;padding:3.5rem 16px 0;display:flex;position:relative}.intro{max-width:36rem}.banner-kicker{font:500 .78rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--salmon);margin:0}.banner-title{font:700 clamp(3rem, 11vw, 6rem)/.95 var(--display);letter-spacing:.08em;text-transform:uppercase;margin:.6rem 0 0}.intro-about{color:var(--mist);margin:1.25rem 0 0;font-size:1.08rem}.focus{font:500 1.05rem/1 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);flex-wrap:wrap;gap:.35rem 1.1rem;margin:1.25rem 0 0;padding:0;list-style:none;display:flex}.focus li{align-items:center;gap:.5rem;display:inline-flex}.focus li:before{content:"";background:var(--pink);border-radius:50%;width:5px;height:5px}.intro-links{flex-wrap:wrap;gap:.75rem;margin:1.6rem 0 0;padding:0;list-style:none;display:flex}.neon-button{--tube:var(--pink);font:500 1rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:#fff;border:2px solid var(--tube);box-shadow:0 0 8px color-mix(in srgb, var(--tube) 50%, transparent);border-radius:4px;padding:.6rem 1.2rem .55rem;text-decoration:none;transition:background .2s,box-shadow .2s;display:inline-block}.intro-links li:nth-child(2) .neon-button{--tube:var(--cyan)}.intro-links .neon-button--metro{--tube:var(--site-yellow)}.neon-button:hover,.neon-button:focus-visible{background:color-mix(in srgb, var(--tube) 18%, transparent);box-shadow:0 0 14px var(--tube)}.banner-inner .neon-sign{align-self:start;margin:.5rem 2rem 0 0;padding:1.2rem .9rem}.banner-inner .neon-char{font-size:clamp(2rem,6vw,4.2rem)}.stats{grid-template-columns:repeat(4,1fr);max-width:60rem;margin:0 auto;padding:1.25rem 16px 0;display:grid}.stats div{border-left:1px solid var(--line-hair);padding:0 1rem}.stats div:first-child{border-left:0;padding-left:0}.stats dt{font:500 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.stats dd{font:700 2.2rem/1 var(--display);letter-spacing:.06em;margin:.4rem 0 0}.skyline{width:100%;height:clamp(190px,30vw,330px);margin-top:-2rem;display:block}.skyline .hill--far{fill:#143c36}.skyline .hill--near{fill:#0f2f29}.skyline .towers{fill:#060d18}.skyline .mast{stroke:#060d18;stroke-width:2px;fill:none}.skyline .facet{stroke:#45e6ff59;stroke-width:1px;fill:none}.skyline .win{fill:#c5d5de14}.skyline .win.on{fill:#ffd98a;opacity:.75}.skyline .win.warm{fill:var(--pink);opacity:.9}.skyline .trees{fill:#164a36}.skyline .trunk{fill:#08130f}.skyline .shoreline{fill:var(--cyan);opacity:.35}.skyline .ripple{fill:#ffd98a;opacity:.22}.skyline .ripple.warm{fill:var(--pink);opacity:.3}.skyline .junk{filter:drop-shadow(0 0 6px #d9473a59)}.skyline .junk-reflection{opacity:.22}.skyline .junk--far{opacity:.7}@media (prefers-reduced-motion:no-preference){.skyline .junk{animation:60s ease-in-out infinite alternate sail}.skyline .junk--far{animation-duration:90s;animation-direction:alternate-reverse}}@keyframes sail{0%{transform:translate(0)}to{transform:translate(-120px)}}main{max-width:60rem;margin:0 auto;padding:1rem 16px 3rem}.category{padding-top:5rem}.station-sign{border-bottom:6px solid var(--line);align-items:stretch;margin-bottom:.5rem;display:flex}.station-code{background:var(--line);color:#fff;min-width:3.5rem;font:700 1.7rem/1 var(--display);letter-spacing:.04em;place-items:center;padding:0 .75rem;display:grid}.station-sign h2{font:700 clamp(2.2rem, 6.5vw, 3.4rem)/1 var(--display);letter-spacing:.08em;text-transform:uppercase;margin:0;padding:.55rem 1rem .45rem}.group-title{color:#111;outline-offset:-5px;font:700 1rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;background:#f4f4ef;border:2px solid #f4f4ef;outline:1.5px solid #111;margin:2.5rem 0 0;padding:.35rem .8rem .3rem;display:inline-block}.project{border-top:1px solid var(--line-hair);grid-template-columns:11rem 1fr;gap:2.5rem;padding:2.5rem 0;display:grid;position:relative}.station-sign+.project,.group-title+.project{border-top:0}.project-meta{flex-direction:column;gap:.6rem;padding-top:.45rem;display:flex}.project-num{font:500 .85rem/1 var(--mono);color:var(--line);letter-spacing:.06em}.project-role{color:var(--salmon);font-size:.88rem;font-style:italic;line-height:1.4}.project-tags{font:400 .76rem/1.7 var(--mono);color:var(--muted);margin:0;padding:0;list-style:none}.project-body{max-width:40rem}.project h3{font:700 clamp(1.8rem, 4.5vw, 2.4rem)/1.05 var(--display);letter-spacing:.05em;text-transform:uppercase;margin:0}.project-img{border-radius:3px;width:100%;height:auto;margin-top:1.25rem;display:block}.summary{color:var(--mist);margin:1rem 0 1.4rem;font-size:1.1rem}.label{font:500 .9rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--line);margin-bottom:.25rem;display:block}.ps{border-left:2px solid color-mix(in srgb, var(--line) 55%, transparent);margin:0 0 1.1rem;padding-left:1rem}.reflection{margin-top:1.6rem}.reflection p{margin:0 0 .8rem}.reflection p:last-child{margin-bottom:0}.links{font:500 .8rem/1 var(--mono);text-transform:uppercase;gap:1.25rem;margin:1.5rem 0 0;padding:0;list-style:none;display:flex}.links .metro-link{color:var(--muted)}.project--wip{--bay-w:44px;padding:3.75rem calc(var(--bay-w) + 1.5rem) 3rem;border-top:0;margin:2rem 0}@media (width>=1120px){.project--wip{margin-inline:calc(-1 * (var(--bay-w) + 1.5rem))}}.station-sign+.project--wip,.project--wip+.project{border-top:0}.scaffold{pointer-events:none;position:absolute;inset:0}.bay{width:var(--bay-w);background:var(--bay) repeat-y 0 0 / var(--bay-w) auto;position:absolute;top:0;bottom:0}.bay--left{left:0}.bay--right{right:0;transform:scaleX(-1)}.ledger{background:var(--ledger) repeat-x 0 0 / auto 10px;height:10px;position:absolute;left:0;right:0}.ledger--top{top:7px}.ledger--bottom{bottom:10px}.site-sign{top:17px;right:calc(var(--bay-w) + 2rem);pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute}.site-sign-strings{border-left:1px solid #6b6455;border-right:1px solid #6b6455;width:70%;height:.9rem}.site-sign-board{background:var(--site-yellow);color:#111;font:700 .85rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;border:2px solid #111;padding:.35rem .7rem .3rem;transform:rotate(-2deg);box-shadow:0 6px 14px -6px #000000b3}.colophon{border-top:1px solid var(--line-hair);flex-direction:column;align-items:center;gap:.75rem;padding:3rem 16px 4rem;display:flex}.colophon-flower{background:var(--red);border-radius:4px;width:3rem;height:3rem;padding:.3rem}.colophon p{font:500 .75rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:0}@media (width<=720px){.project{grid-template-columns:1fr;gap:.9rem}.project-meta{flex-flow:wrap;align-items:baseline;gap:.4rem .9rem;padding-top:0}.project-tags{flex-wrap:wrap;gap:0 .8rem;display:flex}.project--wip{--bay-w:26px;padding:4.5rem calc(var(--bay-w) + .9rem) 2.75rem}.site-sign{right:calc(var(--bay-w) + .75rem)}}@media (width<=560px){.nav-inner{gap:1rem}.wordmark-text{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.nav-inner{padding-inline:12px}.category-nav{padding-bottom:.9rem}.line-map{overflow:visible}.line-map li{min-width:0}.station-name{opacity:0;font-size:.68rem;transition:opacity .2s;position:absolute;top:1.45rem;left:50%;transform:translate(-50%)}.line-map a[aria-current] .station-name{opacity:1}.banner-inner{flex-direction:column;padding-top:2.25rem}.banner-inner .neon-sign{order:-1;align-self:flex-start;margin:0 0 .25rem;padding:.45rem .7rem}.banner-inner .neon-char{writing-mode:horizontal-tb;font-size:1.6rem}.stats{grid-template-columns:repeat(2,1fr);row-gap:1rem}.stats div:nth-child(3){border-left:0;padding-left:0}.station-code{min-width:2.75rem;font-size:1.3rem}}