@font-face {
font-family: 'Anybody';
src: url(fonts/anybody.8dfc02ccf3.woff2) format('woff2');
font-weight: 100 900;
font-stretch: 50% 150%;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Instrument Sans';
src: url(fonts/instrument-sans.19f8ec3200.woff2) format('woff2');
font-weight: 400 700;
font-stretch: 75% 100%;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Instrument Serif';
src: url(fonts/instrument-serif-italic.6ee678c33f.woff2) format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Martian Mono';
src: url(fonts/martian-mono.debf915472.woff2) format('woff2');
font-weight: 100 800;
font-stretch: 75% 112.5%;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
color-scheme: dark;
--ink: #100e26;
--ink-2: #1c1940;
--paper: #f4f3ff;
--blue: #3a2bff;
--sun: #ffd23a;
--hot: #ff5a36;
--mint: #4af2c8;
--pitch: #13261c;
--brick: #ff7a2f;
--grass: #9ee34f;
--dusk: #2b1d4f;
--lilac: #b79cff;
--font-display: 'Anybody', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
--font-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
--font-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.88rem);
--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--step-1: clamp(1.15rem, 1.06rem + 0.45vw, 1.42rem);
--step-2: clamp(1.4rem, 1.2rem + 0.95vw, 2rem);
--step-3: clamp(2.2rem, 1.5rem + 3.2vw, 4.4rem);
--step-4: clamp(2.8rem, 1.6rem + 5.6vw, 7rem);
--gutter: clamp(16px, 4vw, 56px);
--maxw: 1440px;
--section-y: clamp(72px, 10vw, 152px);
--radius: clamp(20px, 2.4vw, 36px);
--header-h: 72px;
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.s-blue { --bg: var(--blue); --fg: var(--paper); --muted: #dcd9ff; --accent: var(--sun); --on-accent: var(--ink); --line: rgba(244, 243, 255, 0.3); --focus: var(--sun); }
.s-ink { --bg: var(--ink); --fg: var(--paper); --muted: #bdb9dd; --accent: var(--sun); --on-accent: var(--ink); --line: rgba(244, 243, 255, 0.14); --focus: var(--sun); }
.s-paper { --bg: var(--paper); --fg: var(--ink); --muted: #48446f; --accent: var(--blue); --on-accent: var(--paper); --line: rgba(16, 14, 38, 0.14); --focus: var(--blue); }
.s-sun { --bg: var(--sun); --fg: var(--ink); --muted: #3f350b; --accent: var(--ink); --on-accent: var(--sun); --line: rgba(16, 14, 38, 0.22); --focus: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 16px);
background: var(--ink);
}
html[data-motion='on'] { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ink);
color: var(--paper);
font-family: var(--font-text);
font-size: var(--step-0);
line-height: 1.55;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.page { background: var(--ink); color: var(--paper); font-family: var(--font-text); font-size: var(--step-0); line-height: 1.55; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
kbd {
font-family: var(--font-mono);
font-size: 0.82em;
padding: 0.1em 0.45em;
border: 1px solid var(--line, currentColor);
border-bottom-width: 3px;
border-radius: 6px;
white-space: nowrap;
}
::selection { background: var(--sun); color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus, var(--sun)); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip {
position: fixed;
left: 16px;
top: -120px;
z-index: 100;
padding: 12px 18px;
background: var(--sun);
color: var(--ink);
font-weight: 700;
border-radius: 12px;
text-decoration: none;
}
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); outline-color: var(--ink); }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); background: var(--bg); color: var(--fg); }
.kicker, .eyebrow {
font-family: var(--font-mono);
font-size: var(--step--1);
font-weight: 500;
font-stretch: 100%;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.kicker::before {
content: '';
display: inline-block;
width: 0.62em;
height: 0.62em;
margin-right: 0.7em;
background: var(--accent);
border-radius: 2px;
transform: translateY(-0.05em) rotate(45deg);
}
.display {
font-family: var(--font-display);
font-size: var(--step-3);
font-weight: 860;
font-stretch: 88%;
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.section-head { position: relative; display: grid; gap: 18px; max-width: 52rem; margin-bottom: clamp(40px, 6vw, 88px); }
.section-lead { font-size: var(--step-1); line-height: 1.45; color: var(--muted); max-width: 40ch; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
min-height: 52px;
padding: 0.8em 1.35em;
border: 2px solid currentColor;
border-radius: 999px;
font-family: var(--font-display);
font-size: var(--step-0);
font-weight: 760;
font-stretch: 112%;
line-height: 1.1;
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
background: transparent;
color: var(--fg);
transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background-color 0.2s, color 0.2s;
}
.btn .icon { width: 1.15em; height: 1.15em; flex: none; transition: transform 0.25s var(--ease-spring); }
.btn:hover .icon { transform: translateX(3px); }
.btn-primary {
background: var(--accent);
border-color: var(--accent);
color: var(--on-accent);
--sh: var(--btn-shadow, color-mix(in srgb, var(--accent) 52%, #000));
box-shadow: 0 6px 0 0 var(--sh);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 0 0 var(--sh); }
.btn-primary:active { transform: translateY(5px); box-shadow: 0 1px 0 0 var(--sh); }
.btn-ghost:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.btn-ghost:active { transform: translateY(2px); }
.site-header {
position: sticky;
top: env(safe-area-inset-top, 0px);
z-index: 50;
display: flex;
align-items: center;
gap: 16px 24px;
min-height: var(--header-h);
padding: 12px var(--gutter);
background: var(--blue);
color: var(--paper);
--fg: var(--paper);
--accent: var(--sun);
--on-accent: var(--ink);
--line: rgba(244, 243, 255, 0.3);
--focus: var(--sun);
transition: background-color 0.35s, box-shadow 0.35s;
}
.site-header.is-scrolled {
background: color-mix(in srgb, var(--ink) 90%, transparent);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
box-shadow: 0 1px 0 rgba(244, 243, 255, 0.1);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.logo-mark { width: 36px; height: 36px; transition: transform 0.4s var(--ease-spring); }
.brand:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }
.wm { display: inline-flex; align-items: baseline; gap: 0.18em; font-size: 1.3rem; line-height: 1; }
.wm-a { font-family: var(--font-display); font-weight: 820; font-stretch: 118%; letter-spacing: -0.02em; }
.wm-b { font-family: var(--font-serif); font-style: italic; font-size: 1.12em; color: var(--sun); }
.nav { margin-left: auto; }
.nav-list { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; }
.nav-list a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 14px;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.2s;
}
.nav-list a:hover { background: rgba(244, 243, 255, 0.12); }
.nav-toggle { display: none; }
.header-tools { display: flex; align-items: center; gap: 8px; }
.lang {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 44px;
min-height: 44px;
padding: 0 12px;
border: 2px solid rgba(244, 243, 255, 0.35);
border-radius: 999px;
background: transparent;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
transition: border-color 0.2s, background-color 0.2s;
}
.lang:hover { border-color: var(--paper); background: rgba(244, 243, 255, 0.08); }
.motion-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 0;
border: 0;
background: none;
color: var(--muted);
font-size: 0.92rem;
cursor: pointer;
}
.motion-toggle:hover { color: var(--paper); text-decoration: underline; }
.motion-toggle .icon { width: 14px; height: 14px; }
.motion-toggle .i-play { display: none; }
.motion-toggle[aria-pressed='false'] .i-pause { display: none; }
.motion-toggle[aria-pressed='false'] .i-play { display: block; }
@media (max-width: 960px) {
.js .nav-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 0 16px;
border: 2px solid rgba(244, 243, 255, 0.35);
border-radius: 999px;
background: transparent;
font-weight: 700;
cursor: pointer;
}
.nav-burger, .nav-burger::before, .nav-burger::after {
display: block;
width: 16px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.nav-burger { position: relative; }
.nav-burger::before, .nav-burger::after { content: ''; position: absolute; left: 0; }
.nav-burger::before { top: -5px; }
.nav-burger::after { top: 5px; }
[aria-expanded='true'] .nav-burger { background: transparent; }
[aria-expanded='true'] .nav-burger::before { transform: translateY(5px) rotate(45deg); }
[aria-expanded='true'] .nav-burger::after { transform: translateY(-5px) rotate(-45deg); }
.site-header { flex-wrap: wrap; }
.nav { order: 3; }
.header-tools { margin-left: auto; }
.js .nav-list {
position: absolute;
left: 0;
right: 0;
top: 100%;
display: grid;
gap: 2px;
padding: 12px var(--gutter) 24px;
background: var(--ink);
box-shadow: 0 24px 40px -12px rgba(0, 0, 0, 0.5);
visibility: hidden;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.25s, transform 0.25s var(--ease-out), visibility 0s 0.25s;
}
.js .nav-list.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 0.25s, transform 0.25s var(--ease-out); }
.js .nav-list a { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; font-stretch: 110%; text-transform: uppercase; min-height: 56px; }
.no-js .nav-list, html:not(.js) .nav-list { width: 100%; }
}
@media (max-width: 560px) {
.js .nav-toggle { padding: 0; width: 44px; justify-content: center; }
.js .nav-toggle [data-nav-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.header-tools { gap: 6px; }
}
@media (max-width: 420px) {
.wm { font-size: 1.05rem; }
.logo-mark { width: 30px; height: 30px; }
.site-header { gap: 8px; }
.lang { min-width: 40px; min-height: 40px; }
.js .nav-toggle { width: 40px; min-height: 40px; }
}
.hero { position: relative; overflow: clip; padding-block: clamp(28px, 5vw, 72px) clamp(64px, 8vw, 120px); background: var(--bg); color: var(--fg); }
.hero::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(244, 243, 255, 0.16) 1.4px, transparent 1.6px);
background-size: 28px 28px;
-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
pointer-events: none;
}
.hero-wrap { position: relative; display: grid; gap: clamp(20px, 3vw, 36px); }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.eyebrow { color: var(--muted); }
.hud { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.hud li {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px 6px 6px;
border-radius: 999px;
background: rgba(16, 14, 38, 0.38);
box-shadow: inset 0 -3px 0 rgba(16, 14, 38, 0.4);
font-size: 0.85rem;
}
.hud-label { color: var(--muted); }
.hud-num { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.hud-icon { width: 24px; height: 24px; border-radius: 50%; background: rgba(244, 243, 255, 0.12); display: grid; place-items: center; }
.hud-icon::before { content: ''; width: 14px; height: 14px; }
.hud-star::before { background: #3ddc84; clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 60%, 81% 100%, 50% 77%, 19% 100%, 29% 60%, 0 38%, 37% 35%); }
.hud-coin::before { border-radius: 50%; background: var(--sun); box-shadow: inset 0 0 0 3px #d9a400; }
.hud-block::before { border-radius: 3px; background: var(--hot); box-shadow: inset 0 -4px 0 #c43a1c; }
.hero-title { font-family: var(--font-display); text-transform: uppercase; line-height: 0.8; display: grid; }
.ht-small {
font-size: clamp(1.9rem, 0.6rem + 6.4vw, 7.4rem);
font-weight: 280;
font-stretch: 150%;
letter-spacing: -0.01em;
line-height: 0.9;
}
.ht-mega {
display: block;
font-size: min(26vw, 21rem);
font-weight: 880;
font-stretch: 90%;
letter-spacing: -0.03em;
line-height: 0.84;
white-space: nowrap;
margin-left: -0.04em;
}
.ht-serif {
justify-self: start;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
text-transform: none;
font-size: clamp(2.3rem, 0.9rem + 6.6vw, 8rem);
line-height: 1;
letter-spacing: -0.01em;
color: var(--sun);
transform: rotate(-3deg) translateY(-0.12em);
transform-origin: left center;
padding-right: 0.15em;
}
.glyph-field .g {
--w: 880;
--x: 90;
display: inline-block;
font-variation-settings: 'wght' var(--w), 'wdth' var(--x);
transform-origin: 50% 100%;
transition: font-variation-settings 0.45s var(--ease-out), color 0.3s;
cursor: default;
-webkit-user-select: none;
user-select: none;
}
.glyph-field .g:last-child { color: var(--sun); }
.js .glyph-field .g { cursor: pointer; }
.glyph-field .g.is-near { color: var(--sun); }
.glyph-field .g.is-jumping { animation: g-jump 0.75s var(--ease-out); }
html[data-motion='on'] .glyph-field .g:not(.is-jumping) { animation: g-bob 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.27s); }
html[data-motion='on'] .hero.is-intro .ht-mega .g { animation: g-drop 0.9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes g-bob {
0%, 100% { transform: translateY(0) scale(1, 1); }
50% { transform: translateY(-3%) scale(0.99, 1.02); }
}
@keyframes g-jump {
0% { transform: translateY(0) scale(1, 1); }
12% { transform: translateY(0) scale(1.18, 0.78); }
40% { transform: translateY(-34%) scale(0.86, 1.16); }
62% { transform: translateY(0) scale(1.14, 0.84); }
78% { transform: translateY(-5%) scale(0.97, 1.03); }
100% { transform: translateY(0) scale(1, 1); }
}
@keyframes g-drop {
0% { transform: translateY(-60%) scale(0.9, 1.15); }
55% { transform: translateY(0) scale(1.15, 0.8); }
75% { transform: translateY(-6%) scale(0.96, 1.05); }
100% { transform: translateY(0) scale(1, 1); }
}
.g:nth-child(1) { --i: 0; } .g:nth-child(2) { --i: 1; } .g:nth-child(3) { --i: 2; } .g:nth-child(4) { --i: 3; }
.g:nth-child(5) { --i: 4; } .g:nth-child(6) { --i: 5; } .g:nth-child(7) { --i: 6; } .g:nth-child(8) { --i: 7; }
.g:nth-child(9) { --i: 8; } .g:nth-child(10) { --i: 9; } .g:nth-child(11) { --i: 10; } .g:nth-child(12) { --i: 11; }
.g:nth-child(13) { --i: 12; }
.g-space { width: 0.26em; }
.spark {
position: fixed;
z-index: 60;
width: 10px;
height: 10px;
border-radius: 2px;
pointer-events: none;
}
.hero-bottom {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: 'lead actions' 'hint actions';
align-items: end;
gap: 16px 40px;
margin-top: clamp(4px, 1.5vw, 20px);
}
.hero-lead { grid-area: lead; font-size: var(--step-1); line-height: 1.45; max-width: 38ch; }
.hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-hint { grid-area: hint; font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); }
.hero-hint::before { content: '↑ '; color: var(--sun); }
.hint-touch { display: none; }
@media (hover: none) {
.hint-pointer { display: none; }
.hint-touch { display: inline; }
}
html:not(.js) .hero-hint { display: none; }
@media (max-width: 760px) {
.hero-bottom { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'lead' 'actions' 'hint'; }
}
.hero-props { position: absolute; inset: 0; pointer-events: none; }
.prop {
--px: 0px;
--py: 0px;
position: absolute;
display: block;
translate: var(--px) var(--py);
transition: translate 0.6s var(--ease-out);
}
html[data-motion='on'] .prop { animation: float 7s ease-in-out infinite; }
.prop-coin { width: clamp(44px, 6vw, 92px); aspect-ratio: 1; border-radius: 50%; background: var(--sun); box-shadow: inset 0 0 0 clamp(6px, 0.8vw, 12px) #e0a900, inset 0 -6px 0 rgba(0, 0, 0, 0.12); right: 5%; top: 27%; }
.prop-coin.prop-sm { width: clamp(26px, 3vw, 48px); right: 21%; top: 66%; animation-delay: -2.5s; }
.prop-star { width: clamp(56px, 7vw, 110px); aspect-ratio: 1; background: #3ddc84; clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 60%, 81% 100%, 50% 77%, 19% 100%, 29% 60%, 0 38%, 37% 35%); right: 7%; top: 50%; animation-delay: -1.2s; }
.prop-block { width: clamp(40px, 5vw, 80px); aspect-ratio: 1; border-radius: 12px; background: var(--hot); box-shadow: inset 0 -10px 0 #c43a1c; right: 2.5%; top: 72%; rotate: 12deg; animation-delay: -4s; }
.prop-bolt { width: clamp(30px, 3.6vw, 56px); aspect-ratio: 0.62; background: var(--mint); clip-path: polygon(40% 0, 100% 0, 62% 40%, 100% 40%, 18% 100%, 38% 54%, 0 54%); right: 31%; top: 72%; animation-delay: -3.3s; }
.prop-plus { width: clamp(24px, 2.6vw, 40px); aspect-ratio: 1; background: var(--paper); clip-path: polygon(38% 0, 62% 0, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0 62%, 0 38%, 38% 38%); right: 40%; top: 64%; opacity: 0.7; animation-delay: -5.1s; }
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-14px) rotate(6deg); }
}
@media (max-width: 760px) {
.prop-star { top: 31%; right: 4%; width: 52px; }
.prop-coin, .prop-plus, .prop-block { display: none; }
.prop-bolt { top: 80%; right: 8%; }
}
.tapes {
position: relative;
height: clamp(120px, 15vw, 210px);
background: linear-gradient(var(--blue) 50%, var(--ink) 50%);
overflow: clip;
}
.tape {
position: absolute;
left: -5%;
width: 110%;
top: 50%;
padding-block: 0.45em;
font-family: var(--font-display);
font-size: clamp(1.25rem, 0.8rem + 2.2vw, 2.8rem);
font-weight: 900;
font-stretch: 125%;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45);
}
.tape-sun { background: var(--sun); color: var(--ink); transform: translateY(-80%) rotate(-3.5deg); z-index: 1; }
.tape-hot { background: var(--hot); color: var(--ink); transform: translateY(-15%) rotate(2.5deg); }
.tape-track { display: flex; width: max-content; }
html[data-motion='on'] .tape-track { animation: tape 36s linear infinite; }
html[data-motion='on'] .tape-hot .tape-track { animation-duration: 44s; animation-direction: reverse; }
.tape-word { display: inline-flex; align-items: center; }
.tape-word::after {
content: '';
width: 0.55em;
height: 0.55em;
margin-inline: 0.6em;
background: currentColor;
clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 60%, 81% 100%, 50% 77%, 19% 100%, 29% 60%, 0 38%, 37% 35%);
}
@keyframes tape { to { transform: translateX(-50%); } }
.catalog .section-head { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.catalog .section-head > :not(.big-count) { grid-column: 1; }
.big-count {
grid-column: 2;
grid-row: 1 / span 3;
align-self: end;
font-family: var(--font-display);
font-size: clamp(6rem, 2rem + 16vw, 20rem);
font-weight: 900;
font-stretch: 60%;
line-height: 0.72;
color: transparent;
-webkit-text-stroke: 2px rgba(244, 243, 255, 0.5);
letter-spacing: -0.04em;
}
@media (max-width: 700px) { .big-count { display: none; } }
.games { list-style: none; display: grid; gap: clamp(20px, 3vw, 40px); }
.game-card {
--g-bg: var(--ink-2);
--g-fg: var(--paper);
--g-muted: #c9c5e6;
--g-accent: var(--sun);
--g-line: rgba(244, 243, 255, 0.16);
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
align-items: center;
gap: clamp(28px, 4vw, 72px);
padding: clamp(24px, 4.4vw, 72px);
border-radius: var(--radius);
background: var(--g-bg);
color: var(--g-fg);
overflow: clip;
isolation: isolate;
}
.game-empire .game-card { --g-bg: var(--pitch); --g-muted: #bcd5c5; --g-accent: var(--brick); --btn-shadow: #a33f0c; }
.game-rana .game-card { --g-bg: var(--grass); --g-fg: var(--ink); --g-muted: #24411a; --g-accent: var(--ink); --g-line: rgba(16, 14, 38, 0.2); --btn-shadow: #4c8a1f; }
.game-bonerush .game-card { --g-bg: var(--dusk); --g-muted: #d0c6f2; --g-accent: var(--mint); --btn-shadow: #1d9c7d; }
.game-next .game-card { --g-bg: transparent; border: 2px dashed rgba(244, 243, 255, 0.28); }
.game-card .btn { --fg: var(--g-fg); --accent: var(--g-accent); --on-accent: var(--g-bg); --focus: var(--g-accent); }
.game-rana .game-card .btn { --on-accent: var(--grass); }
.game-card :focus-visible { outline-color: var(--g-accent); }
.game-text { display: grid; gap: 22px; justify-items: start; min-width: 0; container-type: inline-size; }
.game-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--g-muted);
}
.serial { color: var(--g-fg); font-weight: 700; }
.status { display: inline-flex; align-items: center; gap: 8px; }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.status-preview::before { background: var(--g-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g-accent) 30%, transparent); }
html[data-motion='on'] .status-preview::before { animation: blink 1.6s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.game-title { display: grid; gap: 6px; font-family: var(--font-display); text-transform: uppercase; line-height: 0.82; }
.gt {
display: block;
white-space: nowrap;
font-size: min(9.5rem, calc(100cqi / var(--len, 6) * 1.5));
font-weight: 900;
font-stretch: 92%;
letter-spacing: -0.03em;
color: var(--g-accent);
}
.gt .g { display: inline-block; transform-origin: 50% 100%; }
.gt-sub { font-family: var(--font-serif); font-style: italic; text-transform: none; font-size: var(--step-2); font-weight: 400; line-height: 1; color: var(--g-fg); }
.game-pitch { font-size: var(--step-1); line-height: 1.45; max-width: 44ch; }
.game-facts { display: grid; gap: 0; width: 100%; margin: 0; border-top: 1px solid var(--g-line); }
.game-facts div { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--g-line); }
.game-facts dt { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--g-muted); padding-top: 0.2em; }
.game-facts dd { margin: 0; font-weight: 600; }
@media (max-width: 520px) { .game-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.game-media { position: relative; min-width: 0; }
.game-media.has-phone { padding: 0 9% 9% 0; }
.shot {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: clamp(12px, 1.4vw, 20px);
box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
background: rgba(0, 0, 0, 0.2);
}
.phone {
position: absolute;
right: 0;
bottom: 0;
width: 27%;
aspect-ratio: 420 / 909;
object-fit: cover;
border: clamp(4px, 0.5vw, 7px) solid #0b0a1a;
border-radius: clamp(18px, 2.2vw, 30px);
box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.6);
rotate: 5deg;
background: #0b0a1a;
transition: rotate 0.6s var(--ease-spring), translate 0.6s var(--ease-spring);
}
.game-card:hover .phone { rotate: 0deg; translate: 0 -8px; }
@media (max-width: 900px) {
.game-card { grid-template-columns: minmax(0, 1fr); }
.game-media { order: -1; }
}
.game-empire .gt { --len: 6; }
.game-rana .gt { --len: 4.6; }
.game-bonerush .gt { --len: 8.4; }
.game-next .gt { --len: 3.4; }
.game-empire .gt .g { transition: transform 0.5s var(--ease-spring); }
.game-empire .game-card:hover .gt .g:nth-child(1) { transform: scaleY(1.06); }
.game-empire .game-card:hover .gt .g:nth-child(2) { transform: scaleY(1.14); }
.game-empire .game-card:hover .gt .g:nth-child(3) { transform: scaleY(1.1); }
.game-empire .game-card:hover .gt .g:nth-child(4) { transform: scaleY(1.24); }
.game-empire .game-card:hover .gt .g:nth-child(5) { transform: scaleY(1.32); }
.game-empire .game-card:hover .gt .g:nth-child(6) { transform: scaleY(1.44); }
html[data-motion='on'] .game-empire.pre .gt .g { transform: scaleY(0.06); }
html[data-motion='on'] .game-empire.in .gt .g { animation: rise 1s steps(5, end) backwards; animation-delay: calc(var(--i) * 110ms); }
@keyframes rise { from { transform: scaleY(0.06); } to { transform: scaleY(1); } }
.game-rana .gt { position: relative; padding-bottom: 0.08em; }
.game-rana .gt::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -0.04em;
height: 0.05em;
background: repeating-linear-gradient(90deg, var(--ink) 0 0.3em, transparent 0.3em 0.55em);
opacity: 0.5;
}
html[data-motion='on'] .game-rana.on-screen .gt .g { animation: hop 2.6s var(--ease-out) infinite; animation-delay: calc(var(--i) * 160ms); }
html[data-motion='on'] .game-rana.on-screen .gt::after { animation: lanes 1.2s linear infinite; }
@keyframes hop {
0%, 46%, 100% { transform: translateY(0) scale(1, 1); }
6% { transform: translateY(0) scale(1.14, 0.84); }
18% { transform: translateY(-30%) scale(0.9, 1.12); }
30% { transform: translateY(0) scale(1.12, 0.88); }
38% { transform: translateY(0) scale(0.98, 1.02); }
}
@keyframes lanes { to { background-position: -0.55em 0; } }
.game-bonerush .gt { transform: skewX(-10deg); transform-origin: 0 100%; text-shadow: -0.05em 0 0 rgba(74, 242, 200, 0.35), -0.1em 0 0 rgba(74, 242, 200, 0.16); }
.game-bonerush .game-card::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background: repeating-linear-gradient(100deg, transparent 0 46px, rgba(183, 156, 255, 0.07) 46px 48px);
-webkit-mask-image: linear-gradient(to right, #000, transparent 70%);
mask-image: linear-gradient(to right, #000, transparent 70%);
}
html[data-motion='on'] .game-bonerush.on-screen .gt .g { animation: run 0.38s ease-in-out infinite alternate; }
html[data-motion='on'] .game-bonerush.on-screen .gt .g:nth-child(even) { animation-delay: -0.19s; }
html[data-motion='on'] .game-bonerush.on-screen .game-card::before { animation: rain 0.9s linear infinite; }
@keyframes run { from { transform: translateY(-5%) rotate(-2deg); } to { transform: translateY(4%) rotate(2deg); } }
@keyframes rain { to { background-position: -96px 0; } }
.game-next .gt { color: transparent; -webkit-text-stroke: 2px rgba(244, 243, 255, 0.7); font-stretch: 70%; }
.next-media {
display: grid;
place-items: center;
aspect-ratio: 4 / 3;
border-radius: clamp(12px, 1.4vw, 20px);
background: repeating-linear-gradient(-45deg, rgba(244, 243, 255, 0.05) 0 14px, transparent 14px 28px);
}
.next-no { font-family: var(--font-display); font-size: clamp(6rem, 3rem + 12vw, 16rem); font-weight: 900; font-stretch: 60%; line-height: 1; color: var(--sun); }
html[data-motion='on'] .game-next.on-screen .next-no { animation: wobble 2.4s var(--ease-out) infinite; }
@keyframes wobble { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-6deg) scale(1.04); } 88% { transform: rotate(4deg); } }
.rules-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px) clamp(24px, 3vw, 48px); }
.rule { display: grid; align-content: start; gap: 12px; padding-top: 22px; border-top: 2px solid var(--fg); container-type: inline-size; }
.rule h3 { font-size: var(--step-2); font-weight: 700; font-stretch: 90%; line-height: 1.1; letter-spacing: -0.01em; }
.rule p:not(.rule-word) { color: var(--muted); max-width: 40ch; }
.rule-word {
--c: var(--blue);
font-family: var(--font-display);
font-size: min(5.2rem, 14cqi);
font-weight: 900;
font-stretch: 118%;
line-height: 0.95;
letter-spacing: -0.02em;
text-transform: uppercase;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 2px var(--ink);
background: linear-gradient(90deg, var(--c) 50%, transparent 50%) 100% 0 / 200% 100% no-repeat;
-webkit-background-clip: text;
background-clip: text;
transition: background-position 0.9s var(--ease-out);
padding-bottom: 0.06em;
}
.rule-1 .rule-word { --c: var(--blue); }
.rule-2 .rule-word { --c: var(--hot); }
.rule-3 .rule-word { --c: var(--sun); }
.rule-4 .rule-word { --c: #3ddc84; }
.rule-5 .rule-word { --c: var(--lilac); }
.rule-6 .rule-word { --c: var(--mint); }
.rule.in .rule-word, .rule:hover .rule-word { background-position: 0 0; }
html[data-motion='off'] .rule .rule-word, html:not(.js) .rule .rule-word { background-position: 0 0; }
@media (max-width: 1000px) { .rules-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rules-grid { grid-template-columns: minmax(0, 1fr); } }
.level-map { --p: 0; position: relative; }
.level-track { --gap: clamp(16px, 2.4vw, 36px); list-style: none; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.level-track::before {
content: '';
position: absolute;
left: 36px;
right: calc((100% - 4 * var(--gap)) / 5 - 36px);
top: 34px;
border-top: 4px dashed var(--ink);
opacity: 0.35;
}
.level { position: relative; display: grid; align-content: start; gap: 10px; }
.level-node {
position: relative;
display: grid;
place-items: center;
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--ink);
color: var(--sun);
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.95rem;
box-shadow: 0 6px 0 rgba(16, 14, 38, 0.35);
transition: background-color 0.4s, color 0.4s, transform 0.5s var(--ease-spring);
}
.level.is-reached .level-node { background: var(--blue); color: var(--paper); transform: translateY(-4px) scale(1.06); }
.level-next .level-node { background: transparent; color: var(--ink); border: 3px dashed var(--ink); box-shadow: none; }
.level-code { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.level h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 860; font-stretch: 100%; text-transform: uppercase; line-height: 1; }
.level p:last-child { color: var(--muted); font-size: 0.98rem; }
.level-runner {
position: absolute;
z-index: 2;
top: -34px;
left: 36px;
translate: -50% 0;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 12px;
background: var(--hot);
color: var(--ink);
font-family: var(--font-display);
font-weight: 900;
font-size: 1.4rem;
box-shadow: 0 5px 0 #c43a1c;
transition: left 0.2s linear, top 0.2s linear;
}
.level-map.is-vertical .level-runner { translate: -50% -50%; }
html[data-motion='on'] .level-runner span { animation: g-bob 0.6s ease-in-out infinite; }
html:not(.js) .level-runner { display: none; }
@media (max-width: 900px) {
.level-track { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 96px; }
.level-track::before { left: 34px; right: auto; top: 36px; bottom: 36px; border-top: 0; border-left: 4px dashed var(--ink); }
.level-node { position: absolute; left: -96px; top: 0; }
.level-code { margin-top: 0; }
}
.scores-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.scores .section-head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 32px); }
.board {
padding: clamp(18px, 3vw, 40px);
border-radius: var(--radius);
background: #07061a;
box-shadow: inset 0 0 0 2px rgba(244, 243, 255, 0.08), 0 0 80px -20px rgba(58, 43, 255, 0.55);
font-family: var(--font-mono);
overflow-x: auto;
}
.board table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board th, .board td { padding: 14px 10px; text-align: left; vertical-align: baseline; border-bottom: 1px dashed rgba(244, 243, 255, 0.12); }
.board thead th { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; border-bottom-style: solid; }
.board tbody th { font-family: var(--font-text); font-weight: 600; font-size: var(--step-0); line-height: 1.3; }
.board .num { text-align: right; }
.board .pos { width: 3.6em; font-weight: 700; }
.board .tag { width: 4.2em; font-weight: 700; letter-spacing: 0.08em; }
.board td.num { font-family: var(--font-display); font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); font-weight: 900; font-stretch: 80%; line-height: 1; white-space: nowrap; }
.board .pad { opacity: 0.25; }
.board .inf { font-family: var(--font-text); font-weight: 700; }
.board tbody tr { color: var(--row); }
.board tbody th { color: var(--paper); }
.row-1 { --row: var(--sun); } .row-2 { --row: var(--mint); } .row-3 { --row: var(--hot); }
.row-4 { --row: var(--lilac); } .row-5 { --row: #3ddc84; } .row-6 { --row: var(--sun); } .row-7 { --row: var(--paper); }
.board-coin { margin-top: 22px; text-align: center; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sun); }
html[data-motion='on'] .board-coin { animation: blink 1.2s steps(2, jump-none) infinite; }
@media (max-width: 900px) {
.scores-wrap { grid-template-columns: minmax(0, 1fr); }
.scores .section-head { position: static; }
}
@media (max-width: 520px) {
.board .tag { display: none; }
.board td.num { font-size: 1.6rem; }
.board th, .board td { padding: 12px 6px; }
}
.arcade-wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.arcade .section-head { margin-bottom: 0; }
.cabinet { display: grid; gap: 14px; min-width: 0; }
.cabinet-hud {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 0 6px;
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.cabinet-hud b { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 6px; }
.cabinet-screen {
position: relative;
aspect-ratio: 12 / 5;
border-radius: var(--radius);
background: var(--ink);
box-shadow: 0 0 0 8px var(--ink), 0 0 0 10px rgba(16, 14, 38, 0.2), 0 40px 70px -30px rgba(16, 14, 38, 0.7);
overflow: hidden;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.cabinet-screen:focus-visible { outline: 3px solid var(--blue); outline-offset: 12px; }
.cabinet-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cabinet-overlay {
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
gap: 10px;
padding: 16px;
text-align: center;
color: var(--paper);
background: radial-gradient(closest-side, rgba(16, 14, 38, 0.82), rgba(16, 14, 38, 0.55));
--fg: var(--paper);
--accent: var(--sun);
--on-accent: var(--ink);
--focus: var(--sun);
}
.cabinet-overlay[hidden] { display: none; }
.overlay-title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 900; font-stretch: 110%; line-height: 0.9; text-transform: uppercase; color: var(--sun); }
.overlay-sub { font-family: var(--font-mono); font-size: var(--step--1); color: #d6d3f5; }
.cabinet-help { font-size: 0.95rem; color: var(--muted); }
.cabinet-help kbd { --line: rgba(16, 14, 38, 0.3); color: var(--ink); }
@media (max-width: 900px) {
.arcade-wrap { grid-template-columns: minmax(0, 1fr); }
.cabinet-screen { aspect-ratio: 4 / 3; }
}
.business { overflow: clip; }
.biz-word {
position: absolute;
right: -0.06em;
bottom: -0.2em;
font-family: var(--font-display);
font-size: clamp(8rem, 4rem + 22vw, 26rem);
font-weight: 900;
font-stretch: 130%;
line-height: 0.8;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 2px rgba(244, 243, 255, 0.12);
pointer-events: none;
white-space: nowrap;
}
.biz-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.business .section-head { margin-bottom: 0; }
.business .section-head .btn { margin-top: 8px; }
.biz-list { list-style: none; display: grid; gap: 16px; }
.biz-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 6px 18px;
padding: clamp(20px, 2.4vw, 32px);
border-radius: var(--radius);
background: var(--ink-2);
box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
transition: transform 0.4s var(--ease-spring), background-color 0.3s;
}
.biz-item:hover { transform: translateX(-6px) rotate(-0.6deg); background: #241f52; }
.biz-item .hud-icon { grid-row: span 2; width: 48px; height: 48px; }
.biz-item .hud-icon::before { width: 24px; height: 24px; }
.biz-item h3 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 860; font-stretch: 105%; text-transform: uppercase; line-height: 1; color: var(--sun); }
.biz-item p { color: var(--muted); }
@media (max-width: 900px) { .biz-wrap { grid-template-columns: minmax(0, 1fr); } }
.business + .faq .faq-wrap { border-top: 0; }
.faq { padding-top: 0; }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); padding-top: var(--section-y); border-top: 2px solid var(--ink); }
.faq .section-head { margin-bottom: 0; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
.faq-list { display: grid; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 64px;
padding-block: 18px;
cursor: pointer;
list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: var(--step-1); font-weight: 700; line-height: 1.25; }
.qa summary:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.qa-icon { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); transition: transform 0.35s var(--ease-spring), background-color 0.2s; }
.qa-icon::before, .qa-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; background: var(--paper); border-radius: 2px; }
.qa-icon::after { transform: rotate(90deg); transition: transform 0.3s var(--ease-out); }
.qa[open] .qa-icon { background: var(--blue); transform: rotate(180deg); }
.qa[open] .qa-icon::after { transform: rotate(0deg); }
.qa-a { padding-bottom: 24px; max-width: 62ch; color: var(--muted); }
@media (max-width: 900px) {
.faq-wrap { grid-template-columns: minmax(0, 1fr); }
.faq .section-head { position: static; }
}
.contact { overflow: clip; }
.contact .wrap { display: grid; gap: 24px; }
.contact-title { font-family: var(--font-display); text-transform: uppercase; line-height: 0.82; }
.contact-mega { display: block; font-size: min(15.5vw, 13.5rem); font-weight: 880; font-stretch: 90%; letter-spacing: -0.03em; white-space: nowrap; }
.mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 12px; }
.mail {
font-family: var(--font-display);
font-size: clamp(1.3rem, 0.7rem + 3vw, 3.2rem);
font-weight: 760;
font-stretch: 105%;
text-decoration: underline;
text-decoration-color: var(--sun);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.16em;
overflow-wrap: anywhere;
}
.mail:hover { color: var(--sun); }
.copy-msg { font-family: var(--font-mono); font-size: var(--step--1); color: var(--sun); min-height: 1.5em; flex-basis: 100%; }
.site-footer { position: relative; background: var(--ink); color: var(--paper); padding-top: clamp(56px, 7vw, 96px); overflow: clip; --muted: #bdb9dd; --fg: var(--paper); --focus: var(--sun); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px 24px; }
.footer-brand { display: grid; gap: 16px; align-content: start; }
.footer-brand p { color: var(--muted); max-width: 34ch; }
.footer-h { font-family: var(--font-mono); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.site-footer ul { list-style: none; display: grid; gap: 4px; }
.site-footer ul a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; text-decoration: none; font-weight: 600; }
.site-footer ul a:hover { color: var(--sun); text-decoration: underline; }
.site-footer ul .icon { width: 16px; height: 16px; }
.footer-mark {
margin-top: clamp(40px, 6vw, 80px);
padding-inline: var(--gutter);
font-family: var(--font-display);
font-size: 11.6vw;
font-weight: 900;
font-stretch: 100%;
line-height: 0.78;
letter-spacing: -0.04em;
white-space: nowrap;
text-align: center;
color: var(--blue);
}
.footer-mark .fm { display: inline-block; transition: transform 0.4s var(--ease-spring), color 0.3s; }
.footer-mark .fm:hover { transform: translateY(-12%) scaleY(1.1); color: var(--sun); }
@supports (animation-timeline: view()) {
html[data-motion='on'] .footer-mark { animation: stretch linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
@keyframes stretch { from { font-stretch: 50%; letter-spacing: 0.02em; } to { font-stretch: 100%; letter-spacing: -0.04em; } }
}
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 24px 32px; color: var(--muted); font-size: 0.92rem; }
.to-top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--paper); }
.to-top .icon { width: 18px; height: 18px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 340px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.toast {
position: fixed;
left: 50%;
bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
z-index: 70;
max-width: calc(100vw - 32px);
padding: 14px 22px;
border-radius: 999px;
background: var(--sun);
color: var(--ink);
font-family: var(--font-display);
font-weight: 800;
font-stretch: 110%;
text-transform: uppercase;
box-shadow: 0 6px 0 #c49a00, 0 20px 40px -10px rgba(0, 0, 0, 0.5);
translate: -50% 160%;
visibility: hidden;
transition: translate 0.45s var(--ease-spring), visibility 0s 0.45s;
pointer-events: none;
}
.toast.is-on { translate: -50% 0; visibility: visible; transition: translate 0.45s var(--ease-spring); }
.doc { background: var(--paper); color: var(--ink); padding-block: clamp(48px, 8vw, 120px); }
.doc-wrap { display: grid; gap: 22px; max-width: 52rem; }
.doc-updated { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); }
.doc-body { display: grid; gap: 28px; margin-block: 12px 20px; }
.doc-body h2 { font-size: var(--step-2); font-weight: 700; margin-bottom: 8px; }
.doc-body p { max-width: 65ch; }
.nf { min-height: 100vh; display: grid; align-items: center; padding-block: 48px; background: var(--blue); color: var(--paper); }
.nf-wrap { display: grid; gap: 20px; justify-items: start; }
.nf-code { font-family: var(--font-display); font-size: min(40vw, 22rem); font-weight: 900; font-stretch: 80%; line-height: 0.8; letter-spacing: -0.04em; }
.nf-en { font-style: normal; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (prefers-reduced-motion: reduce) {
html:not([data-motion='on']) *, html:not([data-motion='on']) *::before, html:not([data-motion='on']) *::after {
animation: none !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
html[data-motion='off'] *, html[data-motion='off'] *::before, html[data-motion='off'] *::after {
animation: none !important;
transition-duration: 0.01ms !important;
}
@media (forced-colors: active) {
.rule-word, .game-next .gt, .big-count { color: CanvasText; -webkit-text-stroke: 0; background: none; }
.btn { border: 2px solid ButtonText; }
}
@media print {
.site-header, .tapes, .hero-props, .arcade, .toast, .footer-mark { display: none !important; }
.section, .hero { background: #fff !important; color: #000 !important; }
}