@import url("./tokens.css");
@import url("./base.css");

h1, h2, h3 { font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
a { text-decoration: none; }
.patterned { position: relative; isolation: isolate; }
.patterned::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-pattern); -webkit-mask: var(--pattern) top center / auto repeat, linear-gradient(var(--pattern-fade)); -webkit-mask-composite: source-in; mask: var(--pattern) top center / auto repeat, linear-gradient(var(--pattern-fade)); mask-composite: intersect; pointer-events: none; }
.hero { --pattern: url("./images/pattern-blocks.svg"); --pattern-fade: #000, transparent; }
.stats-panel { --pattern: url("./images/pattern-folds.svg"); --pattern-fade: 90deg, transparent 30%, #000; }
.start-panel { --pattern: url("./images/pattern-stairs.svg"); --pattern-fade: 270deg, transparent 30%, #000; }
code, pre { font-family: var(--font-code); }
.accent { color: var(--color-accent-text); }

.icon { display: inline-block; flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon--same { --icon: url("./images/icon-same.svg"); }
.icon--folder { --icon: url("./images/icon-folder.svg"); }
.icon--file { --icon: url("./images/icon-file.svg"); }
.icon--cpu { --icon: url("./images/icon-cpu.svg"); }
.icon--memory { --icon: url("./images/icon-memory.svg"); }
.icon--drive { --icon: url("./images/icon-drive.svg"); }
.icon--system { --icon: url("./images/icon-system.svg"); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.button:hover { background: var(--color-accent-hover); }
.button:active { transform: translateY(1px); }
.button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; transition: none; }
.button--quiet { background: var(--color-switch-track); color: var(--color-ink); }
.button--quiet:hover { background: var(--color-rule); }
.button--soon, .button--soon:hover { background: var(--color-switch-track); color: var(--color-muted); cursor: default; }
.button--soon:active { transform: none; }
.button--small { min-height: 32px; padding: 0 14px; font-size: var(--text-sm); }

.media-button {
  min-height: 32px;
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: 6px;
  background: var(--color-tile-2);
  color: var(--color-tile-ink);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.media-button:hover { background: var(--color-tile-rule); }
.media-button:active { transform: translateY(1px); }
.media-button:focus-visible { outline: 2px solid var(--color-tile-accent); outline-offset: 2px; }

.topbar { position: sticky; top: var(--space-sm); z-index: 10; margin-top: var(--space-sm); margin-bottom: calc(-1 * (var(--topbar-height) + var(--space-sm))); }
.topbar-row { display: flex; gap: var(--space-sm); }
.topbar-inner, .theme-toggle { border-radius: 14px; background: color-mix(in srgb, var(--color-surface) 78%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 8px 24px -12px var(--color-shot-shadow); }
.topbar-inner { display: flex; flex: 1; min-width: 0; align-items: center; gap: var(--space-lg); min-height: var(--topbar-height); padding: 0 var(--space-xs) 0 var(--space-md); }
.topbar-home, .footer-home { display: flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; }
.topbar-home img, .footer-home img { width: 30px; height: 30px; }
.footer-home { color: var(--color-footer-ink); justify-self: start; }
.topbar-links { display: flex; gap: var(--space-2xs); margin-inline: auto; }
.topbar-links a { padding: 6px 12px; border-radius: 8px; color: var(--color-ink-2); font-size: var(--text-sm); transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.topbar-links a:hover { background: var(--color-switch-track); color: var(--color-ink); }
.theme-toggle { display: grid; place-items: center; flex: none; width: var(--topbar-height); height: var(--topbar-height); padding: 0; border: 0; color: var(--color-ink-2); cursor: pointer; transition: color var(--dur-micro) var(--ease-out); }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { color: var(--color-accent-text); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-sun, :root[data-theme="dark"] .theme-moon { display: none; }
:root[data-theme="dark"] .theme-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-moon { display: none; }
  :root:not([data-theme="light"]) .theme-sun { display: block; }
}

.hero { padding-block: calc(var(--topbar-height) + var(--space-sm) + var(--space-2xl)) var(--section-gap); }
.hero-copy { display: grid; justify-items: center; gap: var(--space-lg); text-align: center; }
.hero h1 { font-size: var(--text-hero); line-height: 1.08; letter-spacing: -0.03em; }
.hero h1 span { display: block; }
.hero-lead { max-width: 40ch; color: var(--color-ink-2); font-size: var(--text-lead); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-top: var(--space-lg); }
.reel { --reel-gap: var(--space-md); display: grid; gap: var(--reel-gap); margin-top: var(--space-2xl); overflow: clip; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.reel-row { display: flex; gap: var(--reel-gap); width: max-content; animation: reel 160s linear infinite; }
.reel-row--back { animation-direction: reverse; }
.reel-row img { flex: none; width: 400px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-tile); }
@keyframes reel { to { transform: translateX(calc(-50% - var(--reel-gap) / 2)); } }
@media (prefers-reduced-motion: reduce) { .reel-row { animation: none; } }

.media { margin: 0; padding: var(--space-xl); border-radius: var(--radius-tile); background: var(--color-tile); color: var(--color-tile-ink); box-shadow: 0 10px 24px -18px var(--color-shot-shadow); }
.media figcaption { color: var(--color-tile-muted); font-size: var(--text-sm); }
.panel { margin-inline: calc(-1 * clamp(0px, (100vw - 100%) / 2 - var(--space-md), var(--space-2xl))); padding: var(--space-3xl) var(--space-2xl); border-radius: 20px; overflow: clip; background: var(--color-band); box-shadow: 0 10px 24px -18px var(--color-shot-shadow); }
.stats { padding-bottom: var(--space-xl); }
.stats-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; }
.stats h2 { font-size: var(--text-section); }
.stats-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.stats-list > div { padding-inline: var(--space-lg); }
.stats-list dt { font-family: var(--font-display); font-size: var(--text-stat); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.stats-list dt span { font-size: 0.5em; letter-spacing: 0; }
.stats-list dd { margin: var(--space-xs) 0 0; color: var(--color-muted); font-size: var(--text-md); }
.machine { grid-column: 1 / -1; padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-tile); background: var(--color-tile-2); }
.machine-specs { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.machine-specs li { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
.machine-icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-tile); background: var(--color-sharp); color: var(--color-accent-ink); }
.machine-icon .icon { width: 24px; height: 24px; }
.machine-specs b { display: block; font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.machine-specs li > span:last-child { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.4; min-width: 0; }


.row { padding-block: var(--section-gap); }
.row + .row { padding-top: 0; }
.row-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: center; }
.row--flip .row-copy { order: 2; }
.row-copy h2 { font-size: var(--text-section); }
.row-copy > p { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-lead); }
.row-copy > .row-note { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-md); }

.media-stack { position: relative; }
.media-stack > .switch, .media-stack > .button { position: absolute; inset-inline: 0; width: fit-content; margin-inline: auto; }
.media-stack > .switch { bottom: calc(100% + var(--space-md)); }
.media-stack > .button { top: calc(100% + var(--space-md)); }
.switch { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: 10px; background: var(--color-switch-track); }
.switch button {
  min-height: 34px;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.switch button:hover { color: var(--color-ink); }
.switch button[aria-pressed="true"] { background: var(--color-switch-thumb); color: var(--color-ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.14); }
.switch button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.media--walls { display: grid; justify-items: center; padding-block: var(--space-xl) var(--space-lg); }
.walls { --b: 16px; --g: 3px; display: flex; justify-content: center; align-items: flex-end; gap: var(--space-2xl); }
.wall { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); margin: 0; }
.wall-blocks { display: flex; flex-wrap: wrap-reverse; align-content: flex-start; gap: var(--g); width: calc(10 * var(--b) + 9 * var(--g)); height: calc(10 * var(--b) + 9 * var(--g)); }
.wall-blocks span { width: var(--b); height: var(--b); background: var(--color-vanilla); box-shadow: inset 3px 3px 0 0 var(--color-vanilla-light), inset -3px -3px 0 0 var(--color-block-seam); }
.wall--sharp .wall-blocks span { background: var(--color-sharp); box-shadow: inset 3px 3px 0 0 var(--color-sharp-light), inset -3px -3px 0 0 var(--color-block-seam); }
.walls.is-building .wall-blocks span { animation: settle var(--dur-short) var(--ease-out) backwards; animation-delay: calc(var(--i) * 16ms); }
@keyframes settle { from { opacity: 0; transform: translateY(-14px); } }
.wall figcaption, .map figcaption { display: flex; flex-direction: column; align-items: center; }
.wall figcaption b, .map figcaption b { color: var(--color-tile-ink); font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.wall--sharp figcaption b, .map:first-child figcaption b { color: var(--color-tile-accent); }

.media--chunks { padding-block: var(--space-xl) var(--space-lg); }
.maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); width: 100%; }
.map { display: grid; gap: var(--space-sm); margin: 0; }
.map canvas { width: 100%; aspect-ratio: 1; border-radius: 4px; background: var(--color-map-empty); image-rendering: pixelated; }

.replay-scene { display: flex; justify-content: center; }
.replay-scene code { padding: var(--space-xs) var(--space-md); border-radius: 8px; background: var(--color-tile-2); font-size: var(--text-sm); }
.replay-keys { display: flex; justify-content: center; gap: var(--space-lg); margin-top: var(--space-lg); color: var(--color-tile-muted); font-size: var(--text-sm); }
.replay-key { display: flex; align-items: center; gap: var(--space-xs); }
.replay-key::before { content: ""; width: 12px; height: 12px; background: var(--color-vanilla); box-shadow: inset 2px 2px 0 0 var(--color-vanilla-light), inset -2px -2px 0 0 var(--color-block-seam); }
.replay-key--sharp::before { background: var(--color-sharp); box-shadow: inset 2px 2px 0 0 var(--color-sharp-light), inset -2px -2px 0 0 var(--color-block-seam); }
.replay-rows { display: grid; gap: var(--space-xs); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.replay-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: 10px; background: var(--color-tile-2); }
.replay-rows code { grid-area: 1 / 1; font-size: var(--text-sm); overflow-wrap: anywhere; }
.replay-rows .replay-echo { color: var(--color-tile-accent); opacity: 0; }
.replay-verdict { display: flex; grid-area: 1 / 2; color: var(--color-tile-accent); }
.replay-verdict .icon { width: 20px; height: 20px; }
.media .replay-result { margin-top: var(--space-lg); color: var(--color-tile-accent); font-size: var(--text-md); text-align: center; text-wrap: balance; }
.media--replay.is-playing .replay-rows li { animation: matched 1400ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 800ms + 900ms); }
.media--replay.is-playing .replay-rows code:first-child { animation: from-vanilla 900ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 800ms + 200ms); }
.media--replay.is-playing .replay-echo { animation: from-sharp 900ms var(--ease-out); animation-delay: calc(var(--i) * 800ms + 200ms); }
.media--replay.is-playing .replay-verdict { animation: stamp var(--dur-short) var(--ease-out) backwards; animation-delay: calc(var(--i) * 800ms + 900ms); }
.media--replay.is-playing .replay-result { animation: arrive var(--dur-long) var(--ease-out) backwards; animation-delay: calc(var(--i) * 800ms + 500ms); }
@keyframes from-vanilla { from { opacity: 0; transform: translateX(-40px); color: var(--color-vanilla-light); } 70% { color: var(--color-vanilla-light); } }
@keyframes from-sharp { from { opacity: 0; transform: translateX(40px); } 30%, 75% { opacity: 1; } to { opacity: 0; transform: none; } }
@keyframes matched { 25% { background: color-mix(in srgb, var(--color-tile-accent) 22%, var(--color-tile-2)); } }
@keyframes arrive { from { opacity: 0; transform: translateY(-8px); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.6); } }

.checks { display: grid; gap: var(--space-sm); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.checks li { display: flex; gap: var(--space-sm); color: var(--color-ink-2); }
.checks li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; background: var(--color-accent-text); -webkit-mask: url("./images/icon-same.svg") center / contain no-repeat; mask: url("./images/icon-same.svg") center / contain no-repeat; }
.folder-path { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-tile-muted); font-size: var(--text-sm); }
.folder-path .icon { width: 18px; height: 18px; }
.folder-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.folder-items li { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); min-width: 0; padding: var(--space-lg) var(--space-xs) var(--space-md); border-radius: 10px; color: var(--color-tile-ink); font-size: var(--text-sm); text-align: center; }
.folder-items .icon { width: 40px; height: 40px; color: var(--color-tile-muted); }
.folder-items img { width: 40px; height: 40px; }
.folder-items .folder-new { background: color-mix(in srgb, var(--color-tile-accent) 14%, transparent); color: var(--color-tile-accent); font-weight: 600; }
.media--folder.is-dropping .folder-new { animation: drop 700ms var(--ease-out) backwards; animation-delay: 300ms; }
@keyframes drop { from { opacity: 0; transform: translateY(-40px) scale(1.1); } }

.start h2 { font-size: var(--text-section); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: var(--space-md) var(--space-xl); margin: var(--space-xl) 0 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-row: span 3; grid-template-rows: subgrid; counter-increment: step; }
.steps h3 { display: flex; align-items: baseline; gap: var(--space-sm); font-size: var(--text-lg); }
.steps h3::before { content: counter(step); color: var(--color-accent-text); }
.steps p { color: var(--color-ink-2); }
.steps .button, .steps .code { align-self: end; width: 100%; min-height: 48px; }
.code { display: flex; align-items: center; gap: var(--space-xs); padding: 0 var(--space-xs) 0 var(--space-md); border-radius: var(--radius); background: var(--color-code-bg); color: var(--color-code-ink); }
.code code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding-block: var(--space-xs); font-size: var(--text-sm); }
.copy { flex: none; min-height: 32px; padding: 0 var(--space-sm); border: 0; border-radius: 6px; background: color-mix(in srgb, var(--color-code-ink) 12%, transparent); color: var(--color-code-ink); font-size: var(--text-xs); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.copy:hover { background: color-mix(in srgb, var(--color-code-ink) 20%, transparent); }
.copy:active { transform: translateY(1px); }
.copy:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.faq { padding-block: var(--section-gap); }
.faq h2 { font-size: var(--text-section); text-align: center; }
.faq-list { display: grid; gap: var(--space-sm); max-width: 760px; margin: var(--space-xl) auto 0; }
.faq details { border-radius: 14px; background: var(--color-surface); box-shadow: 0 10px 24px -18px var(--color-shot-shadow); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg); font-weight: 600; cursor: pointer; list-style: none; border-radius: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-rule); color: var(--color-ink); font-size: 1.25rem; font-weight: 400; line-height: 1; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.faq summary:hover::after { background: color-mix(in srgb, var(--color-rule), var(--color-ink) 14%); }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--color-accent); color: var(--color-accent-ink); }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq details p { padding: 0 var(--space-xl) var(--space-lg) var(--space-lg); color: var(--color-ink-2); }

.downloads { --pattern: url("./images/pattern-blocks.svg"); --pattern-fade: #000, transparent; padding-block: calc(var(--topbar-height) + var(--space-sm) + var(--space-2xl)) var(--section-gap); }
.downloads-copy { display: grid; justify-items: center; gap: var(--space-md); text-align: center; }
.downloads h1 { font-size: var(--text-hero); line-height: 1.08; letter-spacing: -0.03em; }
.build { max-width: 760px; margin: var(--space-2xl) auto 0; padding: var(--space-xl); border-radius: 20px; background: var(--color-surface); box-shadow: 0 10px 24px -18px var(--color-shot-shadow); }
.build-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.build-head > div { flex: 1; min-width: 0; }
.build-head h2 { font-size: var(--text-xl); }
.build-head p { color: var(--color-muted); font-size: var(--text-sm); }
.build-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin: var(--space-xl) 0 0; }
.build-facts dt { color: var(--color-muted); font-size: var(--text-sm); }
.build-facts dd { margin: var(--space-xs) 0 0; }
.build-facts .code code { font-size: var(--text-xs); white-space: normal; overflow-wrap: anywhere; }
.downloads-next { margin-top: var(--space-xl); color: var(--color-muted); text-align: center; }
.downloads-next a { color: var(--color-accent-text); font-weight: 500; }
.downloads-next a:hover { color: var(--color-accent-hover); }

.footer { padding-block: var(--space-2xl) var(--space-xl); background: var(--color-footer); color: var(--color-footer-muted); }
.footer-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
.footer-columns div { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-columns h2 { margin-bottom: var(--space-xs); color: var(--color-footer-ink); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; }
.footer-columns a { color: var(--color-footer-muted); font-size: var(--text-sm); transition: color var(--dur-micro) var(--ease-out); }
.footer-columns a:hover { color: var(--color-footer-accent); }
.footer-base { display: grid; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-footer-rule); }
.footer-base p { font-size: var(--text-sm); }

@media (max-width: 75rem) { .stats-panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .stats-list > div { padding-inline: 0 var(--space-lg); } .machine { grid-column: auto; padding: var(--space-lg); } .machine-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .machine-specs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 60rem) {
  :root { --gap-columns: 40px; --section-gap: 72px; }
  .topbar-links { display: none; }
  .topbar-home { margin-right: auto; }
  .hero { padding-top: calc(var(--topbar-height) + var(--space-sm) + var(--space-xl)); }
  .reel { margin-top: var(--space-xl); }
  .reel-row img { width: 260px; }
  .row-grid { grid-template-columns: minmax(0, 1fr); }
  .media-stack { display: grid; gap: var(--space-md); justify-items: center; }
  .media-stack > .media { justify-self: stretch; }
  .media-stack > .switch, .media-stack > .button { position: static; }
  .row--flip .row-copy { order: 0; }
  .panel { padding: var(--space-2xl) var(--space-lg); }
  .steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-xl); }
  .steps li { grid-row: auto; grid-template-rows: none; gap: var(--space-md); }
  .stats-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .stats-list > div { padding-inline: 0; }
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .build { padding: var(--space-lg); }
  .build-head .button { width: 100%; }
  .folder-items li { padding-inline: 0; font-size: var(--text-xs); }
  .media { padding: var(--space-lg) var(--space-md); }
  .walls { --b: 12px; --g: 2px; gap: var(--space-lg); }
  .maps { gap: var(--space-sm); }
}
[data-chunks]:not(.is-live) .map canvas { background: url("./images/world-map.png") center / cover; }