/* ============================================================
   AI-ANCHOR: CSS_LEARN — TASK-075 (owner #152): halaman konten SEO /learn/* dan /tools/* (dibangun ops/dev/build-content.js).
   Dimuat SETELAH brand.css + legal.css + page-gm.css → pakai token yang sama (navy/emas, Lilita One + Nunito, kartu ber-outline).
   Skala spasi 4·8·12·16·24·32·48·64 · font 12·14·16·20·24·32·40 · target sentuh ≥ 44 · kolom baca ≤ 68ch · minmax(0,1fr).
   ============================================================ */
.ln-head { gap: 8px; }
.ln-nav { display: flex; gap: 4px; margin-inline: auto 8px; }
.ln-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--mut); font-size: 14px; font-weight: 800; text-decoration: none; }
.ln-nav a[aria-current] { background: rgba(94, 240, 255, .1); color: #fff; }
@media (max-width: 419px) { .ln-head .lg-logo { min-width: 44px; justify-content: center; } .ln-head .lg-logo b { display: none; } .ln-nav a { padding: 0 8px; } }

.ln-main { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.ln-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0 0 8px; padding: 0; list-style: none; color: var(--mut); font-size: 12px; font-weight: 800; }
.ln-crumbs li + li::before { content: "›"; margin-right: 8px; opacity: .6; }
.ln-crumbs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--mut); text-decoration: none; }
.ln-crumbs a:hover { color: #fff; }

.ln-art h1, .ln-hero h1 { margin: 0; font-family: var(--font-title); font-size: clamp(32px, 7vw, 40px); font-weight: 400; line-height: 1.15; color: #fff; text-shadow: 0 3px 0 var(--line); }
.ln-meta { margin: 8px 0 0; color: var(--mut); font-size: 14px; font-weight: 800; }
.ln-lead { max-width: 68ch; margin: 16px 0 0; color: var(--txt); font-size: 20px; font-weight: 700; line-height: 1.5; }

.ln-toc { margin: 24px 0 0; padding: 16px; border: 3px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card-bg); }
.ln-toc b { display: block; margin-bottom: 8px; color: var(--acc); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ln-toc ol { margin: 0; padding-left: 24px; }
.ln-toc li { margin: 0; }
.ln-toc a { display: inline-flex; align-items: center; min-height: 44px; color: var(--txt); text-decoration: none; }
.ln-toc a:hover { color: var(--gold); }

.ln-body { margin-top: 24px; }
.ln-body h2 { margin: 48px 0 12px; font-family: var(--font-title); font-size: 24px; font-weight: 400; line-height: 1.25; color: #fff; scroll-margin-top: 80px; }
.ln-body h3 { margin: 32px 0 8px; font-size: 20px; font-weight: 900; line-height: 1.25; color: #fff; scroll-margin-top: 80px; }
.ln-body p, .ln-body li { max-width: 68ch; color: rgba(var(--txt-rgb), .9); font-size: 16px; font-weight: 600; line-height: 1.6; }
.ln-body p { margin: 0 0 16px; }
.ln-body ul, .ln-body ol { margin: 0 0 16px; padding-left: 24px; }
.ln-body li { margin-bottom: 8px; }
.ln-body strong { color: #fff; font-weight: 900; }
.ln-body a { color: var(--gold); font-weight: 800; }
.ln-body code { padding: 0 4px; border-radius: 4px; background: #0a0f26; color: var(--acc); font-size: 14px; overflow-wrap: anywhere; }
.ln-body img { display: block; max-width: 100%; height: auto; margin: 24px 0; border: 3px solid var(--line); border-radius: var(--radius-md); }
.ln-body hr { margin: 32px 0; border: 0; border-top: 2px dashed rgba(94, 240, 255, .2); }
.ln-body blockquote { margin: 24px 0; padding: 12px 16px; border-left: 4px solid var(--acc); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgba(94, 240, 255, .06); }
.ln-tip { margin: 24px 0; padding: 12px 16px; border: 3px solid var(--line); border-radius: var(--radius-sm); background: rgba(255, 201, 51, .12); color: var(--txt); font-weight: 700; line-height: 1.6; }
.ln-tip strong { color: var(--gold); }
.ln-table { margin: 24px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 3px solid var(--line); border-radius: var(--radius-sm); }
.ln-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ln-table th, .ln-table td { padding: 8px 12px; border-bottom: 1px solid rgba(var(--line-rgb), .8); text-align: left; vertical-align: top; }
.ln-table th { background: var(--card2); color: #fff; font-weight: 900; white-space: nowrap; }
.ln-table tr:last-child td { border-bottom: 0; }

.ln-cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; margin: 48px 0 0; padding: 24px 16px; border: 3px solid var(--line); border-radius: var(--radius-lg);
	background: radial-gradient(120% 140% at 0% 0%, rgba(255, 201, 51, .18), transparent 60%), var(--surface-card-bg); box-shadow: 0 6px 0 #0a0f26; }
.ln-cta b { display: block; color: #fff; font: 400 24px/1.2 var(--font-title); }
.ln-cta p { margin: 8px 0 0; color: var(--mut); font-weight: 700; line-height: 1.45; }
.ln-cta .lg-cta { justify-self: start; min-height: 52px; padding: 0 24px; font-size: 16px; }
@media (min-width: 640px) { .ln-cta { grid-template-columns: minmax(0, 1fr) auto; padding: 24px; } }

.ln-faq { margin-top: 48px; }
.ln-faq h2 { margin: 0 0 16px; font-family: var(--font-title); font-size: 24px; font-weight: 400; line-height: 1.25; color: #fff; }
.ln-faq details { border: 3px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.ln-faq details + details { margin-top: 8px; }
.ln-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; color: #fff; font-weight: 900; line-height: 1.45; cursor: pointer; list-style: none; }
.ln-faq summary::-webkit-details-marker { display: none; }
.ln-faq summary::after { content: "+"; flex: none; color: var(--gold); font-size: 24px; line-height: 1; transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.ln-faq details[open] summary::after { transform: rotate(45deg); }
.ln-faq details > p, .ln-faq details > ul { margin: 0; padding: 0 16px 16px; color: rgba(var(--txt-rgb), .9); font-weight: 600; line-height: 1.6; }
.ln-faq details > ul { padding-left: 40px; }

.ln-hero { padding: 16px 0 8px; }
.ln-group { margin-top: 48px; }
.ln-group h2, .ln-rel h2 { margin: 0 0 16px; font-family: var(--font-title); font-size: 24px; font-weight: 400; line-height: 1.25; color: #fff; }
.ln-rel { margin-top: 64px; }
.ln-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.ln-card { display: grid; align-content: start; gap: 8px; min-height: 44px; padding: 16px; border: 3px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card-bg);
	box-shadow: 0 4px 0 #0a0f26; color: var(--txt); text-decoration: none; transition: transform .18s cubic-bezier(.22, 1, .36, 1); }
.ln-card:hover { transform: translateY(-2px); }
.ln-card:active { transform: translateY(2px); }
.ln-card-k { color: var(--acc); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.ln-card b { color: #fff; font-size: 20px; font-weight: 900; line-height: 1.25; }
.ln-card-d { color: var(--mut); font-size: 14px; font-weight: 700; line-height: 1.45; }

/* ---------- widget tools (tl-*) ---------- */
.tl-box { margin: 24px 0 0; padding: 16px; border: 3px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: 0 6px 0 #0a0f26; }
@media (min-width: 640px) { .tl-box { padding: 24px; } }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 16px; }
.tl-f { display: grid; gap: 4px; }
.tl-f > span { color: var(--mut); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.tl-in, .tl-sel { width: 100%; min-height: 52px; padding: 0 12px; border: 3px solid var(--line); border-radius: var(--radius-sm); background: #0a0f26; color: var(--txt); font: 800 16px/1.45 var(--font-ui); box-sizing: border-box; }
.tl-in:focus, .tl-sel:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 201, 51, .25); }
textarea.tl-in { min-height: 96px; padding: 12px; resize: vertical; overflow-wrap: anywhere; }
.tl-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 3px solid var(--line); border-radius: var(--radius-sm); background: var(--card2); color: #fff; font: 900 14px/1 var(--font-ui); cursor: pointer; }
.tl-btn[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(#34427a, #26315e); color: var(--gold); }
.tl-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; margin-top: 16px; }
.tl-stat { display: grid; gap: 4px; padding: 12px 16px; border: 3px solid var(--line); border-radius: var(--radius-sm); background: rgba(10, 15, 38, .7); }
.tl-stat small { color: var(--mut); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.tl-stat b { color: #fff; font-size: 24px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tl-stat.good b { color: var(--good); }
.tl-stat.bad b { color: #fda4af; }
.tl-stat.gold b { color: var(--gold); }
.tl-note { margin: 12px 0 0; color: var(--mut); font-size: 14px; font-weight: 700; line-height: 1.45; }
.tl-res { margin-top: 16px; padding: 12px 16px; border: 3px solid var(--line); border-radius: var(--radius-sm); background: rgba(10, 15, 38, .7); font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.tl-res.good { border-color: rgba(134, 232, 92, .6); }
.tl-res.bad { border-color: rgba(253, 164, 175, .6); }
.tl-res b { color: #fff; }
@media (prefers-reduced-motion: reduce) { .ln-card, .ln-faq summary::after { transition: none; } }

/* ============================================================
   AI-ANCHOR: CSS_PROMO_AIBIO — TASK-076 (owner #153, CLAUDE.md §8.19): promo AiBio.Store 3 zona di semua halaman konten.
   .pr-top (header, strip ≤ 64 px) · .pr-mid (body, kartu visual setelah jawaban pertama / di bawah hasil tool) · .pr-end (footer, kartu CTA besar).
   Semua <a href="/" data-promo>. Ruang gambar dipesan (width/height) → CLS 0. Animasi hanya transform/opacity, jalan saat .is-on (js/promo-aibio.js),
   berhenti di luar layar / tab tersembunyi / prefers-reduced-motion.
   ============================================================ */
.pr { display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.pr img { display: block; flex: none; }
.pr-go { display: inline-flex; flex: none; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 3px solid var(--line); border-radius: var(--radius-sm);
	background: var(--surface-btn-primary); color: #fff; font: 400 16px/1 var(--font-title); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(11, 16, 36, .5); box-shadow: 0 4px 0 #0a0f26; }
.pr:hover .pr-go, .pr:focus-visible .pr-go { filter: brightness(1.08); }
.pr:active .pr-go { transform: translateY(2px); box-shadow: 0 2px 0 #0a0f26; }
.pr:focus-visible { outline: 3px solid var(--acc); outline-offset: 4px; border-radius: var(--radius-md); }

/* header strip */
.pr-top { border-bottom: 3px solid var(--line); background: linear-gradient(90deg, rgba(255, 201, 51, .16), rgba(94, 240, 255, .1) 60%, rgba(11, 16, 36, 0)), var(--panel); }
.pr-top-in { display: flex; align-items: center; gap: 12px; max-width: 760px; min-height: 64px; margin: 0 auto; padding: 8px 16px; }
.pr-top-t { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.pr-top-t b { display: block; color: #fff; font: 400 16px/1.2 var(--font-title); }
.pr-top-t span { display: block; overflow: hidden; color: var(--mut); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.pr-top .pr-go { padding: 0 12px; font-size: 14px; }
@media (max-width: 359px) { .pr-top-t span { display: none; } }

/* body card */
.pr-mid { margin: 32px 0; padding: 16px; border: 3px solid var(--line); border-radius: var(--radius-lg);
	background: radial-gradient(110% 120% at 100% 0%, rgba(94, 240, 255, .16), transparent 55%), radial-gradient(90% 120% at 0% 100%, rgba(255, 201, 51, .16), transparent 60%), var(--surface-card-bg); box-shadow: 0 6px 0 #0a0f26; }
.pr-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 96px; margin-bottom: 16px; border-radius: var(--radius-md);
	background: linear-gradient(transparent 70%, rgba(94, 240, 255, .12)), repeating-linear-gradient(90deg, rgba(94, 240, 255, .06) 0 1px, transparent 1px 24px), #0a0f26; overflow: hidden; }
.pr-coins { position: absolute; inset: 0; pointer-events: none; }
.pr-coins img { position: absolute; top: 12px; opacity: .95; }
.pr-coins img:nth-child(1) { left: 12%; }
.pr-coins img:nth-child(2) { left: 46%; top: 8px; }
.pr-coins img:nth-child(3) { right: 12%; }
.pr-mid h2, .pr-mid .pr-h { margin: 0; color: #fff; font: 400 24px/1.2 var(--font-title); }
.pr-mid p { margin: 8px 0 16px; color: var(--mut); font-size: 14px; font-weight: 800; line-height: 1.5; }
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.pr-chips li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 2px solid var(--line2); border-radius: 999px; background: rgba(11, 16, 36, .5); color: #fff; font-size: 12px; font-weight: 900; }
.pr-mid .pr-go { min-height: 52px; padding: 0 24px; }

/* footer card */
.pr-end-wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }
.pr-end { padding: 24px 16px; border: 3px solid var(--line); border-radius: var(--radius-lg); text-align: center;
	background: radial-gradient(80% 90% at 50% 0%, rgba(255, 201, 51, .24), transparent 70%), var(--surface-card-bg); box-shadow: 0 6px 0 #0a0f26; }
.pr-end .pr-stage { max-width: 360px; margin: 0 auto 16px; }
.pr-end .pr-h { margin: 0; color: #fff; font: 400 clamp(24px, 6vw, 32px)/1.15 var(--font-title); text-shadow: 0 3px 0 var(--line); }
.pr-end p { max-width: 45ch; margin: 8px auto 16px; color: var(--mut); font-size: 16px; font-weight: 800; line-height: 1.5; }
.pr-end .pr-chips { justify-content: center; }
.pr-end .pr-go { min-height: 56px; padding: 0 32px; font-size: 20px; }
.pr-brand { display: block; max-width: 60ch; margin: 8px auto 0; color: var(--mut); font-size: 12px; font-weight: 700; line-height: 1.5; text-align: center; }
.pr-brand a { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); font-weight: 900; }

/* motion — hanya saat terlihat */
@keyframes pr-bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@keyframes pr-coin { 0% { transform: translateY(0) scale(1) } 50% { transform: translateY(8px) scale(.92) } 100% { transform: translateY(0) scale(1) } }
@keyframes pr-glow { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
.pr.is-on .pr-bot { animation: pr-bob 2400ms cubic-bezier(.45, 0, .55, 1) infinite; }
.pr.is-on .pr-rig { animation: pr-glow 1600ms ease-in-out infinite; }
.pr.is-on .pr-coins img { animation: pr-coin 1800ms cubic-bezier(.45, 0, .55, 1) infinite; }
.pr.is-on .pr-coins img:nth-child(2) { animation-delay: -600ms; }
.pr.is-on .pr-coins img:nth-child(3) { animation-delay: -1200ms; }
@media (prefers-reduced-motion: reduce) { .pr.is-on .pr-bot, .pr.is-on .pr-rig, .pr.is-on .pr-coins img { animation: none; } }

/* AI-ANCHOR: CSS_ASK_AIBIO — TASK-080 B11: tombol "Ask" + panel jawaban (js/ask-aibio.js) · AI-ANCHOR: CSS_STATS — /stats (vps/seo-live.js) */
.ak-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px;
	border: 3px solid var(--line); border-radius: 999px; background: var(--card2); color: #fff; font: 900 16px/1 var(--font-ui); box-shadow: 0 4px 0 #0a0f26, 0 8px 24px rgba(0, 0, 0, .35); cursor: pointer; }
.ak-fab:focus-visible, .ak-x:focus-visible, .ak-go:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.ak-box { position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 41; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 128px); overflow: auto;
	padding: 16px; border: 3px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: 0 6px 0 #0a0f26, 0 16px 48px rgba(0, 0, 0, .5); }
.ak-box[hidden] { display: none; }
.ak-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.ak-top b { color: #fff; font: 400 20px/1.2 var(--font-title); }
.ak-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--mut); font-size: 24px; cursor: pointer; }
.ak-l { display: block; margin-bottom: 8px; color: var(--mut); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.ak-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ak-row input { min-width: 0; min-height: 44px; padding: 0 12px; border: 2px solid var(--line2); border-radius: var(--radius-sm); background: #0a0f26; color: #fff; font: 700 16px/1.2 var(--font-ui); }
.ak-go { min-height: 44px; padding: 0 16px; border: 3px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-btn-primary); color: #fff; font: 400 16px/1 var(--font-title); text-transform: uppercase; cursor: pointer; }
.ak-out { margin-top: 12px; color: var(--txt); font-size: 14px; font-weight: 700; line-height: 1.5; }
.ak-a { margin: 0 0 8px; }
.ak-src { margin: 0 0 12px; color: var(--mut); font-size: 12px; }
.ak-src a { display: inline-flex; align-items: center; min-height: 32px; color: var(--gold); font-weight: 900; }
.ak-cta { display: flex; align-items: center; justify-content: center; min-height: 44px; border: 3px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-btn-primary); color: #fff; font: 400 16px/1 var(--font-title); text-decoration: none; text-transform: uppercase; }
.ln .lg-foot { padding-bottom: 96px; }

.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
@media (min-width: 640px) { .st-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.st-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px; border: 3px solid var(--line); border-radius: var(--radius-md); background: var(--surface-card-bg); }
.st-k { color: var(--mut); font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.st-v { overflow-wrap: anywhere; color: #fff; font: 400 24px/1.15 var(--font-title); }
.st-s { color: var(--mut); font-size: 12px; font-weight: 800; }
.st-cap { padding: 8px 12px; color: var(--mut); font-size: 12px; font-weight: 900; text-align: left; caption-side: top; }
@media (max-width: 419px) { .ln-nav a[href="/stats"] { display: none; } }
.ln-table td a { display: inline-flex; align-items: center; min-height: 44px; }
.tl-share { align-items: center; }
.tl-share .tl-note { margin: 0; }

/* ---------- /tools/free-crypto-faucet/ (TASK-103, owner #199) — keran koin: robot → pipa → tetes koin → cangkir; transform/opacity, jalan hanya .is-on ---------- */
.fc-tap { position: relative; height: 128px; margin: 0 0 16px; border: 3px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
	background: radial-gradient(120% 90% at 50% 0%, rgba(255, 201, 51, .16), transparent 60%), rgba(10, 15, 38, .7); }
.fc-bot { position: absolute; left: 50%; top: 8px; width: 48px; height: 54px; transform: translateX(-120%); }
.fc-pipe { position: absolute; left: 50%; top: 24px; width: 48px; height: 12px; border-radius: 0 8px 8px 0; background: linear-gradient(#ffd766, #c9921a); transform: translateX(-8px); }
.fc-pipe::after { content: ""; position: absolute; right: 0; top: 8px; width: 12px; height: 16px; border-radius: 0 0 4px 4px; background: #c9921a; }
.fc-drop { position: absolute; left: 50%; top: 40px; width: 24px; height: 24px; margin-left: 28px; opacity: 0; will-change: transform, opacity; }
.fc-drop img { display: block; width: 24px; height: 24px; }
.fc-cup { position: absolute; left: 50%; bottom: 8px; width: 64px; height: 24px; margin-left: 8px; border: 3px solid var(--gold); border-top: 0; border-radius: 0 0 16px 16px; background: rgba(255, 201, 51, .12); }
.fc-tap.is-on .fc-drop { animation: fc-drip 1.8s cubic-bezier(.45, 0, .8, .6) infinite; }
.fc-tap.is-on .fc-drop.d2 { animation-delay: .6s; }
.fc-tap.is-on .fc-drop.d3 { animation-delay: 1.2s; }
.fc-tap.is-on .fc-bot { animation: fc-bob 2.4s ease-in-out infinite; }
@keyframes fc-drip { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; transform: translateY(4px) scale(1); } 80% { opacity: 1; transform: translateY(48px) scale(1); } 100% { opacity: 0; transform: translateY(56px) scale(.8); } }
@keyframes fc-bob { 0%, 100% { transform: translateX(-120%) translateY(0); } 50% { transform: translateX(-120%) translateY(-4px); } }
.fc-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.fc-lg, .fc-f > span { padding: 0; color: var(--mut); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.fc-f > span b { color: var(--gold); }
.fc-coins { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin: 8px 0 16px; }
.fc-coin { display: grid; justify-items: center; gap: 4px; min-height: 64px; padding: 8px 4px; border: 3px solid var(--line); border-radius: var(--radius-sm); background: var(--card2);
	color: #fff; font: 900 12px/1 var(--font-ui); cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.fc-coin img { width: 24px; height: 24px; }
.fc-coin:active { transform: scale(.96); }
.fc-coin[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(#34427a, #26315e); color: var(--gold); }
.fc-msg { min-height: 20px; margin: 8px 0 0; color: var(--mut); font-size: 14px; font-weight: 700; line-height: 1.45; }
.fc-msg.good { color: var(--good); }
.fc-msg.bad { color: #fda4af; }
.fc-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: 8px; padding: 0 24px; border: 3px solid var(--line); border-radius: var(--radius-sm);
	background: var(--surface-btn-primary); color: #fff; font: 400 20px/1.2 var(--font-title); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(11, 16, 36, .5);
	box-shadow: 0 4px 0 #0a0f26; cursor: pointer; }
.fc-go b { color: #fff; font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
.fc-go:active { transform: translateY(2px); box-shadow: 0 2px 0 #0a0f26; }
.fc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.fc-steps li { display: grid; gap: 4px; padding: 8px; border: 3px solid var(--line); border-radius: var(--radius-sm); background: rgba(10, 15, 38, .7); text-align: center; }
.fc-steps b { color: #fff; font-size: 14px; font-weight: 900; line-height: 1.2; }
.fc-steps span { color: var(--mut); font-size: 12px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .fc-tap.is-on .fc-drop, .fc-tap.is-on .fc-bot { animation: none; } .fc-drop.d1 { opacity: 1; transform: translateY(24px); } }