/* FC-Tracker · Draft 2 – website layout (09–11). Tokens only. */
.site main { display: block; }
.sec-site { padding: 96px 0; }
.sec-site.tight { padding: 64px 0; }
.sec-site + .sec-site { border-top: 1px solid var(--line); }
.s-eyebrow { margin-bottom: 14px; display: block; }
.s-h1 { font-family: var(--f-display); font-stretch: var(--display-stretch); font-weight: 700; font-size: clamp(44px, 6.4vw, 92px); line-height: .94; letter-spacing: -.012em; margin: 0; }
.s-h2 { font-family: var(--f-display); font-stretch: var(--display-stretch); font-weight: 700; font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -.008em; margin: 0; }
.s-lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--text-2); line-height: 1.5; max-width: 56ch; }
.hero { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; padding: 72px 0 80px; }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.hero .meta { margin-top: 18px; font-size: 14px; color: var(--text-3); display: flex; gap: 18px; flex-wrap: wrap; }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip > div { padding: 28px 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.strip > div:first-child { border-left: 0; padding-left: 0; }
.strip b { font-family: var(--f-num); font-stretch: var(--num-stretch); font-weight: 700; font-size: clamp(40px, 4.6vw, 64px); line-height: .86; font-variant-numeric: tabular-nums; }
.feat { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 48px; }
.feat .f { --cut: var(--cut-l); position: relative; padding: 28px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.feat { align-items: start; }
.feat .f .no { font-family: var(--f-num); font-stretch: var(--num-stretch); font-weight: 700; font-size: 15px; color: var(--accent-text); letter-spacing: .06em; }
.feat .f h3 { font-family: var(--f-display); font-stretch: var(--display-stretch); font-weight: 700; font-size: 28px; line-height: 1.04; margin: 0; }
.feat .f p { color: var(--text-2); font-size: 15px; }
.feat .f .vis { margin-top: 8px; }
.f-7 { grid-column: span 7; } .f-5 { grid-column: span 5; } .f-4 { grid-column: span 4; } .f-6 { grid-column: span 6; } .f-8 { grid-column: span 8; } .f-12 { grid-column: span 12; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.steps3 > div { border-top: 2px solid var(--text); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.steps3 .n { font-family: var(--f-num); font-stretch: var(--num-stretch); font-weight: 700; font-size: 48px; line-height: .9; }
.band { --cut: var(--cut-xl); padding: 48px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; }
  .feat .f { grid-column: span 12; min-height: 0; }
}
@media (max-width: 720px) {
  .sec-site { padding: 64px 0; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip > div { padding: 20px 0 20px 16px; }
  .strip > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .steps3 { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; padding: 28px 22px; }
  .hero .cta .btn { flex: 1; }
}

.bal { text-wrap: balance; }
.final { --cut: var(--cut-xl); display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding: 56px 48px; background: var(--active-bg); color: var(--active-fg); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.final .muted { color: color-mix(in srgb, var(--active-fg) 70%, transparent); }
.feat .f { --cut: var(--cut-l); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
@media (max-width: 720px) {
  .final { grid-template-columns: 1fr; padding: 32px 22px; }
}.hero .s-h1 { font-size: clamp(44px, 5vw, 72px); }
.hero { grid-template-columns: .9fr 1.1fr; }
@media (max-width: 1080px) { .hero { grid-template-columns: 1fr; } }

@media (max-width: 720px) {
  .feat .f .vis.row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .feat .f .vis.row > * { scroll-snap-align: start; flex: none; }
}

/* hero product moment: three EA cards on the warm studio plinth + one readable proof */
.hero-shot { position: relative; padding-bottom: 40px; }
.hero-plinth { --cut: var(--cut-xl); padding: 48px 24px 40px; clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.cards3 { display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.cards3 .fut:nth-child(2) { margin-bottom: 18px; }
.proof { position: absolute; left: 24px; bottom: 0; padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; max-width: 360px; }
.hero .s-h1 { font-size: clamp(44px, 5.2vw, 76px); }
@media (max-width: 720px) {
  .hero-plinth { padding: 28px 8px 56px; }
  .cards3 { gap: 6px; }
  .cards3 .fut { --w: 104px !important; }
  .cards3 .fut:nth-child(2) { --w: 120px !important; margin-bottom: 10px; }
  .proof { left: 12px; right: 12px; }
}
.hero { grid-template-columns: 1fr 1fr; }
.hero .s-h1 { font-size: clamp(44px, 4.4vw, 64px); }
.hero .s-h1 br + * { }
.proof { position: static; margin: -28px 0 0 24px; }
.hero-shot { padding-bottom: 0; }
.cards3 .fut { --w: 164px !important; }
.cards3 .fut:nth-child(2) { --w: 196px !important; }
@media (max-width: 1080px) { .hero { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .cards3 .fut { --w: 100px !important; } .cards3 .fut:nth-child(2) { --w: 118px !important; } .proof { margin: -20px 12px 0; } }

/* round 9: an editorial home – huge headline, a full-bleed product band, alternating rows */
.h9 { padding: 72px 0 40px; }
.h9-title { font-family: var(--f-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .84; font-size: clamp(64px, 10vw, 148px); margin: 0; }
.h9-row { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-top: 36px; }
.h9-band { padding: 72px 0 72px; --sweep-wall: transparent; }
:root[data-theme="glass"] .h9-band { background: linear-gradient(rgba(10, 9, 13, .55), rgba(10, 9, 13, .75)), var(--game) center 40% / cover no-repeat; }
:root[data-theme="glass"] .h9-band::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(14px) saturate(.75); -webkit-backdrop-filter: blur(14px) saturate(.75); }
.h9-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; }
.h9-band .cards3 { gap: 22px; }
.h9-band .cards3 .fut { --w: 240px !important; }
.h9-band .cards3 .fut:nth-child(2) { --w: 290px !important; margin-bottom: 30px; }
.h9-band .proof { position: static; margin-top: -34px; z-index: 2; }
.h9-fact { padding: 28px 0; border-bottom: 1px solid var(--line); }
.rows9 { display: flex; flex-direction: column; gap: 32px; }
.r9 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: center; }
.r9.flip { grid-template-columns: 1fr 1.5fr; }
.r9.flip .r9-vis { order: 2; }
.r9-vis { --cut: var(--cut-xl); min-height: 340px; padding: 40px; display: grid; place-items: center; }
.r9-txt { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
  .h9-row, .r9, .r9.flip { grid-template-columns: 1fr; }
  .r9.flip .r9-vis { order: 0; }
  .r9-vis { min-height: 0; padding: 24px 12px; }
  .h9-band .cards3 { gap: 8px; }
  .h9-band .cards3 .fut { --w: 104px !important; }
  .h9-band .cards3 .fut:nth-child(2) { --w: 124px !important; margin-bottom: 12px; }
  .h9-band .proof { margin: -14px 12px 0; }
  .r9-vis .slot .fut { --w: 84px !important; }
  .r9-vis .ticks { width: 100% !important; }
}
/* phone pass (round 11): no overflow, nothing under 12 px, tap targets ≥ 40 px */
@media (max-width: 720px) {
  .r9, .r9.flip { grid-template-columns: minmax(0, 1fr); }
  .r9-vis, .r9-txt { min-width: 0; }
  .r9-vis .l3 { width: 100%; }
  .r9-vis .l3-body { min-width: 0; flex: 1; }
  .r9-vis .l3-title { font-size: 20px; }
  .site .eyebrow { font-size: 12px; }
  .site .tag { font-size: 12px; height: 22px; }
  .site .grade.s { --g: 26px; }
  .site .chip { font-size: 12px; }
  .site .t-12 { font-size: 12px; }
  .sh-bar .brand, .sh-login { min-height: 40px; display: inline-flex; align-items: center; }
  .sf a { display: inline-flex; align-items: center; min-height: 40px; }
  .h9-row a.t-15, .site a.t-13 { display: inline-flex; align-items: center; min-height: 40px; }
  .site .btn-s { height: 40px; }
}
@media (max-width: 720px) {
  .site .grade.s { --g: 28px; }
  .dhero .score.num-hero { font-size: 120px; }
}
:root[data-theme="glass"] .h9-band { background: #0D0C10; overflow: hidden; }
:root[data-theme="glass"] .h9-band::before { content: ""; position: absolute; inset: -20px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--game) center 45% / cover no-repeat; filter: blur(9px) brightness(.7) saturate(1); z-index: 0; }
:root[data-theme="glass"] .h9-band::after { background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent); }
/* round 16: the glass .sweep reset made the band static, so its game layer escaped and covered the hero – pin it */
:root[data-theme="glass"] .h9-band.sweep { position: relative; isolation: isolate; }
:root[data-theme="glass"] .h9-band.sweep > .h9-stage { position: relative; z-index: 1; }
:root[data-theme="glass"] .h9-band.sweep::before { z-index: 0; }

/* ===================================================================================================
   T2 (2026-11-04) · the scroll story: 13-site-story, 14-gallery-guide and the home page (09).
   Today's site principles in v2: one sharp line follows the reader down the page (45° turns like the
   cut corners, a red cut-corner head, a chapter's number fills when the line reaches it) and every
   scene plays its real component once when it comes into view. Cards carry their own light (the
   walkout light behind a special, one foil sweep across EA's art); the UI never glows.
   Reduced motion (and #shot) = every scene in its end state, the line fully drawn. Tokens only.
   =================================================================================================== */
.story { position: relative; }
.st-spine { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.st-spine path { fill: none; stroke-width: 2; stroke-linejoin: miter; stroke-linecap: butt; }
.st-spine .trk { stroke: var(--line); }
.st-spine .ln { stroke: var(--text); }
.st-spine .hd { fill: var(--accent); }
.st-h1 { font-family: var(--f-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; line-height: .86; font-size: clamp(56px, 8.4vw, 128px); margin: 0; text-wrap: balance; }
.st-h2 { font-family: var(--f-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: -.015em; line-height: .88; font-size: clamp(36px, 4.2vw, 60px); margin: 0; text-wrap: balance; }
.st-h3 { font-family: var(--f-display); font-stretch: 75%; font-weight: 700; font-size: 22px; line-height: 1.1; margin: 0; }

/* a chapter: text · the line's lane · the scene (flip = scene first). The number sits on the lane. */
.st-chap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) 112px minmax(0, 7fr); grid-template-areas: "txt no vis"; align-items: start; padding: 64px 0; }
.st-chap.flip { grid-template-columns: minmax(0, 7fr) 112px minmax(0, 5fr); grid-template-areas: "vis no txt"; }
.st-chap.wide { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "no txt" "no vis"; row-gap: 32px; }
.st-txt { grid-area: txt; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.st-txt p { color: var(--text-2); font-size: 17px; line-height: 1.55; max-width: 56ch; }
.st-txt .st-key { color: var(--text); font-weight: 600; font-size: 19px; line-height: 1.45; }
.st-vis { grid-area: vis; min-width: 0; }
.st-chap.stick .st-vis { position: sticky; top: 104px; }
.st-no { grid-area: no; justify-self: center; --cut: var(--cut-s); --ring: var(--line-strong); width: 44px; height: 44px; display: grid; place-items: center;
  font-family: var(--f-num); font-stretch: var(--num-stretch); font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums lining-nums; color: var(--text-3);
  background: var(--bg); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background var(--t-med), color var(--t-med); }
.st-no.on { background: linear-gradient(var(--active-bg), var(--active-bg)), var(--bg); color: var(--active-fg); --ring: var(--active-ring); }
.st-chap.wide .st-no { justify-self: start; margin-left: 34px; }

/* scenes: real components in a panel; .play is added once on view, .done when the scene has ended */
.sc { --cut: var(--cut-xl); position: relative; padding: 32px; min-height: 0; display: grid; align-content: center; gap: 24px; overflow: hidden; }
.sc .lab { font-size: 13px; color: var(--text-3); font-weight: 600; }
.sc .big { font-family: var(--f-num); font-stretch: var(--num-stretch); font-weight: 700; font-size: clamp(48px, 5vw, 72px); line-height: .86; font-variant-numeric: tabular-nums lining-nums; display: inline-flex; align-items: baseline; }
.sc .mid { font-family: var(--f-num); font-stretch: var(--num-stretch); font-weight: 700; font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.sc .rise { transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.sc:not(.play) .rise { opacity: 0; transform: translateY(8px); }
.sc-g { display: grid; gap: 10px; justify-content: start; }
.sc-g .fut { --w: 100% !important; }

/* 01 a set is read: the set page, a read line passing over it, the score block filling in */
.sc-read { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; }
.sc-page { position: relative; display: flex; flex-direction: column; gap: 12px; }
.sc-page .sc-g { grid-template-columns: repeat(3, 92px); }
.sc-scan { position: absolute; left: -8px; right: -8px; top: 0; height: 2px; background: var(--text); opacity: 0; pointer-events: none; z-index: 9; }
.sc.play .sc-scan { animation: scan 1300ms 250ms var(--ease) both; }
@keyframes scan { 0% { top: 28px; opacity: 0; } 12% { opacity: .7; } 88% { opacity: .7; } 100% { top: 100%; opacity: 0; } }
.sc-detail { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sc-bb { display: flex; gap: 20px; flex-wrap: wrap; font-size: 15px; color: var(--text-2); }
.sc-bb b { color: var(--text); }
.sc-next { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-2); }
.sc-next b { color: var(--text); }

/* 02 first owner: the triangles come in one by one, the tag steps 5 · 10 · 20 */
.sc-fo .sc-g { grid-template-columns: repeat(5, 84px); }
.fo-w { position: relative; display: inline-block; vertical-align: top; transition: opacity var(--t-med), filter var(--t-med); }
.sc-fo.prime .fo-w:not(.on) { opacity: .28; filter: saturate(0); }
.fo-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fo-steps > span { --cut: var(--cut-s); display: flex; justify-content: space-between; align-items: baseline; padding: 10px 12px; background: var(--fill); color: var(--text-3); font-size: 14px; font-weight: 600;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: background var(--t-med), color var(--t-med); }
.fo-steps > span b { font-family: var(--f-num); font-stretch: var(--num-stretch); font-size: 22px; line-height: 1; }
.fo-steps > span.on { background: var(--done-wash); color: var(--done-text); }
.fo-tag { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 15px; color: var(--text-2); }
.fo-tag .tag { height: 26px; padding: 0 10px; font-size: 13px; }
.fo-tag .mid { color: var(--done-text); }

/* 03 the swap: Optimize's higher rating against the first owner card with its bonus */
.sc-swap { grid-template-columns: 1fr auto 1fr; align-items: end; justify-items: center; text-align: center; }
.sw-side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sw-side .fut { --w: 150px !important; }
.sw-side .lab { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; }
.sw-vs { align-self: center; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; color: var(--text-3); font-size: 22px; }
.sw-pts { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sw-pts small { font-size: 13px; color: var(--text-3); }
.sw-opt { opacity: .62; }
.sw-verdict { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 15px; color: var(--text-2); }
.sw-verdict .chip { font-size: 13px; }

/* 04 a pack: the card walks out, the notice drops in, the set reaches the next grade */
.sc-pack { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 36px; }
.sc-pack .wo .fut { --w: 170px !important; }
.sc:not(.play) .wo .fut { visibility: hidden; }
.pk-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pk-right .l3 { display: flex; }
.pk-right .l3-body { min-width: 0; flex: 1; }
.pk-grades { display: flex; align-items: center; gap: 12px; }
.pk-grades svg { color: var(--text-3); width: 18px; height: 18px; }
.pk-grades .grade { transition: opacity var(--t-med); }
.sc:not(.done) .pk-grades .new { opacity: .25; }

/* 05 buy next: the list, the top buy ticked off when the purchase goes through */
.sc-buy { gap: 18px; }
.by-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.by-row:last-of-type { border-bottom: 0; }
.by-row .gain { font-family: var(--f-num); font-stretch: var(--num-stretch); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; color: var(--text); display: inline-flex; align-items: baseline; }
.by-row .price { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-num); font-stretch: var(--num-stretch); font-weight: 700; font-size: 18px; min-width: 92px; justify-content: flex-end; }
.by-row .got { display: none; align-items: center; gap: 6px; font-weight: 700; color: var(--done-text); font-size: 14px; }
.by-foot { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding-top: 6px; }

/* card light: the walkout light behind a special (EA's own rarity colour in --lt) and one foil sweep */
.lit { position: relative; display: inline-block; isolation: isolate; }
.lit.wl::before { content: ""; position: absolute; left: 50%; bottom: 6%; width: 230%; height: 150%; z-index: -1; pointer-events: none; transform: translateX(-50%); transform-origin: 50% 100%;
  background:
    repeating-conic-gradient(from 150deg at 50% 100%, transparent 0deg 3deg, color-mix(in srgb, var(--lt, var(--text-3)) 60%, transparent) 3.4deg 4.4deg, transparent 4.8deg 9deg),
    linear-gradient(to top, color-mix(in srgb, var(--lt, var(--text-3)) 75%, transparent), transparent 80%);
  clip-path: polygon(36% 100%, 64% 100%, 100% 0, 0 0);
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 16%, rgba(0, 0, 0, .5) 58%, transparent 96%); mask-image: linear-gradient(to top, transparent 0, #000 16%, rgba(0, 0, 0, .5) 58%, transparent 96%);
  opacity: .55; }
:root[data-theme="light"] .lit.wl::before { --lt: var(--lt2); opacity: .6; }
.lit > .fut { position: relative; z-index: 1; }
.lit-foil { position: absolute; inset: 0; z-index: 8; pointer-events: none; clip-path: polygon(9% 7%, 50% 2.5%, 91% 7%, 93% 80%, 50% 96%, 7% 80%);
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%) no-repeat; background-size: 320% 100%; background-position: 130% 0; mix-blend-mode: overlay; opacity: 0; }
.play .lit.wl::before { animation: walklight 1400ms 200ms var(--ease-out) both; }
.play .lit-foil { animation: foil 1000ms 900ms cubic-bezier(.45, 0, .2, 1) both; }
@keyframes walklight { 0% { opacity: 0; transform: translateX(-50%) scaleY(.2); } 40% { opacity: .85; } 100% { transform: translateX(-50%) scaleY(1); } }
@keyframes foil { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }

/* the story's hero: the headline and the staged cards; the chapter index below is where the line starts */
.st-hero { padding: 72px 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
.st-hero .lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--text-2); line-height: 1.5; max-width: 52ch; margin-top: 24px; }
.st-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 18px; padding: 56px 0 36px; }
.st-stage .fut { --w: 176px !important; }
.st-stage .lit .fut { --w: 220px !important; }
.st-stage > .lit { margin-bottom: 20px; }
.st-toc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
.st-toc.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.st-toc a { --cut: var(--cut-s); display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; min-height: 76px; background: var(--surface); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); font-weight: 600; font-size: 15px; line-height: 1.25; }
.st-toc a { position: relative; isolation: isolate; --plate: transparent; }
.st-toc a:hover { --plate: var(--fill); }
.st-toc a .num { color: var(--text-3); font-size: 15px; }
.st-end { position: relative; z-index: 1; padding: 24px 0 96px; }
.st-next { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }

@media (max-width: 1080px) {
  .st-hero { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .st-toc, .st-toc.n4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* one column: the lane becomes a rail on the left and the line runs straight down it */
@media (max-width: 900px) {
  .st-chap, .st-chap.flip, .st-chap.wide { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "no txt" ". vis"; column-gap: 14px; row-gap: 28px; padding: 40px 0; }
  .st-no, .st-chap.wide .st-no { justify-self: start; margin-left: 0; width: 40px; height: 40px; }
  .st-chap.stick .st-vis { position: static; }
  .sc { padding: 20px 16px; min-height: 0; }
  .sc-read, .sc-pack { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sc-page .sc-g { grid-template-columns: repeat(3, minmax(0, 92px)); }
  .sc-fo .sc-g { grid-template-columns: repeat(3, minmax(0, 88px)); }
  .sc-fo .sc-g > :nth-child(n + 10) { display: none; }
  .sc-swap { grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .sw-side .fut { --w: 112px !important; }
  .sc-pack .wo { justify-self: center; }
  .by-row { grid-template-columns: 44px minmax(0, 1fr) auto; row-gap: 4px; }
  .by-row .price, .sc.done .by-row.target .got { grid-column: 2 / -1; justify-content: flex-start; min-width: 0; font-size: 16px; }
  .st-stage { gap: 8px; padding: 40px 0 20px; }
  .st-stage .fut { --w: 96px !important; }
  .st-stage .lit .fut { --w: 132px !important; }
  .st-stage > .lit { margin-bottom: 10px; }
  .st-toc, .st-toc.n4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .st-toc a { min-height: 64px; padding: 12px; }
  .st-txt p { font-size: 16px; }
  .st-txt .st-key { font-size: 17px; }
  .fo-steps > span { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc .rise, .fo-w, .st-no, .pk-grades .grade { transition: none !important; }
  .sc .rise { opacity: 1 !important; transform: none !important; }
  .sc .sc-scan, .lit-foil { display: none; }
  .lit.wl::before { animation: none !important; opacity: .5; }
  .st-stage .fut { visibility: visible !important; }
  .sc .wo .fut { visibility: visible !important; animation: none !important; }
}
.shot .sc .rise { opacity: 1 !important; transform: none !important; }
.shot .sc-scan, .shot .lit-foil { display: none; }
.shot .lit.wl::before { animation: none !important; }
.shot .sc .wo .fut { visibility: visible !important; }
.st-stage:not(.play) .fut { visibility: hidden; }
.shot .st-stage .fut { visibility: visible !important; }

/* ---------------------------------------------------------------- 14 · Gallery guide (gg-*) */
.gg-h1 { font-size: clamp(48px, 6.2vw, 96px); }
.gg-hero { align-items: center; }
.gg-formula { min-height: 0; gap: 18px; }
.gg-eq { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gg-eq .op { font-family: var(--f-num); font-stretch: var(--num-stretch); font-weight: 700; font-size: 28px; color: var(--text-3); }
.gg-box { display: flex; flex-direction: column; gap: 6px; }
.gg-box.tot .mid { font-size: 36px; }
.gg-total { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
/* category tabs as the overlay's top slab: the active one is a filled cut block with a 3 px red bottom edge */
.gg-tabs { display: flex; align-items: center; gap: 10px; }
.gg-tabrow { display: flex; gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
.gg-tab { --cut: var(--cut-xs); position: relative; padding: 9px 12px; font-family: var(--f-display); font-stretch: 75%; font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; color: var(--text-2); white-space: nowrap;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); transition: background var(--t-med), color var(--t-med); }
.gg-tab.on { background: var(--tab-on-bg, var(--active-bg)); color: var(--tab-on-fg, var(--active-fg)); box-shadow: inset 0 -3px 0 var(--accent); }
.gg-list { display: none; }
.gg-list.on { display: block; }
.gg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: 16px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.gg-row:last-child { border-bottom: 0; }
.gg-row .grade { justify-self: end; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gg-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.gg-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gg-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.gg-tags .tag { height: 26px; padding: 0 10px; font-size: 13px; }
.gg-tags .tag b { color: var(--text); margin-left: 4px; }
.gg-tags .tag.done b { color: inherit; }
.gg-tags .tag.off { color: var(--text-3); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.gg-tags .tag svg { width: 11px; height: 11px; margin-right: 2px; }
/* the reward ladder: five steps spaced evenly, the fill runs to the score */
.gg-track { position: relative; height: 128px; margin: 4px 26px 0; }
.gg-track .trk, .gg-track .fil { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--track); width: 100%; }
.gg-track .fil { background: var(--text); width: calc(var(--fill) * 100%); transition: width 1600ms var(--ease-out) 300ms; }
.sc:not(.play) .gg-track .fil { width: 0; }
.gg-step { position: absolute; top: 0; left: calc(var(--x) * 100%); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gg-step .grade { --g: 40px; }
.gg-step .grade.l { --g: 40px; }
.gg-step b { font-size: 18px; }
.gg-step small { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.gg-step:not(.got) .grade { opacity: .7; }
.gg-faces { display: flex; flex-wrap: wrap; gap: 8px; }
.gg-vs { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 20px; align-items: center; }
.gg-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.gg-side .lab { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; }
.gg-ten { display: grid; grid-template-columns: repeat(5, 52px); gap: 8px; }
.gg-bars { display: flex; flex-direction: column; gap: 6px; }
.gg-bars i { display: block; height: 8px; width: calc(var(--w) * 100%); background: var(--text); transition: width 1300ms var(--ease-out) 600ms; margin-bottom: 8px; }
.gg-bars i.b { background: var(--text-3); }
.sc:not(.play) .gg-bars i { width: 0; }
/* tables (readers and search): real numbers, tabular */
.gg-t, .gg-sets { width: 100%; border-collapse: collapse; font-size: 15px; }
.gg-t { max-width: 520px; margin-top: 8px; }
.gg-t caption { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding-bottom: 10px; }
.gg-t th, .gg-t td, .gg-sets th, .gg-sets td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; }
.gg-t thead th, .gg-sets thead th { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.gg-t tbody th { font-weight: 700; color: var(--text); }
.gg-t td.num, .gg-sets td.num, .gg-sets th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.gg-t .bar-c { width: 45%; }
.gg-t .bar-c span { display: block; height: 6px; width: calc(var(--w) * 100%); background: var(--text-3); }
.gg-jump { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.gg-jump .chip { min-height: 32px; }
.gg-jump .chip .num { color: var(--text-3); margin-left: 4px; }
.gg-cat { margin-top: 40px; scroll-margin-top: 96px; }
.gg-cat-h { padding-bottom: 10px; border-bottom: 2px solid var(--text); gap: 16px; flex-wrap: wrap; }
.gg-sets tbody th { font-weight: 600; color: var(--text); }
.gg-sets tbody th small { display: block; font-size: 12px; font-weight: 500; color: var(--text-3); }

.gg-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.gg-q { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.gg-q p { color: var(--text-2); font-size: 16px; line-height: 1.55; }
@media (max-width: 900px) {
  .gg-eq { gap: 10px; }
  .gg-eq .mid { font-size: 24px; }
  .gg-tab { font-size: 14px; padding: 8px 10px; }
  .gg-tabs .key { display: none; }
  .gg-track { margin: 4px 18px 0; height: 112px; }
  .gg-step .grade, .gg-step .grade.l { --g: 32px; }
  .gg-step b { font-size: 15px; }
  .gg-vs { grid-template-columns: minmax(0, 1fr); }
  .gg-vs .sw-vs { justify-self: start; }
  .gg-ten { grid-template-columns: repeat(5, minmax(0, 52px)); }
  .gg-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* every set on a phone: one block per set, the thresholds on one labelled line */
  .gg-sets thead { display: none; }
  .gg-sets, .gg-sets tbody { display: block; }
  .gg-sets tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px 6px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .gg-sets th, .gg-sets td { border: 0; padding: 0; }
  .gg-sets tbody th { grid-column: 1 / 5; }
  .gg-sets td.num { text-align: left; font-size: 14px; }
  .gg-sets td.num::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 700; color: var(--text-3); }
}

/* ---------------------------------------------------------------- 09 · the home page on the same engine */
.h9-band .cards3 > .lit:nth-child(2) .fut { --w: 290px !important; }
.h9-band .cards3 > .lit:nth-child(2) { margin-bottom: 30px; }
.h9-stage:not(.play) .fut { visibility: hidden; }
.shot .h9-stage .fut { visibility: visible !important; }
.h-ticks { width: min(420px, 100%); }
.h-ticks i { transition: opacity var(--t-fast) calc(var(--i) * 70ms); }
.sc:not(.play) .h-ticks i { opacity: 0; }
.h-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.h-go { --cut: var(--cut-l); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px; min-height: 140px; transition: background var(--t-fast); }
.h-go { isolation: isolate; --plate: transparent; }
.h-go:hover { --plate: var(--fill); }
.h-go > svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 900px) {
  .h9-band .cards3 > .lit:nth-child(2) .fut { --w: 124px !important; }
  .h9-band .cards3 > .lit:nth-child(2) { margin-bottom: 12px; }
  .h-more { grid-template-columns: minmax(0, 1fr); }
  .h-go { padding: 20px; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .h9-stage .fut { visibility: visible !important; } .h-ticks i { opacity: 1 !important; transition: none; } }
.sc .l3 { display: flex; min-width: 0; max-width: 100%; }
.sc .l3-body { min-width: 0; flex: 1; }
@media (max-width: 900px) { .sc .l3-title { font-size: 20px; } .sc .l3-tag { width: 72px; } }
@media (max-width: 900px) { .sc .l3-tag { width: auto; padding: 0 12px; } .h-sets .num-l { font-size: 52px; white-space: nowrap; } }
/* the walkout light may reach past the column, never past the page */
.site main { overflow-x: clip; }
@media (max-width: 900px) { .lit.wl::before { width: 190%; height: 135%; } }
/* glass resets .sweep children to static (components.css) – the light must stay anchored to its card */
:root[data-theme="glass"] .sweep > .lit, :root[data-theme="glass"] .sweep .lit { position: relative; z-index: 1; }
/* §16a fills are plates: hover sits 4 px inside the tile, on its own cut (index tiles, home link tiles) */
.st-toc a::before, .h-go > .plate { content: ""; position: absolute; inset: 4px; z-index: -1; pointer-events: none; background: var(--plate); --pc: max(0px, calc(var(--cut) - 1.6px));
  clip-path: polygon(var(--pc) 0, 100% 0, 100% calc(100% - var(--pc)), calc(100% - var(--pc)) 100%, 0 100%, 0 var(--pc)); transition: background var(--t-fast); }
/* §16a (user): the every-set list is catalog facts only; a grade cell = threshold + its tokens */
.gg-sets td small { display: block; font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
/* §16a (user): repeated markers never pack tight – even gaps, spread across the width */
.sc-fo .sc-g { grid-template-columns: repeat(5, minmax(0, 1fr)); justify-content: stretch; justify-items: center; }
.sc-fo .sc-g > .fo-w { width: min(100%, 88px); }
.gg-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); justify-items: center; gap: 10px 8px; }
.gg-faces .fut { --w: 100% !important; }
.gg-faces > .fo-w { width: min(100%, 76px); }
@media (max-width: 900px) { .gg-faces > :nth-child(n + 13) { display: none; } }
.gg-ten { grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; width: 100%; }
.gg-side:last-child { width: 100%; }
.gg-cards { justify-content: space-between; }
/* §16a (user): an icon beside text sits on the capitals' optical centre (gem, coin, chips beside numbers) */
.sc .big, .sc .mid, .gg-box .mid, .gg-row .mid, .by-row .gain { align-items: center; display: inline-flex; }
.sc .big .gem, .sc .mid .gem, .gg-row .mid .gem, .by-row .gain .gem { vertical-align: 0; margin-top: -.06em; }
.fo-tag, .sw-verdict, .pk-grades, .sc-next { align-items: center; }
@media (max-width: 900px) {
  .sc-fo .sc-g { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gg-sets tbody th { grid-column: 1 / -1; }
  .gg-sets tr { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
}
/* s1-cards: full cards carry a facts bar straddling the bottom tip – keep ≈ 6 % of the card height free below it.
   Holo cards use EA's own foil: no extra sweep (one light source per card – lit() leaves .lit-foil out). */
.lit { margin-bottom: 16px; }
.sc-g .lit, .sc-g .fut { margin-bottom: 0; }
/* s1-cards §16a: chips with an icon or a number beside text are trimmed to cap height, so flex centring lands on the capitals */
.fo-tag .tag, .gg-tags .tag, .sw-verdict .chip, .gg-jump .chip, .by-row .got, .h-xi .slot-tag b { text-box: trim-both cap alphabetic; }
/* s6 round 7: a set whose Rewards screen isn't verified says so instead of showing thresholds */
.gg-sets td.cig { color: var(--text-3); font-size: 14px; text-align: right; }
@media (max-width: 900px) { .gg-sets td.cig { grid-column: 1 / -1; text-align: left; } }
/* touch widths: tap targets ≥ 40 px */
@media (max-width: 1023px) {
  .gg-tab { min-height: 40px; display: inline-flex; align-items: center; }
  .st-next .chip, .gg-jump .chip { min-height: 40px; }
}
/* 13 ch.03 (s6 round 7): the swaps the app's best selection really makes over the in-game lineup, with the model's total */
.sc-swaps { gap: 28px; }
.sw-pairs { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sw-pair { display: flex; align-items: center; gap: 8px; }
.sw-pair > svg, .sw-tot > svg { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.sw-unread { --cut: var(--cut-s); width: 84px; aspect-ratio: 576 / 800; display: grid; place-content: center; justify-items: center; gap: 4px; color: var(--text-3);
  border: 1px dashed var(--line-strong); }
.sw-unread b { font-size: 22px; color: var(--text-2); }
.sw-unread small { font-size: 12px; font-weight: 600; }
.sw-tot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line); }
.sw-tot .chip { text-box: trim-both cap alphabetic; }
.by-row .by-if { grid-column: 2 / -1; justify-self: start; font-size: 12px; }
@media (max-width: 900px) {
  .sw-pairs { flex-direction: column; align-items: flex-start; }
  .sw-pair .fut, .sw-unread { --w: 76px !important; width: 76px; }
}
.sw-pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; }
.sw-pair .fut, .sw-unread { --w: 70px !important; width: 70px; }
@media (max-width: 1180px) and (min-width: 901px) { .sw-pairs { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
@media (max-width: 900px) { .sw-pairs { grid-template-columns: minmax(0, 1fr); justify-items: start; } .sw-pair .fut, .sw-unread { --w: 76px !important; width: 76px; } }
/* T17 – card light: pop up, then stay in the same place with a small pulse (user round 8, glow-recording.mp4) – no
   sweep across the card, no rays growing upwards. Transform/opacity only. */
.lit-foil { background: radial-gradient(ellipse 72% 42% at 50% 30%, rgba(255, 255, 255, .55), transparent 72%) no-repeat; background-size: auto; background-position: 0 0; }
.play .lit-foil { animation: lit-pop 320ms 700ms cubic-bezier(.2, .8, .2, 1) both, lit-pulse 2600ms 1020ms ease-in-out infinite alternate; }
.play .lit.wl::before { animation: wl-pop 360ms 200ms cubic-bezier(.2, .8, .2, 1) both, wl-pulse 2600ms 560ms ease-in-out infinite alternate; }
@keyframes lit-pop { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: .8; } }
@keyframes lit-pulse { from { opacity: .8; } to { opacity: .5; } }
@keyframes wl-pop { 0% { opacity: 0; transform: translateX(-50%) scale(.92); } 60% { opacity: .85; transform: translateX(-50%) scale(1.02); } 100% { opacity: .55; transform: translateX(-50%); } }
@keyframes wl-pulse { from { opacity: .55; } to { opacity: .4; } }
:root[data-theme="light"] .play .lit.wl::before { animation-name: wl-pop-l, wl-pulse-l; }
@keyframes wl-pop-l { 0% { opacity: 0; transform: translateX(-50%) scale(.92); } 60% { opacity: .85; transform: translateX(-50%) scale(1.02); } 100% { opacity: .6; transform: translateX(-50%); } }
@keyframes wl-pulse-l { from { opacity: .6; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .play .lit-foil, .play .lit.wl::before { animation: none; } .play .lit-foil { opacity: .8; } }
/* T17 – 02 first owner: each card turns in quickly (380 ms, 3 frames apart, transform/opacity only – kit/13 JS);
   the old grey-out + filter transition per card is retired */
.sc-fo.prime .fo-w:not(.on) { opacity: 0; filter: none; }
.fo-w { transition: none; }

/* every size (rule 10, review WEB-1/2): a scene lays itself out by its OWN width, not the window's – the lane
   squeezes it to 480–600 px at 1000–1200 windows. Under 660 px the two sides stack (set page / card on top, the
   numbers under it); the hero number scales with the column it sits in, so it never meets the frame. */
.st-vis { container: scene / inline-size; }
.sc-detail, .pk-right { container-type: inline-size; }
.sc-detail .big, .pk-right .big { font-size: clamp(40px, 21cqi, 72px); }
@container scene (max-width: 660px) {
  .sc { padding: 24px 22px; }
  .sc-read, .sc-pack { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sc-page .sc-g { grid-template-columns: repeat(3, minmax(0, 92px)); }
  .sc-pack .wo { justify-self: center; }
}
/* WEB-7: the twin "see it play out" cards start at the same line (eyebrow on eyebrow), the arrow stays centred */
.h-go { align-items: stretch; }
.h-go > .col { justify-content: flex-start; }
.h-go > svg { align-self: center; }
/* the home weekend score (12–3) never outgrows its scene on a phone */
.h-wl .num-xl { font-size: min(var(--fs-120), 30cqi); }

/* user 2026-11-05 ("the cards don't fill the card at some sizes"): a scene's card grid follows its own width – six in
   one row when the set page has the room (stacked layouts), three when it hasn't – never 3 × 92 px in a wide panel */
.sc-page { container: scpage / inline-size; min-width: 0; }
@container scpage (width >= 640px) {
  .sc-page .sc-g { grid-template-columns: repeat(6, minmax(0, 1fr)); justify-content: stretch; }
}
@container scpage (width < 640px) {
  .sc-page .sc-g { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-content: stretch; }
}
.sc-page .sc-g { justify-items: center; }
.sc-page .sc-g .fut { max-width: 136px; }
/* side by side the set page has a fixed column (a size container can't be sized by its content) */
@container scene (min-width: 661px) { .sc-read { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); } }

/* the guide's set list (user 2026-11-05: rows of "Check in game" can't stand on a guide): the table holds the sets
   with checked thresholds; the others are one compact line of names with their card count */
.gg-unchecked { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 12px 0 0; font-size: 14px; color: var(--text-2); }
.gg-unchecked .lab { flex-basis: 100%; }
.gg-u { white-space: nowrap; color: var(--text); }
.gg-u small { color: var(--text-3); margin-left: 2px; }

/* the guide's set list: each category folds out (the first open) – no endless scroll (user 2026-11-05) */
details.gg-cat > summary { list-style: none; cursor: pointer; }
details.gg-cat > summary::-webkit-details-marker { display: none; }
details.gg-cat > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-left: 12px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); transition: transform var(--t-fast) var(--ease-out); }
details.gg-cat[open] > summary::after { transform: rotate(45deg); }
details.gg-cat > summary:hover .st-h3 { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
details.gg-cat > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
details.gg-cat:not([open]) { padding-bottom: 0; }
details.gg-cat > summary > span { margin-left: auto; }