@charset "UTF-8";
:root{
  --bg:#f2ede6; --paper:#fbfaf7; --ink:#11100e; --muted:#5e554b;
  --gold:#d39c21; --gold2:#ffd24a; --red:#8b1e1e; --blue:#0d114c;
  --green:#1e6b3a; --line:#a99a87; --black:#080806;
}

.play.slide:first-child{page-break-before:avoid;break-before:auto}
.play.red{background:linear-gradient(135deg,#fbe8e4,#ddb4ac);border-top-color:var(--red)}
.play.green{background:linear-gradient(135deg,#eaf8dd,#a9d49f);border-top-color:var(--green)}
h1{font-size:74px;line-height:.95;margin:18px 0 0;font-weight:950;letter-spacing:-2px;max-width:1050px}
.play.bigline{font-size:96px;line-height:.92;font-weight:970;letter-spacing:-3px}.gold{color:var(--gold2)}.redtxt{color:var(--red)}.bluetxt{color:var(--blue)}
.play.brand,.play.num{position:absolute;bottom:26px;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px;letter-spacing:.08em;color:var(--muted)}.play.brand{left:72px}.play.num{right:42px}.play.dark .brand,.play.dark .num{color:#9b8b7c}
/* S1 */
.play.op-grid{position:absolute;right:74px;top:108px;width:350px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.op-cell{height:98px;border:2px solid rgba(255,210,74,.55);padding:14px;background:rgba(255,255,255,.04);font-weight:900;font-size:22px;display:flex;align-items:end}.op-cell span{color:var(--gold2)}
.play.timebar{position:absolute;left:72px;bottom:112px;width:920px;height:16px;background:var(--gold2)}.play.timebar:before,.timebar:after{content:"";position:absolute;top:-9px;width:34px;height:34px;border-radius:50%;background:var(--gold2)}.play.timebar:before{left:0}.play.timebar:after{right:0}.time-label{position:absolute;left:72px;bottom:138px;font-family:"SF Mono";font-size:14px;letter-spacing:.13em;color:var(--gold2);font-weight:900;text-transform:uppercase}
/* S2 */
.scale{position:absolute;left:126px;top:170px;width:1028px;height:420px}.beam{position:absolute;left:155px;right:155px;top:182px;height:13px;background:var(--ink);transform:rotate(-6deg);transform-origin:center}.post{position:absolute;left:510px;top:178px;width:22px;height:210px;background:var(--ink)}.base{position:absolute;left:435px;top:388px;width:170px;height:22px;background:var(--ink)}.pan{position:absolute;width:330px;height:138px;border:4px solid var(--ink);border-top:0;border-radius:0 0 40px 40px;background:rgba(251,250,247,.78);padding:24px 22px;text-align:center;box-shadow:8px 8px 0 rgba(17,16,14,.12)}.pan.left{left:40px;top:225px}.pan.right{right:30px;top:90px}.pan .phead{font-family:"SF Mono";font-size:13px;text-transform:uppercase;letter-spacing:.11em;font-weight:950;color:var(--red)}.pan .ptxt{font-size:34px;line-height:1;font-weight:950;margin-top:12px}.scale-note{position:absolute;left:396px;top:62px;width:270px;text-align:center;font-size:25px;line-height:1.1;font-weight:950;color:var(--blue)}
/* S3 */
.levers{display:flex;gap:18px;align-items:flex-end;margin-top:42px;height:430px}.lever{position:relative;flex:1;height:380px;border-left:4px solid var(--ink);display:flex;align-items:flex-end;justify-content:center}.lever .knob{position:absolute;left:50%;transform:translateX(-50%);width:58px;height:58px;border-radius:50%;background:var(--red);border:4px solid var(--ink);box-shadow:6px 6px 0 rgba(17,16,14,.12)}.lever:nth-child(2) .knob{bottom:220px;background:var(--gold)}.lever:nth-child(3) .knob{bottom:145px;background:var(--blue)}.lever:nth-child(4) .knob{bottom:285px;background:var(--green)}.lever:nth-child(5) .knob{bottom:110px;background:var(--gold)}.lever:nth-child(6) .knob{bottom:250px;background:var(--blue)}.lever:nth-child(7) .knob{bottom:185px;background:var(--red)}.lever:first-child .knob{bottom:70px}.lever .lab{position:absolute;bottom:-48px;width:138px;text-align:center;font-size:17px;line-height:1.05;font-weight:950}.control-line{position:absolute;right:72px;top:95px;width:340px;font-size:31px;line-height:1.05;font-weight:950;color:var(--blue)}
/* S4 */
.pipeline{margin-top:38px;height:380px;position:relative}.pipe{position:absolute;left:70px;right:70px;top:177px;height:18px;background:var(--gold)}.stage{position:absolute;top:86px;width:204px;height:206px;border:3px solid var(--ink);background:var(--paper);box-shadow:7px 7px 0 rgba(17,16,14,.12);padding:20px}.stage .snum{font-family:"SF Mono";font-size:14px;letter-spacing:.1em;font-weight:950;color:var(--red)}.stage .stxt{font-size:27px;line-height:1;font-weight:950;margin-top:20px}.stage .small{font-size:16px;line-height:1.15;font-weight:800;color:var(--muted);margin-top:14px}.st1{left:0}.st2{left:232px}.st3{left:464px}.st3{background:#fff2c1}.st4{left:696px}.st5{left:928px}.st5{background:#f6dada;border-color:var(--red)}
/* S5 */
.layers{position:relative;width:1060px;height:430px}.layer{position:absolute;left:0;width:100%;height:76px;border:3px solid var(--ink);box-shadow:7px 7px 0 rgba(17,16,14,.10);display:grid;grid-template-columns:280px 1fr;align-items:center;background:var(--paper)}.layer .name{font-size:31px;font-weight:950;padding-left:26px}.layer .desc{font-size:22px;font-weight:820;color:#3f382f}.l1{top:0;border-left:18px solid var(--blue)}.l2{top:86px;border-left:18px solid var(--green)}.l3{top:172px;border-left:18px solid var(--gold)}.l4{top:258px;border-left:18px solid var(--red)}.deletion{position:absolute;right:52px;top:372px;font-size:39px;font-weight:970;color:var(--red);letter-spacing:-1px}
/* S6 */
.journey{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}.jcard{height:360px;background:rgba(251,250,247,.92);border:3px solid var(--ink);box-shadow:7px 7px 0 rgba(17,16,14,.10);padding:22px;display:flex;flex-direction:column;justify-content:space-between}.jcard .top{font-family:"SF Mono";font-size:14px;letter-spacing:.11em;text-transform:uppercase;font-weight:950;color:var(--red)}.jcard .mid{font-size:42px;line-height:.95;font-weight:950}.jcard .bot{font-size:21px;line-height:1.12;font-weight:800;color:#4a3f38}.jcard:nth-child(4){background:var(--black);color:#fff8ea;border-color:var(--gold)}.jcard:nth-child(4) .bot{color:#d7cbbd}.jcard:nth-child(4) .top{color:var(--gold2)}
/* S7 */
.gate{position:absolute;left:92px;top:155px;width:520px;height:420px}.tower{position:absolute;bottom:0;width:130px;height:330px;background:var(--blue);border:4px solid var(--ink)}.tower.left{left:0}.tower.right{right:0}.arch{position:absolute;bottom:0;left:130px;width:260px;height:260px;background:var(--blue);border:4px solid var(--ink);border-bottom:0;border-radius:150px 150px 0 0}.door{position:absolute;bottom:0;left:190px;width:140px;height:210px;background:var(--paper);border:4px solid var(--ink);border-bottom:0;border-radius:80px 80px 0 0}.gate-text{position:absolute;right:82px;top:160px;width:560px}.gate-text .huge{font-size:78px;line-height:.92;font-weight:970;color:var(--red)}.gate-text .copy{font-size:30px;line-height:1.14;font-weight:850;margin-top:22px}.gate-rule{position:absolute;right:82px;bottom:90px;background:var(--black);color:#fff8ea;padding:18px 24px;font-size:30px;font-weight:950;border-left:12px solid var(--gold)}
/* S8 */
.play .hierarchy{position:relative;width:1060px}.hrow{height:88px;margin-bottom:15px;border:3px solid var(--ink);background:var(--paper);display:grid;grid-template-columns:275px 1fr;align-items:center;box-shadow:7px 7px 0 rgba(17,16,14,.11)}.hrow .name{font-size:34px;font-weight:970;padding-left:26px}.hrow .desc{font-size:24px;font-weight:820;color:#3f382f}.hrow.law{background:var(--black);color:#fff8ea;border-color:var(--gold)}.hrow.law .desc{color:#d7cbbd}.hrow.king{border-left:18px solid var(--gold)}.hrow.priest{border-left:18px solid var(--green)}.hrow.tribe{border-left:18px solid var(--blue)}.release{position:absolute;left:110px;bottom:82px;font-size:49px;font-weight:970;letter-spacing:-1px;color:var(--red)}

.play .control{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:42px; overflow:scroll;}
.play .lever{height:290px;position:relative;background:#11100eCC;color:#fbfaf7;border:3px solid #11100e;box-shadow:6px 6px 0 rgba(17,16,14,.12);padding:18px 12px;text-align:center;display:flex;align-items:end;justify-content:center;font:900 19px/1.05 "SF Mono",Menlo,monospace;text-transform:uppercase}
.play .lever:before{content:"";position:absolute;left:50%;top:24px;width:16px;height:145px;background:var(--gold);transform:translateX(-50%);border-radius:10px}
.play .lever:after{content:"";position:absolute;left:50%;top:26px;width:54px;height:54px;background:var(--red);border:4px solid #fbfaf7;border-radius:50%;transform:translateX(-50%)}
.play .lever:nth-child(even):after{top:90px;background:var(--law)}
.play .comment{font:700 14px/1.35 "SF Mono",Menlo,monospace;color:#6b5f50;margin-top:14px}

/* ============================================================
   UX-DESIGNER CHANGE 2026-07-07 · mobile settings.
   Play compositions assume the 1280x720 canvas: fixed-coordinate
   scenes flatten into stacked flow, the lever panel becomes a
   2-across grid, and display type steps down.
   ============================================================ */
@media(max-width:640px){
  h1{font-size:clamp(34px,10vw,74px);letter-spacing:-1px}
  .play.bigline{font-size:clamp(38px,11vw,96px);letter-spacing:-1px}
  .journey{grid-template-columns:1fr;gap:12px}
  .jcard{height:auto;min-height:0}
  /* control panel: two levers across, machine geometry scaled down */
  .play .control{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}
  .play .lever{height:220px;font-size:15px}
  .play .lever:before{height:105px}
  .play .lever:nth-child(even):after{top:72px}
  /* fixed-coordinate scene pieces return to flow */
  .play.op-grid,.pan,.gate-text,.gate-rule,.control-line,
  .scale-note,.time-label,.stage,.layer,.deletion,.release{
    position:static;width:auto;max-width:100%;height:auto;
    margin:10px 0 0;transform:none;
  }
  .play.brand,.play.num{position:static;margin-top:14px}
  /* drawing-only layers built for deck geometry */
  .play.timebar,.beam,.post,.base,.tower,.arch,.door,.pipe,
  .lever .knob{display:none}
  .scale,.gate,.layers,.pipeline,.play .hierarchy,.levers{
    position:static;width:auto;height:auto;min-height:0;
  }
  .layer,.hrow{
    display:grid;grid-template-columns:1fr;gap:6px;height:auto;
  }
  .layer .name,.hrow .name{padding-left:0}
  .levers{display:flex;flex-direction:column;gap:8px;margin-top:20px}
  .levers .lever{height:auto;border-left:0;padding:8px 0;justify-content:flex-start}
  .levers .lever .lab{position:static;width:auto;text-align:left}
}