:root {
  --nus-blue: #003d7c;
  --nus-blue-deep: #082a4f;
  --nus-orange: #ef7c00;
  --orange-ink: #a84b00;
  --orange-soft: #fff1de;
  --orange-line: #f4c58d;
  --ink: #243e56;
  --muted: #53697d;
  --line: #dbe4ed;
  --surface: #f4f8fc;
  /* Chocolate tones are reserved for the logo and hero artwork. */
  --choco-dark: #4a2814;
  --choco: #8a5431;
  --choco-light: #e0ae74;
  --white: #fff;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  /* Faint engineering grid used behind page headers. */
  --grid: linear-gradient(#003d7c0c 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, #003d7c0c 1px, transparent 1px) 0 0 / 24px 24px;
  --shell-max: 1120px;
  --shell: min(var(--shell-max), calc(100% - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--white);
  font: 1rem/1.65 "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
a { color: var(--nus-blue); text-underline-offset: .22em; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--nus-blue-deep); line-height: 1.2; }
h1, .brand-copy strong, .footer-brand {
  font-family: Georgia, "Times New Roman", serif;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); letter-spacing: -.035em; }
h2 { font-size: 1.5rem; font-weight: 650; letter-spacing: -.025em; }
h3 { font-size: 1.125rem; font-weight: 650; }
p { margin-bottom: 16px; }
svg, img { display: block; max-width: 100%; }
.shell { width: var(--shell); margin-inline: auto; }
.shell > *, .hero-inner > *, .home-content > *, .person-card > *, .publication-card > * { min-width: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100; padding: 10px 14px;
  color: white; background: var(--nus-blue); transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--nus-blue); outline-offset: 4px; }

/* Shared navigation: sticky, and slimmer once the page scrolls. */
#site-header { position: sticky; top: 0; z-index: 50; }
#site-header :focus-visible { outline-color: var(--nus-orange); }
.nav-wrap {
  position: relative; z-index: 50;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='96' fill='none' stroke='%238dbce6' stroke-opacity='.13' stroke-width='1.2'%3E%3Cpath d='M0 24h58l14 14h72M38 72h92l12-12h60l10 10h100M150 18h70l16 16h60l12-12h52M232 84h40l10-10h88'/%3E%3Cg fill='%238dbce6' fill-opacity='.2' stroke='none'%3E%3Ccircle cx='144' cy='38' r='2.4'/%3E%3Ccircle cx='312' cy='70' r='2.4'/%3E%3Ccircle cx='296' cy='34' r='2.4'/%3E%3Ccircle cx='282' cy='74' r='2.4'/%3E%3Ccircle cx='38' cy='72' r='2.4'/%3E%3C/g%3E%3C/svg%3E") center / 360px 100% repeat-x, linear-gradient(100deg, var(--nus-blue-deep) 0%, var(--nus-blue) 55%, #0a4a8f 100%);
  box-shadow: 0 4px 18px #00172f1f; transition: box-shadow 260ms ease;
}
.nav-wrap::after {
  position: absolute; right: 0; bottom: 0; left: 0; height: 3px; content: "";
  background: linear-gradient(90deg, var(--nus-orange), var(--choco-light) 50%, var(--nus-orange));
}
#site-header.is-scrolled .nav-wrap { box-shadow: 0 8px 26px #00172f40; }
/* Slightly wider than --shell so the brand, NUS logo, and full menu fit on one row. */
.nav-inner { width: max(var(--shell), min(1200px, calc(100% - 64px))); display: flex; align-items: center; justify-content: space-between; min-height: 88px; gap: 24px; transition: min-height 260ms ease; }
#site-header.is-scrolled .nav-inner { min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-mark {
  display: block; flex-shrink: 0; width: 64px; height: 64px;
  transition: transform 280ms ease, filter 280ms ease, width 260ms ease, height 260ms ease;
}
#site-header.is-scrolled .brand-mark { width: 50px; height: 50px; }
.brand-mark img { width: 100%; height: 100%; }
.brand:is(:hover, :focus-visible) .brand-mark { transform: rotate(-6deg) scale(1.06); filter: drop-shadow(0 0 10px #e0ae7480); }
.brand-copy { display: grid; gap: 4px; padding-left: 14px; border-left: 1px solid #ffffff2e; }
.brand-name { display: block; color: var(--white); font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; font-weight: 500; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.brand-name > span { color: var(--nus-orange); }
.brand-tagline { color: #a9c6e3; font-family: var(--mono); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
/* Chinese pages: 巧客 Lab on one line, its characters a little taller than the English name's capitals. */
.brand-wordmark { width: auto; height: 27px; }
/* Sized to the brand name + tagline so "NUS | Computing" lines up with the lab name and stays legible. */
.nus-logo { display: block; flex-shrink: 0; margin-right: auto; margin-left: -10px; padding: 3px 0 3px 16px; border-left: 1px solid #ffffff2e; }
/* Drawn inline through <use> rather than as an <img>, so the crest and the small print stay vector
   instead of being rasterized and resampled. Whole-pixel widths keep it on the pixel grid. */
.nus-logo svg { display: block; width: 226px; height: 40px; fill: #fff; transition: width 260ms ease, height 260ms ease; }
#site-header.is-scrolled .nus-logo svg { width: 192px; height: 34px; }
/* The NUS logo already says NUS, so the header tagline only names it when the logo is hidden. */
.tagline-nus { display: none; }
.primary-nav { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative; padding: 9px 12px; color: #d8e6f4; border-radius: 8px;
  font-size: 1rem; font-weight: 600; letter-spacing: .01em; text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.nav-link::after {
  position: absolute; right: 12px; bottom: 3px; left: 12px; height: 2px; content: "";
  background: var(--nus-orange); border-radius: 2px; transform: scaleX(0); transition: transform 220ms ease;
}
.nav-link:is(:hover, :focus-visible) { color: var(--white); background: #ffffff0f; }
.nav-link:is(:hover, :focus-visible)::after { transform: scaleX(.6); }
.nav-link.is-active { color: var(--white); background: #ffffff17; }
.nav-link.is-active::after { transform: scaleX(1); }
/* Openings doubles as the call to action. */
.nav-link.is-cta { margin-left: 10px; padding: 8px 18px; color: var(--nus-orange); border: 1.5px solid var(--nus-orange); border-radius: 999px; }
.nav-link.is-cta::after { display: none; }
.nav-link.is-cta:is(:hover, :focus-visible, .is-active) { color: var(--nus-blue-deep); background: var(--nus-orange); }
/* Language switch: the same page in English, Chinese, or French, after the menu. */
.lang-switch { display: none; align-items: center; gap: 2px; }
.lang-menu { position: relative; margin-left: 10px; }
.lang-menu summary {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; color: #d8e6f4; border: 1px solid #ffffff2e; border-radius: 8px;
  font: 600 .8125rem/1 var(--mono); letter-spacing: .02em; list-style: none; cursor: pointer; white-space: nowrap;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { width: 6px; height: 6px; margin-top: -3px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; content: ""; transform: rotate(45deg); }
.lang-menu summary:is(:hover, :focus-visible), .lang-menu[open] summary { color: var(--white); background: #ffffff14; }
.lang-options {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; display: grid; min-width: 150px; padding: 6px;
  background: var(--nus-blue-deep); border: 1px solid #ffffff24; border-radius: 10px; box-shadow: 0 14px 30px #00172f59;
}
.lang-option { padding: 9px 12px; color: #d8e6f4; border-radius: 6px; font-size: .9375rem; font-weight: 550; text-decoration: none; white-space: nowrap; }
.lang-option:is(:hover, :focus-visible) { color: var(--white); background: #ffffff14; }
.lang-option.is-current { color: var(--white); box-shadow: inset 3px 0 0 var(--nus-orange); }
.lang-link { padding: 6px 7px; color: #a9c6e3; border-radius: 6px; font: 600 .8125rem/1 var(--mono); letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.lang-link:is(:hover, :focus-visible) { color: var(--white); background: #ffffff14; }
.lang-link.is-current { color: var(--white); box-shadow: inset 0 -2px 0 var(--nus-orange); border-radius: 0; }
.menu-toggle {
  display: none; width: 44px; height: 44px; padding: 10px 11px; cursor: pointer;
  background: #ffffff0f; border: 1px solid #ffffff38; border-radius: 10px;
}
.menu-toggle span:not(.sr-only) { display: block; height: 2px; margin: 4px 0; background: var(--white); border-radius: 2px; transition: transform 200ms ease, opacity 200ms ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(4) { transform: translateY(-6px) rotate(-45deg); }

/* A short introduction, followed immediately by papers and news. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--grid), linear-gradient(110deg, #f5f9fd 0%, #fbfdff 55%, #eaf2fb 100%); border-bottom: 1px solid var(--line); }
.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px;
  align-items: center; padding-block: 55px 50px;
}
/* Wide screens: three columns (intro, circuit, recruiting card). The row also extends to the
   right, so the card sits 120px from the window edge, at most 300px past the content column. */
@media (min-width: 1201px) {
  .hero-inner {
    --hero-shift: clamp(0px, (100vw - var(--shell-max)) / 2 - 120px, 300px);
    width: calc(var(--shell) + var(--hero-shift));
    margin-inline: calc((100% - var(--shell)) / 2) 0;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr) 300px;
    gap: 0;
  }
}
.eyebrow, .kicker {
  margin-bottom: 17px; color: var(--nus-blue); font-family: var(--mono); font-size: .75rem;
  line-height: 1.5; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
/* Home intro: the lab mark as the title, with the acronym and the introduction beside it, centred on it. */
.hero-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto auto 1fr; column-gap: 22px; }
.hero-copy .eyebrow { grid-column: 1 / -1; }
.lab-expansion { grid-column: 2; grid-row: 3; }
.hero .lead { grid-column: 2; grid-row: 4; }
/* The name is in the heading as hidden text. In its 64-unit box the mark's bar starts at 11.25 and its pins
   at 5, so the negative margins line the bar up with the text on the left (the eye reads the bar as the
   edge, and the pins hang into the margin) and trim the space beyond the pins at the top and bottom. */
.hero h1 { --mark: clamp(10rem, 16vw, 13rem); grid-column: 1; grid-row: 2 / -1; align-self: center; margin: 0; }
.hero-mark { cursor: pointer; display: block; width: var(--mark); max-width: none; height: var(--mark); margin: calc(var(--mark) * -5 / 64) 0 calc(var(--mark) * -5 / 64) calc(var(--mark) * -11.25 / 64); }
[data-choco-icon] > img { width: 100%; height: 100%; }
.hero-wordmark { width: auto; height: clamp(10rem, 17vw, 12.5rem); }
.lab-expansion { max-width: 590px; margin-bottom: 19px; color: var(--nus-blue); font-size: 1.1875rem; line-height: 1.55; }
.accent-letter { font-weight: 750; color: var(--orange-ink); }
.hero .lead { max-width: 560px; margin-bottom: 0; color: var(--muted); }
.research-topics { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.research-topics li { padding: 4px 11px; color: var(--nus-blue-deep); font-size: .875rem; background: var(--orange-soft); border: 1px solid var(--orange-line); border-radius: 999px; }
/* Recruiting comes first: the hero's side column is the call to join the lab. */
.hiring-card {
  position: relative; overflow: hidden; padding: 26px 26px 24px; color: #d8e6f4;
  background: linear-gradient(150deg, var(--nus-blue) 0%, var(--nus-blue-deep) 100%);
  border-top: 4px solid var(--nus-orange); border-radius: 4px 22px 4px 22px; box-shadow: 0 18px 40px #082a4f38;
}
.hiring-card::after { position: absolute; top: -34px; right: -34px; width: 120px; height: 120px; border: 1px solid #ffffff26; border-radius: 50%; box-shadow: 0 0 0 18px #ffffff0a; content: ""; pointer-events: none; }
.hiring-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; color: var(--nus-orange); font: 600 .75rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hiring-dot { position: relative; width: 9px; height: 9px; flex-shrink: 0; background: var(--nus-orange); border-radius: 50%; }
.hiring-dot::after { position: absolute; inset: 0; background: var(--nus-orange); border-radius: 50%; content: ""; }
.hiring-card h2 { margin-bottom: 14px; color: var(--white); font: 500 1.875rem/1.15 Georgia, "Times New Roman", serif; }
.hiring-roles { display: grid; gap: 7px; padding: 0; margin: 0 0 14px; list-style: none; }
.hiring-roles li { display: flex; align-items: center; gap: 10px; color: var(--white); font-weight: 600; }
.hiring-roles li::before { width: 8px; height: 8px; flex-shrink: 0; background: var(--nus-orange); border-radius: 2px; content: ""; }
.hiring-card p:not(.hiring-kicker) { margin-bottom: 18px; color: #a9c6e3; font-size: .875rem; line-height: 1.5; }
.hiring-button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 20px;
  color: var(--nus-blue-deep); background: var(--nus-orange); border-radius: 999px; font-weight: 700; text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.hiring-button::after { content: "→"; transition: transform 180ms ease; }
.hiring-button:is(:hover, :focus-visible) { background: #ff9a2e; box-shadow: 0 8px 20px #ef7c0055; transform: translateY(-2px); }
.hiring-button:is(:hover, :focus-visible)::after { transform: translateX(3px); }
.hiring-card :focus-visible { outline-color: var(--white); }
@keyframes hiring-ping { 0% { opacity: .7; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: no-preference) {
  .hiring-dot::after { animation: hiring-ping 1.8s ease-out infinite; }
}

.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; text-decoration: none; }
.text-link::after { content: "→"; color: var(--nus-orange); transition: transform 160ms ease; }
.text-link:hover { text-decoration: underline; }
.text-link:hover::after { transform: translateX(3px); }

.home-content { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 60px; padding-block: 46px 58px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 20px; }
.section-heading h2 { position: relative; margin: 0; padding-bottom: 8px; }
.section-heading h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--nus-orange); }
.section-note { margin: -7px 0 20px; color: var(--muted); font-size: .875rem; }
.news-brief { padding-block: 20px; border-top: 1px solid var(--line); }
.news-brief time { display: block; font-family: var(--mono); margin-bottom: 9px; color: var(--orange-ink); font-size: .8125rem; }
.news-brief p { margin: 0; }
.news-brief a { font-weight: 550; text-decoration: none; }
.news-brief a:hover { text-decoration: underline; }
.join-note { position: relative; overflow: hidden; align-self: start; padding: 23px; background: var(--nus-orange); border-radius: 4px 20px 4px 20px; }
.join-note::after { position: absolute; top: -30px; right: -28px; width: 100px; height: 100px; border: 1px solid #ffffff70; border-radius: 50%; box-shadow: 0 0 0 16px #ffffff18; content: ""; pointer-events: none; }
.join-note h3 { margin-bottom: 8px; }
.join-note p { margin-bottom: 15px; color: var(--nus-blue-deep); font-size: .9375rem; }
.join-note .text-link { position: relative; z-index: 1; min-height: 42px; padding: 7px 14px; background: white; color: var(--nus-blue-deep); border-radius: 6px; transition: box-shadow 200ms ease, transform 200ms ease; }
.join-note .text-link:is(:hover, :focus-visible) { transform: translateY(-2px); box-shadow: 0 5px 14px #72370026; text-decoration: none; }

/* Inner pages: compact titles and content without repeated lead-ins. */
.page-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--grid), linear-gradient(110deg, #f5f9fd 0%, #fbfdff 55%, #eaf2fb 100%); }
.page-hero-inner { position: relative; z-index: 1; }
.page-choco { display: inline-block; width: .55em; height: .55em; margin-left: .32em; vertical-align: .24em; transform: rotate(12deg); }
.page-hero-inner { padding-block: 38px 34px; }
.page-hero h1 { margin-bottom: 10px; font-weight: 500; }
.page-hero p { max-width: 740px; margin-bottom: 0; color: var(--muted); }
.section { padding-block: 42px 52px; }
.section.is-tinted { background: var(--surface); border-top: 1px solid var(--line); }
.home-people { padding-block: 46px 10px; }
/* Everyone, advisor included, gets the same card: photo on the left, details on the right, two per row. */
.member-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin: 0; padding: 0; list-style: none; }
.person-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; margin: 0; }
.person-photo { width: 96px; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 4px 14px 4px 14px; }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
.person-content .eyebrow { margin-bottom: 6px; }
.person-content h3 { margin-bottom: 4px; font-size: 1.25rem; }
.person-content p { max-width: 650px; margin-bottom: 0; color: var(--muted); font-size: .9375rem; }
.person-role a { color: var(--nus-blue); }
.person-content .link-row { gap: 8px 20px; margin-top: 10px; }
.person-content h3 a { color: inherit; text-decoration: none; }
.person-content h3 a:is(:hover, :focus-visible) { color: var(--nus-blue); text-decoration: underline; text-decoration-color: var(--nus-orange); }

/* Member pages: photo and links up top, then datasheet-style sections. */
.profile-head { position: relative; z-index: 1; display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 40px 38px; }
.profile-photo { width: 184px; aspect-ratio: 1; overflow: hidden; background: var(--white); border: 1px solid var(--orange-line); border-radius: 4px 24px 4px 24px; box-shadow: 0 14px 32px #082a4f1f; }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.back-link { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; color: var(--nus-blue); font: 600 .75rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.back-link::before { content: "←"; color: var(--nus-orange); transition: transform 160ms ease; }
.back-link:is(:hover, :focus-visible) { text-decoration: underline; }
.back-link:is(:hover, :focus-visible)::before { transform: translateX(-3px); }
.profile-intro h1 { margin-bottom: 8px; font-weight: 500; }
.profile-role { margin-bottom: 6px; color: var(--orange-ink); font: 600 .8125rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.profile-affiliation, .profile-extra { max-width: 680px; margin-bottom: 4px; color: var(--muted); }
.profile-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.profile-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 13px;
  color: var(--nus-blue); background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font-size: .875rem; font-weight: 600; text-decoration: none; transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.profile-link:not(.is-mail)::after { content: "↗"; color: var(--nus-orange); font-size: .8em; }
.profile-link:is(:hover, :focus-visible) { background: #e2eef9; border-color: var(--nus-blue); }
.profile-link.is-mail { color: var(--white); background: var(--nus-blue); border-color: var(--nus-blue); }
.profile-link.is-mail:is(:hover, :focus-visible) { background: var(--nus-blue-deep); }
.profile-body { padding-block: 8px 56px; }
.profile-section { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 32px; padding-block: 30px; border-bottom: 1px solid var(--line); }
.profile-section:last-child { border-bottom: 0; }
.profile-section > h2 { position: relative; margin: 0; padding-bottom: 8px; font-size: 1.125rem; align-self: start; }
.profile-section > h2::after { position: absolute; bottom: 0; left: 0; width: 24px; height: 3px; background: var(--nus-orange); border-radius: 2px; content: ""; }
.profile-section-body { max-width: 760px; }
.profile-section-body:has(.publication-list-full) { max-width: none; }
.profile-section-body > :last-child { margin-bottom: 0; }
.interest-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.interest-list li { padding: 4px 12px; color: var(--nus-blue-deep); font-size: .9063rem; background: var(--orange-soft); border: 1px solid var(--orange-line); border-radius: 999px; }
.fact-list { padding: 0; margin: 0 0 16px; list-style: none; }
.fact-list li { position: relative; margin-bottom: 9px; padding-left: 20px; }
.fact-list li::before { position: absolute; top: .62em; left: 2px; width: 7px; height: 7px; background: var(--nus-orange); border-radius: 2px; content: ""; }
.fact-list li:last-child { margin-bottom: 0; }
.mentoring summary { font-weight: 600; }
.mentoring h3 { margin: 18px 0 9px; color: var(--orange-ink); font: 600 .8125rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.mentoring .fact-list li { color: var(--muted); }
.profile-section .publication-card:last-child { border-bottom: 0; padding-bottom: 0; }
.profile-pending { margin-block: 36px 0; padding: 28px 30px; background: var(--surface); border: 1px dashed #b9c7d4; border-radius: 4px 20px 4px 20px; }
.profile-pending h2 { margin: 0; font-size: 1.25rem; }
.member-note { margin-top: 42px; padding-top: 25px; border-top: 1px solid var(--line); }
.member-note h2 { margin-bottom: 8px; }
.member-note p { color: var(--muted); }
.publication-card { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 28px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.publication-card:first-child { padding-top: 0; }
.publication-year { font-family: var(--mono); color: var(--orange-ink); font-size: 1.125rem; font-weight: 600; }
.publication-card :is(h2, h3) { max-width: 820px; margin-bottom: 8px; font-size: 1.25rem; line-height: 1.45; }
/* Members' names link to their pages, underlined only on hover. */
.author-line a { color: inherit; font-weight: 600; text-decoration: none; }
.author-line a:is(:hover, :focus-visible) { color: var(--nus-blue); text-decoration: underline 2px var(--nus-orange); }
.publication-card p { color: var(--muted); margin-bottom: 6px; }
.publication-card .venue-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--nus-blue); font-size: .8125rem; }
.publication-card .publication-remark { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 4px; background: var(--orange-soft); color: var(--orange-ink); font-size: .8125rem; }
.publication-source { display: flex; flex-wrap: wrap; gap: 8px; margin: 25px 0 0; color: var(--muted); font-size: .8125rem; }
.publication-source a { color: inherit; text-decoration: none; }
.publication-source a:is(:hover, :focus-visible) { color: var(--nus-blue); text-decoration: underline; }
.publication-card[hidden] { display: none; }
.paper-details { margin-top: 12px; }
.paper-details summary { width: fit-content; min-height: 36px; color: var(--nus-blue); font-size: .875rem; cursor: pointer; }
.paper-details summary::marker { color: var(--nus-orange); }
.paper-details[open] { padding: 12px 16px; border-left: 3px solid var(--nus-orange); background: #fff8ef; }
.paper-details p { max-width: 760px; margin-top: 5px; }
.publication-card:target { margin-inline: -16px; padding-inline: 16px; background: linear-gradient(90deg, #fff8ef, #fff8ef 60%, transparent); border-radius: 4px; }
/* The kind of a paper (offense, countermeasure, tools) and its themes, beside the venue. */
.publication-tag { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; color: var(--muted); background: var(--surface); border-radius: 4px; font-size: .75rem; font-weight: 600; letter-spacing: .01em; }
.publication-tag.is-kind { color: var(--ink); }
.kind-glyph { width: 14px; height: 14px; flex-shrink: 0; }
.pub-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Publications page: the research map (papers by theme and year) sits above the list.
   Kinds use the logo's own glyphs: an orange bitten square for offense, the blue shield for countermeasures, a via for tools. */
.pub-map { position: relative; margin-bottom: 30px; --kind-offense: var(--nus-orange); --kind-countermeasure: var(--nus-blue); --kind-tools: #6f8eae; }
.map-filters { display: grid; gap: 10px; margin-bottom: 18px; }
.map-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* The two rows share a label column so their chips line up. */
.map-filter-name { width: 62px; color: var(--nus-blue); font: 600 .75rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.map-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 13px; cursor: pointer;
  color: var(--nus-blue-deep); background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font-size: .875rem; font-weight: 600; transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.map-chip:is(:hover, :focus-visible) { background: #e2eef9; border-color: var(--nus-blue); }
.map-chip.is-active { color: var(--white); background: var(--nus-blue); border-color: var(--nus-blue); }
.map-chip .kind-glyph { width: 18px; height: 18px; }
.map-legend-item { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: var(--muted); font-size: .8125rem; }
.map-legend-item .kind-glyph { width: 16px; height: 16px; }
.map-scroll { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: 4px 20px 4px 20px; }
.map-scroll:focus-visible { outline-offset: 2px; }
.map-svg { display: block; width: 100%; min-width: 0; height: auto; }
.map-axis line { stroke: var(--line); stroke-width: 1; }
.map-axis text { fill: var(--muted); font: 600 12px var(--mono); letter-spacing: .04em; text-anchor: middle; }
.map-lane-label { fill: var(--nus-blue); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.map-lane-label[role="button"] { cursor: pointer; }
.map-lane-label[role="button"]:is(:hover, :focus-visible) { text-decoration: underline; }
.map-lane-label:focus-visible { outline: none; fill: var(--orange-ink); }
.map-lane, .map-node, .map-lane-label { transition: opacity 220ms ease, fill-opacity 220ms ease, stroke-opacity 220ms ease; }
.map-guide { fill: none; stroke: var(--line); stroke-width: 1; }
.map-trace { fill: none; stroke: var(--nus-blue); stroke-opacity: .2; stroke-width: 3; stroke-linecap: round; }
.map-lane.is-dim .map-trace { stroke-opacity: .07; }
.map-lane.is-dim .map-lane-label { fill-opacity: .4; }
.map-branch { fill: none; stroke: var(--nus-blue); stroke-opacity: .32; stroke-width: 1.6; stroke-dasharray: 3 4; }
.map-tap { fill: var(--white); stroke: var(--nus-blue); stroke-opacity: .45; stroke-width: 1.6; }
.map-node { cursor: pointer; text-decoration: none; }
.map-node.is-dim { opacity: .18; }
.map-hit { fill: var(--white); fill-opacity: 0; stroke: none; }
.map-node:focus { outline: none; }
.map-node:focus-visible .map-hit { fill-opacity: .06; fill: var(--nus-blue); stroke: var(--nus-blue); stroke-width: 2; }
.map-glyph, .map-award { transform-box: fill-box; transform-origin: center; transition: transform 200ms ease; }
.map-node:is(:hover, :focus-visible) .map-glyph { transform: scale(1.18); }
.map-name { fill: var(--ink); font-size: 12px; font-weight: 600; text-anchor: middle; }
.map-node:is(:hover, :focus-visible) .map-name { fill: var(--nus-blue); text-decoration: underline; }
.map-venue { fill: var(--muted); font: 500 10px var(--mono); letter-spacing: .02em; text-anchor: middle; }
.map-tip {
  position: absolute; z-index: 5; width: max-content; max-width: 320px; padding: 10px 13px; pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px)); color: var(--white); background: var(--nus-blue-deep);
  border-radius: 8px; box-shadow: 0 12px 30px #082a4f40; font-size: .8125rem; line-height: 1.45;
}
.map-tip::after { position: absolute; top: 100%; left: calc(50% + var(--tip-shift, 0px)); width: 12px; height: 12px; margin: -6px 0 0 -6px; background: inherit; transform: rotate(45deg); content: ""; }
.map-tip strong { display: block; margin-bottom: 3px; color: var(--white); font-size: .875rem; }
.map-tip span { display: block; color: #a9c6e3; }
.map-tip span:first-of-type { color: #ffc475; font-family: var(--mono); font-size: .75rem; }
.map-count { margin: 14px 0 0; color: var(--muted); font-size: .875rem; }
.timeline-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 30px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.timeline-item:first-child { padding-top: 0; }
.timeline-date { font-family: var(--mono); color: var(--orange-ink); font-size: .875rem; }
.timeline-item h2 { margin-bottom: 9px; font-size: 1.25rem; }
.timeline-item p { color: var(--muted); margin-bottom: 10px; }
/* Welcome entries: the new member's photo beside the announcement. */
.news-welcome { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; }
.news-avatar { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--orange-line); border-radius: 4px 14px 4px 14px; box-shadow: 0 6px 16px #082a4f14; }
.opening-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.opening-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--orange-line); border-radius: 4px 20px 4px 20px; background: linear-gradient(145deg, #fff8ef, #fff 60%); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.opening-card { border-top: 4px solid var(--nus-orange); }
.opening-card:is(:hover, :focus-within) { transform: translateY(-5px); border-color: var(--nus-orange); box-shadow: 0 10px 24px #d4700014; }
.opening-card h2 { font-size: 1.375rem; margin-bottom: 12px; }
.opening-card p { color: var(--muted); }
.opening-card .text-link { margin-top: auto; }
.opening-actions { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: auto; }
/* One form for every position, styled like the recruiting card on the home page. */
.apply-panel {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center;
  margin-top: 30px; padding: 30px 34px; color: #d8e6f4;
  background: linear-gradient(150deg, var(--nus-blue) 0%, var(--nus-blue-deep) 100%);
  border-top: 4px solid var(--nus-orange); border-radius: 4px 22px 4px 22px; box-shadow: 0 18px 40px #082a4f30;
  scroll-margin-top: 110px;
}
.apply-panel::after { position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border: 1px solid #ffffff1f; border-radius: 50%; box-shadow: 0 0 0 22px #ffffff08; content: ""; pointer-events: none; }
.apply-panel h2 { margin-bottom: 10px; color: var(--white); font: 500 1.875rem/1.15 Georgia, "Times New Roman", serif; }
.apply-copy > p:not(.hiring-kicker) { margin-bottom: 12px; color: #a9c6e3; }
.apply-copy > p.apply-note { margin: 12px 0 0; font-size: .8125rem; }
.apply-list { display: grid; gap: 7px; padding: 0; margin: 0; list-style: none; }
.apply-list li { position: relative; padding-left: 20px; color: var(--white); }
.apply-list li::before { position: absolute; top: .6em; left: 2px; width: 8px; height: 8px; background: var(--nus-orange); border-radius: 2px; content: ""; }
.apply-action { position: relative; z-index: 1; display: grid; justify-items: start; gap: 10px; }
.apply-panel :focus-visible { outline-color: var(--white); }
/* Email addresses are never written in the pages, where scrapers would find them: each is drawn from glyph outlines
   (assets/email/, PT Sans Bold) and used as a mask over currentColor, so it takes the colour of the text around it. */
.email-address { display: inline-block; height: 1.176em; vertical-align: -.276em; background: currentColor; -webkit-mask: no-repeat 0 0 / contain; mask: no-repeat 0 0 / contain; }
.email-address.is-flavien-solt { aspect-ratio: 8509 / 1176; -webkit-mask-image: url(email/flavien-solt.svg); mask-image: url(email/flavien-solt.svg); }
.email-address.is-liu-chang { aspect-ratio: 7678 / 1176; -webkit-mask-image: url(email/liu-chang.svg); mask-image: url(email/liu-chang.svg); }
.email-address.is-lu-kun { aspect-ratio: 8005 / 1176; -webkit-mask-image: url(email/lu-kun.svg); mask-image: url(email/lu-kun.svg); }
.email-address.is-peng-xuanyao { aspect-ratio: 10923 / 1176; -webkit-mask-image: url(email/peng-xuanyao.svg); mask-image: url(email/peng-xuanyao.svg); }
.email-address.is-xu-jinyan { aspect-ratio: 8200 / 1176; -webkit-mask-image: url(email/xu-jinyan.svg); mask-image: url(email/xu-jinyan.svg); }
.opening-card .opening-email { margin: 0; color: var(--nus-blue); font-size: .875rem; font-weight: 600; }

/* The email alternative to the form, for readers without access to Google. It spans the panel under the button,
   in smaller, dimmer type than the rest, so the form stays the main way to apply. */
.apply-email { position: relative; z-index: 1; grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid #ffffff1a; }
.apply-email p { max-width: 72ch; margin: 0 0 6px; color: #a9c6e3cc; font-size: .8125rem; line-height: 1.55; }
.apply-email p:last-child { margin-bottom: 0; }
.apply-email strong { color: #d8e6f4; font-weight: 600; }
.apply-email code { padding: 1px 4px; color: #d8e6f4; background: #ffffff0f; border-radius: 3px; font-family: var(--mono); font-size: .75rem; overflow-wrap: anywhere; }
/* Placeholders and positions stay on one line. The full example may wrap. */
.apply-email p:not(.apply-subject) code:not(:last-child) { white-space: nowrap; }
.apply-email .apply-subject code { display: inline-block; padding: 4px 8px; border: 1px solid #ffffff1f; user-select: all; }
.apply-pending { max-width: 240px; margin: 0; color: #a9c6e3; font-size: .8125rem; }
/* Flavien's mentoring philosophy: what each side can expect, in two lists side by side. */
.mentoring { margin-top: 42px; }
.mentoring-lead { max-width: 650px; color: var(--muted); }
.mentoring-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
.mentoring-grid h3 { margin-bottom: 12px; }
.mentoring-list { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.mentoring-list li { position: relative; padding-left: 20px; color: var(--muted); }
.mentoring-list li::before { position: absolute; top: .6em; left: 2px; width: 8px; height: 8px; background: var(--nus-orange); border-radius: 2px; content: ""; }
.mentoring-list strong { color: var(--ink); }
.expectations-note { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 30px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.expectations-note p { max-width: 650px; color: var(--muted); margin: 0; }
.button { display: inline-flex; padding: 11px 19px; color: white; background: var(--nus-blue); border-radius: 4px; text-decoration: none; font-weight: 600; }
.button:hover { background: var(--nus-blue-deep); }

/* A light footer keeps the page visually quiet. */
.site-footer { border-top: 2px solid var(--line); background: linear-gradient(110deg, #f6f9fc, #eef4fb); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px 32px; padding-block: 24px; }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 1.0625rem; color: var(--nus-blue); text-decoration: none; font-weight: 600; }
.footer-mark { width: 30px; height: 30px; flex-shrink: 0; }
.footer-affiliation { margin: 4px 0 0; color: var(--muted); font-size: .8125rem; }
.footer-affiliation a { color: inherit; text-decoration: none; }
.footer-affiliation a:is(:hover, :focus-visible) { color: var(--nus-blue); text-decoration: underline; }
.footer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; color: var(--muted); font-size: .8125rem; }
.footer-meta a { font-size: .875rem; text-decoration: none; }
.footer-meta a:hover { text-decoration: underline; }

/* Circuit board in the hero's middle column; the silicon die has a small bite out of one corner.
   The viewBox is centred on the chip, and the traces fade out at both sides: nothing runs under
   the intro or the card. The traces reach much further right than left, so once the column is
   wider than 300px the drawing moves left by three quarters of the bare board beside the chip. */
.hero-circuit { position: relative; align-self: stretch; container-type: inline-size; }
.circuit-scene > g { transform: translateX(min(0px, 112.5px - 37.5cqi)); }
.circuit-scene {
  position: absolute; top: 50%; left: 0; width: 100%; height: 400px; margin-top: -200px;
  pointer-events: none; transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0);
  transition: transform 650ms cubic-bezier(.16, 1, .3, 1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.circuit-scene .traces { stroke: #003d7c; stroke-opacity: .2; stroke-width: 1.6; }
.circuit-scene .vias circle { fill: var(--white); stroke: #003d7c; stroke-opacity: .35; stroke-width: 1.4; }
.circuit-scene .pulses path { stroke: var(--nus-orange); stroke-width: 2.4; stroke-dasharray: 5 100; stroke-dashoffset: 5; opacity: 0; }
.circuit-scene .labels text { fill: #003d7c; fill-opacity: .4; font: 600 9px var(--mono); letter-spacing: .08em; }
.circuit-scene .pins rect { fill: #9fb6cc; }
.circuit-scene .body { fill: #0b3a6e; }
.circuit-scene .rim { fill: none; stroke: #ffffff26; }
.circuit-scene .pin-one { fill: #8fb3d9; }
.circuit-scene .part { fill: #8fb3d9; font: 600 7px var(--mono); letter-spacing: .1em; }
.circuit-scene .bite circle { fill: #0b3a6e; }
.circuit-scene .floorplan rect { fill: #c3d4e5; stroke: #6f8eae; stroke-opacity: .55; stroke-width: .8; }
.circuit-scene .etch { fill: #4f6f90; font: 700 6.5px var(--mono); letter-spacing: .06em; text-anchor: middle; }
.circuit-scene .crumbs rect { fill: #a3b9d0; }
/* The chip stays in the background: the package and its crumbs are drawn as one translucent layer. */
.circuit-scene :is(.package, .crumbs) { opacity: .55; }
@keyframes signal {
  0% { stroke-dashoffset: 5; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .circuit-scene .pulses path { animation: signal 4.5s linear var(--delay, 0s) infinite; }
}

/* At 1200px and below there is no room for the circuit column, so the circuit is hidden. */
@media (max-width: 1200px) {
  .hero-circuit { display: none; }
}
@media (max-width: 1240px) {
  .nav-inner { min-height: 76px; }
  .brand-mark { width: 54px; height: 54px; }
  .menu-toggle { display: block; }
  .primary-nav {
    position: absolute; top: 100%; right: 0; left: 0; display: none; gap: 2px;
    padding: 12px 20px 20px; background: linear-gradient(180deg, var(--nus-blue), var(--nus-blue-deep));
    border-bottom: 3px solid var(--nus-orange); box-shadow: 0 16px 24px #082a4f33;
  }
  .primary-nav.is-open { display: grid; }
  .nav-link { padding: 12px 14px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0; }
  .nav-link::after { display: none; }
  .nav-link.is-active { border-left-color: var(--nus-orange); }
  .nav-link.is-cta { margin: 10px 0 0; text-align: center; border-left-width: 1.5px; border-radius: 999px; }
  .lang-menu { display: none; }
  .lang-switch { display: flex; margin: 12px 0 0; padding: 12px 0 0 8px; border-top: 1px solid #ffffff2e; }
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
  .home-content { gap: 34px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .section-heading h2 { font-size: 1.375rem; }
  .opening-grid { gap: 14px; }
  .opening-card { padding: 22px; }
}
@media (max-width: 900px) {
  .home-people { padding-block: 33px 0; }
}
@media (max-width: 900px) {
  :root { --shell: min(var(--shell-max), calc(100% - 40px)); }
  .hero-inner { grid-template-columns: 1fr; gap: 28px; padding-block: 35px; }
  .hero h1 { --mark: 8.5rem; }
  .hiring-card { max-width: 440px; padding: 22px 22px 20px; }
  .apply-panel { grid-template-columns: 1fr; padding: 24px 22px; }
  .apply-panel h2 { font-size: 1.625rem; }
  .hiring-card h2 { font-size: 1.625rem; }
  .hero-copy .eyebrow { font-size: .75rem; letter-spacing: .065em; }
  .lab-expansion { font-size: 1.0625rem; }
  .research-topics { gap: 6px; }
  .home-content { grid-template-columns: 1fr; gap: 35px; padding-block: 33px 38px; }
  .section-heading { margin-bottom: 17px; }
  .page-hero-inner { padding-block: 30px 26px; }
  .section { padding-block: 30px 38px; }
  .opening-grid { grid-template-columns: 1fr; gap: 16px; }
  .opening-card { padding: 22px; }
  .mentoring { margin-top: 32px; }
  .mentoring-grid { grid-template-columns: 1fr; }
  .profile-head { grid-template-columns: 132px minmax(0, 1fr); gap: 26px; padding-block: 30px; }
  .profile-photo { width: 132px; }
  .profile-section { grid-template-columns: 1fr; gap: 14px; padding-block: 24px; }
}
@media (max-width: 640px) {
  .hero-copy { grid-template-rows: auto auto auto; column-gap: 16px; }
  .hero h1 { --mark: 7rem; grid-row: 2; }
  .lab-expansion { grid-row: 2; align-self: center; margin-bottom: 0; }
  .hero .lead { grid-column: 1 / -1; grid-row: 3; margin-top: 18px; }
  .member-list { grid-template-columns: 1fr; gap: 26px; }
  .nus-logo { display: none; }
  .tagline-nus { display: inline; }
}
@media (max-width: 480px) {
  .brand { gap: 9px; }
  .brand-copy { padding-left: 10px; }
  .brand-name { font-size: 1.3rem; }
  /* A tagline too long for the row (small phones, longer languages) wraps under itself instead of running under the menu button. */
  .nav-inner { gap: 10px; }
  .brand, .brand-copy { min-width: 0; }
  .brand-tagline { font-size: .5625rem; letter-spacing: .06em; white-space: normal; text-wrap: balance; }
  .brand-wordmark { height: 22px; }
  .person-card { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; }
  .person-photo { width: 72px; }
  .publication-card { grid-template-columns: 1fr; gap: 8px; }
  .timeline-item { grid-template-columns: 1fr; gap: 8px; }
  .news-welcome { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
  .news-avatar { width: 52px; height: 52px; }
  .map-svg { min-width: min(880px, var(--map-width, 100%)); }
  .map-filter-name { width: 100%; }
  .map-chip { min-height: 32px; padding: 3px 11px; font-size: .8125rem; }
  .map-scroll { border-radius: 4px 14px 4px 14px; }
  .profile-head { grid-template-columns: 1fr; gap: 20px; }
  .profile-photo { width: 120px; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
}
/* The arcade at the bottom of the home page: four games in one board. The tabs reuse the map's chips,
   the screens and button the recruiting card's look, and the board is framed like the research map. */
.home-game { padding-block: 46px 58px; background: var(--surface); border-top: 1px solid var(--line); }
.home-game .section-note { max-width: 760px; }
.game { max-width: 880px; }
/* One equal column per game across the board: the chip fills its column and the theme sits centred beneath. */
.game-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 18px; }
.game-pick { display: grid; align-content: start; gap: 5px; text-align: center; }
.game-tab {
  display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 4px 15px; cursor: pointer;
  color: var(--nus-blue-deep); background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font-size: .9375rem; font-weight: 600; transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.game-tab:is(:hover, :focus-visible) { background: #e2eef9; border-color: var(--nus-blue); }
.game-tab[aria-selected="true"] { color: var(--white); background: var(--nus-blue); border-color: var(--nus-blue); }
.game-tab-theme { color: var(--muted); font: 600 .6875rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 640px) {
  .game-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
.game-info[hidden] { display: none; }
.game-note { max-width: 760px; margin-bottom: 14px; color: var(--muted); font-size: .9375rem; }
.game-hud { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 24px; margin-bottom: 12px; }
.game-stat { display: grid; gap: 2px; }
.game-stat-label { color: var(--nus-blue); font: 600 .6875rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.game-stat-value { color: var(--nus-blue-deep); font-size: 1.375rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; transition: color 160ms ease; }
.game-stat-value.is-hot { color: var(--orange-ink); }
.game-stat-value.is-low { color: var(--orange-ink); animation: game-blink 1s steps(2) infinite; }
@keyframes game-blink { 50% { opacity: .35; } }
.game-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.game-pill {
  min-height: 34px; padding: 4px 14px; cursor: pointer;
  color: var(--nus-blue-deep); background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font-size: .875rem; font-weight: 600; transition: background 160ms ease, border-color 160ms ease;
}
.game-pill:is(:hover, :focus-visible) { background: #e2eef9; border-color: var(--nus-blue); }
.game-pill[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
.game-pill[hidden] { display: none; }
.game-frame {
  position: relative; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 4px 20px 4px 20px;
  box-shadow: 0 14px 32px #082a4f14; touch-action: none; user-select: none; -webkit-user-select: none;
}
.game-frame:focus { outline: none; }
.game-frame.is-playing.hides-cursor { cursor: none; }
.game-frame.is-playing:not(.hides-cursor) { cursor: crosshair; }
.game-frame canvas { display: block; width: 100%; height: auto; }
.game-overlay { position: absolute; inset: 0; display: flex; align-items: safe center; justify-content: center; overflow: auto; padding: 20px; background: #f4f8fc99; backdrop-filter: blur(1.5px); }
.game-overlay[hidden] { display: none; }
.game-screen {
  position: relative; overflow: hidden; width: min(100%, 420px); padding: 24px 26px 22px; color: #d8e6f4; text-align: center;
  background: linear-gradient(150deg, var(--nus-blue) 0%, var(--nus-blue-deep) 100%);
  border-top: 4px solid var(--nus-orange); border-radius: 4px 22px 4px 22px; box-shadow: 0 18px 40px #082a4f38;
}
.game-screen::after { position: absolute; top: -34px; right: -34px; width: 120px; height: 120px; border: 1px solid #ffffff26; border-radius: 50%; box-shadow: 0 0 0 18px #ffffff0a; content: ""; pointer-events: none; }
.game-screen[hidden] { display: none; }
.game-title { margin-bottom: 10px; color: var(--white); font: 500 2.25rem/1.05 Georgia, "Times New Roman", serif; letter-spacing: -.01em; text-wrap: balance; }
.game-screen p:not(.game-title) { margin-bottom: 16px; color: #a9c6e3; font-size: .9375rem; }
.game-screen p:empty { display: none; }
.game-screen:is([data-screen="cleared"], [data-screen="levelup"]) { width: min(100%, 640px); padding: 22px 24px 20px; text-align: left; }
.game-screen:is([data-screen="cleared"], [data-screen="levelup"]) .game-title { margin-bottom: 4px; }
.game-screen:is([data-screen="cleared"], [data-screen="levelup"]) p:not(.game-title) { margin-bottom: 0; }
.game-shop.game-perks { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; margin-bottom: 4px; }
.game-shop-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 14px 0 10px; }
.game-mascot { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 10px 14px 10px 10px; background: #ffffff10; border: 1px solid #ffffff1f; border-radius: 12px; }
.game-frame .game-mascot canvas { display: block; flex-shrink: 0; width: 72px; height: 72px; }
.game-mascot .game-mascot-line { flex: 1; min-width: 0; }
.game-screen .game-mascot p.game-mascot-line { position: relative; margin: 0; padding: 8px 12px; color: var(--nus-blue-deep); background: var(--white); border-radius: 10px; font-size: .875rem; line-height: 1.4; text-align: left; }
.game-screen .game-mascot p.game-mascot-line::before { position: absolute; top: 50%; left: -6px; width: 12px; height: 12px; margin-top: -6px; background: var(--white); border-radius: 2px; transform: rotate(45deg); content: ""; }
.game-screen .game-mascot p.game-mascot-line:empty { display: none; }
.game-screen[data-screen="over"] { width: min(100%, 560px); }
.game-screen[data-screen="over"] .game-title { margin-bottom: 4px; font-size: 2.75rem; }
/* Kickers: one short line of mono capitals above or below a title. */
.game-screen p.game-kicker { margin: 0 0 8px; color: #ffc475; font: 600 .6875rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.game-screen p.game-kicker:empty { display: none; }
/* The instruction on the shop and perk screens: what to do next, with its countdown. */
.game-screen p.game-cue { margin: 12px 0 4px; color: var(--white); font: 700 .8125rem/1.4 var(--mono); letter-spacing: .04em; text-transform: none; }
.game-screen p.game-cue::before { margin-right: 8px; color: #ffc475; content: "\2193"; }
@keyframes game-glow { 50% { box-shadow: 0 0 0 4px #ffc47580, 0 6px 16px #00172f33; } }
@keyframes game-nudge { 50% { transform: translateY(-3px); box-shadow: 0 10px 22px #ef7c0066; } }
.game-perks .game-shop-item:not([disabled]) { animation: game-glow 1.6s ease-in-out infinite; }
.game-screen[data-screen="cleared"] > .game-button { animation: game-nudge 1.4s ease-in-out infinite; }
/* The score, in the largest type on the screen, with its label underneath. */
.game-figure { display: flex; flex-direction: column; align-items: center; margin: 2px 0 10px; }
.game-screen p.game-figure-value { margin: 0; color: var(--nus-orange); font: 800 3.75rem/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.game-screen p.game-figure-label { margin: 6px 0 0; color: #a9c6e3; font: 600 .625rem/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
/* A row of figures, each a number over a tiny label. */
.game-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 0 0 14px; }
.game-screen p.game-stat-tile { display: flex; flex-direction: column; align-items: center; margin: 0; line-height: 1.1; }
.game-stat-tile-value { color: var(--white); font: 700 1.5rem/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.game-stat-tile-label { margin-top: 3px; color: #a9c6e3; font: 600 .5625rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
/* The paper the level is named after, as one small pill. */
.game-screen p.game-paper { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 5px 14px; color: #a9c6e3; border: 1px solid #ffffff2e; border-radius: 999px; font: 600 .6875rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.game-screen p.game-paper a { color: #ffc475; font-weight: 700; }
.game-over-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.game-button.is-secondary { color: var(--white); background: #ffffff1a; border: 1px solid #ffffff40; }
.game-button.is-secondary:is(:hover, :focus-visible) { background: #ffffff2e; box-shadow: none; }
.game-button.is-secondary::after { content: "\2913"; }
.game-rank { display: inline-flex; align-items: center; gap: 8px; margin: -6px 0 14px; padding: 5px 12px; color: var(--nus-blue-deep); background: var(--orange-soft); border: 1px solid var(--orange-line); border-radius: 999px; font: 600 .75rem/1.4 var(--mono); letter-spacing: .04em; }
.game-rank:empty { display: none; }
.game-shop-title { color: #ffc475; font: 600 .75rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.game-screen p.game-points { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 5px 12px 5px 7px; color: var(--white); background: #ffffff14; border: 1px solid #ffffff2e; border-radius: 999px; font: 700 .8125rem/1.2 var(--mono); }
.game-screen p.game-points::before { width: 18px; height: 18px; background: url("choco-square.svg") center / contain no-repeat; content: ""; }
.game-shop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.game-shop-item {
  display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; min-height: 138px; padding: 12px 8px 10px; cursor: pointer;
  color: var(--nus-blue-deep); text-align: center; background: linear-gradient(180deg, #ffffff, #eef4fb); border: 1px solid transparent; border-radius: 12px;
  font-size: .75rem; font-weight: 650; line-height: 1.25; box-shadow: 0 6px 16px #00172f33; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.game-shop-item:is(:hover, :focus-visible):not([disabled]) { transform: translateY(-3px); border-color: var(--nus-orange); box-shadow: 0 12px 24px #00172f47; }
.game-shop-item[disabled] { color: #8aa0b8; background: #ffffff1f; box-shadow: none; cursor: default; }
.game-shop-item[hidden] { display: none; }
.game-shop-icon { flex-shrink: 0; width: 44px; height: 44px; padding: 6px; background: var(--orange-soft); border-radius: 50%; box-sizing: content-box; }
.game-shop-item[disabled] .game-shop-icon { background: #ffffff22; opacity: .45; }
.game-shop-text { display: block; min-width: 0; }
.game-shop-level { display: inline-block; margin-left: 5px; padding: 0 6px; color: var(--orange-ink); background: var(--orange-soft); border-radius: 999px; font: 700 .625rem/1.6 var(--mono); vertical-align: 1px; }
.game-price { display: inline-block; margin-top: auto; padding: 2px 9px; color: var(--white); background: var(--nus-orange); border-radius: 999px; font: 700 .6875rem/1.4 var(--mono); }
.game-shop-item[disabled] .game-price { color: #8aa0b8; background: #ffffff22; }
@media (max-width: 640px) {
  .game-shop, .game-shop.game-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd last card takes the whole row rather than sitting alone on the left. */
  .game-perks > .game-shop-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.game-button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 22px; cursor: pointer;
  color: var(--nus-blue-deep); background: var(--nus-orange); border: 0; border-radius: 999px; font-weight: 700;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.game-button::after { content: "\2192"; transition: transform 180ms ease; }
.game-button:is(:hover, :focus-visible) { background: #ff9a2e; box-shadow: 0 8px 20px #ef7c0055; transform: translateY(-2px); }
.game-button:is(:hover, :focus-visible)::after { transform: translateX(3px); }
.game-screen :focus-visible { outline-color: var(--white); }
@media (max-width: 900px) {
  .home-game { padding-block: 33px 38px; }
}
@media (max-width: 480px) {
  .game-hud { gap: 8px 16px; }
  .game-stat-value { font-size: 1.125rem; }
  .game-screen { padding: 20px 18px 18px; }
  .game-overlay { padding: 12px; }
  .game-title { font-size: 1.75rem; }
  .game-screen[data-screen="over"] .game-title { font-size: 2rem; }
  .game-screen p.game-figure-value { font-size: 2.5rem; }
  .game-stats { gap: 8px 18px; margin-bottom: 10px; }
  .game-stat-tile-value { font-size: 1.25rem; }
  .game-screen p.game-paper { padding: 4px 10px; }
  .game-mascot { gap: 8px; padding: 8px; }
  .game-frame .game-mascot canvas { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .circuit-scene { transform: none !important; }
}