:root {
  --bg: #100d1d;
  --s1: #1a1230;
  --s2: #21192e;
  --s3: #251b36;
  --ink: #fff9f2;
  --mute: #a8a1b9;
  --line: #39304c;
  --orange: #ff7358;
  --orange-hi: #ff9873;
  --peach: #ff8a64;
  --butter: #ffdc78;
  --lime: #d5fd78;
  --rose: #d66093;
  --plum: #77304a;
  --plum-ink: #461130;
  --mast: linear-gradient(110deg, #ff8a64, #f0756e 52%, #d66093);
  --r: 20px;
  --r-lg: 29px;
  --wrap: 1320px;
  --gut: clamp(16px, 3.2vw, 44px);
  --f: "DM Sans", "Noto Sans TC", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--f);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--butter); outline-offset: 3px; border-radius: 10px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
svg { width: 1em; height: 1em; flex: none; }

.btn {
  --shadow: var(--plum);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 16px;
  font: 900 16px/1 var(--f); letter-spacing: -.01em; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 6px 0 var(--shadow);
  transform: translateY(0);
  transition: transform .12s, box-shadow .12s, background .15s;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--shadow); }
.btn:active { transform: translateY(6px); box-shadow: 0 0 0 var(--shadow); }
.btn svg { font-size: 1.15em; }
.btn-butter { background: var(--butter); color: #2a1424; --shadow: #b9822f; }
.btn-orange { background: var(--orange); color: #fff9f2; --shadow: #9b3442; }
.btn-orange:hover { background: var(--orange-hi); }
.btn-dark { background: #1c1229; color: var(--butter); --shadow: #000; }
.btn-ghost { background: rgba(26, 18, 48, .55); color: var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 249, 242, .55), 0 6px 0 rgba(70, 17, 48, .55); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--ink), 0 4px 0 rgba(70, 17, 48, .55); }
.btn-lg { min-height: 60px; padding: 0 30px; font-size: 19px; border-radius: 18px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 12px; box-shadow: 0 4px 0 var(--shadow); }
.btn-sm:hover { box-shadow: 0 2px 0 var(--shadow); }

.top { position: sticky; top: 0; z-index: 40; background: rgba(16, 13, 29, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 22px; min-height: 76px; }
.logo {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 14px 9px; border-radius: 12px;
  background: var(--butter); color: #2a1424; text-decoration: none;
  font: 1000 21px/1 var(--f); letter-spacing: -.05em;
  transform: rotate(-3deg); box-shadow: 5px 5px 0 #ff704e;
}
.logo b { background: #2a1424; color: var(--butter); padding: 3px 6px 4px; border-radius: 7px; }
.top-nav { display: flex; gap: 4px; }
.top-nav a { padding: 10px 12px; border-radius: 12px; color: var(--mute); text-decoration: none; font-weight: 700; font-size: 15px; }
.top-nav a:hover { color: var(--ink); background: var(--s2); }
.search { position: relative; flex: 1; max-width: 420px; margin-left: auto; }
.search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--mute); font-size: 19px; }
.search input {
  width: 100%; height: 46px; padding: 0 16px 0 46px;
  border: 2px solid var(--line); border-radius: 999px; background: var(--s1);
  color: var(--ink); font: 600 15px var(--f);
}
.search input::placeholder { color: #8a829c; }
.search input:focus { outline: none; border-color: var(--butter); }
.chips { display: flex; gap: 8px; padding-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line);
  background: transparent; color: var(--ink); font: 700 14px var(--f); cursor: pointer; text-decoration: none;
}
.chip:hover { border-color: var(--peach); }
.chip[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); }
.chip small { color: var(--mute); font-weight: 700; margin-left: 4px; }
.chip[aria-pressed="true"] small { color: #ffe3d6; }

.hero { padding-top: 28px; }
.mast {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 24px;
  min-height: 520px; padding: 56px 56px 56px 60px;
  border: 2px solid #ab5b71; border-radius: var(--r-lg);
  background: var(--mast);
}
.mast::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background: radial-gradient(var(--plum-ink) 1.2px, transparent 1.2px) 0 0 / 17px 17px;
  -webkit-mask: linear-gradient(100deg, transparent 30%, #000 75%); mask: linear-gradient(100deg, transparent 30%, #000 75%);
}
.status {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px;
  padding: 8px 14px 8px 12px; border-radius: 999px; background: #25152b; color: var(--ink);
  font-weight: 800; font-size: 14px;
}
.status i { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(213, 253, 120, .18); }
.mast h1 {
  margin: 0; font-weight: 1000; font-size: clamp(46px, 6.4vw, 96px); line-height: .9; letter-spacing: -.065em;
  text-transform: uppercase; text-shadow: 4px 5px 0 #6f345b; color: #fff9f2;
}
.lede { max-width: 30ch; margin: 18px 0 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.4; font-weight: 600; color: #fff3ea; }
.by { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-weight: 700; font-size: 15px; color: #ffe8dc; }
.ava { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #25152b; color: var(--butter); font: 900 13px var(--f); flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 30px; }
.mast-art { position: relative; height: 440px; }
.stack {
  position: absolute; top: 50%; left: 50%; width: 220px; aspect-ratio: 9/16;
  border-radius: var(--r); overflow: hidden; border: 4px solid #fff9f2;
  box-shadow: 10px 12px 0 rgba(70, 17, 48, .55);
  transition: transform .25s;
}
.stack img, .stack .gg-fallback { width: 100%; height: 100%; object-fit: cover; }
.stack.s1 { transform: translate(-112%, -46%) rotate(-11deg); }
.stack.s2 { transform: translate(14%, -44%) rotate(9deg); }
.stack.s3 { width: 248px; transform: translate(-50%, -52%) rotate(-2deg); z-index: 2; }
.stack.s1:hover { transform: translate(-116%, -50%) rotate(-13deg); }
.stack.s2:hover { transform: translate(18%, -48%) rotate(11deg); }
.stack.s3:hover { transform: translate(-50%, -55%) rotate(0); }

.mast-art.is-ext { display: flex; align-items: center; justify-content: center; }
.ext-glow {
  position: absolute; inset: -56px -56px -56px -14%; z-index: 0; pointer-events: none;
  background: #3a1d33 center / cover no-repeat; filter: blur(30px) saturate(1.35); opacity: .7; transform: scale(1.08);
  -webkit-mask: radial-gradient(closest-side, #000 45%, transparent 100%); mask: radial-gradient(closest-side, #000 45%, transparent 100%);
}
.ext-stage { position: relative; z-index: 1; display: block; flex: none; width: min(400px, 72%); aspect-ratio: 4/3; }
.mast-art.is-ext .stack { width: 38%; aspect-ratio: 4/3; }
.mast-art.is-ext .stack.s1 { left: -14%; top: -16%; transform: rotate(-8deg); }
.mast-art.is-ext .stack.s2 { left: auto; top: auto; right: -15%; bottom: -16%; transform: rotate(7deg); }
.mast-art.is-ext .stack.s3 { left: 0; top: 0; width: 100%; transform: rotate(-2deg); z-index: 2; box-shadow: 12px 14px 0 rgba(70, 17, 48, .55), 0 18px 60px rgba(20, 6, 18, .45); }
.mast-art.is-ext .stack.s1:hover { transform: rotate(-10deg) translateY(-4px); }
.mast-art.is-ext .stack.s2:hover { transform: rotate(9deg) translateY(4px); }
.mast-art.is-ext .stack.s3:hover { transform: rotate(0) scale(1.015); }
.star { position: absolute; right: -6px; top: -26px; font: 1000 150px/1 var(--f); color: var(--butter); transform: rotate(14deg); z-index: 3; pointer-events: none; text-shadow: 5px 5px 0 #9b3442; }
.sticker {
  position: absolute; z-index: 4; left: 4%; bottom: 6px;
  padding: 10px 14px; border-radius: 12px; background: var(--lime); color: #1c1229;
  font: 900 14px/1 var(--f); transform: rotate(-6deg); box-shadow: 4px 4px 0 #1c1229;
}

.sec { padding-top: 64px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.sec-head h2 { margin: 0; font-weight: 1000; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; letter-spacing: -.05em; }
.sec-head p { margin: 6px 0 0; color: var(--mute); font-weight: 600; }
.sec-head .tag { display: inline-block; margin-left: 10px; padding: 6px 10px; border-radius: 10px; background: var(--butter); color: #2a1424; font: 900 13px/1 var(--f); letter-spacing: 0; vertical-align: middle; transform: rotate(-3deg); }
.more { flex: none; color: var(--peach); font-weight: 800; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.more:hover { color: var(--butter); }

.row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.card { display: block; text-decoration: none; color: inherit; }
.card-art { position: relative; aspect-ratio: 9/16; border-radius: var(--r); overflow: hidden; background: var(--s2); border: 2px solid var(--line); transition: transform .18s, border-color .18s, box-shadow .18s; }
.card-art img, .card-art .gg-fallback { width: 100%; height: 100%; object-fit: cover; }
.card:hover .card-art { transform: translateY(-4px) rotate(-1.2deg); border-color: var(--peach); box-shadow: 6px 8px 0 #2b1a3a; }
.badge { position: absolute; left: 10px; top: 10px; padding: 6px 9px; border-radius: 9px; background: var(--butter); color: #2a1424; font: 900 12px/1 var(--f); transform: rotate(-4deg); }
.badge.new { background: var(--lime); }
.card-meta { padding: 12px 2px 0; }
.card-meta b { display: block; font-weight: 900; font-size: 16px; line-height: 1.2; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta small { display: block; margin-top: 3px; color: var(--mute); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.board { border: 2px solid var(--line); border-radius: var(--r-lg); background: var(--s1); padding: 10px 26px 18px; }
.board-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.board-legend { display: grid; grid-template-columns: 56px 1fr 80px; padding: 12px 8px; color: var(--mute); font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; border-bottom: 2px dashed var(--line); }
.board-legend span:last-child { text-align: right; }
.board ol { list-style: none; margin: 0; padding: 0; }
.board li a { display: grid; grid-template-columns: 56px 44px minmax(0, 1fr) 80px; gap: 14px; align-items: center; padding: 10px 8px; border-radius: 14px; text-decoration: none; }
.board li a:hover { background: var(--s3); }
.rank { font: 700 24px/1 var(--mono); color: var(--mute); }
.board li:nth-child(-n+3) .rank { color: var(--butter); }
.board-cols > div + div li .rank { color: var(--mute); }
.thumb { width: 44px; aspect-ratio: 9/16; border-radius: 9px; overflow: hidden; }
.thumb img, .thumb .gg-fallback { width: 100%; height: 100%; object-fit: cover; }
.bt b { display: block; font-weight: 900; font-size: 17px; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt small { display: block; color: var(--mute); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score { text-align: right; font: 700 20px/1 var(--mono); color: var(--ink); }
.score small { display: block; margin-top: 4px; font-size: 10px; color: var(--mute); letter-spacing: .06em; }

.cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cat {
  --c: var(--orange); --t: #fff9f2;
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 150px; padding: 20px 22px; border: 0; border-radius: var(--r);
  background: var(--c); color: var(--t); text-align: left; cursor: pointer;
  font-family: var(--f); box-shadow: 0 6px 0 rgba(0, 0, 0, .35);
  transition: transform .15s;
}
.cat:hover { transform: translateY(-3px) rotate(-.6deg); }
.cat[aria-pressed="true"] { outline: 4px solid var(--ink); outline-offset: 3px; }
.cat b { position: relative; z-index: 2; font-weight: 1000; font-size: 30px; line-height: 1; letter-spacing: -.05em; }
.cat small { position: relative; z-index: 2; font-weight: 800; font-size: 14px; opacity: .85; }
.cat .peek { position: absolute; right: 14px; top: 16px; width: 74px; aspect-ratio: 9/16; border-radius: 10px; overflow: hidden; border: 3px solid rgba(255, 255, 255, .9); transform: rotate(8deg); box-shadow: 4px 4px 0 rgba(0, 0, 0, .25); }
.cat .peek + .peek { right: 70px; top: 34px; transform: rotate(-7deg); }
.cat .peek img, .cat .peek .gg-fallback { width: 100%; height: 100%; object-fit: cover; }
.cat:nth-child(6n+1) { --c: var(--orange); }
.cat:nth-child(6n+2) { --c: var(--butter); --t: #2a1424; }
.cat:nth-child(6n+3) { --c: var(--rose); }
.cat:nth-child(6n+4) { --c: var(--lime); --t: #1c1229; }
.cat:nth-child(6n+5) { --c: #6c4ad6; }
.cat:nth-child(6n+6) { --c: var(--peach); --t: #2a1424; }
.cat-results { margin-top: 24px; }
.cat-results[hidden] { display: none; }
.cat-results h3 { margin: 0 0 14px; font-weight: 900; font-size: 20px; letter-spacing: -.03em; }

.face { margin-top: 72px; background: var(--butter); color: #2a1424; position: relative; overflow: hidden; }
.face::before { content: ""; position: absolute; inset: 0; background: radial-gradient(#e7b85a 1.3px, transparent 1.3px) 0 0 / 18px 18px; opacity: .7; }
.face-in { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.kicker { display: inline-block; margin: 0 0 14px; padding: 7px 12px; border-radius: 10px; background: #2a1424; color: var(--butter); font: 900 13px/1 var(--f); transform: rotate(-3deg); }
.face h2 { margin: 0; font-weight: 1000; font-size: clamp(40px, 5vw, 76px); line-height: .9; letter-spacing: -.065em; text-transform: uppercase; text-shadow: 4px 4px 0 #ff8a64; }
.face p.lead { max-width: 34ch; margin: 18px 0 26px; font-weight: 700; font-size: 18px; }
.face .note { display: block; margin-top: 14px; font-weight: 700; font-size: 13px; opacity: .7; }
.fan { display: flex; justify-content: center; align-items: flex-end; height: 380px; }
.fan a { width: 170px; flex: none; aspect-ratio: 9/16; margin: 0 -18px; border-radius: 18px; overflow: hidden; border: 4px solid #2a1424; box-shadow: 6px 8px 0 #2a1424; transition: transform .2s; }
.fan a img, .fan a .gg-fallback { width: 100%; height: 100%; object-fit: cover; }
.fan a:nth-child(1) { transform: rotate(-12deg) translateY(26px); }
.fan a:nth-child(2) { transform: rotate(-6deg) translateY(6px); }
.fan a:nth-child(3) { transform: rotate(0) translateY(-6px); z-index: 2; }
.fan a:nth-child(4) { transform: rotate(6deg) translateY(6px); }
.fan a:nth-child(5) { transform: rotate(12deg) translateY(26px); }
.fan a:hover { transform: translateY(-18px) rotate(0); z-index: 3; }

.foot { border-top: 1px solid var(--line); margin-top: 0; }
.foot-in { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 32px; align-items: center; padding-top: 34px; padding-bottom: 40px; }
.foot p { margin: 0; color: var(--mute); font-weight: 600; font-size: 14px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot nav a { color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; }
.foot nav a:hover { color: var(--butter); text-decoration: underline; }
.foot .fine { grid-column: 1 / -1; font-size: 12px; }
.foot .logo { justify-self: start; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 22px; color: var(--mute); font-weight: 700; font-size: 14px; }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.play-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); gap: 36px; align-items: start; padding-top: 18px; }
.cab { border-radius: var(--r-lg); background: var(--s1); border: 2px solid var(--line); overflow: hidden; }
.cab-marquee { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--mast); color: #fff9f2; font-weight: 900; }
.cab-marquee span { padding: 5px 9px; border-radius: 8px; background: #25152b; font-size: 12px; }
.cab-marquee b { font-weight: 1000; letter-spacing: -.03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-stage { position: relative; display: grid; place-items: center; height: 720px; padding: 32px; overflow: hidden; background: #0b0816; }
.cab-bg { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(34px) saturate(1.3); opacity: .5; }
.cab-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(var(--plum-ink) 1.2px, transparent 1.2px) 0 0 / 17px 17px; opacity: .35; pointer-events: none; }
.phone {
  position: relative; z-index: 2; height: 100%; aspect-ratio: 9/16; max-width: 100%;
  border-radius: 34px; overflow: hidden; background: #000;
  border: 10px solid #1c1229; box-shadow: 0 0 0 2px #3c2a52, 12px 14px 0 rgba(0, 0, 0, .45);
}
.phone > img, .phone > .gg-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-ui, .load-ui, .ready-ui { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; padding: 26px; text-align: center; }
.cover-ui { background: linear-gradient(180deg, transparent 45%, rgba(16, 13, 29, .9)); }
.cover-ui small { color: #ffe8dc; font-weight: 700; font-size: 13px; }
.load-ui, .ready-ui { display: none; justify-content: center; background: rgba(16, 13, 29, .86); backdrop-filter: blur(6px); font-weight: 800; }
.is-loading .load-ui, .is-ready .ready-ui { display: flex; }
.is-loading .cover-ui, .is-ready .cover-ui { display: none; }
.spin { width: 44px; height: 44px; border-radius: 50%; border: 5px solid rgba(255, 220, 120, .25); border-top-color: var(--butter); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ready-ui b { font-size: 22px; font-weight: 1000; letter-spacing: -.03em; }
.ready-ui p { max-width: 26ch; margin: 0; color: var(--mute); font-weight: 600; font-size: 14px; }
.ready-ui a { color: var(--butter); font-weight: 900; }
.cab-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-top: 2px solid var(--line); }
.ctl { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--s2); color: var(--ink); font: 800 14px var(--f); cursor: pointer; text-decoration: none; }
.ctl:hover { border-color: var(--peach); }
.ctl svg { font-size: 18px; }
.cab-controls .hint { margin-left: auto; color: var(--mute); font: 700 12px var(--mono); letter-spacing: .04em; }

.info-wrap { position: sticky; top: 100px; }
.info .cat-tag { display: inline-block; padding: 7px 11px; border-radius: 10px; background: var(--butter); color: #2a1424; font: 900 13px/1 var(--f); transform: rotate(-3deg); text-decoration: none; }
.info h1 { margin: 16px 0 0; font-weight: 1000; font-size: clamp(38px, 4.2vw, 64px); line-height: .92; letter-spacing: -.06em; text-transform: uppercase; text-shadow: 3px 4px 0 #6f345b; overflow-wrap: anywhere; }
.info .by { color: var(--mute); margin-top: 16px; }
.info .by b { color: var(--ink); }
.info .desc { margin: 16px 0 0; font-size: 18px; font-weight: 600; line-height: 1.45; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.stat { padding: 8px 12px; border-radius: 10px; background: var(--s2); border: 2px solid var(--line); font: 700 13px var(--mono); color: var(--mute); }
.stat b { color: var(--ink); }
.cta-box { margin-top: 26px; padding: 22px; border-radius: var(--r); background: var(--s2); border: 2px solid var(--line); }
.cta-box h2 { margin: 0 0 4px; font-weight: 1000; font-size: 20px; letter-spacing: -.03em; }
.cta-box p { margin: 0 0 18px; color: var(--mute); font-weight: 600; font-size: 14px; }
.cta-box .btn { width: 100%; }
.cta-box .btn + .btn { margin-top: 16px; }
.cta-box small { display: block; margin-top: 14px; color: var(--mute); font-size: 12px; font-weight: 600; }
.info-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

@media (max-width: 1200px) {
  .top-nav { display: none; }
  .row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .row > :nth-child(n+5) { display: none; }
  .row.all > :nth-child(n+5) { display: block; }
  .play-layout { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 26px; }
  .cab-stage { height: 640px; }
}
@media (max-width: 1024px) {
  .mast { padding: 44px 36px; min-height: 460px; }
  .mast-art { height: 380px; }
  .stack { width: 180px; }
  .stack.s3 { width: 206px; }
  .star { font-size: 110px; }
  .ext-stage { width: min(340px, 74%); }
  .board-cols { grid-template-columns: 1fr; }
  .board-cols > div + div .board-legend { display: none; }
  .face-in { grid-template-columns: 1fr; gap: 24px; }
  .fan { height: 320px; }
  .fan a { width: 148px; }
  .play-layout { grid-template-columns: 1fr; }
  .info-wrap { position: static; }
  .cab-stage { height: 700px; }
  .info-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .info-wrap .cta-box { margin-top: 0; }
}
@media (max-width: 860px) {
  .mast { grid-template-columns: 1fr; padding: 34px 26px 26px; }
  .mast-art { height: 340px; order: -1; margin: -8px 0 0; }
  .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row > :nth-child(n+4) { display: none; }
  .row.all > :nth-child(n+4) { display: block; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .foot-in { grid-template-columns: 1fr; }
  .info-wrap { grid-template-columns: 1fr; }
  .info-wrap .cta-box { margin-top: 24px; }
}
@media (max-width: 640px) {
  .top-in { gap: 12px; min-height: 64px; flex-wrap: wrap; padding-top: 12px; }
  .logo { font-size: 18px; }
  .top .make { margin-left: auto; }
  .search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .search input { height: 44px; }
  .chips { padding-top: 12px; }
  .hero { padding-top: 18px; }
  .mast { padding: 22px 18px 24px; border-radius: 24px; gap: 8px; }
  .mast-art { height: 300px; }
  .stack { width: 138px; border-width: 3px; }
  .stack.s3 { width: 160px; }
  .stack.s1 { transform: translate(-108%, -46%) rotate(-11deg); }
  .star { font-size: 84px; right: 0; top: -14px; }
  .sticker { font-size: 12px; left: 0; bottom: 0; }
  .mast h1 { font-size: 46px; text-shadow: 3px 4px 0 #6f345b; }
  .actions { margin-top: 22px; }
  .actions .btn { flex: 1 1 100%; }
  .sec { padding-top: 48px; }
  .sec-head { margin-bottom: 16px; }
  .sec-head .tag { display: none; }

  .row, .row.all { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gut) * -1); padding: 4px var(--gut) 10px; scrollbar-width: none; }
  .row::-webkit-scrollbar { display: none; }
  .row > *, .row > :nth-child(n) { display: block; flex: 0 0 42%; scroll-snap-align: start; }
  .board { padding: 6px 12px 12px; border-radius: 22px; }
  .board-legend { grid-template-columns: 40px 1fr 60px; }
  .board li a { grid-template-columns: 34px 38px minmax(0, 1fr) 54px; gap: 10px; padding: 9px 4px; }
  .rank { font-size: 18px; }
  .thumb { width: 38px; }
  .score { font-size: 16px; }
  .bt b { font-size: 15px; }
  .cats { gap: 12px; }
  .cat { min-height: 124px; padding: 16px; }
  .cat b { font-size: 24px; }
  .cat .peek { width: 54px; right: 10px; top: 12px; }
  .cat .peek + .peek { display: none; }
  .face { margin-top: 56px; }
  .face-in { padding-top: 44px; padding-bottom: 40px; }
  .face .btn { width: 100%; }
  .fan { height: 250px; }
  .fan a { width: 86px; margin: 0 -12px; border-width: 3px; border-radius: 14px; box-shadow: 4px 5px 0 #2a1424; }
  .crumbs { padding-top: 14px; }
  .cab { margin: 0 calc(var(--gut) * -1); border-radius: 0; border-left: 0; border-right: 0; }
  .cab-stage { height: auto; padding: 18px; }
  .phone { height: auto; width: min(100%, 340px); border-width: 8px; border-radius: 28px; }
  .cab-controls .hint { display: none; }
  .cab-controls .ctl { flex: 1; justify-content: center; }
  .info h1 { font-size: 42px; }
}

@media (max-width: 860px) {
  .car-slide[data-ext] { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
  .car-slide[data-ext] .mast-art { height: auto; min-height: 220px; align-self: stretch; }
  .car-slide[data-ext] .mast-art.is-ext { align-items: flex-end; padding-bottom: 6px; }
  .car-slide[data-ext] .ext-glow { inset: -30px -26px -6px; transform: none; filter: blur(26px) saturate(1.35); opacity: .75;
    -webkit-mask: linear-gradient(180deg, #000 55%, transparent 100%); mask: linear-gradient(180deg, #000 55%, transparent 100%); }
  .car-slide[data-ext] .ext-stage { width: 280px; }
  .car-slide[data-ext] .mast-art.is-ext .stack { width: 46%; }
  .car-slide[data-ext] .mast-art.is-ext .stack.s1 { left: -34%; top: -50%; }
  .car-slide[data-ext] .mast-art.is-ext .stack.s2 { left: auto; right: -34%; top: -34%; bottom: auto; }
  .car-slide[data-ext] .mast-art.is-ext .stack.s3 { width: 100%; }
}
@media (max-width: 640px) {
  .car-slide[data-ext] .ext-glow { inset: -20px -18px -6px; }
  .car-slide[data-ext] .ext-stage { width: min(200px, 62%); }
  .car-slide[data-ext] .mast-art.is-ext .stack { width: 52%; border-width: 3px; }

  .car-slide[data-ext] .mast-art.is-ext .stack.s1 { left: -16%; top: -76%; }
  .car-slide[data-ext] .mast-art.is-ext .stack.s2 { left: auto; right: -16%; top: -58%; bottom: auto; }
  .car-slide[data-ext] .mast-art.is-ext .stack.s3 { width: 100%; }
}

.car-banner-pic { display: contents; }
.car-banner-pic > source { display: none; }

@media (max-width: 860px) {
  .car-slide.has-banner::after { background: linear-gradient(180deg, rgba(16, 13, 29, 0) 0%, rgba(16, 13, 29, .08) 26%, rgba(16, 13, 29, .68) 42%, rgba(16, 13, 29, .82) 100%); }
}

#gg-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:90;padding:12px 18px;border-radius:999px;background:#111;color:#fff;font:600 14px/1 -apple-system,sans-serif;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.35)}
#gg-toast.on{opacity:1;transform:translate(-50%,0)}
#gg-td{border:0;border-radius:18px;padding:0;max-width:440px;width:calc(100% - 32px);background:#fff;color:#16161b;box-shadow:0 30px 80px rgba(0,0,0,.45)}
#gg-td::backdrop{background:rgba(0,0,0,.55)}
.gg-td{position:relative;padding:24px 22px 20px;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.gg-td h2{margin:0 36px 6px 0;font-size:20px;line-height:1.25;color:#16161b}
.gg-td p{margin:0 0 14px;color:#4a4a52}
.gg-td-x{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:999px;background:#f1f1f4;color:#16161b;cursor:pointer}
.gg-td-x svg{width:18px;height:18px}
.gg-td-box{display:grid;gap:6px;margin:0 0 14px;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.gg-td-box label{font-weight:700;font-size:14px}
.gg-td-row{display:flex;gap:8px;min-width:0}
.gg-td-row input{flex:1;min-width:0;font:600 15px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;padding:11px 12px;border:1px solid #d6d6dc;border-radius:10px;background:#f7f7f9;color:#16161b}
.gg-td-copy{flex:none;display:inline-flex;align-items:center;gap:6px;font:700 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:0 14px;min-height:42px;border:0;border-radius:999px;background:#16161b;color:#fff;cursor:pointer}
.gg-td-copy svg{width:16px;height:16px}
.gg-td-st{margin:0;min-height:1.4em;font-size:13px;font-weight:700;color:#11733f}
.gg-td-act{display:flex;justify-content:flex-end}
.gg-td-done{font:700 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:12px 18px;border-radius:999px;border:1px solid #d6d6dc;background:#fff;color:#16161b;cursor:pointer}
.gg-td-x:focus-visible,.gg-td-copy:focus-visible,.gg-td-done:focus-visible,.gg-td-row input:focus-visible{outline:3px solid #6a3dff;outline-offset:2px}
.gg-pv{max-width:760px;margin:0 auto;padding:0 0 40px;min-width:0;overflow-wrap:anywhere}
.gg-pv h1{margin:14px 0 10px;font-size:clamp(30px,5vw,46px);line-height:1.08}
.gg-pv-lede{font-size:17px;line-height:1.6;margin:0 0 22px;opacity:.9}
.gg-pv-sec{padding:18px 0;border-top:1px solid var(--gg-line,rgba(128,128,128,.3))}
.gg-pv-sec h2{margin:0 0 8px;font-size:20px;line-height:1.3}
.gg-pv-sec p,.gg-pv-sec li{line-height:1.65;margin:0 0 8px}
.gg-pv-sec ul{margin:0;padding-left:20px}
.gg-pv .gg-td-box{max-width:520px;margin-top:10px}
.gg-pv .gg-td-row input{background:#fff}
.gg-pv .gg-td-st{color:inherit}
.gg-pv-upd{margin-top:18px;font-size:13px;opacity:.75}
.gg-search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:70;display:none;padding:6px;border-radius:16px;background:#fff;color:#16161b;box-shadow:0 20px 50px rgba(0,0,0,.35);text-align:left}
.gg-search-results.on{display:grid;gap:2px}
.gg-search-results a{display:flex;gap:10px;align-items:center;padding:6px;border-radius:10px;color:inherit;text-decoration:none}
.gg-search-results a:hover,.gg-search-results a:focus{background:#f1f1f4}
.gg-search-results b{display:block;font-size:14px}
.gg-search-results small{color:#6c6c75;font-size:12px}
.gg-sr-img{width:32px;height:56px;object-fit:cover;border-radius:6px;flex:none}
.gg-sr-empty{margin:0;padding:10px;font-size:14px;color:#5e5e66}
.gg-fallback{display:flex;align-items:flex-end;padding:12px;background:linear-gradient(160deg,#ff8a64,#6a3dff);color:#fff;font:800 16px/1.1 sans-serif}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

#gg-problem{border:0;border-radius:18px;padding:0;max-width:440px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;color:#16161b;box-shadow:0 30px 80px rgba(0,0,0,.45)}
#gg-problem::backdrop{background:rgba(0,0,0,.55)}
#gg-problem fieldset{border:0;padding:12px 0;margin:0;display:grid;gap:12px;min-width:0}
#gg-problem label{display:flex;align-items:center;gap:10px;cursor:pointer}
#gg-problem input{flex:none;width:18px;height:18px}
#gg-problem [data-problem-status]{min-height:1.5em;margin:8px 0;overflow-wrap:anywhere}
.gg-problem-btn{display:block;position:static;max-width:100%;margin:12px 0;padding:9px 14px;border:1px solid var(--gg-line);border-radius:999px;background:var(--gg-card);color:var(--gg-ink);font:600 13px/1.4 sans-serif;white-space:normal;cursor:pointer}
.gg-problem-btn:disabled{opacity:.55;cursor:default}
.gg-problem-btn:focus-visible,#gg-problem input:focus-visible{outline:3px solid #6a3dff;outline-offset:2px}
.gg-local-actions .gg-problem-btn{display:inline-block;margin:0;padding:9px 4px;border:0;border-radius:0;background:none;color:var(--gg-mute);font:500 13px/1.4 sans-serif;text-decoration:underline;text-underline-offset:3px}
.gg-local-actions .gg-problem-btn:hover{color:var(--gg-ink)}
.gg-share{position:fixed;inset:0;z-index:95}
.gg-share-bg{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.gg-share-box{position:fixed;left:0;right:0;bottom:0;max-height:85vh;overflow:auto;box-sizing:border-box;background:var(--gg-card,#fff);color:var(--gg-ink,#16161b);border:1px solid var(--gg-line,rgba(128,128,128,.3));border-radius:18px 18px 0 0;padding:8px 10px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px rgba(0,0,0,.35);font:14px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.gg-share-h{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 8px;font-weight:800;font-size:15px}
.gg-share-x{border:0;background:none;color:var(--gg-mute,#6b7280);font-size:16px;line-height:1;width:36px;height:36px;border-radius:50%;cursor:pointer}
.gg-share-item{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:none;color:inherit;font:600 15px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left;text-decoration:none;cursor:pointer}
.gg-share-item:hover,.gg-share-item:focus-visible,.gg-share-x:hover,.gg-share-x:focus-visible{background:rgba(128,128,128,.16);outline:none}
.gg-share-item:focus-visible,.gg-share-x:focus-visible{box-shadow:0 0 0 2px #6a3dff inset}
.gg-share-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;font:800 13px/1 -apple-system,sans-serif}
@media(min-width:600px){.gg-share-bg{background:transparent}.gg-share-box{right:auto;bottom:auto;width:264px;border-radius:14px;padding:6px;box-shadow:0 16px 50px rgba(0,0,0,.4)}.gg-share-x{display:none}.gg-share-h{padding:6px 10px}}

:root{--gg-bg:#100d1d;--gg-card:#1a1230;--gg-ink:#fff9f2;--gg-mute:#a8a1b9;--gg-line:#39304c;--gg-acc:#ffdc78;--gg-acc-ink:#100d1d}

html, body { overflow-x: hidden; }
img { max-width: 100%; }
.gg-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 14px; background: var(--gg-acc); color: var(--gg-acc-ink); font-weight: 700; border-radius: 0 0 10px 0; }
.gg-skip:focus { left: 0; }

.ready-ui { display: none !important; }
[data-player] .load-ui { display: none; }
[data-player].is-loading .load-ui { display: flex; }
.is-playing .cover-ui, .is-playing .load-ui, .is-playing .scrim, .is-playing [data-frame-host] > img, .is-playing .gg-tp-cover { display: none !important; }
[data-frame-host] { position: relative; }
.gg-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; background: #000; display: block; }
[data-click-anywhere] [data-frame-host] { cursor: pointer; }
.is-playing [data-frame-host] { cursor: auto; }

[data-player] .cover-ui { padding-bottom: 30%; }

.gg-pseudo-fs { position: fixed !important; inset: 0 !important; z-index: 9999 !important; margin: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; max-height: none !important; border-radius: 0 !important; background: #000 !important; padding: 0 !important; overflow: hidden !important; }
.gg-pseudo-fs *, :fullscreen * { visibility: hidden; }
.gg-pseudo-fs [data-frame-host], .gg-pseudo-fs [data-frame-host] *, :fullscreen [data-frame-host], :fullscreen [data-frame-host] *, .gg-fs-close, .gg-fs-close * { visibility: visible; }
.gg-pseudo-fs [data-frame-host][data-frame-host], :fullscreen [data-frame-host][data-frame-host] { position: fixed !important; inset: 0 !important; z-index: 10000 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; max-width: none !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; aspect-ratio: auto !important; transform: none !important; background: #000 !important; }
:fullscreen { background: #000; }
.gg-noscroll, .gg-noscroll body { overflow: hidden !important; }
.gg-fs-close { position: fixed; z-index: 10001; top: calc(env(safe-area-inset-top, 0px) + 10px); right: calc(env(safe-area-inset-right, 0px) + 10px); width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.6); color: #fff; font: 700 22px/1 sans-serif; cursor: pointer; display: none; place-items: center; padding: 0; }
.gg-pseudo-fs .gg-fs-close, :fullscreen .gg-fs-close { display: grid; }
:-webkit-full-screen .gg-fs-close { display: grid; }
.gg-fs-rotate { position: fixed; z-index: 10001; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); box-sizing: border-box; width: max-content; max-width: 90vw; max-height: max(0px, calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 88px)); max-height: max(0px, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 88px)); overflow: hidden; border-radius: 999px; padding: 0 16px; background: rgba(0,0,0,.72); color: #fff; font: 700 16px/1.4 sans-serif; text-align: center; display: none; align-items: center; gap: 8px; pointer-events: auto; opacity: 1; transition: opacity .2s, visibility 0s; }

.gg-fs-rotate > span { padding: 10px 0; }
.gg-pseudo-fs .gg-fs-rotate, :fullscreen .gg-fs-rotate { display: flex; }
:-webkit-full-screen .gg-fs-rotate { display: flex; }
.gg-fs-rotate, .gg-fs-rotate * { visibility: visible; }
.gg-fs-rotate[hidden] { display: none; }
.gg-fs-rotate.is-dismissed, .gg-fs-rotate.is-dismissed * { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s .2s; }

.gg-land-page .play-layout, .gg-land-page .play { grid-template-columns: minmax(0, 1fr) !important; }
.gg-land-page .info-wrap { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.gg-land-page .panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); position: static; }
.gg-land .cab-stage { height: auto; padding: 24px; }
.gg-land .phone, .gg-land .screen { height: auto !important; width: 100% !important; max-width: 100% !important; max-height: none !important; aspect-ratio: 16 / 9 !important; border-radius: 18px; }
.gg-land .phone > img, .gg-land .screen > img { object-fit: contain; background: #000; }
.gg-land .cover-ui { padding-bottom: 7%; }
.gg-land.stage { flex-direction: column; align-items: stretch; }
.gg-land .side-rail, .gg-land .rail { position: static !important; display: flex !important; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 4px 0 0 !important; }
.gg-land .rail .rb { color: var(--gg-ink); text-shadow: none; }

.gg-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--gg-line); background: transparent; color: var(--gg-ink); font: 700 13px/1 inherit; cursor: pointer; white-space: nowrap; flex: none; }
.gg-lang:hover { border-color: var(--gg-ink); }
.gg-dev { display: inline-block; padding: 3px 8px; border-radius: 6px; background: #ff3b30; color: #fff; font: 800 11px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .06em; vertical-align: middle; }

.gg-page { padding-bottom: 24px; min-width: 0; }
.gg-cat-head { padding: 26px 0 6px; }
.gg-cat-head h1 { margin: 0; font-size: clamp(32px, 5vw, 60px); line-height: 1; letter-spacing: -.03em; overflow-wrap: anywhere; }
.gg-cat-head p { margin: 10px 0 0; color: var(--gg-mute); font-size: 16px; max-width: 60ch; }
.gg-sec-h { margin: 30px 0 14px; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gg-sec-h small { font-size: 14px; color: var(--gg-mute); font-weight: 500; }
.gg-empty { margin: 18px 0; color: var(--gg-mute); text-align: center; font-size: 15px; }
.gg-more-wrap { display: grid; justify-items: center; margin: 22px 0 8px; }
.gg-more-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 28px; border-radius: 999px; border: 2px solid var(--gg-ink); background: transparent; color: var(--gg-ink); font: 700 15px/1 inherit; cursor: pointer; }
.gg-more-btn:hover { background: var(--gg-ink); color: var(--gg-bg); }
.gg-more-btn[disabled] { opacity: .6; cursor: progress; }
.gg-more-sub { margin: 4px 0 0; color: var(--gg-mute); font-size: 14px; }

.gg-sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 12px; }
.gg-scard { display: grid; gap: 6px; color: var(--gg-ink); text-decoration: none; min-width: 0; }
.gg-scard-art { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--gg-card); }
.gg-scard-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.gg-scard:hover .gg-scard-art img { transform: scale(1.04); }
.gg-scard b { font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-scard small { color: var(--gg-mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-scard .gg-badge { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; background: var(--gg-acc); color: var(--gg-acc-ink); font-size: 11px; font-weight: 800; }

.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 12px; }
.tp-card { display: grid; gap: 5px; align-content: start; color: var(--gg-ink); text-decoration: none; min-width: 0; }
.tp-art { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--gg-card); border: 1px solid var(--gg-line); }
.tp-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.tp-card:hover .tp-art img { transform: scale(1.05); }
.tp-card b { font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tp-card small { color: var(--gg-mute); font-size: 12px; }

.gg-catnav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 0 8px; }
.gg-catnav::-webkit-scrollbar { display: none; }
.gg-catnav a { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--gg-line); color: var(--gg-ink); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.gg-catnav a[aria-current] { background: var(--gg-ink); color: var(--gg-bg); border-color: var(--gg-ink); }

.gg-tp { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 28px; align-items: start; padding-top: 18px; }
.gg-tp-crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; font-size: 14px; color: var(--gg-mute); }
.gg-tp-crumbs a { color: var(--gg-mute); text-decoration: none; font-weight: 600; }
.gg-tp-crumbs a:hover { color: var(--gg-ink); }
.gg-tp-stage { position: relative; border-radius: 20px; overflow: hidden; background: #000; border: 1px solid var(--gg-line); }
.gg-tp-stage [data-frame-host] { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; }
.gg-tp-cover { position: absolute; inset: 0; display: block; overflow: hidden; }
.gg-tp-cover .bg { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); max-width: none; object-fit: cover; filter: blur(24px) saturate(1.2); opacity: .55; }
.gg-tp-cover .fg { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); width: min(46%, 384px); height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.gg-tp-stage .cover-ui { position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 3; display: grid; justify-items: center; gap: 8px; padding: 16px !important; text-align: center; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.gg-tp-stage .cover-ui small { color: #e8e8ee; font-size: 12px; font-weight: 600; }
.gg-tp-stage .load-ui { position: absolute; inset: 0; z-index: 3; align-items: center; justify-content: center; background: rgba(0,0,0,.7); color: #fff; }
.gg-tp-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background: var(--gg-card); border-top: 1px solid var(--gg-line); }
.gg-tp-bar button, .gg-tp-bar a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gg-line); background: transparent; color: var(--gg-ink); font: 600 14px/1 inherit; cursor: pointer; text-decoration: none; }
.gg-tp-bar svg { width: 18px; height: 18px; }

.gg-tp-ext { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; padding: 0 0 20px; border-radius: 20px; overflow: hidden; background: var(--gg-card); border: 1px solid var(--gg-line); text-align: center; }
.gg-tp-ext .gg-tp-screen { position: relative; justify-self: stretch; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.gg-tp-ext .gg-tp-go { margin: 6px 20px 0; }
.gg-tp-ext small, .gg-tp-ext p { display: block; margin: 0 20px; color: var(--gg-mute); font-size: 13px; }
.gg-tp-go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 0 28px; border-radius: 16px; background: var(--gg-acc); color: var(--gg-acc-ink); font: 800 18px/1.15 inherit; text-decoration: none; text-align: center; box-shadow: 0 8px 22px -10px var(--gg-acc); }
.gg-tp-go:hover { filter: brightness(1.06); }
.gg-tp-go svg { width: 20px; height: 20px; flex: none; }
.gg-tp-go span small { display: block; font-size: 13px; font-weight: 600; opacity: .8; }
.gg-tp-info h1 { margin: 10px 0 0; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -.02em; overflow-wrap: anywhere; }
.gg-tp-info .gg-tp-cat { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gg-line); color: var(--gg-ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.gg-tp-info .gg-tp-desc { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--gg-ink); overflow-wrap: anywhere; }
.gg-tp-info .gg-tp-owner { margin: 14px 0 0; font-size: 13px; color: var(--gg-mute); }
.gg-tp-info .gg-tp-owner button { padding: 0; border: 0; background: none; color: var(--gg-ink); font: inherit; text-decoration: underline; cursor: pointer; }
.gg-tp-cta { margin-top: 22px; padding: 22px; border-radius: 20px; background: var(--gg-card); border: 1px solid var(--gg-line); }
.gg-tp-cta h2 { margin: 0; font-size: 22px; }
.gg-tp-cta p { margin: 8px 0 16px; color: var(--gg-mute); font-size: 15px; }
.gg-tp-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; max-width: 100%; box-sizing: border-box; padding: 0 22px; text-align: center; border-radius: 999px; background: var(--gg-ink); color: var(--gg-bg); font: 700 15px/1 inherit; text-decoration: none; }
.gg-tp-cta a svg { width: 18px; height: 18px; }
.gg-tp-cta small { display: block; margin-top: 10px; color: var(--gg-mute); font-size: 12px; }
.gg-tp-cover-sm { display: none; }

.gg-nf { padding: 40px 0 10px; text-align: center; }
.gg-nf b.gg-nf-code { display: block; font-size: clamp(80px, 16vw, 160px); line-height: .9; letter-spacing: -.05em; color: var(--gg-acc); -webkit-text-stroke: 2px var(--gg-ink); }
.gg-nf h1 { margin: 12px 0 0; font-size: clamp(26px, 4vw, 42px); }
.gg-nf p { margin: 10px auto 18px; max-width: 46ch; color: var(--gg-mute); }
.gg-nf a.gg-nf-home { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--gg-ink); color: var(--gg-bg); font-weight: 700; text-decoration: none; }

img.gg-img-fallback { object-fit: cover; }

@media (max-width: 900px) {
  .gg-tp { grid-template-columns: minmax(0, 1fr); }
  .gg-land-page .info-wrap, .gg-land-page .panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gg-sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .gg-tp-ext { padding-bottom: 16px; }
  .gg-tp-ext .gg-tp-go { width: calc(100% - 32px); margin: 4px 16px 0; }
  .gg-tp-cover .fg { width: 60%; }
  .gg-sec-h { font-size: 19px; }
}

.gg-sort-section{padding:24px 16px;max-width:1280px;margin:auto;min-width:0}
.gg-sort-section [role=tablist]{display:flex;gap:6px;margin:12px 0;flex-wrap:wrap}
.gg-sort-section [role=tab],.gg-local-actions button,.gg-library-open{border:1px solid var(--gg-line);border-radius:20px;padding:9px 13px;background:var(--gg-card);color:var(--gg-ink);cursor:pointer;font:inherit}
.gg-sort-section [aria-selected=true],.gg-local-actions [aria-pressed=true]{background:var(--gg-acc);color:var(--gg-acc-ink)}
.gg-mixed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;min-width:0;margin:16px 0}
.gg-mixed-grid>a{min-width:0;position:relative;color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:6px}
.gg-mixed-grid .gg-scard-art,.gg-mixed-grid .tp-art{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px}
.gg-mixed-grid img{width:100%;height:100%;object-fit:cover}.gg-mixed-grid b{overflow-wrap:anywhere}.gg-mixed-grid small{color:var(--gg-mute)}
.gg-badge{position:absolute;top:6px;left:6px;z-index:2;background:var(--gg-acc);color:var(--gg-acc-ink);padding:3px 7px;border-radius:6px;font:700 11px/1.4 sans-serif}.tp-art,.gg-scard-art,.card-art,.tile-art,.post-art,.reel-art{position:relative}

.gg-new-dot{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding-left:6px;border-left:1px solid currentColor;font-size:.92em;white-space:nowrap}
.gg-new-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:#7CFF6B;box-shadow:0 0 0 1.5px #0d1226;flex:none}
.gg-badge.gg-dot{width:10px;height:10px;padding:0;border-radius:50%;top:3px;left:3px;background:#7CFF6B;box-shadow:0 0 0 2px #0d1226}
.thumb,.pod-art{position:relative}

.ext-board .pod-art{aspect-ratio:4/3}
.ext-board .thumb{width:56px;aspect-ratio:4/3}
@media (max-width:480px){.ext-board .thumb{width:48px}}
.ext-list .li img,.ext-list .li .gg-fallback{width:64px;height:48px}
@media (max-width:480px){.ext-list .li img,.ext-list .li .gg-fallback{width:56px;height:42px}}
.ext-wall .post-art{aspect-ratio:4/3}
.post-ext .post-meta{justify-content:space-between}
.gg-local-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.gg-lang{display:inline-flex!important;align-items:center;gap:4px;white-space:nowrap;cursor:pointer}
.gg-library-open{flex:none;padding:7px 9px;font-size:19px}
#gg-languages,#gg-library{color:var(--gg-ink);background:var(--gg-bg);border:1px solid var(--gg-line);border-radius:18px;width:min(680px,calc(100vw - 32px));max-height:85dvh;overflow:auto;padding:20px;box-sizing:border-box}
#gg-library{width:min(1000px,calc(100vw - 32px))}#gg-languages::backdrop,#gg-library::backdrop{background:#0009}
.gg-language-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.gg-language-grid a{display:block;padding:14px 10px;border:1px solid var(--gg-line);border-radius:10px;color:inherit;text-decoration:none;overflow-wrap:anywhere}
.gg-language-grid [aria-current]{background:var(--gg-acc);color:var(--gg-acc-ink)}
#gg-languages button,#gg-library button{cursor:pointer;color:inherit;background:var(--gg-card);border:1px solid var(--gg-line);border-radius:8px;padding:8px 12px}
@media(min-width:700px){.gg-language-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.gg-lang{font-size:12px!important;padding:6px!important}.gg-library-open{padding:5px;font-size:17px}.gg-sort-section{padding:20px 12px}.gg-mixed-grid{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}.bar,.top,.topbar{flex-wrap:wrap;gap:6px}.gg-lang+[data-library]{margin-left:0}}

.gg-recent{margin:28px auto 8px;padding:0 16px;max-width:1440px;width:100%;box-sizing:border-box;min-width:0}
.gg-recent .gg-sec-h{margin:0 0 12px}
.gg-recent-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.gg-recent-row>*{flex:0 0 150px;max-width:150px;scroll-snap-align:start}

@media(max-width:1024px){
  .gg-playwrap{display:flex;flex-direction:column}
  .gg-playwrap>.play-layout,.gg-playwrap>.play{display:contents}
  .gg-playwrap #player{order:1}
  .gg-playwrap>.sec{order:2}
  .gg-playwrap>.gg-recent{order:3}
  .gg-playwrap #info{order:4;margin-top:0}
}
@media(max-width:767px){
  .gg-recent-row>*{flex-basis:132px;max-width:132px}
}

.cab-stage .phone .cover-ui { padding-bottom: 30%; }
.gg-land .cab-stage .phone .cover-ui { padding-bottom: 7%; }
.top-in .search { min-width: 0; }

:root { color-scheme: dark; --acc-txt: var(--peach); --pt-gold: #ffdc78; --pt-silver: #e4dff0; --pt-bronze: #ffab7d; }

.hero { position: relative; }
.car-track { display: grid; touch-action: pan-y; }
.car-slide { grid-area: 1 / 1; height: 580px; min-height: 0; padding: 48px 56px 48px 60px; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.car-slide.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.mast-copy { min-width: 0; position: relative; z-index: 1; }
.mast .ttl {

  margin: 0; font-weight: 1000; font-size: clamp(40px, 4.8vw, 72px); line-height: .92; letter-spacing: -.015em; word-spacing: .14em;
  text-transform: uppercase; text-shadow: 4px 5px 0 #6f345b; color: #fff9f2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; padding-bottom: .08em; overflow-wrap: anywhere;
}
.mast .lede { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.mast .by { min-width: 0; }
.mast .by > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.car-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }

.car-slide:not(.has-banner)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(42, 20, 36, .66) 0%, rgba(42, 20, 36, .6) 46%, rgba(42, 20, 36, .22) 66%, rgba(42, 20, 36, 0) 82%); }
.has-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(16, 13, 29, .78), rgba(16, 13, 29, .15) 72%); pointer-events: none; }
.car-ctl { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.car-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 2px solid var(--line); background: var(--s2); color: var(--ink); cursor: pointer; flex: none; }
.car-btn:hover { border-color: var(--peach); }
.car-btn svg { width: 18px; height: 18px; }
.car-pause svg:last-child { display: none; }
.car-pause.is-paused svg:first-child { display: none; }
.car-pause.is-paused svg:last-child { display: block; }
.car-dots { display: flex; align-items: center; gap: 2px; }
.car-dot { width: 28px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.car-dot::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 999px; background: var(--mute); transition: width .25s, background .25s; }
.car-dot[aria-current="true"]::before { width: 24px; background: var(--butter); }
.car-dot:focus-visible { outline-offset: -4px; }

.rank-board { padding: 18px 26px 18px; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 4px 0 18px !important; border-bottom: 2px dashed var(--line); }
.pod { --pc: #ffdc78; --pt: var(--pt-gold); --pg: rgba(255, 220, 120, .3); min-width: 0; }
.pod-silver { --pc: #d9d4e6; --pt: var(--pt-silver); --pg: rgba(217, 212, 230, .25); }
.pod-bronze { --pc: #f0a070; --pt: var(--pt-bronze); --pg: rgba(240, 160, 112, .3); }
.board .pod a { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border-radius: 22px; border: 2px solid var(--pc); background: linear-gradient(150deg, var(--pg), transparent 70%), var(--s2); text-decoration: none; }
.board .pod a:hover { background: linear-gradient(150deg, var(--pg), transparent 80%), var(--s3); }
.pod-art { position: relative; display: block; width: 76px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; }
.pod-art img, .pod-art .gg-fallback { width: 100%; height: 100%; object-fit: cover; }
.medal { position: absolute; left: 5px; top: 5px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); color: #2a1424; font: 700 16px/1 var(--mono); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.pod-meta { display: block; min-width: 0; }
.pod-meta b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 900; font-size: 18px; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pod-meta small { display: block; margin-top: 4px; color: var(--mute); font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-score { display: block; margin-top: 10px; font: 700 24px/1 var(--mono); color: var(--pt); }
.pod-score small { display: inline; margin: 0; font-size: 10px; letter-spacing: .06em; color: var(--mute); }
.heat-list { padding-top: 8px !important; }
.heat-list li .rank, .board .heat-list li:nth-child(-n+3) .rank { color: var(--mute); }
.heat { display: block; height: 6px; margin-top: 8px; border-radius: 999px; background: var(--s3); overflow: hidden; }
.heat i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--butter)); }
.rk-d { display: inline-block; margin-top: 6px; padding: 3px 7px; border-radius: 8px; font: 800 11px/1 var(--f); letter-spacing: .02em; }
.pod-meta .rk-d { margin: 8px 0 0; }
.rk-up { background: var(--lime); color: #1c1229; }
.rk-down { background: var(--rose); color: #fff9f2; }
.rk-new { background: var(--butter); color: #2a1424; }
.board .pod a:focus-visible { box-shadow: 0 0 0 2px var(--pc), 0 10px 34px var(--pg); }
.board .heat-list a:focus-visible { box-shadow: 0 0 24px rgba(255, 138, 100, .3); }
@media (prefers-reduced-motion: no-preference) {
  .board .pod a, .board .heat-list a { transition: transform .18s ease, box-shadow .18s ease, background .18s; }
  .board .pod a:hover, .board .pod a:focus-visible { transform: scale(1.03); box-shadow: 0 0 0 2px var(--pc), 0 12px 34px var(--pg); }
  .board .heat-list a:hover, .board .heat-list a:focus-visible { transform: scale(1.015); box-shadow: 0 0 24px rgba(255, 138, 100, .3); }
}

.theme-tg { display: inline-grid; place-items: center; width: 40px; height: 36px; padding: 0; border-radius: 999px; border: 1px solid var(--gg-line); background: transparent; color: var(--ink); cursor: pointer; flex: none; }
.theme-tg:hover { border-color: var(--ink); }
.theme-tg svg { width: 18px; height: 18px; }
.theme-tg svg:last-child { display: none; }
:root[data-theme="light"] .theme-tg svg:first-child { display: none; }
:root[data-theme="light"] .theme-tg svg:last-child { display: block; }

@media (max-width: 1024px) {
  .car-slide { height: 500px; padding: 40px 36px; }
  .board .pod a { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .pod-art { width: 60px; }
  .pod-meta b { font-size: 16px; }
  .pod-score { font-size: 20px; }
}
@media (max-width: 860px) {
  .car-slide { height: 720px; align-content: start; padding: 30px 26px 26px; }
  .mast .ttl { -webkit-line-clamp: 2; }
  .mast .lede { -webkit-line-clamp: 2; }
  .car-slide:not(.has-banner)::after { background: linear-gradient(180deg, rgba(42, 20, 36, 0) 0%, rgba(42, 20, 36, .1) 34%, rgba(42, 20, 36, .62) 47%, rgba(42, 20, 36, .7) 100%); }
  .podium { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .board .pod a { grid-template-columns: 54px minmax(0, 1fr); }
  .pod-art { width: 54px; }
}
@media (max-width: 640px) {
  .car-slide { height: 650px; }
  .car-slide { padding: 20px 18px 22px; }
  .car-slide .mast-art { height: 220px; }
  .car-slide .stack { width: 106px; }
  .car-slide .stack.s3 { width: 118px; }
  .car-slide .mast-copy { padding-top: 12px; }
  .car-slide .actions { gap: 10px; margin-top: 18px; }
  .car-slide .actions .btn { flex: 1 1 100%; min-height: 50px; padding-block: 10px; font-size: 17px; }
  .mast .ttl { font-size: clamp(34px, 10.2vw, 46px); text-shadow: 3px 4px 0 #6f345b; -webkit-line-clamp: 3; }
  .car-slide:not(.has-banner)::after { background: linear-gradient(180deg, rgba(42, 20, 36, 0) 0%, rgba(42, 20, 36, .1) 24%, rgba(42, 20, 36, .62) 36%, rgba(42, 20, 36, .7) 100%); }

  .heat-list .bt small { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
  .heat-list .bt small > :last-child { white-space: nowrap; }
  .mast .lede { font-size: 16px; margin-top: 12px; }
  .mast .by { margin-top: 12px; }
  .car-ctl { gap: 6px; margin-top: 12px; }
  .car-btn { width: 42px; height: 42px; }
  .rank-board { padding: 12px 12px 12px; }
  .podium { padding-bottom: 12px !important; }
  .board .pod a { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border-radius: 18px; }
  .pod-art { width: 46px; border-radius: 9px; }
  .medal { width: 22px; height: 22px; font-size: 12px; left: 3px; top: 3px; }
  .pod-meta b { font-size: 15px; -webkit-line-clamp: 1; }
  .pod-score { margin-top: 6px; font-size: 18px; }
  .top-in { gap: 8px; }
  .theme-tg { width: 38px; }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --s1: #f7f7f9; --s2: #f4f4f6; --s3: #ececf0;
  --ink: #0e0e10; --mute: #5e5e66; --line: #e7e7ea;
  --acc-txt: #b93d12; --pt-gold: #8a5a00; --pt-silver: #4f4f5c; --pt-bronze: #a1441b;
  --gg-bg: #ffffff; --gg-card: #f4f4f6; --gg-ink: #0e0e10; --gg-mute: #5e5e66; --gg-line: #e7e7ea;
}
:root[data-theme="light"] :focus-visible { outline-color: #b93d12; }
:root[data-theme="light"] .top { background: rgba(255, 255, 255, .92); }
:root[data-theme="light"] .search input::placeholder { color: #6b6b74; }
:root[data-theme="light"] .search input:focus { border-color: #b93d12; }
:root[data-theme="light"] .chip[aria-pressed="true"] { color: #1c1229; }
:root[data-theme="light"] .chip[aria-pressed="true"] small { color: #3a1a10; }
:root[data-theme="light"] .more { color: var(--acc-txt); }
:root[data-theme="light"] .more:hover, :root[data-theme="light"] .foot nav a:hover { color: #0e0e10; }
:root[data-theme="light"] .status { color: #fff9f2; }
:root[data-theme="light"] .mast .btn-ghost { color: #fff9f2; }

.btn-orange, :root[data-theme="light"] .btn-orange { color: #1c1229; }
:root[data-theme="light"] .car-dot[aria-current="true"]::before { background: #e0582f; }
:root[data-theme="light"] .card:hover .card-art { box-shadow: 6px 8px 0 #ffd7c9; }
:root[data-theme="light"] .cat { box-shadow: 0 6px 0 rgba(0, 0, 0, .12); }
:root[data-theme="light"] .info h1 { text-shadow: 3px 4px 0 #ffd2c2; }
:root[data-theme="light"] .load-ui, :root[data-theme="light"] .ready-ui { color: #fff9f2; }
:root[data-theme="light"] .ready-ui p { color: #cfc8dc; }
:root[data-theme="light"] .board .pod a { background: linear-gradient(150deg, var(--pg), transparent 70%), #fff; }
:root[data-theme="light"] .board .pod a:hover { background: linear-gradient(150deg, var(--pg), transparent 80%), var(--s2); }
:root[data-theme="light"] .pod { --pg: rgba(255, 200, 80, .28); }
:root[data-theme="light"] .pod-silver { --pc: #b9b4c8; --pg: rgba(160, 155, 185, .22); }
:root[data-theme="light"] .pod-bronze { --pc: #e0915a; --pg: rgba(224, 145, 90, .25); }
:root[data-theme="light"] .rk-down { background: #b8336f; }

:root {
  --bg: #0d1226; --s1: #141a33; --s2: #19203d; --s3: #1f2748; --line: #2b3557;
  --ink: #f4f6ff; --mute: #a3acc7;
  --gg-bg: #0d1226; --gg-card: #19203d; --gg-ink: #f4f6ff; --gg-mute: #a3acc7; --gg-line: #2b3557;
  --blue: #1764ff; --blue-2: #0a4bd6; --blue-txt: #8fb4ff; --blue-soft: rgba(79, 139, 255, .16);
  --acc-txt: #8fb4ff;
  --card-sh: 0 10px 28px rgba(0, 0, 0, .35); --card-sh-hi: 0 16px 36px rgba(0, 0, 0, .45);
}
:root[data-theme="light"] {
  --bg: #f5f6fc; --s1: #ffffff; --s2: #eef0f8; --s3: #e6e9f4; --line: #dde1ee;
  --ink: #10152b; --mute: #565d74;
  --gg-bg: #f5f6fc; --gg-card: #ffffff; --gg-ink: #10152b; --gg-mute: #565d74; --gg-line: #dde1ee;
  --blue-txt: #1257e6; --blue-soft: #e6efff; --acc-txt: #1257e6;
  --card-sh: 0 8px 24px rgba(30, 50, 120, .10); --card-sh-hi: 0 14px 32px rgba(30, 60, 160, .18);
}
:focus-visible { outline-color: var(--blue-txt); }
:root[data-theme="light"] :focus-visible { outline-color: #1257e6; }
.top { background: rgba(13, 18, 38, .92); }
:root[data-theme="light"] .top { background: rgba(255, 255, 255, .94); }

.logo.logo-img { padding: 0; background: none; transform: none; box-shadow: none; border-radius: 10px; font-size: 0; line-height: 0; gap: 0; }
.logo-img img { display: block; height: 40px; width: auto; }
.logo-img .lk-light { display: none; }
:root[data-theme="light"] .logo-img .lk-dark { display: none; }
:root[data-theme="light"] .logo-img .lk-light { display: block; }
.foot .logo-img img { height: 36px; }

.btn { border-radius: 999px; box-shadow: none; transition: transform .12s, box-shadow .15s, background .15s, filter .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-lg, .btn-sm { border-radius: 999px; box-shadow: none; }
.btn-sm:hover { box-shadow: none; }
.btn-butter, .top .make, :root[data-theme="light"] .top .make {
  background: linear-gradient(180deg, var(--blue), var(--blue-2)); color: #fff;
  box-shadow: 0 6px 18px rgba(23, 100, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-butter:hover, .top .make:hover { box-shadow: 0 8px 24px rgba(23, 100, 255, .45), 0 0 0 3px rgba(79, 139, 255, .25); }
.btn-butter:active, .top .make:active { background: #0a3fb8; }
.btn-orange, :root[data-theme="light"] .btn-orange { background: transparent; color: var(--blue-txt); box-shadow: inset 0 0 0 2px var(--blue-txt); }
.btn-orange:hover, :root[data-theme="light"] .btn-orange:hover { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue-txt); }
:root[data-theme="light"] .btn-orange { background: #fff; }
.btn-dark { background: linear-gradient(180deg, #1146c9, #0a3191); color: #fff; box-shadow: 0 6px 18px rgba(10, 49, 145, .35); }
.btn-dark:hover { box-shadow: 0 8px 22px rgba(10, 49, 145, .45); }
.btn-ghost, :root[data-theme="light"] .mast .btn-ghost { background: rgba(16, 21, 43, .35); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.btn-ghost:hover { background: rgba(16, 21, 43, .5); box-shadow: inset 0 0 0 2px #fff; }

.search input { border: 1.5px solid var(--line); background: var(--s1); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
:root[data-theme="light"] .search input { background: #fff; box-shadow: 0 2px 10px rgba(30, 50, 120, .07); }
.search input:focus, :root[data-theme="light"] .search input:focus { border-color: var(--blue-txt); box-shadow: 0 0 0 3px var(--blue-soft); }
.search input::placeholder { color: #8d95b3; }
:root[data-theme="light"] .search input::placeholder { color: #6b7088; }

.chip { border: 1.5px solid var(--line); background: var(--s1); }
.chip:hover { border-color: var(--blue-txt); }
.chip[aria-pressed="true"], :root[data-theme="light"] .chip[aria-pressed="true"] { background: linear-gradient(180deg, var(--blue), var(--blue-2)); border-color: var(--blue-2); color: #fff; }
.chip[aria-pressed="true"] small, :root[data-theme="light"] .chip[aria-pressed="true"] small { color: #dbe7ff; }

.card-art { border: 1px solid var(--line); box-shadow: var(--card-sh); }
.card:hover .card-art, :root[data-theme="light"] .card:hover .card-art { transform: translateY(-4px); border-color: var(--blue-txt); box-shadow: var(--card-sh-hi); }
.board, .cta-box { border: 1px solid var(--line); box-shadow: var(--card-sh); }
:root[data-theme="light"] .board, :root[data-theme="light"] .cta-box { background: #fff; }
.stat { border: 1px solid var(--line); border-radius: 999px; }
.ctl { border: 1.5px solid var(--line); border-radius: 999px; }
.ctl:hover { border-color: var(--blue-txt); }
.cat { box-shadow: var(--card-sh); }
.cat:hover { transform: translateY(-3px); }
:root[data-theme="light"] .cat { box-shadow: var(--card-sh); }

.badge { transform: none; border-radius: 999px; padding: 6px 10px; background: linear-gradient(180deg, var(--blue), var(--blue-2)); color: #fff; box-shadow: 0 3px 10px rgba(10, 60, 200, .35); }
.badge::before { content: "★"; margin-right: 4px; color: #ffd34d; }
.badge.new { background: #22d3ee; color: #06283d; box-shadow: 0 3px 10px rgba(34, 211, 238, .35); }
.badge.new::before { content: none; }
.sec-head .tag { transform: none; border-radius: 999px; padding: 6px 12px; background: var(--blue-soft); color: var(--blue-txt); }
.kicker, .info .cat-tag { transform: none; border-radius: 999px; }
.info .cat-tag { background: var(--blue-soft); color: var(--blue-txt); }
.sticker { transform: none; border-radius: 999px; background: #22d3ee; color: #06283d; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.status, :root[data-theme="light"] .status { background: rgba(16, 21, 43, .72); color: #fff; }
.rk-d { border-radius: 999px; }
.rk-up { background: #c6f6d8; color: #0b5a2c; }
.rk-down, :root[data-theme="light"] .rk-down { background: #e0157a; color: #fff; }
.rk-new { background: #22d3ee; color: #06283d; }
.more:hover { color: var(--ink); }

.theme-tg, .theme-tg:hover { width: auto; height: 38px; padding: 3px; gap: 2px; display: inline-flex; align-items: center; border: 1.5px solid var(--line); background: var(--s1); }
.theme-tg:hover { border-color: var(--blue-txt); }
.theme-tg svg, .theme-tg svg:first-child, .theme-tg svg:last-child,
:root[data-theme="light"] .theme-tg svg:first-child, :root[data-theme="light"] .theme-tg svg:last-child {
  display: block; width: 34px; height: 30px; padding: 6px 9px; border-radius: 999px; color: var(--mute); background: transparent; box-sizing: border-box;
}
.theme-tg svg:last-child { color: #fff; background: linear-gradient(180deg, var(--blue), var(--blue-2)); }
:root[data-theme="light"] .theme-tg svg:first-child { color: #fff; background: linear-gradient(180deg, var(--blue), var(--blue-2)); }
:root[data-theme="light"] .theme-tg svg:last-child { color: var(--mute); background: transparent; }

.car-btn { border: 1.5px solid var(--line); background: var(--s1); box-shadow: var(--card-sh); }
.car-btn:hover { border-color: var(--blue-txt); color: var(--blue-txt); }
.car-dot[aria-current="true"]::before, :root[data-theme="light"] .car-dot[aria-current="true"]::before { background: var(--blue); }

.pod { --pc: #f5b324; --pt: var(--pt-gold); --pg: rgba(245, 179, 36, .22); --m1: #ffe58a; --m2: #e8a512; --mt: #4a3000; }
.pod-silver { --pc: #b8c2d6; --pt: var(--pt-silver); --pg: rgba(184, 194, 214, .18); --m1: #eef2f8; --m2: #8f9bb3; --mt: #1d2433; }
.pod-bronze { --pc: #e0915a; --pt: var(--pt-bronze); --pg: rgba(224, 145, 90, .22); --m1: #f7c39a; --m2: #b65a24; --mt: #3d1a05; }
.board .pod a { grid-template-columns: 34px 76px minmax(0, 1fr); gap: 14px; border-radius: 20px; }
.medal { position: static; left: auto; top: auto; width: 34px; height: 34px; align-self: center; background: radial-gradient(circle at 35% 30%, var(--m1), var(--m2) 72%); background-color: var(--pc); color: var(--mt); font: 800 17px/1 var(--f); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), 0 3px 8px rgba(0, 0, 0, .3); }
.heat i { background: linear-gradient(90deg, var(--blue), #22d3ee); }
:root[data-theme="light"] .board .pod a { background: linear-gradient(150deg, var(--pg), transparent 70%), #fff; box-shadow: 0 6px 18px rgba(30, 50, 120, .08); }
:root[data-theme="light"] .pod { --pc: #d99a0b; --pg: rgba(245, 179, 36, .16); }

:root[data-theme="light"] .pod-silver { --pc: #7d8aa3; --pg: rgba(125, 138, 163, .16); --m1: #dfe5ef; --m2: #6b7891; --mt: #141a2b; }
:root[data-theme="light"] .pod-bronze { --pc: #c46a32; --pg: rgba(196, 106, 50, .14); }
@media (max-width: 1024px) {
  .board .pod a { grid-template-columns: 30px 60px minmax(0, 1fr); gap: 12px; }
  .medal { width: 30px; height: 30px; font-size: 15px; }
}
@media (max-width: 860px) {
  .board .pod a { grid-template-columns: 30px 54px minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .logo-img img { height: 32px; }
  .foot .logo-img img { height: 32px; }
  .board .pod a { grid-template-columns: 26px 46px minmax(0, 1fr); gap: 10px; }
  .medal { width: 26px; height: 26px; font-size: 13px; left: auto; top: auto; }
  .theme-tg, .theme-tg:hover { width: auto; height: 36px; }
  .theme-tg svg, .theme-tg svg:first-child, .theme-tg svg:last-child,
  :root[data-theme="light"] .theme-tg svg:first-child, :root[data-theme="light"] .theme-tg svg:last-child { width: 30px; height: 28px; padding: 6px 7px; }
}

@media (min-width: 861px) {
  .car-slide.has-banner { container-type: inline-size; }
  .car-slide.has-banner .mast-copy { max-width: var(--r3-copy, calc(30cqw - 30px)); }
  .car-slide.has-banner .mast .ttl, .car-slide.has-banner .ttl { font-size: clamp(36px, 4cqw, 60px); }
  .car-slide.has-banner .lede { max-width: none; }
  .car-slide.has-banner .actions { gap: 10px 12px; }
  .car-slide.has-banner .actions .btn { flex: 1 1 100%; justify-content: center; }
  .car-slide.has-banner::after { background: linear-gradient(90deg, rgba(16, 13, 29, .84) 0%, rgba(16, 13, 29, .76) 16%, rgba(16, 13, 29, .5) 24%, rgba(16, 13, 29, .16) 28.5%, rgba(16, 13, 29, 0) 30%); }
}

@media (min-width: 861px) and (max-width: 1279px) {
  .car-slide.has-banner::after { background: linear-gradient(90deg, rgba(16, 13, 29, .88) 0%, rgba(16, 13, 29, .84) 18%, rgba(16, 13, 29, .7) 26%, rgba(16, 13, 29, .3) 30%, rgba(16, 13, 29, 0) 33%); }

  .car-slide.has-banner .status { font-size: 12px; white-space: nowrap; }
  .car-slide.has-banner .by { white-space: nowrap; font-size: 13px; gap: 5px; letter-spacing: -.01em; }

  .car-slide.has-banner .by .ava { flex: none; }
  .car-slide.has-banner .lede { font-size: 15px; }
  .car-slide.has-banner .actions .btn { min-height: 44px; padding-block: 9px; font-size: 16px; }
}
@media (min-width: 861px) and (max-width: 939px) {

  .car-slide.has-banner .by { font-size: 12px; }
}
@media (min-width: 861px) {
  .car-slide.has-banner .by { text-shadow: 0 1px 3px rgba(16, 13, 29, .9), 0 0 8px rgba(16, 13, 29, .6); }
}

@media (min-width: 1280px) {
  .car-slide.has-banner::after { background: linear-gradient(90deg, rgba(16, 13, 29, .86) 0%, rgba(16, 13, 29, .8) 18%, rgba(16, 13, 29, .72) 27%, rgba(16, 13, 29, .5) 31%, rgba(16, 13, 29, 0) 35%); }
  .car-slide.has-banner .lede, .car-slide.has-banner .ttl { text-shadow: 0 1px 3px rgba(16, 13, 29, .85), 0 0 10px rgba(16, 13, 29, .55); }
}

.cat.has-art { isolation: isolate; }
.cat, .cat:hover { text-decoration: none; }
.cat.has-art .cat-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; pointer-events: none; }
.cat.has-art::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--c) 0%, var(--c) 22%, color-mix(in srgb, var(--c) 55%, transparent) 40%, transparent 52%); }
.cat.has-art .peek { z-index: 1; }
@media (max-width: 640px) {
  .cat.has-art::before { background: linear-gradient(90deg, var(--c) 0%, var(--c) 30%, color-mix(in srgb, var(--c) 70%, transparent) 58%, transparent 85%); }
}

.cat .peek { top: auto; bottom: -18px; right: 14px; width: 54px; }
.cat .peek + .peek { top: auto; bottom: -28px; right: 62px; }
@media (max-width: 640px) {
  .cat .peek { width: 44px; right: 10px; top: auto; bottom: -14px; }
  .cat:has(.peek) small { padding-right: 50px; }
}

.cat.has-art { container-type: inline-size; --pk-l: 106px; }
:lang(vi) .cat.has-art { --pk-l: 114px; }
:lang(ja) .cat.has-art { --pk-l: 130px; }
.cat.has-art .peek { top: auto; left: auto; right: max(238px, 54.5%); bottom: -14px; width: 44px; }
.cat.has-art .peek + .peek { top: auto; right: auto; left: calc(var(--pk-l) + 5px); bottom: -23px; }
@container (max-width: 361px) {
  .cat.has-art .peek { width: 38px; right: 237px; bottom: -12px; }
  .cat.has-art .peek + .peek { display: none; }
}
@container (max-width: 340px) { .cat.has-art .peek { display: none; } }
@container (max-width: 383px) { :lang(ja) .cat.has-art .peek + .peek { display: none; } }
@container (max-width: 367px) { :lang(vi) .cat.has-art .peek + .peek { display: none; } }
@container (max-width: 349px) { :lang(vi) .cat.has-art .peek { display: none; } }
@container (max-width: 372px) { :lang(ja) .cat.has-art .peek { display: none; } }

@media (min-width: 641px) and (max-width: 860px) {
  .car-slide.has-banner .mast-art { height: 312px; }
  .car-slide.has-banner .mast-copy { margin-top: 30px; }
}

@media (max-width: 640px) {
  .car-slide.has-banner { grid-template-rows: minmax(0, 1fr); align-content: stretch; padding-bottom: 18px; }
  .car-slide.has-banner .mast-art { display: none; }
  .car-slide.has-banner .mast-copy { display: flex; flex-direction: column; align-self: stretch; min-height: 0; padding-top: 0; }
  .car-slide.has-banner .status { align-self: flex-start; margin-bottom: 12px; }
  .car-slide.has-banner .ttl { -webkit-line-clamp: 2; }
  .car-slide.has-banner .lede { margin-top: auto; font-size: 15px; -webkit-line-clamp: 2; }
  .car-slide.has-banner .by { margin-top: 10px; }
  .car-slide.has-banner .actions { margin-top: 14px; gap: 8px; }
  .car-slide.has-banner .actions .btn { min-height: 46px; }
  .car-slide.has-banner::after { background: linear-gradient(180deg, rgba(16, 13, 29, .8) 0%, rgba(16, 13, 29, .62) 22%, rgba(16, 13, 29, 0) 34%, rgba(16, 13, 29, 0) 58%, rgba(16, 13, 29, .72) 68%, rgba(16, 13, 29, .88) 100%); }
}

.hero .mast-art.t5-art, .hero .t5-ttl, .hero .t5-o, .hero .t5-more, .hero .mast .lede.t5-only { display: none; }
@media (min-width: 1024px) {

  .hero .car-slide[data-t5] { grid-template-columns: 236px minmax(0, 1fr); gap: 26px; align-items: stretch; padding: 30px 32px 30px 44px; }
  .hero .car-slide[data-t5] .mast-copy { align-self: center; }
  .hero .car-slide[data-t5] .ttl, .hero .car-slide[data-t5] .mast-art.is-ext,
  .hero .car-slide[data-t5] .status > span:not(.t5-o), .hero .car-slide[data-t5] .lede .t5-x { display: none; }
  .hero .car-slide[data-t5] .status { gap: 0; margin-bottom: 14px; }
  .hero .car-slide[data-t5] .status i { margin-right: 9px; }
  .hero .car-slide[data-t5] .status .t5-o { display: inline; font-size: 13px; }
  .hero .car-slide[data-t5] .t5-ttl { display: block; margin: 0; font-weight: 1000; font-size: 40px; line-height: .98; letter-spacing: -.015em;
    text-transform: uppercase; color: #fff9f2; text-shadow: 3px 4px 0 var(--hb-ink, #08354a); overflow-wrap: anywhere; }
  .hero .car-slide[data-t5] .t5-ttl > span { display: block; }
  :lang(en) .hero .car-slide[data-t5] .t5-ttl { font-size: 36px; }
  .hero .car-slide[data-t5] .lede, .hero .car-slide[data-t5] .lede.t5-only { display: block; font-size: 15px; margin-top: 12px; max-width: none; }
  .hero .car-slide[data-t5] .lede .t5-o { display: inline; }
  .hero .car-slide[data-t5] .actions { margin-top: 20px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero .car-slide[data-t5] .actions .btn-lg { min-height: 48px; padding: 0 22px; font-size: 16px; }
  .hero .car-slide[data-t5] .t5-more { display: inline-flex; gap: 6px; align-items: center; font-weight: 800; font-size: 14px; color: #fff9f2;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
  .hero .car-slide[data-t5] .t5-more:hover { color: var(--butter); }
  .hero .car-slide[data-t5] .lede { text-wrap: balance; }
  :lang(zh) .hero .car-slide[data-t5] .lede { text-wrap: wrap; max-width: 13.3em; }
  .hero .car-slide[data-t5] .mast-art.t5-art { display: block; height: auto; min-height: 0; align-self: stretch; }

  .hero .t5-art .rk { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.48fr) minmax(0, 1fr);
    gap: 14px; height: 100%; margin: 0; padding: 0; list-style: none; }
  .hero .t5-art .rk li { position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; border-radius: 16px;
    border: 3px solid #fff9f2; background: #1c1229; box-shadow: 5px 6px 0 var(--hb-card, rgba(2, 30, 44, .55)); transition: transform .2s; }
  .hero .t5-art .rk li:nth-child(1) { grid-column: span 7; border-color: var(--butter); }
  .hero .t5-art .rk li:nth-child(2) { grid-column: span 5; }
  .hero .t5-art .rk li:nth-child(n+3) { grid-column: span 4; }
  .hero .t5-art .rk li:hover { transform: translateY(-3px); }
  .hero .t5-art .rk a { position: absolute; inset: 0; display: block; color: #fff9f2; text-decoration: none; }
  .hero .t5-art .rk a:focus-visible { outline-offset: -4px; }
  .hero .t5-art .t5-blur { display: none; }
  .hero .t5-art .t5-img { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; }
  .hero .t5-art .rk a::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(16, 13, 29, .3) 0%, rgba(16, 13, 29, 0) 18%, rgba(16, 13, 29, 0) 52%, rgba(16, 13, 29, .78) 72%, rgba(16, 13, 29, .95) 100%); }
  .hero .t5-art .t5-num { position: absolute; left: 11px; bottom: 9px; z-index: 2; font: 1000 26px/1 var(--f); color: #fff9f2; text-shadow: 2px 2px 0 var(--hb-ink, #08354a); }
  .hero .t5-art .rk li:first-child .t5-num { font-size: 34px; }
  .hero .t5-art .t { position: absolute; left: 46px; right: 10px; bottom: 9px; z-index: 2; }
  .hero .t5-art .rk li:first-child .t { left: 54px; }
  .hero .t5-art .t b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal;
    font: 900 14.5px/1.22 var(--f); text-wrap: balance; overflow-wrap: anywhere; }
  .hero .t5-art .rk li:first-child .t b { font-size: 16px; }
  .hero .t5-art .t > span { display: block; margin-top: 3px; font: 800 12.5px/1.3 var(--f); color: #ffe8dc; }

  :root { --hb-g: #0c4f73 0%, #0f7488 50%, #18a39a 100%; --hb-tint: 4, 26, 40; --hb-dot: #02202e; --hb-doto: .5; --hb-border: #2b8aa0;
    --hb-ink: #08354a; --hb-card: rgba(2, 30, 44, .55); --hb-star: #0a4a63; }
  :root[data-bg="mint"] { --hb-g: #1f9a7e 0%, #3cbf98 50%, #84dcb6 100%; --hb-tint: 6, 44, 36; --hb-dot: #0b4a3c; --hb-doto: .42; --hb-border: #2e9c80;
    --hb-ink: #0c4a3b; --hb-card: rgba(6, 52, 42, .5); --hb-star: #157a62; }
  :root[data-bg="coral"] { --hb-g: #c2334d 0%, #e8505b 50%, #f7866a 100%; --hb-tint: 70, 10, 22; --hb-dot: #6e0f22; --hb-doto: .38; --hb-border: #e0606a;
    --hb-ink: #7a1428; --hb-card: rgba(80, 12, 26, .5); --hb-star: #a8253c; }
  .hero .mast { background: linear-gradient(110deg, var(--hb-g)); border-color: var(--hb-border); }
  .hero .mast::before { opacity: var(--hb-doto); background: radial-gradient(var(--hb-dot) 1.2px, transparent 1.2px) 0 0 / 17px 17px; }
  .hero .car-slide:not(.has-banner)::after { background: linear-gradient(90deg, rgba(var(--hb-tint), .66) 0%, rgba(var(--hb-tint), .6) 46%, rgba(var(--hb-tint), .22) 66%, rgba(var(--hb-tint), 0) 82%); }
  .hero .mast .ttl { text-shadow: 4px 5px 0 var(--hb-ink); }
  .hero .stack { box-shadow: 10px 12px 0 var(--hb-card); }
  .hero .mast-art.is-ext .stack.s3 { box-shadow: 12px 14px 0 var(--hb-card), 0 18px 60px rgba(2, 20, 30, .45); }
  .hero .star { text-shadow: 5px 5px 0 var(--hb-star); }
}

@media (min-width: 1024px) and (max-width: 1179px) {
  .hero .car-slide[data-t5] { grid-template-columns: 214px minmax(0, 1fr); gap: 20px; padding: 28px 26px 28px 34px; }
  .hero .car-slide[data-t5] .t5-ttl { font-size: 36px; }
  :lang(en) .hero .car-slide[data-t5] .t5-ttl { font-size: 32px; }
  .hero .t5-art .rk { gap: 12px; }
}

.hero .mast .ttl.ttl-lg { font-size: clamp(34px, 4vw, 60px); }
.hero .mast .ttl.ttl-xl { font-size: clamp(30px, 3.4vw, 50px); -webkit-line-clamp: 4; }
@media (min-width: 861px) {
  .hero .car-slide.has-banner .mast .ttl.ttl-lg { font-size: clamp(30px, 3.3cqw, 48px); -webkit-line-clamp: 4; }
  .hero .car-slide.has-banner .mast .ttl.ttl-xl { font-size: clamp(26px, 2.8cqw, 40px); -webkit-line-clamp: 5; }
}
@media (max-width: 860px) {
  .hero .mast .ttl.ttl-lg { -webkit-line-clamp: 3; }
  .hero .mast .ttl.ttl-xl { -webkit-line-clamp: 4; }
}
@media (max-width: 640px) {
  .hero .mast .ttl.ttl-lg { font-size: clamp(28px, 8.2vw, 37px); -webkit-line-clamp: 3; }
  .hero .mast .ttl.ttl-xl { font-size: clamp(24px, 7vw, 32px); -webkit-line-clamp: 4; }
  .hero .car-slide.has-banner .mast .ttl.ttl-lg { -webkit-line-clamp: 3; }
  .hero .car-slide.has-banner .mast .ttl.ttl-xl { -webkit-line-clamp: 4; }
}