/* Demoscene page: full-width Apple-style bands (.step, .tile-soft, .tile-ink),
   Mandelbulb hero, interactive byte budget & deflate packer inspectors,
   plasma sine synthesizer, Second Reality / .kkrieger milestones, and real-time canvas. */

/* ---------- Hero: full screen, Mandelbulb backdrop ---------- */
.dm-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  place-items:center;
  min-height:calc(100vh - 60px);
  min-height:calc(100svh - 60px);
  padding:3.5rem 1.25rem 5.5rem;
  background:#07070a;
  color:#fff;
  text-align:center;
}
.dm-hero-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.8;
}
[data-theme=paper] .dm-hero-bg{
  opacity:.46;
}
.dm-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(62% 56% at 50% 45%,rgba(0,0,0,.42) 0%,rgba(0,0,0,.86) 100%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,.88) 100%);
}
.dm-hero-in{
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:48rem;
}
.dm-hero .tile-kicker{
  justify-content:center;
  margin-bottom:.85rem;
  color:rgba(255,255,255,.76);
}
.dm-hero .tile-kicker a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.4);
}
.dm-hero .tile-kicker a:hover{
  color:#fff;
  text-decoration-color:#fff;
}
.dm-hero-title{
  margin:0;
  font:700 clamp(2.8rem,8vw,5.6rem)/1.02 var(--disp);
  letter-spacing:-.04em;
  color:#fff;
  text-wrap:balance;
}
.dm-hero-line{
  margin:1.2rem 0 0;
  max-width:38rem;
  font:400 clamp(1.1rem,1.8vw,1.38rem)/1.45 var(--disp);
  letter-spacing:-.01em;
  color:rgba(255,255,255,.84);
  text-wrap:balance;
}
.dm-intro-note{
  margin:.75rem 0 0;
  max-width:42rem;
  font:400 .88rem/1.45 var(--mono);
  color:rgba(255,255,255,.76);
}
.dm-hero .ap-cta{
  margin-top:1.4rem;
}
.dm-hero .ap-btn{
  background:#fff;
  color:#000;
  border-color:#fff;
}
.dm-hero .ap-btn:hover{
  background:rgba(255,255,255,.86);
  color:#000;
}
.dm-hero .ap-btn.alt{
  background:rgba(0,0,0,.38);
  color:#fff;
  border-color:rgba(255,255,255,.45);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.dm-hero .ap-btn.alt:hover{
  background:#fff;
  color:#000;
  border-color:#fff;
}
.dm-cue{
  position:absolute;
  left:50%;
  bottom:clamp(1.25rem,4vh,2.25rem);
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-left:-22px;
  border-radius:50%;
  color:rgba(255,255,255,.68);
}
.dm-cue:hover{color:#fff}

/* ---------- Bands & Split Typography ---------- */
.dm-band{
  border-top:1px solid var(--ap-line);
}
.dm-band.step .step-in{
  max-width:1120px;
}
.dm-band .step-copy > p:not(.step-n):not(.konami-play){
  max-width:44ch;
  font:400 clamp(1.02rem,1.35vw,1.15rem)/1.6 var(--body);
  color:var(--muted);
}
.dm-band .step-stack > .step-copy > p:not(.step-n){
  max-width:54ch;
}
.dm-band.tile-ink .step-copy > p:not(.step-n):not(.konami-play){
  color:var(--t-ink-muted);
}
.dm-band .step-copy a:not(.ap-btn):not(.btn):not(.chev){
  color:var(--t-link);
  text-decoration:underline;
  text-underline-offset:3px;
}
.dm-band.tile-ink .step-copy a:not(.ap-btn):not(.btn):not(.chev){
  color:var(--t-ink-link);
}
.dm-band .step-copy h3{
  margin:0;
  font:700 clamp(1.65rem,3vw,2.25rem)/1.1 var(--disp);
  letter-spacing:-.025em;
  color:var(--fg);
}
.dm-subhead{
  margin-top:2.2rem !important;
  font-size:clamp(1.65rem,3.2vw,2.35rem) !important;
}
.konami-play{
  margin:1.25rem 0 0;
}
.dm-band.tile-ink .konami-play .ap-btn{
  background:#fff;
  color:#000;
  border-color:#fff;
}
.dm-band.tile-ink .konami-play .ap-btn:hover{
  background:rgba(255,255,255,.86);
  color:#000;
}
[data-theme=paper] .dm-band.tile-ink .konami-play .ap-btn{
  background:#fff;
  color:#000;
  border-color:#fff;
}

/* ---------- Interactive Toy Modules (.dm-toy) ---------- */
.dm-toy{
  width:100%;
  margin:0;
  background:var(--ap-panel);
  border:1px solid var(--ap-line);
  border-radius:0;
  box-shadow:var(--ap-spec),0 24px 52px -26px var(--shadow);
  text-align:left;
}
.dm-pack-toy,
.dm-canvas-toy{
  max-width:960px;
  margin-top:clamp(1.5rem,3vw,2.25rem);
  margin-inline:auto;
}

/* Display-only canvas: let a vertical swipe scroll the page. */
.toy-stage canvas{touch-action:pan-y;background:var(--code)}

.toy-modes{display:flex;flex-wrap:wrap;gap:.4rem}
.toy-controls .toy-btn{min-height:2.2rem}
.toy-sep{width:1px;height:1.5rem;background:var(--line);margin:0 .15rem}
.toy-controls label[for="toy-speed"]{margin-left:auto}
.toy-controls output{min-width:3.4rem;text-align:right;font-variant-numeric:tabular-nums}

/* byte bars, shared by the budget and the packing toy */
.size-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.size-row{display:grid;grid-template-columns:minmax(9rem,15rem) minmax(0,1fr) 5.75rem;align-items:center;gap:.7rem}
.size-name{min-width:0;font:.8rem/1.4 var(--mono);color:var(--fg);overflow-wrap:anywhere}
.size-track{position:relative;height:1.15rem;background:var(--code);border:1px solid var(--line);border-radius:0}
.size-bar{position:absolute;inset:3px auto 3px 3px;width:calc(var(--w,0) * 100%);min-width:3px;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:0;transition:width .25s}
.size-mark{position:absolute;top:-3px;bottom:-3px;left:calc(var(--b,0) * 100%);border-left:2px dashed var(--accent3)}
.size-value{text-align:right;font:.78rem var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.size-row.is-over .size-bar{background:var(--line)}
.size-row.is-over .size-name,.size-row.is-over .size-value{color:var(--muted)}
.size-row.is-on .size-bar{background:linear-gradient(90deg,var(--accent),var(--accent3))}
.size-row.is-ref .size-name{color:var(--accent2)}
.budget-out{margin-top:1rem;font-size:.82rem;line-height:1.6}

/* packing toy */
.pack-code{max-height:19rem;margin:1rem 0;padding:.9rem 1rem;overflow:auto;background:var(--code);border:1px solid var(--line);border-radius:0;color:var(--fg);font:.78rem/1.6 var(--mono);tab-size:2}
.pack-code code{font:inherit;white-space:pre}
.pack-code:focus-visible{outline:2px dashed var(--accent2);outline-offset:2px}

/* plasma parts */
.parts-formula{margin:.85rem 0 0;font:.82rem/1.7 var(--mono);color:var(--fg);overflow-wrap:anywhere}
.parts-formula .wave{color:var(--accent);white-space:nowrap}
.parts-formula .wave.off{color:var(--muted);text-decoration:line-through}
.parts-formula .plus{color:var(--muted)}
#parts-read{margin-top:.15rem}
.toy-field{display:flex;align-items:center;gap:.55rem;flex:1 1 16rem;min-width:0}
.toy-field label{flex:1;min-width:0}
.toy-field output{min-width:3.4rem;text-align:right}

/* ---------- Milestones & Window Inspector Cards ---------- */
.dm-banner-card,
.dm-shot-card,
.dm-photo-figure{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin:0;
}
.dm-banner-card{
  width:100%;
  max-width:960px;
  margin:clamp(1.5rem,3vw,2.25rem) auto 0;
}
.dm-window{
  width:100%;
  border:1px solid rgba(255,255,255,.14);
  border-radius:0;
  overflow:hidden;
  background:#09090d;
  box-shadow:0 28px 56px -28px rgba(0,0,0,.7);
}
[data-theme=paper] .dm-window{
  border-color:rgba(0,0,0,.14);
  box-shadow:0 26px 52px -28px rgba(0,0,0,.32);
}
.dm-window .ap-window-bar{
  margin:0;
}
.dm-window > img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:0;
  background:#000;
}
.dm-window .frames-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:10px;
  background:#09090d;
}
.dm-window .frames-row img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  image-rendering:pixelated;
  border-radius:0;
  border:1px solid rgba(255,255,255,.12);
  background:#000;
}
.dm-photo-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
  border:1px solid var(--ap-line);
  box-shadow:0 24px 48px -26px var(--shadow);
}
.dm-cap{
  margin:0;
  font:400 .8rem/1.5 var(--body);
  color:var(--muted);
  text-align:left;
}
.dm-band.tile-ink .dm-cap{
  color:var(--t-ink-muted);
}
.dm-cap a{
  color:var(--t-link);
  text-decoration:underline;
  text-underline-offset:2px;
}
.dm-band.tile-ink .dm-cap a{
  color:var(--t-ink-link);
}

.dm-proof-grid{
  display:grid;
  gap:10px;
  margin-top:clamp(2rem,4vw,3rem);
  width:100%;
  text-align:left;
}
.dm-proof-card{
  padding:clamp(1.5rem,3.5vw,2.5rem);
  border-radius:0;
  background:var(--ap-panel);
  border:1px solid var(--ap-line);
  box-shadow:var(--ap-spec),0 18px 42px -24px var(--shadow);
}
.dm-proof-card .step-in{
  gap:clamp(1.75rem,4vw,3.5rem);
}

/* ---------- Closing Doors ---------- */
.dm-doors{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  max-width:860px;
  width:100%;
  margin-inline:auto;
}
.dm-doors .door{
  aspect-ratio:16/10;
}

/* ---------- Subtle Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .dm-hero-in > *{
    animation:dm-rise .85s var(--spring) both;
  }
  .dm-hero-in > :nth-child(2){animation-delay:.07s}
  .dm-hero-in > :nth-child(3){animation-delay:.14s}
  .dm-hero-in > :nth-child(4){animation-delay:.21s}
  .dm-hero-in > :nth-child(5){animation-delay:.28s}

  .dm-motion .dm-media{
    opacity:0;
    transform:translateY(26px) scale(.975);
    transition:opacity .85s var(--spring),transform 1s var(--spring);
  }
  .dm-motion .dm-media.in-view{
    opacity:1;
    transform:none;
  }
}
body .dm-hero p.tile-kicker{
  color:rgba(255,255,255,.82);
}
.dm-hero-in > *:focus,
.dm-hero-in > *:focus-within,
.dm-band:focus-within,
.dm-band .will-reveal:focus,
.dm-band .will-reveal:focus-within,
.dm-motion .dm-media:focus,
.dm-motion .dm-media:focus-within{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}
@keyframes dm-rise{
  from{opacity:0;transform:translateY(16px)}
}

/* ---------- Responsive (Tablet & Phone) ---------- */
@media (max-width:860px){
  .dm-band .step-copy > p:not(.step-n):not(.konami-play){
    margin-inline:auto;
  }
  .dm-cap{
    text-align:center;
  }
  .dm-doors{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){
  .size-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name value" "track track";gap:.2rem .6rem}
  .size-name{grid-area:name}
  .size-value{grid-area:value}
  .size-track{grid-area:track}
  .size-value{font-size:.74rem}
}

@media(max-width:640px){
  .dm-hero,
  .dm-band.step{
    padding-inline:16px;
  }
  .dm-proof-card{
    padding:1.25rem 1rem;
  }
  .dm-doors .door{
    aspect-ratio:4/5;
  }
}

@media(max-width:620px){
  .toy-sep{display:none}
  .toy-controls label[for="toy-speed"]{margin-left:0;width:100%}
  .toy-controls label[for="toy-speed"] input{flex:1;max-width:none}
  #toy-speed-out{margin-left:auto}
  .toy-field{flex:1 1 100%}
  .toy-field label input{max-width:none}
}

/* the site's own intro: spec list and a second frame under the first */
.dm-spec{margin:1.4rem 0 0;border-top:1px solid var(--ap-line)}
.dm-spec div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--ap-line)}
.dm-spec dt{font:500 .95rem/1.45 var(--mono);color:var(--t-ink-muted,#949bb0)}
.dm-spec dd{margin:0;line-height:1.45}
.dm-window-2{margin-top:10px}
@media (max-width:560px){.dm-spec div{grid-template-columns:1fr;gap:.15rem}}