:root {
  --win-gray: #d4d0c8;
  --white: #fff;
  --shadow: #777;
  --dark: #3f3f3f;
  --title-blue: #59418d;
  --title-pink: #c75f98;
  --pink: #d875a5;
  --cream: #fff9ec;
  --ink: #171217;
  --font-ui: "MS Sans Serif", Tahoma, Geneva, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-ui);
  background: #b885b1;
}
button, input, select { font: inherit; }
a { color: inherit; }

.desktop-wallpaper {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08) 25%, transparent 25%) 0 0 / 8px 8px,
    linear-gradient(315deg, rgba(47,30,57,.06) 25%, transparent 25%) 0 0 / 8px 8px,
    linear-gradient(145deg, #c895be, #9d79a9);
}

.win98-window,
.slide {
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid var(--dark);
  border-bottom: 2px solid var(--dark);
  background: var(--win-gray);
  box-shadow: 2px 2px 0 #000, 8px 10px 26px rgba(42,24,47,.24);
}

.recap-app {
  position: sticky;
  z-index: 20;
  top: 6px;
  width: min(1180px, calc(100% - 18px));
  margin: 6px auto 20px;
}

.title-bar,
.slide-titlebar {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 3px;
  padding: 3px 5px 3px 7px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--title-blue), var(--title-pink) 65%, #ef9abc);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.title-bar-text {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.program-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #3d2d46;
  background: #f0c75e;
  color: #743c71;
  box-shadow: inset 1px 1px #fff;
}

.title-bar-controls {
  display: flex;
  gap: 2px;
}

.title-bar-controls span {
  width: 23px;
  height: 22px;
  display: grid;
  place-items: center;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  background: var(--win-gray);
  color: #111;
  font-weight: 900;
}

.menu-bar {
  display: flex;
  gap: 2px;
  padding: 2px 7px;
  border-bottom: 1px solid #888;
}

.menu-bar a {
  padding: 5px 8px;
  text-decoration: none;
}

.menu-bar a:hover,
.menu-bar a:focus-visible {
  background: var(--title-blue);
  color: #fff;
  outline: 0;
}

.recap-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 8px;
}

.recap-controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.recap-controls label {
  display: grid;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
}

.recap-controls input,
.recap-controls select {
  min-height: 34px;
  padding: 5px 8px;
}

.win98-inset {
  border-top: 2px solid #777;
  border-left: 2px solid #777;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  background: #fff;
  box-shadow: inset 1px 1px #000;
}

.win98-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 11px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  background: var(--win-gray);
  color: #111;
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 1px 1px #000;
}

.win98-button:hover,
.win98-button:focus-visible { outline: 1px dotted #111; outline-offset: -5px; }
.win98-button:active { border-color: #555 #fff #fff #555; }
.default-button { box-shadow: 0 0 0 1px #000, 1px 1px #000; }

.window-status-bar,
.slide-status {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px;
  padding: 3px;
}

.window-status-bar span,
.slide-status span {
  min-height: 23px;
  display: flex;
  align-items: center;
  padding: 3px 6px;
  border-top: 1px solid #777;
  border-left: 1px solid #777;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-size: 11px;
}

.recap-document {
  width: min(1120px, calc(100% - 22px));
  margin: 0 auto 70px;
  display: grid;
  gap: 24px;
}

#recap-wins {
  display: grid;
  gap: 24px;
}

.slide {
  aspect-ratio: 16 / 9;
  min-height: 620px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.slide-titlebar {
  min-height: 29px;
  font-size: 12px;
}

.slide-canvas {
  position: relative;
  min-height: 0;
  margin: 5px;
  padding: clamp(40px, 7vw, 85px);
  overflow: hidden;
  border-top: 2px solid #666;
  border-left: 2px solid #666;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  background: var(--cream);
}

.kicker {
  margin: 0 0 18px;
  color: #8e3268;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

h1, h2, h3 {
  margin-top: 0;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.02;
}

h1 {
  max-width: 850px;
  margin-bottom: 23px;
  font-size: clamp(3.4rem, 9vw, 7.4rem);
  letter-spacing: -.055em;
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(2.7rem, 6.5vw, 5.3rem);
  letter-spacing: -.045em;
}

.cover-slide .slide-canvas {
  background:
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px) 0 0 / 20px 20px,
    #f5ddec;
}

#recap-range {
  font-size: 19px;
  color: #544451;
}

.pixel-star-cluster i {
  position: absolute;
  color: #ca5789;
  font-style: normal;
  text-shadow: 2px 2px #fff;
}
.pixel-star-cluster i:nth-child(1) { right: 12%; top: 17%; font-size: 70px; }
.pixel-star-cluster i:nth-child(2) { right: 6%; top: 44%; font-size: 43px; color: #e5b853; }
.pixel-star-cluster i:nth-child(3) { right: 23%; bottom: 12%; font-size: 56px; color: #82ad6b; }
.pixel-star-cluster i:nth-child(4) { right: 34%; top: 12%; font-size: 29px; color: #7cafd0; }
.pixel-star-cluster i:nth-child(5) { right: 3%; bottom: 8%; font-size: 27px; color: #9e82c6; }

.stats-slide .slide-canvas {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #3e2851;
  color: #fff;
}
.stats-slide .kicker { color: #f1a8ca; }
.stats-slide h2 { max-width: 730px; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.stat-grid article {
  padding: 18px;
  border-top: 2px solid rgba(255,255,255,.68);
  border-left: 2px solid rgba(255,255,255,.68);
  border-right: 2px solid #120d19;
  border-bottom: 2px solid #120d19;
  background: #6e477f;
}

.stat-grid strong,
.stat-grid span { display: block; }
.stat-grid strong { font-family: Georgia, serif; font-size: clamp(3rem, 7vw, 5.6rem); line-height: 1; }
.stat-grid span { margin-top: 7px; color: #f3e9f5; }

.day-slide .slide-canvas { background: #fffdf7; }
.day-slide:nth-child(3n+1) .slide-canvas { background: #f6e8f2; }
.day-slide:nth-child(3n+2) .slide-canvas { background: #edf5e9; }
.day-slide:nth-child(3n+3) .slide-canvas { background: #fff2e9; }
.day-slide h2 { margin-bottom: 28px; font-size: clamp(2.5rem, 5.5vw, 4.5rem); }

.recap-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

.recap-card {
  min-width: 0;
  padding: 0;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  background: var(--win-gray);
  box-shadow: 1px 1px #000;
}

.recap-card h3 {
  margin: 3px 3px 0;
  padding: 6px 7px;
  overflow: hidden;
  background: linear-gradient(90deg, #634594, #d06a9a);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.recap-card ul {
  margin: 5px;
  padding: 10px 10px 10px 28px;
  display: grid;
  gap: 7px;
  border-top: 2px solid #777;
  border-left: 2px solid #777;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  background: #fff;
}

.recap-card li::marker { color: #c24c83; }

.closing-slide .slide-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #c65e94;
  color: #fff;
  text-align: center;
}
.closing-slide .kicker { color: #ffe4f0; }
.closing-slide h2 { max-width: 860px; }
.closing-slide .slide-canvas > p:last-child { font-size: 18px; }

.recap-status {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 18px;
  min-width: 220px;
  padding: 12px 16px;
  transform: translateX(-50%);
  display: none;
  text-align: center;
  font-weight: 700;
}
.recap-status.visible { display: block; }

@media (max-width: 900px) {
  .recap-app { position: relative; top: 0; }
  .recap-toolbar { align-items: flex-start; flex-direction: column; }
  .recap-controls { justify-content: flex-start; width: 100%; }
  .slide { aspect-ratio: auto; min-height: 620px; }
  .recap-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .recap-app,
  .recap-document { width: calc(100% - 6px); }
  .recap-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .recap-controls label { min-width: 0; }
  .recap-controls input,
  .recap-controls select,
  .recap-controls button { width: 100%; }
  .recap-controls .win98-button:first-of-type { grid-column: 1 / -1; }
  .slide { min-height: 680px; }
  .slide-canvas { padding: 42px 24px; }
  .stat-grid { grid-template-columns: 1fr; }
  .pixel-star-cluster { opacity: .35; }
}

@media print {
  @page { size: landscape; margin: 0; }
  body { background: #fff; }
  .desktop-wallpaper, .recap-app, .recap-status { display: none !important; }
  .recap-document { width: 100%; margin: 0; display: block; }
  #recap-wins { display: block; }
  .slide {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    border: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .slide:last-child { break-after: auto; page-break-after: auto; }
  .slide-titlebar, .slide-status { display: none; }
  .slide-canvas { height: 100%; margin: 0; border: 0; }
}