/* llmcrypt 95 --------------------------------------------------------- */

:root {
  --face:   #c0c0c0;
  --light:  #ffffff;
  --shadow: #808080;
  --dark:   #0a0a0a;
  --mid:    #dfdfdf;
  --navy:   #000080;
  --navy2:  #1084d0;
  --teal:   #008080;
  --bsod:   #0000aa;

  --raise: inset -1px -1px var(--dark), inset 1px 1px var(--light),
           inset -2px -2px var(--shadow), inset 2px 2px var(--mid);
  --sink:  inset -1px -1px var(--light), inset 1px 1px var(--shadow),
           inset -2px -2px var(--mid), inset 2px 2px var(--dark);
  --font: "MS Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
  --mono: "Courier New", Courier, monospace;
  --taskbar-h: 30px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 12px/1.45 var(--font);
  color: var(--dark);
  background: var(--teal);
  overflow: hidden;
}

/* --- desktop -------------------------------------------------------- */

.desktop {
  position: relative;
  height: calc(100vh - var(--taskbar-h));
  overflow: auto;
}

.shortcuts {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; flex-direction: column; gap: 14px;
  z-index: 1;
  max-height: calc(100% - 20px);
  flex-wrap: wrap;
}

.shortcut {
  width: 76px;
  display: grid; justify-items: center; gap: 4px;
  padding: 3px;
  background: none; border: 1px dotted transparent;
  color: var(--light); font: inherit; text-align: center;
  cursor: pointer;
}
.shortcut span:last-child {
  background: var(--teal); padding: 0 2px;
  overflow-wrap: anywhere; line-height: 1.25;
}
.shortcut:hover span:last-child,
.shortcut:focus-visible span:last-child { background: var(--navy); }
.shortcut:focus-visible { border-color: var(--light); outline: none; }

/* --- windows -------------------------------------------------------- */

.window {
  position: absolute;
  top: var(--y); left: var(--x); width: var(--w);
  max-width: calc(100vw - 24px);
  background: var(--face);
  box-shadow: var(--raise);
  padding: 3px;
  z-index: 5;
}
.window.front { z-index: 20; }
.hidden { display: none !important; }

.titlebar {
  display: flex; align-items: center; gap: 4px;
  padding: 2px 2px 2px 3px;
  background: linear-gradient(90deg, var(--navy), var(--navy2));
  color: var(--light);
  cursor: grab;
  user-select: none;
}
.titlebar h1 {
  flex: 1; margin: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.window.dragging .titlebar { cursor: grabbing; }

.tb-buttons { display: flex; gap: 2px; }
.tb {
  width: 18px; height: 16px;
  display: grid; place-items: center;
  background: var(--face); box-shadow: var(--raise); border: 0;
  font: 10px/1 var(--font); color: var(--dark);
  cursor: pointer;
}
.tb:active:not(:disabled) { box-shadow: var(--sink); }
.tb:disabled { color: var(--shadow); cursor: default; }
.tb:focus-visible { outline: 1px dotted var(--dark); outline-offset: -4px; }

.menubar {
  padding: 2px 6px;
  border-bottom: 1px solid var(--mid);
  letter-spacing: .3px;
}
.menubar u { text-decoration-thickness: 1px; }

.body { padding: 10px; }

.statusbar {
  margin: 3px 1px 1px;
  padding: 2px 6px;
  box-shadow: var(--sink);
  color: #303030;
  min-height: 20px;
}

/* --- controls ------------------------------------------------------- */

.lbl { display: block; margin: 0 0 4px; }

textarea, input[type="text"] {
  width: 100%;
  padding: 4px 5px;
  background: var(--light);
  box-shadow: var(--sink);
  border: 0;
  font: 12px/1.5 var(--mono);
  color: var(--dark);
  resize: vertical;
}
textarea:focus-visible { outline: 1px dotted var(--dark); outline-offset: -4px; }
textarea[readonly] { background: #f4f4f4; color: #202020; }

.btn {
  min-width: 82px;
  padding: 5px 12px;
  background: var(--face); box-shadow: var(--raise); border: 0;
  font: 12px var(--font); color: var(--dark);
  cursor: pointer;
}
.btn:active:not(:disabled) { box-shadow: var(--sink); padding: 6px 11px 4px 13px; }
.btn:focus-visible { outline: 1px dotted var(--dark); outline-offset: -5px; }
.btn.primary { font-weight: 700; }
.btn:disabled { color: var(--shadow); text-shadow: 1px 1px var(--light); cursor: default; }

.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }

.check { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.check input { accent-color: var(--navy); }

.group {
  margin: 12px 0 0;
  padding: 4px 10px 10px;
  border: 0; box-shadow: var(--sink);
}
.group legend { padding: 0 5px; background: var(--face); }

.chaos-label { margin: 2px 0 0; font-weight: 700; }
.hint { margin: 4px 0 0; color: #404040; }

/* win95 trackbar */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; margin: 8px 0 0;
  background: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; background: var(--face); box-shadow: var(--sink);
}
input[type="range"]::-moz-range-track {
  height: 4px; background: var(--face); box-shadow: var(--sink);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 20px; margin-top: -8px;
  background: var(--face); box-shadow: var(--raise); border: 0;
}
input[type="range"]::-moz-range-thumb {
  width: 12px; height: 20px; border-radius: 0;
  background: var(--face); box-shadow: var(--raise); border: 0;
}
input[type="range"]:focus-visible { outline: 1px dotted var(--dark); }

.ticks {
  display: flex; justify-content: space-between;
  padding: 0 5px; color: #404040;
}

.result { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--shadow); }

.facts { margin: 10px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; }
.facts dt { color: #404040; }
.facts dd { margin: 0; font-weight: 700; }

/* segmented progress meter */
.gauge { margin: 12px 0 0; }
.gauge .lbl { margin-bottom: 4px; }
.meter {
  display: inline-block; vertical-align: middle;
  width: 220px; height: 20px; padding: 2px;
  background: var(--face); box-shadow: var(--sink);
  overflow: hidden;
}
.meter-fill {
  height: 100%; width: 0;
  background: repeating-linear-gradient(90deg,
    var(--navy) 0 9px, var(--face) 9px 11px);
  transition: width .25s steps(8);
}
.meter-num { margin-left: 8px; font-weight: 700; }

/* benchmark rows */
.bench { margin: 12px 0 0; max-height: 300px; overflow: auto; box-shadow: var(--sink); padding: 8px; background: var(--light); }
.bench h2 { margin: 10px 0 4px; font-size: 12px; }
.bench h2:first-child { margin-top: 0; }
.bench-row { display: grid; grid-template-columns: 92px 38px 1fr; gap: 8px; align-items: center; margin: 3px 0; }
.bench-bar { height: 12px; padding: 1px; box-shadow: var(--sink); background: var(--face); }
.bench-bar i { display: block; height: 100%; background: var(--navy); }
.bench-q { color: #303030; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bench-pct { text-align: right; font-weight: 700; }

.notepad { background: var(--light); box-shadow: var(--sink); padding: 10px 12px; max-height: 320px; overflow: auto; }
.notepad p { margin: 0 0 10px; max-width: 62ch; }
.notepad p:last-child { margin-bottom: 0; }

/* --- taskbar -------------------------------------------------------- */

.taskbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--taskbar-h);
  display: flex; align-items: center; gap: 4px;
  padding: 3px 4px;
  background: var(--face);
  box-shadow: inset 0 1px var(--light), inset 0 2px var(--mid);
  z-index: 100;
}
.start {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 4px;
  background: var(--face); box-shadow: var(--raise); border: 0;
  font: 700 12px var(--font); cursor: pointer;
}
.start[aria-expanded="true"] { box-shadow: var(--sink); }
.tasks { flex: 1; display: flex; gap: 3px; overflow: hidden; }
.task {
  max-width: 150px; padding: 3px 8px;
  background: var(--face); box-shadow: var(--raise); border: 0;
  font: 12px var(--font); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.task.active { box-shadow: var(--sink); font-weight: 700; }
.tray { display: flex; gap: 4px; box-shadow: var(--sink); padding: 2px 4px; }
.tray-cell { padding: 0 4px; color: #202020; white-space: nowrap; }
.tray-cell + .tray-cell { border-left: 1px solid var(--shadow); }

/* --- start menu ----------------------------------------------------- */

.startmenu {
  position: fixed; bottom: var(--taskbar-h); left: 4px;
  display: flex;
  background: var(--face); box-shadow: var(--raise); padding: 3px;
  z-index: 101;
}
.startmenu-rail {
  width: 22px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: var(--navy); color: var(--light);
  font: 700 15px var(--font); letter-spacing: .5px;
  padding: 8px 3px; text-align: right;
}
.startmenu-rail span { font-weight: 400; color: #b0b0d8; }
.startmenu ul { list-style: none; margin: 0; padding: 2px; min-width: 190px; }
.startmenu li.sep { height: 0; margin: 3px 2px; border-top: 1px solid var(--shadow); border-bottom: 1px solid var(--light); }
.startmenu button {
  display: block; width: 100%;
  padding: 5px 10px;
  background: none; border: 0; font: 12px var(--font); color: var(--dark);
  text-align: left; cursor: pointer;
}
.startmenu button:hover, .startmenu button:focus-visible {
  background: var(--navy); color: var(--light); outline: none;
}

/* --- dialog --------------------------------------------------------- */

.modal-scrim {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .35);
  z-index: 200;
}
.dialog { position: static; width: min(420px, calc(100vw - 32px)); }
.dialog .titlebar { cursor: default; }
.dialog-body { display: flex; gap: 14px; padding: 16px 14px 6px; }
.dialog-body p { margin: 0 0 8px; }
.dialog-body p:last-child { margin: 0; }
.dialog-actions { display: flex; gap: 8px; justify-content: center; padding: 12px; }

/* --- bsod ----------------------------------------------------------- */

.bsod {
  position: fixed; inset: 0;
  background: var(--bsod); color: #fff;
  font: 15px/1.6 var(--mono);
  padding: 8vh 8vw;
  display: flex; flex-direction: column; justify-content: center; gap: 1.1em;
  z-index: 500;
}
.bsod p { margin: 0; max-width: 70ch; }
.bsod-badge {
  align-self: center;
  background: #fff; color: var(--bsod);
  padding: 0 10px; font-weight: 700;
}
.bsod-prompt { align-self: center; }
.bsod b { font-weight: 700; }

/* --- icons (css only) ----------------------------------------------- */

.ico { width: 16px; height: 16px; display: inline-block; flex: none; position: relative; }
.shortcut .ico { width: 32px; height: 32px; }

.ico-lock, .ico-key, .ico-chart, .ico-doc, .ico-warn, .ico-flag {
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.ico-lock  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7' fill='%23ffd74a' stroke='%23000'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2' fill='none' stroke='%23dedede' stroke-width='1.6'/%3E%3Crect x='7' y='9' width='2' height='3' fill='%23000'/%3E%3C/svg%3E"); }
.ico-key   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5' cy='6' r='3.2' fill='none' stroke='%23ffd74a' stroke-width='2'/%3E%3Cpath d='M7 8l6 6M11 12l2-2M9 10l2-2' stroke='%23ffd74a' stroke-width='2' fill='none'/%3E%3C/svg%3E"); }
.ico-chart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='2' width='28' height='28' fill='%23fff' stroke='%23000'/%3E%3Crect x='6' y='18' width='4' height='8' fill='%23000080'/%3E%3Crect x='13' y='12' width='4' height='14' fill='%23000080'/%3E%3Crect x='20' y='7' width='4' height='19' fill='%23aa0000'/%3E%3C/svg%3E"); }
.ico-doc   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 2h14l6 6v22H6z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M20 2v6h6' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M10 14h12M10 18h12M10 22h8' stroke='%23808080'/%3E%3C/svg%3E"); }
.ico-warn  { width: 32px; height: 32px;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3 31 29H1z' fill='%23ffd74a' stroke='%23000'/%3E%3Crect x='14.5' y='12' width='3' height='9'/%3E%3Crect x='14.5' y='23' width='3' height='3'/%3E%3C/svg%3E"); }
.ico-flag  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='3' width='6' height='5' fill='%23d00'/%3E%3Crect x='8' y='2' width='6' height='5' fill='%230a0'/%3E%3Crect x='1' y='9' width='6' height='5' fill='%2300c'/%3E%3Crect x='8' y='8' width='6' height='5' fill='%23fc0'/%3E%3C/svg%3E"); }

/* --- small screens: stop pretending it's a desktop ------------------ */

@media (max-width: 820px) {
  body { overflow: auto; }
  .desktop { height: auto; padding: 10px 10px calc(var(--taskbar-h) + 20px); }
  .shortcuts { position: static; flex-direction: row; margin: 0 0 14px; }
  .window { position: static; width: auto !important; max-width: none; margin: 0 0 14px; }
  .titlebar { cursor: default; }
  .tray-cell#tray-oracle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .meter-fill { transition: none; }
}

/* --- heatmap -------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: 112px repeat(5, 1fr);
  gap: 2px;
  margin: 10px 0 0;
  padding: 8px;
  background: var(--face);
  box-shadow: var(--sink);
}
.grid-corner, .grid-col-head, .grid-row-head {
  padding: 3px 4px;
  color: #202020;
}
.grid-col-head { text-align: center; font-weight: 700; }
.grid-row-head { text-align: right; }
.grid-row-head b { display: block; font-weight: 700; }
.grid-row-head span { color: #505050; }

.cell {
  display: grid; place-items: center;
  min-height: 34px;
  background: var(--light);
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow);
  color: #606060;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cell[data-state="pending"] { background: #e4e4e4; }
.cell[data-state="running"] { background: var(--mid); color: var(--dark); }
.cell[data-band="4"] { background: var(--navy);  color: #fff; box-shadow: none; }
.cell[data-band="3"] { background: #0a7d7d;      color: #fff; box-shadow: none; }
.cell[data-band="2"] { background: #808000;      color: #fff; box-shadow: none; }
.cell[data-band="1"] { background: #800000;      color: #fff; box-shadow: none; }
.cell[data-band="0"] { background: #202020;      color: #fff; box-shadow: none; }

.axis-note { margin: 8px 0 0; display: flex; gap: 12px; flex-wrap: wrap; color: #404040; }
.legend { display: flex; align-items: center; gap: 4px; }
.legend i { width: 14px; height: 12px; display: inline-block; }
.legend i.b4 { background: var(--navy); }
.legend i.b0 { background: #202020; }

.pass { margin: 10px 0 0; }
.pass input { width: 100%; }

/* --- PowerPoint, thirty years later ---------------------------------- */
/*  Everything below is scoped to .ppt / .ppt-show / .ppt-slide. The 1995
    rules above it must never find out.                                   */

.ppt, .ppt-show {
  --ppt-red:    #c43e1c;
  --ppt-red-2:  #c43e1c;
  --ppt-red-3:  #87291f;
  --ppt-chrome: #f3f3f3;
  --ppt-bg:     #f0f0f0;
  --ppt-line:   #e0e0e0;
  --ppt-line2:  #c8c6c4;
  --ppt-ink:    #1b1a19;
  --ppt-ink2:   #605e5c;
  --ppt-ink3:   #8a8886;
  --ppt-canvas: #f0f0f0;
  --ppt-chart:  #4472c4;
  --ppt-focus:  #2b579a;
  --s-accent:   #c43e1c;
  --ppt-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
              "Helvetica Neue", Arial, sans-serif;
  --ppt-deck: Aptos, "Segoe UI", Calibri, system-ui, Arial, sans-serif;
}
.ppt.theme-madison, .ppt-show.theme-madison { --s-accent: #2f6b4f; }
.ppt.theme-ion,     .ppt-show.theme-ion     { --s-accent: #0f6e84; }
.ppt.theme-berlin,  .ppt-show.theme-berlin  { --s-accent: #d35400; }

.window.ppt {
  display: flex; flex-direction: column;
  padding: 0;
  background: var(--ppt-chrome);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .16),
              0 2px 6px rgba(0, 0, 0, .16),
              0 24px 52px -16px rgba(0, 0, 0, .5);
  font: 400 13px/1.45 var(--ppt-sans);
  color: var(--ppt-ink);
  -webkit-font-smoothing: antialiased;
}

.ppt-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ppt-i {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}
.ppt-i-lg { width: 21px; height: 21px; }

/* --- title bar ------------------------------------------------------ */

.ppt .titlebar {
  height: 48px; flex-shrink: 0; gap: 12px; padding: 0 0 0 14px;
  background: var(--ppt-chrome); color: var(--ppt-ink);
}
.ppt .titlebar h1 {
  flex: 1; min-width: 0; text-align: left;
  font: 400 12.5px/34px var(--ppt-sans); letter-spacing: 0;
}
.ppt .titlebar h1 em { font-style: normal; color: var(--ppt-ink2); }

.ppt-qat { display: flex; align-items: center; gap: 2px; }
.ppt-auto {
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 10px; margin-right: 4px;
  border: 0; border-radius: 13px; background: none;
  font: 12px var(--ppt-sans); color: var(--ppt-ink2); cursor: pointer;
}
.ppt-auto:hover { background: var(--ppt-bg); }
.ppt-sw {
  position: relative; width: 26px; height: 14px;
  border-radius: 7px; background: #8a8886; transition: background .15s;
}
.ppt-sw i {
  position: absolute; top: 2px; left: 2px;
  width: 10px; height: 10px; border-radius: 50%; background: #fff;
  transition: left .15s;
}
.ppt-auto[aria-pressed="true"] .ppt-sw { background: var(--ppt-red); }
.ppt-auto[aria-pressed="true"] .ppt-sw i { left: 14px; }

.ppt-q {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 0; border-radius: 4px; background: none;
  color: var(--ppt-ink2); cursor: pointer;
}
.ppt-q:hover:not(:disabled) { background: var(--ppt-bg); color: var(--ppt-ink); }
.ppt-q:disabled { color: #c8c6c4; cursor: default; }
.ppt-dim { color: var(--ppt-ink3); }

.ppt-search {
  display: flex; align-items: center; gap: 8px;
  flex: 0 1 280px; min-width: 150px; height: 32px; padding: 0 12px;
  border: 1px solid #e1e1e1; border-radius: 5px;
  background: #fafafa; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  color: var(--ppt-ink2); font: 12px var(--ppt-sans); cursor: pointer;
}
.ppt-search:hover { background: #fff; border-color: #c7c7c7; }
.ppt-signin {
  flex: none; padding: 4px 10px; border: 0; border-radius: 4px;
  font-size: 12px; color: var(--ppt-ink);
}

.ppt .tb-buttons { gap: 0; }
.ppt .tb {
  width: 40px; height: 48px;
  background: none; box-shadow: none; color: var(--ppt-ink);
  font: 11px var(--ppt-sans);
}
.ppt .tb:hover:not(:disabled) { background: rgba(0, 0, 0, .06); }
.ppt .tb:active:not(:disabled) { box-shadow: none; background: rgba(0, 0, 0, .1); }
.ppt .tb:disabled { color: #c8c6c4; }
.ppt .tb.ppt-x:hover { background: #e81123; color: #fff; }
.ppt .tb:focus-visible { outline: 2px solid var(--ppt-focus); outline-offset: -5px; }

/* --- tabs and ribbon ------------------------------------------------ */

.ppt-tabs {
  display: flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 10px 4px;
  background: var(--ppt-chrome);
}
.ppt-file {
  flex: none; height: 28px; padding: 0 10px;
  border: 0; border-radius: 4px;
  background: transparent; color: var(--ppt-ink);
  font: 400 13px var(--ppt-sans); cursor: pointer;
}
.ppt-file:hover { background: #e5e5e5; }
.ppt-tabstrip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1px; overflow-x: auto; scrollbar-width: thin; }
.ppt-tab {
  flex: none; position: relative; padding: 6px 8px 8px;
  border: 0; border-radius: 4px; background: transparent;
  color: var(--ppt-ink); font: 13px var(--ppt-sans);
  white-space: nowrap; cursor: pointer;
}
.ppt-tab:hover { background: #e5e5e5; }
.ppt-tab.is-active {
  font-weight: 600;
}
.ppt-tab.is-active::after {
  content: ""; position: absolute; bottom: 2px; left: 8px; right: 8px;
  height: 2px; border-radius: 2px; background: var(--ppt-red);
}
.ppt-rec {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 3px 8px; border: 1px solid #d1d1d1; border-radius: 4px;
  background: #fff; font-size: 12px;
}
.ppt-rec i { width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 50%; background: radial-gradient(circle, currentColor 0 3px, transparent 3.5px); }
.ppt-go {
  display: inline-flex; align-items: center; gap: 6px;
  flex: none; height: 28px; padding: 0 12px;
  border: 0; border-radius: 4px;
  background: var(--ppt-red); color: #fff;
  font: 600 12px var(--ppt-sans); cursor: pointer;
}
.ppt-go:hover { background: var(--ppt-red-3); }
.ppt-collapse svg { transform: rotate(180deg); }
.ppt.ribbon-off .ppt-ribbon { display: none; }
.ppt.ribbon-off .ppt-collapse svg { transform: none; }

.ppt-ribbon {
  position: relative;
  display: flex; align-items: stretch;
  min-height: 112px; margin: 0 8px 8px; padding: 6px 4px 5px;
  background: #fff;
  border: 1px solid #e2e2e2; border-radius: 9px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .09);
  overflow-x: auto; scrollbar-width: thin;
}
.ppt-grp {
  flex: none; display: flex; flex-direction: column; justify-content: space-between;
  padding: 2px 7px;
  border-right: 1px solid var(--ppt-line);
}
.ppt-grp-last { border-right: 0; }
.ppt-grp-name { padding-top: 5px; text-align: center; font-size: 10px; color: var(--ppt-ink2); }
.ppt-grp-items { display: flex; align-items: flex-start; gap: 6px; }
.ppt-stack { flex-direction: column; gap: 4px; }
.ppt-line { display: flex; align-items: center; gap: 2px; }
.ppt-col { display: flex; flex-direction: column; gap: 1px; }
.ppt-icol { display: flex; flex-direction: column; gap: 1px; }

.ppt-big, .ppt-small, .ppt-key, .ppt-big-caret {
  border: 0; background: none; color: inherit; font: inherit; cursor: default;
}
button.ppt-big, button.ppt-small, button.ppt-key, button.ppt-big-caret { cursor: pointer; }
button.ppt-big:hover, button.ppt-small:hover,
button.ppt-key:hover, button.ppt-big-caret:hover { background: var(--ppt-bg); }
button.ppt-big:active, button.ppt-small:active,
button.ppt-key:active, button.ppt-big-caret:active { background: #e1dfdd; }
button.ppt-key.is-on { background: #efe0dc; color: var(--ppt-red); }
button.ppt-big:focus-visible, button.ppt-small:focus-visible,
button.ppt-key:focus-visible, button.ppt-big-caret:focus-visible,
.ppt-file:focus-visible, .ppt-go:focus-visible, .ppt-q:focus-visible,
.ppt-flat:focus-visible, .ppt-thumb:focus-visible, .ppt-tile:focus-visible,
.ppt-file-row:focus-visible, .ppt-auto:focus-visible {
  outline: 2px solid var(--ppt-focus); outline-offset: 1px;
}

.ppt-big {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 58px; padding: 5px 2px;
  border-radius: 4px;
  font-size: 11.5px; line-height: 1.2; text-align: center;
}
.ppt-big i { font-style: normal; font-size: 8px; color: var(--ppt-ink2); }
.ppt-big-alt { color: var(--ppt-red-2); }
.ppt-big-alt:has(use[href="#i-sparkle"]) { color: #8060b1; }
.ppt-ribbon .ppt-i-lg { width: 26px; height: 26px; }
.ppt-ribbon use[href="#i-paste"], .ppt-ribbon use[href="#i-painter"] { color: #b36a20; }
.ppt-ribbon use[href="#i-newslide"], .ppt-ribbon use[href="#i-spell"] { color: #237d43; }
.ppt-ribbon use[href="#i-picture"], .ppt-ribbon use[href="#i-table"],
.ppt-ribbon use[href="#i-layout"], .ppt-ribbon use[href="#i-shapes"] { color: #3276b8; }
.ppt-split { display: flex; flex-direction: column; align-items: stretch; }
.ppt-big-caret {
  height: 15px; display: grid; place-items: center; border-radius: 4px;
  color: var(--ppt-ink2);
}
.ppt-big-caret .ppt-i { width: 12px; height: 12px; }
.ppt-small {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; border-radius: 4px;
  font-size: 11.5px; white-space: nowrap;
}
.ppt-small i { font-style: normal; font-size: 8px; color: var(--ppt-ink2); }
.ppt-key {
  min-width: 26px; height: 26px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; font-size: 12.5px;
}
.ppt-key-wide { min-width: 32px; letter-spacing: -.5px; }
.ppt-key-a sup, .ppt-key-a sub { font-size: 7px; }
.ppt-key-fg { flex-direction: column; gap: 1px; line-height: 1; padding-top: 4px; }
.ppt-key-fg em { display: block; width: 13px; height: 3px; background: var(--s-accent); }
#ppt-color-input { position: absolute; width: 0; height: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.ppt-combo {
  height: 26px; display: inline-flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 6px;
  background: #fff; border: 1px solid var(--ppt-line2); border-radius: 3px;
  font-size: 11.5px; white-space: nowrap;
}
.ppt-combo i { font-style: normal; font-size: 8px; color: var(--ppt-ink2); }
.ppt-combo-w { width: 104px; }
.ppt-combo-n { width: 46px; }
.ppt-gallery {
  display: flex; align-items: center; gap: 4px;
  height: 48px; padding: 0 8px;
  background: #fff; border: 1px solid var(--ppt-line2); border-radius: 3px;
}
.ppt-gallery i { font-style: normal; font-size: 8px; color: var(--ppt-ink2); }

/* --- workspace ------------------------------------------------------ */

/*  The row has to be sized too: an auto row grows to fit the rail's
    content and spills straight over the status bar.  */
.ppt-work {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  height: clamp(300px, calc(100vh - 288px), 560px); background: var(--ppt-canvas);
}

.ppt-rail {
  display: flex; flex-direction: column; gap: 18px;
  padding: 16px 16px 16px 10px;
  overflow: auto;
  border-right: 1px solid var(--ppt-line);
}
.ppt-thumb {
  flex: none; display: flex; align-items: flex-start; gap: 9px;
  padding: 0; background: none; border: 0;
  font: inherit; color: var(--ppt-ink3); text-align: left; cursor: pointer;
}
.ppt-thumb-n { flex: none; width: 13px; padding-top: 2px; font-size: 11px; text-align: right; }
.ppt-thumb-box { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--ppt-line2); border-radius: 2px; box-shadow: 0 1px 3px #0000000d; }
.ppt-thumb.is-active .ppt-thumb-box { border-color: var(--ppt-red); outline: 2px solid var(--ppt-red); outline-offset: 1px; }
.ppt-thumb.is-active .ppt-thumb-n { color: var(--ppt-red); font-weight: 600; }
.ppt-thumb:hover .ppt-thumb-box { border-color: var(--ppt-ink3); }

.ppt-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ppt-stage {
  flex: 1; min-height: 0;
  display: grid; justify-content: safe center; align-content: safe center;
  padding: 16px; background: var(--ppt-canvas); overflow: auto;
}
.ppt-deck { width: calc(960px * var(--zoom, .7)); }
.ppt-deck > .ppt-slide:not(.is-active) { display: none; }
.ppt-deck > .ppt-slide.is-active { box-shadow: 0 0 0 1px #d1d1d1, 0 2px 5px rgba(0, 0, 0, .08); }

.ppt-sorter {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 16px; align-content: start;
  padding: 18px; background: var(--ppt-canvas); overflow: auto;
}
.ppt-sorter-cell {
  padding: 0; border: 2px solid transparent; background: #fff;
  font: inherit; color: var(--ppt-ink3); text-align: left; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.ppt-sorter-cell.is-active { border-color: var(--ppt-red); }
.ppt-sorter-cell b { display: block; padding: 3px 5px; font: 400 11px var(--ppt-sans); text-align: left; }

.ppt-notes { flex-shrink: 0; height: 62px; padding: 12px 24px; background: #fafafa; border-top: 1px solid var(--ppt-line); overflow: auto; }
.ppt-note {
  margin: 0; min-height: 20px; max-width: 86ch;
  font-size: 12.5px; line-height: 1.5; color: var(--ppt-ink2); outline: none;
}
.ppt [data-ph]:empty::before {
  content: attr(data-ph); color: #b1afad; pointer-events: none;
}
.ppt .ppt-slide [contenteditable]:focus {
  outline: 1px dashed var(--ppt-line2); outline-offset: 5px;
}

/* --- status bar ----------------------------------------------------- */

.ppt-status {
  display: flex; align-items: center; gap: 10px;
  min-height: 30px; padding: 0 6px 0 14px;
  background: var(--ppt-chrome); border-top: 1px solid var(--ppt-line);
  font-size: 11.5px; color: var(--ppt-ink2);
}
.ppt-dot { width: 1px; height: 12px; background: var(--ppt-line2); }
.ppt-msg {
  flex: 1; min-width: 0; color: var(--ppt-red); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ppt-status-r { display: flex; align-items: center; gap: 4px; }
.ppt-flat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 7px; border: 0; border-radius: 4px; background: none;
  font: 11.5px var(--ppt-sans); color: var(--ppt-ink2); cursor: pointer;
}
.ppt-flat:hover { background: var(--ppt-bg); color: var(--ppt-ink); }
.ppt-flat[aria-pressed="true"], .ppt-flat.is-on { background: var(--ppt-bg); color: var(--ppt-red); }
.ppt-nav { padding: 1px 7px; font-size: 15px; line-height: 1.2; }
.ppt-views { display: flex; gap: 1px; margin: 0 4px; }
.ppt-zoom { display: flex; align-items: center; gap: 2px; }
.ppt-zoom-b { padding: 1px 5px; font-size: 13px; line-height: 1.1; }
.ppt-zoom-num { width: 38px; text-align: right; font-variant-numeric: tabular-nums; }

#ppt-zoom-range {
  -webkit-appearance: none; appearance: none;
  width: 82px; height: 16px; margin: 0; background: none; cursor: pointer;
}
#ppt-zoom-range::-webkit-slider-runnable-track {
  height: 2px; border-radius: 1px; background: var(--ppt-line2); box-shadow: none;
}
#ppt-zoom-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 50%;
  background: var(--ppt-ink2); box-shadow: none;
}
#ppt-zoom-range::-moz-range-track { height: 2px; background: var(--ppt-line2); box-shadow: none; }
#ppt-zoom-range::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 50%;
  background: var(--ppt-ink2); box-shadow: none;
}
#ppt-zoom-range:focus-visible { outline: 2px solid var(--ppt-focus); outline-offset: 2px; }

/* --- the start screen ----------------------------------------------- */

.ppt-start { display: none; }
.ppt.is-start .ppt-start { display: flex; height: clamp(440px, calc(100vh - 140px), 640px); background: #fafafa; }
.ppt.is-start .ppt-tabs,
.ppt.is-start .ppt-ribbon,
.ppt.is-start .ppt-work,
.ppt.is-start .ppt-status { display: none; }

.ppt-start-rail {
  flex: none; width: 200px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 18px 12px; border-right: 1px solid #e7e7e7;
  background: var(--ppt-chrome);
}
.ppt-start-back {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--ppt-ink2); cursor: pointer;
}
.ppt-start-back:hover { background: #e1dfdd; color: var(--ppt-ink); }
.ppt-start-brand {
  display: flex; align-items: center; gap: 9px;
  margin: 4px 0 28px 12px;
  font: 600 18px var(--ppt-sans);
}
.ppt-start-brand .ico-ppt { width: 26px; height: 26px; }
.ppt-start-nav { display: flex; flex-direction: column; gap: 4px; }
.ppt-start-nav button {
  position: relative; width: 100%; min-height: 40px;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px; border: 0; border-radius: 5px;
  background: transparent; color: var(--ppt-ink);
  text-align: left; font: 14px var(--ppt-sans); cursor: pointer;
}
.ppt-start-nav button:hover { background: #e8e8e8; }
.ppt-start-nav .is-on { background: #e8e8e8; color: var(--ppt-red); font-weight: 600; }
.ppt-start-nav .is-on::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
  width: 3px; border-radius: 2px; background: var(--ppt-red);
}
.ppt-start-nav .ppt-i { width: 20px; height: 20px; }
.ppt-start-foot { margin: auto 0 0 10px; color: var(--ppt-ink3); font-size: 12px; line-height: 2; }

.ppt-start-main { flex: 1; min-width: 0; padding: 28px 36px; overflow: auto; }
.ppt-start-h { margin: 0 0 28px; font: 600 28px var(--ppt-sans); color: var(--ppt-ink); }
.ppt-start-sub { margin: 0 0 16px; font: 600 16px var(--ppt-sans); color: var(--ppt-ink); }

.ppt-tiles { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; margin: 0 0 32px; }
.ppt-tile {
  width: 170px; padding: 12px; border: 1px solid transparent; border-radius: 7px; background: none;
  font: inherit; color: var(--ppt-ink); text-align: left; cursor: pointer;
}
.ppt-tile-art {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border: 1px solid var(--ppt-line2); overflow: hidden; background: #fff;
}
.ppt-tile:hover { background: #fff; border-color: #dedede; box-shadow: 0 2px 5px #0000000d; }
.ppt-tile:hover .ppt-tile-art { border-color: var(--ppt-red); }
.ppt-tile-name { display: block; margin-top: 12px; font-size: 12px; text-align: center; }
.ppt-tile-art b, .ppt-tile-art u { position: absolute; display: block; }
.ppt-tile-art b { left: 12%; top: 36%; width: 58%; height: 9%; }
.ppt-tile-art u { left: 12%; top: 52%; width: 38%; height: 5%; opacity: .45; }
.art-blank { display: grid; place-items: center; }
.art-blank i { font-style: normal; font-size: 24px; font-weight: 300; color: var(--ppt-ink3); }
.art-madison { background: linear-gradient(135deg, #f7f8f4, #e6ece5); }
.art-madison b, .art-madison u { background: #2f6b4f; }
.art-ion { background: linear-gradient(135deg, #123c46, #0f6e84); }
.art-ion b, .art-ion u { background: #fff; }
.art-berlin { background: linear-gradient(135deg, #fff3e6, #ffd9b3); }
.art-berlin b, .art-berlin u { background: #d35400; }
.ppt-tile-more { align-self: center; color: var(--ppt-red); font-size: 12.5px; }

.ppt-start-tabs { display: flex; gap: 24px; margin: 0 0 8px; border-bottom: 1px solid var(--ppt-line); }
.ppt-start-tabs span { padding: 10px 2px; color: var(--ppt-ink2); font-size: 14px; }
.ppt-start-tabs .is-on { color: var(--ppt-red); font-weight: 600; box-shadow: inset 0 -2px var(--ppt-red); }

.ppt-files { display: flex; flex-direction: column; }
.ppt-file-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 68px; padding: 12px; border: 0; border-bottom: 1px solid #ebebeb; border-radius: 4px; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.ppt-file-row:hover { background: var(--ppt-bg); }
.ppt-file-row > .ppt-i { width: 28px; height: 28px; color: var(--ppt-red-2); }
.ppt-file-main { flex: 1; min-width: 0; }
.ppt-file-name { display: block; margin-bottom: 3px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppt-file-sub { display: block; font-size: 11.5px; color: var(--ppt-ink3); }
.ppt-file-date { flex: none; font-size: 11.5px; color: var(--ppt-ink3); }
.ppt-file-row.is-sealed > .ppt-i { color: var(--ppt-ink3); }
.ppt-file-row.is-sealed .ppt-file-name { color: var(--ppt-ink3); }

/* --- menus ---------------------------------------------------------- */

.ppt-menu, .ppt-ctx {
  position: absolute; z-index: 40;
  background: #fff; border: 1px solid var(--ppt-line2); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .26);
  padding: 7px;
}
.ppt-menu { display: grid; grid-template-columns: repeat(3, 108px); gap: 8px; }
.ppt-menu button {
  padding: 0; border: 0; background: none; font: inherit; color: var(--ppt-ink2);
  text-align: center; cursor: pointer;
}
.ppt-menu-art { display: block; border: 1px solid var(--ppt-line2); background: #fff; text-align: left; }
.ppt-menu button:hover .ppt-menu-art { border-color: var(--ppt-red); }
.ppt-menu span { display: block; margin-top: 5px; font-size: 11px; }
.ppt-ctx { display: flex; flex-direction: column; min-width: 176px; }
.ppt-ctx button {
  padding: 7px 12px; border: 0; border-radius: 4px; background: none;
  font: inherit; color: var(--ppt-ink); text-align: left; cursor: pointer;
}
.ppt-ctx button:hover { background: var(--ppt-bg); }

/* --- fields, task panes, and dialogs -------------------------------- */

.ppt-section-label { padding: 3px 10px; font-size: 12px; }
.ppt-slide-hidden .ppt-thumb-n { text-decoration: line-through; }
.ppt-slide-hidden .ppt-thumb-box { opacity: .5; }
.ppt-object-selected { outline: 1px dashed #757575; outline-offset: 4px; }
.ppt-free-object { cursor: move; }
.window.ppt.ppt-maximized { position: fixed; inset: 0 0 var(--taskbar-h); width: 100%; max-width: none; margin: 0; border-radius: 0; }
.ppt-maximized .ppt-work { flex: 1; min-height: 0; height: auto; }
.ppt-maximized.is-start .ppt-start { flex: 1; min-height: 0; height: auto; }
.ppt-inserted-table { width: 85%; margin: 4% auto; border-collapse: collapse; font-size: 2.5cqw; }
.ppt-inserted-table td { border: 1px solid #aaa; padding: 1cqw; }
.ppt-inserted-chart { position: absolute; inset: 25% 15% 15%; display: flex; align-items: flex-end; gap: 5%; }
.ppt-inserted-chart > div { flex: 1; min-width: 0; background: var(--s-accent); color: white; text-align: center; font-size: 2.5cqw; }
.ppt-ink-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ppt-inking { touch-action: none; cursor: crosshair; }
.ppt-inking > :not(.ppt-ink-layer) { pointer-events: none; }
.ppt-inking .ppt-ink-layer { pointer-events: auto; }
.ppt-ink-stroke { pointer-events: stroke; }
.ppt-stage { position: relative; }
.ppt-ruler-h { display: none; position: absolute; top: 0; left: 16px; right: 16px; height: 18px; align-items: flex-start; justify-content: space-between; padding: 0 4px; background: #fafafa; border-bottom: 1px solid #ccc; font-size: 9px; color: #666; }
.ppt-ruler-on .ppt-ruler-h { display: flex; }
.ppt-ruler-h span { border-left: 1px solid #aaa; padding-left: 3px; }
.ppt-gridlines-on .ppt-slide { --ppt-grid-dots: radial-gradient(#8888 1px, transparent 1px); }
.ppt-guides-on .ppt-slide { --ppt-guide-x: linear-gradient(90deg, transparent calc(50% - .5px), #c43e1c 50%, transparent calc(50% + .5px)); --ppt-guide-y: linear-gradient(transparent calc(50% - .5px), #c43e1c 50%, transparent calc(50% + .5px)); }
.ppt-stage .ppt-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--ppt-grid-dots, linear-gradient(transparent, transparent)), var(--ppt-guide-x, linear-gradient(transparent, transparent)), var(--ppt-guide-y, linear-gradient(transparent, transparent)); background-size: 16px 16px, 100% 100%, 100% 100%; }
#ppt-print-document { display: none; }
@media print {
  body:has(#ppt-print-document) > :not(#ppt-print-document) { display: none !important; }
  html, body { height: auto; overflow: visible; background: #fff; }
  #ppt-print-document { display: block; }
  .ppt-print-page { break-after: page; }
  .ppt-print-page .ppt-slide { width: 100%; }
  #ppt-print-document[data-layout="handout"] .ppt-print-page { width: 60%; margin: 0 auto 16px; break-after: auto; }
  #ppt-print-document[data-layout="handout"] .ppt-print-page:nth-child(3n) { break-after: page; }
}

.ppt button:focus-visible, .ppt input:focus-visible, .ppt select:focus-visible,
.ppt textarea:focus-visible, .ppt [contenteditable]:focus-visible {
  outline: 2px solid var(--ppt-focus); outline-offset: 2px;
}
.ppt button:disabled { cursor: default; opacity: .5; }
.ppt input[type="text"], .ppt input[type="number"], .ppt input[type="password"], .ppt select, .ppt textarea {
  min-width: 0; min-height: 30px; padding: 5px 8px;
  border: 1px solid #d1d1d1; border-bottom-color: #929292; border-radius: 4px;
  background: #fff; color: var(--ppt-ink); box-shadow: none;
  font: 13px/1.4 var(--ppt-sans);
}
.ppt input:disabled { background: var(--ppt-bg); color: var(--ppt-ink3); }
.ppt input[type="checkbox"] { accent-color: var(--ppt-red); width: 15px; height: 15px; margin: 0; }
.ppt-field { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.ppt-field-wide { display: flex; align-items: stretch; flex-direction: column; max-width: 400px; margin: 16px 0; }
.ppt .ppt-num { width: 64px; min-height: 26px; padding: 3px 5px; }
.ppt-check { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; font-size: 12px; white-space: nowrap; }
.ppt-hint { display: block; max-width: 280px; padding: 5px 6px; color: var(--ppt-ink2); font-size: 12px; }
.ppt-hint-wide { max-width: 430px; }
.ppt-pane-p { max-width: 66ch; margin: 0 0 18px; color: var(--ppt-ink2); }
.ppt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 32px; min-width: 80px; padding: 6px 16px;
  border: 1px solid #d1d1d1; border-radius: 5px; background: #fff;
  color: var(--ppt-ink); font: 13px var(--ppt-sans); cursor: pointer;
}
.ppt-btn:hover { background: #f5f5f5; border-color: #b3b3b3; }
.ppt-btn-primary { border-color: var(--ppt-red); background: var(--ppt-red); color: #fff; }
.ppt-btn-primary:hover { border-color: var(--ppt-red-3); background: var(--ppt-red-3); }
.ppt-info { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 14px 28px; margin: 0 0 28px; }
.ppt-info dt { color: var(--ppt-ink2); }
.ppt-info dd { margin: 0; overflow-wrap: anywhere; }
.ppt-info-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.ppt-themes, .ppt-swatches, .ppt-effects { display: flex; align-items: center; gap: 6px; }
.ppt-themes button, .ppt-effects button, .ppt-swatches button {
  flex: none; padding: 5px; border: 1px solid var(--ppt-line); border-radius: 4px;
  background: #fff; color: var(--ppt-ink); font: 11px var(--ppt-sans); cursor: pointer;
}
.ppt-themes .ppt-tile { width: 100px; }
.ppt-themes .ppt-tile-name { margin-top: 4px; font-size: 10px; }
.ppt-themes button:hover, .ppt-effects button:hover, .ppt-swatches button:hover,
.ppt-themes .is-on, .ppt-effects .is-on, .ppt-swatches .is-on { border-color: var(--ppt-red); background: #fcf0ed; }
.ppt-find { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--ppt-line); }
.ppt-find .ppt-field { flex: 1 1 190px; }
.ppt-find-count { margin-left: auto; font-size: 12px; color: var(--ppt-ink2); }
.ppt.is-start .ppt-find { display: none; }
.ppt-work:has(> .ppt-comments:not(.hidden)) { grid-template-columns: 180px minmax(0, 1fr) 250px; }
.ppt-comments { min-width: 0; overflow: auto; padding: 16px; background: #fafafa; border-left: 1px solid var(--ppt-line); }
.ppt-comments > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; font-size: 17px; font-weight: 600; }
.ppt-comment-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ppt-comment-list > * { padding: 12px; border: 1px solid var(--ppt-line); border-radius: 6px; background: #fff; overflow-wrap: anywhere; }
.ppt-outline, .ppt-notespage { flex: 1; min-height: 0; padding: 24px; overflow: auto; background: #fff; }
.ppt-outline > * { margin: 0 0 16px; }
.ppt-notespage { background: var(--ppt-canvas); }
.ppt-notespage > * { max-width: 620px; margin: 0 auto 16px; padding: 20px; background: #fff; box-shadow: 0 1px 4px #0000001a; }
.ppt-ruler-h:empty { display: none; }
.ppt-list {
  position: absolute; z-index: 40; display: flex; flex-direction: column;
  min-width: 180px; max-width: calc(100% - 24px); max-height: 340px; overflow: auto;
  padding: 5px; border: 1px solid var(--ppt-line); border-radius: 7px;
  background: #fff; box-shadow: 0 8px 24px #00000026;
}
.ppt-list button { padding: 8px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--ppt-ink); font: 13px var(--ppt-sans); text-align: left; cursor: pointer; }
.ppt-list button:hover { background: var(--ppt-bg); }
.ppt-dlg-scrim { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: #00000033; }
.ppt-dlg { width: min(460px, 100%); max-height: 100%; overflow: auto; border: 1px solid #d1d1d1; border-radius: 8px; background: #fff; box-shadow: 0 16px 48px #00000033; }
.ppt-dlg > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.ppt-dlg h2 { margin: 0; font-size: 18px; font-weight: 600; }
.ppt-dlg-body { padding: 12px 24px 24px; }
.ppt-dlg-body .ppt-field { display: flex; margin-bottom: 12px; }
.ppt-dlg > footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--ppt-line); background: #f7f7f7; }
.ppt-range-lbl { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ppt .ppt-range { width: 140px; margin: 0; }
.ppt .ppt-range::-webkit-slider-runnable-track { height: 3px; background: #d1d1d1; box-shadow: none; border-radius: 2px; }
.ppt .ppt-range::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; background: var(--ppt-red); border-radius: 50%; box-shadow: none; }
.ppt .ppt-range::-moz-range-track { height: 3px; background: #d1d1d1; box-shadow: none; }
.ppt .ppt-range::-moz-range-thumb { width: 14px; height: 14px; background: var(--ppt-red); border: 0; border-radius: 50%; box-shadow: none; }

/* --- slide show ----------------------------------------------------- */

.ppt-show {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  background: #000; cursor: pointer;
}
.ppt-show-frame { width: min(100vw, calc(100vh * 16 / 9)); }
.ppt-show-stage { display: grid; place-items: center; min-width: 0; min-height: 0; }
.ppt-show:has(.ppt-presenter:not(.hidden)) { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 24px; padding: 32px; background: #202020; }
.ppt-show:has(.ppt-presenter:not(.hidden)) .ppt-show-frame { width: 100%; }
.ppt-presenter { align-self: stretch; min-width: 0; padding: 16px; color: #f5f5f5; overflow: auto; }
.ppt-pres-top { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.ppt-pres-clock { font-size: 24px; font-variant-numeric: tabular-nums; }
.ppt-pres-at { margin-left: auto; font-size: 12px; color: #bbb; }
.ppt-pres-label { margin: 20px 0 10px; color: #ccc; font-size: 13px; }
.ppt-pres-next { width: 100%; }
.ppt-pres-notes { font-size: 18px; line-height: 1.6; }
.ppt-show-bar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #555; border-radius: 8px; background: #292929; color: #fff; }
.ppt-show-b, .ppt-pres-b { padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; color: #fff; font: 13px var(--ppt-sans); cursor: pointer; white-space: nowrap; }
.ppt-show-b:hover, .ppt-pres-b:hover { background: #444; }
.ppt-show-b:focus-visible, .ppt-pres-b:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.ppt-show-at { font-size: 12px; white-space: nowrap; }
.ppt-show-end {
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  padding: 12px 18px; color: #fff; font: 13px/1.4 var(--ppt-sans);
}

/* --- the slides themselves ------------------------------------------ */
/*  Sized in cqw against the slide box, so one set of rules serves the
    stage, the thumbnails, the sorter and the full-screen show. The
    slide's OWN padding must stay in %: cq units in a container's own
    properties resolve against the nearest ANCESTOR container, not itself. */

.ppt-slide {
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--ppt-slide-ratio, 16 / 9);
  width: 100%;
  padding: 6% 7%;
  background: #fff;
  color: #242424;
  font-family: var(--ppt-deck);
  overflow: hidden;
}

.s-h1 { margin: 0; font-size: 9cqw; font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }
.s-h2 { margin: 0 0 3cqw; font-size: 5.2cqw; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.s-eyebrow {
  margin: 0 0 1.4cqw;
  font-size: 2.2cqw; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--s-accent);
}
.s-sub { margin: 2.6cqw 0 0; max-width: 62cqw; font-size: 3cqw; line-height: 1.35; color: #4a4a4a; }
.s-sub2 { margin: -1.6cqw 0 2.4cqw; font-size: 2.4cqw; color: #5f5f5f; }
.s-foot { position: absolute; left: 7%; bottom: 5cqw; margin: 0; font-size: 1.9cqw; color: #8a8886; }
.s-caption {
  position: absolute; left: 7%; right: 7%; bottom: 3.4cqw; margin: 0;
  font-size: 1.9cqw; line-height: 1.35; color: #8a8886;
}
.s-free { margin: 0; font-size: 3cqw; line-height: 1.4; color: #4a4a4a; }
.s-aside {
  position: absolute; left: 7%; right: 7%; bottom: 4cqw; margin: 0;
  padding: 1.4cqw 2cqw;
  border-left: .6cqw solid var(--s-accent); background: #f6f0ee;
  font-size: 2.5cqw; font-style: italic; line-height: 1.3; color: #3a3a3a;
}
.s-cover .s-aside { left: 10%; }

.s-cover { display: flex; flex-direction: column; justify-content: center; padding-left: 10%; }
.s-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1.8cqw;
  background: linear-gradient(180deg, var(--s-accent), #e8a33d);
}
.s-close .s-h1 { font-size: 7.4cqw; }
.s-section .s-h2 { margin: 0; font-size: 6.4cqw; }
.s-section .s-sub { margin-top: 1.8cqw; }

.s-bullets { margin: 0; padding: 0 0 0 4cqw; list-style: none; }
.s-bullets li { position: relative; margin: 0 0 2.6cqw; font-size: 3cqw; line-height: 1.35; }
.s-bullets li::before {
  content: ""; position: absolute; left: -3.4cqw; top: 1.5cqw;
  width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--s-accent);
}
.s-bullets em { font-style: italic; }
.s-bullets b { font-weight: 700; }
.s-two { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; }
.s-two .s-bullets li { font-size: 2.5cqw; }

.s-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw; margin-top: 1cqw; }
.s-step { padding-top: 2cqw; border-top: .6cqw solid var(--s-accent); }
.s-step-real { border-top-color: var(--ppt-chart); }
.s-num { display: block; font-size: 1.9cqw; letter-spacing: .2em; color: #8a8886; }
.s-step b { display: block; margin: .6cqw 0 1.2cqw; font-size: 3.2cqw; font-weight: 600; }
.s-step p { margin: 0; font-size: 2.2cqw; line-height: 1.4; color: #4a4a4a; }

.s-legal .s-h2 { margin-bottom: 2.4cqw; }
.s-req {
  display: inline-block; vertical-align: .6cqw;
  padding: .4cqw 1.2cqw; border-radius: 2cqw;
  background: #fde7e9; color: #a4262c;
  font-size: 1.6cqw; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.s-cols { column-count: 3; column-gap: 3cqw; }
.s-cols p { margin: 0 0 1.4cqw; font-size: 1.75cqw; line-height: 1.5; color: #3b3b3b; text-align: justify; }

.s-road { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; margin-top: 1cqw; }
.s-road > div { padding: 2cqw 1.8cqw; background: #f6f6f6; border-left: .5cqw solid var(--s-accent); }
.s-road span { font-size: 1.9cqw; font-weight: 700; letter-spacing: .1em; color: var(--s-accent); }
.s-road b { display: block; margin: .6cqw 0 1cqw; font-size: 2.8cqw; font-weight: 600; }
.s-road p { margin: 0; font-size: 2cqw; line-height: 1.4; color: #4a4a4a; }

/* the one slide with real numbers on it */
.s-chart-slide { padding: 5% 6% 6%; }
.s-chart-slide .s-h2 { margin: 0 0 1cqw; }
.s-chart-slide .s-sub2 { margin: 0 0 1.6cqw; }
.s-chart { display: block; width: 100%; height: auto; }
.s-grid line { stroke: #ebe9e7; stroke-width: 1; }
.s-axis { stroke: #c8c6c4; stroke-width: 1; }
.s-bars path { fill: var(--ppt-chart); }
.s-ylab text { fill: #8a8886; font-size: 13px; text-anchor: end; }
.s-val text { fill: #323130; font-size: 15px; font-weight: 600; text-anchor: middle; }
.s-xlab text { fill: #323130; font-size: 14px; font-weight: 600; text-anchor: middle; }
.s-xlab .s-xsub { fill: #8a8886; font-size: 12px; font-weight: 400; }

/* --- the one icon that has been redrawn since 1995 ------------------ */

.ico-ppt {
  background-repeat: no-repeat; background-position: center; background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8f6b'/%3E%3Cstop offset='.5' stop-color='%23ed6c47'/%3E%3Cstop offset='1' stop-color='%23c43e1c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='2' y='2' width='28' height='28' rx='7' fill='url(%23p)'/%3E%3Ccircle cx='16.5' cy='16' r='10' fill='none' stroke='%23fff' stroke-opacity='.3' stroke-width='1.4'/%3E%3Cpath fill-rule='evenodd' fill='%23fff' d='M11 8h6.4a5.7 5.7 0 0 1 0 11.4H14.6V24H11zm3.6 3.4h2.8a2.3 2.3 0 0 1 0 4.6h-2.8z'/%3E%3C/svg%3E");
}

/* --- small screens: the deck stops pretending to be an application --- */

@media (min-width: 821px) {
  .window.ppt { max-width: calc(100vw - 96px); }
}
@media (max-width: 1140px) {
  .ppt-signin, .ppt-rec { display: none; }
  .ppt-qat { gap: 0; }
  .ppt-auto { padding-inline: 4px; }
  .ppt-qat .ppt-q { width: 24px; }
  .ppt-search { flex-basis: 180px; }
}
@media (max-width: 820px) {
  .window.ppt { border-radius: 6px; }
  .ppt-rec, .ppt-qat > :not(#ppt-save) { display: none; }
  .ppt-qat { display: flex; }
  .ppt .titlebar { gap: 8px; }
  .ppt-search { flex-basis: 160px; min-width: 100px; }
  .ppt-ribbon, .ppt-tabstrip { overflow-x: auto; }
  .ppt-work, .ppt-work:has(> .ppt-comments:not(.hidden)) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: auto; }
  .ppt-rail { display: none; }
  .ppt-stage { flex: none; padding: 16px; height: 360px; }
  .ppt-sorter, .ppt-outline, .ppt-notespage { flex: none; max-height: 420px; }
  .ppt-comments { max-height: 300px; border-left: 0; border-top: 1px solid var(--ppt-line); }
  .ppt.is-start .ppt-start { height: auto; min-height: 520px; flex-direction: column; }
  .ppt-start-rail { width: auto; padding: 14px; gap: 10px; border-right: 0; border-bottom: 1px solid var(--ppt-line); }
  .ppt-start-brand { margin: 0 8px 0 4px; }
  .ppt-start-nav { flex-direction: row; overflow-x: auto; }
  .ppt-start-nav button { flex: none; width: auto; padding: 8px 12px; }
  .ppt-start-nav .is-on::before { top: auto; left: 12px; right: 12px; bottom: 0; height: 2px; width: auto; }
  .ppt-start-main { padding: 24px; }
  .ppt-start-h { font-size: 24px; margin-bottom: 24px; }
  .ppt-start-foot { display: none; }
  .ppt-status { flex-wrap: wrap; padding: 5px 10px; gap: 5px; }
  .ppt-status-r { margin-left: auto; }
  .ppt-status #ppt-lang, .ppt-status > .ppt-dot { display: none; }
}
@media (max-width: 520px) {
  .ppt-search { display: none; }
  .ppt .tb { width: 32px; }
  .ppt-start-main { padding: 20px 14px; }
  .ppt-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ppt-tile { width: 100%; padding: 8px; }
  .ppt-file-row { flex-wrap: wrap; gap: 8px; }
  .ppt-file-date { width: 100%; padding-left: 36px; }
  .ppt-status-r { flex-wrap: wrap; justify-content: flex-end; }
  .ppt-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(100% - 24px); }
  .ppt-show:has(.ppt-presenter:not(.hidden)) { grid-template-columns: minmax(0, 1fr); padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ppt-sw, .ppt-sw i { transition: none; }
}

/* --- gru: a folder, a viewer, and a one-in-a-hundred -------------------
    Back to 1995 for these three. Only the calculator missed the memo.   */

.folder {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px;
  min-height: 128px; padding: 8px;
  background: var(--light); box-shadow: var(--sink);
}
.fileitem {
  width: 96px;
  display: grid; justify-items: center; gap: 4px;
  padding: 5px 3px;
  background: none; border: 1px dotted transparent;
  font: inherit; color: var(--dark); text-align: center;
  cursor: default;
}
.fileitem .ico { width: 32px; height: 32px; }
.fileitem span:last-child { padding: 0 3px; overflow-wrap: anywhere; line-height: 1.25; }
.fileitem.selected span:last-child { background: var(--navy); color: var(--light); }
.fileitem.selected { border-color: var(--dark); }
.fileitem:focus-visible { outline: none; border-color: var(--dark); }

#win-gru .statusbar { display: flex; gap: 10px; }
#win-gru .status-cell { margin-left: auto; padding-left: 10px; border-left: 1px solid var(--shadow); }

.viewport {
  display: grid; place-items: center;
  min-height: 296px; padding: 6px;
  background: var(--shadow); box-shadow: var(--sink);
  overflow: auto;
}
.viewport img { display: block; max-width: 100%; max-height: 52vh; }

/* --- my first project ------------------------------------------------ */

#win-calc {
  width: 340px;
  padding: 0;
  border: 1px solid #292929;
  border-radius: 32px;
  overflow: hidden;
  background: #000;
  color: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#win-calc .titlebar {
  min-height: 44px;
  padding: 12px 18px 4px;
  background: #000;
  color: #a5a5a5;
}
#win-calc .titlebar .ico { display: none; }
#win-calc .titlebar h1 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}
#win-calc .tb-buttons { gap: 6px; }
#win-calc .tb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #262626;
  box-shadow: none;
  color: #ddd;
  font: 12px/1 Arial, sans-serif;
}
#win-calc .tb:disabled { color: #666; }
#win-calc .tb:hover:not(:disabled) { background: #444; }
#win-calc .tb:active:not(:disabled) { background: #555; }
#win-calc .tb:focus-visible { outline: 2px solid #ff9f0a; outline-offset: 2px; }

.calc {
  container-type: inline-size;
  background: #000;
  padding: 8px 18px 24px;
}
.calc-display {
  display: flex; align-items: flex-end; justify-content: flex-end;
  min-height: 128px; padding: 24px 8px 20px;
  color: #fff; text-align: right;
  font: 300 clamp(42px, 19cqw, 60px)/1.05 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden;
}
.calc-display.is-long { font-size: clamp(24px, 12cqw, 38px); }
.calc-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.calc-key {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; aspect-ratio: 1; padding: 0;
  border: 0; border-radius: 50%;
  background: #333; color: #fff;
  font: 400 clamp(26px, 10cqw, 32px)/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s;
}
.calc-key:hover { background: #484848; }
.calc-key:active { background: #737373; }
.calc-key.fn { background: #a5a5a5; color: #000; font-size: clamp(22px, 8.5cqw, 28px); }
.calc-key.fn:hover { background: #bfbfbf; }
.calc-key.fn:active { background: #d9d9d9; }
.calc-key.op { background: #ff9f0a; font-size: clamp(32px, 12cqw, 38px); font-weight: 300; }
.calc-key.op:hover { background: #ffb340; }
.calc-key.op:active { background: #ffcb7a; }
.calc-key.op.armed { background: #fff; color: #ff9f0a; }
.calc-key.zero {
  grid-column: span 2; aspect-ratio: auto; border-radius: 999px;
  justify-content: flex-start;
  padding-left: calc((100% - 12px) / 4 - .28em);
}
.calc-key:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 820px) {
  #win-calc { width: min(340px, 100%) !important; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .calc-key { transition: none; }
}

/* --- the one-in-a-hundred -------------------------------------------- */

.gru-scare {
  position: fixed; inset: 0; z-index: 600;
  display: grid; place-items: center;
  background: #000;
  pointer-events: none;
  opacity: 1;
  transition: opacity 2.6s linear;
}
.gru-scare.fading { opacity: 0; }
/*  object-fit scales the small ones up too: a 250px meme should still
    take the whole screen.  */
.gru-scare img { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .gru-scare { transition: opacity .8s linear; } }

/* --- icons ------------------------------------------------------------ */

.ico-china { background: #de2910; border: 1px solid #a51f0d; }
.ico-china::before { content: "★"; position: absolute; left: 8%; top: -6%; color: #ffde00; font: 12px/1.4 Arial, sans-serif; }
.shortcut .ico-china::before { font-size: 23px; }
.china-body { max-height: min(650px, 75vh); overflow-y: auto; }
#china-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.china-basics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#win-china label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#win-china input[type="email"] { width: 100%; padding: 4px 5px; border: 0; box-shadow: var(--sink); background: #fff; font: 12px/1.5 var(--mono); }
.china-info { display: grid; gap: 8px; margin-top: 14px; padding: 10px; box-shadow: var(--sink); }
.china-info .btn { justify-self: end; }
.china-receipt { padding: 30px 10px; text-align: center; }
.china-receipt h2 { font-size: 20px; }
.china-transfer { position: relative; display: flex; align-items: center; justify-content: space-between; width: 210px; height: 70px; margin: auto; font-size: 36px; }
.china-transfer > .ico-china { width: 64px; height: 42px; }
.china-transfer > .ico-china::before { font-size: 30px; }
.china-transfer > span:first-child { animation: china-send 1.2s ease-in-out infinite; }
.china-progress { height: 20px; max-width: 250px; margin: auto; padding: 3px; box-shadow: var(--sink); }
.china-progress i { display: block; height: 100%; background: #de2910; transform-origin: left; animation: china-progress 1.2s ease-out both; }
.china-done .china-transfer > span:first-child { animation: none; visibility: hidden; }
.china-done .china-progress i { animation: none; }
#china-status { overflow-wrap: anywhere; }
@keyframes china-send { from { transform: translateX(0) rotate(-8deg); opacity: 1; } to { transform: translateX(145px) scale(.3); opacity: 0; } }
@keyframes china-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 520px) { .china-basics { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .china-transfer > span:first-child, .china-progress i { animation: none; } }

.ico-folder, .ico-img, .ico-calc {
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.ico-folder { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2 6h10l3 3.5h15V28H2z' fill='%23e0a92e' stroke='%23000'/%3E%3Cpath d='M2 11h28v17H2z' fill='%23ffd75e' stroke='%23000'/%3E%3C/svg%3E"); }
.ico-img { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 2h14l6 6v22H6z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M20 2v6h6' fill='%23c0c0c0' stroke='%23000'/%3E%3Crect x='9.5' y='14' width='13' height='10' fill='%2368b0e8' stroke='%23000'/%3E%3Cpath d='M9.5 24l4.5-5.5 2.6 3 3-3.6L22.5 24z' fill='%232e7d32'/%3E%3Ccircle cx='13' cy='17.2' r='1.5' fill='%23ffe14a'/%3E%3C/svg%3E"); }
.ico-calc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='4' y='2' width='24' height='28' rx='5' fill='%231c1c1e'/%3E%3Crect x='8' y='6' width='16' height='5' rx='1.6' fill='%233a3a3c'/%3E%3Cg fill='%238e8e93'%3E%3Ccircle cx='10.5' cy='16' r='2.1'/%3E%3Ccircle cx='16' cy='16' r='2.1'/%3E%3Ccircle cx='10.5' cy='21.5' r='2.1'/%3E%3Ccircle cx='16' cy='21.5' r='2.1'/%3E%3Ccircle cx='10.5' cy='27' r='2.1'/%3E%3Ccircle cx='16' cy='27' r='2.1'/%3E%3C/g%3E%3Cg fill='%23ff9f0a'%3E%3Ccircle cx='21.5' cy='16' r='2.1'/%3E%3Ccircle cx='21.5' cy='21.5' r='2.1'/%3E%3Ccircle cx='21.5' cy='27' r='2.1'/%3E%3C/g%3E%3C/svg%3E"); }

/* --- OUTPUT.EXE and the Code tab ------------------------------------- */

.ico-dos { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1' y='2' width='14' height='12' fill='%23000' stroke='%23c0c0c0'/%3E%3Cpath d='M3.5 5.5l2.5 2.5-2.5 2.5M7.5 11h4' fill='none' stroke='%23fff' stroke-width='1.3'/%3E%3C/svg%3E"); }
.console {
  margin: 0; min-height: 180px; max-height: 340px; overflow: auto;
  padding: 6px 8px;
  background: #000; color: #c0c0c0; box-shadow: var(--sink);
  font: 12px/1.45 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.console:focus-visible { outline: 1px dotted var(--light); outline-offset: -4px; }
.console .out-cmd { color: #fff; }
.console .out-err { color: #ff6b6b; }
.console .out-note { color: #ffff55; }
.console .out-dim { color: #8a8a8a; }
.console button.out-link {
  padding: 0; border: 0; background: none;
  font: inherit; color: #ff6b6b; text-align: left; text-decoration: underline; cursor: pointer;
}
.console button.out-link:focus-visible { outline: 1px dotted var(--light); }

.ppt-code-help {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 58px; margin-top: 0; padding: 5px 2px;
  border: 0; border-radius: 4px; background: none;
  font: 700 9px var(--ppt-sans); letter-spacing: .04em; color: var(--ppt-ink2);
  opacity: .5; cursor: pointer;
  align-self: flex-start;
}
.ppt-code-help .ppt-i {
  width: 26px; height: 26px;
}
.ppt-code-help:hover, .ppt-code-help:focus-visible { opacity: 1; color: var(--ppt-red); }
.ppt-ribbon use[href="#i-run"] { color: #237d43; }
.ppt-ribbon use[href="#i-bug"] { color: #c43e1c; }
.ppt-ribbon use[href="#i-checkcode"], .ppt-ribbon use[href="#i-terminal"] { color: #3276b8; }

/* ===================================================================== */
/* --- PowerPoint 2026: panes, handles, and the rest of the modern kit -- */
/* ===================================================================== */

/* --- title bar: command search and Copilot -------------------------- */

.ppt-searchwrap { position: relative; display: flex; align-items: center; }
.ppt-tellme {
  position: relative; display: flex; align-items: center; gap: 6px;
  width: 300px; padding: 0 8px; height: 26px;
  border: 1px solid var(--ppt-line2); border-radius: 4px; background: #fff;
}
.ppt-tellme:focus-within { border-color: var(--ppt-red); box-shadow: 0 0 0 1px var(--ppt-red); }
.ppt-tellme > .ppt-i { color: var(--ppt-ink2); }
.ppt-tellme input {
  flex: 1; min-width: 0; height: 22px; padding: 0;
  border: 0; background: none; font: 12.5px var(--ppt-sans); color: var(--ppt-ink);
}
.ppt-tellme input:focus-visible { outline: none; }
.ppt-tellme-list {
  position: absolute; z-index: 70; top: calc(100% + 4px); left: 0; right: 0;
  display: flex; flex-direction: column; max-height: 320px; overflow: auto; padding: 5px;
  background: #fff; border: 1px solid var(--ppt-line2); border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .24);
}
.ppt-tellme-list button {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border: 0; border-radius: 4px; background: none;
  font: inherit; font-size: 12.5px; color: var(--ppt-ink); text-align: left; cursor: pointer;
}
.ppt-tellme-list button:hover, .ppt-tellme-list button.is-on { background: var(--ppt-bg); }
.ppt-tellme-list b { font-weight: 600; }
.ppt-tellme-list small { margin-left: auto; padding-left: 12px; color: var(--ppt-ink3); font-size: 11px; }
.ppt-tellme-none { padding: 10px; color: var(--ppt-ink2); font-size: 12.5px; }

.ppt-copilot-b {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 6px; padding: 4px 11px;
  border: 1px solid transparent; border-radius: 14px;
  background: linear-gradient(115deg, #d4442b, #b3319b 55%, #3a5de0);
  font: 600 12px var(--ppt-sans); color: #fff; cursor: pointer;
}
.ppt-copilot-b:hover { filter: brightness(1.08); }
.ppt-copilot-b:focus-visible { outline: 2px solid var(--ppt-focus); outline-offset: 2px; }
.ppt-copilot-b .ppt-i { stroke-width: 1.4; }

/* --- simplified ribbon ---------------------------------------------- */

.ppt-simple .ppt-ribbon { padding-top: 3px; padding-bottom: 3px; }
.ppt-simple .ppt-grp-name { display: none; }
.ppt-simple .ppt-big { flex-direction: row; gap: 5px; width: auto; padding: 5px 9px; text-align: left; }
.ppt-simple .ppt-big br { display: none; }
.ppt-simple .ppt-big .ppt-i-lg { width: 16px; height: 16px; }
.ppt-simple .ppt-split { flex-direction: row; align-items: center; }
.ppt-simple .ppt-grp { padding-bottom: 0; }

/* --- selection handles and smart guides ------------------------------ */

.ppt-deck { position: relative; }
.ppt-handles { position: absolute; z-index: 12; pointer-events: none; }
.ppt-handles i {
  position: absolute; width: 9px; height: 9px; margin: -5px 0 0 -5px;
  border: 1px solid var(--ppt-focus); border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3); pointer-events: auto;
}
.ppt-handles i[data-grip="nw"] { top: 0; left: 0; cursor: nwse-resize; }
.ppt-handles i[data-grip="n"]  { top: 0; left: 50%; cursor: ns-resize; }
.ppt-handles i[data-grip="ne"] { top: 0; left: 100%; cursor: nesw-resize; }
.ppt-handles i[data-grip="e"]  { top: 50%; left: 100%; cursor: ew-resize; }
.ppt-handles i[data-grip="se"] { top: 100%; left: 100%; cursor: nwse-resize; }
.ppt-handles i[data-grip="s"]  { top: 100%; left: 50%; cursor: ns-resize; }
.ppt-handles i[data-grip="sw"] { top: 100%; left: 0; cursor: nesw-resize; }
.ppt-handles i[data-grip="w"]  { top: 50%; left: 0; cursor: ew-resize; }
.ppt-handles i[data-grip="rot"] {
  top: -22px; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  cursor: grab; background-color: #fff; background-repeat: no-repeat;
  background-position: center; background-size: 9px;
}
.ppt-handles-box { position: absolute; inset: 0; border: 1px solid var(--ppt-focus); }
.ppt-guide { position: absolute; z-index: 11; background: #e3008c; pointer-events: none; }
.ppt-guide-v { width: 1px; top: 0; bottom: 0; }
.ppt-guide-h { height: 1px; left: 0; right: 0; }
.ppt-size-badge {
  position: absolute; z-index: 13; padding: 2px 6px; border-radius: 3px;
  background: #292929; color: #fff; font: 11px var(--ppt-sans);
  white-space: nowrap; pointer-events: none;
}
.ppt-object-selected { outline: 1px dashed transparent; }
.ppt-slide.ppt-dragging, .ppt-slide.ppt-dragging * { user-select: none; }

/* --- mini toolbar ---------------------------------------------------- */

.ppt-mini {
  position: absolute; z-index: 45; display: flex; align-items: center; gap: 1px;
  padding: 3px; border: 1px solid var(--ppt-line2); border-radius: 6px; background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.ppt-mini button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 5px;
  border: 0; border-radius: 4px; background: none;
  font: 12.5px var(--ppt-sans); color: var(--ppt-ink); cursor: pointer;
}
.ppt-mini button:hover { background: var(--ppt-bg); }
.ppt-mini .ppt-mini-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--ppt-line2); }

/* --- task pane ------------------------------------------------------- */

.ppt-work:has(#ppt-taskpane:not(.hidden)) { grid-template-columns: 200px minmax(0, 1fr) 286px; }
.ppt-work:has(#ppt-comments:not(.hidden)):has(#ppt-taskpane:not(.hidden)) {
  grid-template-columns: 200px minmax(0, 1fr) 240px 260px;
}
.ppt-pane {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border-left: 1px solid var(--ppt-line);
}
.ppt-pane > header {
  display: flex; align-items: center; flex: none;
  padding: 12px 8px 10px 16px; font-weight: 600; font-size: 14px;
}
.ppt-pane > header .ppt-q { margin-left: auto; }
.ppt-pane-body { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 20px; }
.ppt-pane-sec { margin: 0 0 14px; border-bottom: 1px solid var(--ppt-line); padding-bottom: 12px; }
.ppt-pane-sec:last-child { border-bottom: 0; }
.ppt-pane-sec > h3 { margin: 0 0 9px; font-size: 12px; font-weight: 600; color: var(--ppt-ink2); text-transform: uppercase; letter-spacing: .04em; }
.ppt-pane-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 12px; }
.ppt-pane-row > span:first-child { flex: none; width: 72px; color: var(--ppt-ink2); }
.ppt-pane-row input[type="number"], .ppt-pane-row select, .ppt-pane-row input[type="text"] {
  flex: 1; min-width: 0; height: 24px; padding: 0 6px;
  border: 1px solid var(--ppt-line2); border-radius: 3px;
  font: 12px var(--ppt-sans); background: #fff; color: var(--ppt-ink);
}
.ppt-pane-row input[type="range"] { flex: 1; min-width: 0; }
.ppt-pane-row input[type="color"] { width: 34px; height: 24px; padding: 0; border: 1px solid var(--ppt-line2); border-radius: 3px; background: none; }
.ppt-pane-row output { width: 34px; flex: none; text-align: right; color: var(--ppt-ink2); font-variant-numeric: tabular-nums; }
.ppt-pane-empty { margin: 24px 0; color: var(--ppt-ink2); font-size: 12.5px; line-height: 1.5; }
.ppt-pane-b {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; margin: 0 6px 6px 0;
  border: 1px solid var(--ppt-line2); border-radius: 4px; background: #fff;
  font: 12px var(--ppt-sans); color: var(--ppt-ink); cursor: pointer; text-align: left;
}
.ppt-pane-b:hover { background: var(--ppt-bg); }
.ppt-pane-b-full { display: flex; width: 100%; margin-right: 0; }

/* Designer and Copilot idea cards */
.ppt-idea {
  display: block; width: 100%; margin-bottom: 10px; padding: 0;
  border: 1px solid var(--ppt-line2); border-radius: 6px; background: #fff;
  cursor: pointer; overflow: hidden; text-align: left;
}
.ppt-idea:hover, .ppt-idea:focus-visible { border-color: var(--ppt-red); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.ppt-idea .ppt-slide { pointer-events: none; }
.ppt-idea span { display: block; padding: 7px 10px; font-size: 11.5px; color: var(--ppt-ink2); }
.ppt-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ppt-chat p { margin: 0; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; }
.ppt-chat .is-me { align-self: flex-end; max-width: 88%; background: var(--ppt-bg); }
.ppt-chat .is-ai { background: linear-gradient(120deg, #fdf2f0, #f2f0fd); border: 1px solid #ece4f5; }
.ppt-chat-form { display: flex; gap: 6px; }
.ppt-chat-form input {
  flex: 1; min-width: 0; height: 30px; padding: 0 9px;
  border: 1px solid var(--ppt-line2); border-radius: 15px;
  font: 12.5px var(--ppt-sans); background: #fff; color: var(--ppt-ink);
}
.ppt-chat-form button {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: linear-gradient(115deg, #d4442b, #3a5de0); color: #fff; cursor: pointer;
}
.ppt-anim-item, .ppt-ver-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  margin-bottom: 6px; padding: 7px 9px;
  border: 1px solid var(--ppt-line2); border-radius: 4px; background: #fff;
  font: 12px var(--ppt-sans); color: var(--ppt-ink); text-align: left; cursor: pointer;
}
.ppt-anim-item:hover, .ppt-ver-item:hover { background: var(--ppt-bg); }
.ppt-anim-item b, .ppt-ver-item b { font-weight: 600; }
.ppt-anim-item small, .ppt-ver-item small { margin-left: auto; color: var(--ppt-ink3); }
.ppt-ver-item.is-on { border-color: var(--ppt-red); }

/* --- threaded comments ---------------------------------------------- */

.ppt-comment-list article {
  padding: 10px 12px; border: 1px solid var(--ppt-line2); border-radius: 6px; background: #fff;
}
.ppt-comment-list article.is-resolved { opacity: .55; }
.ppt-c-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.ppt-c-av {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px;
  border-radius: 50%; background: var(--s-accent); color: #fff; font: 600 10.5px var(--ppt-sans);
}
.ppt-c-who { font-weight: 600; font-size: 12px; }
.ppt-c-when { margin-left: auto; color: var(--ppt-ink3); font-size: 11px; }
.ppt-comment-list p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ppt-c-reply { margin: 6px 0 0 30px; padding-left: 10px; border-left: 2px solid var(--ppt-line); }
.ppt-c-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.ppt-c-acts button {
  padding: 3px 8px; border: 0; border-radius: 4px; background: none;
  font: 11.5px var(--ppt-sans); color: var(--ppt-focus); cursor: pointer;
}
.ppt-c-acts button:hover { background: var(--ppt-bg); }
.ppt-mention { color: var(--ppt-focus); font-weight: 600; }

/* --- toasts, achievements, and the assistant ------------------------- */

.ppt-toasts {
  position: absolute; z-index: 80; right: 18px; bottom: 44px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
}
.ppt-toast {
  display: flex; align-items: center; gap: 10px;
  max-width: 320px; padding: 10px 14px;
  border: 1px solid var(--ppt-line2); border-radius: 8px; background: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
  font-size: 12.5px; color: var(--ppt-ink);
  animation: ppt-toast-in .22s ease-out;
}
.ppt-toast b { display: block; font-weight: 600; }
.ppt-toast small { color: var(--ppt-ink2); }
.ppt-toast .ppt-i { flex: none; width: 22px; height: 22px; color: var(--ppt-red); }
@keyframes ppt-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ppt-toast { animation: none; } }

.ppt-clippy {
  position: absolute; z-index: 82; right: 22px; bottom: 58px;
  width: 244px; padding: 14px 14px 12px;
  border: 1px solid var(--ppt-line2); border-radius: 12px 12px 4px 12px; background: #ffffe1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  font-size: 12.5px; color: #1b1a19;
}
.ppt-clippy-x { position: absolute; top: 4px; right: 4px; }
.ppt-clippy-say { margin: 0 0 10px; line-height: 1.5; padding-right: 14px; }
.ppt-clippy-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.ppt-clippy-acts button {
  padding: 4px 10px; border: 1px solid #c8c6a8; border-radius: 4px; background: #fffff4;
  font: 11.5px var(--ppt-sans); color: #1b1a19; cursor: pointer;
}
.ppt-clippy-acts button:hover { background: #fff; }
.ppt-clippy-face { position: absolute; right: -10px; bottom: -34px; width: 46px; height: 58px; }
.ppt-clippy-face svg { width: 100%; height: 100%; animation: ppt-clippy-bob 3.6s ease-in-out infinite; }
@keyframes ppt-clippy-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .ppt-clippy-face svg { animation: none; } }

.ppt-confetti { position: absolute; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.ppt-confetti i {
  position: absolute; top: -14px; width: 8px; height: 13px; border-radius: 1px;
  animation: ppt-fall linear forwards;
}
@keyframes ppt-fall { to { transform: translateY(115vh) rotate(720deg); opacity: .15; } }

/* --- slide show extras ----------------------------------------------- */

.ppt-show-stage { position: relative; }
.ppt-show-blank { position: absolute; inset: 0; z-index: 30; background: #000; }
.ppt-show-blank.is-white { background: #fff; }
.ppt-laser {
  position: absolute; z-index: 24; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; background: radial-gradient(circle, #ff3b30 0 34%, #ff3b3055 60%, transparent 72%);
  box-shadow: 0 0 14px 5px #ff3b3066; pointer-events: none;
}
.ppt-show-cc {
  position: absolute; z-index: 26; left: 50%; bottom: 74px; transform: translateX(-50%);
  max-width: min(80%, 900px); margin: 0; padding: 8px 18px;
  border-radius: 6px; background: #000000cc; color: #fff;
  font: 500 clamp(15px, 2.1vw, 24px)/1.4 var(--ppt-sans); text-align: center;
}
.ppt-show-jump {
  position: absolute; z-index: 26; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 14px 26px; border-radius: 10px; background: #000000d9; color: #fff;
  font: 600 34px var(--ppt-sans); font-variant-numeric: tabular-nums;
}
.ppt-show-ink { position: absolute; inset: 0; z-index: 22; width: 100%; height: 100%; }
.ppt-show-frame { position: relative; }
.ppt-show.tool-pen .ppt-show-stage, .ppt-show.tool-marker .ppt-show-stage { cursor: crosshair; }
.ppt-show.tool-laser .ppt-show-stage { cursor: none; }
.ppt-show-tools { display: flex; align-items: center; gap: 1px; padding: 0 4px; }
.ppt-show-b.is-on { background: #4a4a4a; }
.ppt-show-b .ppt-i { width: 15px; height: 15px; }
.ppt-navigator {
  position: absolute; inset: 0; z-index: 28; overflow: auto;
  padding: 32px; background: #1a1a1acc; backdrop-filter: blur(3px);
}
.ppt-navigator-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px; align-content: start;
}
.ppt-navigator button {
  display: block; padding: 0; border: 2px solid transparent; border-radius: 4px;
  background: #fff; cursor: pointer; overflow: hidden;
}
.ppt-navigator button.is-on { border-color: var(--ppt-red); }
.ppt-navigator button:hover { border-color: #fff; }
.ppt-navigator b {
  display: block; padding: 5px; background: #292929; color: #fff;
  font: 11.5px var(--ppt-sans); text-align: left;
}

/* --- inserted objects ------------------------------------------------ */

.s-wordart {
  font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(95deg, var(--s-accent), #3a5de0 70%, #b3319b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(.03em .04em .02em #0000002e);
}
.s-icon { color: var(--s-accent); }
.s-icon svg { display: block; width: 100%; height: 100%; }
.ppt-cameo {
  display: grid; place-items: center; overflow: hidden;
  border-radius: 50%; background: radial-gradient(circle at 34% 30%, #6f7782, #2c3138);
  color: #ffffffcc; font-size: 1.5cqw; text-align: center; line-height: 1.3;
  box-shadow: 0 .4cqw 1.4cqw #00000040;
}
.ppt-smart { display: flex; gap: 1.6cqw; align-items: stretch; }
.ppt-smart-node {
  flex: 1; min-width: 0; padding: 1.8cqw 1.6cqw;
  border-radius: .8cqw; background: var(--s-accent); color: #fff;
  font-size: 1.9cqw; line-height: 1.32;
}
.ppt-smart-node b { display: block; margin-bottom: .5cqw; font-size: 2.3cqw; font-weight: 700; }
.ppt-smart-chevron .ppt-smart-node {
  clip-path: polygon(0 0, calc(100% - 1.6cqw) 0, 100% 50%, calc(100% - 1.6cqw) 100%, 0 100%, 1.6cqw 50%);
  padding-left: 2.8cqw; padding-right: 2.8cqw;
}
.ppt-smart-cycle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4cqw; }
.ppt-smart-cycle .ppt-smart-node { border-radius: 50% / 22%; text-align: center; }
.ppt-smart-stack { flex-direction: column; }
.ppt-smart-stack .ppt-smart-node:nth-child(2) { margin-left: 4cqw; }
.ppt-smart-stack .ppt-smart-node:nth-child(3) { margin-left: 8cqw; }
.ppt-smart-stack .ppt-smart-node:nth-child(4) { margin-left: 12cqw; }
.ppt-slide a { color: var(--s-accent); text-underline-offset: .18em; }
.ppt-inserted-chart.is-line, .ppt-inserted-chart.is-pie { display: block; }
.ppt-inserted-chart.is-pie svg, .ppt-inserted-chart.is-line svg { width: 100%; height: 100%; }

/* extra layouts */
.s-quote-layout { display: flex; flex-direction: column; justify-content: center; padding-left: 10%; padding-right: 10%; }
.s-quote { margin: 0; font-size: 4.6cqw; font-weight: 600; line-height: 1.24; letter-spacing: -.02em; }
.s-quote::before { content: "\201C"; color: var(--s-accent); }
.s-quote::after { content: "\201D"; color: var(--s-accent); }
.s-attrib { margin: 2.6cqw 0 0; font-size: 2.2cqw; color: #6a6a6a; }
.s-attrib::before { content: "\2014\00a0"; }
.s-stat-layout { display: flex; flex-direction: column; justify-content: center; }
.s-stat { margin: 0 0 1cqw; font-size: 16cqw; font-weight: 800; line-height: .92; letter-spacing: -.045em; color: var(--s-accent); }
.s-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; }
.s-three .s-bullets li { font-size: 2.1cqw; }
.s-subhead { margin: 0 0 1.4cqw; font-size: 2.6cqw; font-weight: 600; }

/* --- dark mode -------------------------------------------------------- */

.ppt.ppt-dark {
  --ppt-chrome: #262626; --ppt-bg: #333; --ppt-line: #3d3d3d; --ppt-line2: #4a4a4a;
  --ppt-ink: #f3f2f1; --ppt-ink2: #c8c6c4; --ppt-ink3: #9a9a9a; --ppt-canvas: #1f1f1f;
}
.ppt-dark .ppt-tabs, .ppt-dark .titlebar { background: #262626; }
.ppt-dark .ppt-ribbon, .ppt-dark .ppt-find, .ppt-dark .ppt-notes,
.ppt-dark .ppt-start, .ppt-dark .ppt-start-main, .ppt-dark .ppt-status,
.ppt-dark .ppt-outline, .ppt-dark .ppt-comments, .ppt-dark .ppt-pane,
.ppt-dark .ppt-list, .ppt-dark .ppt-ctx, .ppt-dark .ppt-menu, .ppt-dark .ppt-mini,
.ppt-dark .ppt-dlg, .ppt-dark .ppt-toast { background: #2b2b2b; color: var(--ppt-ink); }
.ppt-dark .ppt-tellme, .ppt-dark .ppt-tellme-list, .ppt-dark .ppt-comment-list article,
.ppt-dark .ppt-pane-b, .ppt-dark .ppt-idea, .ppt-dark .ppt-anim-item, .ppt-dark .ppt-ver-item,
.ppt-dark .ppt-pane-row input, .ppt-dark .ppt-pane-row select, .ppt-dark .ppt-chat-form input,
.ppt-dark .ppt-thumb-box { background: #333; color: var(--ppt-ink); }
.ppt-dark .ppt-chat .is-ai { background: #38323f; border-color: #4a4152; }
.ppt-dark .ppt-file-row:hover, .ppt-dark .ppt-tellme-list button:hover,
.ppt-dark .ppt-ctx button:hover, .ppt-dark .ppt-list button:hover { background: #3d3d3d; }
.ppt-dark .ppt-sorter-cell, .ppt-dark .ppt-notespage { background: transparent; }
.ppt-dark .ppt-start-rail { background: #1f1f1f; }

/* --- 2026 theme tiles ------------------------------------------------ */
.ppt.theme-vapor,  .ppt-show.theme-vapor  { --s-accent: #b3319b; }
.ppt.theme-slate,  .ppt-show.theme-slate  { --s-accent: #3a5de0; }
.ppt.theme-amber,  .ppt-show.theme-amber  { --s-accent: #b06e00; }
.art-vapor { background: linear-gradient(135deg, #2b1c49, #b3319b); }
.art-vapor b, .art-vapor u { background: #ffd9f6; }
.art-slate { background: linear-gradient(135deg, #eef1fb, #cdd6f7); }
.art-slate b, .art-slate u { background: #3a5de0; }
.art-amber { background: linear-gradient(135deg, #fffaf0, #ffe7b8); }
.art-amber b, .art-amber u { background: #b06e00; }
.theme-vapor .ppt-slide, .theme-slate .ppt-slide, .theme-amber .ppt-slide { background: #fff; }

/* --- odds and ends the 2026 features need ---------------------------- */

.ppt-colors { display: block; min-width: 208px; padding: 9px; }
.ppt-colors-h { margin: 6px 2px 5px; font-size: 11px; color: var(--ppt-ink2); }
.ppt-colors-h:first-child { margin-top: 0; }
.ppt-colors-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-bottom: 4px; }
.ppt-colors .ppt-swatch {
  width: 100%; aspect-ratio: 1; padding: 0;
  border: 1px solid #00000022; border-radius: 2px; cursor: pointer;
}
.ppt-colors .ppt-swatch:hover { outline: 2px solid var(--ppt-focus); outline-offset: 1px; }
.ppt-colors > button:not(.ppt-swatch) {
  display: block; width: 100%; margin-top: 3px; padding: 6px 8px;
  border: 0; border-radius: 4px; background: none;
  font: inherit; font-size: 12px; color: var(--ppt-ink); text-align: left; cursor: pointer;
}
.ppt-colors > button:not(.ppt-swatch):hover { background: var(--ppt-bg); }
.ppt-ctx-sep { display: block; height: 1px; margin: 5px 6px; background: var(--ppt-line); }
.ppt-thumb.is-marked .ppt-thumb-box { outline: 2px solid var(--ppt-focus); outline-offset: 1px; }
.ppt-thumb.is-marked .ppt-thumb-n { color: var(--ppt-focus); font-weight: 600; }
.ppt-group { outline: 1px dashed #9a9a9a; outline-offset: 2px; }
.s-bullets[data-bullet] li::before {
  content: var(--s-bullet, "\2022"); left: -3.6cqw; top: 0;
  width: auto; height: auto; border-radius: 0; background: none;
  color: var(--s-accent); font-size: 2.4cqw; line-height: 1.6;
}
.s-idea-panel .s-h2, .s-idea-panel h1 { color: inherit; }
.ppt-key-caret { min-width: 15px; padding: 0 2px; }
.ppt-key-caret i { font-style: normal; font-size: 9px; }
.ppt-key-hl em { display: block; height: 3px; background: #ffe14a; }
.ppt-key-fg em { display: block; width: 14px; height: 3px; background: currentColor; }
.ppt-handles.rot-below i[data-grip="rot"] { top: calc(100% + 22px); }
/* The ribbon scrolls when the window is narrow; hint that it does. */
.ppt-ribbon { scroll-padding-inline: 8px; }
.ppt-ribbons { position: relative; }
.ppt-ribbons::after {
  content: ""; position: absolute; z-index: 2; top: 6px; right: 9px; bottom: 9px; width: 26px;
  background: linear-gradient(90deg, #fff0, #fff); border-radius: 0 9px 9px 0; pointer-events: none;
}
.ppt-dark .ppt-ribbons::after { background: linear-gradient(90deg, #2b2b2b00, #2b2b2b); }
.ppt-maximized .ppt-ribbons::after { display: none; }
.ppt-dark .ppt-rec { background: #333; border-color: var(--ppt-line2); color: var(--ppt-ink); }
.ppt-dark .ppt-search { background: #333; border-color: var(--ppt-line2); color: var(--ppt-ink); }
.ppt-dark .ppt-note, .ppt-dark .ppt-thumb-box { color: inherit; }
.ppt-dark .ppt-pane-empty, .ppt-dark .ppt-hint { color: var(--ppt-ink2); }
.ppt-dark .ppt-idea span { color: var(--ppt-ink2); }
/* inform() passes multi-line text; keep the line breaks it wrote. */
.ppt-dlg-body > p { margin: 0; white-space: pre-line; line-height: 1.55; }

/* --- shapes, emoji and the pickers they come from --------------------- */
.ppt-shape-key { display: grid; place-items: center; width: 26px; height: 26px; }
.ppt-shape-key .ppt-shape-art { width: 17px; height: 15px; color: var(--s-accent, #c43e1c); }
.ppt-shape-more { font-size: 14px; letter-spacing: .06em; }
.ppt-shape-picker, .ppt-emoji-picker { width: min(560px, 76vw); max-height: 56vh; overflow: auto; }
.ppt-shape-group {
  margin: 12px 0 6px; font: 600 10.5px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .09em; text-transform: uppercase; color: #616161;
}
.ppt-shape-group:first-child { margin-top: 0; }
.ppt-shape-row, .ppt-emoji-row { display: flex; flex-wrap: wrap; gap: 5px; }
.ppt-shape-chip {
  display: grid; place-items: center; width: 34px; height: 30px; padding: 0;
  border: 1px solid transparent; border-radius: 4px; background: none; cursor: pointer;
  color: var(--s-accent, #c43e1c);
}
.ppt-shape-chip:hover, .ppt-shape-chip:focus-visible { border-color: var(--ppt-line, #d1d1d1); background: #f3f2f1; }
.ppt-shape-chip .ppt-shape-art { width: 22px; height: 19px; }
.ppt-emoji-chip {
  width: 36px; height: 34px; padding: 0; border: 1px solid transparent; border-radius: 4px;
  background: none; cursor: pointer; font-size: 20px; line-height: 1;
}
.ppt-emoji-chip:hover, .ppt-emoji-chip:focus-visible { border-color: var(--ppt-line, #d1d1d1); background: #f3f2f1; }
.ppt-shape { box-sizing: border-box; }
.ppt-shape-text { margin: 0; width: 100%; text-align: center; font-size: 2.6cqw; color: #fff; }
.ppt-emoji { overflow: visible; }
.ppt-emoji text { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ppt-fill-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
/*  A placeholder that has been dragged is a positioned box like any other;
    this only marks the ones the layout still owns, so it is obvious which
    is which before the first drag.                                       */
.ppt-slide > *:not(.ppt-free-object):not(svg):hover { outline: 1px dashed #b9b9b9; outline-offset: 2px; }
.ppt-dragging .ppt-slide > *:hover { outline: none; }
/*  A note in a pane row is the whole row, not the 72px label column the
    row's first child normally gets.                                     */
.ppt-pane-row > .ppt-pane-note:first-child { width: auto; flex: 1; min-width: 0; }
.ppt-pane-note { display: block; font-size: 11px; line-height: 1.5; color: var(--ppt-ink2, #616161); }

/* --- the shared gallery ---------------------------------------------- */
.ppt-share-bar { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; margin: 10px 0 8px; }
.ppt-share-bar .ppt-field { margin: 0; }
.ppt-file-shared { border-left: 3px solid var(--s-accent, #c43e1c); }

/* --- GRAPH.EXE, behind its password ----------------------------------- */
.graph-lock { margin: 8px 0 10px; padding: 11px 13px; background: #fff; box-shadow: var(--sink); }
.graph-lock p { margin: 0 0 8px; }
.graph-lock .row { align-items: center; }
.graph-lock .lbl { margin: 0; }
#graph-password { flex: 1; min-width: 170px; }