html, body { height: 100%; overflow: hidden; }
body { background: #000; }
.deck { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform-origin: center; }
.slide { position: absolute; inset: 0; background: var(--bg); overflow: hidden; padding: 84px 104px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateX(40px); transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1), visibility 0s .45s; }
.slide.past { transform: translateX(-40px); }
.slide.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.slide .notes { display: none; }

/* chrome */
.progress { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; z-index: 10; }
.progress i { display: block; height: 100%; width: 0; background: var(--hot); transition: width .4s; }
.count { position: fixed; right: 18px; bottom: 12px; z-index: 10; font: 600 12px var(--mono); color: #555; }
.nav-prev, .nav-next { position: fixed; bottom: 6px; z-index: 10; width: 44px; height: 32px; border: 0; background: none; color: #444; font-size: 18px; cursor: pointer; }
.nav-prev { left: 8px; } .nav-next { left: 52px; }
.nav-prev:hover, .nav-next:hover { color: var(--ink); }
.notes-box { display: none; position: fixed; left: 0; right: 0; bottom: 3px; z-index: 9; background: rgba(20,20,19,.96); color: #ddd; padding: 14px 120px 14px 110px; font-size: 15px; line-height: 1.6; white-space: pre-line; max-height: 34vh; overflow: auto; border-top: 1px solid var(--line); }
.show-notes .notes-box:not(:empty) { display: block; }

/* type */
.kicker { font: 700 22px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mid); }
.kicker b { color: var(--hot); font-weight: 700; }
.h0 { font-size: 168px; line-height: .9; letter-spacing: -.06em; font-weight: 900; margin: 0; }
.h1 { font-size: 112px; line-height: .95; letter-spacing: -.055em; font-weight: 900; margin: 0; }
.h2 { font-size: 72px; line-height: 1.02; letter-spacing: -.045em; font-weight: 900; margin: 0; }
.h3 { font-size: 44px; line-height: 1.15; letter-spacing: -.03em; font-weight: 800; margin: 0; }
.lead { font-size: 34px; line-height: 1.5; color: #c9c9c4; margin: 0; font-weight: 500; }
.small { font-size: 24px; line-height: 1.5; color: var(--mid); }
.dim { color: var(--mid); }
.hot { color: var(--hot); }
.gold { color: var(--gold); }
.stroke { color: transparent; -webkit-text-stroke: 2px #5a5a56; }
.grow { flex: 1; }
.row { display: flex; gap: 48px; }
.col { display: flex; flex-direction: column; gap: 24px; }
.bottom { margin-top: auto; }
.center { align-items: center; justify-content: center; text-align: center; }

/* bits */
.pill { display: inline-block; font: 700 20px/1 var(--mono); padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--line); color: var(--mid); }
.pill.hot { border-color: var(--hot); color: var(--hot); }
.box { border: 1.5px solid var(--line); border-radius: 28px; padding: 36px 40px; background: var(--bg2); }
.box.hotb { border-color: var(--hot); }
.prompt { font: 500 27px/1.6 var(--sans); background: #111110; border: 1.5px solid var(--line); border-left: 6px solid var(--hot); border-radius: 18px; padding: 28px 36px; color: #e6e6e0; white-space: pre-line; }
.prompt.bad { border-left-color: #555; color: #9a9a95; }
.shot { border-radius: 22px; overflow: hidden; border: 1.5px solid var(--line); background: #111; }
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap { font: 600 20px/1.3 var(--mono); color: var(--mid); margin-top: 12px; letter-spacing: .04em; }
.num { font: 900 140px/1 var(--sans); letter-spacing: -.06em; }
.qr { background: #fff; border-radius: 22px; padding: 16px; width: 280px; }
.qr svg { display: block; width: 100%; height: auto; }
.list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 22px; }
.list li { font-size: 36px; line-height: 1.35; font-weight: 700; display: flex; gap: 22px; }
.list li .k { font: 800 28px/1.5 var(--mono); color: var(--hot); flex: none; width: 56px; }
.list li span.s { display: block; font-size: 25px; font-weight: 500; color: var(--mid); margin-top: 4px; }

/* timeline */
.tl { display: grid; grid-template-columns: 1fr 1fr 2.6fr 1fr 1fr; gap: 10px; margin-top: 48px; }
.tl > div { border-radius: 16px; padding: 22px 20px; background: var(--bg2); border: 1.5px solid var(--line); min-height: 220px; display: flex; flex-direction: column; gap: 8px; }
.tl b { font-size: 30px; line-height: 1.15; }
.tl .t { font: 700 20px var(--mono); color: var(--mid); }
.tl .s { font-size: 20px; color: var(--mid); line-height: 1.4; }
.tl .big { background: var(--hot); border-color: var(--hot); color: #000; }
.tl .big .t, .tl .big .s { color: rgba(0,0,0,.65); }

/* chapter */
.chapter { justify-content: center; }
.chapter .idx { font: 900 360px/.8 var(--sans); letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 2px #3a3a37; position: absolute; right: 80px; bottom: 40px; }