/* Hero: Duke's own app card, many times over, replaying real solved exercises and game moves behind the copy (demo.js).
   Blended into the page; parallax in demo.js. */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - var(--control, 48px)); display: grid; align-items: center; padding: var(--sp-8) 0; }
.hero-copy { position: relative; z-index: 2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 56% 48% at 50% 50%, var(--bg) 50%, transparent 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; z-index: 1; pointer-events: none; background: linear-gradient(transparent, var(--bg)); }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: translate3d(0, var(--py, 0), 0); will-change: transform; }
.dwall { height: 100%; max-width: 1480px; margin: 0 auto; padding: 24px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 24px; opacity: .75; }
.dwall .app-demo { max-width: none; margin: 0; overflow: hidden; color: #fff; background: color-mix(in srgb, var(--tint, var(--g-duolingo)) 62%, #0b0b0d); transition: background .8s ease;
  --demo-text: #fff; --demo-text2: rgba(255,255,255,.66); --demo-tile: rgba(0,0,0,.22); --demo-tile2: rgba(255,255,255,.14); }
.dwall .app-xp, .dwall .app-label, .dwall .demo-math .answer { color: #fff; }
.dwall .demo-lang .tile.on { background: #fff; color: #0b0b0d; }
@media (max-width: 1100px) { .dwall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .dwall { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); } }
@media (max-width: 560px) { .dwall { grid-template-columns: repeat(2, 1fr); padding: 12px; gap: 12px; opacity: .5; grid-template-rows: repeat(2, 1fr); } .hero::before { background: radial-gradient(ellipse 120% 46% at 50% 50%, var(--bg) 62%, transparent 100%); } }
/* the games show a real frame from Duke's own run, the size of the chess board */
.dwall .demo-game { gap: var(--sp-3); margin-bottom: .8rem; }
.demo-shot { display: block; width: 100%; max-width: 300px; aspect-ratio: 3 / 2; height: auto; margin: 0 auto; object-fit: cover; border-radius: var(--r-group); background: var(--demo-tile); animation: demo-pop .35s ease both; }