:root {
--font-display: "Unbounded", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-label: var(--font);
--font-hero: var(--font);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
--radius:     1.125rem;
--radius-sm:  0.75rem;
--radius-xs:  0.5rem;
--btn-radius: 0.75rem;
--bg:             #f3efe7;
--ground-1:       rgba(255, 190, 30, 0.30);
--ground-2:       rgba(255, 145, 60, 0.13);
--ground-3:       rgba(255, 255, 255, 0.75);
--ground-fall:    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 42%, rgba(150, 105, 30, 0.07) 100%);
--grid-line:      rgba(60, 45, 15, 0.05);
--grid-mask:      radial-gradient(ellipse 75% 62% at 50% 22%, #000 10%, transparent 72%);
--vignette:       rgba(150, 110, 45, 0.2);
--grain:          0.05;
--glass:          rgba(255, 255, 255, 0.72);
--glass-strong:   rgba(255, 255, 255, 0.9);
--glass-card:     rgba(255, 255, 255, 0.9);
--glass-blur:     saturate(170%) blur(18px);
--hairline:       rgba(60, 45, 15, 0.09);
--hairline-strong: rgba(60, 45, 15, 0.16);
--sheen:          inset 0 1px 0 rgba(255, 255, 255, 0.95);
--pill-on:        rgba(27, 26, 23, 0.06);
--shadow-sm:  0 1px 2px rgba(70, 50, 10, 0.06), 0 14px 32px -16px rgba(70, 50, 10, 0.32);
--shadow:     0 2px 6px rgba(70, 50, 10, 0.08), 0 28px 52px -22px rgba(70, 50, 10, 0.42);
--shadow-lg:  0 4px 14px rgba(70, 50, 10, 0.1), 0 46px 84px -30px rgba(70, 50, 10, 0.5);
--gold-type:  linear-gradient(176deg, #d9a400 0%, #b98400 55%, #8a5f00 100%);
--topbar-bg: #fbfaf6;
}
:root[data-theme="dark"] {
--bg:            #08080a;
--surface:       #131316;
--surface-2:     #18181c;
--surface-3:     #212126;
--surface-sunk:  #0d0d10;
--border:        #25252b;
--border-strong: #33333b;
--ground-1:       rgba(250, 190, 20, 0.11);
--ground-2:       rgba(140, 90, 255, 0.07);
--ground-3:       transparent;
--ground-fall:    none;
--grid-mask:      radial-gradient(ellipse 75% 62% at 50% 22%, #000 10%, transparent 72%);
--grid-line:      rgba(255, 255, 255, 0.035);
--vignette:       rgba(0, 0, 0, 0.6);
--grain:          0.06;
--glass:          rgba(19, 19, 23, 0.62);
--glass-strong:   rgba(17, 17, 21, 0.84);
--glass-card:     rgba(18, 18, 22, 0.80);
--hairline:       rgba(255, 255, 255, 0.075);
--hairline-strong: rgba(255, 255, 255, 0.14);
--sheen:          inset 0 1px 0 rgba(255, 255, 255, 0.055);
--pill-on:        rgba(255, 255, 255, 0.08);
--shadow-sm:  0 1px 1px rgba(0, 0, 0, 0.5), 0 14px 34px -18px rgba(0, 0, 0, 0.9);
--shadow:     0 2px 4px rgba(0, 0, 0, 0.5), 0 26px 50px -22px rgba(0, 0, 0, 0.95);
--shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.55), 0 50px 90px -30px rgba(0, 0, 0, 1);
--gold-type:  linear-gradient(176deg, #fff3b0 0%, #ffd43a 42%, #f5a300 100%);
--topbar-bg: #0b0b0d;
}
body { background: var(--bg); }
.stage {
position: fixed; left: 0; right: 0; top: 0; z-index: 0;
height: 100vh; height: 100lvh;
pointer-events: none; overflow: hidden;
}
.stage > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage-ground {
background:
radial-gradient(70rem 42rem at 80% -14%, var(--ground-1), transparent 62%),
radial-gradient(56rem 40rem at -12% 38%, var(--ground-2), transparent 64%),
radial-gradient(48rem 30rem at 40% 18%, var(--ground-3), transparent 70%),
var(--ground-fall);
}
.stage-grid {
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 4.5rem 4.5rem;
background-position: 50% 0;
-webkit-mask-image: var(--grid-mask);
mask-image: var(--grid-mask);
}
.stage-gl { opacity: 0; }
.stage-gl.is-ready { opacity: 1; }
.stage-hero {
position: absolute; left: 0; top: 0; z-index: 0;
width: 100%; height: 100vh; height: 100lvh;
display: block; pointer-events: none;
opacity: 0;
}
.stage-hero.is-ready { opacity: 1; }
.stage-vignette {
background: radial-gradient(ellipse 120% 95% at 50% 35%, transparent 55%, var(--vignette) 100%);
}
.stage-grain {
opacity: var(--grain);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.has-stage .page-deco { display: none; }
.stage-expected .page-deco { visibility: hidden; }
::selection { background: rgba(250, 204, 21, 0.38); color: var(--ink); }
:root:not([data-theme="dark"]) .topbar { background: rgba(255, 255, 255, 0.68); }
:root:not([data-theme="dark"]) .topbar.is-scrolled {
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 16px 34px -26px rgba(70, 50, 10, 0.45);
}
:root:not([data-theme="dark"]) .subbar { background: rgba(255, 255, 255, 0.6); }
@media (prefers-reduced-transparency: reduce) {
:root:not([data-theme="dark"]) .topbar,
:root:not([data-theme="dark"]) .topbar.is-scrolled,
:root:not([data-theme="dark"]) .subbar { background: var(--topbar-bg); }
}
@media (max-width: 720px) {
:root:not([data-theme="dark"]) .stage-ground {
background:
radial-gradient(125vw 90vw at 105% -10%, rgba(255, 186, 25, 0.34), transparent 64%),
radial-gradient(95vw 75vw at 50% 22%, rgba(255, 255, 255, 0.9), transparent 70%),
radial-gradient(120vw 110vw at -30% 70%, rgba(255, 145, 60, 0.13), transparent 62%),
linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 38%, rgba(150, 105, 30, 0.07) 100%);
}
:root:not([data-theme="dark"]) { --vignette: rgba(150, 110, 45, 0.1); }
}
:root:not([data-theme="dark"]):not(.scroll-hold-dark),
:root.scroll-hold-light {
--scroll-track:  #ece7dd;
--scroll-edge:   rgba(60, 45, 15, 0.08);
--scroll-thumb:  rgba(45, 35, 15, 0.26);
--scroll-hover:  rgba(45, 35, 15, 0.42);
--scroll-active: rgba(45, 35, 15, 0.55);
--scroll-light:  rgba(255, 255, 255, 0.45);
--scroll-up: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M2.5 6.25 5 3.75l2.5 2.5%27 fill=%27none%27 stroke=%27%237a6f5f%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
--scroll-down: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M2.5 3.75 5 6.25l2.5-2.5%27 fill=%27none%27 stroke=%27%237a6f5f%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
--scroll-left: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M6.25 2.5 3.75 5l2.5 2.5%27 fill=%27none%27 stroke=%27%237a6f5f%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
--scroll-right: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M3.75 2.5 6.25 5l-2.5 2.5%27 fill=%27none%27 stroke=%27%237a6f5f%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
}
:root[data-theme="dark"]:not(.scroll-hold-light),
:root.scroll-hold-dark {
--scroll-track:  #0d0d10;
--scroll-edge:   rgba(255, 255, 255, 0.06);
--scroll-thumb:  rgba(255, 255, 255, 0.16);
--scroll-hover:  rgba(255, 255, 255, 0.28);
--scroll-active: rgba(255, 255, 255, 0.38);
--scroll-light:  rgba(255, 255, 255, 0.08);
--scroll-up: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M2.5 6.25 5 3.75l2.5 2.5%27 fill=%27none%27 stroke=%27%239a9aa4%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
--scroll-down: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M2.5 3.75 5 6.25l2.5-2.5%27 fill=%27none%27 stroke=%27%239a9aa4%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
--scroll-left: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M6.25 2.5 3.75 5l2.5 2.5%27 fill=%27none%27 stroke=%27%239a9aa4%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
--scroll-right: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27%3E%3Cpath d=%27M3.75 2.5 6.25 5l-2.5 2.5%27 fill=%27none%27 stroke=%27%239a9aa4%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
}
@supports selector(::-webkit-scrollbar) {
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
background: var(--scroll-track);
box-shadow: inset 1px 0 0 var(--scroll-edge);
}
::-webkit-scrollbar-track:horizontal { box-shadow: inset 0 1px 0 var(--scroll-edge); }
::-webkit-scrollbar-thumb {
background: var(--scroll-thumb) padding-box;
border: 4px solid transparent;
border-radius: 99px;
box-shadow: inset 1px 1px 0 var(--scroll-light);
min-height: 40px; min-width: 40px;
}
::-webkit-scrollbar-thumb:hover  { border-width: 3px; background-color: var(--scroll-hover); }
::-webkit-scrollbar-thumb:active { border-width: 3px; background-color: var(--scroll-active); }
::-webkit-scrollbar-button {
display: block; width: 16px; height: 16px;
background-color: var(--scroll-track);
background-repeat: no-repeat; background-position: center; background-size: 10px;
box-shadow: inset 1px 0 0 var(--scroll-edge);
}
::-webkit-scrollbar-button:horizontal { box-shadow: inset 0 1px 0 var(--scroll-edge); }
::-webkit-scrollbar-button:hover  { background-color: color-mix(in srgb, var(--scroll-track), #808080 8%); }
::-webkit-scrollbar-button:active { background-color: color-mix(in srgb, var(--scroll-track), #808080 16%); }
::-webkit-scrollbar-button:vertical:decrement   { background-image: var(--scroll-up); }
::-webkit-scrollbar-button:vertical:increment   { background-image: var(--scroll-down); }
::-webkit-scrollbar-button:horizontal:decrement { background-image: var(--scroll-left); }
::-webkit-scrollbar-button:horizontal:increment { background-image: var(--scroll-right); }
::-webkit-scrollbar-button:start:increment,
::-webkit-scrollbar-button:end:decrement { display: none; }
::-webkit-scrollbar-corner { background: var(--scroll-track); }
}
@supports not selector(::-webkit-scrollbar) {
:root { scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
}
h1 {
font-family: var(--font-display); font-stretch: normal;
font-weight: 600; letter-spacing: -0.035em;
}
.level-titles h1 { font-family: var(--font); font-weight: 760; letter-spacing: -0.03em; }
.card-pct, .card-pct small,
.level-pct, .level-rank, .level-title-rank,
.tier-count, .stat-value, .stat-joy .stat-value small, .stat-split b,
.progress-value, .big-404, .side-stats span, .card-rank {
font-family: var(--font-display); font-stretch: normal;
}
.card-pct { font-weight: 600; letter-spacing: -0.04em; }
.stat-value, .tier-count, .level-pct { font-weight: 600; letter-spacing: -0.04em; }
.card-pct small, .level-pct small {
font-size: 0.55em; font-weight: 600; letter-spacing: 0;
margin-left: 0.14em;
}
.card-pct small  { vertical-align: 0.32em; line-height: 0; }
.level-pct small { translate: 0 -0.32em; }
.stat-link { font-family: var(--font); }
.side-panel h2, .panel > h2, .stat-label, .stats-latest-label, .eyebrow,
.foot-nav h2 {
font-family: var(--font-label); font-stretch: normal; font-weight: 700;
letter-spacing: 0.1em;
}
figure.panel figcaption h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.topbar {
background: color-mix(in srgb, var(--topbar-bg) 64%, transparent);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border-bottom-color: var(--hairline);
transition: background-color .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.topbar.is-scrolled {
background: color-mix(in srgb, var(--topbar-bg) 80%, transparent);
box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-transparency: reduce) {
.topbar, .topbar.is-scrolled { background: var(--topbar-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports (animation-timeline: scroll()) {
.topbar::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: linear-gradient(90deg, rgba(250, 204, 21, 0), #facc15 18%, #fff1a6 50%, #f59e0b 82%, rgba(245, 158, 11, 0));
transform-origin: 0 50%; transform: scaleX(0);
animation: stage-read linear both;
animation-timeline: scroll(root block);
pointer-events: none;
}
@keyframes stage-read { to { transform: scaleX(1); } }
}
.brand-logo { transition: transform .5s var(--ease-spring); }
.brand-wordmark { transition: filter .5s var(--ease-out); }
.brand:hover .brand-logo { transform: translateY(-1px) scale(1.015); }
.brand:hover .brand-wordmark {
filter: var(--shadow-logo) drop-shadow(0 6px 18px rgba(250, 190, 20, 0.35));
}
.brand-glint {
position: absolute; inset: 0; overflow: hidden;
-webkit-mask: var(--logo) left center / contain no-repeat;
mask: var(--logo) left center / contain no-repeat;
pointer-events: none;
}
.brand-glint::before {
content: ""; position: absolute; top: -10%; bottom: -10%; left: 0;
width: 12%;
background: linear-gradient(105deg,
transparent 18%, rgba(255, 255, 255, 0.4) 38%,
#fff 48%, #fff 52%,
rgba(255, 255, 255, 0.4) 62%, transparent 82%);
opacity: .9;
transform: translateX(-110%);
will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
.brand-glint::before { animation: brand-glint 10s 1.2s cubic-bezier(.4, 0, .2, 1) infinite; }
}
@keyframes brand-glint {
0%           { transform: translateX(-110%); }
11.25%, 100% { transform: translateX(850%); }
}
@media (min-width: 861px) and (min-height: 561px), (min-width: 861px) and (pointer: fine) {
.topnav {
--nav-inset: 0.25rem;
padding: var(--nav-inset); gap: var(--nav-inset);
background: var(--glass); border: 1px solid var(--hairline);
border-radius: 62.5rem;
box-shadow: var(--sheen), var(--shadow-sm);
}
.topnav > a, .navmenu > summary {
margin: 0; padding: calc(0.4375rem + var(--lift)) 0.875rem calc(0.4375rem - var(--lift)); border-radius: 62.5rem;
border-bottom: 0;
transition: color .25s var(--ease-out), background-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.navmenu { margin: 0; }
.topnav > a:hover, .navmenu > summary:hover {
background: var(--pill-on); text-decoration: none;
}
.topnav > a.is-active, .navmenu.is-active > summary {
background: var(--glass-strong);
box-shadow: var(--sheen), 0 0 0 1px var(--hairline-strong), 0 6px 16px -10px rgba(0, 0, 0, 0.5);
}
.navmenu-panel {
top: calc(100% + 0.75rem); left: 0; padding: 0.4375rem;
background: var(--glass-strong);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--hairline-strong); border-radius: 1rem;
box-shadow: var(--sheen), var(--shadow-lg);
transform-origin: 20% 0;
animation: stage-drop .32s var(--ease-out);
}
}
@keyframes stage-drop {
from { opacity: 0; transform: translateY(-0.375rem) scale(.97); }
}
.navmenu-item {
border-left: 0; border-radius: 0.625rem;
transition: color .2s, background-color .2s;
}
.navmenu-item:hover { background: var(--pill-on); }
.navmenu-item.is-current {
background: color-mix(in srgb, var(--gold) 14%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent);
}
.navmenu-count { border-radius: 62.5rem; }
@media (max-width: 860px) and (orientation: portrait),
(max-width: 860px) and (orientation: landscape) and (pointer: fine),
(max-height: 560px) and (orientation: landscape) and (pointer: coarse) {
:root[data-js] .topnav {
top: calc(100% + 0.5rem);
left: max(0.5rem, env(safe-area-inset-left, 0px));
right: max(0.5rem, env(safe-area-inset-right, 0px));
gap: 0.1875rem; padding: 0.5rem;
background: var(--topbar-bg);
border: 1px solid var(--hairline-strong); border-radius: 1.25rem;
box-shadow: var(--sheen), var(--shadow-lg);
transform-origin: calc(100% - 1.375rem) 0;
animation: stage-drop .32s var(--ease-out);
}
:root[data-js] .topnav > a,
:root[data-js] .navmenu > summary {
gap: 0.625rem;
padding: calc(0.6875rem + var(--lift)) 0.75rem calc(0.6875rem - var(--lift));
border-radius: 0.875rem;
font-weight: 600; color: var(--ink-2);
transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s;
}
:root[data-js] .topnav > a:hover,
:root[data-js] .navmenu > summary:hover { background: var(--pill-on); color: var(--ink); text-decoration: none; }
:root[data-js] .topnav > a.is-active,
:root[data-js] .navmenu.is-active > summary {
background: var(--glass-strong); color: var(--ink); font-weight: 700;
border-color: transparent;
box-shadow: var(--sheen), 0 0 0 1px var(--hairline-strong), 0 6px 16px -10px rgba(0, 0, 0, 0.5);
}
:root[data-js] .navmenu-panel { gap: 0.125rem; }
:root[data-js] .topnav-tools { border-top-color: var(--hairline-strong); }
:root[data-js] .topnav-row { border-radius: 62.5rem; }
}
.subbar {
background: color-mix(in srgb, var(--topbar-bg) 60%, transparent);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border-color: var(--hairline);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
@media (max-width: 640px), (max-height: 560px) and (orientation: landscape) and (pointer: coarse) {
.subbar { border-radius: 0; }
}
.levelbar .levelbar-back { border-radius: 62.5rem; }
.levelbar .levelbar-back { --lift: 0.03em; }
.levelbar-pager {
--pager-inset: 0.25rem;
padding: var(--pager-inset);
background: var(--glass); border: 1px solid var(--hairline);
border-radius: 62.5rem;
box-shadow: var(--sheen), var(--shadow-sm);
}
.levelbar-step { border-radius: 62.5rem; transition: background-color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
a.levelbar-step:hover {
background: var(--glass-strong);
box-shadow: var(--sheen), 0 0 0 1px var(--hairline-strong), 0 8px 18px -12px rgba(0, 0, 0, 0.55);
}
.levelbar-heading {
background: var(--glass); border-color: var(--hairline);
border-radius: 1rem;
box-shadow: var(--sheen), var(--shadow-sm);
}
.levelbar-heading-thumb { border-radius: 0.75rem; }
.levelbar-heading-thumb:not(.is-new) {
box-shadow: 0 0 0 1px var(--hairline-strong), 0 8px 16px -10px rgba(0, 0, 0, 0.6);
}
.levelbar-thumb,
.level-nav-thumb {
border-radius: 0.5rem;
box-shadow: 0 0 0 1px var(--hairline-strong), 0 8px 16px -10px rgba(0, 0, 0, 0.6);
}
.levelbar-place { border-color: var(--hairline-strong); margin-inline: var(--pager-inset); }
.levelbar-place-text b { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; }
.levelbar-rail { background: var(--pill-on); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); }
.levelbar-rail i { background: linear-gradient(90deg, #fdf478, #fdd405 30%, #fca903 75%, #f98c02); }
.levelbar-tools { border-left-color: var(--hairline-strong); }
.levelbar .levelbar-edit { border-radius: 62.5rem; }
@media (max-width: 640px) {
.levelbar-pager { --pager-inset: 0.1875rem; }
.levelbar-place { margin-inline: 0.375rem; }
}
@media (max-width: 340px) {
.levelbar-place { margin-inline: var(--pager-inset); }
}
.btn, .tier-chip, .tier-clear, .icon-btn, .theme-toggle, .nav-burger,
.auth-btn, .level-nav a {
transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
background-color .25s, border-color .25s, color .25s;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.975); transition-duration: .08s; }
:root { --lift: 0.06em; }
.btn            { padding-top: calc(0.65625rem + var(--lift)); padding-bottom: calc(0.65625rem - var(--lift)); }
.btn-sm         { padding-top: calc(0.40625rem + var(--lift)); padding-bottom: calc(0.40625rem - var(--lift)); }
.btn-lg         { padding-top: calc(0.84375rem + var(--lift)); padding-bottom: calc(0.84375rem - var(--lift)); }
.btn-quiet      { padding-top: calc(0.625rem + var(--lift));   padding-bottom: calc(0.625rem - var(--lift)); }
.foot-signout .btn { padding-top: calc(0.25rem + var(--lift)); padding-bottom: calc(0.25rem - var(--lift)); }
.tier-chip,
.tier-clear     { padding-top: calc(0.34375rem + var(--lift)); padding-bottom: calc(0.34375rem - var(--lift)); }
.tier-chip em   { --lift: 0.04em; padding-top: calc(1.5px + var(--lift)); padding-bottom: calc(1.5px - var(--lift));
position: relative; top: -0.046875rem; }
.badge          { padding-top: calc(3.5px + var(--lift));      padding-bottom: calc(3.5px - var(--lift)); }
.badge-copy     { padding-top: calc(4px + var(--lift));        padding-bottom: calc(4px - var(--lift)); }
.badge-copy     { --lift: 0em; }
.account-toggle { padding-top: calc(0.40625rem + var(--lift)); padding-bottom: calc(0.40625rem - var(--lift)); }
.account-add > summary { padding-top: calc(0.46875rem + var(--lift)); padding-bottom: calc(0.46875rem - var(--lift)); }
.btn-lg         { --lift: 0.03em; }
.auth-btn       { padding-top: 0; padding-bottom: 0; }
.navmenu-item   { padding-top: calc(0.5625rem + var(--lift)); padding-bottom: calc(0.5625rem - var(--lift)); }
.navmenu-count  { padding-top: calc(1px + var(--lift));       padding-bottom: calc(1px - var(--lift)); }
.segment-body   { padding-top: calc(0.5rem + var(--lift));    padding-bottom: calc(0.5rem - var(--lift)); }
.tier-body      { padding-top: calc(0.625rem + var(--lift));  padding-bottom: calc(0.625rem - var(--lift)); }
:root {
--logo-bands: linear-gradient(180deg,
#fdf478 0 13%,
#fdd405 13% 50%,
#fdb604 50% 68%,
#fca903 68% 84%,
#f98c02 84% 100%);
--logo-ink:   #140b00;
--logo-block: #8b3c01;
}
.btn-primary,
.auth-btn-in {
background: var(--logo-bands);
border: 2px solid var(--logo-ink);
border-radius: 0.25rem;
color: var(--logo-ink);
font-weight: 800;
text-shadow: 0 1px 0 rgba(255, 246, 180, 0.65);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45),
4px 4px 0 0 var(--logo-block),
4px 4px 0 2px var(--logo-ink);
}
.btn-primary:hover,
.auth-btn-in:hover {
transform: translate(-2px, -2px);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45),
6px 6px 0 0 var(--logo-block),
6px 6px 0 2px var(--logo-ink);
}
.btn-primary:active,
.auth-btn-in:active {
transform: translate(4px, 4px);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3),
0 0 0 0 var(--logo-block),
0 0 0 0 var(--logo-ink);
transition-duration: .06s;
}
.btn-primary.btn-block { width: calc(100% - 6px); }
.side-admin .btn-primary { margin-bottom: 6px; }
:root { --chip-on-face: #ffffff; }
:root[data-theme="dark"] { --chip-on-face: #2a2a31; }
.tier-chip.is-on,
.tier-chip.is-on:hover {
background: var(--chip-on-face);
border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
color: var(--ink); font-weight: 750;
text-shadow: none;
box-shadow: var(--sheen), 0 2px 4px rgba(0, 0, 0, 0.08), 0 10px 22px -12px rgba(0, 0, 0, 0.5);
}
.tier-chip.is-on em {
background: var(--logo-bands);
color: var(--logo-ink); font-weight: 800;
text-shadow: none;
box-shadow: none;
}
.tier-chip.is-on:hover  { border-color: var(--gold); transform: scale(var(--zoom)); }
.tier-chip.is-on:active { transform: scale(.96); }
.tier-chip { transition: transform .22s var(--ease-out), border-color .15s, box-shadow .15s, color .15s, opacity .2s; }
.tier-chip .gd-icon { transition: filter .2s; }
.tier-filter:has(.tier-chip.is-on) .tier-chip:not(.is-on):not(:hover) { opacity: .55; }
.tier-filter:has(.tier-chip.is-on) .tier-chip:not(.is-on):not(:hover) .gd-icon {
filter: grayscale(1) var(--shadow-sprite);
}
:root[data-input="key"] .btn-primary:focus-visible { outline-offset: 6px; }
.btn-ghost,
.auth-btn-out,
.theme-toggle,
.nav-burger,
.icon-btn,
.level-nav a,
.tier-chip,
.tier-clear,
.scroll-btn {
--zoom: 1.04;
background: var(--glass-strong);
border: 1px solid var(--hairline-strong);
box-shadow: var(--sheen), 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 20px -14px rgba(0, 0, 0, 0.5);
transition: transform .22s var(--ease-out), border-color .15s, box-shadow .15s, color .15s;
}
.icon-btn,
.theme-toggle,
.nav-burger,
.scroll-btn { --zoom: 1.08; }
.btn-ghost:hover,
.auth-btn-out:hover,
.theme-toggle:hover,
.nav-burger:hover,
.icon-btn:hover,
.level-nav a:hover,
.tier-chip:hover,
.tier-clear:hover,
.scroll-btn:hover {
background: var(--glass-strong); color: var(--ink);
border-color: var(--gold);
box-shadow: var(--sheen), 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 20px -14px rgba(0, 0, 0, 0.5);
transform: scale(var(--zoom));
}
.btn-ghost:active,
.auth-btn-out:active,
.theme-toggle:active,
.nav-burger:active,
.icon-btn:active,
.level-nav a:active,
.tier-chip:active,
.tier-clear:active,
.scroll-btn:active {
transform: scale(.96);
transition-duration: .08s;
}
.icon-btn:not(.icon-danger):hover { background: var(--gold-50); color: var(--gold); }
:root { --edit: #2563eb; --edit-tint: #eaf1ff; }
:root[data-theme="dark"] { --edit: #6aa8ff; --edit-tint: rgba(106, 168, 255, 0.12); }
.icon-btn.icon-edit:hover {
background: var(--edit-tint); color: var(--edit);
border-color: var(--edit);
}
.theme-toggle { width: 3rem; height: 3rem; padding: 0; }
.theme-toggle .icon { width: 1.5rem; height: 1.5rem; }
.nav-burger { width: 2.75rem; height: 2.75rem; margin-block: -0.25rem; }
.nav-burger .icon { width: 1.375rem; height: 1.375rem; }
@media (max-height: 560px) and (orientation: landscape) and (pointer: coarse) {
.theme-toggle { width: 1.875rem; height: 1.875rem; }
.theme-toggle .icon { width: 1.0625rem; height: 1.0625rem; }
.nav-burger { width: 2.5rem; height: 2.5rem; margin-block: -0.125rem; }
.nav-burger .icon { width: 1.25rem; height: 1.25rem; }
}
.icon-danger:hover,
.auth-btn-out:hover,
.btn.topnav-signout:hover,
.foot-signout .btn:hover {
background: var(--tint-danger); color: var(--danger);
border-color: var(--danger);
box-shadow: var(--sheen), 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 20px -14px rgba(0, 0, 0, 0.5);
}
.tier-clear .icon { color: currentColor; }
.tier-clear:hover,
.tier-clear:active {
background: var(--tint-danger); color: var(--danger);
border-color: var(--danger);
}
.scroll-btn {
padding: 0;
transition: opacity .18s, visibility 0s .18s,
transform .22s var(--ease-out), border-color .15s, box-shadow .15s, color .15s;
}
.theme-toggle, .nav-burger { border-radius: 62.5rem; }
.btn-danger,
.btn-danger:hover,
.btn-danger:active {
background: linear-gradient(180deg, #d9493a, var(--btn-danger)) var(--btn-danger);
}
.btn-danger {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -2px 0 rgba(0, 0, 0, 0.2),
0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 20px -14px rgba(0, 0, 0, 0.5);
transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
filter .2s, border-color .25s, color .25s;
}
.btn-danger:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.2),
0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 20px -14px rgba(0, 0, 0, 0.5);
filter: brightness(1.08);
transform: scale(1.04);
}
.btn-danger:active {
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3);
filter: brightness(.94);
transform: scale(.96);
}
.tier-chip em { background: var(--pill-on); }
.card, .side-panel, .panel, .level, .stat, .stats-head, .tier-filter,
.empty-state, .modal, .toast, .form-busy-card, .cal, .combo-menu {
border-color: var(--hairline);
box-shadow: var(--sheen), var(--shadow-sm);
}
.card, .level, .stat, .panel, .empty-state {
background-color: var(--glass-card);
}
.side-panel, .tier-filter, .stats-head, .modal, .toast, .form-busy-card {
background-color: var(--glass);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
}
.modal, .toast, .form-busy-card, .cal, .combo-menu { box-shadow: var(--sheen), var(--shadow-lg); }
.cal, .combo-menu { background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@media (prefers-reduced-transparency: reduce) {
.card, .side-panel, .panel, .level, .stat, .stats-head, .tier-filter,
.empty-state, .modal, .toast, .form-busy-card, .cal, .combo-menu {
background-color: var(--surface);
-webkit-backdrop-filter: none; backdrop-filter: none;
}
}
.searchbox,
input[type="text"], input[type="url"], input[type="number"], input[type="password"],
input[type="date"], textarea, select, .date-trigger {
background-color: color-mix(in srgb, var(--field-well) 72%, transparent);
border-color: var(--hairline-strong);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
transition: border-color .25s, box-shadow .3s var(--ease-out), background-color .25s;
}
.searchbox input[type="search"] { background: none; box-shadow: none; }
.searchbox:focus-within,
input[type="text"]:focus, input[type="url"]:focus, input[type="number"]:focus,
input[type="password"]:focus, textarea:focus, select:focus {
background-color: var(--glass-strong);
border-color: color-mix(in srgb, var(--gold) 75%, transparent);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 4px color-mix(in srgb, var(--gold) 16%, transparent),
0 10px 30px -16px rgba(234, 179, 8, 0.55);
}
.card-rank .card-rank-input,
.card-rank .card-rank-input:focus { background-color: transparent; border: 0; }
.card-rank .card-rank-input:focus { box-shadow: inset 0 0 0 2px var(--gold-deep); }
.list-hero {
position: relative;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
align-items: center; gap: 2rem;
min-height: clamp(24rem, 56svh, 34rem);
padding: 2rem 0 3rem;
}
.list-hero-copy { min-width: 0; position: relative; z-index: 1; }
.list-hero-title {
margin: 0 0 1.375rem;
font: 800 clamp(2.75rem, 5.4vw, 5rem)/0.98 var(--font-hero);
font-stretch: normal;
letter-spacing: -0.035em; color: var(--ink);
text-wrap: balance;
}
.list-hero-title em {
position: relative;
display: inline-block;
font-style: normal;
color: var(--logo-ink);
letter-spacing: -0.008em;
margin-right: 0.12em;
text-shadow:
0.032em 0em 0 var(--logo-ink),
0.028em 0.016em 0 var(--logo-ink),
0.016em 0.028em 0 var(--logo-ink),
0em 0.032em 0 var(--logo-ink),
-0.016em 0.028em 0 var(--logo-ink),
-0.028em 0.016em 0 var(--logo-ink),
-0.032em 0em 0 var(--logo-ink),
-0.028em -0.016em 0 var(--logo-ink),
-0.016em -0.028em 0 var(--logo-ink),
0em -0.032em 0 var(--logo-ink),
0.016em -0.028em 0 var(--logo-ink),
0.028em -0.016em 0 var(--logo-ink),
0.01em 0.01em 0 var(--logo-block),
0.02em 0.02em 0 var(--logo-block),
0.03em 0.03em 0 var(--logo-block),
0.04em 0.04em 0 var(--logo-block),
0.05em 0.05em 0 var(--logo-block),
0.06em 0.06em 0 var(--logo-block),
0.07em 0.07em 0 var(--logo-block),
0.08em 0.08em 0 var(--logo-block),
0.052em 0.02em 0 var(--logo-ink),
0.043em 0.043em 0 var(--logo-ink),
0.02em 0.052em 0 var(--logo-ink),
-0.003em 0.043em 0 var(--logo-ink),
-0.012em 0.02em 0 var(--logo-ink),
-0.003em -0.003em 0 var(--logo-ink),
0.02em -0.012em 0 var(--logo-ink),
0.043em -0.003em 0 var(--logo-ink),
0.072em 0.04em 0 var(--logo-ink),
0.063em 0.063em 0 var(--logo-ink),
0.04em 0.072em 0 var(--logo-ink),
0.017em 0.063em 0 var(--logo-ink),
0.008em 0.04em 0 var(--logo-ink),
0.017em 0.017em 0 var(--logo-ink),
0.04em 0.008em 0 var(--logo-ink),
0.063em 0.017em 0 var(--logo-ink),
0.092em 0.06em 0 var(--logo-ink),
0.083em 0.083em 0 var(--logo-ink),
0.06em 0.092em 0 var(--logo-ink),
0.037em 0.083em 0 var(--logo-ink),
0.028em 0.06em 0 var(--logo-ink),
0.037em 0.037em 0 var(--logo-ink),
0.06em 0.028em 0 var(--logo-ink),
0.083em 0.037em 0 var(--logo-ink),
0.112em 0.08em 0 var(--logo-ink),
0.103em 0.103em 0 var(--logo-ink),
0.08em 0.112em 0 var(--logo-ink),
0.057em 0.103em 0 var(--logo-ink),
0.048em 0.08em 0 var(--logo-ink),
0.057em 0.057em 0 var(--logo-ink),
0.08em 0.048em 0 var(--logo-ink),
0.103em 0.057em 0 var(--logo-ink);
}
.list-hero-title em::after {
content: attr(data-text);
content: attr(data-text) / "";
position: absolute; left: 0; top: 0;
white-space: nowrap; pointer-events: none;
text-shadow: none;
background: linear-gradient(180deg,
#fdf478 0 0.364em,
#fdd405 0.364em 0.56em,
#fdb604 0.56em 0.655em,
#fca903 0.655em 0.74em,
#f98c02 0.74em);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.list-hero-lede {
color: var(--ink-2); font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.6;
max-width: 44ch;
}
.list-hero-stats {
display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: 0.625rem;
margin: 2rem 0 0; padding: 0;
}
.list-hero-stat {
margin: 0; min-width: 0;
padding: 0.8125rem 1.125rem 0.875rem;
background-color: var(--glass); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
-webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
box-shadow: var(--sheen), var(--shadow-sm);
}
.list-hero-stat dt {
display: flex; align-items: center; gap: 0.4375rem;
font: 700 0.6875rem/1.2 var(--font-label); letter-spacing: 0.09em; text-transform: uppercase;
color: var(--muted); white-space: nowrap;
}
.list-hero-stat dt .gd-icon { filter: var(--shadow-sprite); }
.list-hero-stat dd {
margin: 0.4375rem 0 0;
font: 800 1.75rem/1 var(--font-hero); font-stretch: normal;
letter-spacing: -0.025em;
color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.list-hero-pair {
display: grid; grid-auto-flow: column; grid-template-rows: auto auto;
justify-content: start;
}
.list-hero-pair > dd { margin-top: 0; padding-top: 0.4375rem; }
.list-hero-pair > dt:nth-of-type(2),
.list-hero-pair > dd:nth-of-type(2) {
margin-left: 1.125rem; padding-left: 1.125rem;
border-left: 1px solid var(--hairline-strong);
}
.list-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.125rem; }
.list-hero-cta .btn-lg { min-height: 3.25rem; padding-inline: 1.5rem; font-size: 1rem; }
.list-hero-cta .btn .icon { transition: transform .4s var(--ease-out); }
.list-hero-cta .btn:hover .icon { transform: translateX(3px); }
.list-hero-stage {
position: relative; justify-self: center;
width: min(100%, 28rem); aspect-ratio: 1;
}
.hero-profile {
position: absolute; inset: 0;
display: grid; place-items: center;
pointer-events: none;
}
a.hero-profile .hero-tag,
a.hero-profile .list-hero-art { pointer-events: auto; cursor: pointer; }
a.hero-profile:focus-visible { outline: none; }
a.hero-profile:focus-visible .hero-tag {
outline: 2px solid var(--gold); outline-offset: 0.375rem; border-radius: 0.25rem;
}
.list-hero-art {
width: 60%; height: auto; display: block;
filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.35)) drop-shadow(0 0 40px rgba(250, 190, 20, 0.35));
transition: opacity .9s var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
.list-hero-art { animation: stage-float 5.5s ease-in-out infinite; }
}
@keyframes stage-float {
0%, 100% { transform: translateY(0) rotate(-4deg); }
50%      { transform: translateY(-0.875rem) rotate(3deg); }
}
.has-stage .list-hero-art { opacity: 0; }
a.hero-profile .list-hero-art { transition: opacity .9s var(--ease-out), scale .35s var(--ease-out); }
a.hero-profile:has(.hero-tag:hover, .list-hero-art:hover) .list-hero-art { scale: 1.05; }
.stage-expected .list-hero-art { opacity: 0; transition: none; }
:root { --tag-bg: rgba(0, 0, 0, 0.25); }
:root[data-theme="dark"] { --tag-bg: rgba(255, 255, 255, 0.13); }
.hero-tag {
position: absolute; left: 50%; top: 2%;
height: 10%;
display: flex; align-items: center;
transform: translate(-50%, var(--bob, 0px));
will-change: transform;
}
.hero-tag .nametag {
height: 100%; width: auto; display: block;
image-rendering: pixelated;
}
.nametag-badge { image-rendering: auto; }
.nametag-bg   { fill: var(--tag-bg); transition: fill .2s; }
.nametag-ink  { fill: #fff; }
.nametag-rule { fill: rgba(255, 255, 255, 0.3); }
a.hero-profile:has(.hero-tag:hover, .list-hero-art:hover) .nametag-bg { fill: rgba(0, 0, 0, 0.42); }
:root[data-theme="dark"] a.hero-profile:has(.hero-tag:hover, .list-hero-art:hover) .nametag-bg { fill: rgba(255, 255, 255, 0.24); }
@media (prefers-reduced-motion: no-preference) {
.hero-tag { animation: tag-float 5.5s ease-in-out infinite; }
}
@keyframes tag-float {
0%, 100% { transform: translate(-50%, 0); }
50%      { transform: translate(-50%, -0.875rem); }
}
.has-stage .hero-tag { animation: none; }
.stage-expected .hero-tag { opacity: 0; }
.has-stage .hero-tag { opacity: 1; }
.list-blurb {
font: 700 0.75rem/1.3 var(--font-label); letter-spacing: 0.1em; text-transform: uppercase;
color: var(--muted);
}
.list-blurb strong { color: var(--ink); font-weight: 700; }
@media (max-width: 1000px), (max-height: 560px) and (orientation: landscape) and (pointer: coarse) {
.list-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: 1.5rem; min-height: 0; padding-top: 1.5rem; }
}
@media (max-width: 720px) {
.list-hero { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding: 0.5rem 0 2rem; }
.list-hero-stage { order: -1; width: min(68vw, 17rem); }
.list-hero-title { font-size: clamp(2.5rem, 11.5vw, 3.5rem); margin: 1.125rem 0 1rem; }
.list-hero-stats { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0.4375rem; margin-top: 1.5rem; }
.list-hero-stat { padding: 0.625rem 0.75rem 0.6875rem; }
.list-hero-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.list-hero-pair > dt:nth-of-type(2),
.list-hero-pair > dd:nth-of-type(2) { margin-left: 0.625rem; padding-left: 0.625rem; }
.list-hero-stat dd { font-size: 1.3125rem; }
.list-hero-stat dt { font-size: 0.5625rem; letter-spacing: 0.1em; white-space: normal; gap: 0.3125rem; }
.list-hero-stat dt .gd-icon { width: 0.875rem; height: auto; }
.list-hero-cta { margin-top: 1.5rem; }
.list-hero-cta .btn { flex: 1 1 auto; }
}
input[type="file"]::file-selector-button,
.import-form input[type="file"]::file-selector-button,
.account-add > summary,
.account-toggle,
.badge-copy {
background: var(--glass-strong); color: var(--ink);
border: 1px solid var(--hairline-strong);
box-shadow: var(--sheen), 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 20px -14px rgba(0, 0, 0, 0.5);
transition: transform .22s var(--ease-out), border-color .15s, box-shadow .15s, color .15s;
}
input[type="file"]::file-selector-button { padding: 0.4375rem 0.875rem; }
input[type="file"]::file-selector-button:hover,
.account-add > summary:hover,
.account-more > summary:hover .account-toggle,
.badge-copy:hover {
background: var(--glass-strong); color: var(--ink);
border-color: var(--gold);
box-shadow: var(--sheen), 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 20px -14px rgba(0, 0, 0, 0.5);
transform: scale(1.04);
}
.account-add > summary:active,
.account-more > summary:active .account-toggle,
.badge-copy:active {
background: var(--glass-strong);
box-shadow: var(--sheen), inset 0 2px 5px rgba(0, 0, 0, 0.16);
transform: scale(.96); transition-duration: .08s;
}
.avatar {
border-color: var(--hairline-strong);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 14px -8px rgba(0, 0, 0, 0.45);
}
.tier-body,
.segment-body {
background: var(--glass-strong); color: var(--ink-2);
border: 1px solid var(--hairline-strong);
box-shadow: var(--sheen), 0 1px 2px rgba(0, 0, 0, 0.1);
transition: transform .22s var(--ease-out), border-color .15s, box-shadow .15s,
background-color .15s, color .15s, opacity .2s;
}
.tier-body .gd-icon, .segment-body .gd-icon { transition: filter .2s; }
.tier:hover .tier-body,
.segment:hover .segment-body {
background: var(--glass-strong);
border-color: var(--gold);
transform: scale(1.02);
}
.tier input:checked + .tier-body,
.segment input:checked + .segment-body {
background: var(--chip-on-face); color: var(--ink); font-weight: 750;
border-color: color-mix(in srgb, var(--ink) 24%, transparent);
box-shadow: var(--sheen), 0 2px 4px rgba(0, 0, 0, 0.08), 0 10px 22px -12px rgba(0, 0, 0, 0.5);
}
.tier:hover input:checked + .tier-body,
.segment:hover input:checked + .segment-body { border-color: var(--gold); }
.tiers:has(input:checked) .tier:not(:hover) input:not(:checked) + .tier-body,
.segmented:has(input:checked) .segment:not(:hover) input:not(:checked) + .segment-body { opacity: .62; }
.tiers:has(input:checked) .tier:not(:hover) input:not(:checked) + .tier-body .gd-icon,
.segmented:has(input:checked) .segment:not(:hover) input:not(:checked) + .segment-body .gd-icon {
filter: grayscale(1) var(--shadow-sprite);
}
.form-more {
background-color: var(--glass-card);
border-color: var(--hairline);
box-shadow: var(--sheen), var(--shadow-sm);
}
.vids { border-top-color: var(--hairline); }
.vid {
background: color-mix(in srgb, var(--surface-2) 60%, transparent);
border-color: var(--hairline);
border-radius: 0.875rem;
box-shadow: var(--sheen);
}
.vid-new { background: transparent; border-color: var(--hairline-strong); box-shadow: none; }
.vid-thumb {
border-radius: 0.5rem;
box-shadow: 0 0 0 1px var(--hairline-strong), 0 8px 16px -10px rgba(0, 0, 0, 0.6);
}
.vid-thumb:hover { box-shadow: 0 0 0 2px var(--gold), 0 8px 16px -10px rgba(0, 0, 0, 0.6); }
.form-actions {
position: sticky; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 5;
justify-self: center; width: fit-content; max-width: 100%;
margin: 0.75rem auto 0;
display: flex; align-items: center; flex-wrap: nowrap; gap: 0.75rem;
padding: 0.75rem 0.75rem 0.75rem 1.25rem;
border: 1px solid var(--hairline-strong); border-radius: 62.5rem;
background: var(--glass-strong);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
box-shadow: var(--sheen),
0 2px 6px rgba(0, 0, 0, 0.08),
0 22px 44px -18px rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-transparency: reduce) {
.form-actions { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.form-actions > .btn-primary { margin: 0 calc(6px + 0.25rem) 6px 0; }
.form-actions > .btn-ghost { border-radius: 62.5rem; }
.island-status {
display: grid; grid-template-columns: 0fr;
align-self: stretch; align-items: center;
margin-right: -0.75rem;
transition: grid-template-columns .45s var(--ease-out), margin-right .45s var(--ease-out);
}
.island-status > span {
min-width: 0; overflow: hidden; white-space: nowrap;
display: flex; align-items: center; gap: 0.5rem;
font: 650 0.8125rem/1 var(--font-ui); color: var(--ink-2);
}
.island-status > span::after {
content: ""; flex: none;
width: 1px; height: 1.375rem; margin-left: 0.5rem;
background: var(--hairline-strong);
}
.island-dot {
flex: none; width: 0.5rem; height: 0.5rem; margin-left: 0.125rem; border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent);
}
.form-actions.is-dirty .island-status { grid-template-columns: 1fr; margin-right: 0; }
@media (prefers-reduced-motion: no-preference) {
.form-actions.is-dirty .island-dot { animation: island-pulse 1.8s var(--ease-out) infinite; }
}
@keyframes island-pulse {
0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
70%  { box-shadow: 0 0 0 0.4375rem color-mix(in srgb, var(--gold) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent); }
}
@media (max-width: 640px) {
.form-actions {
width: auto; justify-self: stretch; margin-inline: 0;
flex-wrap: wrap; border-radius: 1.75rem; row-gap: 0.625rem;
padding: 0.75rem;
}
.form-actions > .btn-primary { margin-right: 6px; }
.form-actions > button.btn-ghost { align-self: center; }
.island-status { display: none; }
.form-actions.is-dirty .island-status {
display: flex; flex: 1 1 100%; justify-content: center; margin: 0.125rem 0 0;
}
.island-status > span::after { display: none; }
body:has(.form-actions) .scroll-tools {
bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + var(--island-h, 7rem) + 0.625rem);
}
}
.account-reset input {
padding: 0.625rem 0.8125rem; font: 0.875rem var(--font);
border-radius: 0.625rem;
}
.account-reset .field-reveal input { padding-right: 2.75rem; }
.account-reset .reveal-btn {
width: 1.875rem; height: 1.875rem; right: 0.375rem; border-radius: 0.4375rem;
}
.account-reset .reveal-btn svg { width: 1.125rem; height: 1.125rem; }
.account-reset { gap: 0.5rem; align-items: stretch; }
.account-reset .btn { align-self: stretch; min-height: 0; padding-inline: 1rem; }
:root { --popup-scrim: color-mix(in srgb, var(--bg) 82%, transparent); }
.form-busy,
.modal-backdrop {
background: var(--popup-scrim);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
body::after {
content: ""; position: fixed; inset: 0; z-index: 88; pointer-events: none;
background: var(--popup-scrim);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
opacity: 0; visibility: hidden;
transition: opacity .3s ease, visibility 0s linear .3s;
}
body:has(#toasts .toast:not(.is-leaving))::after {
opacity: 1; visibility: visible; transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
.form-busy, .modal-backdrop, body::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.modal {
width: min(25rem, 100%);
padding: 1.625rem 1.625rem 1.75rem;
text-align: center;
}
.modal-title { font: 700 1.0625rem/1.3 var(--font-ui); color: var(--ink); margin: 0 0 0.3125rem; }
.modal-body  { font-size: 0.875rem; line-height: 1.5; }
.modal-actions { justify-content: center; margin-top: 1.375rem; }
.modal-confirm {
display: grid; justify-items: center;
animation: save-arrive .5s cubic-bezier(.2, 1.35, .4, 1) both;
}
.confirm-mark { margin-bottom: 0.875rem; }
.save-mark.is-ask { --disc: #f59e0b; }
.confirm-glyph {
position: relative; width: 1.625rem; height: 1.625rem;
color: #fff; filter: none;
animation: save-rise .4s .16s cubic-bezier(.16, 1, .3, 1) both;
}
.modal-confirm .modal-title { text-wrap: balance; }
.modal-confirm .modal-body  { color: var(--ink-2); max-width: 21rem; text-wrap: balance; }
.modal-confirm .modal-actions {
display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem;
justify-self: stretch; margin-top: 1.5rem;
}
.modal-confirm .modal-actions .btn { width: 100%; min-height: 2.75rem; }
.modal-confirm .modal-actions .btn-primary { width: calc(100% - 6px); }
.modal-confirm .btn .icon { --sz: 16; }
.modal-backdrop.is-leaving { pointer-events: none; animation: save-clear .18s ease forwards; }
.modal-backdrop.is-leaving .modal { animation: save-out .18s cubic-bezier(.5, 0, .9, .4) forwards; }
.pop-tile {
background: none; box-shadow: none;
perspective: calc(var(--s) * 5);
}
.pop-cube {
--d: calc(var(--s) * 0.42);
position: absolute; inset: 0; display: block;
transform-style: preserve-3d;
animation: pop-lean var(--dur) var(--delay) ease-in-out both;
}
.pop-field--warp .pop-cube { animation-iteration-count: infinite; animation-direction: alternate; }
.pop-cube > i {
position: absolute; left: 0; top: 0; width: var(--s); height: var(--s);
background-color: var(--c);
background-image: linear-gradient(var(--shade, transparent), var(--shade, transparent));
opacity: var(--fo, .85);
-webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.pop-cube > i:nth-child(1) { transform: translateZ(calc(var(--d) / 2)); }
.pop-cube > i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); --shade: rgba(0, 0, 0, 0.22); }
.pop-cube > i:nth-child(3),
.pop-cube > i:nth-child(4) { width: var(--d); left: calc((var(--s) - var(--d)) / 2); --shade: rgba(0, 0, 0, 0.22); }
.pop-cube > i:nth-child(3) { transform: rotateY(90deg)  translateZ(calc(var(--s) / 2)); }
.pop-cube > i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.pop-cube > i:nth-child(5),
.pop-cube > i:nth-child(6) { height: var(--d); top: calc((var(--s) - var(--d)) / 2); }
.pop-cube > i:nth-child(5) { transform: rotateX(90deg)  translateZ(calc(var(--s) / 2)); --shade: rgba(255, 255, 255, 0.22); }
.pop-cube > i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); --shade: rgba(0, 0, 0, 0.38); }
@keyframes pop-lean {
from { transform: rotateX(var(--tx))  rotateY(var(--ty)); }
to   { transform: rotateX(var(--tx2)) rotateY(var(--ty2)); }
}
.splash { animation: splash-done .01s 2.85s forwards; }
.splash-wall { display: none; }
:root {
--splash-light: rgba(255, 196, 40, 0.34);
--splash-sheen: rgba(255, 255, 255, 0.75);
--splash-glow:  rgba(214, 150, 10, 0.4);
}
:root[data-theme="dark"] {
--splash-light: rgba(250, 180, 20, 0.17);
--splash-sheen: rgba(255, 255, 255, 0.09);
--splash-glow:  rgba(250, 180, 20, 0.22);
}
@property --splash-hole {
syntax: '<length>';
inherits: false;
initial-value: 0px;
}
.splash-veil,
.loader-veil {
--splash-hole: -24vmax;
position: absolute; inset: 0;
background:
radial-gradient(44rem 30rem at 50% 50%, var(--splash-light), transparent 70%),
radial-gradient(70rem 42rem at 80% -14%, var(--ground-1), transparent 62%),
radial-gradient(56rem 40rem at -12% 38%, var(--ground-2), transparent 64%),
var(--bg);
-webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--splash-hole), #000 calc(var(--splash-hole) + 24vmax));
mask-image: radial-gradient(circle at 50% 50%, transparent var(--splash-hole), #000 calc(var(--splash-hole) + 24vmax));
}
.splash-veil {
animation:
stage-splash-ground .5s ease-out both,
stage-splash-open .75s 2.05s cubic-bezier(.55, 0, .3, 1) forwards;
}
.splash-veil::before,
.splash-veil::after,
.loader-veil::before,
.loader-veil::after { content: ""; position: absolute; inset: 0; }
.splash-veil::before,
.loader-veil::before {
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 4.5rem 4.5rem;
background-position: 50% 50%;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 72%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 72%);
}
.splash-veil::after,
.loader-veil::after {
background: radial-gradient(ellipse 120% 95% at 50% 50%, transparent 55%, var(--vignette) 100%);
}
.splash-field {
--splash-spread: 1;
position: absolute; inset: 0;
perspective: 1100px;
pointer-events: none;
}
@media (max-aspect-ratio: 3/4) {
.splash-field { --splash-spread: 1.35; }
}
.splash-block {
position: absolute; left: 50%; top: 50%;
width: var(--s); height: var(--s);
margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
perspective: calc(var(--s) * 5);
transform: translate3d(calc(var(--x) * var(--splash-spread)), var(--y), var(--z)) rotate(var(--rz));
animation: stage-splash-block 2.5s var(--din) linear both;
}
.splash-block .pop-cube {
animation: pop-lean var(--lean) calc(var(--lean) * -.5) ease-in-out infinite alternate;
}
.splash-block .pop-cube > i:nth-child(2) { display: none; }
.splash-panel {
background: color-mix(in srgb, var(--surface) 95%, transparent);
border: 1px solid var(--hairline-strong);
border-radius: 1.5rem;
box-shadow: var(--sheen), var(--shadow-lg), 0 40px 110px -46px var(--splash-glow);
transform-origin: 50% 85%;
animation: stage-splash-card 2.17s .2s linear both;
}
.splash-panel::before,
.splash-panel::after { content: ""; position: absolute; pointer-events: none; }
.splash-panel::before {
left: 12%; right: 12%; top: 0; height: 1px; z-index: 1;
background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.9) 30%, #fff4c2 50%, rgba(250, 204, 21, 0.9) 70%, transparent);
}
.splash-panel::after {
inset: 0; z-index: 2;
background: linear-gradient(105deg, transparent 38%, var(--splash-sheen) 50%, transparent 62%);
transform: translateX(-110%);
animation: stage-splash-sheen 1.1s .9s cubic-bezier(.3, 0, .2, 1) forwards;
}
.splash-head { background: transparent; border-bottom-color: var(--hairline); }
.splash-status { box-shadow: var(--sheen); }
.splash-monogram,
.splash-monogram.has-photo {
border-color: transparent;
box-shadow: 0 0 0 2px var(--splash-ring, #facc15), 0 0 26px -6px var(--splash-ring, #facc15), var(--shadow-sm);
}
.splash-monogram:not(.has-photo) {
box-shadow: inset 0 -0.25rem 0 var(--btn-gold-edge),
0 0 0 2px var(--splash-ring, #facc15), 0 0 26px -6px var(--splash-ring, #facc15), var(--shadow-sm);
}
.splash-out { --splash-ring: var(--hairline-strong); }
.splash-title {
font: 700 0.75rem/1.3 var(--font-label); letter-spacing: 0.12em;
text-transform: uppercase; color: var(--muted);
}
.splash-title strong {
margin-top: 0.4375rem;
font: 700 clamp(1.5rem, 3vw, 2rem)/1.1 var(--font-display); font-stretch: normal;
letter-spacing: -0.02em; text-transform: none; color: var(--ink);
}
:root {
--splash-groove: rgba(60, 45, 15, 0.075);
--splash-groove-shade: inset 0 2px 5px rgba(70, 50, 10, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.8);
}
:root[data-theme="dark"] {
--splash-groove: rgba(0, 0, 0, 0.35);
--splash-groove-shade: inset 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.splash-track {
background: var(--splash-groove);
border-color: var(--hairline-strong);
box-shadow: var(--splash-groove-shade);
}
.splash-fill {
background: var(--logo-bands);
box-shadow: inset 0 0 0 1px rgba(139, 60, 1, 0.45),
inset 0 2px 0 rgba(255, 255, 255, 0.5),
0 0 18px -2px rgba(250, 180, 20, 0.65);
}
.splash-fill::before,
.splash-fill::after { content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none; }
.splash-fill::before {
left: 0; width: 60%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.7) 50%, transparent);
transform: translateX(-100%);
animation: stage-splash-shimmer 1.15s .45s ease-in-out infinite;
}
.splash-fill::after {
right: 0; width: 1.25rem;
background: radial-gradient(closest-side at 70% 50%, rgba(255, 255, 255, 0.9), rgba(255, 244, 194, 0.4) 55%, transparent);
}
@keyframes stage-splash-shimmer { to { transform: translateX(170%); } }
.splash-pct {
color: var(--ink-2);
font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; font-stretch: normal;
letter-spacing: 0;
}
.splash-fill .splash-pct { color: var(--logo-ink); }
.splash.is-leaving .splash-veil {
animation: stage-splash-open-skip .55s cubic-bezier(.55, 0, .3, 1) forwards;
}
.splash.is-leaving .splash-block {
animation: stage-splash-block-skip .45s var(--dskip) cubic-bezier(.55, 0, .75, .3) forwards;
}
@keyframes stage-splash-ground { from { opacity: 0; } }
@keyframes stage-splash-open      { to { --splash-hole: 75vmax; } }
@keyframes stage-splash-open-skip { to { --splash-hole: 75vmax; } }
@keyframes stage-splash-block {
0% {
opacity: 0;
transform: translate3d(calc(var(--x) * var(--splash-spread) + var(--fx)), calc(var(--y) + var(--fy)), -700px) rotate(var(--rin)) scale(.5);
animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
14.7% { opacity: 1; }
42% {
transform: translate3d(calc(var(--x) * var(--splash-spread)), var(--y), var(--z)) rotate(var(--rz)) scale(1);
}
79% {
opacity: 1;
transform: translate3d(calc(var(--x) * var(--splash-spread)), var(--y), var(--z)) rotate(var(--rz)) scale(1);
animation-timing-function: cubic-bezier(.55, 0, .75, .3);
}
100% {
opacity: 0;
transform: translate3d(calc(var(--x) * var(--splash-spread) + var(--ex)), calc(var(--y) + var(--ey)), -800px) rotate(var(--rout)) scale(.5);
}
}
@keyframes stage-splash-block-skip {
to {
opacity: 0;
transform: translate3d(calc(var(--x) * var(--splash-spread) + var(--ex)), calc(var(--y) + var(--ey)), -800px) rotate(var(--rout)) scale(.5);
}
}
@keyframes stage-splash-card {
0% {
opacity: 0;
transform: perspective(75rem) rotateX(30deg) translate3d(0, 3.5rem, -160px) scale(.92);
animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
16.6% { opacity: 1; }
41.5% { transform: perspective(75rem) rotateX(0deg) translate3d(0, 0, 0) scale(1); }
80.6% {
opacity: 1;
transform: perspective(75rem) rotateX(0deg) translate3d(0, 0, 0) scale(1);
animation-timing-function: cubic-bezier(.4, 0, .7, .25);
}
100% {
opacity: 0;
transform: perspective(75rem) rotateX(-16deg) translate3d(0, -1rem, -260px) scale(.9);
}
}
@keyframes splash-panel-skip {
to { opacity: 0; transform: perspective(75rem) rotateX(-16deg) translate3d(0, -1rem, -260px) scale(.9); }
}
@keyframes stage-splash-sheen { to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
.splash-veil,
.splash-field { animation: splash-fade .3s 1.6s ease forwards !important; }
.splash.is-leaving .splash-veil,
.splash.is-leaving .splash-field { animation: splash-fade-skip .25s ease forwards !important; }
}
:root {
--loader-halo:        rgba(255, 186, 20, 0.5);
--loader-line:        rgba(226, 148, 0, 0.7);
--loader-line-glow:   rgba(245, 168, 0, 0.35);
--loader-tide-a:      rgba(255, 196, 40, 0.34);
--loader-tide-b:      rgba(255, 150, 30, 0.2);
--loader-groove:      #fbf3dc;
--loader-bar-shadow:  rgba(120, 70, 0, 0.55);
}
:root[data-theme="dark"] {
--loader-halo:        rgba(255, 170, 0, 0.3);
--loader-line:        rgba(255, 196, 64, 0.62);
--loader-line-glow:   rgba(255, 176, 24, 0.32);
--loader-tide-a:      rgba(250, 175, 20, 0.16);
--loader-tide-b:      rgba(255, 110, 20, 0.1);
--loader-groove:      #2a2214;
--loader-bar-shadow:  rgba(0, 0, 0, 0.8);
}
.loader { display: none; }
:root.is-loading .loader {
position: fixed; top: 0; bottom: 0; left: 0; z-index: 210;
width: 100vw;
display: grid; place-items: center;
padding: 1.5rem; overflow: hidden;
}
.loader.is-opening { pointer-events: none; }
:root.is-loading:has(#loader:not(.is-opening)) { scrollbar-width: none; }
:root.is-loading:has(#loader:not(.is-opening))::-webkit-scrollbar { display: none; }
.loader-veil::before { z-index: 1; }
.loader-veil::after  { z-index: 2; }
.loader-tide {
position: absolute; width: 80vmax; height: 80vmax;
border-radius: 50%;
background: radial-gradient(closest-side, var(--tide), transparent);
will-change: transform;
}
.loader-tide:nth-child(1) { --tide: var(--loader-tide-a); left: -24vmax; top: -34vmax; }
.loader-tide:nth-child(2) { --tide: var(--loader-tide-b); right: -26vmax; bottom: -38vmax; }
@media (prefers-reduced-motion: no-preference) {
.loader-tide:nth-child(1) { animation: loader-tide-a 13s ease-in-out infinite alternate; }
.loader-tide:nth-child(2) { animation: loader-tide-b 17s ease-in-out -6s infinite alternate; }
}
@keyframes loader-tide-a { to { transform: translate3d(34vw, 26vh, 0) scale(1.12); } }
@keyframes loader-tide-b { to { transform: translate3d(-30vw, -24vh, 0) scale(.9); } }
.loader-lines {
position: absolute; inset: 0;
overflow: hidden; pointer-events: none;
-webkit-mask-image: radial-gradient(ellipse 72% 64% at 50% 50%, #000 16%, transparent 78%);
mask-image: radial-gradient(ellipse 72% 64% at 50% 50%, #000 16%, transparent 78%);
}
.loader-lines i,
.loader-lines b {
position: absolute;
left: calc(50% + var(--x) * 4.5rem); top: calc(50% + var(--y) * 4.5rem);
background: var(--loader-line);
box-shadow: 0 0 6px var(--loader-line-glow);
opacity: 0;
will-change: transform, opacity;
}
.loader-lines .x {
width: calc(var(--len) * 4.5rem + 1px); height: 1px;
transform-origin: calc(var(--o) * 100%) 50%;
}
.loader-lines .y {
width: 1px; height: calc(var(--len) * 4.5rem + 1px);
transform-origin: 50% calc(var(--o) * 100%);
}
.loader-lines b {
width: 5px; height: 5px; margin: -2px 0 0 -2px;
box-shadow: 0 0 8px var(--loader-line-glow);
}
.loader-lines-tall { display: none; }
@media (max-aspect-ratio: 1/1) {
.loader-lines-wide { display: none; }
.loader-lines-tall { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
.loader-lines .x {
animation: loader-trace-x var(--run) var(--at) linear both,
loader-trace-out .6s var(--fade) cubic-bezier(.45, 0, .55, 1) both;
}
.loader-lines .y {
animation: loader-trace-y var(--run) var(--at) linear both,
loader-trace-out .6s var(--fade) cubic-bezier(.45, 0, .55, 1) both;
}
.loader-lines b {
animation: loader-trace-end .4s var(--at) cubic-bezier(.3, 1.7, .5, 1) both,
loader-trace-out .6s var(--fade) cubic-bezier(.45, 0, .55, 1) both;
}
}
@keyframes loader-trace-x   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes loader-trace-y   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes loader-trace-end { from { transform: scale(0); }  to { transform: scale(1); } }
@keyframes loader-trace-out { from { opacity: 1; } to { opacity: 0; } }
.loader-core {
--mark-w: min(19rem, 58vw, 52vh);
position: relative;
display: grid; justify-items: center;
width: min(24rem, 100%);
will-change: transform, opacity;
}
.loader-emblem {
--light: min(34rem, 140vw);
position: relative;
width: var(--mark-w);
aspect-ratio: 300 / 164;
margin-bottom: clamp(1.25rem, 6vh, 3.25rem);
}
.loader-light {
position: absolute; left: 50%; top: 50%;
width: var(--light); height: var(--light);
margin: calc(var(--light) / -2) 0 0 calc(var(--light) / -2);
pointer-events: none;
}
.loader-halo {
position: absolute; inset: 18%;
border-radius: 50%;
background: radial-gradient(closest-side, var(--loader-halo), transparent);
will-change: transform, opacity;
}
.loader-mark { position: absolute; inset: 0; will-change: transform; }
.loader-sdl {
position: relative; display: block;
width: 100%; height: auto;
filter: var(--shadow-logo);
}
.loader-glint {
position: absolute; inset: 0; overflow: hidden;
-webkit-mask: var(--sdl) center / contain no-repeat;
mask: var(--sdl) center / contain no-repeat;
pointer-events: none;
}
.loader-glint::before {
content: ""; position: absolute; top: -10%; bottom: -10%; left: 0;
width: 38%;
background: linear-gradient(105deg,
transparent 18%, rgba(255, 255, 255, 0.4) 38%,
#fff 48%, #fff 52%,
rgba(255, 255, 255, 0.4) 62%, transparent 82%);
opacity: .9;
transform: translateX(-110%);
will-change: transform;
}
.loader-meter { width: max(var(--mark-w), min(15rem, 80vw)); }
.loader .splash-meter { --splash-p: 0; animation: none; }
.loader .splash-track {
height: 1.25rem; padding: 0;
background: var(--loader-groove);
border: 2px solid var(--logo-ink);
border-radius: 0.4375rem;
box-shadow:
0 0 0 2px #fff,
0 0.5rem 1.125rem -0.5rem var(--loader-bar-shadow),
inset 0 2px 3px rgba(0, 0, 0, 0.28);
}
.loader .splash-channel { inset: 2px; border-radius: 0.1875rem; }
.loader .splash-fill {
animation: none;
border-radius: 0.1875rem;
transform: translateX(calc(-100% - 4px));
will-change: transform;
}
.loader .splash-fill::before { opacity: .55; }
.loader .splash-fill .splash-pct { display: none; }
@media (prefers-reduced-motion: no-preference) {
.loader .splash-fill { transition: transform .6s cubic-bezier(.25, .8, .35, 1); }
}
.loader-foot {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
margin-top: 0.9375rem; padding: 0 0.125rem;
}
.loader-label {
font: 700 0.6875rem/1.2 var(--font-label); letter-spacing: 0.14em;
text-transform: uppercase; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loader-pct {
flex: none;
font: 700 1.0625rem/1 var(--font-display); font-stretch: normal;
font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
color: var(--ink);
}
.loader-pct::before { counter-reset: splash-p calc(var(--splash-p)); content: counter(splash-p); }
.loader-pct small {
display: inline-block; margin-left: 0.14em;
font-size: 0.6em; font-weight: 600; color: var(--muted);
transform: translateY(-0.28em);
}
@media (prefers-reduced-motion: no-preference) {
.loader-light  { animation: loader-light-in .9s cubic-bezier(.16, 1, .3, 1) both; }
.loader-emblem { animation: loader-emblem-in .75s .05s cubic-bezier(.2, 1.25, .35, 1) both; }
.loader-meter  { animation: loader-rise .6s .2s cubic-bezier(.16, 1, .3, 1) both; }
.loader-halo  { animation: loader-breathe 2.4s ease-in-out infinite alternate; }
.loader-mark  { animation: loader-float 2.4s ease-in-out infinite alternate; }
.loader-glint::before { animation: loader-glint 2.8s .7s cubic-bezier(.4, 0, .2, 1) infinite; }
}
@keyframes loader-light-in  { from { opacity: 0; transform: scale(.55); } }
@keyframes loader-emblem-in { from { opacity: 0; transform: translateY(0.75rem) scale(.8); } }
@keyframes loader-rise      { from { opacity: 0; transform: translateY(0.75rem); } }
@keyframes loader-breathe {
from { opacity: .7; transform: scale(.88); }
to   { opacity: 1;  transform: scale(1.08); }
}
@keyframes loader-float { to { transform: translateY(-0.625rem); } }
@keyframes loader-glint {
0%        { transform: translateX(-110%); }
40%, 100% { transform: translateX(250%); }
}
.loader-veil { -webkit-mask-image: none; mask-image: none; will-change: opacity, transform; }
.loader.is-opening .loader-veil,
.loader.is-opening .loader-lines {
animation: loader-open .6s .06s cubic-bezier(.45, 0, .25, 1) forwards;
}
.loader.is-opening .loader-core {
animation: loader-core-out .42s cubic-bezier(.4, 0, .7, .25) forwards;
}
@keyframes loader-open     { to { opacity: 0; transform: scale(1.1); } }
@keyframes loader-core-out { to { opacity: 0; transform: scale(1.16); } }
@media (prefers-reduced-motion: reduce) {
.loader.is-opening { animation: loader-fade .25s ease forwards; }
.loader.is-opening .loader-veil,
.loader.is-opening .loader-lines,
.loader.is-opening .loader-core { animation: none; }
}
@keyframes loader-fade { to { opacity: 0; } }
.cards { gap: 0.875rem; }
.card {
transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out),
border-color .3s, background-color .3s;
}
.card:hover {
transform: translateY(-3px);
border-color: var(--hairline-strong);
box-shadow: var(--sheen), var(--shadow);
}
.card-thumb {
position: relative; border-color: var(--hairline);
box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.65);
}
.card-thumb img { transition: transform .9s var(--ease-out); }
.card-thumb::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.28) 47%, transparent 62%);
transform: translateX(-130%);
}
@media (hover: hover) and (pointer: fine) {
.card:hover .card-thumb img { transform: scale(1.06); }
.card:hover .card-thumb::after { transform: translateX(130%); transition: transform 1.1s var(--ease-out); }
}
.card-rank { font-weight: 600; letter-spacing: -0.03em; }
.card-title { font-weight: 760; letter-spacing: -0.02em; }
.card-dash { color: var(--muted); opacity: .7; }
.card-podium {
border-color: var(--podium);
background-image: linear-gradient(100deg, color-mix(in srgb, var(--podium) 9%, transparent), transparent 40%);
box-shadow: var(--sheen), inset 0 0 0 1px var(--podium), var(--shadow-sm);
}
.card-podium:hover {
border-color: var(--podium);
box-shadow: var(--sheen), inset 0 0 0 1px var(--podium), var(--shadow);
}
@property --podium-turn {
syntax: "<angle>"; inherits: false; initial-value: 0deg;
}
.card-podium::before {
left: 0; top: 0; right: 0; bottom: 0; width: auto;
padding: 1px; border-radius: inherit; pointer-events: none;
background: conic-gradient(from var(--podium-turn),
transparent 0deg 200deg,
color-mix(in srgb, var(--podium) 40%, transparent) 250deg,
var(--podium) 300deg,
#fff 318deg,
var(--podium) 330deg,
transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
}
@media (prefers-reduced-motion: no-preference) {
.card-podium::before { animation: stage-orbit 5.5s linear infinite; }
.card-podium-2::before { animation-duration: 6.4s; animation-delay: -2s; }
.card-podium-3::before { animation-duration: 6s; animation-delay: -4s; }
}
#splash:not(.is-opening) ~ main .card-podium::before,
#loader:not(.is-counted) ~ main .card-podium::before { animation-play-state: paused; }
@keyframes stage-orbit { to { --podium-turn: 360deg; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
.card-podium:hover {
transform: perspective(70rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px);
}
}
.cards.is-sorting .card-podium:hover { transform: none; }
.card-drag-proxy { background-color: var(--surface); box-shadow: var(--shadow-lg); }
.card-pct { color: var(--ink); }
.side-stats li {
background: color-mix(in srgb, var(--surface-2) 60%, transparent);
border-color: var(--hairline);
box-shadow: var(--sheen);
transition: border-color .25s, background-color .25s, transform .4s var(--ease-out);
}
.side-stats li:hover { border-color: var(--hairline-strong); transform: translateX(2px); }
.side-stats span { font-weight: 600; letter-spacing: -0.03em; }
.side-list { gap: 0.5rem; }
.side-list li {
padding: 0.5rem 0.5rem 0.5625rem;
background: color-mix(in srgb, var(--surface-2) 60%, transparent);
border: 1px solid var(--hairline);
border-radius: var(--radius-sm);
box-shadow: var(--sheen);
}
.side-list li > em { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.side-list li > em .meta-item:last-child {
min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.mini-thumb, .card-thumb { border-radius: var(--radius-xs); }
.mini-thumb-bar > span {
background: linear-gradient(90deg, #f59e0b, #facc15);
box-shadow: 0 0 10px rgba(250, 190, 20, 0.8);
}
.level { box-shadow: var(--sheen), var(--shadow); }
.facts { background: var(--hairline); border-color: var(--hairline); }
.fact { background: var(--glass-card); }
.media-frame { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--hairline); }
.reel-tile {
background: var(--glass); border-color: var(--hairline);
border-radius: 0.875rem;
box-shadow: var(--sheen), var(--shadow-sm);
transition: transform .25s var(--ease-out), background-color .25s var(--ease-out),
border-color .2s, box-shadow .25s var(--ease-out);
}
.reel-tile:hover {
background: var(--glass-strong); border-color: var(--gold);
transform: translateY(-2px);
box-shadow: var(--sheen), 0 0 0 1px var(--hairline-strong), 0 14px 26px -18px rgba(0, 0, 0, 0.65);
}
.reel-tile.is-on {
background: var(--glass-strong); border-color: var(--gold);
box-shadow: var(--sheen), 0 0 0 1px var(--gold), 0 0 26px -8px rgba(250, 190, 20, 0.5);
}
.reel-thumb {
border-radius: 0.5rem;
box-shadow: 0 0 0 1px var(--hairline-strong), 0 8px 16px -10px rgba(0, 0, 0, 0.6);
}
.reel-now { box-shadow: 0 2px 8px rgba(250, 190, 20, 0.45); }
.stats-head { background-image: none; }
.stats-head h1 { letter-spacing: -0.045em; }
.stats-avatar {
box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px #facc15;
}
.stats-latest { border-color: var(--hairline); }
.stat-beaten {
border-top: 1px solid var(--hairline);
background-image: none;
box-shadow: var(--sheen), inset 0 2px 0 #facc15, var(--shadow-sm);
}
.tier-counts { background: var(--hairline); border-color: var(--hairline); }
.tier-counts li { background: var(--glass-card); transition: background-color .3s; }
.tier-counts li:hover { background: var(--glass-strong); }
.sitefoot {
background:
radial-gradient(60rem 22rem at 50% 100%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 70%),
color-mix(in srgb, var(--surface) 55%, transparent);
border-top-color: var(--hairline);
overflow: hidden;
}
.foot-nav h2 { color: var(--muted); }
.sitefoot-base { border-top-color: var(--hairline); }
.foot-spacer {
font-size: clamp(2.25rem, 9vw, 8.5rem);
height: 0.55em;
margin-top: 0.5rem;
}
.rv-boot :is(.list-hero-copy > *, .list-head, .cards > .card, .list-side > section, .level,
.stats-head, .stat, .stats-page > .panel, .stats-page > section,
.stats-page > div:not(.stat-row), .empty-state),
.rv:not(.is-in) { opacity: 0; }
@media print {
.rv, .rv-boot * { opacity: 1 !important; }
.stage, .stage-hero, .loader { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.card:hover, .btn:hover, .btn-ghost:hover, .icon-btn:hover, .tier-chip:hover,
.theme-toggle:hover, .nav-burger:hover, .level-nav a:hover,
.auth-btn-out:hover, .tier-clear:hover, .scroll-btn:hover { transform: none; animation: none; }
.card-podium::before { background: var(--podium); opacity: .5; }
}