:root {
  --canvas: #fff;
  --ink: #000;
  --g05: #00000005;
  --g10: #0000000a;
  --g15: #00000012;
  --g20: #0003;
  --g40: #0006;
  --g50: #00000080;
  --plate: #f5f5f7;
  --plate-2: #ececf0;
  --frost: #f5f5f5b8;
  --hue-a: #e5484d;
  --hue-b: #f5a524;
  --hue-c: #30a46c;
  --hue-d: #0091ff;
  --hue-e: #8e4ec6;
  --br: 16px;
  --br-card: 12px;
  --side: 340px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root[data-theme="dark"] {
  --canvas: #000;
  --ink: #fff;
  --g05: #ffffff08;
  --g10: #ffffff0f;
  --g15: #ffffff1a;
  --g20: #ffffff38;
  --g40: #ffffff73;
  --g50: #ffffff8c;
  --plate: #111113;
  --plate-2: #1a1a1d;
  --frost: #1c1c1eb8;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background .4s var(--ease), color .4s var(--ease);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--canvas); }
b { font-weight: 600; }

.label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--g50);
  margin-bottom: 8px;
}
.dim { color: var(--g50); }

/* Layout */
.wrapper { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }

/* Sidebar */
.side { position: sticky; top: 0; height: 100vh; padding: 12px; }
.side__inner {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  display: flex; flex-direction: column; gap: 22px;
  background: var(--plate);
  border-radius: var(--br);
  padding: 14px 10px 16px;
}
.side__inner::-webkit-scrollbar { display: none; }
.side__top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
.brand { font-family: var(--mono); font-size: 16px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.theme { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--g50); display: flex; gap: 6px; }
.theme span { transition: color .2s; }
:root[data-theme="light"] .theme [data-v="light"],
:root[data-theme="dark"] .theme [data-v="dark"] { color: var(--ink); }
.side__about { padding: 0 6px; }
.side__about p { font-size: 14px; color: var(--ink); }
.links { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; }
.links a { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--g50); transition: color .2s; }
.links a:hover { color: var(--ink); }
.side__index .label { padding: 0 6px; }

.icard {
  display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: start;
  width: 100%; text-align: left;
  padding: 8px; border-radius: var(--br-card);
  transition: background .2s;
}
.icard:hover, .icard:focus-visible { background: var(--g10); outline: none; }
.icard__thumb {
  width: 48px; height: 48px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 500; font-size: 15px; color: #fff;
  background: var(--hue);
  box-shadow: inset 0 0 0 1px #ffffff26, inset 0 -12px 20px #0000002e;
}
.icard__head { display: flex; gap: 8px; align-items: baseline; font-weight: 500; font-size: 14px; }
.icard__head small { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--g50); font-weight: 400; }
.icard p { font-size: 12.5px; color: var(--g50); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Main */
.main { padding: 12px 12px 12px 0; min-width: 0; }
section { margin-bottom: 12px; }

.intro {
  position: relative; overflow: hidden;
  border-radius: var(--br);
  background: var(--plate);
  padding: clamp(28px, 6vw, 88px) clamp(22px, 5vw, 72px);
  min-height: calc(100vh - 24px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.intro__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--g20) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(360px circle at var(--mx, 70%) var(--my, 30%), #000 0%, transparent 70%);
  mask-image: radial-gradient(360px circle at var(--mx, 70%) var(--my, 30%), #000 0%, transparent 70%);
}
.intro > *:not(.intro__grid):not(.intro__net) { position: relative; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--g50); display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--hue-c); box-shadow: 0 0 0 0 #30a46c80; animation: pulse 2s infinite; }
@keyframes pulse { 70%, 100% { box-shadow: 0 0 0 9px #30a46c00; } }
.statement {
  font-size: clamp(2.1rem, 5.4vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.02;
  max-width: 15ch;
}
.statement em { font-style: normal; color: var(--g40); }
.statement .w { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(6px); animation: rise .9s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
.meta { display: flex; gap: 48px; margin-top: 48px; flex-wrap: wrap; }
.meta p { font-size: 15px; }
.meta a { border-bottom: 1px solid var(--g20); transition: border-color .2s; }
.meta a:hover { border-color: var(--ink); }
.bio { max-width: 62ch; margin-top: 28px; font-size: 16px; color: var(--g50); }
.bio b { color: var(--ink); font-weight: 500; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 44px; max-width: 640px; }
.stats div { padding: 14px 16px; border-radius: var(--br-card); background: var(--canvas); }
.stats dt { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--g50); }
.stats dd { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; margin-top: 2px; }
.stats div:first-child dd::after { content: "+"; color: var(--g40); }

/* Section heads */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 36px 8px 18px; }
.sec-head h2 { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.filters { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--plate); }
.filters button { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; color: var(--g50); transition: background .2s, color .2s; }
.filters button:hover { color: var(--ink); }
.filters button.active { background: var(--canvas); color: var(--ink); box-shadow: 0 1px 3px #0000001a; }

/* Work grid */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.card { min-width: 0; }
.card { text-align: left; display: flex; flex-direction: column; gap: 12px; transition: opacity .35s var(--ease); }
.card.hide { display: none; }
.card.wide { grid-column: 1 / -1; }
.card__plate {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 11;
  border-radius: var(--br);
  background: var(--plate);
  transition: transform .5s var(--ease);
}
.card.wide .card__plate { aspect-ratio: 16 / 8; }
.card:hover .card__plate { transform: scale(.985); }
.card__plate::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--g10); pointer-events: none;
}
.card__info { padding: 0 6px 18px; display: flex; flex-direction: column; gap: 2px; }
.card__tag { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--g50); }
.card__title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.card__desc { color: var(--g50); font-size: 14px; max-width: 60ch; }
.card__open {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  background: var(--frost); backdrop-filter: blur(20px);
  opacity: 0; transform: translateY(-4px); transition: .3s var(--ease);
}
.card:hover .card__open, .card:focus-visible .card__open { opacity: 1; transform: none; }
.card:focus-visible { outline: none; }
.card:focus-visible .card__plate { box-shadow: 0 0 0 2px var(--ink); }

/* Visuals inside plates */
.vis { position: absolute; inset: 0; display: grid; place-items: center; padding: 8%; }

/* Gamorite */
.v-gam { background: #0a0a0b; color: #fff; place-items: stretch; padding: clamp(18px, 3vw, 36px); }
.v-gam__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.v-gam__live { display: inline-flex; align-items: center; gap: 6px; }
.v-gam__live i { width: 6px; height: 6px; border-radius: 50%; background: #ff4d6d; animation: pulse-r 1.6s infinite; }
@keyframes pulse-r { 50% { opacity: .3; } }
.v-gam h3 { align-self: end; font-size: clamp(2.4rem, 7vw, 5.6rem); font-weight: 600; letter-spacing: -0.05em; line-height: .92; }
.v-gam h3 span { background: linear-gradient(90deg, #f0abfc, #a5b4fc, #67e8f9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v-gam__lanes { display: grid; gap: 8px; align-self: end; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lane { display: flex; gap: 8px; width: max-content; animation: lane 26s linear infinite; }
.lane.rev { animation-direction: reverse; animation-duration: 32s; }
.lane span { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: #ffffff14; border: 1px solid #ffffff1f; white-space: nowrap; }
@keyframes lane { to { transform: translateX(-50%); } }

/* Odds board */
.v-odds { background: #0a0a0b; color: #fff; }
.board { width: 100%; max-width: 440px; display: grid; gap: 6px; font-family: var(--mono); font-size: 12px; }
.board__head { display: flex; justify-content: space-between; color: #ffffff73; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 0 4px 6px; }
.row { display: grid; grid-template-columns: 1fr 64px 64px; gap: 6px; align-items: center; }
.row > span:first-child { color: #ffffffcc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.odd { text-align: center; padding: 8px 0; border-radius: 8px; background: #ffffff0f; transition: background .5s, color .5s; }
.odd.up { background: #30a46c33; color: #4ade80; }
.odd.down { background: #e5484d33; color: #ff7b7f; }

/* Agent / MCP flow */
.v-flow { background: linear-gradient(160deg, #eaf4ff, #d8e9ff); }
:root[data-theme="dark"] .v-flow { background: linear-gradient(160deg, #06121f, #0a1b30); }
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; max-width: 520px; font-family: var(--mono); font-size: 11px; }
.node { padding: 12px 10px; border-radius: 10px; background: var(--canvas); text-align: center; box-shadow: 0 6px 20px #0091ff1f, inset 0 0 0 1px var(--g10); }
.node b { display: block; font-family: var(--sans); font-size: 13px; font-weight: 500; }
.node small { color: var(--g50); }
.stack-col { display: grid; gap: 6px; }
.stack-col .node { padding: 8px; }
.wire { width: 36px; height: 2px; background: linear-gradient(90deg, transparent, var(--hue-d), transparent); background-size: 200% 100%; animation: wire 1.4s linear infinite; }
@keyframes wire { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Street lights / IoT */
.v-iot { background: #0b0b0d; }
.lights { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; width: 100%; max-width: 420px; }
.lights i { aspect-ratio: 1; border-radius: 50%; background: #ffffff14; transition: background .6s, box-shadow .6s; }
.lights i.on { background: var(--hue-b); box-shadow: 0 0 14px #f5a524aa; }

/* Factory gauges */
.v-gauge { background: linear-gradient(160deg, #eefaf3, #d7f2e3); }
:root[data-theme="dark"] .v-gauge { background: linear-gradient(160deg, #04140b, #082316); }
.gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 440px; }
.gauge { background: var(--canvas); border-radius: 12px; padding: 12px; box-shadow: inset 0 0 0 1px var(--g10); }
.gauge small { font-family: var(--mono); font-size: 10px; color: var(--g50); text-transform: uppercase; letter-spacing: .05em; }
.gauge b { display: block; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.spark { height: 28px; display: flex; align-items: end; gap: 2px; margin-top: 6px; }
.spark i { flex: 1; background: var(--hue-c); border-radius: 2px; opacity: .8; transition: height .6s var(--ease); }

/* Search */
.v-search { background: linear-gradient(160deg, #fff4ec, #ffe5d4); }
:root[data-theme="dark"] .v-search { background: linear-gradient(160deg, #1a0d04, #261408); }
.search { width: 100%; max-width: 420px; display: grid; gap: 8px; }
.search__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--canvas); box-shadow: 0 8px 24px #f5a52422; font-size: 14px; }
.search__bar::before { content: "⌕"; color: var(--g50); font-size: 16px; }
.caret { width: 1px; height: 16px; background: var(--ink); animation: blink 1s steps(1) infinite; margin-left: -6px; }
@keyframes blink { 50% { opacity: 0; } }
.result { display: flex; justify-content: space-between; padding: 9px 14px; border-radius: 10px; background: var(--canvas); opacity: .9; font-size: 13px; transition: transform .5s var(--ease); }
.result small { font-family: var(--mono); color: var(--g50); font-size: 11px; }

/* Services mesh */
.v-mesh { background: var(--plate); }
.mesh { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; width: 100%; max-width: 400px; }
.mesh i { aspect-ratio: 1; border-radius: 8px; background: var(--g10); transition: background .4s; }
.mesh i.hot { background: var(--hue-d); }

/* Cloud / mono */
.v-mono { background: var(--plate); }
.mono-word { font-family: var(--mono); font-size: clamp(1.6rem, 4vw, 2.8rem); letter-spacing: -0.02em; color: var(--g40); text-align: center; line-height: 1.15; }
.mono-word b { color: var(--ink); font-weight: 500; }

/* Toolkit */
.tk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tk > div, .edu > div { background: var(--plate); border-radius: var(--br); padding: 20px; }
.tk p { font-size: 14.5px; }
.edu { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-top: 12px; }

/* Contact */
.contact { background: var(--plate); border-radius: var(--br); padding: clamp(28px, 6vw, 72px); margin-top: 36px; margin-bottom: 0; }
.contact h2 { font-size: clamp(1.8rem, 4.4vw, 3.6rem); font-weight: 500; letter-spacing: -0.045em; line-height: 1.05; max-width: 18ch; margin-top: 8px; }
.mail { display: inline-block; color: var(--g40); transition: color .25s; }
.mail:hover { color: var(--ink); }
.contact .links { margin-top: 28px; }
.foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 64px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--g50); }

/* Sheet (detail dialog) */
.sheet {
  margin: auto; border: 0; padding: 0;
  width: min(720px, calc(100% - 24px)); max-height: calc(100vh - 24px);
  border-radius: 20px;
  background: var(--canvas); color: var(--ink);
  box-shadow: 0 30px 80px #00000040, 0 0 0 1px var(--g10);
}
.sheet[open] { animation: sheet-in .45s var(--ease); }
.sheet::backdrop { background: #0000004d; backdrop-filter: blur(8px); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.sheet__plate { position: relative; aspect-ratio: 16 / 7; overflow: hidden; }
.sheet__content { padding: 24px 28px 30px; }
.sheet__content h3 { font-size: 28px; font-weight: 500; letter-spacing: -0.03em; margin: 4px 0 4px; }
.sheet__role { color: var(--g50); }
.sheet__content ul { list-style: none; display: grid; gap: 10px; margin: 22px 0; }
.sheet__content li { position: relative; padding-left: 18px; font-size: 15px; }
.sheet__content li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--hue); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { font-family: var(--mono); font-size: 11px; padding: 5px 10px; border-radius: 999px; background: var(--plate); color: var(--g50); }
.sheet__close {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; background: var(--frost); backdrop-filter: blur(20px); color: var(--ink);
}
.sheet__link { display: inline-flex; margin-top: 22px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--canvas); }

/* Responsive */
@media (max-width: 1080px) {
  :root { --side: 290px; }
  .tk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .wrapper { grid-template-columns: 1fr; }
  .side { position: static; height: auto; padding: 12px 12px 0; }
  .side__inner { gap: 16px; }
  .side__index { display: none; }
  .main { padding: 12px; }
  .intro { min-height: auto; padding-top: 72px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .card.wide .card__plate { aspect-ratio: 16 / 11; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edu { grid-template-columns: 1fr; }
  .card__open { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .tk { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; justify-items: stretch; }
  .wire { width: 2px; height: 18px; margin: 0 auto; background: linear-gradient(180deg, transparent, var(--hue-d), transparent); }
  .lights { grid-template-columns: repeat(8, 1fr); }
  .lights i:nth-child(n+33) { display: none; }
  .sheet__content { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .statement .w { opacity: 1; transform: none; filter: none; }
}

/* Golang highlight */
:root { --go: #00add8; }
.go {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px;
}
.go__text, .go__code { border-radius: var(--br); }
.go__text { background: var(--plate); padding: clamp(22px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; }
.go__mark {
  width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  background: var(--go); color: #fff; font-weight: 700; font-size: 24px; letter-spacing: -0.04em;
  box-shadow: 0 10px 30px #00add855, inset 0 -12px 20px #0000002e;
}
.go__text h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; }
.go__text p { color: var(--g50); max-width: 52ch; }
.go__stats { display: flex; gap: 8px; }
.go__stats div { background: var(--canvas); border-radius: var(--br-card); padding: 12px 16px; }
.go__stats dt { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--g50); }
.go__stats dd { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; }
.go__chips span { background: var(--canvas); }
.go__code {
  margin: 0; overflow-x: auto; background: #0b1117; color: #d6deeb;
  padding: clamp(20px, 3.4vw, 36px); font-family: var(--mono); font-size: 13px; line-height: 1.7; tab-size: 4;
  box-shadow: inset 0 0 0 1px #ffffff12; position: relative;
}
.go__code::before { content: "engine.go"; display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: #ffffff59; margin-bottom: 16px; }
.go__code .c { color: #637777; font-style: italic; }
.go__code .k { color: #00add8; }
.go__code .t { color: #ffcb8b; }
.go__code .f { color: #82aaff; }
.go__code .o { color: #c792ea; }
.go-pill { display: inline-block; font-weight: 500; padding: 1px 9px; margin-right: 4px; border-radius: 999px; background: var(--go); color: #fff; }
@media (max-width: 960px) { .go { grid-template-columns: minmax(0, 1fr); } }
.chips span.chip-go { background: var(--go); color: #fff; }

/* Company logos */
.has-logo { overflow: hidden; }
.has-logo img { width: 100%; height: 100%; object-fit: contain; padding: 18%; display: block; }
.icard__thumb.has-logo { box-shadow: inset 0 0 0 1px var(--g10); }
.card__logo, .sheet__logo {
  display: inline-grid; place-items: center; vertical-align: middle;
  border-radius: 6px; color: #fff; font-family: var(--mono); font-weight: 500;
  background: var(--hue); box-shadow: inset 0 0 0 1px var(--g15);
}
.card__logo { width: 22px; height: 22px; font-size: 11px; margin: -3px 8px 0 0; }
.card__logo.has-logo img { padding: 12%; }
.sheet__logo { width: 34px; height: 34px; font-size: 15px; border-radius: 9px; margin: -4px 12px 0 0; }

/* Logo tile tweaks */
.has-logo img { padding: var(--pad, 18%); }
.has-logo.cover img { padding: 0; object-fit: cover; }
.card__logo.has-logo img { padding: calc(var(--pad, 18%) * 0.6); }
.card__logo.has-logo.cover img { padding: 0; }

/* ---------- Gamorite ecosystem ---------- */
.plate-auto { aspect-ratio: auto !important; }
.plate-auto .vis { position: relative; inset: auto; }
.v-gam { overflow: hidden; }
.gx { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr); gap: clamp(16px, 2.4vw, 28px); width: 100%; }
.gx-hero { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.gx-hero h3 { margin-top: auto; }
.gx-sub { color: #ffffffb3; font-size: 15px; max-width: 32ch; }
.gx-pillars { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.gx-pillars li { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: #ffffff1f; }
.gx-pillars li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; background: currentColor; }
.gx-pillars li:nth-child(1) { color: #fbbf24; } .gx-pillars li:nth-child(2) { color: #67e8f9; } .gx-pillars li:nth-child(3) { color: #4ade80; }
.gx-pillars li:nth-child(4) { color: #f472b6; } .gx-pillars li:nth-child(5) { color: #c4b5fd; }
.v-gam .v-gam__lanes { margin-top: 4px; }
.v-gam > .gx-hero { height: 100%; }

.gx-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "tour tour comm" "lfg event clip"; gap: 10px; min-width: 0; }
.gt { background: #ffffff0f; border: 1px solid #ffffff1a; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; backdrop-filter: blur(6px); transition: border-color .3s, background .3s; }
.gt:hover { border-color: #ffffff33; background: #ffffff16; }
.gt-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.gt-h span { color: #fff; }
.gt-h em { font-style: normal; color: #ffffff80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-h em.live::before { content: "● "; color: #ff4d6d; animation: pulse-r 1.6s infinite; }
.gt-tour { grid-area: tour; } .gt-comm { grid-area: comm; } .gt-lfg { grid-area: lfg; } .gt-event { grid-area: event; } .gt-clip { grid-area: clip; }

/* Bracket */
.bracket { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: center; flex: 1; }
.br-col { display: grid; gap: 8px; position: relative; }
.br-semi { gap: 46px; }
.br-col:not(.br-final)::after { content: ""; position: absolute; right: -9px; top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: #ffffff1f; }
.br-team { font-size: 12.5px; padding: 7px 10px; border-radius: 8px; background: #ffffff12; border: 1px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .4s, opacity .4s, border-color .4s, transform .4s; }
.br-team.win { background: #8e4ec64d; border-color: #c4b5fd80; }
.br-team.out { opacity: .35; }
.br-team.pop { animation: pop .5s var(--ease); }
.br-champ { text-align: center; font-weight: 500; }
.br-champ.win { background: linear-gradient(90deg, #f59e0b55, #f472b655); border-color: #fbbf24aa; box-shadow: 0 0 24px #fbbf2440; animation: pop .5s var(--ease); }
.br-final small { text-align: center; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #fbbf24; }
@keyframes pop { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: none; } }

/* Community feed */
.feed { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 104px; overflow: hidden; flex: 1; }
.msg { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.35; color: #ffffffcc; animation: msg-in .45s var(--ease); }
.msg b { color: #fff; font-weight: 500; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px); } }
.msg i, .members i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 600; color: #0b0614; }
.members { display: flex; align-items: center; }
.members i { margin-right: -6px; box-shadow: 0 0 0 2px #0a0a0b; }
.online { margin-left: 14px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #ffffff99; display: inline-flex; align-items: center; gap: 6px; }
.online b { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: pulse 2s infinite; }

/* LFG */
.lfg-need { font-size: 14px; color: #ffffffcc; }
.lfg-need b { color: #fff; font-weight: 600; }
.slots { display: flex; gap: 6px; }
.slots i { width: 26px; height: 26px; border-radius: 50%; border: 1.5px dashed #ffffff40; transition: background .3s, border-color .3s; }
.slots i.on { border: 1.5px solid transparent; background: linear-gradient(135deg, #4ade80, #22d3ee); }
.slots i.pop { animation: pop .45s var(--ease); }
.lfg-status { font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: #ffffff80; margin-top: auto; }
.gt-lfg.ready { border-color: #4ade8066; }
.gt-lfg.ready .lfg-status { color: #4ade80; }

/* Events */
.ev-title { font-size: 15px; font-weight: 500; line-height: 1.25; }
.ev-title span { font-size: 12px; color: #ffffff99; font-weight: 400; }
.countdown { margin-top: auto; font-family: var(--mono); font-size: 22px; letter-spacing: .02em; color: #ffffff66; }
.countdown b { font-weight: 500; color: #fff; display: inline-block; min-width: 1.3em; text-align: center; padding: 2px 3px; border-radius: 6px; background: #f472b626; }

/* Creator clip */
.clip { position: relative; flex: 1; min-height: 96px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #f472b6, #7c3aed 55%, #1e1b4b); background-size: 200% 200%; animation: clip-bg 6s ease-in-out infinite alternate; }
@keyframes clip-bg { to { background-position: 100% 100%; } }
.clip-rec { position: absolute; left: 8px; top: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; display: inline-flex; gap: 5px; align-items: center; padding: 2px 6px; border-radius: 4px; background: #0006; }
.clip-rec i { width: 6px; height: 6px; border-radius: 50%; background: #ff4d6d; animation: pulse-r 1s infinite; }
.clip-play { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: #ffffff33; backdrop-filter: blur(6px); }
.clip-title { position: absolute; left: 8px; bottom: 14px; font-size: 11.5px; font-weight: 500; }
.clip-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #ffffff33; }
.clip-bar i { display: block; height: 100%; width: 0; background: #fff; animation: clip-prog 5s linear infinite; }
@keyframes clip-prog { to { width: 100%; } }
.hearts { position: absolute; inset: 0; pointer-events: none; }
.hearts i { position: absolute; bottom: 10px; font-style: normal; font-size: 13px; animation: float-up 2.2s ease-out forwards; }
@keyframes float-up { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-80px) scale(1.15) rotate(12deg); } }

@media (max-width: 1240px) {
  .gx { grid-template-columns: minmax(0, 1fr); }
  .gx-hero h3 { margin-top: 18px; }
}
@media (max-width: 700px) {
  .gx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "tour tour" "comm comm" "lfg event" "clip clip"; }
}
@media (max-width: 420px) {
  .gx-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tour" "comm" "lfg" "event" "clip"; }
}

/* ---------- Buildwealth: trading + payments ---------- */
.v-trade { background: #07090d; color: #fff; display: flex; flex-direction: column; gap: 10px; place-items: stretch; padding: 5%; }
.tr-chart { flex: 1.5; display: flex; flex-direction: column; gap: 8px; min-height: 0; background: #ffffff08; border: 1px solid #ffffff12; border-radius: 12px; padding: 12px; }
.tr-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); }
.tr-sym { font-size: 10.5px; letter-spacing: .06em; color: #ffffff80; }
.tr-px { display: flex; gap: 8px; align-items: baseline; }
.tr-price { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.tr-chg { font-style: normal; font-size: 11px; padding: 2px 6px; border-radius: 5px; }
.tr-chg.up { color: #4ade80; background: #30a46c26; }
.tr-chg.down { color: #ff7b7f; background: #e5484d26; }
.candles { width: 100%; flex: 1; min-height: 60px; display: block; }
.tr-book { display: flex; gap: 6px; font-family: var(--mono); font-size: 10.5px; flex-wrap: wrap; align-items: center; }
.tr-book span { padding: 4px 8px; border-radius: 6px; }
.bid { background: #30a46c1f; color: #86efac; } .ask { background: #e5484d1f; color: #fda4af; }
.bid b, .ask b { font-weight: 500; color: #fff; }
.fill { margin-left: auto; color: #4ade80; opacity: 0; }
.fill.show { animation: fill 1.6s var(--ease); }
@keyframes fill { 15%, 70% { opacity: 1; } 100% { opacity: 0; } }

.pay { flex: 1; display: grid; grid-template-columns: auto 1fr auto 1fr auto; grid-template-rows: 1fr auto; align-items: center; gap: 6px 8px; background: #ffffff08; border: 1px solid #ffffff12; border-radius: 12px; padding: 10px 12px; font-family: var(--mono); font-size: 10.5px; }
.pay-node { padding: 8px 10px; border-radius: 8px; background: #0091ff1f; border: 1px solid #0091ff40; text-align: center; line-height: 1.25; letter-spacing: .03em; text-transform: uppercase; }
.pay-router { background: #0091ff33; }
.pay-wire { position: relative; height: 2px; background: #ffffff1a; border-radius: 2px; min-width: 14px; }
.pay-wire i { position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #0091ff; box-shadow: 0 0 10px #0091ff; opacity: 0; }
.pay-wire i.go { animation: packet .7s var(--ease) forwards; }
.pay-wire:nth-of-type(4) i.go { animation-delay: .5s; }
@keyframes packet { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
.pay-gws { display: grid; gap: 3px; }
.gw { padding: 3px 8px; border-radius: 5px; background: #ffffff0d; color: #ffffff99; text-transform: uppercase; letter-spacing: .03em; transition: background .3s, color .3s; }
.gw.hot { background: #30a46c40; color: #fff; }
.pay-log { grid-column: 1 / -1; display: flex; gap: 12px; color: #ffffff80; overflow: hidden; white-space: nowrap; }
.pay-log span { animation: msg-in .4s var(--ease); }
.pay-log b { color: #4ade80; font-weight: 400; }
.sheet .v-trade { padding: 3%; }

/* ---------- Applied AI ---------- */
.ai-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; }
.ai-text { background: var(--plate); border-radius: var(--br); padding: clamp(22px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; }
.ai-text h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; }
.ai-text p { color: var(--g50); max-width: 52ch; }
.ai-points { list-style: none; display: grid; gap: 8px; margin-top: 4px; }
.ai-points li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--g50); }
.ai-points li b { color: var(--ink); font-weight: 500; }
.ai-points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 2px; background: var(--hue-e); }
.ai-vis { border-radius: var(--br); background: radial-gradient(120% 80% at 100% 0%, #8e4ec633, transparent 60%), #0a0a0d; color: #fff; padding: clamp(18px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; min-height: 380px; box-shadow: inset 0 0 0 1px #ffffff12; }
.ai-chat { display: grid; gap: 8px; min-height: 92px; }
.ai-q, .ai-a { max-width: 85%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.ai-q { justify-self: end; background: #0091ff; border-bottom-right-radius: 4px; }
.ai-a { justify-self: start; background: #ffffff14; border-bottom-left-radius: 4px; }
.ai-a:empty { padding: 0; }
.ai-a:not(:empty) { animation: msg-in .4s var(--ease); }
.ai-pipe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ai-pipe i { flex: 1; min-width: 10px; height: 2px; background: #ffffff1a; border-radius: 2px; }
.ai-step { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 8px 10px; border-radius: 9px; background: #ffffff0d; border: 1px solid #ffffff14; color: #ffffff80; text-align: center; line-height: 1.2; transition: all .35s var(--ease); }
.ai-step small { display: block; font-size: 9px; color: #ffffff59; text-transform: none; letter-spacing: 0; margin-top: 2px; }
.ai-step.on { color: #fff; background: #8e4ec640; border-color: #c4b5fd80; box-shadow: 0 0 18px #8e4ec640; }
.ai-step.on + i { background: linear-gradient(90deg, #c4b5fd, #67e8f9); }
.ai-log { margin-top: auto; display: grid; gap: 4px; font-family: var(--mono); font-size: 12px; color: #ffffffa6; min-height: 92px; align-content: end; }
.ai-log span { animation: msg-in .35s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-log span:nth-child(3) { color: #4ade80; }
@media (max-width: 960px) { .ai-card { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ai-pipe i { display: none; } .ai-pipe { gap: 4px; } }

/* Fixes */
.gx-hero h3 { align-self: start; font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
.msg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ai-vis { min-height: 340px; }
@media (max-width: 860px) {
  .card__plate { aspect-ratio: auto !important; }
  .card__plate .vis { position: relative; inset: auto; min-height: 280px; }
  .tr-chart { min-height: 190px; }
}

/* ---------- Cricbuzz: live score + search ---------- */
.v-cric { background: linear-gradient(160deg, #eafaf3, #d3f2e4); display: flex; flex-direction: column; gap: 10px; place-items: stretch; justify-content: center; padding: 6%; }
:root[data-theme="dark"] .v-cric { background: linear-gradient(160deg, #03140d, #062419); }
.score { background: var(--canvas); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; box-shadow: 0 8px 24px #00a86b1f, inset 0 0 0 1px var(--g10); }
.score__top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--g50); }
.score__top b { color: var(--ink); font-weight: 500; }
.score__live { display: inline-flex; align-items: center; gap: 6px; color: #e5484d; font-weight: 500; }
.score__live i { width: 6px; height: 6px; border-radius: 50%; background: #e5484d; animation: pulse-r 1.4s infinite; }
.score__teams { display: grid; gap: 2px; }
.team { display: flex; justify-content: space-between; align-items: baseline; }
.team .flag { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; }
.team b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.team.dim b { font-size: 13px; font-weight: 400; color: var(--g50); }
.balls { display: flex; gap: 5px; }
.ball { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 11px; font-weight: 500; background: var(--g10); animation: pop .4s var(--ease); }
.ball.b4 { background: #0091ff; color: #fff; } .ball.b6 { background: #8e4ec6; color: #fff; } .ball.bW { background: #e5484d; color: #fff; }
.score__meta { display: flex; gap: 12px; font-size: 12px; color: var(--g50); white-space: nowrap; overflow: hidden; }
.score__meta b { color: var(--ink); font-weight: 500; }
.sc-comm { overflow: hidden; text-overflow: ellipsis; }
.v-cric .search { max-width: none; gap: 6px; }
.v-cric .search__bar { box-shadow: 0 8px 24px #00a86b1a; padding: 9px 12px; font-size: 13px; }
.v-cric .results { display: grid; gap: 5px; min-height: 96px; align-content: start; }
.v-cric .result { padding: 7px 12px; font-size: 12.5px; animation: msg-in .4s var(--ease) backwards; }

/* ---------- Crumbs: round-ups → crypto ---------- */
.v-round { background: linear-gradient(160deg, #fff8e6, #ffeec2); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; place-items: stretch; padding: 6%; }
:root[data-theme="dark"] .v-round { background: linear-gradient(160deg, #161002, #241a04); }
.ru-label { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--g50); }
.ru-tx, .ru-jar, .ru-alloc { background: var(--canvas); border-radius: 12px; padding: 12px; box-shadow: inset 0 0 0 1px var(--g10); }
.ru-tx { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.ru-list { display: grid; gap: 6px; }
.ru-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; animation: msg-in .45s var(--ease); }
.ru-ico { font-size: 14px; }
.ru-what { display: grid; line-height: 1.2; min-width: 0; }
.ru-what small { font-family: var(--mono); font-size: 10px; color: var(--g50); }
.ru-up { font-family: var(--mono); font-size: 12px; font-weight: 500; color: #30a46c; }
.ru-port { display: grid; gap: 10px; grid-template-rows: auto 1fr; min-width: 0; }
.ru-jar { position: relative; overflow: hidden; display: grid; gap: 2px; }
.ru-jar b, .ru-alloc > b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.ru-coins i { position: absolute; right: 16px; top: -12px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fde68a, #f59e0b); box-shadow: 0 0 0 1.5px #d97706 inset; animation: coin 1s cubic-bezier(.5, 0, .8, .6) forwards; }
@keyframes coin { to { transform: translateY(54px); opacity: 0; } }
.ru-alloc { display: grid; gap: 5px; align-content: start; }
.ru-alloc.flash { animation: invest 1.2s var(--ease); }
@keyframes invest { 30% { box-shadow: inset 0 0 0 1px #30a46c, 0 0 24px #30a46c55; } }
.ru-bar { display: grid; grid-template-columns: 36px 1fr 30px; gap: 6px; align-items: center; font-family: var(--mono); font-size: 10.5px; }
.ru-bar i { height: 6px; border-radius: 6px; background: var(--g10); overflow: hidden; }
.ru-bar em { display: block; height: 100%; border-radius: 6px; animation: grow 1.2s var(--ease); }
@keyframes grow { from { width: 0 !important; } }
.ru-bar small { color: var(--g50); text-align: right; }
@media (max-width: 420px) {
  /* Keep the desktop side-by-side layout, just denser */
  .v-round { gap: 8px; padding: 5%; }
  .ru-tx, .ru-jar, .ru-alloc { padding: 9px; border-radius: 10px; }
  .ru-tx { gap: 6px; }
  .ru-label { font-size: 8.5px; letter-spacing: .04em; }
  .ru-row { grid-template-columns: 16px minmax(0, 1fr) auto; gap: 5px; font-size: 11.5px; }
  .ru-ico { font-size: 12px; }
  .ru-what small { font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ru-up { font-size: 10.5px; }
  .ru-port { gap: 8px; }
  .ru-jar b, .ru-alloc > b { font-size: 16px; }
  .ru-bar { grid-template-columns: 30px minmax(0, 1fr) 24px; gap: 4px; font-size: 9px; }
}

/* ---------- Hero: multi-cloud network ---------- */
.intro__net {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #0000004d 0%, #000 55%);
  mask-image: linear-gradient(90deg, #0000004d 0%, #000 55%);
}
.prompt { font-family: var(--mono); font-size: 13px; color: var(--g50); margin: -12px 0 18px; min-height: 1.5em; }
.prompt__path { color: var(--hue-c); }
.prompt__sym { color: var(--g40); }
#promptCmd { color: var(--ink); }
.prompt__cursor { display: inline-block; width: 8px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--ink); animation: blink 1s steps(1) infinite; }
.statement { max-width: 14ch; }
@media (max-width: 860px) {
  .intro__net { opacity: .55; -webkit-mask-image: linear-gradient(180deg, #000 0%, #0006 60%, #000 100%); mask-image: linear-gradient(180deg, #000 0%, #0006 60%, #000 100%); }
}

/* Applied AI as a grid card */
.vis.ai-vis { border-radius: 0; min-height: 0; box-shadow: none; padding: 6%; display: flex; flex-direction: column; justify-content: center; gap: 14px; place-items: stretch; }
.vis.ai-vis .ai-chat { min-height: 84px; }
.vis.ai-vis .ai-log { margin-top: 0; min-height: 74px; font-size: 11.5px; }
.vis.ai-vis .ai-q, .vis.ai-vis .ai-a { font-size: 13px; padding: 8px 12px; }
.vis.ai-vis .ai-step { padding: 6px 8px; font-size: 10px; }
.card__logo:not(.has-logo), .sheet__logo:not(.has-logo) { font-size: 9.5px; }
.vis.ai-vis .ai-a:empty { padding: 0; }
.statement { font-size: clamp(2rem, 4.6vw, 4rem); max-width: 15ch; }

/* ---------- Mobile polish ---------- */
.mnav { display: none; }
@media (hover: none) { .card__open { display: none; } }
@media (max-width: 860px) {
  .wrapper { min-height: 0; }
  html { scroll-padding-top: 72px; }

  /* Sidebar becomes a sticky, frosted top bar */
  .side { position: sticky; top: 0; z-index: 40; height: auto; padding: 8px 8px 0; }
  .side__inner { height: auto; padding: 10px 8px; gap: 0; background: var(--frost); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 0 0 1px var(--g10); }
  .side__top { gap: 12px; padding: 0 6px; }
  .side__about, .side__index { display: none; }
  .mnav { display: flex; gap: 14px; margin-left: auto; }
  .mnav a { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--g50); }
  .mnav a:active { color: var(--ink); }
  .theme__word { display: none; }
  .main { padding: 8px; }
  section { margin-bottom: 8px; }

  /* Hero */
  .intro { padding: 36px 20px 28px; }
  .intro__net { opacity: .4; }
  .eyebrow { margin-bottom: 18px; }
  .prompt { font-size: 12px; margin: -6px 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .statement { font-size: clamp(2rem, 9vw, 2.6rem); max-width: none; }
  .meta { gap: 20px 32px; margin-top: 28px; }
  .bio { font-size: 15px; margin-top: 20px; }
  .stats { margin-top: 28px; gap: 6px; }
  .stats div { padding: 12px 14px; }
  .stats dd { font-size: 24px; }

  /* Section heads + filters */
  .sec-head { padding: 26px 6px 12px; }
  .filters { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: none; }

  /* Cards */
  .card__open { display: none; }
  .grid { gap: 8px; }
  .card { gap: 10px; }
  .card__info { padding: 0 4px 16px; }
  .card__title { font-size: 16px; }

  /* Go, toolkit, contact */
  .go__code { font-size: 11px; padding: 18px; }
  .go__stats dd { font-size: 20px; }
  .tk > div, .edu > div { padding: 16px; }
  .contact { margin-top: 24px; padding: 28px 20px; }
  .contact h2 { font-size: clamp(1.7rem, 7.6vw, 2.4rem); }
  .mail { overflow-wrap: anywhere; }
  .foot { margin-top: 40px; }

  /* Detail sheet docks to the bottom like a native sheet */
  .sheet { width: 100%; max-width: none; margin: auto 0 0; max-height: 88vh; border-radius: 20px 20px 0 0; }
  .sheet[open] { animation: sheet-up .4s var(--ease); }
  .sheet__plate { aspect-ratio: 16 / 9; }
  .sheet__content h3 { font-size: 24px; }
}
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } }
@media (max-width: 380px) {
  .mnav { gap: 10px; }
  .mnav a, .theme { font-size: 10px; }
  .stats dt { font-size: 9px; }
}
@media (max-width: 420px) {
  .gx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "tour tour" "comm comm" "lfg event" "clip clip"; }
  .gt-lfg .slots i { width: 22px; height: 22px; }
  .countdown { font-size: 18px; }
}
@media (max-width: 330px) {
  .gx-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tour" "comm" "lfg" "event" "clip"; }
}
@media (min-width: 600px) and (max-width: 860px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Mobile burger menu ---------- */
.side__drawer { display: contents; }
.burger, .side__sections { display: none; }
@media (max-width: 860px) {
  .mnav { display: none; }
  .side__top { justify-content: flex-start; }
  .theme { margin-left: auto; }
  .burger { display: block; position: relative; width: 34px; height: 30px; margin-right: -4px; border-radius: 8px; }
  .burger:active { background: var(--g10); }
  .burger span { position: absolute; left: 8px; right: 8px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease); }
  .burger span:first-child { top: 11px; }
  .burger span:last-child { top: 18px; }
  .menu-open .burger span:first-child { top: 14.5px; transform: rotate(45deg); }
  .menu-open .burger span:last-child { top: 14.5px; transform: rotate(-45deg); }

  .side__drawer {
    display: grid; gap: 22px; align-content: start;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .45s var(--ease), opacity .3s var(--ease), padding .45s var(--ease);
  }
  .menu-open .side__drawer {
    max-height: calc(100dvh - 80px); overflow-y: auto; opacity: 1; padding-top: 18px;
    overscroll-behavior: contain; scrollbar-width: none;
  }
  .side__drawer::-webkit-scrollbar { display: none; }
  .menu-open .side__about, .menu-open .side__index { display: block; }
  .menu-open .side__inner { background: var(--plate); box-shadow: 0 20px 60px #00000040, inset 0 0 0 1px var(--g10); }
  .side__sections { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 6px; }
  .side__sections .label { width: 100%; }
  .side__sections a { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: var(--g10); }
  .icard { padding: 10px 8px; }
  html.menu-lock { overflow: hidden; }
  html.menu-lock .main { filter: blur(6px); opacity: .5; pointer-events: none; transition: filter .3s, opacity .3s; }
}

/* iOS WebKit shrink-wraps flex children inside <button>; force full-width plates */
.card, .card__plate, .card__info { width: 100%; }
@media (max-width: 860px) { .card__plate .vis { width: 100%; } }