.gallery-canvas {
  --light-x: -0.25;
  --shadow-a: 0.5;
  --rail-tone: linear-gradient(rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.15));
  --rail-profile: rgb(255 255 255 / 0.26) 0, rgb(255 255 255 / 0) 22%, rgb(0 0 0 / 0) 70%, rgb(0 0 0 / 0.3) 100%;
  --rail-profile-lit: rgb(255 255 255 / 0.6) 0, rgb(255 255 255 / 0) 52%, rgb(0 0 0 / 0) 70%, rgb(0 0 0 / 0.3) 100%;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bevel-lit: #ffffff;
  --bevel-soft: #b6b3ac;
  --bevel-shade: #8e8980;
  --bevel-top: var(--bevel-shade);
  --bevel-right: var(--bevel-soft);
  --bevel-bottom: var(--bevel-lit);
  --bevel-left: var(--bevel-lit);
  --side-top: rgb(255 255 255 / 0.12);
  --side-bottom: rgb(0 0 0 / 0.45);
  --side-left: rgb(0 0 0 / 0.3);
  --side-right: rgb(0 0 0 / 0.08);
  --reveal-top: rgb(0 0 0 / 0.5);
  --reveal-bottom: rgb(255 255 255 / 0.06);
  --reveal-left: rgb(0 0 0 / 0.08);
  --reveal-right: rgb(0 0 0 / 0.4);
  --shadow-ink: color-mix(in oklab, var(--wall, #000) 30%, #000);
  --shadow-contact: color-mix(in oklab, var(--shadow-ink) calc(var(--shadow-a) * 150%), transparent);
  --shadow-cast: color-mix(in oklab, var(--shadow-ink) calc(var(--shadow-a) * 90%), transparent);
  --shadow-ambient: color-mix(in oklab, var(--shadow-ink) calc(var(--shadow-a) * 45%), transparent);
  --occlusion: rgb(0 0 0 / 0.38);
  --to-wall-y: linear-gradient(180deg, transparent 25%, var(--occlusion));
  --to-wall-x: linear-gradient(90deg, transparent 25%, var(--occlusion));
  --wash-glow: rgb(255 255 255 / 0.1);
  --wash-lift: rgb(255 255 255 / 0.03);
  --wash-shade: rgb(0 0 0 / 0.35);
  --wash-floor: rgb(0 0 0 / 0.14);
  --wash-run: calc((100vw + 100dvh) * 0.7071);
  --wash-skip: calc(var(--canvas-overhang) * 0.7071);
  --paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0 0 0 -0.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --paper-size: 120px;
}

.gallery-canvas[data-tone="light"] {
  --shadow-a: 0.34;
  --wash-glow: rgb(255 255 255 / 0.25);
  --wash-lift: rgb(255 255 255 / 0.08);
  --wash-shade: rgb(0 0 0 / 0.19);
  --wash-floor: rgb(0 0 0 / 0.08);
}

.gallery-canvas[data-light="right"] {
  --light-x: -0.8;
  --light-wash:
    radial-gradient(calc(100vw * 1.4142) calc(100dvh * 1.4142) at 100% var(--canvas-overhang), var(--wash-glow), rgb(255 255 255 / 0) 60%),
    linear-gradient(225deg, var(--wash-lift) var(--wash-skip), rgb(0 0 0 / 0) calc(var(--wash-skip) + var(--wash-run) * 0.45), var(--wash-shade) calc(var(--wash-skip) + var(--wash-run))),
    linear-gradient(180deg, rgb(0 0 0 / 0) calc(var(--canvas-overhang) + 100dvh * 0.55), var(--wash-floor) calc(var(--canvas-overhang) + 100dvh));
  --bevel-right: var(--bevel-shade);
  --side-left: rgb(0 0 0 / 0.5);
  --side-right: rgb(255 255 255 / 0.1);
  --reveal-left: rgb(255 255 255 / 0.06);
  --reveal-right: rgb(0 0 0 / 0.5);
}

.gallery-wall {
  --grain-size: calc(160px * var(--canvas-zoom, 1));
  background-color: var(--wall);
  background-image: var(--grain);
  background-size: var(--grain-size) var(--grain-size);
  background-blend-mode: overlay;
  transition: background-color var(--duration-shape) ease;
}

.gallery-canvas.is-zooming .gallery-wall {
  transition:
    background-color var(--duration-shape) ease,
    background-size var(--duration-shape) var(--ease-settle),
    background-position var(--duration-shape) var(--ease-settle);
}

.gallery-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--light-wash, none);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-shape) ease;
}

.gallery-canvas[data-light="right"]::after { opacity: 1; }

.frame {
  position: relative;
  width: 100%;
  height: var(--frame-h);
  box-shadow:
    calc(var(--d) * var(--light-x) * 0.1) calc(var(--d) * 0.1) calc(var(--d) * 0.22) calc(var(--d) * 0.04) var(--shadow-contact),
    calc(var(--d) * var(--light-x) * 0.8) calc(var(--d) * 0.6) calc(var(--d) * 0.9) var(--shadow-cast),
    calc(var(--d) * var(--light-x) * 1.4) calc(var(--d) * 1.3) calc(var(--d) * 2.6) var(--shadow-ambient);
}

.frame,
.frame-body { transform-style: preserve-3d; }

.frame-body {
  position: absolute;
  inset: 0;
  transform: translateZ(var(--d));
}

.frame-rail,
.frame-side,
.frame-reveal {
  position: absolute;
  display: block;
  pointer-events: none;
}

.frame-side-top,
.frame-side-bottom,
.frame-reveal-top,
.frame-reveal-bottom {
  transform-origin: top;
  transform: rotateX(-90deg);
}

.frame-side-left,
.frame-side-right,
.frame-reveal-left,
.frame-reveal-right {
  transform-origin: left;
  transform: rotateY(90deg);
}

.frame-side-top,
.frame-side-bottom {
  left: 0;
  width: 100%;
  height: var(--d);
}

.frame-side-left,
.frame-side-right {
  top: 0;
  width: var(--d);
  height: 100%;
}

.frame-side-top { top: 0; background: var(--to-wall-y), linear-gradient(var(--side-top), var(--side-top)), var(--tex-x); }
.frame-side-bottom { top: 100%; background: var(--to-wall-y), linear-gradient(var(--side-bottom), var(--side-bottom)), var(--tex-x); }
.frame-side-left { left: 0; background: var(--to-wall-x), linear-gradient(var(--side-left), var(--side-left)), var(--tex-y); }
.frame-side-right { left: 100%; background: var(--to-wall-x), linear-gradient(var(--side-right), var(--side-right)), var(--tex-y); }

.frame-reveal-top,
.frame-reveal-bottom {
  left: var(--f);
  width: calc(100% - 2 * var(--f));
  height: var(--r);
}

.frame-reveal-left,
.frame-reveal-right {
  top: var(--f);
  width: var(--r);
  height: calc(100% - 2 * var(--f));
}

.frame-reveal-top { top: var(--f); background: var(--to-wall-y), linear-gradient(var(--reveal-top), var(--reveal-top)), var(--tex-x); }
.frame-reveal-bottom { top: calc(100% - var(--f)); background: var(--to-wall-y), linear-gradient(var(--reveal-bottom), var(--reveal-bottom)), var(--tex-x); }
.frame-reveal-left { left: var(--f); background: var(--to-wall-x), linear-gradient(var(--reveal-left), var(--reveal-left)), var(--tex-y); }
.frame-reveal-right { left: calc(100% - var(--f)); background: var(--to-wall-x), linear-gradient(var(--reveal-right), var(--reveal-right)), var(--tex-y); }

.frame[data-finish="none"] :is(.frame-side, .frame-reveal) { display: none; }

.frame[data-x="after"] :is(.frame-side-right, .frame-reveal-left),
.frame[data-x="before"] :is(.frame-side-left, .frame-reveal-right),
.frame[data-x="across"] :is(.frame-side-left, .frame-side-right),
.frame[data-y="after"] :is(.frame-side-bottom, .frame-reveal-top),
.frame[data-y="before"] :is(.frame-side-top, .frame-reveal-bottom),
.frame[data-y="across"] :is(.frame-side-top, .frame-side-bottom) { display: none; }

.frame-rail-top,
.frame-rail-bottom {
  left: 0;
  width: 100%;
  height: var(--f);
}

.frame-rail-left,
.frame-rail-right {
  top: 0;
  width: var(--f);
  height: 100%;
}

.frame-rail-top {
  top: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--f)) 100%, var(--f) 100%);
  background: linear-gradient(180deg, var(--rail-profile)), var(--rail-tone), var(--tex-x);
}

.frame-rail-right {
  right: 0;
  clip-path: polygon(0 var(--f), 100% 0, 100% 100%, 0 calc(100% - var(--f)));
  background: linear-gradient(270deg, var(--rail-profile)), var(--rail-tone), var(--tex-y);
}

.frame-rail-bottom {
  bottom: 0;
  clip-path: polygon(var(--f) 0, calc(100% - var(--f)) 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, var(--rail-profile-lit)), var(--rail-tone), var(--tex-x);
}

.frame-rail-left {
  left: 0;
  clip-path: polygon(0 0, 100% var(--f), 100% calc(100% - var(--f)), 0 100%);
  background: linear-gradient(270deg, var(--rail-profile-lit)), var(--rail-tone), var(--tex-y);
}

.frame-inner {
  position: absolute;
  inset: var(--f);
  background: var(--paper) 0 0 / var(--paper-size) var(--paper-size), var(--mat-colour);
  transform: translateZ(calc(-1 * var(--r)));
  box-shadow: inset calc(var(--d) * var(--light-x) * 0.4) calc(var(--d) * 0.3) calc(var(--d) * 0.5) calc(var(--d) * -0.15) rgb(0 0 0 / 0.4);
}

.frame-inner img,
.frame-skeleton {
  position: absolute;
  top: var(--mt);
  left: var(--ml);
  display: block;
  width: var(--aw);
  height: var(--ah);
  pointer-events: none;
  transition: opacity var(--duration-reveal) var(--ease-arrive);
}

.frame-inner img { -webkit-user-drag: none; }

.frame-skeleton {
  background: color-mix(in oklab, var(--mat-colour) 76%, #7a7a7a);
  opacity: 0;
}

.frame[data-mount="none"] .frame-skeleton { background: color-mix(in oklab, var(--wall) 80%, #8a8a8a); }

.canvas-piece.is-loading .frame-inner img { opacity: 0; }

.canvas-piece.is-loading .frame-skeleton { opacity: 1; }

.frame-bevel {
  --overlap: calc(1px / var(--canvas-zoom, 1));
  position: absolute;
  top: calc(var(--mt) - var(--b));
  left: calc(var(--ml) - var(--b));
  display: block;
  width: calc(var(--aw) + 2 * var(--b));
  height: calc(var(--ah) + 2 * var(--b));
  border: calc(var(--b) + var(--overlap)) solid;
  border-color: var(--bevel-top) var(--bevel-right) var(--bevel-bottom) var(--bevel-left);
  pointer-events: none;
}

.frame:not([data-mount="window"]) .frame-bevel { display: none; }

.frame-face {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.frame-glass {
  position: absolute;
  inset: var(--f);
  display: block;
  opacity: 0.1;
  background:
    radial-gradient(ellipse 165% 138.6% at 90% 0%, rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.3) 40%, rgb(255 255 255 / 0) 75%),
    linear-gradient(215deg, rgb(255 255 255 / 0.38), rgb(255 255 255 / 0) 55%),
    linear-gradient(180deg, rgb(232 240 246 / 0.15), rgb(232 240 246 / 0.0375) 45%, rgb(0 0 0 / 0.03));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16), inset -1px 0 0 rgb(255 255 255 / 0.08);
  pointer-events: none;
}

.frame[data-finish="none"] .frame-glass { display: none; }

.frame[data-mount="float"] .frame-inner { transform-style: preserve-3d; }

.frame[data-mount="float"] img {
  --lift: calc(var(--r) * 0.6);
  transform: translateZ(var(--lift));
  box-shadow:
    calc(var(--lift) * var(--light-x) * 0.8) calc(var(--lift) * 0.7) calc(var(--lift) * 1.4) rgb(0 0 0 / 0.38),
    calc(var(--lift) * var(--light-x) * 0.2) calc(var(--lift) * 0.15) calc(var(--lift) * 0.3) rgb(0 0 0 / 0.25);
}

.frame[data-finish="none"] .frame-rail { display: none; }

.frame[data-finish="none"] .frame-inner { box-shadow: none; }

.frame[data-mount="none"] .frame-inner { background: none; }

@media (hover: none) and (pointer: coarse) {
  .gallery-plane,
  .canvas-piece,
  .frame,
  .frame-body,
  .frame[data-mount="float"] .frame-inner { transform-style: flat; }

  .frame-body,
  .frame-inner,
  .frame[data-mount="float"] img { transform: none; }

  .frame-side,
  .frame-reveal { display: none; }
}

.canvas-piece.is-selected .frame-body::after {
  --mark: var(--spacing-small);
  --mark-weight: var(--stroke-large);
  --mark-ink: linear-gradient(currentColor, currentColor);
  --mark-corner: var(--mark) var(--mark-weight), var(--mark-weight) var(--mark);
  content: "";
  position: absolute;
  inset: calc(-1 * var(--spacing-medium));
  color: var(--accent);
  background-image:
    var(--mark-ink), var(--mark-ink), var(--mark-ink), var(--mark-ink),
    var(--mark-ink), var(--mark-ink), var(--mark-ink), var(--mark-ink);
  background-repeat: no-repeat;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-size: var(--mark-corner), var(--mark-corner), var(--mark-corner), var(--mark-corner);
  pointer-events: none;
}

.gallery-canvas[data-marks="ink"] .canvas-piece.is-selected .frame-body::after { color: var(--content-inverse-primary); }

:root[data-theme="light"] .gallery-canvas[data-marks="ink"] .canvas-piece.is-selected .frame-body::after { color: var(--content-primary); }

.canvas-piece { cursor: pointer; }

.gallery { --frames-w: 320px; }

.frames-menu {
  --frames-top: var(--nav-top);
  position: fixed;
  z-index: 3;
  top: var(--frames-top);
  right: var(--chrome-inset);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: var(--nav-gap);
  border: var(--nav-border) solid var(--nav-edge);
  border-radius: calc(var(--nav-block) / 2);
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--effect-style-background-blur-overlay);
  backdrop-filter: var(--effect-style-background-blur-overlay);
  color: var(--content-primary);
  overflow: clip;
  transition:
    width var(--duration-slide) var(--ease-settle),
    height var(--duration-slide) var(--ease-settle),
    border-radius var(--duration-slide) var(--ease-settle),
    box-shadow var(--duration-fade) ease,
    scale var(--duration-fade) var(--ease-settle),
    translate var(--duration-shape) var(--ease-settle);
}

.frames-menu[data-menu="open"] {
  border-radius: var(--radius-xlarge);
  -webkit-backdrop-filter: var(--effect-style-background-blur-veil);
  backdrop-filter: var(--effect-style-background-blur-veil);
  box-shadow: var(--effect-style-drop-shadow-float);
  transition-duration: var(--duration-shape), var(--duration-shape), var(--duration-shape), var(--duration-fade), var(--duration-fade), var(--duration-shape);
}

.frames-menu[data-menu="open"][data-follow] {
  transition-property: border-radius, box-shadow, scale, translate;
  transition-duration: var(--duration-shape), var(--duration-fade), var(--duration-fade), var(--duration-shape);
}

.frames-menu[data-menu][data-dragging] { transition: none; }

.frames-menu[data-menu="closed"]:has(> .frames-toggle:active) {
  scale: 0.94;
  transition-duration: var(--duration-press);
}

.frames-menu[data-menu="closed"]:has(> .frames-toggle:focus-visible) {
  outline: var(--stroke-large) solid var(--accent);
  outline-offset: 3px;
}

.frames-toggle {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--spacing-xsmall);
  height: var(--nav-h);
  padding: 0 var(--spacing-small);
  border: 0;
  border-radius: var(--nav-inner);
  background: transparent;
  color: var(--nav-ink-on);
  font: var(--text-subheadline-medium);
  letter-spacing: var(--text-subheadline-medium-tracking);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--duration-hover) ease, opacity var(--duration-fade) ease;
}

.frames-toggle:focus-visible { outline: none; }

.frames-menu[data-menu="open"] > .frames-toggle {
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--duration-step-aside);
}

.frames-chevron {
  flex: none;
  width: var(--icon-xsmall);
  height: var(--icon-xsmall);
  color: var(--nav-icon);
}

.frames-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: var(--frames-w);
  max-height: calc(100svh - var(--frames-top) - var(--edge) - 2 * var(--nav-border) - var(--nav-block) - var(--spacing-small));
  visibility: hidden;
  opacity: 0;
  translate: 0 calc(-1 * var(--spacing-xsmall));
  transition:
    opacity var(--duration-step-aside) ease,
    translate var(--duration-shape) var(--ease-settle),
    visibility 0s linear var(--duration-step-aside);
}

.frames-menu[data-menu="open"] .frames-panel {
  visibility: visible;
  opacity: 1;
  translate: none;
  transition:
    opacity var(--duration-fade) ease var(--duration-press),
    translate var(--duration-shape) var(--ease-settle),
    visibility 0s;
}

.frames-grabber { display: none; }

.frames-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-small);
  padding: var(--spacing-xsmall) var(--spacing-xsmall) 0 var(--spacing-medium);
}

.frames-panel-head .frames-close {
  --button-edge: transparent;
  --button-icon: var(--icon-xsmall);
}

.frames-close .frames-chevron { color: currentColor; }

.frames-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xlarge);
  min-height: 0;
  padding: var(--spacing-small) var(--spacing-medium) var(--spacing-medium);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.frames-head,
.frames-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.frames-title {
  margin: 0;
  font: var(--text-body-medium);
  letter-spacing: var(--text-body-medium-tracking);
}

.frames-target,
.frames-note {
  margin: 0;
  font: var(--text-footnote-regular);
  letter-spacing: var(--text-footnote-regular-tracking);
  color: var(--content-secondary);
}

.frames-group h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-small);
  margin: 0;
  font: var(--text-subheadline-medium);
  letter-spacing: var(--text-subheadline-medium-tracking);
  color: var(--content-primary);
}

.frames-group h3 .frames-note { color: var(--content-tertiary); }

.frames-section {
  padding-top: var(--spacing-xlarge);
  border-top: var(--stroke-xsmall) solid var(--border-transparent);
}

.frames-group .button { width: 100%; }

.frames-seg {
  --seg-inset: var(--spacing-xxxsmall);
  position: relative;
  display: flex;
  gap: var(--seg-inset);
  padding: var(--seg-inset);
  border: var(--stroke-xsmall) solid var(--border-transparent);
  border-radius: var(--radius-max);
}

.frames-seg::before {
  content: "";
  position: absolute;
  top: var(--seg-inset);
  bottom: var(--seg-inset);
  left: var(--seg-inset);
  width: calc((100% - 2 * var(--seg-inset) - (var(--seg-count, 1) - 1) * var(--seg-inset)) / var(--seg-count, 1));
  border-radius: var(--radius-max);
  background: var(--background-overlay2);
  translate: calc(var(--seg-index, 0) * (100% + var(--seg-inset))) 0;
  pointer-events: none;
  transition: translate var(--duration-slide) var(--ease-glide);
}

.frames-seg button,
.frames-presets > * {
  border: 0;
  background: none;
  font: var(--text-footnote-medium);
  letter-spacing: var(--text-footnote-medium-tracking);
  color: var(--content-secondary);
  cursor: pointer;
}

.frames-seg button {
  position: relative;
  flex: 1;
  padding: var(--spacing-xsmall) var(--spacing-small);
  border-radius: var(--radius-max);
  transition: color var(--duration-hover) ease;
}

.frames-seg button[aria-pressed="true"] { color: var(--content-primary); }

.frames-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-xxsmall);
}

.frames-presets > * {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xsmall);
  padding: var(--spacing-xxsmall);
  border-radius: var(--radius-small);
  text-align: start;
  transition: background-color var(--duration-hover) ease, color var(--duration-hover) ease;
}

.frames-presets i {
  flex: 0 0 auto;
  width: var(--spacing-xlarge);
  height: var(--spacing-xlarge);
  padding: var(--stroke-xxlarge);
  border-radius: var(--radius-xxsmall);
  background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.frames-presets [aria-pressed="true"] {
  background: var(--background-overlay2);
  color: var(--content-primary);
}

.frames-swatches {
  --swatch-reach: var(--spacing-xxxsmall);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--swatch-reach));
}

.frames-swatch {
  position: relative;
  width: calc(var(--spacing-xlarge) + 2 * var(--swatch-reach));
  height: calc(var(--spacing-xlarge) + 2 * var(--swatch-reach));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.frames-swatch::before {
  content: "";
  position: absolute;
  inset: var(--swatch-reach);
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 0 0 var(--stroke-small) var(--border-transparent);
  outline: var(--stroke-medium) solid transparent;
  outline-offset: var(--stroke-large);
  transition: outline-color var(--duration-hover) ease;
}

.frames-swatch[aria-pressed="true"]::before { outline-color: var(--content-primary); }

body[data-view="canvas"][data-wall-ink="inverse"] .wordmark { color: var(--content-inverse-primary); }

.frames-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-xxsmall) var(--spacing-small);
  font: var(--text-footnote-regular);
  letter-spacing: var(--text-footnote-regular-tracking);
  color: var(--content-primary);
}

.frames-slider output {
  font: var(--text-caption1-regular);
  letter-spacing: var(--text-caption1-regular-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--content-secondary);
}

.frames-slider-track {
  --slider-size: 17px;
  --slider-reach: 4px;
  --slider-thumb-fill: var(--background-white);
  --slider-edge: inset 0 0 0 var(--stroke-xsmall) var(--border-transparent);
  --slider-thumb-shadow: var(--slider-edge), var(--effect-style-drop-shadow-knob);
  grid-column: 1 / -1;
  position: relative;
  display: block;
  height: var(--slider-size);
}

.frames-slider-rail {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-max);
  background: var(--background-transparent-subtle);
  box-shadow: var(--slider-edge);
  overflow: hidden;
}

.frames-slider-rail::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--slider-size) / 2 + var(--fill, 0) * (100% - var(--slider-size)));
  border-radius: var(--radius-max) 0 0 var(--radius-max);
  background: var(--background-transparent-strong);
  box-shadow: inset 0 0 0 var(--stroke-xsmall) var(--border-primary);
}

.frames-slider-rail::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--fill, 0) * (100% - var(--slider-size)));
  width: var(--slider-size);
  height: var(--slider-size);
  border-radius: var(--radius-max);
  background: var(--slider-thumb-fill);
  box-shadow: var(--slider-thumb-shadow);
}

.frames-slider input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: calc(-1 * var(--slider-reach));
  box-sizing: border-box;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--slider-reach);
  border-radius: var(--radius-max);
  background: none;
  cursor: pointer;
}

.frames-slider input::-webkit-slider-runnable-track {
  height: 100%;
  background: none;
}

.frames-slider input::-moz-range-track,
.frames-slider input::-moz-range-progress {
  height: 100%;
  background: none;
}

.frames-slider input { -webkit-tap-highlight-color: transparent; }

.frames-slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--slider-size);
  height: var(--slider-size);
  border: 0;
  background: none;
  box-shadow: none;
  opacity: 0;
}

.frames-slider input::-moz-range-thumb {
  width: var(--slider-size);
  height: var(--slider-size);
  border: 0;
  background: none;
  box-shadow: none;
  opacity: 0;
}

@media (pointer: coarse) {
  .frames-slider-track {
    --slider-hit-x: var(--spacing-xxsmall);
    --slider-hit-y: var(--spacing-small);
    --slider-hit-width: calc(var(--slider-size) + 2 * var(--slider-hit-x));
    --slider-hit-height: calc(var(--slider-size) + 2 * var(--slider-hit-y));
  }

  .frames-slider input {
    inset: calc(-1 * var(--slider-hit-y)) calc(-1 * var(--slider-hit-x));
    padding: 0;
  }

  .frames-slider input::-webkit-slider-thumb {
    width: var(--slider-hit-width);
    height: var(--slider-hit-height);
  }

  .frames-slider input::-moz-range-thumb {
    width: var(--slider-hit-width);
    height: var(--slider-hit-height);
  }
}

.frames-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-small);
  font: var(--text-subheadline-medium);
  letter-spacing: var(--text-subheadline-medium-tracking);
  color: var(--content-primary);
  cursor: pointer;
}

.frames-switch .toggle-switch {
  --toggle-width: 53px;
  --toggle-knob: 26px;
}

.frames-fold {
  --fold-gap: var(--spacing-small);
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--duration-shape) var(--ease-settle),
    margin var(--duration-shape) var(--ease-settle),
    opacity var(--duration-fade) ease var(--duration-press),
    visibility 0s;
}

.frames-fold[data-shown="false"] {
  grid-template-rows: 0fr;
  margin-top: calc(-1 * var(--fold-gap));
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows var(--duration-shape) var(--ease-settle),
    margin var(--duration-shape) var(--ease-settle),
    opacity var(--duration-step-aside) ease,
    visibility 0s linear var(--duration-shape);
}

.frames-fold:first-child[data-shown="false"] {
  margin-top: 0;
  margin-bottom: calc(-1 * var(--fold-gap));
}

.frames-body > .frames-fold,
.frames-fold[data-fold="piece"] > div > .frames-fold { --fold-gap: var(--spacing-xlarge); }

.frames-fold[data-fold="piece"] > div { gap: var(--spacing-xlarge); }

.frames-fold > div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  min-height: 0;
  overflow: hidden;
}

.frames-fold[data-shown="true"][data-settled="true"] > div { overflow: visible; }

.frames-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-small);
}

.frames-foot {
  padding-top: var(--spacing-xlarge);
  border-top: var(--stroke-xsmall) solid var(--border-transparent);
}

.frames-foot .button { width: 100%; }

@media (hover: hover) {
  .frames-seg button:not([aria-pressed="true"]):hover,
  .frames-presets > *:hover { color: var(--content-primary); }
  .frames-presets > :not([aria-pressed="true"]):hover { background: var(--background-transparent-subtle); }
}

.frames-panel :focus-visible {
  outline: var(--stroke-large) solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .frames-menu {
    --frames-top: calc(var(--gallery-bar-middle, var(--nav-bottom)) - var(--nav-block) / 2);
    right: var(--edge);
  }
}

@media (max-width: 600px) {
  .gallery { --frames-w: calc(100vw - 2 * var(--edge) - 2 * var(--nav-border)); }

  .frames-panel { max-height: 50svh; }

  .frames-grabber {
    display: block;
    flex: none;
    align-self: center;
    width: 36px;
    height: 5px;
    margin-top: var(--spacing-xsmall);
    border-radius: var(--radius-max);
    background: var(--background-transparent-strong);
  }

  .frames-grabber,
  .frames-panel-head { touch-action: none; }

  .frames-menu {
    top: auto;
    bottom: calc(var(--edge) + env(safe-area-inset-bottom));
  }

  .frames-chevron { rotate: 180deg; }

  body[data-view="canvas"] .gallery-zoom { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-canvas,
  .gallery-canvas::after,
  .gallery-wall,
  .gallery-canvas.is-zooming .gallery-wall { transition: none; }

  .frames-menu,
  .frames-menu[data-menu="open"] { transition: opacity var(--duration-reduced) linear; }

  .frames-panel,
  .frames-menu[data-menu="open"] .frames-panel {
    translate: none;
    transition:
      opacity var(--duration-reduced) linear,
      visibility 0s;
  }

  .frames-fold,
  .frames-fold[data-shown="false"],
  .frames-seg::before,
  .frame-inner img,
  .frame-skeleton { transition: none; }
}