/* dexterm.xyz home (task-1721). Loaded after /site.css (the tokens, type, buttons, chips, dialogs live there).
   Rhythm: a dense terminal beat, then a breathing beat. Every moving thing is transform/opacity (GPU) or a canvas
   that pauses off screen; prefers-reduced-motion leaves a finished, static page. */

.home { background:
  radial-gradient(1400px 800px at 75% -5%, rgba(0, 240, 255, .09), transparent 60%),
  radial-gradient(1000px 700px at -5% 5%, rgba(57, 255, 20, .08), transparent 60%),
  var(--dx-bg); }
.home main { position: relative; z-index: 1; }
.home .top .wrap { gap: 8px 14px; }
.home .nav.jump { margin-left: 18px; }
.home .nav.jump kbd { font-size: 10.5px; margin-right: 6px; min-width: 1.6em; padding: 0 .3em; line-height: 1.45; }
.home .nav.out { margin-left: auto; }

/* ---------------------------------------------------------------- hero */
.hero-x { position: relative; min-height: min(100svh, 980px); padding: clamp(28px, 5vw, 64px) 0 clamp(40px, 6vw, 80px); overflow: hidden; isolation: isolate; }
.candles { position: absolute; top: 0; bottom: 0; left: 38%; right: 0; width: 62%; height: 100%; z-index: -1; opacity: .5; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); }
.hero-x::before { content: ''; position: absolute; inset: auto 0 0 0; height: 46%; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(57, 255, 20, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(57, 255, 20, .14) 1px, transparent 1px);
  background-size: 56px 56px; transform: perspective(600px) rotateX(62deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero-kick { margin: 0 0 22px; font-size: 13px; }
.hero-kick a { display: inline-flex; align-items: center; gap: 10px; color: var(--dx-text); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px 6px 6px; min-height: 40px; background: var(--glass); backdrop-filter: blur(8px); transition: border-color var(--t1), box-shadow var(--t2); }
.hero-kick a:hover { border-color: rgba(57, 255, 20, .5); box-shadow: 0 0 24px rgba(57, 255, 20, .14); }
.pill { background: var(--dx-phosphor); color: #021004; font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.wm-wrap { width: clamp(180px, 22vw, 300px); margin: 0 0 18px; }
.wm-wrap .wm { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 14px rgba(57, 255, 20, .35)); }
.wm-ghost { opacity: .55; mix-blend-mode: screen; }
.wm-m { animation: wm-g1 6s steps(1) infinite; }
.wm-c { animation: wm-g2 6s steps(1) infinite; }
@keyframes wm-g1 { 0%, 100% { transform: translate(-2px, 0); } 61% { transform: translate(-7px, 1px); } 62% { transform: translate(4px, -1px); } 63% { transform: translate(-2px, 0); } }
@keyframes wm-g2 { 0%, 100% { transform: translate(2px, 0); } 61% { transform: translate(6px, -1px); } 62% { transform: translate(-5px, 1px); } 63% { transform: translate(2px, 0); } }
.wm-cur { animation: dx-blink 1.1s steps(1) infinite; }

.mega { font-size: clamp(30px, 4.7vw, 78px); line-height: .98; letter-spacing: -.045em; margin: 0 0 24px; font-weight: 800; }
.mega .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.mega .w { display: inline-block; animation: rise .9s var(--ease) both; }
.mega .ln:first-child .w:nth-child(2) { animation-delay: .06s; }
.mega .ln + .ln .w:nth-child(1) { animation-delay: .12s; }
.mega .ln + .ln .w:nth-child(2) { animation-delay: .18s; }
.mega .ln + .ln .w:nth-child(3) { animation-delay: .24s; }
@keyframes rise { from { transform: translateY(105%); } }
.mega .hot { position: relative; color: var(--dx-phosphor); text-shadow: 0 0 34px rgba(57, 255, 20, .45); }
.mega .hot::before, .mega .hot::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.mega .hot::before { color: var(--dx-magenta); animation: glitch-a 7s steps(1) infinite 2s; }
.mega .hot::after { color: var(--dx-accent); animation: glitch-b 7s steps(1) infinite 2s; }
@keyframes glitch-a { 0%, 100% { opacity: 0; } 50% { opacity: .8; transform: translate(-4px, 1px); clip-path: inset(10% 0 55% 0); } 51% { opacity: .8; transform: translate(3px, -1px); clip-path: inset(60% 0 8% 0); } 52% { opacity: 0; } }
@keyframes glitch-b { 0%, 100% { opacity: 0; } 50% { opacity: .8; transform: translate(4px, -1px); clip-path: inset(48% 0 20% 0); } 51% { opacity: .8; transform: translate(-3px, 1px); clip-path: inset(5% 0 70% 0); } 52% { opacity: 0; } }
.promise { font-size: clamp(15.5px, 1.35vw, 18.5px); color: var(--dx-muted); max-width: 52ch; margin: 0 0 26px; line-height: 1.6; }
.promise b { color: var(--dx-text); font-weight: 600; }

.install-x { max-width: 560px; margin: 0 0 22px; }
.tabs { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: rgba(3, 9, 12, .8); }
.tabs button { font: inherit; font-size: 12.5px; color: var(--dx-muted); background: transparent; border: 0; border-radius: 7px; min-height: 36px; min-width: 44px; padding: 0 14px; cursor: pointer; }
.tabs button[aria-selected="true"] { color: #021004; background: var(--dx-phosphor); font-weight: 700; }
.hero-cmd { margin: 0; border-top-left-radius: 0; box-shadow: 0 0 0 1px rgba(57, 255, 20, .12), 0 0 40px rgba(57, 255, 20, .08), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.hero-cmd pre { font-size: 15px; }
.os { font-size: 12.5px; color: var(--dx-muted); margin: 12px 0 0; line-height: 1.7; }
.os a { display: inline-block; padding: 4px 0; }
.hero-actions { margin: 0; }
.play { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }

/* the hero terminal: a glass window, tilted in space, flattening as you scroll (scroll-driven where supported) */
.hero-term { margin: 0; perspective: 1800px; }
.win { position: relative; border-radius: 14px; overflow: hidden; }
.glass { background: linear-gradient(180deg, rgba(10, 26, 22, .72), rgba(3, 9, 12, .82)); border: 1px solid rgba(57, 255, 20, .22); box-shadow: var(--glow-g), inset 0 1px 0 rgba(255, 255, 255, .05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.win .bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 11.5px; color: var(--dx-dim); letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.win .bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff3b6b; flex: none; }
.win .bar i:nth-child(2) { background: #f5ff2d; }
.win .bar i:nth-child(3) { background: #5dff6e; }
.win .bar span { margin-left: 10px; overflow: hidden; text-overflow: ellipsis; }
.win .bar b { color: var(--dx-text); font-weight: 600; }
.hero-term .win { transform: rotateY(-14deg) rotateX(8deg) translateZ(0); transform-origin: 60% 50%; box-shadow: var(--glow-g), -40px 50px 120px -40px rgba(0, 240, 255, .25); transition: transform .8s var(--ease); }
.hero-term:hover .win { transform: rotateY(-6deg) rotateX(3deg); }
.prompt { margin: 0; padding: 10px 16px 0; font-size: 13px; color: var(--dx-text); min-height: 30px; }
.prompt .ps { color: var(--dx-phosphor); }
.prompt .tw { position: relative; display: inline-block; width: 8ch; }
.prompt .caret { position: absolute; left: 0; top: 0; color: var(--dx-phosphor); animation: dx-blink 1s steps(1) infinite; }
.screen { position: relative; padding: 8px 10px 12px; }
.screen canvas { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 510; }
@media (max-width: 640px) { .screen canvas { aspect-ratio: 640 / 510; } }
.keycast { position: absolute; right: 18px; bottom: 20px; font-size: 13px; font-weight: 700; color: var(--dx-text); background: rgba(3, 9, 12, .9); border: 1px solid rgba(57, 255, 20, .55); border-bottom-width: 3px; border-radius: 8px; padding: 4px 12px; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .18s, transform .18s var(--ease); box-shadow: 0 0 22px rgba(57, 255, 20, .3); }
.keycast.on { opacity: 1; transform: none; }
.hero-term figcaption { font-size: 12px; color: var(--dx-dim); margin: 12px 4px 0; text-align: right; }
.backdrop-note { position: absolute; left: 0; right: 0; bottom: 14px; font-size: 11px; color: var(--dx-dim); text-align: right; margin: 0 auto; letter-spacing: .06em; }
@supports (animation-timeline: view()) {
  .hero-term .win { animation: flatten linear both; animation-timeline: view(); animation-range: exit 0% exit 60%; }
  @keyframes flatten { to { transform: rotateY(0) rotateX(0) scale(.96); } }
}

/* ---------------------------------------------------------------- sections */
.sec { position: relative; padding: clamp(64px, 8vw, 120px) 0 clamp(32px, 4vw, 56px); }
.sec.honest { padding-top: clamp(40px, 5vw, 72px); }
.sec + .sec { border-top: 1px solid var(--line-3); }
/* below-the-fold sections skip layout and paint until they come near (first paint lays out the hero only) */
.sec, .token-x, .foot { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
.sec-head { max-width: 980px; margin-bottom: clamp(28px, 4vw, 56px); }
.sec-head .kick kbd { font-size: 11px; color: var(--dx-accent); border-color: rgba(0, 240, 255, .5); }
.sec-head .kick::before { display: none; }
.huge { font-size: clamp(30px, 5.4vw, 84px); line-height: 1; letter-spacing: -.045em; margin: 0 0 20px; }
.huge em { font-family: var(--dx-font-outline); font-style: normal; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: max(1px, .019em) var(--dx-phosphor); text-shadow: 0 0 40px rgba(57, 255, 20, .25); }
.intel .huge em { -webkit-text-stroke-color: var(--dx-accent); text-shadow: 0 0 40px rgba(0, 240, 255, .25); }
.sec-head .lede { font-size: clamp(16px, 1.4vw, 19px); }

/* the ladder: rungs light up one by one when the section scrolls in */
.ladder { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; counter-reset: r; }
.ladder li { counter-increment: r; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dx-muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: var(--glass); transition: color .4s, border-color .4s, box-shadow .4s, background .4s; }
.ladder li::before { content: counter(r, decimal-leading-zero); color: var(--dx-dim); font-size: 11px; }
.ladder li + li { position: relative; }
.ladder li.lit { color: #021004; background: var(--dx-phosphor); border-color: var(--dx-phosphor); box-shadow: 0 0 22px rgba(57, 255, 20, .4); }
.ladder li.lit::before { color: #0b4a10; }
.ladder li:last-child.lit { background: var(--dx-warn); border-color: var(--dx-warn); box-shadow: 0 0 22px rgba(245, 255, 45, .35); }

/* bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.tile { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 2vw, 28px); border-radius: var(--r-lg); border: 1px solid var(--line-3); background: linear-gradient(160deg, rgba(10, 24, 20, .7), rgba(3, 8, 10, .85)); overflow: hidden; transform-style: preserve-3d; transition: border-color var(--t2), box-shadow var(--t2); }
.tile::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity var(--t2);
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 0%), rgba(57, 255, 20, .1), transparent 45%); }
.tile:hover { border-color: rgba(57, 255, 20, .3); box-shadow: 0 30px 80px -40px rgba(57, 255, 20, .35); }
.tile:hover::before { opacity: 1; }
.t-a { grid-column: span 7; } .t-b { grid-column: span 5; } .t-c { grid-column: span 5; } .t-d { grid-column: span 7; }
.t-larp { grid-column: span 6; } .t-bub { grid-column: span 6; } .t-e { grid-column: span 12; flex-direction: row; align-items: center; }
.t-e .tile-txt { flex: 0 0 34%; }
.t-e .shot-x { flex: 1; }
.tile-txt { position: relative; z-index: 1; }
.tile .num { font-size: 12px; color: var(--dx-accent); letter-spacing: .14em; margin: 0 0 8px; }
.tile .num kbd { font-size: 11px; margin-left: 4px; }
.tile h3 { font-family: var(--dx-font-display); font-weight: 700; font-size: clamp(20px, 1.9vw, 28px); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 12px; }
.tile .sts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.tile .say { color: var(--dx-muted); margin: 0 0 10px; max-width: 62ch; }
.tile .more { margin: 0; }
.tile .more a, .lp-real, .keycaps a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.shot-x { margin: auto 0 0; transform: translateZ(30px); }
.shot-x .media { display: block; background: #000; }
.shot-x img { width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.tile:hover .shot-x img { transform: scale(1.025); }
.shot-x .media { position: relative; }
.shot-x video.loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; opacity: 0; transition: opacity .5s; }
.shot-x .media.playing video.loop { opacity: 1; }
.loop-chip { position: absolute; left: 10px; top: 10px; font-size: 11px; letter-spacing: .06em; color: var(--dx-text); background: rgba(2, 5, 7, .85); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; opacity: 0; transition: opacity .5s; pointer-events: none; }
.media.playing .loop-chip { opacity: 1; }
.beat { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dx-up); box-shadow: 0 0 0 0 rgba(93, 255, 110, .6); vertical-align: middle; margin-left: 6px; animation: beat 1.6s var(--ease) infinite; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(93, 255, 110, .6); } 70% { box-shadow: 0 0 0 12px rgba(93, 255, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(93, 255, 110, 0); } }
.t-d { border-color: rgba(245, 255, 45, .18); }
.rm { border: 1px solid rgba(245, 255, 45, .35); background: rgba(245, 255, 45, .05); border-radius: 10px; padding: 10px 14px; font-size: 13.5px; color: var(--dx-text); margin: 12px 0; }
.rm b { color: var(--dx-warn); }
.flow { display: flex; align-items: center; gap: 0; margin: 14px 0 4px; font-size: 12.5px; flex-wrap: wrap; row-gap: 8px; }
.flow .node { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: rgba(3, 9, 12, .8); color: var(--dx-text); }
.flow .node small { display: block; color: var(--dx-dim); font-size: 11px; }
.flow .node.yours { border-color: rgba(245, 255, 45, .5); }
.flow .wire { position: relative; flex: 1 1 90px; min-width: 90px; text-align: center; color: var(--dx-dim); font-size: 11px; padding: 0 8px 14px; }
.flow .wire::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 1px; background: linear-gradient(90deg, rgba(57, 255, 20, .6), rgba(245, 255, 45, .6)); }
.flow .wire i { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 7px; overflow: hidden; }
.flow .wire i::before { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: radial-gradient(circle at calc(100% - 4px) 50%, var(--dx-warn) 3px, rgba(245, 255, 45, .3) 4px, transparent 6px); animation: packet 2.4s linear infinite; }
@keyframes packet { to { transform: translateX(100%); } }

/* the LARP panel: flags stamp in one by one */
.larp-panel, .bubbles { position: relative; margin: auto 0 0; border-radius: 14px; padding: 14px 16px 16px; }
/* side by side, the bubble tile is the taller one: the LARP panel fills its tile and spreads its flags, so no dead
   space opens between "docs" and the panel (stacked, there is no extra height and nothing changes) */
.larp-panel { flex: 1 0 auto; display: flex; flex-direction: column; }
.larp-panel .flags { flex: 1 0 auto; align-content: space-evenly; }
.larp-panel .lp-real { align-self: flex-start; }
.lp-head { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--dx-dim); letter-spacing: .06em; margin: 0 0 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.lp-head b { color: var(--dx-text); font-weight: 600; white-space: nowrap; }
.flags { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.flags li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 8px 12px; border: 1px solid rgba(255, 59, 107, .3); border-left: 3px solid var(--dx-down); border-radius: 6px; background: rgba(255, 59, 107, .05); }
.flags li span::before { content: '● '; color: var(--dx-down); }
.flags li b { color: #ff8aa8; font-weight: 700; }
.flags li.muted-flag { border-color: var(--line); border-left-color: var(--dx-dim); background: transparent; color: var(--dx-muted); }
.flags li.muted-flag span::before { color: var(--dx-dim); }
.flags li.muted-flag b { color: var(--dx-dim); }
.js-larp .flags li { opacity: 0; transform: translateX(-14px) scale(.98); transition: opacity .35s, transform .45s var(--ease); }
.js-larp .flags li.on { opacity: 1; transform: none; }
.lp-score { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--dx-muted); }
.lp-score b { color: var(--dx-text); font-size: 18px; font-family: var(--dx-font-display); font-weight: 700; white-space: nowrap; }
.meter { flex: 1; height: 8px; border-radius: 99px; background: rgba(234, 255, 240, .08); overflow: hidden; }
.meter i { display: block; height: 100%; width: 36%; background: linear-gradient(90deg, var(--dx-warn), var(--dx-down)); border-radius: inherit; transform-origin: 0 50%; }
.js-larp .meter i { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.js-larp .larp-panel.done .meter i { transform: scaleX(1); }
.lp-foot { font-size: 12px; color: var(--dx-dim); margin: 10px 0 0; }
.lp-real { font-size: 12px; margin-top: 4px; }
.cert { color: var(--dx-text); margin: 0 0 6px; }

/* the bubble field */
.bubbles canvas { display: block; width: 100%; height: auto; aspect-ratio: 640 / 420; cursor: crosshair; touch-action: manipulation; }
.bub-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.bub-legend button { font: inherit; font-size: 12px; color: var(--dx-muted); background: rgba(3, 9, 12, .8); border: 1px solid var(--line); border-radius: 999px; min-height: 36px; padding: 0 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.bub-legend button[aria-pressed="true"] { color: var(--dx-text); border-color: rgba(234, 255, 240, .5); background: rgba(234, 255, 240, .07); }
.bub-legend i { width: 10px; height: 10px; border-radius: 50%; }
.k-pool { background: #00f0ff; } .k-dev { background: #f5ff2d; } .k-bundle { background: #ff2bd6; } .k-funder { background: #39ff14; } .k-sniper { background: #ff3b6b; } .k-exchange { background: #9fb3aa; } .k-unlinked { background: #3aa866; }
/* the caption box is always as tall as its longest possible text (hidden .fit copies share the one grid cell), so a
   hover or a legend pick never changes the panel height at any width */
.bub-read { display: grid; font-size: 12.5px; color: var(--dx-muted); margin: 4px 0 0; }
.bub-read > span { grid-area: 1 / 1; }
.bub-read .fit { visibility: hidden; }

/* local first */
.local-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.local .sts { display: flex; flex-wrap: wrap; gap: 6px; }
.machine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: center; }
.mac { border-radius: var(--r-lg); padding: 22px 22px 18px; box-shadow: var(--glow-g), 0 0 120px rgba(57, 255, 20, .08); }
.mac-t { font-family: var(--dx-font-display); font-weight: 700; font-size: 18px; margin: 0 0 12px; letter-spacing: -.02em; }
.mac ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.mac li { font-size: 13.5px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: rgba(3, 9, 12, .7); }
.mac li::before { content: '▸ '; color: var(--dx-phosphor); }
.mac-nope { margin: 0; font-size: 12px; color: var(--dx-dim); display: flex; flex-wrap: wrap; gap: 6px 12px; }
.mac-nope s { text-decoration-color: var(--dx-down); text-decoration-thickness: 2px; }
.outs { list-style: none; margin: 0; padding: 0 0 0 0; display: grid; gap: 16px; }
.outs li { position: relative; font-size: 12.5px; color: var(--dx-muted); padding: 6px 0 6px 64px; }
.outs li i { position: absolute; left: 0; top: 50%; width: 52px; height: 1px; background: linear-gradient(90deg, rgba(57, 255, 20, .7), rgba(0, 240, 255, .5)); }
.outs li i::after { content: ''; position: absolute; right: -2px; top: -3px; border: 3.5px solid transparent; border-left: 6px solid rgba(0, 240, 255, .8); }
.outs li i::before { content: ''; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--dx-accent); box-shadow: 0 0 8px var(--dx-accent); animation: out 2.6s linear infinite; }
.outs li:nth-child(2) i::before { animation-delay: .8s; } .outs li:nth-child(3) i::before { animation-delay: 1.6s; }
@keyframes out { from { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateX(46px); opacity: 0; } }

/* the keycap strip */
.keycaps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.keycaps li { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border: 1px solid var(--line-3); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(10, 24, 20, .6), rgba(3, 8, 10, .8)); transition: border-color var(--t2), transform var(--t2) var(--ease); }
.keycaps li:hover { border-color: rgba(57, 255, 20, .35); transform: translateY(-3px); }
kbd.cap { font-size: 26px; min-width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border-bottom-width: 6px; font-family: var(--dx-font-display); font-weight: 700; color: var(--dx-phosphor); text-shadow: 0 0 14px rgba(57, 255, 20, .5); transition: transform .12s, border-bottom-width .12s; }
.keycaps li:hover kbd.cap { transform: translateY(3px); border-bottom-width: 3px; }
.kc-t { font-weight: 600; color: var(--dx-text); }
.keycaps a { font-size: 13px; margin-top: auto; }

/* the films */
.films { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.films li { grid-column: span 4; }
.films li:nth-child(1), .films li:nth-child(2), .films li:nth-child(6), .films li:nth-child(7) { grid-column: span 6; }
.film { display: block; position: relative; border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--dx-text); border: 1px solid var(--line-3); background: #000; aspect-ratio: 16 / 9; transition: transform var(--t2) var(--ease), box-shadow var(--t2), border-color var(--t2); }
.film:hover, .film:focus-visible { transform: translateY(-4px); border-color: rgba(255, 43, 214, .5); box-shadow: var(--glow-m); }
.film img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film video { opacity: 0; transition: opacity .3s; }
.film.peek video { opacity: 1; }
.film .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 16px 14px; background: linear-gradient(180deg, transparent, rgba(1, 3, 4, .9) 42%, rgba(1, 3, 4, .97)); display: flex; align-items: flex-end; gap: 12px; }
.film .ttl { font-family: var(--dx-font-display); font-weight: 700; font-size: clamp(15px, 1.5vw, 21px); letter-spacing: -.02em; line-height: 1.1; text-transform: lowercase; }
.film .sub { display: block; font-family: var(--dx-font-mono); font-weight: 400; font-size: 11.5px; color: #c9e9d4; letter-spacing: .04em; margin-top: 6px; text-transform: none; }
.film .pb { margin-left: auto; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 43, 214, .9); box-shadow: 0 0 24px rgba(255, 43, 214, .55); transition: transform var(--t2) var(--ease); }
.film .pb::after { content: ''; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.film:hover .pb { transform: scale(1.1); }
.films-note { margin-top: 18px; }

/* how it works */
.steps { list-style: none; margin: 0 0 34px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); counter-reset: s; }
.steps li { position: relative; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--line-3); background: linear-gradient(160deg, rgba(10, 24, 20, .6), rgba(3, 8, 10, .8)); }
.steps .sn { font-family: var(--dx-font-outline); font-size: 52px; font-weight: 800; line-height: 1; margin: 0 0 8px; color: transparent; -webkit-text-stroke: 1px rgba(57, 255, 20, .6); }
.steps h3 { font-family: var(--dx-font-display); font-size: 20px; letter-spacing: -.02em; text-transform: lowercase; margin: 0 0 12px; }
.steps p { color: var(--dx-muted); font-size: 13.5px; margin: 0; }
.steps .cmd { margin: 0 0 12px; }
.actions.center { justify-content: center; }

/* is / is not + teasers */
.isnot { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px); margin-bottom: clamp(14px, 1.6vw, 22px); }
.isnot > div { padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--line-3); background: rgba(3, 8, 10, .7); }
.isnot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.isnot li { padding-left: 28px; position: relative; }
.is li::before { content: '✓'; position: absolute; left: 0; color: var(--dx-up); font-weight: 700; }
.not li::before { content: '✕'; position: absolute; left: 0; color: var(--dx-down); font-weight: 700; }
.not .kick { color: #ff8aa8; }
.teasers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.teaser { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line-3); background: var(--glass); text-decoration: none; color: var(--dx-text); transition: border-color var(--t2), transform var(--t2) var(--ease), box-shadow var(--t2); }
.teaser .kick { margin: 0; }
.teaser strong { font-family: var(--dx-font-display); font-size: 19px; letter-spacing: -.02em; }
.teaser span:last-child { color: var(--dx-muted); font-size: 13px; }
.teaser:hover { border-color: rgba(0, 240, 255, .45); transform: translateY(-3px); box-shadow: var(--glow-c); }

/* the memecoin address (GUARDRAILS §10 exception), kept quiet and plain */
.token-x { padding: 8px 0 0; }
.token { border: 1px dashed rgba(234, 255, 240, .2); border-radius: 12px; padding: 14px 18px; display: grid; gap: 6px; font-size: 12.5px; color: var(--dx-muted); }
.token .tk-label { margin: 0; }
.token .ca { font-size: 13px; justify-self: start; overflow-wrap: anywhere; }
.token .tk-links { margin: 0; }
.token .tk-links a { display: inline-block; padding: 8px 0; }

/* footer */
.foot { position: relative; z-index: 1; border-top: 1px solid var(--line-3); margin-top: 72px; padding: 48px 0 64px; color: var(--dx-muted); font-size: 13px; }
.foot .wrap { display: grid; gap: 16px; }
.foot-wm { font-family: var(--dx-font-outline); font-weight: 900; font-size: clamp(56px, 13vw, 210px); line-height: .85; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 1px rgba(57, 255, 20, .35); user-select: none; margin-bottom: 10px; }
.foot-wm span { -webkit-text-stroke: 0; display: inline-block; width: .3em; height: .66em; margin-left: .06em; vertical-align: -.02em; background: var(--dx-phosphor); color: transparent; animation: dx-blink 1.1s steps(1) infinite; box-shadow: 0 0 30px rgba(57, 255, 20, .6); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 4px; }
.foot nav a { color: var(--dx-muted); display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
.foot nav a:first-child { padding-left: 0; }
.foot .disc { color: var(--dx-text); max-width: 110ch; }
.snd[aria-pressed="true"] { color: var(--dx-phosphor); border-color: rgba(57, 255, 20, .5); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .home .nav.out a:nth-child(n+3) { display: none; }
  .candles { left: 0; width: 100%; opacity: .32; }
  .mega { font-size: clamp(30px, 7vw, 78px); }
  .hero-x { min-height: 0; }
  .hero-term .win { transform: rotateX(10deg); }
  .hero-term:hover .win { transform: rotateX(4deg); }
  .keycaps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .t-a, .t-b, .t-c, .t-d, .t-larp, .t-bub, .t-e { grid-column: 1 / -1; }
  .t-e { flex-direction: column; align-items: stretch; }
  .local-grid, .machine { grid-template-columns: minmax(0, 1fr); }
  .outs { padding: 18px 0 0 18px; }
  .films li, .films li:nth-child(1), .films li:nth-child(2), .films li:nth-child(6), .films li:nth-child(7) { grid-column: span 6; }
  .steps, .teasers { grid-template-columns: minmax(0, 1fr); }
  .home .nav.jump { display: none; }
  .home .nav.out { display: flex; flex-wrap: nowrap; margin-left: auto; width: auto; order: 0; padding: 0; }
  .home .nav.out a { padding: 10px 8px; }
  .home .top .wrap { flex-wrap: nowrap; }
}
@media (max-width: 640px) {
  /* narrow title bars wrap instead of cutting the "◌ sample data" label off */
  .win .bar { white-space: normal; }
  .win .bar span { overflow: visible; }
  .win .bar b { white-space: nowrap; }
  .home .keyhints .snd { display: none; }
  .hero-x { padding-top: 22px; }
  .hero-x::before { display: none; }
  .wm-wrap { width: 170px; margin-bottom: 14px; }
  .mega { font-size: clamp(30px, 9.6vw, 44px); }
  .hero-cmd pre { font-size: 13px; }
  .hero-term .win, .hero-term:hover .win { transform: none; }
  .isnot { grid-template-columns: minmax(0, 1fr); }
  .films li, .films li:nth-child(n) { grid-column: 1 / -1; }
  .keycaps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keycaps li { padding: 14px; }
  kbd.cap { min-width: 52px; height: 52px; font-size: 22px; }
  .backdrop-note { position: static; padding-top: 18px; text-align: left; }
  .hero-term figcaption { text-align: left; }
  .flow .wire { flex-basis: 60px; min-width: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-term .win, .hero-term:hover .win { transform: none; }
  .js-larp .flags li { opacity: 1; transform: none; }
  .js-larp .meter i { transform: none; }
}