/* =========================================================================
   SEMICON Taiwan 2026 — visual system (pure CSS, zero build)
   Shared by every page. Deep-tech "ethereal glass" aesthetic over a
   token-driven light/dark base. One block per page layout in use.
   ========================================================================= */

/* ---------- design tokens : LIGHT (default) ---------- */
:root,
[data-theme="light"] {
  --bg:            #eef1fb;
  --bg-grad-1:     rgba(79,107,255,.16);
  --bg-grad-2:     rgba(22,194,194,.14);
  --bg-grad-3:     rgba(150,120,255,.12);
  --surface:       rgba(255,255,255,.72);
  --surface-solid: #ffffff;
  --surface-2:     rgba(255,255,255,.55);
  --hairline:      rgba(13,20,48,.10);
  --hairline-2:    rgba(13,20,48,.06);
  --inner-hi:      rgba(255,255,255,.7);

  --text:          #0c1230;
  --text-dim:      #2f3658;
  --text-mute:     #5b6488;

  --accent:        #4257f5;
  --accent-2:      #08a6b4;
  --accent-3:      #7b5cff;
  --accent-soft:   rgba(66,87,245,.10);
  --accent-line:   rgba(66,87,245,.28);
  --on-accent:     #ffffff;

  --chip-bg:       rgba(13,20,48,.04);
  --shadow:        0 1px 2px rgba(13,20,48,.05), 0 8px 24px -12px rgba(13,20,48,.18);
  --shadow-lg:     0 24px 60px -22px rgba(40,55,160,.34);
  --shadow-accent: 0 14px 38px -14px rgba(66,87,245,.45);

  --radius-sm: 12px; --radius: 18px; --radius-lg: 30px; --radius-pill: 999px;
  --maxw: 1120px;
  --ease:  cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font-display: "Space Grotesk", "Plus Jakarta Sans", "Noto Sans TC", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", "Noto Sans TC", system-ui, -apple-system, sans-serif;
  /* aliases kept so any inherited component referring to MD3 names still resolves */
  --primary: var(--accent); --on-surface: var(--text); --on-surface-variant: var(--text-mute);
  --surface-container: var(--surface); --outline-variant: var(--hairline);
}

/* ---------- design tokens : DARK ---------- */
[data-theme="dark"] {
  --bg:            #05070f;
  --bg-grad-1:     rgba(79,107,255,.28);
  --bg-grad-2:     rgba(20,210,210,.20);
  --bg-grad-3:     rgba(140,90,255,.22);
  --surface:       rgba(20,26,46,.62);
  --surface-solid: #0d1224;
  --surface-2:     rgba(28,35,60,.45);
  --hairline:      rgba(150,170,230,.16);
  --hairline-2:    rgba(150,170,230,.09);
  --inner-hi:      rgba(255,255,255,.08);

  --text:          #eaf0ff;
  --text-dim:      #c2cbe8;
  --text-mute:     #8b96bb;

  --accent:        #7b8cff;
  --accent-2:      #2bd4d4;
  --accent-3:      #b69bff;
  --accent-soft:   rgba(123,140,255,.14);
  --accent-line:   rgba(123,140,255,.34);
  --on-accent:     #07091a;

  --chip-bg:       rgba(150,170,230,.08);
  --shadow:        0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7);
  --shadow-lg:     0 30px 70px -26px rgba(0,0,0,.75);
  --shadow-accent: 0 16px 44px -16px rgba(80,100,255,.6);
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; max-width: 100%; overflow-x: hidden;
  font-family: var(--font-body);
  background: var(--bg); color: var(--text);
  line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background .35s var(--ease), color .35s var(--ease);
}
/* ambient mesh-gradient glow — fixed, viewport-sized, never adds scroll width */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58vw 48vh at 12% -6%, var(--bg-grad-1), transparent 60%),
    radial-gradient(50vw 46vh at 92% 4%, var(--bg-grad-2), transparent 58%),
    radial-gradient(46vw 50vh at 70% 108%, var(--bg-grad-3), transparent 60%);
}
/* faint grain/scanline texture for physical depth (fixed, non-scrolling) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(127,140,200,.035) 1px, transparent 1px);
  background-size: 100% 3px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.08; }
.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  line-height: 1; user-select: none; flex: 0 0 auto;
}
::selection { background: var(--accent-soft); }
.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 80;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: var(--radius-pill); font-weight: 600;
}
.skip-link:focus { left: 14px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- app bar (floating glass) ---------- */
.appbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--hairline-2);
}
.appbar__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px clamp(14px, 4vw, 28px);
  display: flex; align-items: center; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.brand__logo {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow: var(--shadow-accent); font-size: 20px;
}
.brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: linear-gradient(90deg, var(--text), var(--text-dim)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.appbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.gh-star {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px;
  border: 1px solid var(--hairline); background: var(--surface-2); color: var(--text-dim);
  border-radius: var(--radius-pill); font: inherit; font-weight: 700; font-size: .82rem;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.gh-star__icon { font-size: 18px; color: #f5b301; }
.gh-star:hover { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-1px); }
.gh-star:active { transform: translateY(0) scale(.97); }
.gh-star__count { min-width: 1ch; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--hairline);
  background: var(--surface-2); color: var(--text-dim);
  border-radius: var(--radius-pill); padding: 8px 12px; cursor: pointer; font: inherit;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--accent-line); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0) scale(.97); }
.icon-btn__txt { font-size: .82rem; font-weight: 600; }

/* ---------- cross-page nav (pill rail) ---------- */
.pagenav {
  position: sticky; top: 59px; z-index: 40;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--hairline-2);
}
.pagenav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 10px clamp(14px, 4vw, 28px);
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.pagenav__inner::-webkit-scrollbar { display: none; }
.navpill {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 8px 15px; border-radius: var(--radius-pill);
  font-size: .85rem; font-weight: 600; color: var(--text-mute);
  border: 1px solid var(--hairline); background: var(--surface-2); white-space: nowrap;
  cursor: pointer; transition: all .2s var(--ease);
}
.navpill .material-symbols-rounded { font-size: 19px; }
.navpill:hover { color: var(--text); border-color: var(--accent-line); transform: translateY(-1px); }
.navpill--active {
  color: var(--on-accent); border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow: var(--shadow-accent);
}

/* ---------- page scaffold ---------- */
.page { max-width: var(--maxw); margin: 0 auto; padding: clamp(28px, 6vw, 64px) clamp(16px, 4vw, 28px) 40px; }
.page-head { margin-bottom: 30px; max-width: 70ch; }
.page-head h1 {
  margin: 0 0 10px; font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 700;
  background: linear-gradient(120deg, var(--text) 30%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-head__sub { margin: 0; font-size: clamp(1rem, 2.2vw, 1.12rem); color: var(--text-mute); line-height: 1.6; }
.empty { color: var(--text-mute); }

/* section bands + reveal */
.band { margin-top: clamp(40px, 7vw, 76px); }
.band__head { margin-bottom: 22px; max-width: 64ch; }
.band__head h2 {
  margin: 0; font-size: clamp(1.35rem, 3.4vw, 2rem); font-weight: 700; color: var(--text);
  display: inline-flex; align-items: center; gap: .55em;
}
.band__head h2::before {
  content: ""; width: 26px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.band__head p { margin: 10px 0 0; color: var(--text-mute); font-size: 1rem; line-height: 1.6; }

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- HERO (home) ---------- */
.page--hub { padding-top: clamp(40px, 8vw, 96px); }
.hero { max-width: 50rem; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
[data-theme="dark"] .hero__eyebrow { color: var(--accent-3); }
.hero__title {
  margin: 22px 0 0; font-size: clamp(2.8rem, 9vw, 5.4rem); font-weight: 700; letter-spacing: -.03em;
  line-height: .98; overflow-wrap: break-word;
  background: linear-gradient(108deg, var(--text) 8%, var(--accent) 60%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { margin: 22px 0 0; max-width: 46ch; font-size: clamp(1.05rem, 2.4vw, 1.25rem); color: var(--text-dim); line-height: 1.6; }
.hero__meta { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__meta-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow);
  font-size: .86rem; font-weight: 600; color: var(--text-dim);
}
.hero__meta-item .material-symbols-rounded { font-size: 19px; color: var(--accent); }
.hero__cta { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 14px; }

/* button-in-button CTA */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 24px; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 600; font-size: .98rem; cursor: pointer; border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn__ic {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  transition: transform .3s var(--ease-out), background .25s var(--ease);
}
.btn__ic .material-symbols-rounded { font-size: 20px; }
.btn--primary { color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-3)); box-shadow: var(--shadow-accent); }
.btn--primary .btn__ic { background: rgba(255,255,255,.18); }
.btn--ghost { color: var(--text); background: var(--surface); border-color: var(--hairline); box-shadow: var(--shadow); }
.btn--ghost .btn__ic { background: var(--accent-soft); color: var(--accent); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:hover .btn__ic { transform: translate(3px, -2px); }

/* ---------- stat band (home) ---------- */
.statband { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.statband__item {
  padding: 22px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: var(--shadow), inset 0 1px 0 var(--inner-hi);
  display: flex; flex-direction: column; gap: 6px;
}
.statband__num {
  font-family: var(--font-display); font-size: clamp(1.55rem, 3.4vw, 2.05rem); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -.02em; white-space: nowrap;
  background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.statband__label { font-size: .82rem; font-weight: 600; color: var(--text-mute); }

/* ---------- theme grid (home) ---------- */
.themegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; }
.themecard {
  position: relative; padding: 24px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: var(--shadow), inset 0 1px 0 var(--inner-hi);
  display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.themecard::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: 0; transition: opacity .3s var(--ease);
}
.themecard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-line); }
.themecard:hover::after { opacity: 1; }
.themecard__ic {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 26px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.themecard__title { margin: 4px 0 0; font-size: 1.08rem; font-weight: 700; color: var(--text); }
.themecard__body { margin: 0; font-size: .9rem; color: var(--text-mute); line-height: 1.6; }

/* ---------- mission band (home) ---------- */
.missiongrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.misscard {
  display: flex; gap: 16px; padding: 22px; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--hairline-2);
}
.misscard__ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: 24px;
  color: var(--on-accent); background: linear-gradient(135deg, var(--accent), var(--accent-3)); box-shadow: var(--shadow-accent);
}
.misscard h3 { margin: 2px 0 6px; font-size: 1.02rem; color: var(--text); }
.misscard p { margin: 0; font-size: .9rem; color: var(--text-mute); line-height: 1.55; }

/* ---------- nav cards (home explore + generic grid) ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 16px; }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: 22px; cursor: pointer;
  box-shadow: var(--shadow), inset 0 1px 0 var(--inner-hi);
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover, .card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-line); outline: none; }
.card--nav .card__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; font-size: 26px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.card--nav .card__go {
  position: absolute; top: 22px; right: 22px; color: var(--text-mute); font-size: 22px;
  transition: transform .3s var(--ease-out), color .3s var(--ease);
}
.card--nav:hover .card__go { transform: translate(3px, -3px); color: var(--accent); }
.card__title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); padding-right: 28px; }
.card__summary { margin: 0; font-size: .9rem; color: var(--text-mute); line-height: 1.6; }
.card__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.tag {
  font-size: .72rem; font-weight: 600; color: var(--accent); background: var(--accent-soft);
  padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--accent-line);
}

/* ---------- organizers row (home) ---------- */
.orgrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
  padding: 26px clamp(20px, 4vw, 34px); border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--hairline-2);
}
.orgrow__title { font-family: var(--font-display); font-weight: 700; color: var(--text); font-size: 1.05rem; }
.orgrow__items { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-left: auto; }
.orgrow__item { display: flex; flex-direction: column; gap: 2px; }
.orgrow__role { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.orgrow__name { font-weight: 700; color: var(--text); }

/* ---------- toolbar / search / chips (gallery) ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px; }
.search {
  flex: 1 1 240px; min-width: 0; padding: 13px 18px; font: inherit;
  border-radius: var(--radius-pill); border: 1px solid var(--hairline);
  background: var(--surface); color: var(--text); box-shadow: inset 0 1px 0 var(--inner-hi);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search::placeholder { color: var(--text-mute); }
.search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 9px 16px; border-radius: var(--radius-pill); font-size: .85rem; font-weight: 600;
  color: var(--text-mute); border: 1px solid var(--hairline); background: var(--surface-2); cursor: pointer;
  transition: all .2s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--accent-line); transform: translateY(-1px); }
.chip--active { color: var(--on-accent); border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-3)); box-shadow: var(--shadow-accent); }
.result-count { margin: 0 0 18px; font-size: .85rem; font-weight: 600; color: var(--text-mute); }

/* ---------- bento (zones) ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 16px; }
.tile {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: var(--shadow), inset 0 1px 0 var(--inner-hi);
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent-line); }
.tile--lg   { grid-column: span 2; grid-row: span 2; }
.tile--tall { grid-row: span 2; }
.tile--wide { grid-column: span 2; }
.tile--md   { grid-column: span 2; }
.tile--accent { border-color: transparent; background: linear-gradient(150deg, var(--accent), var(--accent-3)); color: var(--on-accent); }
.tile--accent .tile__body { color: rgba(255,255,255,.88); }
.tile--accent .tile__icon { color: var(--on-accent); background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.tile__icon {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; font-size: 28px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.tile__value { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; }
.tile__title { margin: 0; font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight: 700; }
.tile__body { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text-mute); }
.tile--lg .tile__body { font-size: .98rem; }

/* ---------- timeline (events) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--accent), var(--accent-2)); opacity: .5; }
.tl-item { position: relative; padding: 0 0 22px 42px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: 0; top: 7px; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-3));
  border: 4px solid var(--bg); box-shadow: 0 0 0 2px var(--accent-line);
}
.tl-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 18px 22px; box-shadow: var(--shadow), inset 0 1px 0 var(--inner-hi);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.tl-item:hover .tl-card { transform: translateX(4px); border-color: var(--accent-line); box-shadow: var(--shadow-lg); }
.tl-date { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
[data-theme="dark"] .tl-date { color: var(--accent-3); }
.tl-title { margin: 6px 0 8px; font-size: 1.18rem; font-weight: 700; color: var(--text); }
.tl-body { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--text-mute); }

/* ---------- accordion (faq / visit) ---------- */
.accordion { display: flex; flex-direction: column; gap: 12px; max-width: 60rem; }
.acc-item {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow), inset 0 1px 0 var(--inner-hi);
  transition: border-color .25s var(--ease);
}
.acc-item[open] { border-color: var(--accent-line); }
.acc-q {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 22px; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  color: var(--text); list-style: none;
}
.acc-q::-webkit-details-marker { display: none; }
.acc-chevron { color: var(--accent); transition: transform .25s var(--ease); }
.acc-item[open] .acc-chevron { transform: rotate(180deg); }
.acc-a { padding: 0 22px 20px; font-size: .95rem; line-height: 1.7; color: var(--text-dim); }
.acc-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.acc-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px;
  border-radius: var(--radius-pill); font-size: .84rem; font-weight: 600;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.acc-link .material-symbols-rounded { font-size: 17px; }
.acc-link:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent-soft) 60%, var(--accent) 18%); }

/* ---------- dialog (gallery detail) ---------- */
.dialog {
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--surface-solid); color: var(--text);
  max-width: 600px; width: calc(100% - 32px); padding: 0; box-shadow: var(--shadow-lg);
}
.dialog::backdrop { background: rgba(4,6,16,.62); backdrop-filter: blur(4px); }
.dialog__bar {
  display: flex; align-items: center; padding: 12px 14px; position: sticky; top: 0;
  background: var(--surface-solid); border-bottom: 1px solid var(--hairline-2);
}
.dialog__spacer { flex: 1; }
.dialog__body { padding: 26px 28px 30px; }
.dialog__body h2 { margin: 0 0 12px; font-size: 1.5rem; color: var(--text); }
.dialog__body p { color: var(--text-dim); line-height: 1.7; margin: 0; }
.dialog__body .card__tags { margin: 0 0 16px; }

/* ---------- related-exhibitor list (guide dialog + card hint) ---------- */
.card__exmeta { margin: 8px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--accent); }
[data-theme="dark"] .card__exmeta { color: var(--accent-3); }
.card__exmeta .material-symbols-rounded { font-size: 16px; }
.ex-block { margin-top: 22px; border-top: 1px solid var(--hairline-2); padding-top: 18px; }
.ex-block__title { margin: 0 0 12px; font-size: 1rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ex-block__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent); font-size: .76rem; font-weight: 700; border: 1px solid var(--accent-line); }
.ex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ex-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px;
  border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--hairline-2); }
.ex-name { font-weight: 600; color: var(--text); font-size: .9rem; }
.ex-booth { flex: 0 0 auto; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: .76rem; font-weight: 700;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-pill); padding: 3px 10px; }
[data-theme="dark"] .ex-booth { color: var(--accent-3); }
.ex-more { margin-top: 14px; }

/* ---------- arcade (mini-games launcher + stage) ---------- */
.arcade__menu { margin-top: 4px; }
.gamecard {
  -webkit-appearance: none; appearance: none; font: inherit; text-align: left; width: 100%;
  align-items: flex-start; min-height: 176px; padding-top: 24px;
}
.gamecard__icon {
  display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; font-size: 28px;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
[data-theme="dark"] .gamecard__icon { color: var(--accent-3); }
.gamecard__go {
  position: absolute; top: 24px; right: 22px; color: var(--text-mute); font-size: 24px;
  transition: transform .3s var(--ease-out), color .3s var(--ease);
}
.gamecard:hover .gamecard__go, .gamecard:focus-visible .gamecard__go { transform: translateX(3px); color: var(--accent); }
.gamecard__title { margin: 4px 0 0; font-size: 1.12rem; font-weight: 700; color: var(--text); padding-right: 30px; }
.gamecard__desc { margin: 0; font-size: .9rem; color: var(--text-mute); line-height: 1.6; }
.gamecard__best {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 4px 11px; border-radius: var(--radius-pill);
}
.gamecard__best .material-symbols-rounded { font-size: 16px; color: #f5b301; }

.arcade--playing { display: flex; flex-direction: column; gap: 18px; }
.arcade__bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.arcade__now {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--text); min-width: 0;
}
.arcade__now .material-symbols-rounded { font-size: 24px; color: var(--accent); }
[data-theme="dark"] .arcade__now .material-symbols-rounded { color: var(--accent-3); }
.arcade__now > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arcade__mount { min-height: 60vh; }

/* ---- shared game UI kit (mini-games should reuse these) ---- */
.game { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.game__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.game__stats { display: flex; gap: 10px; flex-wrap: wrap; }
.game__stat {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow), inset 0 1px 0 var(--inner-hi);
}
.game__stat-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); }
.game__stat-val { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.game__board {
  position: relative; padding: clamp(14px, 4vw, 22px); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--inner-hi);
}
.game__btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit; font-weight: 600; font-size: .9rem;
  padding: 9px 16px; border-radius: var(--radius-pill); color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-3)); border: 1px solid transparent;
  box-shadow: var(--shadow-accent); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.game__btn:hover { transform: translateY(-2px); }
.game__btn:active { transform: translateY(0) scale(.97); }
.game__btn .material-symbols-rounded { font-size: 19px; }
.game__btn--ghost {
  color: var(--text); background: var(--surface); border-color: var(--hairline); box-shadow: var(--shadow);
}
.game__msg { color: var(--text-mute); font-size: .95rem; text-align: center; line-height: 1.6; }
.game__overlay {
  position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; text-align: center; padding: 24px;
  border-radius: inherit; background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.game__overlay h3 { margin: 0; font-size: clamp(1.4rem, 5vw, 2rem); color: var(--text); }
.game__overlay p { margin: 0; color: var(--text-dim); }

/* ---------- footer ---------- */
.footer {
  text-align: center; padding: 44px 16px; margin-top: clamp(48px, 8vw, 90px);
  color: var(--text-mute); font-size: .85rem; border-top: 1px solid var(--hairline-2);
}

/* ---------- entrance micro-motion for list items ---------- */
@media (prefers-reduced-motion: no-preference) {
  .page [data-item] { animation: rise .55s var(--ease-out) both; }
  .page [data-item]:nth-child(2) { animation-delay: .05s; }
  .page [data-item]:nth-child(3) { animation-delay: .1s; }
  .page [data-item]:nth-child(4) { animation-delay: .15s; }
  .page [data-item]:nth-child(5) { animation-delay: .2s; }
  .page [data-item]:nth-child(n+6) { animation-delay: .25s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--lg, .tile--wide, .tile--md { grid-column: span 2; }
  .tile--lg, .tile--tall { grid-row: span 1; }
  .orgrow__items { margin-left: 0; }
}
@media (max-width: 600px) {
  .grid, .themegrid, .missiongrid { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .tile--lg, .tile--wide, .tile--md, .tile--tall { grid-column: span 1; grid-row: span 1; }
  .hero__cta .btn { flex: 1 1 auto; justify-content: space-between; }
  .icon-btn__txt { display: none; }
}
@media (max-width: 380px) {
  .appbar__inner, .pagenav__inner, .page { padding-left: 13px; padding-right: 13px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  [data-reveal], .page [data-item] { opacity: 1 !important; transform: none !important; animation: none !important; }
}