/* The Tale Rocket page and the blog (tools/showcase-build.mjs), in the game's eight languages: the game's dark «technical bulletin» look — pixel titles
   (Grifo Pixel; Chinese and Japanese read in a bold sans, the pixel font has no CJK), DM Sans text, cyan #5fcbe6 and orange #ff9a4a accents, hairline frames.
   Static pages. The blog has no script; the Tale Rocket page has one small module (tale-rocket.js: the loop's controls, the reveals, the section bar) and is complete without it.
   The top bar's menus are CSS (<details>, site-nav.css). Nothing moves with prefers-reduced-motion. Keyframe names start with sc- (tools/check-css.mjs). The build replaces __FONT_x__ with the game's own font files. */
@font-face { font-family: 'Grifo Pixel'; src: url('/assets/grifo-pixel-C0NX-hEd.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'DM Sans'; font-weight: 400; src: url('/assets/dm-sans-latin-400-normal-CW0RaeGs.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'DM Sans'; font-weight: 500; src: url('/assets/dm-sans-latin-500-normal-B9HHJjqV.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'DM Sans'; font-weight: 700; src: url('/assets/dm-sans-latin-700-normal-DvUfVpUG.woff2') format('woff2'); font-display: swap; }

:root {
  --bg: #04080c; --panel: #0a1620; --panel-2: #07121b; --line: #1d3a4d; --line-hi: #2c6a82;
  --ink: #e8f0f4; --text: #c4d4dd; --dim: #8fa7b6; --cy: #5fcbe6; --or: #ff9a4a; --ok: #4fe08a; --gold: #ffb24a;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'PingFang SC', 'Noto Sans CJK SC', 'Noto Sans CJK JP', 'Microsoft YaHei', 'Yu Gothic', sans-serif;
  --pix: 'Grifo Pixel', ui-monospace, monospace;
  --px-b: var(--or); --px-c: var(--ink);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 var(--sans); overflow-x: hidden; }
html:lang(zh) body, html:lang(ja) body { line-height: 1.85; line-break: strict; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cy); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.pf { font-family: var(--pix); font-weight: 400; text-transform: uppercase; -webkit-font-smoothing: none; letter-spacing: .02em; }
html:lang(zh) .pf, html:lang(ja) .pf { font-family: var(--sans); font-weight: 700; text-transform: none; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--ink); overflow-wrap: break-word; }
html:lang(de) h1, html:lang(de) h2, html:lang(de) h3 { hyphens: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 14px; background: var(--or); color: #1a0b00; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }

/* a quiet grid and scanlines behind everything, with two faint glows (cyan and orange) */
.sc-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(95, 203, 230, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(95, 203, 230, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(70% 50% at 15% 0%, rgba(95, 203, 230, .12), transparent 70%),
    radial-gradient(50% 40% at 100% 30%, rgba(255, 154, 74, .07), transparent 70%),
    var(--bg); }

.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 28px; } }

/* ---------- top bar: the site's one bar, site-nav.css (appended to this stylesheet by tools/showcase-build.mjs) */

/* ---------- shared pieces */
.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--cy); font-size: 13px; letter-spacing: .12em; }
.dot { width: 9px; height: 9px; background: var(--or); box-shadow: 0 0 10px var(--or); animation: sc-blink 1.6s steps(2) infinite; flex: none; }
@keyframes sc-blink { 50% { opacity: .25; } }
.lead { font-size: 19px; line-height: 1.6; color: var(--text); max-width: 700px; margin: 0 0 22px; }
@media (max-width: 520px) { .lead { font-size: 17px; } }
.meta { margin: 0 0 10px; color: var(--or); font-size: 12px; letter-spacing: .08em; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; }
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 18px; color: var(--ink); text-decoration: none; font: 400 14px/1.2 var(--pix); text-transform: uppercase;
  background: rgba(10, 22, 32, .8); border: 1px solid var(--line-hi); transition: background .15s, border-color .15s, color .15s; -webkit-font-smoothing: none; }
html:lang(zh) .btn, html:lang(ja) .btn { font: 700 15px/1.3 var(--sans); text-transform: none; -webkit-font-smoothing: antialiased; }
.btn i { font-style: normal; color: var(--or); }
.btn:hover { border-color: var(--cy); background: rgba(95, 203, 230, .12); color: #fff; }
.btn-hi { background: var(--cy); border-color: var(--cy); color: #031018; box-shadow: 0 0 22px rgba(95, 203, 230, .25); }
.btn-hi i { color: #031018; }
.btn-hi:hover { background: #8fe0f2; color: #031018; }
.px-ic { display: block; flex: none; width: 24px; height: 24px; color: var(--cy); image-rendering: pixelated; }

/* a screenshot in a little window: a title bar with three squares and a label, cyan corner marks. Every screenshot is shown in the same 16:10 window
   (the same rhythm wherever it appears; the pictures are taken at 1440×900, a few are cropped by the window). */
.frame { position: relative; margin: 0; background: var(--panel-2); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.frame::before, .frame::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--cy); pointer-events: none; }
.frame::before { left: -5px; top: -5px; border-right: 0; border-bottom: 0; }
.frame::after { right: -5px; bottom: -5px; border-left: 0; border-top: 0; }
.frame-bar { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--panel); }
.frame-bar i { width: 8px; height: 8px; background: var(--line-hi); flex: none; }
.frame-bar i:first-child { background: var(--or); }
.frame-bar i:nth-child(2) { background: var(--cy); }
.frame-bar span { margin-left: 8px; font: 400 10px/1 var(--pix); color: var(--dim); letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html:lang(zh) .frame-bar span, html:lang(ja) .frame-bar span { font: 700 11px/1.2 var(--sans); letter-spacing: .04em; }
.frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; background: #070b10; }
.frame figcaption, .cap { padding: 10px 12px; color: var(--dim); font-size: 14px; line-height: 1.5; border-top: 1px solid var(--line); }
.cap { border: 0; padding: 12px 2px 0; }

.socials { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.soc { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 14px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1;
  background: rgba(4, 8, 12, .6); border: 1px solid var(--line); transition: background .15s, border-color .15s, color .15s; }
.soc .bi { width: 18px; height: 18px; flex: none; color: #9fb4c2; }
.soc .pi.bi { color: #ff7a85; }
a.soc:hover { color: #fff; border-color: var(--cy); background: rgba(95, 203, 230, .12); }
a.soc:hover .bi { color: #fff; }
h2.pf { font-size: clamp(22px, 3vw, 32px); line-height: 1.15; margin: 0 0 16px; }
h3.pf { font-size: 18px; line-height: 1.25; margin: 0 0 10px; }
html:lang(zh) h2.pf, html:lang(ja) h2.pf { line-height: 1.35; }

/* ---------- Tale Rocket (the product page, fourth version 2026-10-17). A corporate, restrained page: one accent (cyan), a calm dark palette, generous whitespace, plain edges
   (no frames, brackets, grids or scanlines), the pixel face only on the big titles (owner's rule: every label and line is DM Sans). One sticky ribbon flush under the site's bar;
   the hero centred; then one idea per section — why, what it does (a scroll-driven showcase), the live publishing, the comparison, the game made with it, where it stands,
   «want to try it?». tale-rocket.js adds html.tr-js (the showcase's switching, reveals, the loop's button); without it everything is visible, stacked and still. */
.tr-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .tr-wrap { padding: 0 32px; } }
.tr-narrow { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 20px; text-align: center; }
.sc-rocket { --ink: #f1f5f8; --text: #b4c3cd; --dim: #7f929e; --line: rgba(255, 255, 255, .09); --gap: clamp(88px, 10.5vw, 152px); }
.sc-rocket main { overflow: clip; }
.sc-rocket .sc-bg { background: var(--bg); }
.tr-sec { margin-top: var(--gap); scroll-margin-top: 120px; }
.sc-rocket .tr-h2 { margin: 0 0 18px; color: var(--ink); font: 700 clamp(30px, 3.8vw, 52px)/1.1 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
html:lang(zh) .sc-rocket .tr-h2, html:lang(ja) .sc-rocket .tr-h2 { font-size: clamp(27px, 3.3vw, 44px); line-height: 1.3; letter-spacing: 0; }
.sc-rocket h2.pf { margin: 0 0 16px; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.15; letter-spacing: .01em; text-wrap: balance; }
html:lang(zh) .sc-rocket h2.pf, html:lang(ja) .sc-rocket h2.pf { line-height: 1.35; font-size: clamp(25px, 3vw, 38px); }
html:lang(ja) .sc-rocket h1, html:lang(ja) .sc-rocket h2, html:lang(ja) .sc-rocket h3 { word-break: auto-phrase; }
.tr-k { margin: 0 0 16px; color: var(--cy); font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
html:lang(zh) .tr-k, html:lang(ja) .tr-k { letter-spacing: .06em; }
.tr-lead { margin: 0 auto 16px; max-width: 36em; font-size: 19px; line-height: 1.65; color: var(--text); }
@media (max-width: 520px) { .tr-lead { font-size: 17px; } }
.led { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cy); }
.tr-wip .led { animation: sc-breathe 2.4s ease-in-out infinite; }
@keyframes sc-breathe { 50% { opacity: .3; } }
.tlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--cy); text-decoration: none; font: 600 15px/1.3 var(--sans); }
.tlink i { font-style: normal; transition: transform .15s; }
.tlink:hover { color: #fff; } .tlink:hover i { transform: translateX(3px); }
.mk-ic { display: block; flex: none; }
.mk-yes { color: var(--cy); } .mk-part { color: #8da2b0; } .mk-no { color: #50626e; }

/* ---------- the section ribbon: the first thing under the site's bar, stuck flush to it (its height: --bar-h, measured by tale-rocket.js; 61 / 57 px without it) */
.tr-sub { --bar-h: 61px; position: sticky; top: var(--bar-h); z-index: 40; background: rgba(5, 9, 13, .88); border-bottom: 1px solid var(--line); }
.tr-sub::before { content: ''; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.tr-sub-in { display: flex; align-items: stretch; gap: 20px; max-width: 1180px; height: 48px; margin: 0 auto; padding: 0 24px; }
.tr-sub-name { flex: none; display: flex; align-items: center; padding-right: 20px; border-right: 1px solid var(--line); }
.tr-sub-name img { width: 128px; height: auto; }
.tr-sub-links { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.tr-sub-links::-webkit-scrollbar { display: none; }
.tr-sub-links a { flex: none; display: flex; align-items: center; padding: 0 14px; color: var(--dim); text-decoration: none; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.tr-sub-links a:hover { color: #fff; }
.tr-sub-links a.is-on { color: #fff; border-bottom-color: var(--cy); }
@media (max-width: 900px) { .tr-sub-name { display: none; } .tr-sub-links { margin-left: 0; } }
@media (max-width: 760px), (max-height: 520px) and (max-width: 1024px) {
  .tr-sub { --bar-h: 57px; }
  .tr-sub-in { height: 44px; padding: 0 4px; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
  .tr-sub-links a { padding: 0 12px; font-size: 13.5px; }
}
@media (max-height: 520px) and (max-width: 1024px) { .tr-sub-in { height: 40px; } }

/* the logo (it lifts off once; the letters light up one by one) */
.trl-wrap { position: relative; width: min(460px, 80%); margin: 0 auto; }
.trl { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 18px rgba(95, 203, 230, .22)); }
.trl-mark { transform-box: fill-box; animation: sc-lift 1.15s steps(9, end) both; }
.trl-l { animation: sc-letter .5s steps(3, end) both; animation-delay: calc(.55s + var(--i) * .07s); }
.trl-fire { position: absolute; left: 4.2%; top: 92%; width: 6.4%; height: 26%; display: flex; justify-content: space-between; pointer-events: none; opacity: 0; animation: sc-fire 1.25s steps(6, end) both; }
.trl-fire i { width: 30%; background: #ff9a4a; box-shadow: 0 0 8px #ff9a4a; }
.trl-fire i:nth-child(2) { background: #ffd24a; height: 140%; }
.trl-fire i:first-child, .trl-fire i:last-child { height: 70%; }
@keyframes sc-lift { 0% { transform: translateY(60%); opacity: 0; } 25% { opacity: 1; } 40% { transform: translateY(8%) translateX(-1px); } 55% { transform: translateY(-14%) translateX(1px); } 75% { transform: translateY(-4%); } 100% { transform: none; opacity: 1; } }
@keyframes sc-letter { 0% { opacity: 0; fill: var(--cy); } 60% { opacity: 1; fill: var(--cy); } 100% { opacity: 1; fill: #FEFEFE; } }
@keyframes sc-fire { 0% { opacity: 0; transform: scaleY(.3); } 20% { opacity: 1; transform: scaleY(1.2); } 50% { opacity: 1; transform: scaleY(.8); } 80% { opacity: .7; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(.2); } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- the hero, centred: logo, what it is, three lines, one sentence, the calls; the editor at work under it */
.tr-hero { position: relative; padding: 64px 0 0; }
.tr-hero::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 380px; width: min(1400px, 120vw); height: 820px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 45% at 50% 45%, rgba(95, 203, 230, .09), transparent 70%); }
.tr-hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tr-cat { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin: 26px 0 0; animation: sc-rise .6s .5s cubic-bezier(.2, .7, .2, 1) both; }
.tr-cat-b { display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; color: var(--gold); background: rgba(255, 178, 74, .1); border: 1px solid rgba(255, 178, 74, .55); border-radius: 999px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
html:lang(zh) .tr-cat-b, html:lang(ja) .tr-cat-b { letter-spacing: .06em; }
.tr-cat-by { color: var(--dim); font-size: 14.5px; }
.tr-cat-by a { color: var(--text); }
.tr-h1 { margin: 28px 0 0; font-size: clamp(26px, 3.6vw, 48px); line-height: 1.12; letter-spacing: .005em; text-wrap: balance; }
.h1-l { display: block; animation: sc-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.h1-0, .h1-1 { color: var(--ink); } .h1-0 { animation-delay: .7s; } .h1-1 { animation-delay: .85s; } .h1-2 { color: var(--cy); animation-delay: 1s; }
html:lang(zh) .tr-h1, html:lang(ja) .tr-h1 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.3; }
html:lang(de) .tr-h1, html:lang(fr) .tr-h1, html:lang(pt) .tr-h1, html:lang(it) .tr-h1 { font-size: clamp(24px, 3.2vw, 42px); }
.tr-hero-in > .tr-lead { margin: 22px auto 0; max-width: 33em; font-size: 19px; animation: sc-rise .7s 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.tr-hero-in > .ctas { justify-content: center; margin: 28px 0 0; animation: sc-rise .7s 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.tr-wip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 12px 0 0; color: var(--dim); font-size: 14px; animation: sc-rise .7s 1.3s cubic-bezier(.2, .7, .2, 1) both; }
.tr-wip .sep { color: #3a4a55; }
@media (max-width: 520px) { .tr-wip .sep { display: none; } .tr-wip .tlink { flex-basis: 100%; justify-content: center; min-height: 40px; } }
@media (max-width: 520px) { .tr-hero { padding-top: 40px; } .tr-cat { margin-top: 20px; } .tr-h1 { margin-top: 22px; font-size: clamp(25px, 7vw, 34px); } .tr-hero-in > .ctas { width: 100%; } .tr-hero-in > .ctas .sn-btn { flex: 1 1 100%; } }
@media (max-height: 520px) and (max-width: 1024px) { .tr-hero { padding-top: 28px; } .trl-wrap { width: min(360px, 56%); } .tr-h1 { font-size: clamp(22px, 3.6vw, 32px); margin-top: 20px; } }

.tr-stage { max-width: 1160px; margin: 56px auto 0; animation: sc-rise .9s 1.35s cubic-bezier(.2, .7, .2, 1) both; }
.tr-vid { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 10px; background: #05090d; box-shadow: 0 40px 110px rgba(0, 0, 0, .6); }
.tr-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #05090d; }
@media (max-width: 640px) { .tr-vid { aspect-ratio: 1 / 1; } .tr-stage { margin-top: 36px; } }
.tr-vbtn { position: absolute; z-index: 3; right: 12px; bottom: 12px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; cursor: pointer; border: 0; border-radius: 50%;
  background: rgba(5, 9, 13, .72); color: #fff; transition: background .15s; }
.tr-vbtn:hover { background: rgba(5, 9, 13, .94); }
.tr-vbtn i { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.tr-vbtn.is-paused i { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }
.tr-cap { margin: 14px 0 0; color: var(--dim); font-size: 14px; line-height: 1.5; text-align: center; }

/* ---------- why it exists: a narrow centred column */
.tr-why-p { margin: 0 0 14px; color: var(--text); font-size: 19px; line-height: 1.7; text-wrap: pretty; }
.tr-why-p:first-of-type { color: var(--ink); }
@media (max-width: 520px) { .tr-why-p { font-size: 17.5px; } }

/* ---------- what it does: the scroll-driven showcase. Without the script (and on phones and tablets) every capability is its own row, the sentence beside or above its screenshot; with
   it, on a wide screen, the sentences run down the left, the one you are reading stays bright, and the real screenshot beside them is stuck in view and changes with it. */
.tr-head { max-width: 780px; margin: 0 auto; text-align: center; }
.cap { display: grid; gap: 84px; margin-top: 56px; }
.cap-s { display: grid; gap: 24px; }
.cap-t h3 { margin: 0 0 10px; color: var(--ink); font: 700 clamp(24px, 2.6vw, 32px)/1.18 var(--sans); letter-spacing: -.015em; text-wrap: balance; }
.cap-t p { margin: 0; max-width: 30em; color: var(--text); font-size: 18px; line-height: 1.6; }
.cap-m { margin: 0; }
.cap-m img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; border-radius: 10px; background: #070c11; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 0, 0, .5); }
@media (min-width: 700px) { .cap { gap: 72px; } .cap-s { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; } }
@media (min-width: 1000px) and (min-height: 560px) {
  html.tr-js .cap { --mw: min(780px, calc((100vh - 220px) * 1.6)); --mh: calc(var(--mw) / 1.6); display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); row-gap: 0;
    grid-template-rows: repeat(var(--n), minmax(max(44vh, 320px), auto)); margin-top: 24px; }
  html.tr-js .cap-s { display: contents; }
  html.tr-js .cap-t { grid-column: 1; grid-row: var(--i); display: flex; flex-direction: column; justify-content: center; opacity: .38; transition: opacity .45s; cursor: pointer; border-radius: 8px; }
  html.tr-js .cap-t.is-on { opacity: 1; cursor: default; }
  html.tr-js .cap-t:focus-visible { outline: 2px solid var(--cy); outline-offset: 8px; }
  html.tr-js .cap-m { grid-column: 2; grid-row: 1 / span var(--n); align-self: start; justify-self: center; position: sticky; top: calc(112px + max(16px, (100vh - 112px - var(--mh)) / 2));
    width: min(100%, var(--mw)); opacity: 0; transform: scale(.985); transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
  html.tr-js .cap-m.is-on { opacity: 1; transform: none; }
}

/* ---------- live publishing: one clean diagram — four points on a line, a dot travelling along it */
.tr-live .tr-narrow:last-child { margin-top: 56px; }
.lv { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 960px; margin: 56px auto 0; padding: 0; }
.lv::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 22px; height: 1px; background: rgba(255, 255, 255, .16); }
.lv::after { content: ''; position: absolute; left: 12.5%; top: 18.5px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--cy); box-shadow: 0 0 14px 3px rgba(95, 203, 230, .65); opacity: 0; z-index: 2; }
.lv.is-on::after { animation: sc-pkt 5.6s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes sc-pkt { 0% { left: 12.5%; opacity: 0; } 8% { opacity: 1; } 78% { left: 87.5%; opacity: 1; } 92%, 100% { left: 87.5%; opacity: 0; } }
.lv-s { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 0 8px; text-align: center; }
.lv-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg); border: 1px solid rgba(255, 255, 255, .22); color: var(--text); }
.lv-dot svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lv-end .lv-dot { background: rgba(95, 203, 230, .12); border-color: var(--cy); color: var(--cy); box-shadow: 0 0 26px rgba(95, 203, 230, .28); }
.lv-s b { color: var(--ink); font: 500 18px/1.3 var(--sans); }
.lv-end b { color: var(--cy); font-weight: 700; }
.lv-note { margin: 0 auto; max-width: 34em; color: var(--dim); font-size: 15.5px; line-height: 1.65; text-wrap: pretty; }
@media (max-width: 640px) {
  .lv { grid-template-columns: 1fr; gap: 22px; max-width: 320px; margin-top: 44px; }
  .lv::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
  .lv::after { left: 18.5px; top: 22px; margin: 0; }
  .lv.is-on::after { animation-name: sc-pkt-v; }
  @keyframes sc-pkt-v { 0% { top: 22px; opacity: 0; } 8% { opacity: 1; } 78% { top: calc(100% - 26px); opacity: 1; } 92%, 100% { top: calc(100% - 26px); opacity: 0; } }
  .lv-s { flex-direction: row; align-items: center; gap: 18px; padding: 0; text-align: left; }
  .lv-s b { font-size: 17px; }
}

/* ---------- why not a big engine: a narrow centred column, quiet rows of marks */
.tr-compare .tr-lead { margin-bottom: 0; }
.tr-cmp { max-width: 720px; margin-top: 48px; padding: 0 20px; text-align: left; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp th, .cmp td { border-bottom: 1px solid var(--line); }
.cmp thead th, .cmp thead td { padding: 0 0 16px; color: var(--dim); font: 600 13px/1.35 var(--sans); letter-spacing: .02em; text-align: center; vertical-align: bottom; }
.cmp thead th, .cmp thead td { border-bottom: 0; }
.cmp tbody th { padding: 17px 16px 17px 0; color: var(--ink); font: 500 17px/1.4 var(--sans); text-align: left; }
.cmp tbody td { width: 150px; padding: 17px 0; text-align: center; }
.cmp tbody td .mk-ic { margin: 0 auto; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
/* the general-purpose engine's column stays quiet: greys only */
.cmp .cmp-en.mk-yes { color: #8da2b0; }
/* the Tale Rocket column is the one that stands out: one soft green band from its header (the rocket mark and the name) to the last row, with green checks */
.cmp thead th.cmp-tr, .cmp .cmp-tr { width: 168px; background: rgba(79, 224, 138, .09); border-left: 1px solid rgba(79, 224, 138, .3); border-right: 1px solid rgba(79, 224, 138, .3); border-bottom-color: rgba(79, 224, 138, .16); }
.cmp thead th.cmp-tr { padding: 18px 8px 16px; color: var(--ink); border-top: 1px solid rgba(79, 224, 138, .3); border-radius: 14px 14px 0 0; }
.cmp tbody tr:last-child .cmp-tr { border-bottom: 1px solid rgba(79, 224, 138, .3); border-radius: 0 0 14px 14px; }
.cmp-h { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.cmp-h b { color: var(--ink); font: 700 15px/1.2 var(--sans); letter-spacing: -.005em; }
.cmp-mark { display: block; width: 34px; height: auto; }
.cmp .cmp-tr.mk-yes { color: var(--ok); }
.cmp .cmp-tr.mk-yes .mk-ic { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: rgba(79, 224, 138, .16); box-shadow: inset 0 0 0 1px rgba(79, 224, 138, .35); }
.cmp .cmp-tr.mk-no { color: #8497a3; }
.cmp-legend .mk-yes { color: var(--ok); }
.cmp-legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin: 26px 0 0; padding: 0; color: var(--dim); font-size: 13.5px; }
.cmp-legend li { display: flex; align-items: center; gap: 8px; }
.cmp-legend .mk-ic { width: 16px; height: 16px; }
.cmp-note { margin: 22px 0 0; color: var(--dim); font-size: 15.5px; line-height: 1.6; text-align: center; text-wrap: pretty; }
@media (max-width: 560px) { .cmp tbody td { width: 72px; } .cmp thead th.cmp-tr, .cmp .cmp-tr { width: 96px; } .cmp-h b { font-size: 13px; } .cmp-mark { width: 28px; } .cmp tbody th { font-size: 15.5px; padding-right: 10px; } .cmp thead th, .cmp thead td { font-size: 12px; } .tr-cmp { padding: 0 16px; } }

/* ---------- made with Tale Rocket: the game, full width */
.tr-made { position: relative; display: flex; align-items: flex-end; min-height: 520px; margin-top: var(--gap); overflow: hidden; background: #000; }
.made-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%); }
.tr-made::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5, 9, 13, .94) 0%, rgba(5, 9, 13, .7) 38%, rgba(5, 9, 13, .1) 74%), linear-gradient(0deg, rgba(5, 9, 13, .7), transparent 40%); }
.made-in { position: relative; z-index: 2; padding-top: 88px; padding-bottom: 72px; }
.made-in h2.pf { max-width: 34ch; margin-bottom: 14px; }
.made-in > p:not(.tr-k) { max-width: 30em; margin: 0 0 6px; font-size: 18.5px; line-height: 1.6; color: var(--ink); }
@media (max-width: 700px) { .tr-made { min-height: 0; padding-top: 220px; } .made-bg { height: 300px; object-position: 70% 50%; } .tr-made::before { background: linear-gradient(0deg, #05090d 46%, rgba(5, 9, 13, .2) 76%, transparent); } .made-in { padding-top: 0; padding-bottom: 56px; } .made-in .ctas .sn-btn { flex: 1 1 100%; } }

/* ---------- where it stands, and the studio beside it */
.tr-pair { display: grid; gap: 64px; align-items: start; }
@media (min-width: 900px) { .tr-pair { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0; } .tr-studio { padding-left: 56px; border-left: 1px solid var(--line); } }
.st-ver { margin: -2px 0 30px; color: var(--dim); font-size: 14.5px; line-height: 1.5; }
.stg { display: grid; gap: 32px; }
@media (min-width: 640px) { .stg { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px; } }
.sg h3 { margin: 0 0 14px; color: var(--ink); font: 600 14px/1.3 var(--sans); letter-spacing: .02em; }
.sg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.sg li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.4; color: var(--text); }
.sg li .mk-ic { width: 18px; height: 18px; }
.sg-wip li { color: var(--dim); }
.studio-logo { display: block; width: 170px; margin: 0 0 24px; }
.studio-logo img { display: block; width: 100%; height: auto; }
.studio-t { margin: 0 0 8px; color: var(--ink); font-size: 17px; line-height: 1.6; }

/* ---------- the last call: want to try it? not yet; the networks */
.tr-join { margin-top: var(--gap); padding: 0 0 clamp(88px, 10vw, 136px); text-align: center; }
.join-in { display: flex; flex-direction: column; align-items: center; }
.trm { width: 56px; height: auto; margin-bottom: 26px; opacity: .92; }
.join-in .tr-h2 { font-size: clamp(32px, 4.2vw, 58px); }
.join-in > p { max-width: 32em; margin: 0; font-size: 18.5px; line-height: 1.6; }
.join-in .ctas { justify-content: center; margin-top: 28px; }
.join-in > .nets-h { margin: 44px 0 14px; color: var(--dim); font: 600 12.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
html:lang(zh) .nets-h, html:lang(ja) .nets-h { letter-spacing: .04em; }
.nets { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; }
.nets a { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 16px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500;
  border: 1px solid var(--line); border-radius: 999px; transition: background .15s, border-color .15s, color .15s; }
.nets .bi { width: 17px; height: 17px; flex: none; color: #8fa3b0; }
.nets a:hover { color: #fff; border-color: rgba(95, 203, 230, .5); background: rgba(95, 203, 230, .08); }
.nets a:hover .bi { color: #fff; }
@media (max-width: 520px) { .join-in .ctas { width: 100%; } .join-in .ctas .sn-btn { flex: 1 1 100%; } }

/* reveals (tale-rocket.js marks what starts below the first screen) */
html.tr-js .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
html.tr-js .rv.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .led, .trl-mark, .trl-l, .trl-fire, .h1-l, .tr-cat, .tr-hero-in > .tr-lead, .tr-hero-in > .ctas, .tr-wip, .tr-stage, .lv::after { animation: none !important; }
  .trl-fire { display: none; }
  html.tr-js .cap-t, html.tr-js .cap-m { transition: none; }
}

/* ---------- the blog's pages: blog.css · the footer: the site's one footer, site-nav.css (.sn-foot) — both appended by tools/showcase-build.mjs */

/* The BLOG (tools/showcase-build.mjs, the blog part; words: app/blog-content.js), appended to the showcase stylesheet after showcase.css (its colours, fonts,
   .kicker/.dot and .socials) and before site-nav.css (the bar, the .sn-btn button and the footer). Rewritten 2026-10-17 as a reading page: a 680 px measure,
   18.5 px type with a steady rhythm, figures wider than the text with captions, the game's own lines as pull quotes (the cyan «signal» line of the studio's
   logo, with its dot), the game's terminal notices in green, an honest-note box, a reading-progress bar (scroll-driven in CSS; tools/site-script.mjs where the
   browser lacks it), the contents beside the text on wide screens and folded on phones, the author and the previous / next bulletin.
   Keyframe names start with bp- (tools/check-css.mjs). Phones: 16 px gutters, figures and cover edge to edge, every link ≥ 44 px tall.
   Corporate (owner's verdict of 2026-10-17): the page's grid and scanlines are gone (the base stylesheet's .sc-bg is made flat below), no glows, no window chrome on
   the screenshots; the index is a traditional blog index (a centred title, a grid of cards). */

/* the page's background: flat (showcase.css gives every showcase page a grid and scanlines; the blog does not want them) */
.sc-blog .sc-bg, .sc-post .sc-bg { background: var(--bg); }

/* ---------- reading progress: a 2 px cyan line under the bar */
.bp-progress { position: fixed; left: 0; right: 0; top: 60px; z-index: 49; height: 2px; pointer-events: none; }
.bp-progress i { display: block; height: 100%; background: var(--cy);
  transform: scaleX(var(--bp, 0)); transform-origin: 0 50%; }
@supports (animation-timeline: scroll()) {
  .bp-progress i { animation: bp-read linear both; animation-timeline: scroll(root); }
}
@keyframes bp-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 760px), (max-height: 520px) and (max-width: 1024px) { .bp-progress { top: 56px; } }

/* ---------- a bulletin */
.bp { --measure: 680px; padding: 0 24px; }
.bp-head { max-width: 860px; margin: 0 auto; padding: 34px 0 0; }
.bp-back { margin: 0 0 6px; }
.bp-back a, .bp-all a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dim); font-size: 15px; text-decoration: none; }
.bp-back a:hover, .bp-all a:hover { color: var(--cy); }
.bp-meta { margin: 0 0 16px; color: var(--dim); font-size: 12.5px; line-height: 1.6; letter-spacing: .08em; }
.bp-head h1 { margin: 0 0 22px; font-size: clamp(30px, 5.4vw, 60px); line-height: 1.05; text-wrap: balance; }
html:lang(zh) .bp-head h1, html:lang(ja) .bp-head h1 { line-height: 1.3; font-size: clamp(26px, 4.4vw, 46px); }
.bp-lead { max-width: 38em; margin: 0 0 28px; color: var(--ink); font-size: clamp(19px, 2.1vw, 22.5px); line-height: 1.55; }
.bp-by { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.bp-by p { margin: 0; color: var(--text); font-size: 15px; line-height: 1.5; }
.bp-by small { color: var(--dim); font-size: 13.5px; }
.bp-by a { text-decoration: none; }
.bp-by a:hover { text-decoration: underline; }
.bp-face { display: block; flex: none; width: 44px; height: 44px; padding: 4px; image-rendering: pixelated; background: #0c1d2a; border: 1px solid var(--line-hi); border-radius: 6px; }
.bp-face-lg { width: 72px; height: 72px; padding: 6px; }
.bp-cover { max-width: 1120px; margin: 36px auto 0; background: #000; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.bp-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.bp-layout { max-width: 1120px; margin: 0 auto; }
.bp-body { max-width: var(--measure); margin: 0 auto; padding: 46px 0 0; color: var(--text); font-size: 18.5px; line-height: 1.75; }
html:lang(zh) .bp-body, html:lang(ja) .bp-body { font-size: 17.5px; line-height: 1.95; }
.bp-body > p { margin: 0 0 1.2em; }
.bp-body a:not(.sn-btn):not(.soc) { color: var(--cy); text-decoration-thickness: 1px; text-decoration-color: rgba(95, 203, 230, .5); }
.bp-body a:not(.sn-btn):not(.soc):hover { color: #fff; text-decoration-color: var(--cy); }
.bp-body h2.pf { margin: 2.3em 0 .75em; color: var(--ink); font-size: clamp(21px, 2.5vw, 27px); line-height: 1.2; scroll-margin-top: 88px; }
.bp-body h2.pf::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 16px; background: var(--cy); }
.bp-body > ul { margin: 0 0 1.3em; padding: 0; list-style: none; }
.bp-body > ul li { position: relative; margin: 0 0 .7em; padding-left: 26px; }
.bp-body > ul li::before { content: ""; position: absolute; left: 5px; top: .82em; width: 6px; height: 6px; border-radius: 50%; background: #6f8da0; }

/* the contents: beside the text on wide screens (sticky), folded above it elsewhere */
.bp-toc { display: none; }
.bp-toc > p { margin: 0 0 12px; color: var(--cy); font-size: 11px; letter-spacing: .14em; }
.bp-toc ol, .bp-toc-fold ol { margin: 0; padding: 0; list-style: none; counter-reset: bp-toc; }
.bp-toc li, .bp-toc-fold li { counter-increment: bp-toc; }
.bp-toc ol { border-left: 1px solid var(--line); }
.bp-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--dim); font-size: 14px; line-height: 1.4; text-decoration: none; }
.bp-toc a:hover { color: var(--ink); border-left-color: var(--cy); }
.bp-toc a[aria-current] { color: #fff; border-left: 2px solid var(--cy); padding-left: 13px; }
.bp-toc-fold { margin: 0 0 34px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; }
.bp-toc-fold summary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 0 16px; color: var(--cy); font-size: 12px; letter-spacing: .12em; cursor: pointer; list-style: none; }
.bp-toc-fold summary::-webkit-details-marker { display: none; }
.bp-toc-fold summary::after { content: "+"; font: 400 20px/1 var(--sans); color: var(--cy); }
.bp-toc-fold[open] summary::after { content: "−"; }
.bp-toc-fold ol { padding: 0 16px 10px; }
.bp-toc-fold a { display: flex; gap: 12px; align-items: center; min-height: 44px; color: var(--text); font-size: 15.5px; line-height: 1.35; text-decoration: none; border-top: 1px solid rgba(29, 58, 77, .6); }
.bp-toc-fold a::before { content: counter(bp-toc, decimal-leading-zero); flex: none; color: var(--dim); font: 700 12px/1 var(--sans); }
@media (min-width: 1100px) {
  .bp-layout { display: grid; grid-template-columns: 210px minmax(0, var(--measure)) minmax(0, 1fr); gap: 0 60px; }
  .bp-toc { display: block; position: sticky; top: 96px; align-self: start; margin-top: 54px; }
  .bp-body { grid-column: 2; margin: 0; }
  .bp-toc-fold { display: none; }
}

/* the game's own words: a pull quote on the studio's «signal line», ending in its dot */
.bp-quote { position: relative; margin: 2.1em 0; padding: 2px 0 4px 28px; border-left: 2px solid var(--cy); }
.bp-quote::after { content: ""; position: absolute; left: -5px; bottom: -10px; width: 8px; height: 8px; border-radius: 50%; background: var(--cy); }
.bp-quote blockquote { margin: 0; }
.bp-quote blockquote p { margin: 0; color: #f2f7fa; font-size: clamp(21px, 2.4vw, 26px); line-height: 1.45; text-wrap: pretty; }
.bp-quote figcaption { margin-top: 12px; color: var(--dim); font-size: 14.5px; line-height: 1.4; }
.bp-quote figcaption .pf { margin-right: 8px; color: var(--dim); font-size: 11.5px; letter-spacing: .12em; }

/* a notice of the game's terminals: green on black, as on the plant's screens */
.bp-term { margin: 1.6em 0 1.8em; padding: 18px 20px 16px; color: #8ff5bd; font: 400 15px/1.6 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: #04100b; border: 1px solid rgba(143, 245, 189, .26); border-radius: 8px; overflow-wrap: anywhere; }
.bp-term p { margin: 0 0 .4em; }
.bp-term p:last-child { margin: .7em 0 0; color: rgba(143, 245, 189, .72); }
.bp-term .bp-term-h { margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px solid rgba(143, 245, 189, .22); color: #d4ffe6; font: 700 13.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }

/* an honest aside */
.bp-note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; margin: 1.7em 0; padding: 18px 20px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; }
.bp-note-i { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 3px; color: var(--cy); border: 1px solid rgba(95, 203, 230, .55); border-radius: 50%; font: 700 14px/1 var(--sans); }
.bp-note p { margin: 0; color: var(--ink); font-size: 17px; line-height: 1.65; }

/* figures: wider than the text, a caption hanging from a cyan tick */
.bp-fig { margin: 2.2em 0; }
.bp-fig img { width: 100%; height: auto; background: #070b10; border: 1px solid var(--line); border-radius: 6px; }
.bp-fig figcaption { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--cy); color: var(--dim); font-size: 14.5px; line-height: 1.5; }
.bp-shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; }
@media (min-width: 900px) { .bp-fig { margin-left: -48px; margin-right: -48px; } .bp-fig figcaption { margin-left: 48px; margin-right: 48px; } }

.bp-social { margin: 1em 0 0; }
.bp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 2em 0 0; }

/* the end: who wrote it, the previous and next bulletins, all of them */
.bp-end { margin: 3.4em 0 96px; }
.bp-author { display: flex; align-items: flex-start; gap: 18px; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bp-author .pf { margin: 0 0 6px; color: var(--cy); font-size: 11px; letter-spacing: .14em; }
.bp-author p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.bp-author .bp-author-n { margin: 0 0 4px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.bp-author-n a { color: var(--ink); text-decoration: none; }
.bp-author-n a:hover { color: var(--cy); }
/* the author's networks (they leave the site: new tab) */
.bp-author .bp-author-links { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 10px 0 0 -2px; }
.bp-author-links a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 2px; color: var(--dim, #8fa7b6); font-size: 14px; text-decoration: none; }
.bp-author-links a .bi { width: 16px; height: 16px; color: var(--cy); }
.bp-author-links a:hover { color: #fff; }
.bp-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 26px 0 0; }
.bp-pn a { display: grid; align-content: start; gap: 8px; min-height: 44px; padding: 16px 18px; color: var(--ink); text-decoration: none; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; transition: border-color .15s, background .15s; }
.bp-pn a:hover { border-color: var(--line-hi); background: #0c1b27; }
.bp-pn a span { color: var(--dim); font-size: 11.5px; letter-spacing: .08em; }
.bp-pn a b { font-size: 16.5px; font-weight: 700; line-height: 1.35; }
.bp-pn-next { grid-column: 2; text-align: right; }
.bp-all { margin: 18px 0 0; text-align: center; }

/* ---------- the blog's index: a traditional one — a centred title and a grid of cards (picture, meta, title, two-line excerpt, «Leer») */
.bl-head { max-width: 780px; margin: 0 auto; padding: 76px 24px 0; text-align: center; }
.bl-head h1 { margin: 0 0 20px; font-size: clamp(32px, 5.6vw, 56px); line-height: 1.08; text-wrap: balance; }
html:lang(zh) .bl-head h1, html:lang(ja) .bl-head h1 { line-height: 1.25; }
.bl-intro { max-width: 36em; margin: 0 auto; color: var(--text); font-size: clamp(17px, 1.8vw, 19px); line-height: 1.6; text-wrap: pretty; }
.bl-list { max-width: 1180px; margin: 54px auto 110px; padding: 0 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.bl-card { position: relative; display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: border-color .15s, transform .2s; }
.bl-card:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.bl-card:focus-within { border-color: var(--cy); }
.bl-img { position: relative; display: block; background: #070b10; }
.bl-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center top; }
.bl-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.bl-meta { margin: 0 0 10px; color: var(--dim); font-size: 13px; line-height: 1.4; }
.bl-body h2 { margin: 0 0 10px; font: 700 21px/1.3 var(--sans); text-wrap: balance; }
html:lang(zh) .bl-body h2, html:lang(ja) .bl-body h2 { line-height: 1.45; }
.bl-link { color: var(--ink); text-decoration: none; }
.bl-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }          /* (the whole card is the link) */
.bl-link:focus-visible { outline: 0; }
.bl-card:hover .bl-link { color: #fff; }
.bl-ex { margin: 0 0 18px; color: var(--text); font-size: 15.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html:lang(zh) .bl-ex, html:lang(ja) .bl-ex { line-height: 1.7; }
.bl-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--cy); font: 700 14.5px/1 var(--sans); }
.bl-more i { font-style: normal; transition: transform .15s; }
.bl-card:hover .bl-more i { transform: translateX(4px); }

/* ---------- phones (upright and on their side) */
@media (max-width: 1099px) { .bl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .bl-list { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 40px; } }
@media (max-width: 600px) {
  .bp, .bl-head, .bl-list { padding-left: 16px; padding-right: 16px; }
  .bp-head { padding-top: 18px; }
  .bp-cover { margin: 26px -16px 0; border-left: 0; border-right: 0; }
  .bp-body { padding-top: 32px; font-size: 17.5px; line-height: 1.7; }
  .bp-fig { margin-left: -16px; margin-right: -16px; }
  .bp-fig img, .bp-win { border-left: 0; border-right: 0; }
  .bp-fig figcaption { margin-left: 16px; margin-right: 16px; }
  .bp-quote { padding-left: 20px; }
  .bp-term { margin-left: -16px; margin-right: -16px; padding: 16px; border-left: 0; border-right: 0; font-size: 14px; }
  .bp-note { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
  .bp-ctas { flex-direction: column; align-items: stretch; }
  .bp-pn { grid-template-columns: minmax(0, 1fr); }
  .bp-pn-next { grid-column: auto; text-align: left; }
  .bp-author { gap: 14px; }
  .bp-face-lg { width: 56px; height: 56px; }
  .bl-head { padding-top: 40px; }
  .bl-body { padding: 18px 18px 20px; }
}
@media (max-height: 520px) and (max-width: 1024px) and (min-width: 601px) {
  .bp-head { padding-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-card, .bl-more i { transition: none; }
  .bl-card:hover, .bl-card:hover .bl-more i { transform: none; }
}
@media print { .bp-progress, .bp-toc, .bp-toc-fold, .bp-ctas, .bp-social { display: none; } }

/* The owner's rule (2026-10-17): the pixel font only for titles and big text; small labels (the bulletin line, the contents, captions, «Escribe», previous / next)
   are DM Sans, bold and spaced, like the rest of the reading. */
.sc-post .bp-meta.pf, .bp-toc > .pf, .bp-toc-fold > summary.pf, .bp-quote figcaption .pf, .bp-author .pf, .bp-pn .pf {
  font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; -webkit-font-smoothing: antialiased; }
html:lang(zh) .sc .bp-meta.pf, html:lang(ja) .sc .bp-meta.pf { text-transform: none; letter-spacing: .02em; }
.bp-pn .pf { text-transform: none; letter-spacing: .02em; }

/* The ONE top bar of every public page (markup: app/site-nav.js). Imported by info-v2.css (informative pages) and appended to the showcase stylesheet by
   tools/showcase-build.mjs (blog, Tale Rocket). Self-contained: its own --sn- colours; the pages define the fonts (Grifo Pixel, DM Sans).
   Corporate and quiet (owner's verdict of 2026-10-17: the public pages looked too much like the game's HUD): flat dark surfaces, hairlines, no icons in the menus,
   no glows, no glitch fringes, no scanlines; the pixel font stays only in the logo and the buttons. «Menos es más».
   No script needed: every menu is a <details>; on a desktop with a mouse «Descubre» also opens on hover (::details-content; browsers without it open on click).
   Phones (≤ 760 px, or a phone on its side: ≤ 520 px tall and ≤ 1024 px wide) get a hamburger with a full-height panel.
   The bar has no backdrop-filter of its own (it would trap the panel's position: fixed): the blur lives on its ::before. Keyframes: none. */

.sn-bar, .sn-foot { --sn-h: 60px; --sn-bg: #04080c; --sn-panel: #07111a; --sn-line: #182c3a; --sn-line-hi: #2a4a5e; --sn-ink: #e8f0f4; --sn-text: #c4d4dd; --sn-dim: #8fa7b6;
  --sn-cy: #5fcbe6; --sn-or: #ff8a3d; --sn-gold: #ffb24a;
  --sn-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Hiragino Sans', 'PingFang SC', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
  --sn-pix: 'Grifo Pixel', ui-monospace, monospace; }
.sn-bar {
  position: sticky; top: 0; z-index: 50; isolation: isolate; background: rgba(4, 8, 12, .9); border-bottom: 1px solid #12232f;
  font-family: var(--sn-sans); line-height: 1.3; }
.sn-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: none; }
.sn-bar *, .sn-bar *::before, .sn-bar *::after { box-sizing: border-box; }
.sn-bar ul { margin: 0; padding: 0; list-style: none; }
.sn-bar summary { list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.sn-bar summary::-webkit-details-marker { display: none; }
.sn-bar a, .sn-bar summary { -webkit-tap-highlight-color: transparent; }
.sn-bar :focus-visible { outline: 2px solid var(--sn-gold); outline-offset: 2px; }
.sn-bar .bi { flex: none; }

.sn-in { position: relative; max-width: 1180px; height: var(--sn-h); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 22px; }
.sn-logo { flex: none; color: #f2f5f7; text-decoration: none; font: 400 17px/1 var(--sn-pix); text-transform: uppercase; white-space: nowrap; letter-spacing: .01em; -webkit-font-smoothing: none; }
.sn-logo b { color: var(--sn-cy); font-weight: 400; }
.sn-logo:hover { color: #fff; }

/* the small down-pointing caret of the menus */
.sn-caret { display: inline-block; width: 0; height: 0; margin-left: 7px; border: 4px solid transparent; border-top-color: currentColor; border-bottom-width: 0; transition: transform .15s; }
details[open] > summary .sn-caret { transform: rotate(180deg); }

/* ---------- desktop menu */
.sn-nav { height: 100%; min-width: 0; }
.sn-menu { display: flex; align-items: stretch; height: 100%; gap: 4px; }
.sn-menu > li { display: flex; }
.sn-top { display: inline-flex; align-items: center; height: 100%; padding: 0 12px; color: var(--sn-dim); text-decoration: none; font-size: 14.5px; font-weight: 500;
  white-space: nowrap; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; }
.sn-top:hover, .sn-disc[open] > .sn-top { color: #fff; }
.sn-top[aria-current="page"], .sn-top.sn-on { color: var(--sn-ink); border-bottom-color: var(--sn-cy); }
.sn-top:focus-visible { outline-offset: -4px; }
.sn-disc { display: flex; }
.sn-disc > summary { height: var(--sn-h); }

/* the mega-menu: a plain dark card under the bar, centred on the page */
.sn-mega { position: absolute; top: 100%; left: 50%; z-index: 60; width: min(900px, calc(100vw - 32px)); transform: translateX(-50%); margin-top: 1px;
  background: var(--sn-panel); border: 1px solid var(--sn-line-hi); border-radius: 10px; box-shadow: 0 22px 50px rgba(0, 0, 0, .55); overflow: hidden;
  color: var(--sn-text); text-align: left; }
.sn-mega-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 28px; padding: 22px 24px 18px; }
.sn-h { margin: 0 0 10px; padding: 0 12px; color: #7f98a8; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; }
html:lang(zh) .sn-h, html:lang(ja) .sn-h { letter-spacing: .04em; font-size: 12.5px; }
.sn-col ul { display: grid; gap: 2px; }
.sn-item { display: flex; align-items: center; min-height: 40px; padding: 8px 12px; color: var(--sn-ink); text-decoration: none; font-size: 15px; font-weight: 500; border-radius: 6px; }
.sn-item:hover, .sn-rich:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.sn-item[aria-current="page"], .sn-rich[aria-current="page"] { background: rgba(95, 203, 230, .1); color: #fff; }
.sn-rich { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--sn-ink); text-decoration: none; border-radius: 6px; }
.sn-rt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sn-rh { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.sn-rt b { font-size: 15px; font-weight: 700; }
.sn-rt small { color: var(--sn-dim); font-size: 13px; line-height: 1.4; }
/* a small category tag (After Signal: «Estudio de juegos»; Tale Rocket: «Creador de juegos»): amber text on a faint amber tint with an amber outline, the text centred in the chip */
.sn-tag { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 22px; padding: 2px 10px 0; color: var(--sn-gold); font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .01em; white-space: nowrap;
  background: rgba(255, 178, 74, .1); border: 1px solid rgba(255, 178, 74, .55); border-radius: 999px; }
/* (the fonts' own metrics sit the letters a little high in the chip: a small top padding centres them by eye; the CJK fallback fonts need a bit more) */
html:lang(zh) .sn-tag, html:lang(ja) .sn-tag { padding-top: 3px; }
.sn-chev { flex: none; width: 7px; height: 7px; margin-right: 4px; border: solid #6f8797; border-width: 2px 2px 0 0; transform: rotate(45deg); transition: transform .12s, border-color .12s; }
.sn-rich:hover b { color: #fff; }
.sn-rich:hover .sn-chev { transform: translateX(3px) rotate(45deg); border-color: var(--sn-cy); }

/* the highlighted card: the newest bulletin of the blog (cover, number, title) */
.sn-promo { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; color: var(--sn-ink); text-decoration: none; overflow: hidden;
  background: #0a1620; border: 1px solid var(--sn-line); border-radius: 8px; transition: border-color .12s; }
.sn-promo:hover { border-color: var(--sn-line-hi); }
.sn-promo-k { color: var(--sn-dim); font-size: 11px; letter-spacing: .1em; line-height: 1.4; }
.sn-promo-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; background: #0c1d2a; }
.sn-promo-t { font-size: 14.5px; font-weight: 700; line-height: 1.38; color: var(--sn-ink); }
.sn-promo-cta { color: var(--sn-cy); font-size: 12.5px; letter-spacing: .04em; }
/* the pixel font only for titles and big text (owner, 2026-10-17): the card's small kicker and call are DM Sans */
.sn-bar .sn-promo-k.pf, .sn-bar .sn-promo-cta.pf { font-family: var(--sn-sans); font-weight: 700; text-transform: uppercase; -webkit-font-smoothing: antialiased; }
.sn-promo:hover .sn-promo-cta, .sn-promo:hover .sn-promo-t { color: #fff; }

/* the strip of quick links at the bottom: plain words */
.sn-strip { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 8px 24px; border-top: 1px solid var(--sn-line); background: rgba(0, 0, 0, .22); }
.sn-strip a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--sn-dim); text-decoration: none; font-size: 14px; font-weight: 500; }
.sn-strip a i { font-style: normal; font-size: 12px; color: var(--sn-dim); }
.sn-strip a:hover { color: #fff; }
.sn-strip a[aria-current="page"] { color: #fff; }

/* a mouse on a desktop: hovering «Descubre» shows the card too (the summary fills the bar's height, so moving down never leaves it) */
@media (hover: hover) and (pointer: fine) {
  .sn-disc:hover::details-content { content-visibility: visible; }
  .sn-disc:hover > .sn-top { color: #fff; }
  .sn-disc:hover > summary .sn-caret { transform: rotate(180deg); }
}

/* ---------- the right side: language and play */
.sn-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.sn-lang { position: relative; }
.sn-lang > summary { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; color: #cfe3ec; background: transparent; border: 1px solid var(--sn-line-hi); border-radius: 6px;
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; transition: border-color .12s, color .12s; }
.sn-lang > summary .sn-caret { margin-left: 0; }
.sn-lang > summary:hover, .sn-lang[open] > summary { color: #fff; border-color: #4f7f95; }
.sn-lang .sn-globe { width: 17px; height: 17px; flex: none; color: #8fb0c2; }
.sn-lg-short { display: none; font-weight: 700; letter-spacing: .06em; }
.sn-lang .lang-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 172px; display: grid; padding: 4px; background: var(--sn-panel);
  border: 1px solid var(--sn-line-hi); border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, .6); }
.sn-lang .lang-list a, .sn-lang-grid a { padding: 9px 12px; color: var(--sn-text); text-decoration: none; font-size: 14.5px; line-height: 1.3; border-radius: 5px; }
.sn-lang .lang-list a:hover, .sn-lang-grid a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sn-lang .lang-list a[aria-current], .sn-lang-grid a[aria-current] { color: #fff; background: rgba(95, 203, 230, .12); }

/* «Jugar»: the game's button (the landing's primary .ea-btn.pri), calmed: dark box, cyan edge, Grifo Pixel; hover lights the frame, press flashes orange */
.sn-play { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 38px; padding: 0 16px; color: #e9fbff; text-decoration: none; white-space: nowrap; border-radius: 6px;
  font: 400 15px/1 var(--sn-pix, 'Grifo Pixel'), monospace; text-transform: uppercase; letter-spacing: .03em; -webkit-font-smoothing: none;
  background: rgba(95, 203, 230, .08); box-shadow: inset 0 0 0 1.5px rgba(95, 203, 230, .55);
  transition: background .12s, box-shadow .12s, color .12s; }
.sn-play::before { content: ""; width: 9px; height: 11px; flex: none; background: var(--sn-cy, #5fcbe6); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sn-play:hover, .sn-play:focus-visible { color: #fff; background: rgba(95, 203, 230, .18); box-shadow: inset 0 0 0 1.5px #5fcbe6; }
.sn-play:focus-visible { outline: 2px solid #ffb24a; outline-offset: 3px; }
.sn-play:active { transform: translateY(1px); color: #fff3e6; background: rgba(255, 150, 70, .25); box-shadow: inset 0 0 0 1.5px #ff8a3d; transition: none; }
.sn-play-lg { min-height: 48px; padding: 0 30px; font-size: 16px; }
html:lang(zh) .sn-play, html:lang(ja) .sn-play { font: 700 14px/1 var(--sn-sans, system-ui), sans-serif; text-transform: none; letter-spacing: .02em; -webkit-font-smoothing: antialiased; }

.sn-bar .pf { font-family: var(--sn-pix); font-weight: 400; text-transform: uppercase; -webkit-font-smoothing: none; }
/* Chinese and Japanese: the pixel font has no CJK (the game's name stays in it) */
html:lang(zh) .sn-bar .pf:not(.sn-logo), html:lang(ja) .sn-bar .pf:not(.sn-logo) { font-family: var(--sn-sans); font-weight: 700; text-transform: none; letter-spacing: .02em; -webkit-font-smoothing: antialiased; }
html:lang(zh) .sn-bar .sn-logo.pf, html:lang(ja) .sn-bar .sn-logo.pf { font-family: var(--sn-pix); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; -webkit-font-smoothing: none; }

/* the hamburger and its panel exist only on phones */
.sn-burger { display: none; }

/* ---------- medium widths: the language shrinks to its two letters, the menu gets tighter */
@media (max-width: 1040px) {
  .sn-in { gap: 12px; padding: 0 16px; }
  .sn-top { padding: 0 9px; font-size: 14px; }
  .sn-lg-full { display: none; }
  .sn-lg-short { display: inline; }
  .sn-lang > summary { padding: 0 10px; }
}
@media (max-width: 900px) {
  .sn-logo { font-size: 14px; }
  .sn-play { padding: 0 12px; font-size: 13px; }
  .sn-mega-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .sn-promo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); grid-template-areas: "i k" "i t" "i c"; align-content: center; gap: 6px 20px; }
  .sn-promo-k { grid-area: k; align-self: end; } .sn-promo-shot { grid-area: i; } .sn-promo-t { grid-area: t; } .sn-promo-cta { grid-area: c; align-self: start; }
}

/* ---------- phones (and phones on their side): logo · play sign · ☰ */
@media (max-width: 760px), (max-height: 520px) and (max-width: 1024px) {
  .sn-bar { --sn-h: 56px; }
  .sn-in { gap: 10px; padding: 0 12px 0 14px; }
  .sn-logo { font-size: 15px; }
  .sn-nav, .sn-tools > .sn-lang { display: none; }
  .sn-tools { gap: 8px; }
  .sn-tools > .sn-play { width: 42px; min-height: 40px; padding: 0; }
  .sn-tools > .sn-play span { display: none; }
  .sn-tools > .sn-play::before { width: 12px; height: 14px; }
  .sn-burger { display: block; }
  .sn-burger-btn { display: grid; place-items: center; width: 44px; height: 40px; color: #e9fbff; background: transparent; border: 1px solid var(--sn-line-hi); border-radius: 6px; }
  .sn-burger-btn:hover, .sn-burger[open] > .sn-burger-btn { border-color: #4f7f95; }
  .sn-bars, .sn-bars::before, .sn-bars::after { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .15s, background .15s; }
  .sn-bars { position: relative; }
  .sn-bars::before, .sn-bars::after { content: ""; position: absolute; left: 0; }
  .sn-bars::before { top: -6px; } .sn-bars::after { top: 6px; }
  .sn-burger[open] .sn-bars { background: transparent; }
  .sn-burger[open] .sn-bars::before { transform: translateY(6px) rotate(45deg); }
  .sn-burger[open] .sn-bars::after { transform: translateY(-6px) rotate(-45deg); }
  /* the panel: everything under the bar, scrolling on its own; the page behind does not scroll */
  .sn-panel { position: fixed; left: 0; right: 0; top: var(--sn-h); bottom: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); background: #05101a; border-top: 1px solid var(--sn-line); display: flex; flex-direction: column; gap: 4px; }
  html:has(.sn-burger[open]), html:has(.sn-burger[open]) body { overflow: hidden; }
  .sn-pnav { display: flex; flex-direction: column; }
  .sn-prow { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 6px; color: var(--sn-ink); text-decoration: none;
    font-size: 17px; font-weight: 700; border-bottom: 1px solid var(--sn-line); }
  .sn-prow[aria-current="page"] { color: var(--sn-cy); }
  .sn-acc > summary .sn-caret { margin-right: 6px; }
  .sn-acc[open] > summary { color: #fff; border-bottom-color: transparent; }
  .sn-acc[open] { padding-bottom: 10px; border-bottom: 1px solid var(--sn-line); }
  .sn-acc .sn-h { margin: 12px 0 6px; padding: 0 6px; }
  .sn-acc ul { display: grid; gap: 2px; }
  .sn-acc .sn-item { padding: 6px 6px; font-size: 15.5px; }
  .sn-acc .sn-rich { padding: 10px 6px; }
  .sn-panel .sn-strip { padding: 8px 6px; margin: 0; background: none; border-top: 0; border-bottom: 1px solid var(--sn-line); gap: 0 20px; }
  .sn-panel .sn-strip a { min-height: 44px; font-size: 15px; }
  .sn-panel > .sn-h { margin: 16px 0 6px; padding: 0 6px; }
  .sn-lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  .sn-lang-grid a { padding: 11px 10px; font-size: 15px; }
  .sn-panel > .sn-play { margin-top: 18px; width: 100%; flex: none; }
}
@media (max-height: 520px) and (max-width: 1024px) and (min-width: 561px) {
  .sn-lang-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 360px) { .sn-logo { font-size: 13px; } }

/* ---------- the site's one BUTTON (every public page): dark box, cyan edge, Grifo Pixel — the game's button, calmed (no glow, no glitch fringe, a plain arrow instead of
   the signal glyph). Hover lights the frame; press flashes orange. .sn-btn-q is the quiet one (a hairline frame). Works on any page: its colours are its own. */
.sn-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 18px 0 20px; color: #e9fbff; text-decoration: none; border-radius: 6px;
  font: 400 15px/1.15 'Grifo Pixel', ui-monospace, monospace; text-transform: uppercase; letter-spacing: .03em; text-align: center; -webkit-font-smoothing: none; cursor: pointer;
  background: rgba(95, 203, 230, .08); border: 0; box-shadow: inset 0 0 0 1.5px rgba(95, 203, 230, .55);
  transition: background .12s, box-shadow .12s, color .12s; --pi-water: #5fcbe6; --pi-accent: #ff8a3d; }
.sn-btn::after { content: ""; flex: none; width: 7px; height: 7px; margin-left: -2px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); opacity: .8; transition: transform .12s; }
.sn-btn .pi, .sn-btn .bi { width: 18px; height: 18px; color: #5fcbe6; }
.sn-btn:hover, .sn-btn:focus-visible { color: #fff; background: rgba(95, 203, 230, .18); box-shadow: inset 0 0 0 1.5px #5fcbe6; }
.sn-btn:hover::after { transform: translateX(3px) rotate(45deg); }
.sn-btn:focus-visible { outline: 2px solid #ffb24a; outline-offset: 3px; }
.sn-btn:active { transform: translateY(1px); color: #fff3e6; background: rgba(255, 150, 70, .25); box-shadow: inset 0 0 0 1.5px #ff8a3d; transition: none; }
.sn-btn-q { background: transparent; box-shadow: inset 0 0 0 1px rgba(143, 167, 182, .4); color: #cfe3ec; }
.sn-btn-q::after { opacity: .5; }
.sn-btn-q:hover, .sn-btn-q:focus-visible { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(143, 167, 182, .75); }
.sn-btn-q:hover::after, .sn-btn-q:focus-visible::after { opacity: .85; }
/* a page outside the site: «↗» instead of the arrow */
.sn-btn[data-ext]::after { content: "↗"; width: auto; height: auto; margin-left: 0; border: 0; transform: none; font: 700 15px/1 var(--sn-sans, 'DM Sans', system-ui, sans-serif); -webkit-font-smoothing: antialiased; }
.sn-btn[data-ext]:hover::after { transform: translate(2px, -2px); }
html:lang(zh) .sn-btn, html:lang(ja) .sn-btn { font: 700 15px/1.3 var(--sn-sans, system-ui), sans-serif; text-transform: none; letter-spacing: .02em; -webkit-font-smoothing: antialiased; }

/* ---------- the site's one FOOTER (markup: siteFoot in app/site-nav.js): the studio's sign, three columns of links, the networks */
.sn-foot { position: relative; z-index: 1; background: #03070a; border-top: 1px solid #12232f; color: var(--sn-text); font: 400 15px/1.5 var(--sn-sans); text-align: left; }
.sn-foot *, .sn-foot *::before, .sn-foot *::after { box-sizing: border-box; }
.sn-foot ul { margin: 0; padding: 0; list-style: none; }
.sn-foot a { -webkit-tap-highlight-color: transparent; }
.sn-foot :focus-visible { outline: 2px solid var(--sn-gold); outline-offset: 2px; }
.sn-foot-in { max-width: 1180px; margin: 0 auto; padding: 46px 24px calc(34px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 2.4fr);
  grid-template-areas: "brand nav" "end end"; gap: 30px 56px; }
.sn-fbrand { grid-area: brand; min-width: 0; }
.sn-fstudio { display: inline-flex; align-items: center; gap: 14px; min-height: 48px; color: var(--sn-ink); text-decoration: none; }
.sn-fstudio img { width: 34px; height: auto; flex: none; }
.sn-fstudio span { display: grid; gap: 5px; }
.sn-fstudio b { font: 700 15px/1 var(--sn-sans); letter-spacing: .24em; }
.sn-fstudio small { color: var(--sn-cy); font-size: 10px; line-height: 1; letter-spacing: .46em; }
.sn-fstudio:hover b { color: #fff; }
.sn-fby { margin: 14px 0 6px; color: var(--sn-dim); font-size: 14px; line-height: 1.5; }
.sn-fby a { color: var(--sn-cy); text-decoration: none; }
.sn-fby a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sn-fmail { margin: 0; }
.sn-fmail a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sn-text); font-size: 14px; text-decoration: underline; text-decoration-color: rgba(143, 167, 182, .5); text-underline-offset: 3px; }
.sn-fmail a:hover { color: #fff; text-decoration-color: var(--sn-cy); }
.sn-fnav { grid-area: nav; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; }
.sn-foot .sn-h { margin: 0 0 8px; padding: 0; }
.sn-fcol a { display: inline-flex; align-items: center; min-height: 36px; color: var(--sn-text); font-size: 14.5px; line-height: 1.3; text-decoration: none; }
.sn-fcol a:hover { color: #fff; }
.sn-fcol a[aria-current="page"] { color: var(--sn-cy); }
.sn-fend { grid-area: end; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding-top: 20px; border-top: 1px solid var(--sn-line); }
.sn-fend .sn-h { margin: 0; }
.sn-fsocs { display: flex; flex-wrap: wrap; gap: 4px; margin-right: -10px; }
.sn-fsoc { display: grid; place-items: center; width: 44px; height: 44px; color: #9fb4c2; border-radius: 6px; transition: color .12s, background .12s; }
.sn-fsoc .bi { width: 20px; height: 20px; }
.sn-fsoc:hover { color: #fff; background: rgba(255, 255, 255, .06); }
@media (max-width: 900px) {
  .sn-foot-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "nav" "end"; gap: 28px; padding: 38px 20px calc(30px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .sn-fnav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .sn-fcol:last-child { grid-column: 1 / -1; }
  .sn-fcol:not(:last-child) .sn-h { min-height: 2.5em; }          /* (a title on two lines does not push its column down) */
  .sn-fcol:last-child ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .sn-fcol a { min-height: 44px; }
  .sn-fend { flex-direction: column; align-items: flex-start; }
  .sn-fsocs { margin: 0 0 0 -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-bar *, .sn-bar *::before, .sn-bar *::after, .sn-foot *, .sn-btn, .sn-btn::after { transition-duration: 0s !important; }
}
@media print { .sn-bar, .sn-fend, .sn-fnav { display: none; } }