/* Restore: the backup screen. Starfield on a canvas, the stack in CSS 3D, every window's chrome drawn in CSS. */
:root {
  --bar: 60px; --ticks: 70px; --stageW: 100vw; --W: 752px; --heroH: 423px; --stripH: 86px; --top: 177px;
  --ui: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --neue: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sf: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --metal: none; --linen: none; --grain: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; overscroll-behavior: none; }
body { color: #fff; font: 13px/1.35 var(--ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#space { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------------- the loader: a progress bar from the years this screen was new */
#loader { position: fixed; inset: 0; z-index: 100; background: #000; display: grid; place-items: center; transition: opacity .45s ease; }
#loader.gone { opacity: 0; pointer-events: none; }
.prog { width: 220px; height: 12px; border-radius: 6px; padding: 1px; background: linear-gradient(#9a9a9a, #d8d8d8); box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.15); overflow: hidden; }
.prog i { display: block; height: 100%; width: 4%; border-radius: 5px; transition: width .25s ease;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px), linear-gradient(#bfe0ff 0%, #5aa2f5 45%, #2a78e2 55%, #6cb6ff 100%);
  background-size: 17px 100%, 100% 100%; animation: barber .6s linear infinite; }
@keyframes barber { to { background-position: 17px 0, 0 0; } }

/* ---------------- the stack */
#stack { position: fixed; left: 0; top: 0; width: var(--stageW); height: calc(100% - var(--bar)); overflow: hidden; touch-action: none; transition: opacity .5s ease, filter .5s ease; }
body.restored #stack { opacity: .28; }
.win { position: absolute; left: calc((var(--stageW) - var(--W)) / 2); top: var(--top); width: var(--W); display: none;
  border-radius: var(--r); overflow: hidden; background: var(--pane-bg); color: var(--tb-ink);
  box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 0 1px var(--edge, rgba(0,0,0,.55)); cursor: pointer; backface-visibility: hidden; }
.win.on { display: block; }
.win.ghost { pointer-events: none; }
.tb { position: relative; height: var(--tb); display: flex; align-items: center; justify-content: center; background: var(--tb-bg); border-bottom: var(--tb-line, 1px solid rgba(0,0,0,.35)); padding: 0 70px; }
.tt { margin: 0; font: var(--tt-w, 400) var(--tt-size, 13px)/1 var(--tb-font, var(--ui)); color: var(--tb-ink); text-shadow: var(--tt-shadow, none);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; min-width: 0; }
.tt b { font-weight: inherit; overflow: hidden; text-overflow: ellipsis; }
.tt .proxy { flex: none; width: 15px; height: 12px; border-radius: 1px 2px 2px 2px; background: var(--folder, linear-gradient(#a6cdf6, #5e9fe6)); box-shadow: inset 0 -1px 0 rgba(0,0,0,.18); position: relative; top: 0; }
.tt .proxy::before { content: ""; position: absolute; left: 0; top: -2px; width: 6px; height: 3px; border-radius: 1px 1px 0 0; background: inherit; }
.lights { position: absolute; left: var(--lx, 8px); top: 50%; transform: translateY(-50%); display: flex; gap: var(--lgap, 7px); }
.lights i { display: block; width: var(--ls, 12px); height: var(--ls, 12px); border-radius: 50%; }
.lights i:nth-child(1) { background: var(--l1); box-shadow: var(--lsh1, none); }
.lights i:nth-child(2) { background: var(--l2); box-shadow: var(--lsh2, none); }
.lights i:nth-child(3) { background: var(--l3); box-shadow: var(--lsh3, none); }
.win.inactive .lights i { background: var(--loff); box-shadow: var(--lshoff, inset 0 0 0 .5px rgba(0,0,0,.25)); }
.win.inactive .tt { opacity: var(--tt-off, .55); }
.pane { position: relative; height: var(--heroH); background: var(--pane-bg); margin: var(--pane-m, 0); border: var(--pane-border, 0); }
.hero { position: absolute; inset: 0; }
.hero img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s ease; }
.hero img.in { opacity: 1; }
.files { height: var(--stripH); background: var(--strip-bg); border-top: var(--strip-line, 1px solid rgba(0,0,0,.15)); margin: var(--strip-m, 0);
  display: flex; justify-content: center; align-items: flex-start; gap: 10px; padding: 9px 12px 0; color: var(--strip-ink, #222); font-family: var(--tb-font, var(--ui)); }
.f { all: unset; box-sizing: border-box; width: 78px; display: grid; justify-items: center; gap: 5px; cursor: pointer; border-radius: 5px; padding: 2px 0 0; }
.f:focus-visible { outline: 2px solid #4b9bff; outline-offset: 1px; }
.ic { width: 66px; height: 44px; display: grid; place-items: center; position: relative; }
.ic img { max-width: 66px; max-height: 44px; width: auto; height: auto; object-fit: contain; display: block; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.45); background: #fff; }
.ic.film::before { content: ""; position: absolute; inset: 4px 2px; border-radius: 4px; background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 3px, transparent 3px 7px) top 3px left 4px / calc(100% - 8px) 3px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 3px, transparent 3px 7px) bottom 3px left 4px / calc(100% - 8px) 3px no-repeat,
    var(--film-bg, linear-gradient(#3a3a3e, #121214)); box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ic.film::after { content: ""; position: relative; left: 2px; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.ic.sound::before { content: ""; position: absolute; inset: 4px 12px; border-radius: 6px; background: var(--sound-bg, linear-gradient(#ff8f6b, #e2463a)); box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.ic.sound::after { content: ""; position: relative; width: 26px; height: 18px; background:
    linear-gradient(#fff, #fff) 0 50% / 3px 6px no-repeat, linear-gradient(#fff, #fff) 5px 50% / 3px 14px no-repeat, linear-gradient(#fff, #fff) 10px 50% / 3px 18px no-repeat,
    linear-gradient(#fff, #fff) 15px 50% / 3px 10px no-repeat, linear-gradient(#fff, #fff) 20px 50% / 3px 15px no-repeat; }
.ic.pic:not(.has)::before { content: ""; position: absolute; inset: 6px 10px; background: linear-gradient(160deg, #cfe3f6 0 50%, #7fa66a 50%); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.fl { font-size: 11px; line-height: 1.2; max-width: 78px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; text-shadow: var(--fl-shadow, none); }
.dim { position: absolute; inset: 0; background: #04030b; opacity: 0; pointer-events: none; }
.win.front:hover { outline: 3px solid rgba(130,175,255,.28); outline-offset: 3px; }

/* ---------------- the eras: each campaign's window wears the chrome of the years it was made in */
/* pinstripes */
.era-stripes { --r: 7px 7px 3px 3px; --tb: 22px; --tb-ink: #000; --tt-shadow: 0 1px 0 rgba(255,255,255,.8);
  --tb-bg: linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,0) 60%), repeating-linear-gradient(#e6e6e6 0 1px, #fdfdfd 1px 3px);
  --pane-bg: repeating-linear-gradient(#ebebeb 0 1px, #f9f9f9 1px 3px); --strip-bg: repeating-linear-gradient(#ebebeb 0 1px, #f9f9f9 1px 3px);
  --l1: radial-gradient(circle at 50% 28%, #ffe6e2 0 1.5px, rgba(255,255,255,0) 4px), radial-gradient(circle at 50% 70%, #ff9a86 0, #e0362a 55%, #9c160c 100%);
  --l2: radial-gradient(circle at 50% 28%, #fff6d8 0 1.5px, rgba(255,255,255,0) 4px), radial-gradient(circle at 50% 70%, #ffe27a 0, #f0a81a 55%, #a66a00 100%);
  --l3: radial-gradient(circle at 50% 28%, #e8ffd8 0 1.5px, rgba(255,255,255,0) 4px), radial-gradient(circle at 50% 70%, #a8f07e 0, #3cb423 55%, #1d6e0c 100%);
  --lsh1: 0 0 0 .5px rgba(90,10,0,.8), 0 1px 1px rgba(0,0,0,.3); --lsh2: 0 0 0 .5px rgba(110,70,0,.8), 0 1px 1px rgba(0,0,0,.3); --lsh3: 0 0 0 .5px rgba(10,70,0,.8), 0 1px 1px rgba(0,0,0,.3);
  --loff: radial-gradient(circle at 50% 28%, #fff 0 1.5px, rgba(255,255,255,0) 4px), radial-gradient(circle at 50% 70%, #f2f2f2, #b8b8b8 60%, #8a8a8a); --ls: 14px; --lgap: 6px;
  --folder: linear-gradient(#bcdcfb, #6ea8e8); --edge: rgba(0,0,0,.5); --film-bg: linear-gradient(#5d6c86, #1b2232); --sound-bg: radial-gradient(circle at 50% 30%, #c7e0ff, #3b7fe0); }
/* brushed metal */
.era-metal { --r: 9px; --tb: 24px; --tb-ink: #111; --tt-shadow: 0 1px 0 rgba(255,255,255,.6); --tb-line: 0;
  --tb-bg: transparent; --pane-bg: #1c1c1c; --pane-m: 0 7px; --pane-border: 1px solid rgba(0,0,0,.55); --strip-bg: transparent; --strip-line: 0; --strip-m: 0 7px;
  --l1: radial-gradient(circle at 50% 28%, #ffe6e2 0 1.5px, rgba(255,255,255,0) 4px), radial-gradient(circle at 50% 70%, #ff9a86 0, #e0362a 55%, #9c160c 100%);
  --l2: radial-gradient(circle at 50% 28%, #fff6d8 0 1.5px, rgba(255,255,255,0) 4px), radial-gradient(circle at 50% 70%, #ffe27a 0, #f0a81a 55%, #a66a00 100%);
  --l3: radial-gradient(circle at 50% 28%, #e8ffd8 0 1.5px, rgba(255,255,255,0) 4px), radial-gradient(circle at 50% 70%, #a8f07e 0, #3cb423 55%, #1d6e0c 100%);
  --lsh1: 0 0 0 .5px rgba(60,0,0,.8), 0 1px 0 rgba(255,255,255,.5); --lsh2: 0 0 0 .5px rgba(80,50,0,.8), 0 1px 0 rgba(255,255,255,.5); --lsh3: 0 0 0 .5px rgba(0,50,0,.8), 0 1px 0 rgba(255,255,255,.5);
  --loff: radial-gradient(circle at 50% 28%, #fff 0 1.5px, rgba(255,255,255,0) 4px), radial-gradient(circle at 50% 70%, #e6e6e6, #a9a9a9 60%, #7a7a7a); --ls: 14px; --lgap: 6px;
  --folder: linear-gradient(#bcdcfb, #6ea8e8); --edge: rgba(0,0,0,.6); --film-bg: linear-gradient(#4a4a4a, #111); --sound-bg: linear-gradient(#8a8a8a, #3f3f3f);
  background: var(--metal), linear-gradient(#d6d6d6, #a2a2a2); padding-bottom: 7px; }
.era-metal .files { height: calc(var(--stripH) - 7px); }
/* the unified gray, with black panes */
.era-unified { --r: 6px 6px 3px 3px; --tb: 22px; --tb-ink: #1a1a1a; --tt-shadow: 0 1px 0 rgba(255,255,255,.55);
  --tb-bg: linear-gradient(#e9e9e9, #c9c9c9 55%, #a9a9a9); --tb-line: 1px solid #555;
  --pane-bg: linear-gradient(#262626, #000 70%); --strip-bg: linear-gradient(#e4e4e4, #c9c9c9); --strip-line: 1px solid #8a8a8a;
  --l1: radial-gradient(circle at 50% 25%, rgba(255,255,255,.9) 0 1px, rgba(255,255,255,0) 3.5px), linear-gradient(#ff8a7c, #d4382c);
  --l2: radial-gradient(circle at 50% 25%, rgba(255,255,255,.9) 0 1px, rgba(255,255,255,0) 3.5px), linear-gradient(#ffd977, #e09a12);
  --l3: radial-gradient(circle at 50% 25%, rgba(255,255,255,.9) 0 1px, rgba(255,255,255,0) 3.5px), linear-gradient(#a0e07a, #3d9e1e);
  --lsh1: inset 0 0 0 .5px rgba(80,0,0,.7); --lsh2: inset 0 0 0 .5px rgba(90,60,0,.7); --lsh3: inset 0 0 0 .5px rgba(0,60,0,.7);
  --loff: linear-gradient(#e3e3e3, #a5a5a5); --ls: 13px; --lgap: 7px;
  --folder: linear-gradient(#9fc6ef, #5b93d6); --film-bg: linear-gradient(#444, #0b0b0b); --sound-bg: linear-gradient(#8fc0f5, #2f6fcf); }
/* linen */
.era-linen { --r: 5px; --tb: 22px; --tb-ink: #2a2a2a; --tt-shadow: 0 1px 0 rgba(255,255,255,.6);
  --tb-bg: linear-gradient(#ececec, #d3d3d3); --tb-line: 1px solid #8e8e8e;
  --pane-bg: var(--linen), #3b3d42; --strip-bg: var(--linen), #3b3d42; --strip-line: 1px solid rgba(0,0,0,.6); --strip-ink: #f1f1f1; --fl-shadow: 0 1px 1px rgba(0,0,0,.9);
  --l1: radial-gradient(circle at 50% 25%, rgba(255,255,255,.7) 0 1px, rgba(255,255,255,0) 3px), linear-gradient(#fc7a6f, #df4b40);
  --l2: radial-gradient(circle at 50% 25%, rgba(255,255,255,.7) 0 1px, rgba(255,255,255,0) 3px), linear-gradient(#fdd16a, #e5a524);
  --l3: radial-gradient(circle at 50% 25%, rgba(255,255,255,.7) 0 1px, rgba(255,255,255,0) 3px), linear-gradient(#8ed96c, #47a82c);
  --lsh1: inset 0 0 0 .5px rgba(100,0,0,.55); --lsh2: inset 0 0 0 .5px rgba(100,70,0,.55); --lsh3: inset 0 0 0 .5px rgba(0,70,0,.55);
  --loff: linear-gradient(#e9e9e9, #c4c4c4); --ls: 12px; --lgap: 8px;
  --folder: linear-gradient(#a8cdf2, #6a9fd8); --film-bg: linear-gradient(#55575c, #1a1b1e); --sound-bg: linear-gradient(#b9bcc4, #6b6f78); }
/* the gray that came after the linen */
.era-gray { --r: 5px; --tb: 22px; --tb-ink: #2a2a2a; --tt-shadow: 0 1px 0 rgba(255,255,255,.6);
  --tb-bg: linear-gradient(#ebebeb, #d5d5d5); --tb-line: 1px solid #8e8e8e;
  --pane-bg: var(--grain), #2d2e31; --strip-bg: var(--grain), #36373b; --strip-line: 1px solid rgba(0,0,0,.6); --strip-ink: #eee;
  --l1: linear-gradient(#fc7a6f, #df4b40); --l2: linear-gradient(#fdd16a, #e5a524); --l3: linear-gradient(#8ed96c, #47a82c);
  --lsh1: inset 0 0 0 .5px rgba(100,0,0,.5); --lsh2: inset 0 0 0 .5px rgba(100,70,0,.5); --lsh3: inset 0 0 0 .5px rgba(0,70,0,.5);
  --loff: linear-gradient(#e9e9e9, #c4c4c4); --ls: 12px; --lgap: 8px;
  --folder: linear-gradient(#a8cdf2, #6a9fd8); --film-bg: linear-gradient(#55575c, #1a1b1e); --sound-bg: linear-gradient(#b9bcc4, #6b6f78); }
/* flat */
.era-flat { --r: 5px; --tb: 22px; --tb-ink: #4d4d4d; --tb-font: var(--neue); --tt-size: 13px;
  --tb-bg: linear-gradient(#e8e6e8, #d3d1d3); --tb-line: 1px solid #b1afb1;
  --pane-bg: #fff; --strip-bg: #f6f6f6; --strip-line: 1px solid #dcdcdc; --strip-ink: #262626;
  --l1: #fc605b; --l2: #fdbc40; --l3: #34c84a; --lsh1: inset 0 0 0 .5px #de4a46; --lsh2: inset 0 0 0 .5px #de9f34; --lsh3: inset 0 0 0 .5px #27aa35;
  --loff: #d0d0d0; --lshoff: inset 0 0 0 .5px #b5b5b5; --ls: 12px; --lgap: 8px; --edge: rgba(0,0,0,.3);
  --folder: #5aa6f2; --film-bg: #2b2b2d; --sound-bg: #f0503c; }
/* flat, after dark */
.era-dark { --r: 5px; --tb: 22px; --tb-ink: #dcdcdc; --tb-font: var(--sf);
  --tb-bg: linear-gradient(#3d3c3d, #333233); --tb-line: 1px solid #111;
  --pane-bg: #1e1e1e; --strip-bg: #262626; --strip-line: 1px solid #111; --strip-ink: #dedede;
  --l1: #fc605b; --l2: #fdbc40; --l3: #34c84a; --lsh1: inset 0 0 0 .5px #de4a46; --lsh2: inset 0 0 0 .5px #de9f34; --lsh3: inset 0 0 0 .5px #27aa35;
  --loff: #5a595a; --lshoff: none; --ls: 12px; --lgap: 8px; --edge: rgba(0,0,0,.7); --tt-off: .5;
  --folder: #4b97e6; --film-bg: #3a3a3c; --sound-bg: #ef4f3c;
  box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 0 1px #000, inset 0 0 0 1px rgba(255,255,255,.08); }
/* rounded, unified */
.era-rounded { --r: 11px; --tb: 38px; --tb-ink: #222; --tb-font: var(--sf); --tt-w: 600; --tt-size: 14px;
  --tb-bg: linear-gradient(#f7f6f7, #ecebec); --tb-line: 1px solid #d6d5d6;
  --pane-bg: #fff; --strip-bg: #fafafa; --strip-line: 1px solid #e3e3e3; --strip-ink: #1d1d1f;
  --l1: #ff5f57; --l2: #febc2e; --l3: #28c840; --lsh1: inset 0 0 0 .5px #e0443e; --lsh2: inset 0 0 0 .5px #dea123; --lsh3: inset 0 0 0 .5px #1aab29;
  --loff: #dcdcdc; --lshoff: inset 0 0 0 .5px #c9c9c9; --ls: 12px; --lgap: 8px; --lx: 14px; --edge: rgba(0,0,0,.28);
  --film-bg: #1d1d1f; --sound-bg: linear-gradient(#ff6a5b, #f2333c); }
.era-rounded .tb { justify-content: flex-start; padding-left: 82px; }
/* glass */
.era-glass { --r: 20px; --tb: 42px; --tb-ink: #f5f5f7; --tb-font: var(--sf); --tt-w: 600; --tt-size: 14px; --tb-line: 0;
  --tb-bg: linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,.05));
  --pane-bg: rgba(10,10,14,.55); --strip-bg: transparent; --strip-line: 0; --strip-ink: #f2f2f7; --fl-shadow: 0 1px 2px rgba(0,0,0,.6);
  --l1: #ff5f57; --l2: #febc2e; --l3: #28c840; --lsh1: inset 0 0 0 .5px rgba(0,0,0,.25); --lsh2: inset 0 0 0 .5px rgba(0,0,0,.25); --lsh3: inset 0 0 0 .5px rgba(0,0,0,.25);
  --loff: rgba(255,255,255,.28); --lshoff: none; --ls: 13px; --lgap: 9px; --lx: 16px; --edge: rgba(255,255,255,.3);
  --film-bg: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.08)); --sound-bg: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.08));
  background: linear-gradient(rgba(40,40,52,.62), rgba(14,14,20,.78));
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 30px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.16); }
.era-glass .tt { padding: 6px 14px; border-radius: 99px; background: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.14), 0 2px 10px rgba(0,0,0,.25); }
.era-glass .pane { margin: 0 8px; border-radius: 13px; overflow: hidden; background: #000; }
.era-glass .files { height: calc(var(--stripH) - 8px); }
.era-glass .ic.film::before, .era-glass .ic.sound::before { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.18); }

/* ---------------- the restored window: the case study */
#case { position: fixed; z-index: 40; display: flex; flex-direction: column; cursor: default; box-shadow: 0 30px 90px rgba(0,0,0,.8), 0 0 0 1px var(--edge, rgba(0,0,0,.55));
  transition: left .52s cubic-bezier(.2,.75,.2,1), top .52s cubic-bezier(.2,.75,.2,1), width .52s cubic-bezier(.2,.75,.2,1), height .52s cubic-bezier(.2,.75,.2,1), opacity .3s ease; }
#case.era-glass { box-shadow: 0 30px 90px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.16); background: linear-gradient(rgba(34,34,44,.94), rgba(10,10,14,.97)); }
#case .tb { flex: none; }
#case .lights i { cursor: pointer; }
#case .lights i:nth-child(1):hover { filter: brightness(.85); }
#case .scroll { flex: 1; min-height: 0; overflow: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain;
  background: var(--doc-bg); color: var(--doc-ink); margin: var(--pane-m, 0); border: var(--pane-border, 0); }
#case.era-glass .scroll { margin: 0 8px 8px; border-radius: 13px; }
#case.era-metal { padding-bottom: 7px; }
#case .head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 26px; align-items: center; margin-bottom: 28px; }
#case .lead { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--pane-bg); border-radius: 4px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.28); }
#case.era-glass .lead, #case.era-rounded .lead { border-radius: 10px; }
#case .intro .ab-lede { margin: 0; }
#case .lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
#case .lead.tall { aspect-ratio: 4 / 3; background: none; box-shadow: none; overflow: visible; }
#case .lead.tall img { left: 50%; right: auto; width: auto; max-width: 100%; transform: translateX(-50%); border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
#case .doc { max-width: 1060px; margin: 0 auto; padding: 26px 30px 48px; font-family: var(--doc-font, var(--tb-font, var(--ui))); font-size: 15px; line-height: 1.55;
  --ab-fg: var(--doc-ink); --ab-muted: var(--doc-muted); --ab-accent: #4b9bff; --ab-chrome: 150px; }
#case .client { margin: 0 0 14px; font-size: 12px; letter-spacing: .08em; color: var(--doc-muted); }
#case .ab-lede { font-size: 1.12em; }
#case .ab-heading { font-size: 1.05em; margin-top: 10px; }
#case .ab-film figcaption, #case .ab-audio figcaption { font-size: 13px; }
#case .ab-credits { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--doc-rule); }
#case.era-stripes { --doc-bg: repeating-linear-gradient(#efefef 0 1px, #fcfcfc 1px 3px); --doc-ink: #111; --doc-muted: #555; --doc-rule: #ccc; }
#case.era-metal { --doc-bg: #f4f4f4; --doc-ink: #111; --doc-muted: #555; --doc-rule: #ccc; }
#case.era-unified { --doc-bg: linear-gradient(#1f1f1f, #050505 420px, #050505); --doc-ink: #ececec; --doc-muted: #a7a7a7; --doc-rule: #333; }
#case.era-linen { --doc-bg: var(--linen), #3b3d42; --doc-ink: #f3f3f3; --doc-muted: #c3c5ca; --doc-rule: rgba(255,255,255,.18); }
#case.era-linen .doc { text-shadow: 0 1px 1px rgba(0,0,0,.6); }
#case.era-gray { --doc-bg: var(--grain), #2d2e31; --doc-ink: #eee; --doc-muted: #b4b4b8; --doc-rule: #4a4a4e; }
#case.era-flat { --doc-bg: #fff; --doc-ink: #222; --doc-muted: #777; --doc-rule: #e2e2e2; }
#case.era-dark { --doc-bg: #1e1e1e; --doc-ink: #e4e4e4; --doc-muted: #9a9a9a; --doc-rule: #333; }
#case.era-rounded { --doc-bg: #fff; --doc-ink: #1d1d1f; --doc-muted: #6e6e73; --doc-rule: #e5e5e5; }
#case.era-glass { --doc-bg: rgba(0,0,0,.35); --doc-ink: #f5f5f7; --doc-muted: #a1a1a6; --doc-rule: rgba(255,255,255,.14); }
#case audio { color-scheme: light; }
#case.era-dark audio, #case.era-glass audio, #case.era-unified audio, #case.era-linen audio, #case.era-gray audio { color-scheme: dark; }

/* the scroll bars of each era, in the restored window */
#case .scroll::-webkit-scrollbar { width: 11px; }
#case .scroll::-webkit-scrollbar-track { background: transparent; }
#case .scroll::-webkit-scrollbar-thumb { border-radius: 6px; border: 3px solid transparent; background: rgba(128,128,128,.55) padding-box; }
#case.era-dark .scroll::-webkit-scrollbar-thumb, #case.era-glass .scroll::-webkit-scrollbar-thumb, #case.era-linen .scroll::-webkit-scrollbar-thumb, #case.era-gray .scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.4) padding-box; }
#case.era-stripes .scroll::-webkit-scrollbar, #case.era-metal .scroll::-webkit-scrollbar, #case.era-unified .scroll::-webkit-scrollbar { width: 15px; }
#case.era-stripes .scroll::-webkit-scrollbar-track, #case.era-metal .scroll::-webkit-scrollbar-track { background: linear-gradient(90deg, #c9c9c9, #f2f2f2 30%, #fdfdfd 60%, #e2e2e2); box-shadow: inset 1px 0 0 #a9a9a9; }
#case.era-stripes .scroll::-webkit-scrollbar-thumb, #case.era-metal .scroll::-webkit-scrollbar-thumb { border: 1px solid #2c5fb3; border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.0) 20%, rgba(255,255,255,.75) 32%, rgba(255,255,255,.1) 55%), linear-gradient(90deg, #3c7ee2, #8ec2ff 45%, #5a9df2 70%, #2a68cf); }
#case.era-unified .scroll::-webkit-scrollbar-track { background: linear-gradient(90deg, #1b1b1b, #2c2c2c); }
#case.era-unified .scroll::-webkit-scrollbar-thumb { border: 1px solid #000; border-radius: 8px; background: linear-gradient(90deg, #5d5d5d, #8a8a8a 45%, #5a5a5a); }

/* ---------------- the arrows */
#arrows { position: fixed; z-index: 20; display: flex; flex-direction: column; gap: 14px; transition: opacity .35s ease; }
.arrow { all: unset; box-sizing: border-box; width: 74px; height: 52px; cursor: pointer; display: grid; place-items: center; }
.arrow svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.arrow path { fill: rgba(40,42,52,.82); stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-linejoin: round; transition: fill .15s, stroke .15s; }
.arrow:hover path { fill: rgba(70,74,92,.9); stroke: rgba(255,255,255,.85); }
.arrow:active path { fill: rgba(110,140,220,.85); }
.arrow:focus-visible path { stroke: #7fb3ff; stroke-width: 3; }
.arrow[aria-disabled="true"] { opacity: .3; cursor: default; }
body.restored #arrows, body.restored #ticks, body.intro #arrows { opacity: 0; pointer-events: none; }
body.stacked #arrows { flex-direction: row; gap: 18px; }

/* ---------------- the timeline: one tick per campaign, best at the bottom */
#ticks { position: fixed; z-index: 21; right: 0; top: 0; bottom: var(--bar); width: var(--ticks); touch-action: none; transition: opacity .35s ease; }
#ticks .rail { position: absolute; inset: 0; }
.tick { all: unset; position: absolute; right: 0; width: 100%; height: var(--gap, 26px); transform: translateY(-50%); cursor: pointer; }
.tick i { position: absolute; right: 12px; top: 50%; height: 2px; width: 14px; margin-top: -1px; border-radius: 1px; background: rgba(255,255,255,.5); transform-origin: right center; box-shadow: 0 0 4px rgba(120,160,255,.35); }
.tick.now i { background: #fff; box-shadow: 0 0 6px rgba(160,190,255,.9); }
.tick:focus-visible i { background: #9fc4ff; }
.tlabel { position: absolute; right: 64px; top: 0; transform: translateY(-50%); white-space: nowrap; font-size: 13px; color: #fff; text-shadow: 0 1px 3px #000, 0 0 10px rgba(0,0,0,.8); pointer-events: none; opacity: 0; transition: opacity .15s; }
.tlabel.on { opacity: 1; }

/* ---------------- the bottom bar */
#bar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: var(--bar); padding: 0 22px env(safe-area-inset-bottom); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  background: linear-gradient(rgba(58,60,72,.78), rgba(14,14,20,.94) 60%); border-top: 1px solid rgba(255,255,255,.16); box-shadow: 0 -10px 30px rgba(0,0,0,.45); }
#bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,0)); pointer-events: none; }
.pill { all: unset; box-sizing: border-box; min-width: 112px; height: 28px; padding: 0 22px; border-radius: 14px; text-align: center; font: 13px/26px var(--ui); color: #fff; cursor: pointer; text-shadow: 0 -1px 0 rgba(0,0,0,.6);
  background: linear-gradient(#7b7d88, #4a4c56 50%, #383a43 51%, #50525d); border: 1px solid rgba(0,0,0,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 rgba(255,255,255,.12); }
.pill:hover { background: linear-gradient(#8a8c98, #555763 50%, #42444e 51%, #5b5d69); }
.pill:active { background: linear-gradient(#3e66b8, #2a4f9c 50%, #1f428a 51%, #3a64b3); }
.pill:focus-visible { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 3px rgba(110,160,255,.7); }
.pill[aria-disabled="true"] { opacity: .4; cursor: default; }
#cancel { justify-self: start; }
#restore { justify-self: end; }
#when { font-size: 14px; color: #f0f0f0; text-shadow: 0 1px 2px #000; letter-spacing: .02em; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }

/* ---------------- phones */
@media (max-width: 699px) {
  #case .scroll::-webkit-scrollbar { width: 0; }
  #bar { padding: 0 10px env(safe-area-inset-bottom); gap: 8px; }
  .pill { min-width: 92px; padding: 0 14px; }
  #when { font-size: 12px; line-height: 1.2; max-width: calc(100vw - 228px); white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .arrow { width: 60px; height: 42px; }
  .tick i { right: 8px; width: 12px; }
  .tlabel { right: 46px; }
  .f { width: 62px; }
  .ic { width: 54px; height: 36px; }
  .ic img { max-width: 54px; max-height: 36px; }
  .fl { font-size: 10px; max-width: 62px; }
  .tb { padding: 0 60px; }
  .era-rounded .tb { padding-left: 74px; }
  #case .doc { padding: 16px 14px 40px; font-size: 15px; }
  #case .head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 20px; }
}
@media (max-width: 899px) and (min-width: 700px) { #case .head { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (prefers-reduced-motion: reduce) {
  #case { transition: opacity .2s ease; }
  .prog i { animation: none; }
}