/* MZO site: shared styles for every page (tokens, fonts, scale, top bar, footer, BO7 pieces, toast).
   Sizes are rem: 1rem = 16px of the 1920x1080 design; the root size follows the screen (see the scale block). */

@font-face { font-family: "Hyperspace"; src: url("../fonts/hyperspace_race_bold.otf"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Hyperspace"; src: url("../fonts/hyperspace_race_heavy.otf"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Kairos"; src: url("../fonts/kairos_sans_w1g_cn.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Kairos"; src: url("../fonts/kairos_sans_w1g_cn_medium.ttf"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Kairos"; src: url("../fonts/kairos_sans_w1g_cn_bold.ttf"); font-weight: 700; font-display: swap; }
:root {
	--bg: #050608;
	--panel: rgba(16, 18, 24, .82);
	--panel-solid: #101218;
	--row: #0b0e13;
	--frame: #2a2f37;
	--frame-hi: #8d97a3;
	--text: #e8ecef;
	--muted: #9aa3ad;
	--nav: #9cb8cf;        /* idle top tabs */
	--tab-line: #50a5c1;   /* active tab underline */
	--cyan: #62d5f1;
	--badge-bg: #0d2433;
	--badge: #8fd3ea;
	--violet: #601eec;     /* selected big button */
	--violet-2: #8a5cf6;
	--fog: #9c1504;        /* lobby red fog */
	--gold: #efd70b;       /* your name in the party */
	--orange: #ff6a2b;     /* "recommended" line */
	--map-blue: #6f96b7;
	--ok: #5fd38a;
	--head: "Hyperspace", "Rajdhani", "Arial Narrow", sans-serif;
	--body: "Kairos", "Barlow Condensed", "Arial Narrow", sans-serif;
	/* side gutter; on wide screens it grows so the content stays a 109rem column (the 1920 px design, scaled) */
	--g: max(clamp(16px, 4.6vw, 5.5rem), (100vw - 109rem) / 2);
	--ease: cubic-bezier(.2, .8, .2, 1);
	--snap: cubic-bezier(.3, 1.4, .5, 1);
}
/* ---------- whole-site scale ----------
   1rem = 16 px of the original 1920 x 1080 design. The root size follows the screen (the smaller of its width and
   height against 1920 x 1080, times --k), so the design zooms as one and each section fits one screen at 1920 x 1080,
   1440 x 900 and 1366 x 768. Font sizes keep an 11 px floor. At 1080 px and narrower the layout stacks and the size
   is fixed. Write new sizes in rem (px / 16). */
html { --k: .86; font-size: clamp(9px, min(100vw / 120, 100vh / 67.5) * var(--k), 16px); }
@media (max-width: 1080px) {
	html { font-size: 15px; }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 0; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 max(11px, 1.125rem)/1.4 var(--body); letter-spacing: .02em; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--head); }
svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 0.1875rem; }
.muted { color: var(--muted); }
.page-bg { position: fixed; inset: 0; z-index: -2; background: url("../assets/bg_modeselect.webp") center / cover, var(--bg); }
.page-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 30%, transparent 30%, rgba(0, 0, 0, .8)); }
.page-bg .hex { position: absolute; inset: 0; background: url("../assets/fx_hex.webp") center / 75rem; opacity: .035; mix-blend-mode: screen; animation: hex-pulse 8s ease-in-out infinite; }
@keyframes hex-pulse { 50% { opacity: .08; } }
.fade-cover { position: fixed; inset: 0; z-index: 200; background: #000; pointer-events: none; transition: opacity .45s ease .05s; }
body.is-ready .fade-cover { opacity: 0; }
.frame { position: relative; padding: 0.625rem; border: 1px solid var(--frame); background: rgba(8, 9, 12, .55); }
.frame::before, .frame::after { content: ""; position: absolute; width: 0.625rem; height: 0.625rem; border: 1px solid var(--frame-hi); pointer-events: none; transition: width .3s var(--ease), height .3s var(--ease), border-color .3s; }
.frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.frame:hover::before, .frame:hover::after { width: 1.375rem; height: 1.375rem; border-color: #fff; }
.label { font: 700 max(11px, 1.0625rem) var(--body); letter-spacing: .08em; margin: 0 0 0.75rem; color: var(--text); }
.ico-label { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-weight: 500; }
.ico-label svg { width: 1.125rem; height: 1.125rem; }
.hint {
	display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.3125rem 0.875rem 0.3125rem 0.375rem;
	font: 500 max(11px, 1rem) var(--body); letter-spacing: .04em; color: var(--text);
	border: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 11, 15, .6);
	transition: background .15s, border-color .15s, color .15s;
}
.hint kbd {
	min-width: 1.375rem; height: 1.375rem; padding: 0 0.3125rem; display: grid; place-items: center;
	font: 700 max(11px, 0.8125rem) var(--head); color: #000; background: #e9e9e9; border-radius: 1px;
	transition: transform .2s var(--snap), background .15s;
}
.hint:hover { background: rgba(96, 30, 236, .35); border-color: rgba(180, 148, 255, .6); }
.hint:hover kbd { transform: scale(1.12); background: #fff; }
.hint:active kbd { transform: scale(.92); }
.hints { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 0.875rem; }
.pill-new { display: inline-block; padding: 2px 0.4375rem; margin-right: 0.5rem; font: 700 max(11px, 0.75rem) var(--head); background: var(--violet); color: #fff; letter-spacing: .1em; vertical-align: 2px; }
.in { opacity: 0; transform: translateY(0.875rem); }
body.is-ready .in { animation: in .7s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 250ms); }
@keyframes in { to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(1.625rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.topbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem;
	padding: 0.875rem var(--g) 1.125rem;
	background: linear-gradient(rgba(3, 4, 6, .85), rgba(3, 4, 6, 0));
	transition: background .3s, padding .3s var(--ease);
}
.topbar.is-solid { background: rgba(4, 5, 8, .94); padding-top: 0.5rem; padding-bottom: 0.625rem; box-shadow: 0 1px 0 var(--frame); }
.title-block { position: relative; display: flex; align-items: center; gap: 0.875rem; padding-bottom: 0.625rem; }
.back { width: 2rem; height: 2rem; border: 1px solid var(--frame); background: rgba(10, 12, 16, .8); position: relative; transition: border-color .2s, background .2s; }
.back::after { content: ""; position: absolute; left: 0.8125rem; top: 0.6875rem; width: 0.4375rem; height: 0.4375rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.title-block:hover .back { border-color: #fff; background: var(--violet); }
.title-text { display: flex; flex-direction: column; line-height: .95; }
.title-text small { font: 900 max(11px, 0.8125rem) var(--head); letter-spacing: .06em; color: #fff; }
.title-text b { font: 900 max(11px, 2rem) var(--head); letter-spacing: .03em; }
.ticks {
	position: absolute; left: 2.875rem; right: -3.75rem; bottom: 0; height: 0.25rem;
	background:
		repeating-linear-gradient(90deg, rgba(120, 160, 220, .5) 0 2px, transparent 2px 0.25rem) 0 0 / 40% 1px no-repeat,
		repeating-linear-gradient(90deg, rgba(120, 160, 220, .35) 0 1px, transparent 1px 0.1875rem) 60% 0.1875rem / 30% 1px no-repeat;
}
.tabs { position: relative; display: flex; justify-content: center; gap: 0.375rem; align-self: start; padding-top: 0.375rem; }
.tab {
	position: relative; padding: 0.25rem 0.875rem 0; white-space: nowrap;
	display: inline-grid; justify-items: center; /* the badge sits in the tab, so a wide badge widens its tab instead of overlapping the next one */
	font: 500 max(11px, 1.1875rem) var(--body); letter-spacing: .03em; color: var(--nav);
	transition: color .15s;
}
.tab::before { /* spotlight glow above the active / hovered tab, like the lobby */
	content: ""; position: absolute; left: 50%; top: -1.625rem; width: 5.625rem; height: 2.5rem; margin-left: -2.8125rem;
	background: radial-gradient(closest-side, rgba(98, 170, 241, .45), transparent);
	opacity: 0; transform: scaleY(.4); transition: opacity .25s, transform .25s var(--ease);
}
.tab:hover { color: #fff; }
.tab:hover::before { opacity: .5; transform: none; }
.tab.is-active { color: #fff; }
.tab.is-active::before { opacity: 1; transform: none; }
.badge {
	margin-top: 0.625rem;
	padding: 1px 0.625rem 2px; white-space: nowrap;
	font: 700 max(11px, 0.75rem) var(--head); letter-spacing: .1em; color: var(--badge);
	background: linear-gradient(var(--badge-bg), rgba(13, 36, 51, .4));
	clip-path: polygon(0.375rem 0, calc(100% - 0.375rem) 0, 100% 100%, 0 100%);
	transition: color .2s, background .2s;
}
.tab:hover .badge { color: #fff; background: linear-gradient(#1a4a66, rgba(26, 74, 102, .5)); }
.live-badge { color: var(--ok); }
.live-badge::before { content: ""; display: inline-block; width: 0.375rem; height: 0.375rem; margin-right: 0.3125rem; border-radius: 50%; background: var(--ok); animation: blink 1.4s infinite; vertical-align: 1px; }
@keyframes blink { 50% { opacity: .2; } }
.tab-marker {
	position: absolute; left: 0; top: 2.3125rem; height: 0.1875rem; width: 0;
	background: var(--tab-line); box-shadow: 0 0 0.75rem rgba(80, 165, 193, .9);
	transition: transform .38s var(--ease), width .38s var(--ease);
}
/* top bar groups (THE MOD / STATS / COMMUNITY): a tab button that opens a BO7 style dropdown panel. Opens on hover
   (mouse), click / tap and keyboard (Enter / Space / Down, arrows move, Esc closes): core.js */
.tab-group { position: relative; display: flex; }
button.tab { font: 500 max(11px, 1.1875rem) var(--body); letter-spacing: .03em; color: var(--nav); }
.tab-l { display: inline-flex; align-items: center; gap: 0.4375rem; }
.caret { width: 0.4375rem; height: 0.4375rem; margin-top: -0.25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .7; transition: transform .25s var(--ease), margin .25s var(--ease), opacity .2s; }
.tab-group.is-open .caret { transform: rotate(225deg); margin-top: 0.25rem; opacity: 1; }
.tab-group.is-open > .tab { color: #fff; }
.tab-group.is-open > .tab::before { opacity: .5; transform: none; }
.tab-menu {
	position: absolute; top: calc(100% + 0.625rem); left: 50%; z-index: 5; min-width: 21rem; padding: 0.5rem;
	display: grid; gap: 0.125rem;
	background: linear-gradient(180deg, rgba(10, 13, 18, .98), rgba(5, 6, 9, .98)); border: 1px solid var(--frame);
	box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .65); backdrop-filter: blur(8px);
	opacity: 0; visibility: hidden; transform: translate(-50%, -0.5rem);
	transition: opacity .2s, transform .25s var(--ease), visibility .25s;
}
.tab-menu::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--tab-line), transparent); box-shadow: 0 0 0.75rem rgba(80, 165, 193, .8); }
.tab-menu::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 0.875rem; } /* hover bridge from the tab */
.tab-group.is-open .tab-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tab-item {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.125rem 0.75rem;
	padding: 0.625rem 0.875rem; border-left: 2px solid transparent; transition: background .15s, border-color .15s;
}
.tab-item b { font: 700 max(12px, 1rem) var(--head); letter-spacing: .06em; color: #dfe6ec; white-space: nowrap; transition: color .15s; }
.tab-item small { grid-column: 1 / -1; font-size: max(11px, 0.875rem); color: var(--muted); white-space: nowrap; }
.tab-item .badge { margin-top: 0; }
.tab-item:hover, .tab-item:focus-visible { background: rgba(98, 170, 241, .09); border-left-color: var(--tab-line); outline: 0; }
.tab-item:hover b, .tab-item:focus-visible b { color: #fff; }
.tab-item.is-current { background: rgba(98, 170, 241, .06); border-left-color: var(--cyan); }
.tab-item.is-current b { color: var(--cyan); }
.tray { display: flex; align-items: center; gap: 0.75rem; }
.ring { position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; padding: 0.25rem; background: conic-gradient(var(--cyan) 0 calc(var(--p, 0) * 100%), rgba(255, 255, 255, .12) 0); /* --p: level / 55 */ transition: transform .3s var(--snap); }
.ring img { width: 100%; height: 100%; border-radius: 50%; background: #0b0d12; object-fit: contain; }
.ring:hover { transform: scale(1.08) rotate(-6deg); }
.ring .online { position: absolute; right: 1px; bottom: 1px; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--ok); border: 2px solid #000; }
.ring-lvl { font: 700 max(11px, 1.1875rem) var(--head); margin-right: 0.375rem; }
.tray-sep { width: 1px; height: 1.625rem; background: var(--frame); }
.icon-btn { width: 2.625rem; height: 2.625rem; display: grid; place-items: center; color: #c9d1d9; border: 1px solid transparent; transition: color .15s, border-color .15s, background .15s; }
.icon-btn:hover { color: #fff; border-color: var(--frame-hi); background: rgba(255, 255, 255, .05); }
.icon-btn:hover svg { animation: wiggle .4s var(--ease); }
@keyframes wiggle { 30% { transform: rotate(-12deg) scale(1.1); } 70% { transform: rotate(8deg); } }
.menu-toggle { display: none; }
@keyframes kenburns { to { transform: scale(1.1) translate(-2%, -1%); } }
@keyframes fog { to { transform: translate(-8%, 6%) scale(1.15); } }
@keyframes rise { to { transform: none; } }
@keyframes wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes flick { 0%, 100% { opacity: 1; } 91% { opacity: 1; } 92% { opacity: .3; } 93% { opacity: 1; } 95% { opacity: .5; } 96% { opacity: 1; } }
@keyframes pattern { to { background-position: -200% 0, 0 0; } }
@keyframes slide-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes slide-out { to { opacity: 0; transform: translateX(-6%); } }
@keyframes join { from { opacity: 0; transform: translateY(-0.625rem); background: rgba(96, 30, 236, .6); } }
@keyframes hexglow { 50% { filter: drop-shadow(0 0 0.5rem rgba(255, 255, 255, .7)); } }
.section { position: relative; padding: 6.5rem var(--g) 2.5rem; /* top clears the fixed bar: a tab jump lands the section at the top of the screen */ }
.subtabs { position: relative; display: flex; gap: 1.875rem; padding-left: 5.25rem; margin-bottom: 0.875rem; }
.subtab { padding: 0.375rem 2px 0.625rem; font: 500 max(11px, 1.125rem) var(--body); letter-spacing: .04em; color: var(--nav); transition: color .15s; }
.subtab:hover, .subtab.is-active { color: #fff; }
.subtab-line { position: absolute; left: 0; top: 0; height: 0.1875rem; background: var(--tab-line); box-shadow: 0 0 0.625rem rgba(80, 165, 193, .8); transition: transform .35s var(--ease), width .35s var(--ease); }
@keyframes row-in { to { opacity: 1; transform: none; } }
@keyframes reveal-r { from { clip-path: inset(0 0 0 100%); filter: brightness(2.2) saturate(0); } 60% { filter: brightness(1.2); } to { clip-path: inset(0); } }
@keyframes desk { 50% { opacity: .4; } }
@keyframes float { 50% { transform: translateY(-0.5rem); } }
.career-sub { margin: 0.5rem 0 0.875rem; font: 700 max(11px, 0.9375rem) var(--head); letter-spacing: .1em; color: var(--muted); display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.dot { width: 0.25rem; height: 0.25rem; background: var(--gold); display: inline-block; }
.xp { max-width: 35rem; height: 0.375rem; background: rgba(255, 255, 255, .1); }
.xp span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #cfe9ff 0 2px, rgba(207, 233, 255, .4) 2px 0.25rem); box-shadow: 0 0 0.625rem rgba(150, 200, 255, .6); transition: width 1.6s var(--ease) .4s; }
.is-in .xp span { width: calc(var(--p) * 100%); }
.big-btns { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.625rem; margin-top: 1.25rem; }
.big-btn {
	position: relative; height: 3.375rem; display: grid; place-items: center; overflow: hidden;
	font: 900 clamp(max(11px, 1.125rem), 1.9vw, 1.875rem) var(--head); letter-spacing: .02em;
	border: 1px solid #c7ccd2; background: rgba(6, 7, 10, .55);
	transition: border-color .15s, transform .2s var(--ease);
}
.big-btn::before { /* corner nub, top-left, like the career buttons */
	content: ""; position: absolute; left: 2px; top: 2px; width: 0.25rem; height: 0.625rem; background: rgba(255, 255, 255, .25);
}
.big-btn::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: url("../assets/fx_btn_pattern.webp") 0 0 / 250% 100%, linear-gradient(180deg, #7334ff, var(--violet) 45%, #4a12c4);
	background-blend-mode: soft-light; opacity: 0; transition: opacity .15s;
}
.big-btn { isolation: isolate; }
.big-btn:hover::after, .big-btn.is-active::after { opacity: 1; }
.big-btn:hover::after { animation: pattern 5s linear infinite; }
.big-btns:hover .big-btn.is-active:not(:hover)::after { opacity: 0; }
.big-btns:hover .big-btn.is-active:not(:hover) { box-shadow: none; }
.big-btn.is-active { box-shadow: 0 0 2.125rem rgba(96, 30, 236, .55); }
.big-btn:hover { transform: translateY(-2px); }
.big-btn:active { transform: translateY(1px) scale(.99); }
.footer { position: relative; padding: 2.5rem var(--g) 3.75rem; color: var(--muted); font-size: max(11px, 0.9375rem); border-top: 1px solid var(--frame); background: rgba(4, 5, 7, .85); }
.foot-hints { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-bottom: 1.125rem; }
.footer p { margin: 0.25rem 0; }
.concept { font: 700 max(11px, 0.75rem) var(--head); letter-spacing: .16em; color: var(--violet-2); }
.build { position: absolute; right: var(--g); bottom: 1.125rem; font: 500 max(11px, 0.6875rem) var(--body); color: #3b424c; letter-spacing: .06em; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	html { scroll-behavior: auto; }
}
@media (max-width: 1240px) {
	.tab, button.tab { font-size: max(11px, 1.0625rem); padding: 0.25rem 0.5625rem 0; }
}
@media (max-width: 1080px) {
	.topbar { grid-template-columns: auto 1fr; }
	.tabs { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--g) 1.125rem;
		background: rgba(4, 5, 8, .97); border-bottom: 1px solid var(--frame); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .35s var(--ease), visibility .35s; }
	.tabs.is-open { clip-path: inset(0); visibility: visible; }
	.tab { padding: 0.75rem 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #14181e; }
	.tab::before { display: none; }
	.badge { margin-top: 0; }
	.tab.is-active { color: #fff; box-shadow: inset 0.1875rem 0 var(--tab-line); padding-left: 0.75rem; }
	.tab-marker { display: none; }
	.tabs { max-height: calc(100vh - 4.5rem); overflow-y: auto; }
	.tab-group { display: block; }
	.tab-group > .tab { width: 100%; padding: 1rem 0 0.375rem; border-bottom: 0; pointer-events: none; font: 700 max(11px, 0.75rem) var(--head); letter-spacing: .18em; color: #6f7b87; }
	.tab-group > .tab.is-active { box-shadow: none; padding-left: 0; color: var(--tab-line); }
	.tab-group .caret, .tab-group > .tab .badge { display: none; }
	.tab-menu { position: static; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none; opacity: 1; visibility: inherit; transform: none; transition: none; }
	.tab-menu::before, .tab-menu::after { display: none; }
	.tab-item { padding: 0.625rem 0 0.625rem 0.75rem; border-bottom: 1px solid #14181e; }
	.tray { justify-self: end; }
	.menu-toggle { display: grid; }
	.big-btns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
}
@media (max-width: 640px) {
	body { font-size: max(11px, 1.0625rem); }
	.title-text b { font-size: max(11px, 1.625rem); }
	.ticks { right: 0; }
	.ring-lvl, .tray-sep, .tray .icon-btn:not(.menu-toggle) { display: none; }
	.tab-item small { display: none; }
	.section { padding: 5.5rem var(--g) 2.5rem; }
	.subtabs { padding-left: 0; }
	.big-btns { grid-template-columns: 1fr 1fr; }
	.big-btns .big-btn:last-child { grid-column: 1 / -1; }
	.build { position: static; display: block; margin-top: 0.625rem; }
}
:root {
	--amber: #f2b23c; --bad: #e5484d;
	--r-rare: #d1d1d1; --r-epic: #9e61eb; --r-legendary: #ff8c1f; --r-ultra: #f2382e; --r-whimsical: #40d9b8; --r-new: #62d5f1;
	--ticks: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 0.25rem);
	--mono: Consolas, "Courier New", monospace;
}
.skip { position: fixed; left: 0.75rem; top: -3.75rem; z-index: 300; padding: 0.5rem 0.875rem; background: var(--violet); color: #fff; font: 700 max(11px, 0.9375rem) var(--head); transition: top .2s; }
.skip:focus { top: 0.75rem; }
.page-bg .grain { position: absolute; inset: 0; background: url("../assets/fx_grain.webp") 0 0 / 16rem; opacity: .05; mix-blend-mode: overlay; }
.scroll-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; color: var(--tab-line); background: var(--ticks); transform-origin: left; transform: scaleX(var(--sp, 0)); opacity: .9; }
.sec-head { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0.375rem 1.125rem; margin-bottom: 1.625rem; }
.sec-title { font: 900 clamp(max(11px, 2.125rem), 4.4vw, 3.75rem) / .95 var(--head); letter-spacing: .02em; }
.sec-ticks { height: 0.875rem; margin-bottom: 0.5rem; color: rgba(120, 160, 220, .45); background: var(--ticks) 0 0 / 10rem 1px no-repeat, var(--ticks) 2.5rem 0.375rem / 5.625rem 1px no-repeat, var(--ticks) 11.25rem 0.75rem / 2.875rem 1px no-repeat; }
.sec-sub { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: max(11px, 1.0625rem); }
.mini-head { margin: 0 0 0.5rem; font: 700 max(11px, 0.8125rem) var(--head); letter-spacing: .14em; color: var(--muted); }
.name-ticks { display: block; height: 0.4375rem; margin: 0.375rem 0 0.625rem; color: rgba(255, 255, 255, .3); border-top: 1px solid rgba(255, 255, 255, .3); background: var(--ticks) 100% 0.1875rem / 7.5rem 0.1875rem no-repeat; }
@keyframes timer { to { transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
.cls-chip { display: inline-block; padding: 1px 0.5rem 2px; font: 700 max(11px, 0.875rem) var(--head); letter-spacing: .12em; color: #06222c; background: var(--cyan); }
.cls-chip::before { content: "> "; }
html { overflow-x: clip; }
@keyframes gun-in { from { opacity: 0; transform: translateX(2.5rem) scale(.96); } }
.subtab small { margin-left: 0.375rem; font: 700 max(11px, 0.6875rem) var(--head); color: var(--muted); letter-spacing: .08em; }
.toast { position: fixed; left: 50%; bottom: 2.125rem; z-index: 120; display: flex; align-items: stretch; min-width: 17.5rem; background: rgba(10, 11, 15, .96); border: 1px solid var(--frame-hi); box-shadow: 0 0 2.5rem rgba(96, 30, 236, .4); transform: translate(-50%, 1.875rem); opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--snap); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast i { width: 0.375rem; background: url("../assets/fx_btn_pattern.webp") 0 0 / cover, var(--violet); }
.toast div { padding: 0.625rem 1.125rem 0.75rem; }
.toast b { display: block; font: 900 max(11px, 1.25rem) / 1 var(--head); letter-spacing: .04em; }
.toast span { font: 500 max(11px, 0.9375rem) var(--body); color: var(--muted); letter-spacing: .06em; }
@media (max-width: 640px) {
	.sec-head { margin-bottom: 1.125rem; }
	.toast { left: 1rem; right: 1rem; min-width: 0; transform: translateY(1.875rem); }
	.toast.is-on { transform: none; }
}
/* --pm = the space kept for the fixed top bar; a hero that should run under the bar (like HOME's) pulls itself up by it */
.page-main { --pm: 6rem; padding-top: var(--pm); min-height: 80vh; }
.page-crumbs { display: flex; align-items: center; gap: 1.125rem; padding: 1.25rem var(--g) 0; }
.crumb { display: flex; align-items: center; gap: 0.625rem; margin: 0; font: 700 max(11px, 0.8125rem) var(--head); letter-spacing: .14em; color: var(--muted); }
.crumb a:hover { color: var(--cyan); }
.crumb i { width: 0.375rem; height: 0.375rem; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); }
.crumb b { color: #fff; }
.page-main > .section { padding-top: 2.5rem; }
@media (max-width: 640px) {
	.page-main { --pm: 5rem; }
}

/* ---------- site additions (live site) ---------- */
.ring img { object-fit: cover; }
.sign-in { white-space: nowrap; }
.foot-more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1.125rem; margin: 0 0 1rem; font: 700 max(11px, 0.75rem) var(--head); letter-spacing: .12em; }
.foot-more span { color: #59626d; }
.foot-more a { color: var(--nav); transition: color .15s; }
.foot-more a:hover { color: #fff; }
.empty-note { margin: 0; padding: 0.875rem 1rem; color: var(--muted); border: 1px dashed #2f353e; font-size: max(11px, 0.9375rem); }
@media (max-width: 640px) {
	.wide-only { display: none; }
	.tray .sign-in { padding-right: 0.625rem; }
}
/* top bar labels on one line (2026-11-13, user): tabs and group buttons align to the top, the badges (version, FREE,
   LIVE, counts) hang under the tab line instead of taking room in the tab, and only show at the top of the page:
   they fade out once the bar turns solid on scroll. Phones keep the badges inline in the menu list. */
@media (min-width: 1081px) {
	.tabs, .tab-group { align-items: flex-start; }
	.tab, button.tab { align-self: flex-start; }
	.tab > .badge { position: absolute; left: 50%; top: calc(100% + 0.5625rem); margin-top: 0; transform: translateX(-50%); transition: opacity .25s, visibility .25s, color .2s, background .2s; }
	.topbar.is-solid .tab > .badge { opacity: 0; visibility: hidden; }
}