/* ฉากเปิด "ระบบแยกชั้น" — ระบบจริงหนึ่งจอ แยกเป็นชั้นเมื่อเลื่อน แล้วประกอบกลับและถอยกล้องเห็นผลงานทั้งแถว
   ค่าที่เปลี่ยนตามการเลื่อน (--tilt --sep --pull ฯลฯ) ถูกตั้งจาก stage.js ทุกเฟรม ส่วนข้อความใช้ transition ตามเวลา */

.opening{
  --stage-bg:#fbf4f2; --stage-bg2:#f7e7ec; --stage-ink:#3d2c33; --stage-muted:#7a6470; --stage-pink:#d30067; --stage-violet:#3200a9;
  --tilt:0; --sep:0; --pull:0; --glow:1; --float:1; --pulse:0;
  --lx:0px; --ly:0px; --ls:1; --labels-h:0px;
  /* ฉากกว้างตามจอ แต่กองชั้นถูกจำกัดที่ 640px พอจัดกึ่งกลางแล้วจอยิ่งกว้างกองยิ่งห่างจากป้าย
     ระยะเลื่อนซ้ายจึงต้องลดลงตามความกว้างจอ เพื่อให้ช่องว่างคงที่ราว 40px ทุกขนาด */
  --shift:clamp(-120px, calc(454px - 20.3vw), 200px); --shrink:.15;
  position:relative; height:480svh; background:var(--stage-bg); color:var(--stage-ink);
}
.opening-stage{
  position:sticky; top:0; height:100svh; min-height:640px; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:3vw; align-items:center;
  padding:96px 4.5vw 56px; isolation:isolate;
  background:
    radial-gradient(60% 55% at 72% 46%, rgba(232,67,127,calc(.2*var(--glow))), transparent 70%),
    radial-gradient(42% 42% at 24% 88%, rgba(107,63,204,calc(.14*var(--glow))), transparent 70%),
    linear-gradient(160deg, #fff8f6, var(--stage-bg) 50%, var(--stage-bg2));
}
.opening-stage::after{ /* เกรนบาง ๆ ให้พื้นครีมไม่แบน */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(61,44,51,.07) .6px, transparent .7px); background-size:3px 3px;
}

/* ── ข้อความ 4 บท ซ้อนในช่องเดียว ─────────────────────────── */
.stage-fx{ position:absolute; inset:0; z-index:2; pointer-events:none; width:100%; height:100% }
/* หัวเรื่องทยอยเผยทีละกลุ่มอักษรตอนโหลด ใช้ตัวตัดอักขระไทยแบบเดียวกับรีล
   สถานะตั้งต้นในไฟล์คือเห็นครบ สคริปต์ค่อยสั่งซ่อนแล้วเผย หน้าจึงไม่ว่างถ้า JS ไม่ทำงาน */
.cl{ display:inline-block }
.opening.reveal .cl{ clip-path:inset(0 100% 0 0); transform:translateY(16px) }
.opening.reveal-run .cl{
  clip-path:inset(0 0 0 0); transform:none;
  transition:clip-path .62s cubic-bezier(.16,1,.3,1) var(--d), transform .62s cubic-bezier(.16,1,.3,1) var(--d);
}
@media (prefers-reduced-motion:reduce){
  .opening.reveal .cl, .opening.reveal-run .cl{ clip-path:none; transform:none; transition:none }
}

.stage-copy{ display:grid; position:relative; z-index:3; min-width:0 }
.stage-text{
  grid-area:1/1; max-width:34rem; opacity:0; visibility:hidden; transform:translateY(26px);
  transition:opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1), visibility 0s .45s;
}
.opening[data-chapter="0"] .stage-text[data-for="0"],
.opening[data-chapter="1"] .stage-text[data-for="1"],
.opening[data-chapter="2"] .stage-text[data-for="2"],
.opening[data-chapter="3"] .stage-text[data-for="3"]{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .5s ease .08s, transform .7s cubic-bezier(.16,1,.3,1) .08s, visibility 0s;
}
.stage-kicker{ font-size:.82rem; font-weight:600; color:var(--stage-pink); margin-bottom:1.1rem; letter-spacing:.01em }
.stage-text h1,.stage-text h2{
  font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif; font-weight:700;
  font-size:clamp(2.9rem,6vw,5.6rem); line-height:1.18; letter-spacing:-.022em; margin:0 0 1.3rem; text-wrap:balance;
}
.stage-text h1 span:not(.cl){ color:var(--stage-pink) }
.stage-text h2 em{ font-style:normal; color:var(--stage-violet) }
.stage-lead{ color:var(--stage-muted); font-size:1.06rem; line-height:1.8; max-width:29rem; margin:0 0 1.9rem }
.stage-actions{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap }
.stage-actions .btn-primary{ padding:.85rem 1.3rem; font-size:.95rem; color:#fff }
.stage-link{
  color:var(--stage-ink); font-weight:600; font-size:.95rem; text-decoration:none;
  border-bottom:1px solid rgba(61,44,51,.5); padding:.4rem .1rem; transition:border-color .2s, color .2s;
}
.stage-link:hover{ color:var(--stage-pink); border-color:var(--stage-pink) }
.stage-hint{
  margin-top:2.6rem; font-size:.78rem; color:var(--stage-muted); display:flex; align-items:center; gap:.6rem;
}
.stage-hint::before{ content:''; width:1px; height:34px; background:linear-gradient(var(--stage-pink), transparent); animation:hint-drop 1.8s ease-in-out infinite }
@keyframes hint-drop{ 0%{transform:scaleY(.2);transform-origin:top;opacity:0} 40%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(1);transform-origin:bottom;opacity:0} }

/* ── ฉาก 3D ─────────────────────────────────────────────── */
.stage-scene{ position:relative; z-index:2; min-width:0; height:min(78vh,640px); perspective:1500px; perspective-origin:50% 42% }
.stack{
  position:absolute; left:50%; top:calc(50% - var(--labels-h)/2); width:min(100%, 640px, 118svh); aspect-ratio:16/10;
  transform-style:preserve-3d; will-change:transform;
  transform:
    translate(-50%,-50%)
    translate(calc(var(--pull)*var(--lx) - var(--tilt)*var(--shift)), calc(var(--pull)*var(--ly) + var(--sep)*1.15px))
    scale(calc((1 - var(--pull)*(1 - var(--ls)))*(1 - var(--tilt)*var(--shrink))))
    rotateX(calc(var(--tilt)*56deg)) rotateZ(calc(var(--tilt)*-6deg)) rotateY(calc((1 - var(--tilt))*(1 - var(--pull))*-14deg));
}
.stack-float{ position:absolute; inset:0; transform-style:preserve-3d; animation:stack-bob 7s ease-in-out infinite }
html:not(.on-stage) .stack-float{ animation-play-state:paused }
@keyframes stack-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

.layer{
  position:absolute; inset:0; border-radius:10px; overflow:hidden; backface-visibility:hidden;
  background:#1a1226; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 60px -22px rgba(61,44,51,.45), 0 0 0 1px rgba(0,0,0,.35) inset;
  transform:translateZ(calc(var(--i)*var(--sep)*1px));
}
.layer-ui{ --i:3 } .layer-admin{ --i:2 } .layer-db{ --i:1 } .layer-line{ --i:0 }
.layer-ui img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top }
.layer-ui::after{ content:''; position:absolute; inset:0; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset; pointer-events:none }

/* ขอบล่างของแต่ละชั้นเรืองแสงเมื่อแยกออก ให้เห็นความหนาเหมือนถาด */
.layer::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px; z-index:2;
  background:linear-gradient(90deg, #ff5aa5, #9d7bff); opacity:calc(var(--tilt)*.9);
  opacity:calc(var(--tilt)*.9 + max(0, 1 - abs(var(--pulse) - var(--flash))*6)); --flash:2;
}
.layer-ui::before{ --flash:.25 } .layer-admin::before{ --flash:.45 } .layer-db::before{ --flash:.65 } .layer-line::before{ --flash:.85 }

/* ชั้น 2: แผงหลังบ้าน */
.layer-admin{ background:#241330; color:#f6e9f1; font-size:12px; padding:5.5% 5%; display:grid; grid-template-rows:auto 1fr auto; gap:4% }
.panel-head{ display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:13px }
.panel-head small{ font-weight:400; color:#cdb0c4; font-size:11px }
.panel-rows{ display:grid; gap:6px; align-content:start }
.panel-row{ display:grid; grid-template-columns:62px 1fr auto auto; align-items:center; gap:10px; padding:8px 10px; background:rgba(255,255,255,.055); border-radius:5px }
.panel-row b{ color:#fff } .panel-row i{ font-style:normal; color:#cdb0c4; font-variant-numeric:tabular-nums }
.chip{ font-size:10px; font-weight:700; padding:2px 7px; border-radius:999px; background:rgba(6,200,85,.18); color:#7cf0a9 }
.chip.wait{ background:rgba(255,186,0,.18); color:#ffd36b }
.panel-foot{ display:flex; gap:14px; font-size:11px; color:#cdb0c4 }
.panel-foot b{ color:#fff; font-size:15px; display:block; font-variant-numeric:tabular-nums }

/* ชั้น 3: ฐานข้อมูล */
.layer-db{ background:#120c18; padding:5.5% 5%; display:grid; grid-template-rows:1fr auto; align-content:end; gap:3%; color:#e7d8ff; font-size:11px }
.layer-db .db-tabs{ order:2 } .layer-db .db-grid{ order:1; align-content:end }
.db-tabs{ display:flex; gap:6px } .db-tabs span{ padding:3px 9px; border:1px solid rgba(157,123,255,.35); border-radius:4px; color:#bda5ff }
.db-tabs span:first-child{ background:rgba(157,123,255,.18); color:#fff }
.db-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:4px; align-content:start }
.db-grid i{ display:block; height:14px; border-radius:3px; background:rgba(157,123,255,.14) }
.db-grid i:nth-child(6n+1){ background:rgba(157,123,255,.3) }
.db-grid i.hot{ background:linear-gradient(90deg, var(--stage-pink), #ff9ccc); box-shadow:0 0 12px rgba(255,90,165,.6) }

/* ชั้น 4: การแจ้งเตือน LINE */
.layer-line{ background:#172017; padding:5.5% 5%; display:grid; align-content:end; gap:10px; font-size:12px; color:#eafbe9 }
.line-head{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px }
.line-head::before{ content:''; width:10px; height:10px; border-radius:50%; background:#06c755; box-shadow:0 0 0 4px rgba(6,199,85,.2) }
.bubble{ max-width:78%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:12px 12px 12px 3px; padding:9px 12px; line-height:1.5 }
.bubble b{ color:#fff; display:block } .bubble small{ color:#a9c9a9; font-size:10px }
.bubble.me{ margin-left:auto; background:rgba(6,199,85,.22); border-radius:12px 12px 3px 12px }

/* จุดสัญญาณวิ่งลงตามชั้นตอนประกอบกลับ */
.pulse{
  position:absolute; left:-3%; right:-3%; top:calc(var(--pulse)*100%); height:4px; margin-top:-2px; pointer-events:none; border-radius:2px;
  background:linear-gradient(90deg, transparent, #ff5aa5 15%, #fff 50%, #ff5aa5 85%, transparent);
  box-shadow:0 0 28px 6px rgba(255,90,165,.7), 0 0 60px 12px rgba(255,90,165,.3);
  opacity:calc(var(--pulse)*(1 - var(--pulse))*4);
  transform:translateZ(calc(3*var(--sep)*1px + 8px));
}

/* ป้ายกำกับชั้น — อยู่นอกระนาบ 3D เพื่อให้คมและอ่านง่าย */
.layer-labels{ position:absolute; right:-3vw; top:0; bottom:0; width:min(32%,208px); margin:0; padding:0; z-index:3; pointer-events:none }
.layer-labels li{
  position:absolute; right:0; top:var(--y,50%); transform:translateY(-50%); width:100%;
  list-style:none; display:grid; grid-template-columns:1fr auto; align-items:center; gap:.6rem;
  font-size:.82rem; line-height:1.3; color:var(--stage-ink); text-align:right;
  opacity:calc(max(0, var(--sep) - var(--k)*22)/40); transform:translateY(-50%) translateX(calc((1 - min(1, max(0, var(--sep) - var(--k)*22)/40))*18px));
}
.layer-labels li::after{ content:''; width:38px; height:1px; background:linear-gradient(90deg, transparent, var(--stage-pink)); justify-self:end; order:-1 }
.layer-labels li b{ color:var(--stage-ink) }
.layer-labels li b{ display:block; font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif; font-size:1rem }
.layer-labels li small{ color:var(--stage-muted); font-size:.74rem }
.layer-labels li:nth-child(1){ --k:0; --y:24% } .layer-labels li:nth-child(2){ --k:1; --y:42% } .layer-labels li:nth-child(3){ --k:2; --y:60% } .layer-labels li:nth-child(4){ --k:3; --y:78% }

/* ── แถวผลงาน (lineup) ─────────────────────────────────── */
.lineup{ position:absolute; inset:auto 0 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.4rem 1.6rem; align-items:end; z-index:1; margin:0; padding:0 }
.lineup figure{ margin:0; min-width:0; opacity:calc(var(--pull)*var(--pull)); transform:translateX(calc((1 - var(--pull))*var(--dx))) translateY(calc((1 - var(--pull))*30px)) }
.lineup figure:nth-child(2){ --dx:-60px } .lineup figure:nth-child(3){ --dx:-40px } .lineup figure:nth-child(4){ --dx:40px } .lineup figure:nth-child(5){ --dx:60px }
.lineup .slot{ aspect-ratio:16/10; border-radius:7px; overflow:hidden; background:#fff; border:1px solid var(--border,#eddce0); box-shadow:0 24px 40px -20px rgba(61,44,51,.4) }
.lineup .slot img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top }
.lineup figure.is-stack .slot{ visibility:hidden }
.lineup figcaption{ margin-top:.7rem; font-size:.8rem; color:var(--stage-muted); line-height:1.35 }
.lineup figcaption b{ display:block; color:var(--stage-ink); font-size:.95rem }
.lineup figure.is-stack figcaption{ opacity:var(--pull) }

.stage-note{ position:absolute; left:4.5vw; bottom:1.4rem; z-index:3; font-size:.72rem; color:var(--stage-muted); margin:0 }
.stage-progress{ position:absolute; right:4.5vw; bottom:1.5rem; z-index:3; display:flex; gap:6px }
.stage-progress i{ width:26px; height:2px; background:rgba(61,44,51,.18); transition:background .3s }
.opening[data-chapter="0"] .stage-progress i:nth-child(1),.opening[data-chapter="1"] .stage-progress i:nth-child(2),
.opening[data-chapter="2"] .stage-progress i:nth-child(3),.opening[data-chapter="3"] .stage-progress i:nth-child(4){ background:var(--stage-pink) }

/* ── nav กลายเป็นโทนเข้มขณะอยู่บนฉาก ───────────────────── */
/* nav ใช้โทนครีมเดิมตลอด (html.on-stage ยังถูกตั้งไว้สำหรับหยุด animation ลอยของกองชั้นเมื่อพ้นจอ) */

/* ── จอแคบ: บทเดียวกันแต่เรียงแนวตั้ง ────────────────────── */
/* จอโน้ตบุ๊กยังวางป้ายข้างกองชั้นได้ แต่ต้องย่อกองลงตามความกว้างที่เหลือ
   (เจ้าของขอให้คำอธิบายอยู่ขวามือเรียงตามชั้น ไม่ใช่แถวใต้ฉาก) */
@media (min-width:1440px) and (max-width:1511px){ .opening{ --shrink:.22; --shift:130px } }
@media (min-width:1360px) and (max-width:1439px){ .opening{ --shrink:.30; --shift:112px } }

/* ต่ำกว่า 1360px ใส่ทั้งข้อความ กองชั้น และป้าย เรียงข้างกันไม่ไหว ย้ายป้ายลงมาเป็นแถวใต้ฉาก */
@media (max-width:1359px){
  .opening{ --labels-h:104px; --shift:0px; --shrink:.21 }
  .layer-labels{
    right:0; left:0; top:auto; bottom:0; width:auto; height:var(--labels-h);
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 1.1rem; align-content:center;
  }
  .layer-labels li{
    position:static; transform:none!important; width:auto; display:block; text-align:left;
    padding-top:.7rem; border-top:1px solid rgba(61,44,51,.22); counter-increment:lyr;
  }
  .layer-labels li::after{ display:none }
  /* แถวใต้ฉากไม่ได้เรียงตามความลึกแล้ว ความทึบจึงอิง --sep รวม ไม่ใช่ลำดับชั้น ทุกช่องต้องทึบเต็มเมื่อกางสุด */
  .layer-labels li{ opacity:calc((var(--sep) - var(--k)*8)/30) }
  .layer-labels li b{ font-size:.86rem; line-height:1.3 }
  .layer-labels li b::before{ content:counter(lyr) '. '; color:var(--stage-pink); font-weight:700 }
  .layer-labels li small{ display:block; margin-top:.15rem; font-size:.72rem; line-height:1.45 }
  .layer-labels{ counter-reset:lyr }
}

@media (max-width:899px){
  .opening{ height:430svh }
  .opening-stage{ grid-template-columns:1fr; gap:0; align-content:start; padding:84px 1.25rem 48px; min-height:0 }
  .stage-text h1,.stage-text h2{ font-size:clamp(2.35rem,10vw,3.4rem); margin-bottom:.8rem }
  .stage-lead{ font-size:.93rem; line-height:1.7; margin-bottom:1.1rem }
  .stage-hint{ display:none }
  .opening{ --scene-h:min(47svh,430px) }
  .stage-scene{ height:var(--scene-h); aspect-ratio:auto; margin-top:1rem; perspective:1100px }
  .stack{ width:min(92%, 520px, calc((var(--scene-h) - var(--labels-h)) * 1.6)); transform:
    translate(-50%,-50%) translate(calc(var(--pull)*var(--lx)), calc(var(--pull)*var(--ly) + var(--sep)*.12px))
    scale(calc((1 - var(--pull)*(1 - var(--ls)))*(1 - var(--tilt)*.16)))
    rotateX(calc(var(--tilt)*54deg)) rotateZ(calc(var(--tilt)*-4deg)) }
  .layer-admin,.layer-db,.layer-line{ font-size:10px } .panel-row{ grid-template-columns:50px 1fr auto auto; gap:6px; padding:6px 8px }
  .opening{ --labels-h:132px }
  .layer-labels{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem 1rem; align-content:end }
  .layer-labels li{ padding-top:.5rem }
  .layer-labels li b{ font-size:.8rem } .layer-labels li small{ font-size:.68rem; line-height:1.4 }
  .lineup{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem 1rem; inset:auto 0 0 0 }
  .lineup figure:nth-child(n+5){ display:none } /* ระหว่างถอยกล้องยังคงขนาดฉากมือถือไว้ ก่อนเข้าสู่บทสุดท้าย */
  .lineup figcaption{ font-size:.66rem } .lineup figcaption b{ font-size:.72rem }
  .stage-note{ left:1.25rem; bottom:1rem } .stage-progress{ right:1.25rem; bottom:1.1rem } .stage-progress i{ width:18px }
  /* ภาพกับป้ายอยู่คนละพื้นที่; ตอนจบให้ส่วนผลงานจริงด้านล่างรับช่วงต่อ
     แทนการอัดภาพตัวอย่าง 4 ภาพกับปุ่มไว้ในจอเดียว */
  .stage-note,.stage-progress{ display:none }
  .opening[data-chapter="3"] .opening-stage{ align-content:center }
  .opening[data-chapter="3"] .stage-scene{ display:none }
}
/* จอเตี้ยมาก (หน้าต่างเดสก์ท็อปที่ถูกย่อ ไม่ใช่มือถือจริง) ใส่ทั้งข้อความ กองชั้น และแถบคำอธิบายไม่ไหว
   ตัดแถบคำอธิบายออกก่อน เพราะข้อความกับภาพระบบสำคัญกว่า โทรศัพท์จริงสูง 844–932px จึงไม่โดนกฎนี้ */
@media (max-width:899px) and (max-height:620px){
  /* เลิกตรึงเต็มจอ ปล่อยให้เนื้อหาไหลตามปกติ ไม่งั้นของจะทับกันเพราะพื้นที่ไม่พอ
     เสียอนิเมชันตามการเลื่อนไป แต่ได้ความอ่านออกคืนมา เหมือนที่ทำในโหมดลดการเคลื่อนไหว */
  .opening{ height:auto; --labels-h:0px }
  .opening-stage{ position:relative; height:auto; min-height:0; overflow:visible }
  .hero-runway{ display:none }
  .lineup, .stage-progress{ display:none }
  .stage-text{ position:static; opacity:1; visibility:visible; transform:none }
  .stage-text[data-for]:not([data-for="0"]){ display:none }
  .layer-labels{ display:none }
  .stage-text h1, .stage-text h2{ font-size:clamp(1.7rem,6.4vw,2.2rem); margin-bottom:.6rem }
  .stage-lead{ font-size:.82rem; line-height:1.6; margin-bottom:.7rem }
  .stage-kicker{ font-size:.72rem; margin-bottom:.6rem }
  .opening{ --scene-h:min(44svh,300px) }
  .stage-scene{ margin-top:.7rem }
  .opening-stage{ padding:72px 1.25rem 40px }
}

@media (max-width:899px) and (max-height:780px){ .opening-stage{ padding-top:76px } .opening{ --labels-h:112px; --scene-h:min(46svh,360px) } .stage-text h1,.stage-text h2{ font-size:clamp(2rem,8vw,2.7rem) } .stage-lead{ font-size:.88rem; margin-bottom:.8rem } }
@media (min-width:900px) and (max-height:760px){
  .opening-stage{ min-height:0; padding:88px 4vw 44px }
  .stack{ width:min(92%, 560px, 110svh) }
  .stage-text h1,.stage-text h2{ font-size:clamp(2.4rem,4.6vw,3.6rem); margin-bottom:1rem }
  .stage-lead{ font-size:.98rem; line-height:1.7; margin-bottom:1.3rem }
  .stage-hint{ margin-top:1.6rem }
  .stage-scene{ height:min(74vh,520px) }
  .stack{ width:min(92%,560px) }
  .lineup{ gap:1rem 1.2rem } .lineup figcaption{ font-size:.72rem } .lineup figcaption b{ font-size:.84rem }
}

/* ── ลดการเคลื่อนไหว / ไม่มี JavaScript: ภาพนิ่งที่อธิบายครบ ── */
html.no-js .opening, html.reduce-stage .opening{ height:auto }
html.no-js .opening-stage, html.reduce-stage .opening-stage{ position:relative; height:auto; min-height:0; padding-bottom:3rem; overflow:visible }
html.no-js .opening, html.reduce-stage .opening{ --tilt:1; --sep:72; --pull:0; --glow:1 }
html.no-js .stage-text, html.reduce-stage .stage-text{ opacity:1; visibility:visible; transform:none; position:static }
html.no-js .stage-text[data-for]:not([data-for="0"]), html.reduce-stage .stage-text[data-for]:not([data-for="0"]){ display:none }
html.no-js .stack, html.reduce-stage .stack{ animation:none!important }
html.no-js .stage-hint, html.reduce-stage .stage-hint{ display:none }
html.no-js .stage-scene, html.reduce-stage .stage-scene{ height:min(70vh,560px) }
html.no-js .lineup, html.reduce-stage .lineup{ display:none }
html.no-js .stage-progress, html.reduce-stage .stage-progress{ display:none }
.stage-static-note{ display:none }
html.no-js .stage-static-note, html.reduce-stage .stage-static-note{ display:block; margin:2rem 0 0; max-width:30rem; font-size:.82rem; color:var(--stage-muted); line-height:1.6 }
html.no-js .layer-labels li, html.reduce-stage .layer-labels li{ opacity:1; transform:translateY(-50%) }