* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-size: 20px; line-height: 1.65; }
button, a { -webkit-tap-highlight-color: transparent; }
button, kbd { font: inherit; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-underline-offset: 5px; }
a:hover { text-decoration-thickness: 2px; }
img { display: block; image-rendering: pixelated; flex-shrink: 0; }
:where(img[src*="assets/icons/"]) { filter: brightness(0) saturate(100%) invert(25%) sepia(18%) saturate(1219%) hue-rotate(160deg) brightness(94%) contrast(90%); }
button, h1, h2, h3, strong { font-weight: 400; }
h1, h2, h3, p, figure { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.wrap { width: min(1160px, calc(100% - 80px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 20; background: var(--card); padding: 12px; }
.skip-link:focus { top: 12px; }
.header { display: flex; align-items: center; justify-content: space-between; min-height: 112px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 28px; text-decoration: none; white-space: nowrap; }
.header-nav { display: flex; align-items: center; gap: 32px; font-size: 18px; }
.header-nav a { text-decoration: none; }
.language-link { white-space: nowrap; font-size: 16px; color: var(--graphite); }
html[lang="en"] h1 { white-space: normal; letter-spacing: 0; }
.theme-button { display: grid; place-items: center; border: 0; width: 48px; height: 48px; padding: 12px; background: var(--chrome); clip-path: var(--pixel-corners); }
.theme-button:hover { background: var(--card); }
.theme-button:focus-visible { clip-path: none; }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; padding: 52px 0 78px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--graphite); font-size: 18px; }
.beta-tag { display: inline-block; padding: 2px 12px; font-size: 16px; letter-spacing: 1px; color: #2c4a5c; background: var(--yellow); clip-path: polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px); }
h1 { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.55; letter-spacing: -.04em; white-space: nowrap; }
.hero-description { margin: 24px 0 32px; font-size: 22px; line-height: 1.75; color: var(--graphite); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 28px; font-size: 22px; line-height: 1.4; text-decoration: none; clip-path: var(--pixel-corners); transition: background-color .15s; }
.primary { background: var(--ink); color: var(--card); }
.primary img { filter: brightness(0) invert(1); }
.primary:hover { background: var(--graphite); }
.button:disabled { border: 0; cursor: default; background: var(--chrome); color: var(--ink); }
.button:disabled img { filter: none; }
.button:focus-visible { clip-path: none; }
.download-options { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.download-note { margin-top: 12px; max-width: 440px; font-size: 14px; line-height: 1.6; color: var(--graphite); }
.download-meta { margin-top: 12px; font-size: 16px; color: var(--graphite); }
.release-link { display: inline-block; font-size: 14px; margin-top: 20px; color: var(--graphite); }
.app-figure { width: 100%; max-width: 464px; justify-self: end; position: relative; }
.app-figure::before { content: ''; position: absolute; z-index: -1; width: 96%; height: 94%; top: 18px; left: 22px; background: var(--chrome); clip-path: var(--pixel-corners); }
.app-frame { padding: 2px; background: var(--app-line); clip-path: var(--pixel-corners); }
.app-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 12px; background: var(--chrome); font-size: 16px; }
.app-titlebar>span { display: flex; align-items: center; gap: 8px; }
.window-marks { gap: 12px !important; }
.app-body { background: var(--paper); padding: 24px 24px 12px; }
.app-panel { height: 396px; }
#preview-home { display: flex; flex-direction: column; }
#preview-home>.pixel-scene { flex: 1; min-height: 0; }
#preview-home>.demo-switch-row { margin-top: 12px; flex-shrink: 0; }
#preview-home .keeper { width: 144px; height: 144px; }
#preview-home .app-game { margin-top: 4px; }
[data-theme="dark"] .demo-actions img { filter: brightness(0) invert(94%) sepia(9%) saturate(540%) hue-rotate(145deg); }
@media (max-width: 480px) { #preview-home .keeper { width: 120px; height: 120px; } .demo-actions span { font-size: 16px; } }
.demo-actions { display: flex; gap: 12px; margin-top: 12px; flex-shrink: 0; }
.demo-actions span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; background: var(--card); clip-path: var(--pixel-corners); font-size: 18px; white-space: nowrap; }
.app-wordmark { font-size: 32px; text-align: center; }
.pixel-scene { position: relative; height: 192px; display: grid; place-items: center; background-image: radial-gradient(var(--pattern) 1px, transparent 1px); background-size: 16px 16px; }
.keeper { position: relative; z-index: 1; }
.floating { animation: float 5s steps(8, end) infinite; }
.cloud { position: absolute; width: 96px; height: 48px; background: var(--cloud); clip-path: polygon(25% 0,62.5% 0,62.5% 25%,87.5% 25%,87.5% 50%,100% 50%,100% 87.5%,87.5% 87.5%,87.5% 100%,12.5% 100%,12.5% 87.5%,0 87.5%,0 50%,12.5% 50%,12.5% 25%,25% 25%); animation: float 7s steps(8,end) infinite; }
.cloud-a { left: 0; top: 60px; }
.cloud-b { right: 0; bottom: 16px; animation-delay: -3s; }
.star { position: absolute; width: 24px; height: 24px; animation: twinkle 4s steps(2,end) infinite; }
.star-a { left: 20%; top: 12px; filter: invert(76%) sepia(49%) saturate(284%) hue-rotate(353deg) brightness(100%) contrast(86%); }
.star-b { right: 10%; top: 36px; filter: invert(77%) sepia(18%) saturate(688%) hue-rotate(156deg) brightness(93%) contrast(88%); animation-delay: -1s; }
.star-c { left: 9%; bottom: 20px; filter: invert(80%) sepia(17%) saturate(520%) hue-rotate(101deg) brightness(92%) contrast(89%); animation-delay: -2s; }
.app-game { text-align: center; font-size: 28px; margin-top: 10px; }
.app-status { text-align: center; font-size: 16px; color: var(--graphite); }
.demo-switch-row { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding: 16px; background: var(--card); clip-path: var(--pixel-corners); font-size: 20px; }
.on-text { margin-left: auto; color: var(--success); font-size: 14px; }
.demo-switch { width: 48px; height: 28px; flex-shrink: 0; padding: 4px; background: var(--switch); display: flex; justify-content: end; clip-path: polygon(4px 0,44px 0,44px 4px,48px 4px,48px 24px,44px 24px,44px 28px,4px 28px,4px 24px,0 24px,0 4px,4px 4px); }
.demo-switch::after { content: ''; width: 20px; height: 20px; background: var(--thumb); }
.app-nav { display: flex; gap: 8px; padding-top: 12px; }
.app-nav button { flex: 1; min-height: 68px; border: 0; background: transparent; font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.app-nav button[aria-pressed="true"] { background: var(--pink); clip-path: var(--pixel-corners); }
.app-nav button:hover { background: var(--chrome); }
.app-nav button:focus-visible { clip-path: none; outline-offset: -4px; }
figcaption { text-align: center; font-size: 12px; color: var(--graphite); margin-top: 20px; }
.alternate-panel { background: var(--card); padding: 20px; clip-path: var(--pixel-corners); }
.alternate-panel h2 { font-size: 28px; margin-bottom: 20px; }
.demo-tabs { display: flex; gap: 24px; font-size: 18px; }
.demo-tabs span { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; }
.demo-tabs .active { border-bottom: 2px solid var(--ink); }
.empty-game { text-align: center; padding: 28px 0 16px; color: var(--graphite); font-size: 20px; }
.empty-game img { margin: 0 auto 12px; }
.preview-help { text-align: center; font-size: 14px; color: var(--graphite); margin-top: 16px; }
.demo-volume { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; font-size: 18px; margin: 12px 0 20px; }
.demo-reset { background: var(--paper); padding: 4px 12px; font-size: 14px; }
.demo-track { width: 100%; height: 4px; margin: 28px 0 16px; background: var(--line); position: relative; }
.demo-track::before { content: ''; position: absolute; width: 13.63%; height: 4px; background: var(--pink); }
.demo-track i { position: absolute; top: -6px; left: 13.63%; width: 16px; height: 16px; background: var(--ink); }
.demo-game-list { margin-top: 24px; }
.demo-game-row { display: flex; width: 100%; align-items: center; gap: 10px; border: 0; background: transparent; text-align: left; padding: 14px 10px; font-size: 16px; }
.demo-game-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.demo-game-row small { font-size: 12px; color: var(--success); white-space: nowrap; }
.demo-game-row .detection-badge { color: #fafefa; background: var(--switch); padding: 4px 10px; clip-path: polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),0 calc(100% - 2px),0 2px,4px 2px); }
.demo-game-row.detected { background: #d9f0e4; border-left: 4px solid var(--success); clip-path: var(--pixel-corners); }
.demo-game-row.detected.is-selected { background: var(--pink); }
[data-theme="dark"] .demo-game-row.detected { background: #27483f; }
[data-theme="dark"] .demo-game-row.detected.is-selected { background: var(--pink); }
.demo-individual-button { margin: 20px 0 0; padding: 8px 16px; background: var(--paper); border: 0; font-size: 16px; }
.demo-heading { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.demo-heading h2 { font-size: 24px; }
.demo-heading button { padding: 4px; border: 0; background: transparent; font-size: 14px; }
.demo-auto { position: relative; margin-top: 0; padding: 12px; }
.demo-auto input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.demo-auto:focus-within { outline: 2px solid var(--focus); clip-path: none; }
.demo-auto:has(input:not(:checked)) .demo-switch { justify-content: start; background: var(--graphite); }
.demo-manual { padding: 16px 12px; margin-top: 24px; clip-path: var(--pixel-corners); font-size: 16px; }
.demo-manual.is-disabled { background: var(--manual-surface); color: var(--manual-text); }
.demo-manual.is-disabled label, .demo-manual.is-disabled .demo-volume-labels { color: inherit; background: transparent; }
.demo-manual input { display: block; width: 100%; margin: 24px 0 18px; accent-color: var(--ink); }
.demo-manual.is-disabled input { opacity: .4; }
.demo-volume-labels { width: 100%; display: flex; justify-content: space-between; font-size: 14px; color: var(--graphite); }
.demo-setting { display: flex; gap: 12px; align-items: center; padding: 16px 0; font-size: 16px; }
.demo-setting small { margin-left: auto; font-size: 12px; color: var(--graphite); }
.principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; padding: 32px 0 88px; }
.principles img { margin-bottom: 16px; }
.principles h2 { font-size: 26px; margin-bottom: 8px; }
.principles p { font-size: 18px; color: var(--graphite); }
.how-section { padding: 72px 0 60px; text-align: center; background: var(--card); clip-path: polygon(0 12px,24px 12px,24px 4px,48px 4px,48px 0,calc(100% - 48px) 0,calc(100% - 48px) 4px,calc(100% - 24px) 4px,calc(100% - 24px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 24px) calc(100% - 12px),calc(100% - 24px) calc(100% - 4px),calc(100% - 48px) calc(100% - 4px),calc(100% - 48px) 100%,48px 100%,48px calc(100% - 4px),24px calc(100% - 4px),24px calc(100% - 12px),0 calc(100% - 12px)); }
.section-kicker { font-size: 14px; color: var(--graphite); letter-spacing: 2px; margin-bottom: 12px; }
.how-section h2, .control-section h2, .closing h2 { font-size: 36px; line-height: 1.5; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); list-style: none; padding: 0; margin: 40px 0 32px; gap: 64px; }
.steps li { position: relative; }
.steps li:not(:last-child)::after { content: '→'; position: absolute; right: -44px; top: 70px; font-size: 36px; color: var(--app-line); }
.step-number { font-size: 18px; color: var(--graphite); }
.step-picture { height: 120px; display: grid; place-items: center; }
.steps h3 { font-size: 24px; }
.steps p, .how-note { font-size: 18px; color: var(--graphite); }
.control-section { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; padding-top: 104px; padding-bottom: 104px; }
.control-copy>p:not(.section-kicker) { margin: 24px 0; color: var(--graphite); }
.text-link { font-size: 18px; }
.shortcut-note { padding: 36px; background: var(--chrome); clip-path: var(--pixel-corners); }
.shortcut-note>img { margin-bottom: 16px; }
.shortcut-note>p { font-size: 26px; }
.keycaps { display: flex; gap: 12px; align-items: center; margin: 24px 0 16px; }
kbd { display: inline-grid; place-items: center; min-width: 68px; padding: 12px 16px; background: var(--card); box-shadow: 0 4px 0 var(--app-line); font-size: 24px; }
.shortcut-note small { font-size: 14px; color: var(--graphite); }
.shortcut-bottom { display: flex; align-items: center; gap: 16px; margin-top: 24px; font-size: 16px; }
.beta-section { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; padding-bottom: 72px; }
.beta-heading h2 { margin-top: 12px; font-size: 30px; }
.beta-heading p { color: var(--graphite); font-size: 18px; margin-top: 8px; }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; font-size: 20px; list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] summary img { transform: rotate(90deg); }
details p { font-family: "Yu Gothic UI",system-ui,sans-serif; font-size: 15px; line-height: 1.9; padding: 0 32px 24px 0; color: var(--graphite); }
.closing { text-align: center; padding: 56px 0 72px; background-image: radial-gradient(var(--pattern) 1px,transparent 1px); background-size: 24px 24px; }
.closing>img { margin: 0 auto 16px; }
.closing h2 { margin-bottom: 24px; font-size: 32px; }
.safety-note { font-family: "Yu Gothic UI",system-ui,sans-serif; font-size: 12px; color: var(--graphite); margin-top: 28px; }
.footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--graphite); }
.footer-brand { font-size: 20px; color: var(--ink); gap: 8px; }
.footer-id { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.footer nav { display: flex; gap: 24px; }
.footer nav a { text-decoration: none; }
.license-content { max-width: 760px; padding: 48px 0 100px; font-family: "Yu Gothic UI",system-ui,sans-serif; font-size: 16px; }
.license-content h1 { font-size: 32px; white-space: normal; }
.license-content h2 { font-size: 24px; margin: 40px 0 16px; }
.license-content p { margin-bottom: 16px; }
[data-theme="dark"] .primary img { filter: brightness(0); }
[data-theme="dark"] .button:disabled img { filter: none; }
[data-theme="dark"] .demo-game-row img { filter: brightness(0) invert(94%) sepia(9%) saturate(540%) hue-rotate(145deg); }
@media (max-width: 480px) { .header-nav .release-status-link { display: none; } }
@media (max-width: 600px) { .header { flex-wrap: wrap; gap: 12px; padding-block: 16px; } .header-nav { margin-left: auto; flex-wrap: wrap; } .header-nav>a[href="#how"] { display: none; } }
@media (max-width: 360px) { html[lang="en"] .demo-tabs { gap: 12px; font-size: 16px; } html[lang="en"] .demo-game-row { gap: 6px; padding-inline: 6px; } html[lang="en"] .demo-game-row .detection-badge { padding-inline: 6px; } html[lang="en"] .demo-switch-row>img { display: none; } }
[data-theme="dark"] .theme-button img, [data-theme="dark"] .app-nav img, [data-theme="dark"] .window-marks img, [data-theme="dark"] .demo-switch-row>img, [data-theme="dark"] .demo-tabs img, [data-theme="dark"] .demo-setting img, [data-theme="dark"] .principles img, [data-theme="dark"] .step-picture>img:not([src*="keeper"]), [data-theme="dark"] .shortcut-note>img, [data-theme="dark"] summary img, [data-theme="dark"] .empty-game img { filter: brightness(0) invert(94%) sepia(9%) saturate(540%) hue-rotate(145deg); }
html.motion-paused *, .app-panel[hidden] * { animation-play-state: paused !important; }
@keyframes float { 0%,100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes twinkle { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
@media (max-width: 1000px) { .wrap { width: calc(100% - 48px); } .hero { gap: 32px; } h1 { font-size: 32px; } .hero-description { font-size: 20px; } .app-body { padding-inline: 16px; } .demo-switch-row { font-size: 18px; } .control-section { gap: 48px; } .beta-section { gap: 48px; } }
@media (max-width: 760px) { .header { min-height: 88px; } .brand { font-size: 24px; gap: 8px; } .brand>img { width: 36px; height: 36px; } .header-nav { gap: 20px; font-size: 16px; } .github-link { display: none; } .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 36px; } .hero-copy { text-align: center; } .eyebrow { justify-content: center; } h1 { font-size: clamp(28px,4.4vw,40px); } .hero-description { margin: 20px 0 28px; } .app-figure { justify-self: center; max-width: 432px; } .principles { gap: 24px; padding: 0 0 64px; } .principles h2 { font-size: 22px; } .principles p { font-size: 16px; } .steps { gap: 32px; } .steps li:not(:last-child)::after { right: -26px; font-size: 24px; } .steps h3 { font-size: 20px; } .steps p { font-size: 16px; } .control-section { grid-template-columns: 1fr; gap: 36px; padding-block: 72px; max-width: 520px; } .control-copy { text-align: center; } .beta-section { grid-template-columns: 1fr; gap: 24px; padding-bottom: 32px; } .beta-heading { text-align: center; } .footer { justify-content: center; } .footer p { width: 100%; text-align: center; } }
@media (max-width: 480px) { .wrap { width: calc(100% - 40px); } .header-nav { gap: 16px; } .theme-button { width: 40px; height: 40px; padding: 8px; } .hero { padding-top: 28px; padding-bottom: 60px; } h1 { font-size: 28px; } .hero-description { font-size: 18px; } .button { font-size: 20px; padding: 16px 20px; } .download-meta { font-size: 14px; } .release-link { font-size: 12px; } .app-figure::before { left: 12px; top: 12px; } .app-body { padding-inline: 12px; } .app-panel { height: 388px; } .alternate-panel { padding: 16px; } .app-titlebar { font-size: 14px; } .window-marks { gap: 8px !important; } .demo-switch-row { padding: 12px; gap: 8px; font-size: 18px; } figcaption { font-size: 12px; max-width: 280px; margin-inline: auto; } .principles { grid-template-columns: 1fr; gap: 28px; } .principles>div { display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; } .principles img { grid-row: 1 / 3; align-self: center; margin: 0; } .principles h2 { font-size: 24px; margin: 0; } .how-section { padding-block: 52px; } .how-section h2, .control-section h2 { font-size: 30px; } .steps { grid-template-columns: 1fr; gap: 48px; margin-top: 32px; } .steps li:not(:last-child)::after { content: '↓'; top: auto; bottom: -44px; right: calc(50% - 12px); } .steps h3 { font-size: 24px; } .step-picture { height: 112px; } .how-note { font-size: 16px; max-width: 260px; margin: 0 auto; } .shortcut-note { padding: 28px 24px; } .shortcut-note>p { font-size: 24px; } .keycaps { gap: 8px; } kbd { min-width: 56px; font-size: 20px; padding: 12px; } .shortcut-bottom { gap: 12px; font-size: 14px; } .beta-heading h2 { font-size: 28px; } summary { font-size: 18px; } .closing h2 { font-size: 24px; } .safety-note { max-width: 280px; margin-inline: auto; } .footer nav { gap: 20px; } .demo-setting { gap: 8px; font-size: 14px; } .demo-setting small { font-size: 11px; } }
@media (max-width: 360px) { .wrap { width: calc(100% - 32px); } h1 { font-size: 24px; } .header-nav { gap: 10px; } .brand { font-size: 22px; } .demo-switch-row { font-size: 16px; } .app-nav button { font-size: 14px; } .demo-setting { flex-wrap: wrap; } .demo-setting small { margin-left: 32px; } }

.demo-game-row .demo-game-name { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.demo-game-row .demo-manual-mode { color: var(--graphite); font-size: 14px; line-height: 1.4; }

/* Homepage illustration: every game starts quiet and rises to the same usual level, never to its original. CSS only; no audio. */
.story { padding: 8px 0 88px; text-align: center; }
.story h2 { font-size: 36px; line-height: 1.5; }
.story-lead { margin-top: 8px; font-size: 18px; color: var(--graphite); }
.story-figure { max-width: 880px; margin: 40px auto 0; }
.story-stage { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "source bars keeper"; align-items: center; gap: 40px; }
.story-source { grid-area: source; display: flex; align-items: center; gap: 16px; }
.story-waves { display: flex; align-items: center; gap: 8px; height: 112px; }
.story-waves i { width: 12px; background: var(--pink); }
.story-waves i:nth-child(1) { height: 12px; } .story-waves i:nth-child(2) { height: 18px; } .story-waves i:nth-child(3) { height: 24px; } .story-waves i:nth-child(4) { height: 30px; } .story-waves i:nth-child(5) { height: 36px; }
.story-bars { grid-area: bars; position: relative; display: flex; justify-content: space-around; align-items: flex-end; height: 240px; }
.story-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 72px; }
/* The dashed outline is the game's original volume; it is never played. */
.story-ghost { position: relative; width: 100%; height: calc(72px + var(--excess)); border: 2px dashed var(--yellow); border-bottom: 0; }
.story-ghost i { position: absolute; left: -2px; right: -2px; bottom: 0; height: 72px; background: var(--pink); animation: story-rise 8s linear infinite; }
.story-name { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; font-size: 16px; white-space: nowrap; }
.story-line { position: absolute; left: 0; right: 0; bottom: 110px; height: 2px; background-image: linear-gradient(90deg, var(--ink) 50%, transparent 50%); background-size: 8px 2px; }
.story-keeper { grid-area: keeper; width: 144px; height: 144px; }
.story-legend { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; color: var(--graphite); }
.story-legend span { display: flex; align-items: center; gap: 10px; }
.story-key-usual { width: 32px; height: 2px; background-image: linear-gradient(90deg, var(--ink) 50%, transparent 50%); background-size: 8px 2px; }
.story-key-original { width: 20px; height: 12px; border: 2px dashed var(--yellow); border-bottom: 0; }
.story-steps { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; font-size: 22px; }
.story-step-a { animation: story-step-a 8s steps(1, end) infinite; }
.story-step-b { animation: story-step-b 8s steps(1, end) infinite; }
[data-theme="dark"] .story img[src*="assets/icons/"] { filter: brightness(0) invert(94%) sepia(9%) saturate(540%) hue-rotate(145deg); }
@keyframes story-rise { 0%, 36% { height: 28px; } 46%, 96% { height: 72px; } 100% { height: 28px; } }
@keyframes story-step-a { 0% { opacity: 1; } 40%, 100% { opacity: .45; } }
@keyframes story-step-b { 0% { opacity: .45; } 40%, 100% { opacity: 1; } }
@media (max-width: 760px) { .story { padding-bottom: 64px; } .story h2 { font-size: 30px; } .story-lead { font-size: 16px; } .story-stage { grid-template-columns: 1fr 1fr; grid-template-areas: "source keeper" "bars bars"; gap: 24px; justify-items: center; } .story-bars { width: 100%; } .story-keeper, .story-keeper img { width: 96px; height: 96px; } .story-source>img { width: 96px; height: 84px; } .story-steps { font-size: 18px; } }
@media (max-width: 480px) { .story h2 { font-size: 24px; } .story-bar { width: 56px; } .story-name { font-size: 14px; } .story-name img { display: none; } .story-waves i { width: 8px; } .story-steps { font-size: 16px; gap: 6px; } .story-steps img { width: 16px; height: 16px; } }
/* Game settings preview: chat mode switch shown in its OFF state. */
.demo-chat { margin-top: 12px; padding: 10px 12px; font-size: 16px; }
.demo-chat .on-text { color: var(--graphite); }
.demo-chat .demo-switch { justify-content: start; background: var(--graphite); }
.demo-manual { margin-top: 16px; }
[data-theme="dark"] .demo-chat>img { filter: brightness(0) invert(94%) sepia(9%) saturate(540%) hue-rotate(145deg); }