/* Claude Animation Skills — design tokens ("motion studio").
   Global → alias → component. Components use alias/component tokens only. */

@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-600.woff') format('woff'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url('/assets/fonts/inter-display-700.woff') format('woff'); font-weight: 600 700; font-display: swap; }

:root {
  /* global: graphite neutrals */
  --g-0: #FFFFFF; --g-25: #F7F7F4; --g-50: #F1F1EC; --g-100: #E6E6E0; --g-200: #D3D4CE; --g-300: #B4B6B3;
  --g-400: #8C9099; --g-500: #6A6F79; --g-600: #4E535C; --g-700: #31353D; --g-800: #1E2128; --g-850: #181A20;
  --g-900: #121419; --g-950: #0C0D10;
  /* global: keyframe lime */
  --lime-300: #E4FA8E; --lime-400: #D2F34C; --lime-500: #BEE02F; --lime-700: #5A7600; --lime-800: #435800;
  /* global: semantic hues */
  --red-400: #FF7A6B; --red-600: #C2382A; --amber-400: #FFC857; --amber-700: #8A5A00; --green-400: #56D69A; --green-700: #12754A; --blue-400: #7FB2FF; --blue-700: #2457B3;

  /* type */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
  --font-display: 'Inter Display', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --fs-caption: 12px; --fs-small: 13px; --fs-body: 14px; --fs-lead: 16px; --fs-h3: 19px; --fs-h2: 24px; --fs-h1: 30px; --fs-hero: 38px;
  --lh-tight: 1.15; --lh-head: 1.25; --lh-body: 1.5;

  /* space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;
  /* radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 999px;
  /* motion */
  --t-micro: 100ms; --t-short: 180ms; --t-mid: 300ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-io: cubic-bezier(.6, 0, .2, 1);
  /* layers */
  --z-sheet: 40; --z-toast: 60; --z-modal: 50;
}

/* alias: dark is the default look of the studio */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--g-950);
  --surface-1: var(--g-900);
  --surface-2: var(--g-850);
  --surface-3: var(--g-800);
  --surface-inverse: var(--g-25);
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);
  --text: #ECEDEF;
  --text-muted: #A3A8B2;
  --text-faint: #7D828D;
  --text-inverse: var(--g-950);
  --accent: var(--lime-400);
  --accent-hover: var(--lime-300);
  --accent-ink: var(--g-950);
  --accent-text: var(--lime-400);
  --accent-soft: rgba(210, 243, 76, .12);
  --focus: var(--lime-400);
  --scrim: rgba(5, 6, 8, .66);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, .55);
  --ok-fg: var(--green-400); --ok-bg: rgba(86, 214, 154, .12);
  --warn-fg: var(--amber-400); --warn-bg: rgba(255, 200, 87, .12);
  --err-fg: var(--red-400); --err-bg: rgba(255, 122, 107, .12);
  --info-fg: var(--blue-400); --info-bg: rgba(127, 178, 255, .12);
  --code-bg: #08090B;
  --code-text: #E8F7B8;
  --grid-line: rgba(255, 255, 255, .05);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--g-25);
  --surface-1: var(--g-0);
  --surface-2: var(--g-50);
  --surface-3: var(--g-100);
  --surface-inverse: var(--g-950);
  --border: rgba(12, 13, 16, .09);
  --border-strong: rgba(12, 13, 16, .18);
  --text: var(--g-950);
  --text-muted: var(--g-600);
  --text-faint: #6B707A;
  --text-inverse: var(--g-25);
  --accent: var(--lime-400);
  --accent-hover: var(--lime-500);
  --accent-ink: var(--g-950);
  --accent-text: var(--lime-700);
  --accent-soft: rgba(90, 118, 0, .10);
  --focus: var(--lime-800);
  --scrim: rgba(12, 13, 16, .42);
  --shadow-1: 0 1px 2px rgba(12, 13, 16, .06);
  --shadow-2: 0 8px 24px rgba(12, 13, 16, .10);
  --shadow-3: 0 24px 64px rgba(12, 13, 16, .18);
  --ok-fg: var(--green-700); --ok-bg: rgba(18, 117, 74, .10);
  --warn-fg: var(--amber-700); --warn-bg: rgba(138, 90, 0, .10);
  --err-fg: var(--red-600); --err-bg: rgba(194, 56, 42, .08);
  --info-fg: var(--blue-700); --info-bg: rgba(36, 87, 179, .08);
  --code-bg: var(--g-950);
  --code-text: #E8F7B8;
  --grid-line: rgba(12, 13, 16, .05);
}
/* No explicit choice: follow the browser/OS theme from the very first frame. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  color-scheme: light;
  --bg: var(--g-25);
  --surface-1: var(--g-0);
  --surface-2: var(--g-50);
  --surface-3: var(--g-100);
  --surface-inverse: var(--g-950);
  --border: rgba(12, 13, 16, .09);
  --border-strong: rgba(12, 13, 16, .18);
  --text: var(--g-950);
  --text-muted: var(--g-600);
  --text-faint: #6B707A;
  --text-inverse: var(--g-25);
  --accent: var(--lime-400);
  --accent-hover: var(--lime-500);
  --accent-ink: var(--g-950);
  --accent-text: var(--lime-700);
  --accent-soft: rgba(90, 118, 0, .10);
  --focus: var(--lime-800);
  --scrim: rgba(12, 13, 16, .42);
  --shadow-1: 0 1px 2px rgba(12, 13, 16, .06);
  --shadow-2: 0 8px 24px rgba(12, 13, 16, .10);
  --shadow-3: 0 24px 64px rgba(12, 13, 16, .18);
  --ok-fg: var(--green-700); --ok-bg: rgba(18, 117, 74, .10);
  --warn-fg: var(--amber-700); --warn-bg: rgba(138, 90, 0, .10);
  --err-fg: var(--red-600); --err-bg: rgba(194, 56, 42, .08);
  --info-fg: var(--blue-700); --info-bg: rgba(36, 87, 179, .08);
  --code-bg: var(--g-950);
  --code-text: #E8F7B8;
  --grid-line: rgba(12, 13, 16, .05);
}
}


/* component tokens */
:root {
  --btn-primary-bg: var(--accent);
  --btn-primary-bg-hover: var(--accent-hover);
  --btn-primary-fg: var(--accent-ink);
  --btn-h: 40px; --btn-h-lg: 48px; --btn-h-sm: 32px;
  --card-bg: var(--surface-1);
  --chip-bg: var(--surface-2);
  --chip-bg-on: var(--text);
  --chip-fg-on: var(--bg);
  --input-bg: var(--surface-1);
}

/* Animated preview illustrations ("motifs"). Each one hints at what a skill renders.
   They are drawn in code (SVG + CSS), sized by their container, and pause off-screen. */

.motif { position: relative; overflow: hidden; container-type: inline-size; isolation: isolate; width: 100%; height: 100%; }
.motif svg.m-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.motif.paused *, .motif.paused *::before, .motif.paused *::after { animation-play-state: paused !important; }
.motif .ov { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.m-loop { --dur: 4.8s; }

/* safe-area frame overlay used in detail view */
.safe::after { content: ''; position: absolute; inset: 8% 6% 18% 6%; border: 1px dashed rgba(255,255,255,.28); border-radius: 4px; pointer-events: none; z-index: 3; }

/* ── graph ───────────────────────────────────────────── */
.m-graph { background: #0B0B0C; }
.m-graph .curve { fill: none; stroke: #F4F4F0; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw var(--dur) var(--ease-io) infinite; }
.m-graph .base { stroke: rgba(255,255,255,.14); stroke-width: .6; }
.m-graph .tip { fill: #D2F34C; opacity: 0; animation: tip var(--dur) linear infinite; }
@property --n { syntax: '<integer>'; inherits: false; initial-value: 0; }
.m-graph .num { top: 10%; color: #F4F4F0; font: 700 17cqw/1 var(--font-display); letter-spacing: -.03em; }
.m-graph .num span { --n: 0; counter-reset: n var(--n); animation: count var(--dur) var(--ease-io) infinite; }
.m-graph .num span::before { content: counter(n); }
.m-graph .num span::after { content: 'K'; }
.m-graph .lbl { top: calc(10% + 20cqw); color: rgba(244,244,240,.6); font: 500 6cqw/1.2 var(--font-ui); }
@keyframes draw { 0% { stroke-dashoffset: 100; } 62%, 100% { stroke-dashoffset: 0; } }
@keyframes count { 0% { --n: 0; } 62%, 100% { --n: 100; } }
@keyframes tip { 0%, 58% { opacity: 0; } 64%, 100% { opacity: 1; } }

/* ── route ───────────────────────────────────────────── */
.m-route { background: #E9EDF1; perspective: 120cqw; }
.m-route .city { position: absolute; inset: -10% -20% 8% -20%; transform: rotateX(48deg) rotateZ(-18deg) scale(1.08); transform-origin: 50% 60%; animation: cam var(--dur) var(--ease-io) infinite; }
.m-route .city svg { width: 100%; height: 100%; }
.m-route .blk { fill: #FFFFFF; stroke: #D6DCE3; stroke-width: .4; }
.m-route .park { fill: #BFE3B4; }
.m-route .river { fill: none; stroke: #A9D2F2; stroke-width: 7; stroke-linecap: round; }
.m-route .road { fill: none; stroke: #F6F8FA; stroke-width: 3.2; }
.m-route .path { fill: none; stroke: #FF5A3C; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw var(--dur) var(--ease-io) infinite; }
.m-route .start { fill: #FF5A3C; }
.m-route .pin { transform-box: fill-box; transform-origin: 50% 100%; animation: pin var(--dur) var(--ease-out) infinite; }
.m-route .eta { bottom: 7%; left: 10%; right: 10%; display: flex; align-items: center; justify-content: space-between; padding: 3.5cqw 5cqw; border-radius: 4cqw; background: #fff; box-shadow: 0 2cqw 6cqw rgba(30,40,60,.18); color: #11141A; font: 600 6.5cqw/1 var(--font-ui); }
.m-route .eta b { font: 700 7.5cqw/1 var(--font-display); }
.m-route .eta .a { position: absolute; left: 5cqw; color: #12754A; opacity: 0; animation: arrive var(--dur) linear infinite; }
.m-route .eta .t { animation: eta var(--dur) linear infinite; }
@keyframes cam { 0% { transform: rotateX(48deg) rotateZ(-18deg) scale(1.18); } 70%, 100% { transform: rotateX(42deg) rotateZ(-10deg) scale(1); } }
@keyframes pin { 0%, 58% { transform: translateY(-40%); opacity: 0; } 66% { transform: translateY(6%); opacity: 1; } 72%, 94% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes arrive { 0%, 64% { opacity: 0; } 68%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eta { 0%, 64% { opacity: 1; } 68%, 100% { opacity: 0; } }

/* ── stick figure ────────────────────────────────────── */
.m-stick { background: linear-gradient(#FFE27A, #FFD24A 70%, #F7B733 70.2%); }
.m-stick .ink { fill: none; stroke: #1B1B1F; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-stick .sun { fill: #FFF6C8; }
.m-stick .walker { animation: walk var(--dur) linear infinite; }
.m-stick .leg-a, .m-stick .arm-b { transform-box: view-box; transform-origin: 45px 103px; animation: swing .6s ease-in-out infinite alternate; }
.m-stick .leg-b, .m-stick .arm-a { transform-box: view-box; transform-origin: 45px 103px; animation: swing .6s ease-in-out infinite alternate-reverse; }
.m-stick .arm-a, .m-stick .arm-b { transform-origin: 45px 86px; }
.m-stick .cap { bottom: 9%; display: flex; justify-content: center; }
.m-stick .cap span { position: absolute; padding: 2cqw 4cqw; border-radius: 2cqw; background: #1B1B1F; color: #FFE27A; font: 800 9cqw/1 var(--font-display); letter-spacing: -.02em; opacity: 0; animation: word var(--dur) linear infinite; }
.m-stick .cap span:nth-child(2) { animation-delay: calc(var(--dur) / -1.5); }
.m-stick .cap span:nth-child(3) { animation-delay: calc(var(--dur) / -3); }
@keyframes walk { from { transform: translateX(-22px); } to { transform: translateX(22px); } }
@keyframes swing { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes word { 0%, 2% { opacity: 0; transform: scale(.8); } 5%, 30% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }

/* ── minimal line art ────────────────────────────────── */
.m-line { background: #000; }
.m-line .steps { fill: none; stroke: #fff; stroke-width: .9; stroke-dasharray: 100; stroke-dashoffset: 100; animation: steps var(--dur) var(--ease-out) infinite; }
.m-line .dot { fill: #fff; animation: hop var(--dur) var(--ease-io) infinite; }
.m-line .orbit { fill: none; stroke: #fff; stroke-width: .7; stroke-dasharray: 100; stroke-dashoffset: 100; transform-box: fill-box; transform-origin: center; animation: orbit var(--dur) linear infinite; }
.m-line .txt { top: 14%; color: #fff; font: 400 7cqw/1.35 var(--font-ui); letter-spacing: .01em; }
.m-line .txt .l2 { display: block; opacity: 0; animation: line2 var(--dur) linear infinite; color: rgba(255,255,255,.7); }
@keyframes steps { 0% { stroke-dashoffset: 100; } 25%, 100% { stroke-dashoffset: 0; } }
@keyframes hop {
  0%, 24% { transform: translate(0, 0); opacity: 0; }
  26% { transform: translate(0, 0); opacity: 1; }
  32% { transform: translate(7px, -10px); } 36% { transform: translate(15px, -15px); }
  42% { transform: translate(22px, -25px); } 46% { transform: translate(30px, -30px); }
  52% { transform: translate(37px, -40px); } 56% { transform: translate(45px, -45px); }
  62% { transform: translate(52px, -55px); } 66%, 96% { transform: translate(60px, -60px); opacity: 1; }
  100% { transform: translate(60px, -60px); opacity: 0; }
}
@keyframes orbit { 0%, 66% { stroke-dashoffset: 100; opacity: 1; } 82%, 96% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
@keyframes line2 { 0%, 70% { opacity: 0; } 78%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* ── exploded view ───────────────────────────────────── */
.m-explode { background: radial-gradient(120% 80% at 50% 35%, #2A2D35, #101115 70%); perspective: 160cqw; }
.m-explode .stack { position: absolute; left: 50%; top: 46%; width: 34cqw; height: 66cqw; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-38deg); }
.m-explode .layer { position: absolute; inset: 0; border-radius: 6cqw; transform-style: preserve-3d; animation: lift var(--dur) var(--ease-io) infinite; }
.m-explode .l1 { --z: 0; background: #3A3D45; border: 1px solid #5B5F6A; }
.m-explode .l2 { --z: 1; background: linear-gradient(140deg, #2F7D3B, #1E5A29); inset: 4% 6%; border-radius: 4cqw; }
.m-explode .l3 { --z: 2; background: linear-gradient(160deg, #23252B, #3B3F48); inset: 18% 14% 30%; border-radius: 3cqw; }
.m-explode .l4 { --z: 3; background: linear-gradient(150deg, #C9CDD4, #8F96A1); }
.m-explode .l5 { --z: 4; background: linear-gradient(160deg, #10131A, #273352 60%, #D2F34C 140%); inset: 3%; border-radius: 5cqw; }
.m-explode .l6 { --z: 5; background: linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.5); }
.m-explode .tags { position: absolute; right: 6%; top: 18%; display: grid; gap: 3cqw; text-align: right; }
.m-explode .tags span { color: #E9EBEF; font: 600 5.6cqw/1 var(--font-ui); opacity: 0; animation: tag var(--dur) linear infinite; }
.m-explode .tags span::before { content: ''; display: inline-block; width: 8cqw; height: 1px; background: rgba(255,255,255,.5); vertical-align: middle; margin-right: 2cqw; }
.m-explode .tags span:nth-child(2) { animation-delay: .15s; } .m-explode .tags span:nth-child(3) { animation-delay: .3s; } .m-explode .tags span:nth-child(4) { animation-delay: .45s; }
@keyframes lift { 0%, 12% { transform: translateZ(calc(var(--z) * 1.2cqw)); } 50%, 86% { transform: translateZ(calc(var(--z) * 11cqw)); } 100% { transform: translateZ(calc(var(--z) * 1.2cqw)); } }
@keyframes tag { 0%, 46% { opacity: 0; } 54%, 84% { opacity: 1; } 92%, 100% { opacity: 0; } }
@container (max-width: 150px) { .m-explode .tags { display: none; } }

/* ── 3D cartoon explainer ────────────────────────────── */
.m-toon { background: linear-gradient(#5EB6FF, #BFE4FF 62%, #7CCB72 62.2%, #5FAF57); }
.m-toon .q { top: 9%; color: #fff; font: 800 11cqw/1 var(--font-display); letter-spacing: -.02em; text-shadow: 0 .8cqw 0 #1C3E66, 0 0 2cqw rgba(0,0,0,.25); }
.m-toon .ball { transform-box: fill-box; transform-origin: 50% 100%; animation: bounce 1.2s cubic-bezier(.3,0,.5,1) infinite; }
.m-toon .spark { stroke: #FFF4A8; stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; opacity: 0; animation: spark 1.2s ease-out infinite; }
.m-toon .eye { fill: #121214; }
.m-toon .shadow { fill: rgba(20,60,20,.28); transform-box: fill-box; transform-origin: center; animation: shadow 1.2s cubic-bezier(.3,0,.5,1) infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(-34px) scale(.96, 1.04); } 46% { transform: translateY(0) scale(1, 1); } 52% { transform: translateY(0) scale(1.18, .82); } 60% { transform: translateY(-6px) scale(.98, 1.02); } }
@keyframes shadow { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes spark { 0%, 48% { opacity: 0; transform: scale(.4); } 54% { opacity: 1; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.3); } }

/* ── kinetic type ────────────────────────────────────── */
.m-type { background: #0E0F12; display: grid; place-items: center; }
.m-type .words { position: relative; width: 100%; height: 30cqw; }
.m-type .words span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 16cqw/1 var(--font-display); letter-spacing: -.04em; color: #F2F2EE; opacity: 0; animation: kin var(--dur) var(--ease-io) infinite; }
.m-type .words span:nth-child(2) { animation-delay: calc(var(--dur) / -1.5); color: #D2F34C; }
.m-type .words span:nth-child(3) { animation-delay: calc(var(--dur) / -3); }
@keyframes kin { 0% { opacity: 0; transform: translateY(40%) skewY(6deg); } 6%, 28% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-40%); } }

/* ── bars ────────────────────────────────────────────── */
.m-bars { background: #F4F3EE; }
.m-bars .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: grow var(--dur) var(--ease-out) infinite; }
.m-bars .bar:nth-child(2) { animation-delay: .12s; } .m-bars .bar:nth-child(3) { animation-delay: .24s; } .m-bars .bar:nth-child(4) { animation-delay: .36s; } .m-bars .bar:nth-child(5) { animation-delay: .48s; }
.m-bars .ttl { top: 10%; color: #121317; font: 800 9cqw/1.05 var(--font-display); letter-spacing: -.02em; }
@keyframes grow { 0% { transform: scaleY(0); } 40%, 90% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ── ui (micro-interactions) ─────────────────────────── */
.m-ui { background: #EDECE6; display: grid; place-items: center; }
.m-ui .ui-card { width: 74%; padding: 6cqw; border-radius: 6cqw; background: #fff; box-shadow: 0 3cqw 10cqw rgba(20,20,30,.12); display: grid; gap: 5cqw; animation: mx-lift var(--dur) var(--ease-io) infinite; }
.m-ui .ui-row { display: flex; align-items: center; gap: 4cqw; }
.m-ui .ui-av { width: 11cqw; height: 11cqw; border-radius: 50%; background: #121317; }
.m-ui .ui-lines { flex: 1; display: grid; gap: 2cqw; }
.m-ui .ui-lines i { height: 2.4cqw; border-radius: 2cqw; background: #DADAD4; }
.m-ui .ui-lines i + i { width: 60%; }
.m-ui .ui-lbl { flex: 1; height: 2.4cqw; border-radius: 2cqw; background: #DADAD4; margin-right: 10cqw; }
.m-ui .ui-tg { width: 15cqw; height: 8.5cqw; border-radius: 9cqw; background: #CFCFC8; position: relative; animation: mx-track var(--dur) var(--ease-io) infinite; }
.m-ui .ui-tg span { position: absolute; top: 1cqw; left: 1cqw; width: 6.5cqw; height: 6.5cqw; border-radius: 50%; background: #fff; box-shadow: 0 .5cqw 1.5cqw rgba(0,0,0,.2); animation: mx-knob var(--dur) var(--ease-io) infinite; }
.m-ui .ui-btn { height: 11cqw; border-radius: 3cqw; background: #121317; display: grid; place-items: center; animation: mx-press var(--dur) var(--ease-io) infinite; }
.m-ui .ui-ok { color: #D2F34C; font: 700 6cqw/1 var(--font-ui); opacity: 0; animation: mx-ok var(--dur) var(--ease-io) infinite; }
@keyframes mx-lift { 0%, 100% { transform: translateY(2cqw); } 50% { transform: none; } }
@keyframes mx-track { 0%, 30% { background: #CFCFC8; } 40%, 92% { background: #D2F34C; } 100% { background: #CFCFC8; } }
@keyframes mx-knob { 0%, 30% { transform: none; } 40%, 92% { transform: translateX(6.5cqw); } 100% { transform: none; } }
@keyframes mx-press { 0%, 58% { transform: none; } 62% { transform: scale(.94); } 68%, 100% { transform: none; } }
@keyframes mx-ok { 0%, 62% { opacity: 0; transform: scale(.4); } 70%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ── cube (3D) ───────────────────────────────────────── */
.m-cube { background: radial-gradient(120% 80% at 50% 30%, #23262E, #0D0E11); perspective: 160cqw; }
.m-cube .cube-wrap { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.m-cube .cube { --s: 34cqw; position: absolute; transform-style: preserve-3d; animation: mx-spin calc(var(--dur) * 1.4) linear infinite; }
.m-cube .face { position: absolute; left: calc(var(--s) / -2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); border: 1px solid rgba(210,243,76,.9); background: linear-gradient(135deg, rgba(210,243,76,.18), rgba(210,243,76,.04)); }
.m-cube .f { transform: translateZ(calc(var(--s) / 2)); } .m-cube .b { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.m-cube .l { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); } .m-cube .r { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.m-cube .t { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); background: rgba(210,243,76,.32); } .m-cube .d { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.m-cube .cube-floor { position: absolute; left: 25%; right: 25%; top: 70%; height: 6cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(210,243,76,.35), transparent); animation: mx-floor calc(var(--dur) / 2) var(--ease-io) infinite alternate; }
@keyframes mx-spin { from { transform: rotateX(-24deg) rotateY(0); } to { transform: rotateX(-24deg) rotateY(360deg); } }
@keyframes mx-floor { from { transform: scaleX(.8); opacity: .6; } to { transform: scaleX(1.05); opacity: 1; } }

/* ── particles (generative) ──────────────────────────── */
.m-particles { background: #0A0A0F; }
.m-particles .flow { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 18 82; animation: mx-flow calc(var(--dur) * .8) linear infinite; }
.m-particles .c0 { stroke: #D2F34C; } .m-particles .c1 { stroke: #7FD4FF; } .m-particles .c2 { stroke: #FF7AC6; }
@keyframes mx-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ── sprite (pixel art) ──────────────────────────────── */
.m-sprite { background: repeating-conic-gradient(#2A2440 0 25%, #241F38 0 50%) 0 0 / 10cqw 10cqw; }
.m-sprite .hero { fill: #FFD84A; }
.m-sprite .hero .fr { animation: mx-frame .5s steps(1) infinite; }
.m-sprite .hero .b { animation-delay: -.25s; }
.m-sprite .spark { fill: #D2F34C; animation: mx-blink 1s steps(2) infinite; }
.m-sprite .ground { fill: #4C3F7A; }
.m-sprite .frames { bottom: 9%; display: flex; justify-content: center; gap: 2cqw; }
.m-sprite .frames span { width: 9cqw; height: 9cqw; border-radius: 1.5cqw; border: 1px solid rgba(255,255,255,.25); animation: mx-sel 2s steps(1) infinite; }
.m-sprite .frames span:nth-child(2) { animation-delay: -1.5s; } .m-sprite .frames span:nth-child(3) { animation-delay: -1s; } .m-sprite .frames span:nth-child(4) { animation-delay: -.5s; }
@keyframes mx-frame { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes mx-blink { 0% { opacity: 1; } 50% { opacity: .2; } }
@keyframes mx-sel { 0% { background: #FFD84A; border-color: #FFD84A; } 25%, 100% { background: transparent; border-color: rgba(255,255,255,.25); } }

/* ── curve (easing / principles) ─────────────────────── */
.m-curve { background: #111214; }
.m-curve .axis { fill: none; stroke: rgba(255,255,255,.18); stroke-width: .6; }
.m-curve .handle { stroke: rgba(255,255,255,.35); stroke-width: .6; stroke-dasharray: 1.5 1.5; }
.m-curve .knob { fill: #111214; stroke: #fff; stroke-width: .8; }
.m-curve .ease { fill: none; stroke: #D2F34C; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 100; animation: draw var(--dur) var(--ease-io) infinite; }
.m-curve .head { stroke: rgba(255,90,60,.8); stroke-width: .7; animation: mx-head var(--dur) linear infinite; }
.m-curve .track { bottom: 16%; left: 15%; right: 13%; height: 2px; background: rgba(255,255,255,.14); border-radius: 2px; }
.m-curve .ball { position: absolute; top: -2.6cqw; left: 0; width: 6cqw; height: 6cqw; margin-left: -3cqw; border-radius: 50%; background: #D2F34C; animation: mx-ball var(--dur) cubic-bezier(.65,0,.35,1) infinite; }
.m-curve .fn { top: 12%; color: rgba(255,255,255,.55); font: 500 4.6cqw/1 var(--font-mono); }
@keyframes mx-head { 0% { transform: translateX(0); } 62%, 100% { transform: translateX(64px); } }
@keyframes mx-ball { 0% { left: 0; } 62%, 100% { left: 100%; } }

/* ── board (hand-drawn whiteboard) ───────────────────── */
.m-board { background: #FBF8F1; }
.m-board .ink { fill: none; stroke: #1E1E24; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: mx-ink var(--dur) var(--ease-io) infinite; }
.m-board .s2 { animation-name: mx-ink2; } .m-board .s3 { animation-name: mx-ink3; } .m-board .s4 { animation-name: mx-ink4; }
.m-board .hl { stroke: #F5B700; stroke-width: 3; opacity: .8; }
.m-board .hand { top: 26%; display: grid; gap: 33cqw; color: #1E1E24; font: 700 7cqw/1 var(--font-display); font-style: italic; }
.m-board .hand span { opacity: 0; animation: mx-hand1 var(--dur) linear infinite; } .m-board .hand span + span { animation-name: mx-hand2; }
@keyframes mx-ink { 0% { stroke-dashoffset: 100; } 22%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes mx-ink2 { 0%, 24% { stroke-dashoffset: 100; } 40%, 94% { stroke-dashoffset: 0; } 100% { opacity: 0; } }
@keyframes mx-ink3 { 0%, 42% { stroke-dashoffset: 100; } 64%, 94% { stroke-dashoffset: 0; } 100% { opacity: 0; } }
@keyframes mx-ink4 { 0%, 66% { stroke-dashoffset: 100; } 78%, 94% { stroke-dashoffset: 0; } 100% { opacity: 0; } }
@keyframes mx-hand1 { 0%, 18% { opacity: 0; } 24%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mx-hand2 { 0%, 62% { opacity: 0; } 68%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* ── film (video timeline) ───────────────────────────── */
.m-film { background: #0F1013; }
.m-film .strip { position: absolute; top: 26%; left: 0; display: flex; gap: 3cqw; padding: 3cqw; background: #1B1C21; animation: mx-strip calc(var(--dur) * .9) linear infinite; }
.m-film .strip .fr { width: 30cqw; height: 46cqw; border-radius: 2cqw; flex-shrink: 0; }
.m-film .c0 { background: linear-gradient(160deg, #D2F34C, #6E8F12); } .m-film .c1 { background: linear-gradient(160deg, #7FD4FF, #2D6F9E); }
.m-film .c2 { background: linear-gradient(160deg, #FF9A6B, #B8371A); } .m-film .c3 { background: linear-gradient(160deg, #C9B8FF, #5A46B0); }
.m-film .tl { position: absolute; left: 8%; right: 8%; bottom: 18%; height: 8cqw; border-radius: 2cqw; background: #1B1C21; }
.m-film .kf { position: absolute; top: 50%; width: 3cqw; height: 3cqw; margin: -1.5cqw; background: #D2F34C; transform: rotate(45deg); }
.m-film .ph { position: absolute; top: -3cqw; bottom: -3cqw; width: 2px; background: #FF5A3C; animation: mx-ph var(--dur) linear infinite; }
@keyframes mx-strip { from { transform: translateX(0); } to { transform: translateX(-132cqw); } }
@keyframes mx-ph { from { left: 0; } to { left: 100%; } }

/* ── logo (shape morph + wordmark) ───────────────────── */
.m-logo { background: #F4F4F0; }
.m-logo .lg-shape { position: absolute; left: 50%; top: 36%; width: 30cqw; height: 30cqw; margin: -15cqw; background: #121317; animation: mx-morph var(--dur) var(--ease-io) infinite; }
.m-logo .lg-word { position: absolute; left: 0; right: 0; top: 58%; display: flex; justify-content: center; gap: .6cqw; font: 800 10cqw/1 var(--font-display); letter-spacing: -.02em; color: #121317; overflow: hidden; }
.m-logo .lg-word span { display: inline-block; transform: translateY(110%); animation: mx-letter var(--dur) var(--ease-out) infinite; animation-delay: calc(var(--i) * 60ms); }
@keyframes mx-morph { 0% { border-radius: 50%; transform: scale(.6) rotate(0); background: #121317; } 35% { border-radius: 22%; transform: scale(1) rotate(90deg); background: #121317; } 60%, 90% { border-radius: 30% 30% 30% 4%; transform: scale(1) rotate(45deg); background: #D2F34C; } 100% { border-radius: 50%; transform: scale(.6) rotate(0); } }
@keyframes mx-letter { 0%, 40% { transform: translateY(110%); } 52%, 90% { transform: none; } 100% { transform: translateY(-110%); } }

/* ── code (video in code) ────────────────────────────── */
.m-code { background: #0E1015; }
.m-code .ed { position: absolute; top: 12%; left: 9%; right: 9%; padding: 5cqw; border-radius: 3cqw; background: #171A21; display: grid; gap: 3.2cqw; }
.m-code .ln { height: 3cqw; width: var(--w); border-radius: 2cqw; background: #3A3F4B; transform-origin: left; transform: scaleX(0); animation: mx-type var(--dur) var(--ease-out) infinite; animation-delay: calc(var(--i) * 150ms); }
.m-code .ln.k { background: #C9B8FF; } .m-code .ln.s { background: #D2F34C; }
.m-code .out { position: absolute; left: 22%; right: 22%; bottom: 12%; aspect-ratio: 9 / 12; border-radius: 3cqw; background: linear-gradient(160deg, #D2F34C, #5C7A0E); display: grid; place-items: center; transform: scale(.6); opacity: 0; animation: mx-out var(--dur) var(--ease-io) infinite; }
.m-code .play { width: 0; height: 0; border-left: 8cqw solid #0E1015; border-top: 5cqw solid transparent; border-bottom: 5cqw solid transparent; margin-left: 2cqw; }
@keyframes mx-type { 0% { transform: scaleX(0); } 30%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes mx-out { 0%, 45% { transform: scale(.6) translateY(6cqw); opacity: 0; } 58%, 92% { transform: none; opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .m-cube .cube, .m-film .strip, .m-particles .flow { animation-duration: calc(var(--dur) * 4); }
}

/* ── Site ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--font-ui); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.025em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(36px, 5.4vw, 60px); font-weight: 700; }
h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; margin-bottom: 14px; }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 14px; }
code { font: 500 .88em/1.4 var(--font-mono); color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 10; padding: 8px 12px; background: var(--accent); color: var(--accent-ink); border-radius: 8px; }
.skip:focus { left: 8px; }
.wrap { width: min(1140px, 100%); margin: 0 auto; padding: 0 20px; }
.narrow { width: min(780px, 100%); }
.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.kicker { font: 600 12px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
.lead { font-size: 18px; color: var(--text-muted); max-width: 560px; margin: 20px 0 28px; }
.sub { color: var(--text-muted); max-width: 640px; margin-bottom: 32px; }
h1 + .sub, h2 + .sub { margin-top: 16px; }
.fine { font-size: 13px; color: var(--text-faint); margin-top: 16px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 12px; font: 600 15px/1 var(--font-ui); text-decoration: none; border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 10px; }

/* header */
.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.top-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 17px/1 var(--font-display); letter-spacing: -.02em; }
.brand img { border-radius: 7px; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--text-muted); font-size: 15px; font-weight: 500; }
.nav a:hover, .nav a[aria-current] { color: var(--text); }

/* hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background:
  radial-gradient(60% 60% at 80% 30%, rgba(210, 243, 76, .10), transparent 70%),
  linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px,
  linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 48px 48px; }
.hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 88px 20px 96px; }
.hero-art { position: relative; height: 480px; }
.frame { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--shadow-3); background: #000; }
.hero-art .frame { position: absolute; width: 46%; }
.hero-art .f1 { left: 0; top: 40px; transform: rotate(-6deg); }
.hero-art .f2 { left: 27%; top: 0; z-index: 2; }
.hero-art .f3 { right: 0; top: 56px; transform: rotate(6deg); }

/* stats strip */
.strip { border-bottom: 1px solid var(--border); }
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip-in div { padding: 26px 0; text-align: center; border-right: 1px solid var(--border); }
.strip-in div:last-child { border-right: 0; }
.strip strong { display: block; font: 700 34px/1 var(--font-display); letter-spacing: -.03em; color: var(--accent-text); }
.strip span { font-size: 14px; color: var(--text-muted); }

/* sections */
.sec { padding: 96px 0; }
.sec.alt { background: var(--surface-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split p { color: var(--text-muted); }

.steps { list-style: none; padding: 0; margin: 32px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps li { padding: 24px; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--border); }
.steps .n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 14px/1 var(--font-ui); margin-bottom: 16px; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--text-muted); margin: 0; font-size: 15px; }
.term { border-radius: 14px; background: var(--code-bg); border: 1px solid var(--border); overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text-faint); font: 500 12px/1 var(--font-mono); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.term-bar span { margin-left: 8px; }
.term pre { margin: 0; padding: 18px; font: 500 14px/1.7 var(--font-mono); color: var(--code-text); white-space: pre-wrap; }
.term .p { color: var(--accent-text); } .term .d { color: var(--text-faint); } .term .ok { color: var(--ok-fg); }

.chat { display: grid; gap: 12px; padding: 22px; border-radius: 18px; background: var(--bg); border: 1px solid var(--border); }
.msg { max-width: 88%; padding: 12px 14px; border-radius: 14px; font-size: 15px; }
.msg.me { justify-self: end; background: var(--accent); color: var(--accent-ink); font-weight: 500; }
.msg.ai { display: grid; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.msg.ai span { color: var(--text-muted); font-size: 14px; }
.msg.ai code { display: block; padding: 10px 12px; border-radius: 10px; background: var(--code-bg); white-space: pre-wrap; }

.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 32px; }
.cat { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--border); text-decoration: none; transition: border-color .15s, transform .15s; }
.cat:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cat .frame.mini { width: 84px; border-radius: 12px; box-shadow: none; }
.cat strong { display: block; font: 700 17px/1.2 var(--font-display); }
.cat span { display: block; color: var(--accent-text); font: 600 13px/1.6 var(--font-mono); }
.cat small { display: block; color: var(--text-faint); font-size: 13px; line-height: 1.4; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { position: relative; padding: 14px 16px 14px 46px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.checks li::before { content: '✓'; position: absolute; left: 16px; top: 13px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-size: 12px; font-weight: 700; }

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }
.plan { position: relative; padding: 24px; border-radius: 18px; background: var(--surface-1); border: 1px solid var(--border); }
.plan.best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.plan .badge { position: absolute; top: -11px; left: 20px; padding: 3px 10px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font: 700 11px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.plan .price { font: 700 36px/1.1 var(--font-display); letter-spacing: -.03em; margin: 12px 0 4px; }
.plan .price span { font: 500 15px/1 var(--font-ui); color: var(--text-muted); letter-spacing: 0; }
.plan .note { color: var(--accent-text); font-size: 14px; font-weight: 600; margin: 0; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: 14px; color: var(--text-muted); }
.plan li::before { content: '— '; color: var(--text-faint); }

.faq { display: grid; gap: 10px; margin-top: 24px; }
.faq details { border-radius: 14px; background: var(--bg); border: 1px solid var(--border); padding: 0 18px; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--text-faint); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { color: var(--text-muted); padding-bottom: 16px; margin: 0; }

/* skills catalog */
.filters { display: grid; gap: 14px; margin-bottom: 12px; position: sticky; top: 64px; z-index: 3; padding: 14px 0; background: var(--bg); }
.search { width: 100%; height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-1); color: var(--text); font: 400 16px/1 var(--font-ui); }
.search::placeholder { color: var(--text-faint); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); font: 500 14px/1 var(--font-ui); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: transparent; }
.count { color: var(--text-faint); font-size: 14px; margin-bottom: 14px; }
.sks { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.sk { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; background: var(--surface-1); border: 1px solid var(--border); }
.sk[hidden] { display: none; }
.sk-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sk-head code { font-size: 13px; }
.sk p { margin: 0; color: var(--text-muted); font-size: 15px; }
.sk-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-muted); font-size: 12px; font-weight: 500; }
.tag.warn { background: var(--warn-bg); color: var(--warn-fg); }
.sk-foot { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-faint); }
.sk-foot a { color: var(--text-muted); }

/* legal / prose */
.prose h1 { margin-bottom: 8px; }
.prose h2 { font-size: 22px; margin: 36px 0 12px; }
.prose p, .prose li { color: var(--text-muted); line-height: 1.7; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); }
.prose a { color: var(--accent-text); }

/* footer */
.foot { border-top: 1px solid var(--border); padding: 48px 0 40px; }
.foot-in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.foot-brand p { color: var(--text-muted); font-size: 14px; margin-top: 12px; max-width: 360px; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: flex-end; align-content: start; }
.foot-nav a { color: var(--text-muted); text-decoration: none; font-size: 14px; }
.foot-nav a:hover { color: var(--text); }
.foot .fine { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 20px; }

@media (max-width: 900px) {
  .hero-in, .split { grid-template-columns: 1fr; }
  .hero-in { padding: 56px 20px 64px; }
  .hero-art { height: 420px; max-width: 460px; width: 100%; margin: 0 auto; }
  .steps, .plans { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .top-in { justify-content: space-between; }
}
@media (max-width: 600px) {
  .sec { padding: 64px 0; }
  .strip-in { grid-template-columns: 1fr 1fr; }
  .strip-in div:nth-child(2) { border-right: 0; }
  .strip-in div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .steps, .plans { grid-template-columns: 1fr; }
  .hero-art { height: 340px; }
  .cats, .sks { grid-template-columns: 1fr; }
  .filters { position: static; padding-top: 0; }
  .foot-in { grid-template-columns: 1fr; }
  .foot-nav { justify-content: flex-start; }
  .top .btn { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Legal pages */
.legal h2 { scroll-margin-top: 80px; }
.legal h3 { font-size: 17px; margin: 22px 0 8px; color: var(--text); }
.toc { margin: 24px 0 8px; padding: 18px 22px; border-radius: 14px; background: var(--surface-1); border: 1px solid var(--border); }
.toc-t { margin: 0 0 8px; font-weight: 600; color: var(--text) !important; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 28px; }
.toc li { margin-bottom: 4px; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.tbl { margin: 16px 0 20px; overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); }
.tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); line-height: 1.55; color: var(--text-muted); }
.tbl th { background: var(--surface-1); color: var(--text); font-weight: 600; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { min-width: 220px; }
@media (max-width: 640px) {
  .toc ol { columns: 1; }
  .tbl table, .tbl thead, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl thead { display: none; }
  .tbl tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td { padding: 3px 0; border: 0; }
  .tbl td:first-child { min-width: 0; color: var(--text); }
  .tbl td:not(:first-child)::before { content: attr(data-l) ': '; font-weight: 600; color: var(--text); }
}