@charset "UTF-8";
:root{
 --bronze:#b8860b; --red:#8b1e1e; --green:#1e6b3a;
 --black:#080806;     --bad-bright: #E63946; 
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#1e293b;color:var(--ink);font-family:Inter,Aptos,"Segoe UI",Arial,sans-serif}
@page{size:1280px 720px;margin:0}
details{margin:0 auto 18px;width:1280px;background:#101826;border:1px solid #334155}
summary{cursor:pointer;padding:12px 18px;font:800 14px/1 "SF Mono",Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:#e6c35a}
.slide{position:relative;width:1280px;height:720px;overflow:hidden;background:var(--bg);padding:58px 78px 70px;break-before:page;display:flex;flex-direction:column;border-top:7px solid var(--bronze);box-shadow:inset 0 0 0 1px rgba(17,16,14,.18)}
.dark{background:radial-gradient(circle at 70% 20%,rgba(255,210,74,.12),transparent 30%),linear-gradient(135deg,#080806,#15110d 60%,#080806);color:#fbfaf7;border-top-color:var(--gold)}
.red{background:linear-gradient(135deg,#fbe8e4,#ddb4ac);border-top-color:var(--red)}
.blue{background:linear-gradient(135deg,#e9f2fb,#d8e4f7);border-top-color:var(--law)}
.green{background:linear-gradient(135deg,#eaf8dd,#a9d49f);border-top-color:var(--green)}
.kicker{font:900 15px/1 "SF Mono",Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);margin-bottom:16px}
.dark .kicker{color:var(--gold)} .red .kicker{color:var(--red)} .blue .kicker{color:var(--law)} .green .kicker{color:var(--green)}
h1{font-size:72px;line-height:.96;letter-spacing:-2px;font-weight:950;text-transform:uppercase}
h2{font-size:50px;line-height:1.02;letter-spacing:-1px;font-weight:950}
.big{font-size:48px;line-height:1.08;font-weight:900}
.lead{font-size:28px;line-height:1.22;font-weight:800;color:#2e2a25}
.dark .lead{color:#eadfce}
.body{font-size:24px;line-height:1.26;font-weight:730;color:#3f382f}
.dark .body{color:#ded0bd}
.slidenum{position:absolute;right:44px;bottom:26px;font:700 13px/1 "SF Mono",Menlo,monospace;color:var(--muted)}
.brandfoot{position:absolute;left:78px;bottom:26px;font:700 12px/1 "SF Mono",Menlo,monospace;letter-spacing:.08em;color:var(--muted)}
.dark .slidenum,.dark .brandfoot{color:#a89984}
.hl{color:var(--gold)} .law{color:var(--law)} .bad{color:var(--red)} .good{color:var(--green)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;flex:1}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;flex:1}
.panel{background:rgba(251,250,247,.85);border:3px solid var(--ink);box-shadow:8px 8px 0 rgba(17,16,14,.14);padding:24px}
.dark .panel{background:rgba(251,250,247,.08);border-color:#e6c35a;color:#fbfaf7}
.panel .label{font:900 13px/1 "SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.panel .title{font-size:34px;line-height:1.04;font-weight:950;margin-bottom:14px}
.panel .txt{font-size:21px;line-height:1.22;font-weight:720;color:#3f382f}
.dark .panel .txt{color:#eadfce}
.scale{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:end;margin-top:30px}
.scale .side{height:410px;border:4px solid currentColor;padding:28px;position:relative;background:rgba(251,250,247,.86);box-shadow:10px 10px 0 rgba(17,16,14,.15)}
.scale .side:first-child{color:var(--bronze);transform:translateY(-34px)}
.scale .side:last-child{color:var(--red);transform:translateY(34px)}
.scale .side:after{content:"";position:absolute;left:20%;right:20%;bottom:32px;height:12px;background:currentColor}
.control{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:42px}
.lever{height:290px;position:relative;background:#11100e;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}
.lever:before{content:"";position:absolute;left:50%;top:24px;width:16px;height:145px;background:var(--gold);transform:translateX(-50%);border-radius:10px}
.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%)}
.lever:nth-child(even):after{top:90px;background:var(--law)}
.bridge{position:relative;display:grid;grid-template-columns:1fr 180px 1fr;gap:28px;align-items:center;flex:1}
.bridge .arc{height:340px;border:4px solid var(--ink);background:var(--paper);padding:28px;box-shadow:8px 8px 0 rgba(17,16,14,.12)}
.arrow{font-size:92px;text-align:center;color:var(--gold);font-weight:950;text-shadow:4px 4px 0 rgba(17,16,14,.18)}
.stack{display:flex;flex-direction:column;gap:14px;margin-top:24px}
.bar{background:var(--paper);border-left:14px solid var(--law);padding:18px 22px;font-size:25px;font-weight:900;box-shadow:6px 6px 0 rgba(17,16,14,.12)}
.bar.red{border-left-color:var(--red)}
.bar.gold{border-left-color:var(--bronze)}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px;flex:1}
.timeline .step{position:relative;background:var(--paper);border:3px solid var(--ink);padding:22px;box-shadow:7px 7px 0 rgba(17,16,14,.12)}
.timeline .step:before{content:attr(data-n);position:absolute;top:-24px;left:18px;background:var(--ink);color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:950}
.timeline .step .t{font-size:30px;font-weight:950;line-height:1.02;margin-top:12px}
.timeline .step .d{font-size:20px;line-height:1.18;margin-top:12px;color:#4a3f38;font-weight:750}
.gate{display:grid;grid-template-columns:390px 1fr;gap:34px;align-items:center;flex:1}
.gate-icon{height:450px;border:12px solid var(--ink);border-bottom:none;border-radius:190px 190px 0 0;position:relative;box-shadow:10px 10px 0 rgba(17,16,14,.12)}
.gate-icon:before,.gate-icon:after{content:"";position:absolute;bottom:0;width:92px;height:280px;background:var(--ink)}
.gate-icon:before{left:70px}.gate-icon:after{right:70px}
.layers{display:flex;flex-direction:column;gap:13px}
.layer{padding:15px 18px;background:var(--paper);border:2px solid var(--ink);font-size:21px;font-weight:850;box-shadow:5px 5px 0 rgba(17,16,14,.1)}
.chain{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:44px}
.node{flex:1;min-height:160px;background:var(--paper);border:3px solid var(--ink);padding:20px;text-align:center;box-shadow:6px 6px 0 rgba(17,16,14,.12);display:flex;flex-direction:column;justify-content:center}
.node .n{font-size:28px;font-weight:950;line-height:1.02}
.node .s{font-size:18px;color:#51493e;margin-top:10px;font-weight:700}
.chev{font-size:48px;font-weight:950;color:var(--gold)}
.creative{display:grid;grid-template-columns:430px 1fr;gap:34px;align-items:center;flex:1}
.blast{height:450px;border-radius:50%;background:radial-gradient(circle,#ffd24a 0 18%,#b8860b 19% 38%,#8b1e1e 39% 56%,#11100e 57%);box-shadow:14px 14px 0 rgba(17,16,14,.18)}
.comment{font:700 14px/1.35 "SF Mono",Menlo,monospace;color:#6b5f50;margin-top:14px}
.seg-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.seg-dim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,8,6,.88), rgba(8,8,6,.42), rgba(8,8,6,.1)); z-index:0; }
.segment-slide.dark .seg-dim { background:linear-gradient(90deg, rgba(8,8,6,.92), rgba(8,8,6,.48), rgba(8,8,6,.12)); }
.seg-title { font-size:60px; line-height:1.02; letter-spacing:-1.2px; font-weight:950; color:var(--ink); max-width:940px; }
.dark .seg-title { color:#fff8ec; }
.seg-sub { margin-top:18px; font-size:26px; line-height:1.22; color:#4a3f38; max-width:950px; font-weight:800; }
.dark .seg-sub { color:#eadfce; }
.seg-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:26px; }
.seg-card { background:rgba(255,248,234,.9); border:3px solid #11100e; border-left:14px solid var(--law); padding:20px 22px; box-shadow:8px 8px 0 rgba(17,16,14,.14); min-height:120px; }
.seg-card.bad { border-left-color:var(--bad); }
.seg-card.gold { border-left-color:var(--king); }
.seg-card.good { border-left-color:var(--good); }
.seg-card .h { font-size:28px; font-weight:950; line-height:1.04; margin-bottom:8px; }
.seg-card .t { font-size:20px; line-height:1.22; font-weight:760; color:#40382f; }
.seg-punch { position:absolute; left:78px; right:78px; bottom:72px; background:#11100e; color:#fff8ec; border-left:16px solid var(--gold); padding:18px 24px; font-size:29px; line-height:1.12; font-weight:950; box-shadow:8px 8px 0 rgba(17,16,14,.16); }
.seg-punch b { color:var(--gold); }
.seg-stack { margin-top:24px; display:flex; flex-direction:column; gap:12px; max-width:880px; }
.seg-row { display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:center; background:rgba(255,248,234,.88); border:2px solid #11100e; border-left:12px solid var(--law); padding:14px 18px; box-shadow:5px 5px 0 rgba(17,16,14,.1); }
.seg-row.bad { border-left-color:var(--bad); }
.seg-row.gold { border-left-color:var(--king); }
.seg-row .label { font-family:"SF Mono", Menlo, monospace; font-size:15px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.seg-row .text { font-size:24px; line-height:1.1; font-weight:900; }
.seg-mini { font-family:"SF Mono", Menlo, monospace; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:950; margin-bottom:12px; }
.seg-law-list { margin-top:22px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:1040px; }
.seg-law { background:rgba(255,248,234,.9); border:2px solid #11100e; padding:14px 14px; font-size:20px; font-weight:900; line-height:1.1; min-height:72px; display:flex; align-items:center; box-shadow:4px 4px 0 rgba(17,16,14,.1); }
.seg-roles { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:14px; margin-top:28px; }
.seg-roles .role { min-height:225px; padding:18px; background:rgba(255,248,234,.9); border:3px solid #11100e; border-top:18px solid var(--law); box-shadow:6px 6px 0 rgba(17,16,14,.12); }
.seg-roles .role.king { border-top-color:var(--king); }
.seg-roles .role.priest { border-top-color:var(--bad); }
.seg-roles .role.tribe { border-top-color:var(--good); }
.role .r { font-family:"SF Mono", Menlo, monospace; font-size:15px; letter-spacing:.08em; text-transform:uppercase; font-weight:950; color:#4a3f38; margin-bottom:12px; }
.role .n { font-size:30px; line-height:1.0; font-weight:950; margin-bottom:10px; }
.role .d { font-size:18px; line-height:1.2; font-weight:780; color:#40382f; }

.judge .gate-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 28px;
    align-items: stretch;
} .judge .gate {
    border: 5px solid var(--ink);
    background: linear-gradient(#f7eddc, #fbfaf7);
    padding: 26px 30px;
    min-height: 330px;
    box-shadow: 10px 10px 0 rgba(17, 16, 14, .15);
    position: relative;
}.judge .gate:before {
    content: "";
    position: absolute;
    left: 30px;
    right: 30px;
    top: -26px;
    height: 24px;
    background: repeating-linear-gradient(90deg, var(--ink) 0, var(--ink) 16px, transparent 16px, transparent 30px);
}.judge .fake-court {
    border: 4px dashed var(--bad);
    background: #f8ded9;
    padding: 26px 30px;
    min-height: 330px;
    box-shadow: 10px 10px 0 rgba(139, 30, 30, .12);
}.judge .gate h3, .judge .fake-court h3 {
    font-size: 34px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 18px;
}.judge .gate li, .judge .fake-court li {
    font-size: 22px;
    line-height: 1.18;
    margin-bottom: 10px;
}

/* ============================================================
   UX-DESIGNER CHANGE 2026-07-07 · mobile settings.
   The collapsible blocks were hard-sized to the 1280px deck
   canvas and every scene grid assumed that width. Below the
   canvas width the blocks fit the viewport; below ~700px all
   data grids stack to a single column and type steps down.
   ============================================================ */
@media(max-width:1300px){
  details{width:auto;max-width:100%}
}
@media(max-width:700px){
  h1{font-size:clamp(34px,10vw,72px);letter-spacing:-1px}
  h2{font-size:clamp(27px,8vw,50px)}
  .big{font-size:clamp(25px,7vw,48px)}
  .lead{font-size:20px}
  .body{font-size:18px}
  .panel .title{font-size:26px}
  .panel .txt{font-size:17px}
  /* data grids stack into one column */
  .grid2,.grid3,.timeline,.seg-grid,.seg-roles,
  .seg-law-list,.judge .gate-wrap{grid-template-columns:1fr}
  .seg-row{grid-template-columns:1fr;gap:6px}
  .seg-title{font-size:clamp(30px,8.5vw,60px)}
  .seg-sub{font-size:19px}
  .seg-punch{position:static;left:auto;right:auto;bottom:auto;
    margin-top:22px;font-size:20px}
  /* control panel: two levers across */
  .control{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:24px}
  .lever{height:220px;font-size:15px}
  .lever:before{height:105px}
  .lever:nth-child(even):after{top:72px}
  /* scenes flatten: side-by-side becomes stacked, icons step aside */
  .scale{grid-template-columns:1fr;gap:16px;align-items:stretch}
  .scale .side{height:auto;min-height:0;transform:none}
  .bridge{grid-template-columns:1fr;gap:14px}
  .bridge .arc{height:auto;min-height:0}
  .arrow{font-size:44px;transform:rotate(90deg)}
  .chain{flex-direction:column;align-items:stretch}
  .chev{transform:rotate(90deg);text-align:center}
  .gate{grid-template-columns:1fr}
  .gate-icon{display:none}
  .creative{grid-template-columns:1fr}
  .blast{height:200px;width:200px;margin:0 auto}
  .timeline .step:before{top:-20px;width:40px;height:40px}
  .judge .gate,.judge .fake-court{min-height:0}
  /* slide metadata back into flow */
  .slidenum,.brandfoot{position:static;margin-top:14px}
}

/* SLIDE 3: REDESIGNED DUO PANES */
  .duo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 10px;
    flex: 1;
  }

  .duo-card {
    background: var(--card-dark);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
  }

  .duo-card.law-card {
    border-top: 4px solid var(--gold);
    background: linear-gradient(180deg, rgba(244, 194, 71, 0.05) 0%, rgba(22, 21, 18, 0.95) 100%);
  }

  .duo-card.subversion-card {
    border-top: 4px solid var(--bad-bright);
    background: linear-gradient(180deg, rgba(230, 57, 70, 0.06) 0%, rgba(22, 21, 18, 0.95) 100%);
  }

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .card-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: .15em;
    text-transform: uppercase;
    font-weight: 800;
  }

  .law-card .card-tag { color: var(--gold); }
  .subversion-card .card-tag { color: var(--bad-bright); }

  .card-icon {
    font-size: 20px;
  }
  .law-card .card-icon { color: var(--gold); }
  .subversion-card .card-icon { color: var(--bad-bright); }

  .card-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
    color: #FFFFFF;
  }

  .card-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
  }

  .card-list li {
    font-size: 17px;
    line-height: 1.4;
    color: #D4CDC3;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .card-list li i {
    font-size: 14px;
    margin-top: 4px;
    flex-shrink: 0;
  }

  .law-card .card-list li i { color: var(--gold); }
  .subversion-card .card-list li i { color: var(--bad-bright); }

  .banner-summary {
    background: rgba(244, 194, 71, 0.06);
    border-left: 4px solid var(--gold);
    border-radius: 0 8px 8px 0;
    padding: 16px 24px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .banner-summary i {
    font-size: 24px;
    color: var(--gold);
    flex-shrink: 0;
  }

  .banner-summary p {
    font-size: 18px;
    color: #E8E2D9;
    line-height: 1.45;
  }

  .banner-summary strong {
    color: var(--gold);
    font-weight: 700;
  }

.bg-questions {
  position: absolute;
  right: 44px;
  top: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 5;
}
.bg-questions li {
  margin: 0;
  padding: 0;
}
.bg-questions a {
  font: 700 13px/1.3 "SF Mono", Menlo, monospace;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bg-questions a:hover {
  color: var(--gold, #dfaf4e);
}
.dark .bg-questions a {
  color: #a89984;
}
.bg-questions .tag {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(238,247,255,.2);
}
.dark .bg-questions .tag {
  color: rgba(238,247,255,.15);
}
.bg-questions a:hover .tag {
  color: rgba(238,247,255,.5);
}