/* Shared by index.html (the deck), scroll.html and notes.html. Everything on a slide sits inside .stage (1920x1080). */
@font-face { font-family: VGA; src: url("fonts/Px437_IBM_VGA_9x16.ttf"); }
:root { --mono: Menlo, "SF Mono", ui-monospace, monospace; --grey: #8a8a8a; --dim: #555; }
.stage, .stage * { box-sizing: border-box; }
.stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; background: #000; overflow: hidden;
  color: #fff; font-family: var(--mono); }

/* chrome */
.stage .num { position: absolute; left: 80px; top: 40px; font-size: 26px; color: var(--grey); letter-spacing: 2px; }
.stage .year { position: absolute; right: 80px; top: 26px; font-size: 56px; font-weight: bold; letter-spacing: 2px; }
.stage .timeline { position: absolute; left: 80px; right: 80px; bottom: 34px; height: 44px; }
.stage .timeline .axis { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--dim); }
.stage .timeline .tick { position: absolute; top: 4px; width: 2px; height: 14px; background: var(--dim); }
.stage .timeline .lab { position: absolute; top: 22px; font-size: 18px; color: var(--dim); transform: translateX(-50%); }
.stage .timeline .cur { position: absolute; top: 0; height: 22px; background: #fff; min-width: 12px; }
.stage .exapt { position: absolute; left: 80px; bottom: 88px; font-size: 22px; color: var(--grey); }
.stage .exapt b { color: #fff; font-weight: normal; }
.stage.chromeoff .num, .stage.chromeoff .year, .stage.chromeoff .timeline, .stage.chromeoff .exapt { display: none; }
.stage.noexapt .exapt { display: none; }

.stage .head { position: absolute; left: 80px; top: 96px; font-size: 64px; font-weight: bold; line-height: 1; letter-spacing: 1px;
  background: #fff; color: #000; padding: 8px 18px 10px; z-index: 2; }
.stage .content { position: absolute; left: 80px; right: 80px; top: 110px; bottom: 140px; }
.stage .head ~ .content { top: 200px; }

/* media */
.stage .row { display: flex; gap: 40px; height: 100%; align-items: stretch; }
.stage .cell-m { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.stage .frame { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.stage .frame img, .stage .frame video { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
.stage .frame pre.txt { margin: 0; font-family: var(--mono); font-size: 15px; line-height: 1.15; color: #fff; white-space: pre; }
.stage .cap { margin-top: 14px; font-size: 26px; }
.stage .credit { margin-top: 4px; font-size: 18px; color: var(--grey); }
.stage .ph { width: 100%; height: 100%; border: 3px dashed #777; display: flex; flex-direction: column; justify-content: center; padding: 28px;
  background: repeating-linear-gradient(45deg, #141414 0 14px, #000 14px 28px); font-size: 24px; color: #bbb; }
.stage .ph b { color: #fff; font-size: 28px; margin-bottom: 10px; }
.stage .ph code { color: var(--grey); font-size: 18px; margin-top: 10px; word-break: break-all; }
.stage.nolabels .ph b, .stage.nolabels .ph span, .stage.nolabels .ph code { display: none; }
.stage .grid { display: grid; gap: 22px; height: 100%; }
.stage .grid .cap { font-size: 22px; margin-top: 8px; }

/* full-bleed and title */
.stage .full { position: absolute; inset: 0; }
.stage .full img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stage .title-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.stage .title-img img { max-height: 1080px; max-width: 1920px; }
.stage .title-t { position: absolute; left: 60px; top: 50px; font-size: 26px; letter-spacing: 3px; }
.stage .contacts { position: absolute; right: 60px; bottom: 46px; text-align: right; font-size: 22px; line-height: 1.5; color: #ddd; }

/* rapid */
.stage .rapid { position: absolute; left: 80px; right: 80px; top: 100px; bottom: 120px; display: flex; align-items: center; justify-content: center; }
.stage .rapid img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.stage .counter { position: absolute; right: 80px; top: 120px; font-size: 26px; color: var(--grey); }

/* built screens */
.stage pre.dos { margin: 0; font-family: VGA, monospace; white-space: pre; display: inline-block; -webkit-font-smoothing: none; }
.stage .big-n { font-size: 56px; font-weight: bold; line-height: 1.15; }
.stage .big-n small { display: block; font-size: 26px; font-weight: normal; color: var(--grey); margin-top: 6px; }
.stage .ruler { font-family: var(--mono); font-size: 21.5px; white-space: pre; color: #fff; margin-bottom: 26px; }
.stage .ruler i { font-style: normal; background: #fff; color: #000; }
.stage .blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.stage .swatch { display: inline-flex; align-items: center; width: 330px; margin: 0 16px 14px 0; font-size: 22px; }
.stage .swatch i { width: 54px; height: 40px; margin-right: 14px; border: 2px solid #333; display: inline-block; }
.stage .codes { display: grid; grid-template-columns: 300px repeat(3, 1fr); column-gap: 30px; row-gap: 36px; align-items: center; }
.stage .codes .lab { font-size: 26px; line-height: 1.3; }
.stage .codes .lab small { display: block; color: var(--grey); font-size: 20px; }
.stage .codes .ch { display: flex; align-items: center; gap: 22px; }
.stage .codes .ch > b { font-size: 64px; width: 50px; }
.stage .tape { display: inline-flex; flex-direction: column; gap: 6px; background: #fff; padding: 10px 12px; }
.stage .tape i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #000; display: block; }
.stage .tape i.on { background: #000; }
.stage .morse { font-size: 64px; font-weight: bold; letter-spacing: 8px; }
.stage .bits { font-size: 22px; color: var(--grey); margin-top: 6px; }
.stage .kept { font-size: 26px; line-height: 1.7; }
.stage .kept b { display: inline-block; width: 90px; }
.stage .term { position: absolute; left: 160px; right: 160px; top: 90px; bottom: 130px; border: 3px solid #fff; padding: 30px 40px;
  font-family: var(--mono); font-size: 30px; line-height: 1.25; white-space: pre; overflow: hidden; }
.stage .term .bar { position: absolute; left: 0; right: 0; top: 0; background: #fff; color: #000; font-size: 20px; padding: 4px 16px; }
.stage .term .body { margin-top: 30px; }
.stage .fullvid { display: flex; align-items: center; justify-content: center; background: #000; }
.stage .fullvid video { height: 100%; width: auto; max-width: 100%; display: block; }
.stage .fullvid img { height: 100%; width: auto; max-width: 100%; object-fit: contain; image-rendering: pixelated; }

/* full-bleed layout (v3): images fill the page, captions sit in corners */
.stage .num, .stage .year, .stage .timeline, .stage .exapt { display: none; }
.stage .content { left: 0; right: 0; top: 0; bottom: 0; }
.stage .head ~ .content { top: 0; }
.stage .content.pad { left: 80px; right: 80px; top: 120px; bottom: 90px; }
.stage .head ~ .content.pad { top: 150px; }
.stage .head { left: 0; top: 0; font-size: 40px; padding: 12px 22px; }
.stage .row { gap: 0; }
.stage .grid { gap: 0; }
.stage .cell-m { position: relative; background: #000; overflow: hidden; }
.stage .content:not(.pad) .frame img, .stage .content:not(.pad) .frame video { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.stage .content:not(.pad) .frame { height: 100%; }
.stage .tag { position: absolute; left: 0; bottom: 0; background: #000; color: #fff; font-size: 20px; padding: 6px 12px; max-width: 95%; }
.stage .tag small { display: block; color: #9a9a9a; font-size: 15px; }
.stage .tag:empty { display: none; }
.stage .corner { position: absolute; right: 0; top: 0; background: #fff; color: #000; font-size: 20px; padding: 6px 14px; z-index: 6; text-align: right; }
.stage .corner small { display: block; font-size: 15px; color: #444; }
.stage.chromeoff .corner { display: none; }
.stage.noexapt .corner small { display: none; }
.stage .rapid { left: 0; right: 0; top: 0; bottom: 0; }
.stage .counter { display: none; }
.stage .content:not(.pad) .cell-m.contain .frame img { object-fit: contain; }
.stage .content:not(.pad) .cell-m.contain .frame video { object-fit: contain; }
.stage .rbar { position: absolute; right: 24px; bottom: 18px; width: 160px; height: 4px; background: #222; }
.stage .rbar i { display: block; height: 100%; width: 0; background: #888; }
.stage .egg { position: absolute; right: 14px; bottom: 6px; font-size: 13px; color: #3a3a3a; z-index: 7; white-space: nowrap; }
.stage .rbar ~ .egg { bottom: 26px; }

/* easter egg motion: slow, small, ignorable */
.stage .egg.blink { display: inline-grid; } .stage .egg.blink span { grid-area: 1 / 1; }
.stage .egg.blink .f2 { opacity: 0; animation: eggblink 7s steps(1) infinite; }
.stage .egg.blink .f1 { animation: eggblink1 7s steps(1) infinite; }
@keyframes eggblink { 0%, 93% { opacity: 0; } 94%, 97% { opacity: 1; } 98% { opacity: 0; } }
@keyframes eggblink1 { 0%, 93% { opacity: 1; } 94%, 97% { opacity: 0; } 98% { opacity: 1; } }
.stage .egg .blink-c { animation: blink 1.2s steps(1) infinite; }
.stage .egg.wander { animation: eggwander 22s ease-in-out infinite alternate; }
@keyframes eggwander { 0% { transform: translateX(0); } 50% { transform: translateX(-260px); } 100% { transform: translateX(-60px); } }
.stage .egg.glitch { animation: eggglitch 9s steps(1) infinite; }
@keyframes eggglitch { 0%, 90% { transform: none; color: #3a3a3a; } 91% { transform: translateX(4px); color: #5a5a5a; }
  92% { opacity: 0; } 93% { opacity: 1; transform: translateX(-3px) skewX(-12deg); } 94%, 100% { transform: none; } }
.stage .egg.bob span { display: inline-block; animation: eggbob 3.2s ease-in-out infinite; }
@keyframes eggbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }