/* =========================================================
   ILPE 95 — vaporwave desktop theme
   Active when <html data-theme="vapor">. Every rule is scoped to that
   attribute (or to .vp-on / .vp-pending, which only exist in it) so the
   dark and light themes are untouched. Loaded after styles.css, so these
   tokens override the :root (dark) defaults.
   Look: Windows 98 chrome and system colours on a vaporwave desktop.
   ========================================================= */

/* ---------- Theme tokens ---------- */
[data-theme="vapor"] {
  --ground:      #008080;  /* Win98 desktop teal, until the wallpaper paints */
  --grid-line:   transparent;
  --surface:     #C0C0C0;  /* Win95 window grey */
  --bevel-hi:    #FFFFFF;
  --bevel-lo:    #5A5A5A;
  --text:        #000000;
  --muted:       #1F1F1F;
  --faint:       #333333;
  --tan:         #000080;  /* labels: Win98 navy, 8.8:1 on grey */
  --link:        #0000FF;  /* classic hyperlink blue, 4.7:1 on grey, 8.6:1 on white */
  --fill:        #000080;  /* skip link: white on navy, 16:1 (buttons are grey here) */
  --fill-hi:     #1084D0;
  --on-fill:     #FFFFFF;
  --chip-border: #808080;
  --hot-bg:      #FFFFE1;  /* tooltip yellow */
  --hot-border:  #000000;
  --hot-text:    #000000;
  --footer:      #C0C0C0;
  --ph-a:        #B0B0B0;
  --ph-b:        #C0C0C0;
  --rb-1: #B8322A; --rb-2: #C4560F; --rb-3: #957A0C; --rb-4: #4A8A2E;
  --rb-5: #12756A; --rb-6: #2C569A; --rb-7: #5A2B8C;

  /* Win95 3-D edge colours */
  --w-hi:     #FFFFFF;
  --w-lite:   #DFDFDF;
  --w-shadow: #808080;
  --w-dark:   #000000;
  /* Win98 title bars, white text. Titles stay in the left ~60% (the buttons take
     the right), where white is ≥ 7:1 on the active gradient and ≥ 4.9:1 on the
     inactive one. Real 98 used #C0C0C0 text on #808080 there, ~2:1, so the
     inactive grey is darkened to keep the 4.5:1 floor. */
  --vp-title:     linear-gradient(90deg, #000080, #1084D0);
  --vp-title-off: linear-gradient(90deg, #5A5A5A, #808080);
  --vp-select:    #000080;  /* menu/icon/text highlight behind white text, 16:1 */
  --vp-desk:      #008080;  /* behind desktop icon labels, as on a real 98 desktop: white 4.8:1 */
  --vp-bar-h:  1.575rem;
  --vp-task-h: max(1.925rem, 44px);  /* phones/stacked: stays a 44px touch strip; floating desktop overrides */
  color-scheme: light;
}

/* ---------- Desktop ---------- */
/* Plain desktop teal: shows until the scene's images load (and if vapor.js never runs). */
[data-theme="vapor"] body {
  background-color: var(--ground);
  background-image: none;
}
[data-theme="vapor"] ::selection { background: var(--vp-select); color: #FFFFFF; }
[data-theme="vapor"] :focus-visible { outline-style: dotted; }

/* Page widgets in Win98 dress: the site's 2px bevels become the 4-tone
   raised/sunken edges, and its buttons become grey push buttons. The primary
   one gets the extra black frame Windows draws around a dialog's default button. */
[data-theme="vapor"] .bevel,
[data-theme="vapor"] .btn-secondary {
  border-width: 1px;
  border-color: var(--w-hi) var(--w-dark) var(--w-dark) var(--w-hi);
  box-shadow: inset -1px -1px var(--w-shadow), inset 1px 1px var(--w-lite);
}
[data-theme="vapor"] .inset,
[data-theme="vapor"] .tool:active {
  border-width: 1px;
  border-color: var(--w-shadow) var(--w-hi) var(--w-hi) var(--w-shadow);
  box-shadow: inset 1px 1px var(--w-dark), inset -1px -1px var(--w-lite);
}
[data-theme="vapor"] .btn { color: var(--w-dark); background: var(--surface); }
[data-theme="vapor"] .btn-primary {
  border-width: 1px;
  border-color: var(--w-dark);
  box-shadow: inset 1px 1px var(--w-hi), inset -1px -1px var(--w-dark),
              inset 2px 2px var(--w-lite), inset -2px -2px var(--w-shadow);
}
[data-theme="vapor"] .btn:active { transform: none; }
[data-theme="vapor"] .btn-secondary:active {
  border-color: var(--w-dark) var(--w-hi) var(--w-hi) var(--w-dark);
  box-shadow: inset 1px 1px var(--w-shadow), inset -1px -1px var(--w-lite);
}
[data-theme="vapor"] .btn-primary:active {
  box-shadow: inset 1px 1px var(--w-shadow), inset -1px -1px var(--w-shadow);
  padding: calc(0.75rem + 1px) 1.375rem calc(0.75rem - 1px) calc(1.375rem + 2px);
}
[data-theme="vapor"] .btn:focus-visible { outline: 1px dotted var(--w-dark); outline-offset: -0.3125rem; }
[data-theme="vapor"] .chips li { background: var(--w-hi); }
[data-theme="vapor"] .chips .chip-hot { background: var(--hot-bg); }
/* The phone photo viewer (lightbox.js): window grey behind photos, like the Image Viewer windows. */
[data-theme="vapor"] .lightbox-stage { background: var(--surface); }
[data-theme="vapor"] .lightbox::backdrop { background: rgba(0, 0, 0, 0.6); }

/* The dark/light choice lives in Start → Shut Down here. */
[data-theme="vapor"] .theme-toggle { display: none; }

/* Fallback if vapor.js never runs: grey panels so no text sits on the gradient.
   Once the desktop is built, sections live inside windows and this stops matching. */
[data-theme="vapor"] main > section {
  background: var(--surface);
  border-style: solid;
  border-width: 0.125rem;
  border-color: var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  margin-block: 1.5rem;
}

/* Hidden until vapor.js builds the desktop (set by the <head> script on reload). */
.vp-pending .site-header,
.vp-pending main,
.vp-pending .site-footer { visibility: hidden; }

.vp-on .site-header { display: none; }

/* ---------- Wallpaper (the .vp-scene layer vapor.js adds) ----------
   Sierra's "vaporwave oscilloscope" painting (source: vaporwave ideas/), at two
   sizes. cover keeps the sun centred; on wide screens the bust and scope sit at
   the edges, on phones the sun and pool. */
.vp-scene {
  position: fixed; inset: 0 0 var(--vp-task-h); z-index: 0;  /* ends at the taskbar */
  pointer-events: none;
  background: url(../img/vapor/wallpaper-1600.webp) 58% 50% / cover no-repeat;
}
@media (min-width: 1600px), (min-width: 1000px) and (min-resolution: 1.5dppx) {
  .vp-scene { background-image: url(../img/vapor/wallpaper-2560.webp); }
}

/* ---------- Scrollbars ----------
   Win95 style: wide, checkered track, beveled thumb and arrow buttons.
   Chromium/Safari draw all of it; Firefox can't widen or bevel a scrollbar,
   so it just gets the grey colours. */
[data-theme="vapor"] ::-webkit-scrollbar { width: 1.25rem; height: 1.25rem; }
[data-theme="vapor"] ::-webkit-scrollbar-track {
  background: repeating-conic-gradient(var(--w-hi) 0 25%, var(--surface) 0 50%) 0 0 / 2px 2px;
}
[data-theme="vapor"] ::-webkit-scrollbar-thumb,
[data-theme="vapor"] ::-webkit-scrollbar-button {
  background-color: var(--surface);
  box-shadow: inset 1px 1px var(--w-lite), inset -1px -1px var(--w-dark),
              inset 2px 2px var(--w-hi), inset -2px -2px var(--w-shadow);
}
[data-theme="vapor"] ::-webkit-scrollbar-thumb { min-height: 1.25rem; min-width: 1.25rem; }
[data-theme="vapor"] ::-webkit-scrollbar-corner { background: var(--surface); }
[data-theme="vapor"] ::-webkit-scrollbar-button:single-button {
  display: block; width: 1.25rem; height: 1.25rem;
  background-repeat: no-repeat; background-position: center; background-size: 0.5rem;
}
[data-theme="vapor"] ::-webkit-scrollbar-button:start:increment,
[data-theme="vapor"] ::-webkit-scrollbar-button:end:decrement { display: none; }
[data-theme="vapor"] ::-webkit-scrollbar-button:active {
  box-shadow: inset 1px 1px var(--w-shadow), inset -1px -1px var(--w-shadow);
  background-position: calc(50% + 1px) calc(50% + 1px);
}
[data-theme="vapor"] ::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 1.5 8 5.5H0z'/%3E%3C/svg%3E");
}
[data-theme="vapor"] ::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M4 6.5 0 2.5h8z'/%3E%3C/svg%3E");
}
[data-theme="vapor"] ::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 4 5.5 0v8z'/%3E%3C/svg%3E");
}
[data-theme="vapor"] ::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M6.5 4 2.5 0v8z'/%3E%3C/svg%3E");
}
@supports not selector(::-webkit-scrollbar) {
  [data-theme="vapor"], [data-theme="vapor"] * { scrollbar-color: var(--w-shadow) var(--w-lite); }
}

/* ---------- Win95 bevels ---------- */
/* Raised frame: windows, dialogs, menus */
.vp-win, .vp-dialog, .vp-startmenu {
  background: var(--surface);
  color: var(--text);
  padding: 3px;
  border: 1px solid;
  border-color: var(--w-lite) var(--w-dark) var(--w-dark) var(--w-lite);
  box-shadow: inset 1px 1px var(--w-hi), inset -1px -1px var(--w-shadow);
}
/* Raised button */
.vp-face, .vp-start, .vp-task, .vp-btn {
  background: var(--surface);
  border: 1px solid;
  border-color: var(--w-hi) var(--w-dark) var(--w-dark) var(--w-hi);
  box-shadow: inset -1px -1px var(--w-shadow), inset 1px 1px var(--w-lite);
}
/* At this site's 130% scale a 1px bevel reads as flat, so Start gets a
   heavier one: 2px white top-left, black + 2px grey bottom-right. */
.vp-start {
  box-shadow: inset 1px 1px var(--w-hi), inset -1px -1px var(--w-shadow), inset -2px -2px var(--w-shadow);
}
/* Pressed button */
.vp-ctrl:active .vp-face,
.vp-start:active, .vp-start[aria-expanded="true"],
.vp-task:active, .vp-task[aria-pressed="true"],
.vp-btn:active {
  border-color: var(--w-dark) var(--w-hi) var(--w-hi) var(--w-dark);
  box-shadow: inset 1px 1px var(--w-shadow), inset -1px -1px var(--w-lite);
}
/* Sunken field / shallow inset */
.vp-body {
  border: 1px solid;
  border-color: var(--w-shadow) var(--w-hi) var(--w-hi) var(--w-shadow);
  box-shadow: inset 1px 1px var(--w-dark), inset -1px -1px var(--w-lite);
}
.vp-tray, .vp-status > span {
  border: 1px solid;
  border-color: var(--w-shadow) var(--w-hi) var(--w-hi) var(--w-shadow);
}
.vp-tray { box-shadow: inset 1px 1px var(--w-dark), inset -1px -1px var(--w-lite); }  /* deeper, so it clearly sits in */

/* Win95-style dotted focus ring for the chrome (black on grey/gradient). */
.vp-ctrl:focus-visible, .vp-start:focus-visible, .vp-task:focus-visible, .vp-btn:focus-visible {
  outline: 0.125rem dotted var(--w-dark);
  outline-offset: -0.375rem;
}
.vp-win:focus { outline: none; }  /* the active title bar shows which window has focus */

/* ---------- Windows (stacked by default: phones and small screens) ---------- */
.vp-on body { padding-bottom: calc(var(--vp-task-h) + 0.75rem); }

.vp-win {
  position: relative; z-index: 1;  /* above the fixed wallpaper (z-index 0) */
  display: flex; flex-direction: column;
  margin: 0.75rem;
}
.vp-bar {
  display: flex; align-items: center; gap: 0.375rem;
  min-height: var(--vp-bar-h); padding-left: 0.375rem;
  background: var(--vp-title); color: #FFFFFF;
  font-weight: 700; font-size: 0.875rem;
  user-select: none; -webkit-user-select: none;
}
.vp-bar .vp-ico { width: 1.125rem; height: 1.125rem; flex: none; }
.vp-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Title-bar buttons, packed as in Win95: minimize and maximize touch, close
   sits 2px apart. Each is its face's width and the full bar tall. They only
   exist on the floating (mouse) desktop. */
.vp-ctrls { display: none; align-self: stretch; padding-right: 0.125rem; }
.vp-ctrl {
  width: 1.25rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--w-dark); cursor: pointer;
}
.vp-ctrl--close { margin-left: 0.125rem; }
.vp-face { width: 1.25rem; height: 1.125rem; display: inline-flex; align-items: center; justify-content: center; }
.vp-face svg { width: 0.625rem; height: 0.625rem; }

.vp-body { margin-top: 3px; background: var(--surface); }
.vp-win--doc .vp-body { background: var(--w-hi); }  /* Explorer / Notepad white */

.vp-status { display: flex; margin-top: 3px; padding-right: 1.25rem; font-size: 0.75rem; }
.vp-status > span { flex: 1; padding: 0.125rem 0.375rem; }
.vp-grip { display: none; }

/* Page content inside a window: drop the page-width container and big spacing. */
.vp-body > .container { max-width: none; margin: 0; padding: 1.25rem; }
.vp-body > #tools { padding-top: 1.25rem; }
.vp-body .section h2 { font-size: 1.5rem; }
.vp-body .hero { gap: 1.5rem; }
.vp-body .hero h1 { font-size: 2.25rem; }
.vp-body > .site-footer { margin: 0; border: 0; }
.vp-body .footer-inner,
.vp-body .copyright { max-width: none; padding-inline: 1.25rem; }
.vp-body .footer-inner { padding-block: 1.25rem; }
.vp-body .copyright { padding-bottom: 1.25rem; }
/* Project grid sized by the window, not the page. The !importants undo the
   1200px+ row-of-three spans in styles.css, which assume page width. */
.vp-body .grid-projects { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }
.vp-body .grid-projects > .project { grid-column: auto !important; }
.vp-body .grid-projects .photo { aspect-ratio: 4 / 3 !important; }

/* ---------- Image Viewer windows (created by vapor.js for Past Work photos) ---------- */
.vp-win--viewer .vp-body { overflow: hidden; }
.vp-viewer { display: flex; flex-direction: column; height: 100%; }
.vp-viewer-tools { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.5rem; }
.vp-viewer-tools .vp-btn {
  min-width: 0; min-height: 2.25rem;  /* ≥ 44px: viewers only exist at the 130% scale */
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0 0.75rem; font-size: 0.8125rem;
}
.vp-viewer-tools svg { width: 0.5rem; height: 0.5rem; }
.vp-viewer-count { margin-left: auto; font-size: 0.8125rem; }
.vp-viewer-stage {
  flex: 1; min-height: 0;
  margin: 0 0.5rem;
  background: var(--surface);  /* window grey around a photo that doesn't fill the frame */
  border: 1px solid;
  border-color: var(--w-shadow) var(--w-hi) var(--w-hi) var(--w-shadow);
}
.vp-viewer-stage img { width: 100%; height: 100%; object-fit: contain; }
.vp-viewer-caption { padding: 0.5rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }

/* ---------- Tool windows (vapor.js frames /webrfsim/ etc. on the desktop) ---------- */
.vp-win--app .vp-body { overflow: hidden; background: #1C222B; }  /* tool dark, no white flash while loading */
.vp-app { position: relative; height: 100%; }
/* color-scheme: dark makes the framed page see prefers-color-scheme: dark, so the
   tools (which follow it unless you've picked a theme in the tool) default to dark here. */
.vp-app iframe { display: block; width: 100%; height: 100%; border: 0; color-scheme: dark; background: #1C222B; }
/* Frames swallow pointer events, so a transparent cover takes them while a
   window is dragged/resized, and over inactive tool windows (click = bring forward). */
.vp-app-shield { display: none; position: absolute; inset: 0; }
.vp-dragging .vp-app-shield,
.vp-win--app:not(.is-active) .vp-app-shield { display: block; }
.vp-dragging, .vp-dragging * { user-select: none; -webkit-user-select: none; }
.vp-app-out {
  flex: none; align-self: center;
  margin-left: 0.5rem; padding-inline: 0.375rem;
  color: var(--link); font-size: 0.75rem;
}

/* ---------- Desktop icons (floating mode only) ---------- */
/* Six rows: the six site windows fill column 1, tool shortcuts column 2.
   (Explicit rows: auto-fill rows would size the grid's width before its height is known.) */
.vp-icons {
  display: none;
  position: fixed; z-index: 1;
  top: 0.5rem; left: 0.5rem;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, 4.75rem);
  grid-auto-columns: 5.5rem;
  gap: 0.25rem;
}
@media (max-height: 720px) {
  .vp-icons { grid-template-rows: repeat(3, 4.75rem); }
}
.vp-icon {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.25rem; background: none; border: 0; cursor: pointer;
  color: var(--w-hi); font: 0.75rem/1.2 var(--font-sans); text-align: center; text-decoration: none;
}
.vp-icon-img { position: relative; width: 2.25rem; height: 2.25rem; }
.vp-icon-img .vp-ico { width: 100%; height: 100%; }
.vp-shortcut { position: absolute; left: 0; bottom: 0; width: 0.75rem; height: 0.75rem; }
/* Desktop-teal backing (as Windows drew it) keeps white labels ≥ 4.5:1 over any wallpaper. */
.vp-icon-label { padding: 0.0625rem 0.25rem; background: var(--vp-desk); }
.vp-icon:hover .vp-icon-label,
.vp-icon:focus-visible .vp-icon-label { background: var(--vp-select); }
.vp-icon:focus-visible { outline: 0.125rem dotted var(--w-hi); outline-offset: 0; }

/* ---------- Taskbar ---------- */
.vp-taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  height: var(--vp-task-h);
  display: flex; align-items: stretch; gap: 0.25rem;
  padding: 0.1875rem;
  background: var(--surface);
  border-top: 1px solid var(--w-lite);
  box-shadow: inset 0 1px var(--w-hi);
}
.vp-start {
  flex: none;
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0 0.625rem 0 0.375rem;
  font: 700 0.9375rem var(--font-sans); color: var(--w-dark); cursor: pointer;
}
.vp-start .vp-ico { width: 1.375rem; height: 1.375rem; }
.vp-tasks {
  flex: 1; min-width: 0;
  display: flex; gap: 0.25rem;
  overflow-x: auto; scrollbar-width: none;
}
.vp-task {
  flex: 0 1 11rem; min-width: 2.75rem;
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0 0.5rem;
  font: 0.8125rem var(--font-sans); color: var(--w-dark); text-align: left; cursor: pointer;
}
.vp-task[hidden] { display: none; }
.vp-task .vp-ico { width: 1.125rem; height: 1.125rem; flex: none; }
.vp-task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-task[aria-pressed="true"] {
  font-weight: 700;
  /* the checkered "pushed" fill */
  background: repeating-conic-gradient(var(--w-hi) 0 25%, var(--surface) 0 50%) 0 0 / 2px 2px;
}
.vp-tray {
  flex: none;
  display: flex; align-items: center;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
}
@media (max-width: 640px) {
  /* Icons only; the title stays available to screen readers. */
  .vp-task { flex: none; justify-content: center; padding: 0; }
  .vp-task span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------- Start menu ---------- */
.vp-startmenu {
  position: fixed; z-index: 1001;
  left: 0.1875rem; bottom: calc(var(--vp-task-h) - 0.125rem);
  display: flex; min-width: 15rem;
  max-height: calc(100vh - var(--vp-task-h)); overflow-y: auto;
}
.vp-startmenu[hidden] { display: none; }
.vp-sm-banner {
  flex: none; width: 2rem;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 0.5rem;
  background: linear-gradient(0deg, #000080, #1084D0);  /* navy under the text */
  color: var(--w-hi);
}
.vp-sm-banner span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 700; font-size: 1.125rem; letter-spacing: 0.02em;
}
.vp-sm-banner b { color: var(--w-lite); font-weight: 400; }
.vp-sm-items { flex: 1; }
.vp-sm-items ul { list-style: none; margin: 0; padding: 0.125rem 0; }
.vp-sm-items ul + ul { border-top: 1px solid var(--w-shadow); box-shadow: inset 0 1px var(--w-hi); }
.vp-sm-item {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; min-height: 2.75rem;
  padding: 0 1.25rem 0 0.5rem;
  background: none; border: 0; cursor: pointer;
  color: var(--w-dark); font: 0.9375rem var(--font-sans); text-align: left; text-decoration: none;
}
.vp-sm-item .vp-ico { width: 1.5rem; height: 1.5rem; flex: none; }
.vp-sm-item:hover,
.vp-sm-item:focus-visible { background: var(--vp-select); color: var(--w-hi); outline: none; }

/* ---------- Shut Down dialog ---------- */
.vp-dialog { margin: auto; width: min(28rem, calc(100vw - 2rem)); }
.vp-dialog::backdrop { background: rgba(0, 0, 0, 0.25); }
.vp-dialog .vp-ctrls { display: flex; }
.vp-dialog-body { padding: 1.25rem 1rem 1rem; }
.vp-sd { display: flex; gap: 1rem; align-items: flex-start; }
.vp-ico--big { flex: none; width: 2.5rem; height: 2.5rem; }
.vp-sd fieldset { border: 0; margin: 0; padding: 0; }
.vp-sd legend { padding: 0; margin-bottom: 0.25rem; font-weight: 600; }
.vp-sd label { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; cursor: pointer; }
.vp-sd input { width: 1.125rem; height: 1.125rem; margin: 0; flex: none; accent-color: var(--vp-select); }
.vp-dialog-btns { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1rem; }
.vp-btn {
  min-width: 6rem; min-height: 2.75rem;
  font: 600 0.9375rem var(--font-sans); color: var(--w-dark); cursor: pointer;
}

/* ---------- Floating desktop (big enough screens) ----------
   Must match FLOAT in vapor.js. */
@media (min-width: 800px) and (min-height: 500px) {
  [data-theme="vapor"] { --vp-task-h: 1.925rem; }
  html.vp-on { overflow: hidden; }
  .vp-on body { padding-bottom: 0; }

  .vp-win { position: fixed; margin: 0; }
  .vp-win.vp-min, .vp-win.vp-closed { display: none; }
  .vp-win.vp-max { left: 0; top: 0; width: 100%; height: calc(100% - var(--vp-task-h)); }
  .vp-win:not(.is-active) .vp-bar { background: var(--vp-title-off); }

  .vp-bar { touch-action: none; }
  .vp-ctrls { display: flex; }
  .vp-body { flex: 1; min-height: 0; overflow: auto; }
  .vp-grip {
    display: block; position: absolute; right: 3px; bottom: 3px;
    width: 1rem; height: 1rem; cursor: nwse-resize; touch-action: none;
    background: linear-gradient(135deg,
      transparent 0 40%, var(--w-hi) 40% 45%, var(--w-shadow) 45% 55%,
      transparent 55% 65%, var(--w-hi) 65% 70%, var(--w-shadow) 70% 80%, transparent 80%);
  }
  .vp-icons { display: grid; }
}