/* ------------------------------------------------------------------
   Playground — always exactly one screen, no scrolling.
   The 1920×1200 Figma frame is scaled to fit the window (see script.js).
------------------------------------------------------------------- */
html:has(.pg-body) { scroll-behavior: auto; }
.pg-body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  background: #fff url("assets/pg-bg.webp") center / cover no-repeat;
}
.pg { position: fixed; inset: 0; overflow: hidden; }
.pg__canvas {
  --s: 1;
  /* windows are scaled by --s; dividing keeps every outline exactly 1 screen pixel */
  --bw: calc(1px / var(--s));
  --line: #b5b0af;
  --ring: inset 0 0 0 var(--bw) var(--line);
  position: absolute;
  inset: 0;
}
/* every window/label keeps its Figma size × one screen scale (set by script.js);
   its position is spread proportionally over the whole screen */
.pg__canvas > * { transform-origin: 0 0; }

/* "Welcome to my playground!  ✥ DRAG TO EXPLORE" */
.pg-guide {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  user-select: none;
}
.pg-guide__title { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; }
.pg-guide__hint { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 23px; letter-spacing: -0.02em; color: var(--grey); }
.pg-guide__icon { display: grid; place-items: center; width: 29.698px; height: 29.698px; }
.pg-guide__icon img { transform: rotate(45deg); }

/* ------------------------------------------------------------------
   Window (macOS-style)
------------------------------------------------------------------- */
.win {
  --line: #b5b0af;
  --panel: #ececec;
  position: absolute;
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .15));
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.win--flat { filter: none; }
.win.is-dragging { cursor: grabbing; }
.win[hidden] { display: none; }

.win__title {
  height: 47px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 21px;
  background: var(--panel);
  border: 0; box-shadow: var(--ring);
  border-radius: 20px 20px 0 0;
}
.win__title h2 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
.win__ctrl { display: flex; align-items: center; gap: 8px; padding: 0 8px; height: 14px; }
.win__ctrl i { width: 14px; height: 14px; border-radius: 50%; border: .5px solid rgba(0, 0, 0, .2); background: #ff5f57; }
.win__ctrl i:nth-child(2) { background: #febc2e; }
.win__ctrl i:nth-child(3) { background: #28c840; }
/* red = close (plain arrow cursor on hover, like macOS; the × glyph is the signifier) */

.win__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 21px;
  background: var(--panel);
  border: 0; box-shadow: var(--ring);
  border-radius: 0 0 20px 20px;
}
.win__scroll {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-x: clip;
  overflow-y: auto;
  scrollbar-width: none;
  cursor: auto;
}
.win__scroll::-webkit-scrollbar { display: none; }

.win__meta {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px;
  background: #fff;
  border: 0; box-shadow: var(--ring);
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--grey);
}
.win__info { flex: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; letter-spacing: -0.01em; }
.win__more { display: flex; align-items: center; gap: 5px; font-weight: 500; }
.win__info > p:not(.win__more) { font-size: 16.5px; line-height: 1.25; }
.win__more img { transform: rotate(-90deg); margin: 0 2px; }   /* as in Figma: ▼ */

.win__media { position: relative; flex: none; width: 100%; overflow: hidden; border: 0; box-shadow: var(--ring); border-radius: 5px; }

/* image grids */
.win__grid { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.win__grid > * { position: relative; display: block; width: 100%; border: 0; box-shadow: var(--ring); border-radius: 5px; object-fit: cover; overflow: hidden; }
.win__photos { flex: none; overflow-y: auto; overflow-x: clip; scrollbar-width: none; cursor: auto; }
.win__photos::-webkit-scrollbar { display: none; }
.win__grid--photos > * { aspect-ratio: 4 / 3; }
.win__grid--square > * { aspect-ratio: 1; }
.win__grid--3d > * { height: 145px; }
.crop img { position: absolute; max-width: none; }

.win__book { position: relative; flex: none; height: 312px; overflow: hidden; }
.win__book img { position: absolute; left: calc(50% + .5px); top: calc(50% - 18.5px); width: 533px; height: 379px; transform: translate(-50%, -50%); object-fit: cover; }

/* ------------------------------------------------------------------
   Notes window ("Nice to Meet You ★")
------------------------------------------------------------------- */
.win__title--note { height: 50px; gap: 6px; padding: 0 21px; }
.win__title--note h2 { margin-left: 6px; }
.win__note-icon { width: 40px; height: 40px; margin: -7px; }   /* 26px icon with its glow (inset -26.92%) */
.note { display: flex; }
.note__side {
  flex: none;
  width: 146px;
  min-height: 516px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 14px;
  background: var(--panel);
  border: 0; box-shadow: var(--ring);
  border-radius: 0 0 0 20px;
}
.note__item { display: flex; flex-direction: column; gap: 8px; width: 118px; cursor: pointer; }
/* Figma: hover → light-grey pill with 5px padding (Smart Animate 400ms ease-out) */
.note__label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 35px;
  padding: 0;
  border-radius: 5px;
  background: rgba(229, 229, 231, 0);
  transition: background-color .4s cubic-bezier(0, 0, .58, 1), padding .4s cubic-bezier(0, 0, .58, 1);
}
.note__item:hover .note__label,
.note__item[aria-selected="true"] .note__label { padding: 5px; background: #e5e5e7; }   /* hover + the tab that is showing */
.note__name { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.note__sub { font-size: 11px; letter-spacing: -0.01em; color: var(--grey); }
.note__body {
  flex: 1;
  min-height: 516px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 21px;
  background: #fff;
  border: 0; box-shadow: var(--ring);
  border-radius: 0 0 20px 0;
  cursor: auto;
  user-select: text;
}
.note__date { text-align: center; font-size: 13px; letter-spacing: -0.01em; color: var(--grey); }
.note__content { display: flex; flex-direction: column; gap: 20px; color: #000; }
.note__text { display: flex; flex-direction: column; gap: 5px; }
.note__text h3 { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.note__text p, .note__contact { font-size: 15px; letter-spacing: -0.01em; }
.note__logo { position: relative; width: 329px; height: 223px; border: 0; border-radius: 5px; overflow: hidden; }
.note__logo-in { position: absolute; left: 50%; top: calc(50% - .5px); width: 100%; height: 244px; transform: translate(-50%, -50%); overflow: hidden; border-radius: 5px; }
/* logo: 9 frames, one every 250ms (Figma "After delay 250ms" loop) */
.note__logo-f { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.note__logo-f.is-on { visibility: visible; }

.note__body[hidden] { display: none; }
.note__body--interest { flex: none; width: 435px; }
.note__scroll { position: relative; height: 480px; width: 393px; overflow-x: clip; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 12px; color: #000; }
.note__scroll::-webkit-scrollbar { display: none; }
.note__scroll .note__date { flex: none; }
.note__scroll .note__text { flex: none; margin-bottom: 8px; }
.note__pics { flex: none; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 223px; gap: 12px; }
.note__pic { position: relative; overflow: hidden; border: 0; border-radius: 5px; }
.note__pic > span { position: absolute; overflow: hidden; }
.note__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.note__pic img.is-crop { inset: auto; object-fit: fill; }
.note__contact { white-space: nowrap; }

/* ------------------------------------------------------------------
   Guide popup ("Information about: playground")
------------------------------------------------------------------- */
.win__title--guide { border-radius: 12px 12px 0 0; background: linear-gradient(#e3e3e3, #d0d0d0); }
.win__ctrl--inactive i:nth-child(2), .win__ctrl--inactive i:nth-child(3) { background: #d2d2d2; }
.guide {
  position: relative;
  min-height: 170px;
  background: var(--panel);
  border: 0; box-shadow: var(--ring);
  border-radius: 0 0 12px 12px;
}
.guide__icon { position: absolute; left: 25.5px; top: 25.5px; width: 64px; height: 64px; overflow: visible; }
.guide__text {
  position: absolute;
  left: 109.5px;     /* 25.5 + 64 + 20 */
  top: 25.5px;
  width: 382px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.guide__head { font-weight: 500; }
.guide__ok {
  position: absolute;
  left: 402.5px;
  top: 108.5px;
  width: 80px;
  padding: 3px 20px;
  border-radius: 5px;
  background: linear-gradient(#719ff4, #2c68d8);
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .07));
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
}
.guide__ok:active { background: linear-gradient(#5f8fe8, #2459c2); }

/* "List view" */
.pg-list {
  position: absolute;
  z-index: 1000;
  width: 180px;
  height: 48px;
  border-radius: 50px;
  background: var(--black);
  color: #ececec;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  /* Figma: menu icon (24px) + label, 6px apart, centred */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7.2px 13.2px;
  white-space: nowrap;
  filter: drop-shadow(0 1.2px 1.2px rgba(0, 0, 0, .3)) drop-shadow(0 1.2px 1.8px rgba(0, 0, 0, .15));
  transition: background-color .15s ease-out, color .15s ease-out;
}
/* hover: a touch lighter; pressed: lighter again */
.pg-list:hover { background: #3a3a3a; }
.pg-list:active { background: #555; color: #fff; }

/* windows pop open one by one on load (script.js); hidden until their turn */
.js .pg .win:not(.is-open) { opacity: 0; pointer-events: none; }

/* the home page pins the active link's width for "HOME"; here PLAYGROUND is active */
.pg-body .nav__link.is-active { width: auto; }

/* scroll signifier: a soft, eased fade at the bottom edge. Its depth (--fade) follows how much is
   left to scroll, so it gently melts away as you reach the end instead of switching off. */
@property --fade { syntax: "<length>"; inherits: false; initial-value: 0px; }
.fade-scroll {
  --fade: 0px;
  transition: --fade .45s cubic-bezier(.25, .1, .25, 1);
  -webkit-mask-image: linear-gradient(to bottom,
    #000 calc(100% - var(--fade)),
    rgba(0, 0, 0, .86) calc(100% - var(--fade) * .8),
    rgba(0, 0, 0, .62) calc(100% - var(--fade) * .6),
    rgba(0, 0, 0, .36) calc(100% - var(--fade) * .4),
    rgba(0, 0, 0, .14) calc(100% - var(--fade) * .2),
    transparent 100%);
          mask-image: linear-gradient(to bottom,
    #000 calc(100% - var(--fade)),
    rgba(0, 0, 0, .86) calc(100% - var(--fade) * .8),
    rgba(0, 0, 0, .62) calc(100% - var(--fade) * .6),
    rgba(0, 0, 0, .36) calc(100% - var(--fade) * .4),
    rgba(0, 0, 0, .14) calc(100% - var(--fade) * .2),
    transparent 100%);
}
.fade-scroll.is-scrolling { transition: none; }

/* Logo redesign: stacked images that dissolve into each other */
.win__fade img { position: absolute; left: -1px; top: -1px; width: 504px; height: 336px; object-fit: cover; opacity: 0; }
.win__fade img.is-on { opacity: 1; }

/* where two outlined parts meet, draw the line once (title bar's bottom / sidebar's right edge) */
.win__main, .note__side, .guide {
  box-shadow: inset var(--bw) 0 0 var(--line), inset calc(var(--bw) * -1) 0 0 var(--line), inset 0 calc(var(--bw) * -1) 0 var(--line);
}
.note__body { box-shadow: inset calc(var(--bw) * -1) 0 0 var(--line), inset 0 calc(var(--bw) * -1) 0 var(--line); }
/* boxes holding images: the outline sits on top of the picture */
.win__media, .note__logo, .note__pic, .win__grid > .crop { position: relative; box-shadow: none; }
.win__media::after, .note__logo::after, .note__pic::after, .win__grid > .crop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  box-shadow: var(--ring);
  pointer-events: none;
}
/* plain <img> tiles: a 1px padding ring in the line colour acts as the border */
.win__grid > img { box-shadow: none; padding: var(--bw); background: var(--line); }

/* hover feedback: traffic-light dots and "okii" darken slightly */
.win__ctrl i { transition: filter .15s ease-out; }
.win__ctrl i:hover { filter: brightness(.82); }
/* okii: only the blue gets darker (an inset tint sits under the text), the label stays white */
.guide__ok { transition: box-shadow .15s ease-out; }
.guide__ok:hover { box-shadow: inset 0 0 0 40px rgba(0, 0, 0, .12); }

/* contact lines (📍 🌐 📥): a little more air between them */
.note__contact { line-height: 1.6; }

/* ------------------------------------------------------------------
   Desktop files (Figma 1400:20380). A closed window shrinks into its file;
   one click selects it like Finder (blue name, dark backdrop behind the
   preview), a second click (or double-click) opens the window again.
------------------------------------------------------------------- */
.pg-file {
  position: absolute;
  z-index: 1;                 /* always under the windows */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
  text-align: center;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.pg-file:not(.is-shown) { visibility: hidden; pointer-events: none; }
.pg-file:focus-visible { outline: none; }
.pg-file__thumb { position: relative; display: block; border-radius: 4px; transition: box-shadow .12s, background-color .12s; }
.pg-file__thumb--frame {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: inset 0 0 0 .3px #b5b0af;
  filter: drop-shadow(0 3px 2.5px rgba(0, 0, 0, .12));
}
.pg-file__thumb--pic { overflow: hidden; box-shadow: inset 0 0 0 .4px #b5b0af, 0 3px 5px rgba(0, 0, 0, .12); }
/* the hairline is drawn on top of the picture (an inset shadow would sit underneath it) */
.pg-file__thumb--pic::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 .4px #b5b0af; pointer-events: none; }
.pg-file__thumb--pic img { position: relative; z-index: -1; }
.pg-file__thumb--pic { isolation: isolate; }
.pg-file__crop { position: relative; display: block; overflow: hidden; }
.pg-file__crop img { position: absolute; max-width: none; }
.pg-file__logo { position: absolute; left: 0; top: 50%; width: 131.6px; height: 97.6px; transform: translateY(calc(-50% - .2px)); overflow: hidden; border-radius: 2px; }
.pg-file__logo img { position: absolute; width: auto; height: auto; }
.pg-file__stack { display: inline-grid; }
.pg-file__stack > * { grid-area: 1 / 1; }
.pg-file__screen { position: relative; width: 132px; height: 74px; margin: 8.96px 0 0 9px; object-fit: cover; }  /* positioned so it paints over the monitor */
.pg-file__name {
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  color: var(--black);
  white-space: nowrap;
  text-shadow: 0 3px 5px rgba(0, 0, 0, .12);
  transition: background-color .12s, color .12s;
}
/* selected — like Finder: a dark rounded backdrop around the preview, name in a blue pill */
.pg-file.is-selected .pg-file__thumb--frame { box-shadow: inset 0 0 0 .3px #b5b0af, 0 0 0 6px rgba(0, 0, 0, .26); }
.pg-file.is-selected .pg-file__thumb--pic { box-shadow: inset 0 0 0 .4px #b5b0af, 0 0 0 6px rgba(0, 0, 0, .26); }
.pg-file.is-selected .pg-file__thumb--icon { background: rgba(0, 0, 0, .26); box-shadow: 0 0 0 6px rgba(0, 0, 0, .26); }
.pg-file.is-selected .pg-file__name { background: #2c63dd; color: #fff; text-shadow: none; }
.pg-file:focus-visible .pg-file__name { outline: 2px solid #2c63dd; outline-offset: 1px; }
.pg-file.is-dragging { z-index: 2; }

/* ------------------------------------------------------------------
   Traffic lights: glyphs appear on hover so each dot says what it does
   (red ×  close · yellow −  minimise · green ⤢  zoom), like macOS
------------------------------------------------------------------- */
.win__ctrl i { background-position: center; background-repeat: no-repeat; background-size: 14px 14px; background-origin: border-box; }   /* centre the glyph on the whole dot, border included */
.win:not(.win--guide) .win__ctrl i:nth-child(2) { cursor: pointer; }
.win__ctrl:not(.win__ctrl--inactive):hover i:nth-child(1) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.6 4.6l4.8 4.8M9.4 4.6l-4.8 4.8' stroke='rgba%280%2C0%2C0%2C.55%29' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.win__ctrl i:nth-child(2) { background-position: calc(50% - .1px) 50%; }   /* a hair left, so the − sits optically centred */
.win__ctrl:not(.win__ctrl--inactive):hover i:nth-child(2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.9 7h6.2' stroke='rgba%280%2C0%2C0%2C.55%29' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.win--zoomable .win__ctrl:hover i:nth-child(3),
.zv__win .win__ctrl:hover i:nth-child(3) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.2 4.2h4.3L4.2 8.5zM9.8 9.8H5.5l4.3-4.3z' fill='rgba%280%2C0%2C0%2C.55%29'/%3E%3C/svg%3E"); }
.win--zoomable .win__ctrl i:nth-child(3) { cursor: pointer; }

/* ------------------------------------------------------------------
   Zoom popup (green dot on a picture window): the window grows into a
   big viewer — its More Info text on top, the picture filling the stage
------------------------------------------------------------------- */
.zv {
  --panel: #ececec; --line: #b5b0af; --bw: 1px;
  --ring: inset 0 0 0 var(--bw) var(--line);
  position: fixed; inset: 0; z-index: 500;   /* over the nav; the custom cursor stays on top */
  display: grid; place-items: center;
}
.zv[hidden] { display: none; }
.zv__backdrop { position: absolute; inset: 0; background: rgba(30, 30, 30, .32); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.zv__win {
  position: relative; display: flex; flex-direction: column;
  transform-origin: 0 0;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .25)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .2));
  outline: none;
}
.zv__win .win__ctrl .zv__close { cursor: pointer; }
.zv__win .win__ctrl .zv__close:first-child { cursor: default; }
.zv__body {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 18px 21px;
  background: var(--panel); box-shadow: var(--ring);
  border-radius: 0 0 20px 20px;
}
.zv:not(.zv--single) .zv__body { padding-bottom: 44px; }
/* the window's own "More Info", set larger */
.zv__info { align-self: stretch; display: flex; flex-direction: column; gap: 8px; letter-spacing: -0.01em; }
.zv__info[hidden] { display: none; }
.zv__more { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 500; }
.zv__more img { transform: rotate(-90deg); margin: 0 2px; }   /* ▼, as in the window */
.zv__desc { font-size: 21px; line-height: 1.3; max-width: 60em; }
/* the stage is sized to the picture's own proportions, so it fills edge to edge */
.zv__stage { position: relative; flex: none; overflow: hidden; border-radius: 5px; background: #fff; }
.zv__win.is-snap, .zv__win.is-snap .zv__stage { transition: none; }
.zv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* an odd-shaped picture is trimmed (centred) to the window's shape */
.zv__stage::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: var(--ring); pointer-events: none; }
/* Figma "Left" / "right" (1519:6745 / 1519:6746): white pill, apple-line border, apple-button shadow */
.zv__nav {
  position: absolute; z-index: 4; top: 50%; translate: 0 -50%;
  display: flex; align-items: center; padding: 10px;
  border: 1px solid #b5b0af; border-radius: 100px;
  background: var(--white);
  box-shadow: 0 0 6px 1px rgba(0, 0, 0, .07);
  cursor: pointer;
  transition: background-color .15s ease-out, scale .15s ease-out;
}
.zv__nav:hover { background: #f6f6f6; }
.zv__nav:active { scale: .94; }
.zv__nav img { display: block; }
.zv__nav--prev { left: 16px; }    /* on the picture, so they clearly move the picture, not the window */
.zv__nav--next { right: 16px; }
.zv__nav--next img { transform: rotate(180deg) scaleY(-1); }
.zv__count { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-family: var(--mono); font-size: 14px; letter-spacing: -0.02em; color: var(--grey); }
.zv--single .zv__nav, .zv--single .zv__count { display: none; }

/* notes window zoom: the real window grows to fill the desktop under the nav bar */
.pg-dim { position: fixed; inset: 0; background: rgba(30, 30, 30, .22); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pg-dim[hidden] { display: none; }
.win.is-zoomed { cursor: default; }
.pg-list { transition: opacity .3s ease; }
.has-zoomed-note .pg-list { opacity: 0; pointer-events: none; }   /* the List view pill would sit on top of the zoomed note */

/* Draw My Life: play button on the thumbnail → the YouTube player takes its place */
.win__video { cursor: auto; }
.win__play {
  position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -50%;
  display: grid; place-items: center; width: 64px; height: 64px; padding: 0 0 0 4px;
  border: 1px solid #b5b0af; border-radius: 100px;
  background: var(--white); box-shadow: 0 0 6px 1px rgba(0, 0, 0, .07), 0 4px 14px rgba(0, 0, 0, .12);
  cursor: pointer;
  transition: scale .2s cubic-bezier(.2, .8, .2, 1), background-color .15s ease-out;
}
.win__play:hover { scale: 1.08; background: #f6f6f6; }
.win__play:active { scale: .96; }
.win__yt { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; }
.win__video.is-playing .win__play { display: none; }
.zv__stage .win__yt { z-index: 1; }
/* zoomed notes window: the whole desktop (nav included) goes under the dim, like the popup */
.pg:has(.pg__canvas.has-zoomed-note) { z-index: 400; }
/* pictures open the zoom popup on click */
.win--zoomable:not(.win--note) :is(.win__media, .win__grid > *, .win__book) { cursor: zoom-in; }
.win__play { cursor: pointer; }

/* zoomed notes window = the picture popup's box: 47px title bar, popup text sizes
   (body 15px × 1.4 = 21px, like the popup description), filling the height */
.win--note.is-zoomed { --line: #b5b0af; --bw: 1px; --ring: inset 0 0 0 1px #b5b0af; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .25)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .2)); }
.win--note.is-zoomed .win__title--note { height: 47px; }
.win--note.is-zoomed .note { flex: 1; min-height: 0; }
.win--note.is-zoomed .note__side { zoom: 1.4; min-height: 0; }
.win--note.is-zoomed .note__body { min-height: 0; }
.win--note.is-zoomed .note__body > *, .win--note.is-zoomed .note__body--interest .note__scroll { zoom: 1.4; }
.win--note.is-zoomed .note__body--interest { flex: 1; width: auto; }
.win--note.is-zoomed .note__scroll { height: auto; flex: 1; min-height: 0; }
.zv__stage .win__play { z-index: 3; width: 84px; height: 84px; }   /* the play button again, bigger, on the zoomed picture */
.zv__stage video.win__yt { background: #000; }

/* zoomed text (picture popup + zoomed notes window): the -0.01em tracking that suits the
   small window text looks cramped at the bigger sizes, so open it up a touch */
.zv__info, .zv__more, .zv__desc { letter-spacing: 0; }
.win--note.is-zoomed :is(.note__name, .note__sub, .note__date, .note__text h3, .note__text p, .note__contact) { letter-spacing: 0; }