@view-transition {
  navigation: auto;
}

@font-face {
  font-family: "Boldonse";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/boldonse-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Boldonse";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/boldonse-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  --color-bg: #fbfbfc;
  --color-surface: #ffffff;
  --color-surface-muted: rgb(0 0 0 / 0.04);
  --color-border: rgb(0 0 0 / 0.09);
  --color-border-strong: rgb(0 0 0 / 0.18);
  --thumbnail-shimmer: rgb(255 255 255 / 0.7);
  --color-text: #0a0a0b;
  --color-button-secondary-text: var(--color-text);
  --color-button-secondary-border: var(--color-border);
  --color-text-muted: #55565c;
  --color-ink: #0a0a0b;
  --color-on-ink: #ffffff;
  --color-accent: var(--color-brand);
  --color-on-accent: var(--color-brand-contrast);
  --color-danger: #c42b1c;
  --color-focus: #0a0a0b;
  --color-success: #146c43;
  --color-brand: #c6437f;
  --color-brand-contrast: #ffffff;
  --marquee-glow: 0.75rem;
  --color-logo-preview-light: #f4f3f1;
  --color-logo-preview-dark: #121214;
  --color-showcase-circle: var(--color-brand);
  --glass-bg: rgb(255 255 255 / 0.6);
  --color-button-secondary: rgb(255 255 255 / 0.7);
  --glass-bg-strong: rgb(255 255 255);
  --glass-border: rgb(255 255 255 / 0.7);
  --glass-blur: 20px;
  --glass-filter: blur(var(--glass-blur)) saturate(160%);
  --color-scene-room-top: #eef0f3;
  --color-scene-room-bottom: #c9ced6;
  --color-scene-light-text: #3d434d;
  --color-scene-dark-text: #d5dbe6;
  --color-scene-morning-top: #ffe08a;
  --color-scene-morning-bottom: #f2a3b6;
  --color-scene-evening-top: #f6b37a;
  --color-scene-evening-bottom: #5a3a4a;
  --color-evening-panel: #c19e80;
  --color-evening-surface-muted: rgb(90 50 20 / 0.1);
  --color-evening-border: rgb(80 45 20 / 0.22);
  --color-evening-border-strong: rgb(80 45 20 / 0.4);
  --color-evening-text: #1f1208;
  --color-evening-text-muted: #3e2618;
  --color-evening-button: rgb(240 225 210 / 0.4);
  --color-scene-night-top: #2b3654;
  --color-scene-night-bottom: #05070d;

  --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Boldonse", "Inter Variable", system-ui, sans-serif;
  --font-size-xs: 0.75rem;
  --heading-text-transform: none;
  --font-size-sm: 0.875rem;
  --font-size-button: 0.75rem;
  --font-size-button-lg: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-display: clamp(2.25rem, 5vw, 6rem);
  --font-size-lead: clamp(1.125rem, 1.5vw, 1.75rem);
  --font-size-heading-lg: 1.125rem;
  --font-size-sheet-title: 1.125rem;
  --font-size-heading-md: 0.9375rem;
  --font-weight-regular: 400;
  --font-weight-heading: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --line-height-tight: 1.2;
  --line-height-heading: 1.45;
  --letter-spacing-heading: 0.02em;
  --letter-spacing-button: 0.06em;
  --font-size-brand: 0.875rem;
  --line-height-body: 1.5;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.04);
  --shadow-md: 0 12px 32px rgb(0 0 0 / 0.1);
  --shadow-menu: 0 2px 6px rgb(0 0 0 / 0.06), 0 6px 24px rgb(0 0 0 / 0.16);
  --shadow-floating: 0 0 20px rgb(0 0 0 / 0.14);
  --zoom-hover: 1.03;
  --opacity-dimmed: 0.7;

  --z-header: 10;
  --z-menu: 50;
  --z-marquee: 12;
  --z-stage-hint: 15;
  --z-viewer-panel: 20;
  --z-loader: 30;
  --z-drop-overlay: 40;
  --z-toast: 100;

  --touch-target: 2.75rem;
  --check-size: 1.375rem;
  --context-menu-badge-size: 0.75rem;
  --selected-tint: 18%;
  --selected-shrink: 4px;
  --selected-ring-gap: 3px;
  --selected-ring-width: 3px;
  --unselected-opacity: 0.55;
  --toast-bottom: var(--space-5);
  --context-menu-width: 13rem;
  --title-edit-icon-size: 0.875em;
  --title-edit-icon-opacity: 0.45;
  --fab-size: 3.5rem;
  --bottom-nav-bar-height: 4rem;
  --bottom-nav-shadow-room: 1.5rem;
  --bottom-nav-height: calc(var(--bottom-nav-bar-height) + var(--bottom-nav-shadow-room));
  --sliding-lift-scale: 1.08;
  --scroll-cue-duration: 1.6s;
  --preview-grid-gap: var(--space-4);
  --preview-list-gap: var(--space-3);
  --heading-glyph-size: calc(1cap * 24 / 18);
  --heading-glyph-gap: 0.3em;
  --heading-glyph-offset: calc(var(--heading-glyph-size) * -3 / 24);
  --heading-glyph-stroke: 2.75;
  --scroll-cue-travel: 0.375rem;
  --fab-icon-size: 1.5rem;
  --segmented-idle-opacity: 0.72;
  --selection-bar-clearance: 5rem;
  --workspace-cue-clearance: 6rem;
  --workspace-cue-width: 28rem;
  --check-icon-size: 0.875rem;
  --toggle-width: 2.75rem;
  --toggle-height: 1.625rem;
  --toggle-inset: 0.1875rem;
  --range-track-height: 0.375rem;
  --range-thumb-size: 1.5rem;
  --control-height: 2.25rem;
  --control-height-compact: 2rem;
  --segmented-compact-height: calc(var(--control-height-compact) + var(--space-1) * 2 + 2px);
  --avatar-size: 2.25rem;
  --meta-icon-size: 0.875rem;
  --disabled-opacity: 0.4;
  --control-height-lg: 3rem;
  --header-height: 3.25rem;
  --header-overlay-fade: 2rem;
  --brand-mark-height: 1.75rem;
  --logo-on-light-display: inline-block;
  --logo-on-dark-display: none;
  --brand-mark-max-width: 3rem;
  --viewer-panel-width: 24rem;
  --sheet-handle-width: 2.5rem;
  --sheet-handle-hit-height: 1.75rem;
  --sheet-expanded-height: 60svh;
  --stage-overscan: 6rem;
  --status-bar-overscroll: 0px;
  --sheet-handle-height: 0.3125rem;
  --sheet-handle-opacity: 0.55;
  --shared-invite-width: 24rem;
  --shared-invite-icon-size: 3rem;
  --loader-thumb-width: min(16rem, 60vw);
  --settings-width: 48rem;
  --branding-preview-size: 4.5rem;
  --admin-thumb-width: 4.5rem;
  --landing-can-size: clamp(8rem, 22vw, 14rem);
  --landing-showcase-size: clamp(12rem, min(calc((100vw - var(--hero-gutter) * 2) / (1 + var(--landing-can-spill) * 2)), 56dvh), 56rem);
  --landing-can-spill: 0.12;
  --landing-circle-inset: calc(var(--landing-showcase-size) * 0.1);
  --landing-ring-gap: var(--space-3);
  --landing-can-overflow: calc(var(--landing-can-spill) * -100%);
  --hero-gutter: clamp(var(--space-4), 6vw, 7rem);
  --preview-card-min-width: 15rem;
  --list-thumb-width: 5.5rem;
  --list-thumb-height: 3.75rem;
  --list-check-target: 1.75rem;
  --viewer-panel-max-height: 46dvh;
  --swatch-chip-size: 1.5rem;
  --accent-swatch-size: 2rem;
  --icon-size: 1.125rem;
  --view-toggle-icon-size: 20px;
  --view-toggle-icon-stroke: 1.5;
  --spotlight-size: 14rem;
  --spotlight-strength: 10%;
  --spotlight-strength-panel: 17%;
  --header-fill-distance: 4rem;
  --focus-ring: 3px solid var(--color-focus);
  --content-width: 72rem;
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-spin: 0.8s;
  --duration-shimmer: 1.4s;
  --duration-progress-sweep: 1.4s;
  --progress-height: 0.375rem;
  --progress-sweep-width: 35%;
  --progress-sweep-fraction: 0.35;
  --duration-menu: 120ms;
  --duration-slow: 450ms;
  --ease-sheet: cubic-bezier(0.2, 0, 0, 1);
  --duration-transition: 380ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --logo-on-light-display: none;
  --logo-on-dark-display: inline-block;
  --color-bg: #030303;
  --color-surface: #0e0e10;
  --color-surface-muted: rgb(255 255 255 / 0.06);
  --color-border: rgb(255 255 255 / 0.1);
  --color-border-strong: rgb(255 255 255 / 0.24);
  --thumbnail-shimmer: rgb(255 255 255 / 0.08);
  --color-text: #f5f5f6;
  --color-text-muted: #a3a3ab;
  --color-ink: #f5f5f6;
  --color-on-ink: #0a0a0b;
  --color-danger: #ff6b5e;
  --color-focus: #f5f5f6;
  --color-success: #6fd3a0;
  --glass-bg: rgb(18 18 20 / 0.55);
  --color-button-secondary: rgb(255 255 255 / 0.1);
  --glass-bg-strong: rgb(18 18 20);
  --glass-border: rgb(255 255 255 / 0.08);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5), 0 4px 16px rgb(0 0 0 / 0.35);
  --shadow-md: 0 12px 32px rgb(0 0 0 / 0.6);
  --shadow-menu: 0 2px 6px rgb(0 0 0 / 0.5), 0 6px 24px rgb(0 0 0 / 0.6);
  --shadow-floating: 0 0 20px rgb(0 0 0 / 0.6);
  --spotlight-strength: 13%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

input,
textarea {
  -webkit-user-select: text;
  user-select: text;
}

a,
img {
  -webkit-user-drag: none;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-ink);
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.heading-display,
.heading-xl,
.heading-lg,
.heading-md {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: var(--heading-text-transform);
}

.heading-display { font-size: var(--font-size-display); }
.heading-xl { font-size: var(--font-size-xl); }
.heading-lg { font-size: var(--font-size-heading-lg); }
.heading-md { font-size: var(--font-size-heading-md); }

.text-strong {
  font-weight: var(--font-weight-semibold);
}

.text-lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-lead);
}

.text-muted {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--header-height);
  padding: max(var(--space-2), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) var(--space-2) max(var(--space-4), env(safe-area-inset-left));
  isolation: isolate;
  view-transition-name: site-header;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-bg);
}

.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--color-border);
}

@supports (animation-timeline: scroll()) {
  .site-header::after {
    opacity: 0;
    animation: header-fill linear both;
    animation-timeline: scroll(root);
    animation-range: 0 var(--header-fill-distance);
  }
}

.site-header-overlay {
  --glass-filter: none;
  --logo-on-light-display: none;
  --logo-on-dark-display: inline-block;
  position: absolute;
  inset: var(--status-bar-overscroll) 0 auto;
  view-transition-name: none;
  --color-text: #ffffff;
  --color-text-muted: rgb(255 255 255 / 0.82);
  --color-border: rgb(255 255 255 / 0.35);
  --glass-bg: rgb(255 255 255 / 0.14);
  --color-button-secondary-base: var(--glass-bg-strong);
  backdrop-filter: none;
}

.site-header-overlay::after {
  display: none;
}

.site-header-overlay::before {
  top: calc(var(--status-bar-overscroll) * -1);
  bottom: calc(var(--header-overlay-fade) * -1);
  border-bottom: 0;
  background: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0.280) 0%,
    rgb(0 0 0 / 0.280) 5%,
    rgb(0 0 0 / 0.278) 10%,
    rgb(0 0 0 / 0.261) 20%,
    rgb(0 0 0 / 0.232) 30%,
    rgb(0 0 0 / 0.194) 40%,
    rgb(0 0 0 / 0.151) 50%,
    rgb(0 0 0 / 0.107) 60%,
    rgb(0 0 0 / 0.066) 70%,
    rgb(0 0 0 / 0.032) 80%,
    rgb(0 0 0 / 0.009) 90%,
    rgb(0 0 0 / 0.000) 100%
  );
  opacity: 1;
  animation: none;
}

@keyframes header-fill {
  to {
    opacity: 1;
  }
}

.brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-brand);
  letter-spacing: var(--letter-spacing-heading);
  text-transform: var(--heading-text-transform);
  text-decoration: none;
}

.brand-name {
  display: inline-block;
  margin-right: calc((var(--brand-squeeze, 1) - 1) * var(--brand-name-width, 0px));
  white-space: nowrap;
  transform: scaleX(var(--brand-squeeze, 1));
  transform-origin: left center;
}

.brand-mark {
  width: auto;
  max-width: var(--brand-mark-max-width);
  height: var(--brand-mark-height);
  object-fit: contain;
}

.brand-mark-on-light {
  display: var(--logo-on-light-display);
}

.brand-mark-on-dark {
  display: var(--logo-on-dark-display);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.user-menu form {
  display: contents;
}

.avatar-button {
  display: grid;
  place-items: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text);
  cursor: pointer;
  overflow: hidden;
}

.avatar-button[hidden] {
  display: none;
}

.avatar-button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.avatar {
  grid-area: 1 / 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.avatar[hidden] {
  display: none;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.context-menu-heading {
  display: grid;
  padding: var(--space-2) var(--space-3);
}

.context-menu-heading-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.context-menu-heading-detail {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.page {
  display: grid;
  gap: var(--space-5);
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-7);
}

.card,
.preview-card,
.toast {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: var(--glass-filter);
}

.card {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
}

.button,
.preview-card,
.viewer-panel,
.segmented-option,
.brand {
  position: relative;
  isolation: isolate;
}

.button::after,
.preview-card::after,
.viewer-panel::after,
.segmented-option::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    circle var(--spotlight-size) at var(--pointer-x, 50%) var(--pointer-y, 50%),
    color-mix(in srgb, currentColor var(--spotlight-strength), transparent),
    transparent
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) ease-out;
  will-change: opacity;
}

.button:hover:not(:disabled)::after,
.preview-card:hover::after,
.viewer-panel:hover::after,
.segmented-option:hover::after {
  opacity: 1;
}

.stack {
  display: grid;
  gap: var(--space-2);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.button {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  min-width: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-button);
  cursor: pointer;
  transition: transform var(--duration-base) cubic-bezier(0.2, 0, 0, 1), opacity var(--duration-fast) ease-out;
}

.button-lg {
  min-height: var(--control-height-lg);
  padding: 0 var(--space-5);
  font-size: var(--font-size-button-lg);
}

.button:active:not(:disabled) {
  transform: scale(0.97);
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.button-icon {
  padding: 0;
}

.icon {
  flex-shrink: 0;
  width: var(--icon-size);
  height: var(--icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.button-secondary {
  background: linear-gradient(var(--color-button-secondary), var(--color-button-secondary)), var(--color-button-secondary-base, transparent);
  border-color: var(--color-button-secondary-border);
  color: var(--color-button-secondary-text);
  backdrop-filter: var(--glass-filter);
}

.field {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0;
}

.field-label {
  padding: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.input {
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--glass-bg-strong);
  color: var(--color-text);
  font: inherit;
}

.input:hover {
  border-color: var(--color-text-muted);
}

.upload-fab {
  position: fixed;
  right: max(calc(var(--space-4) + env(safe-area-inset-right)), calc((100% - var(--content-width)) / 2 + var(--space-4)));
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index: var(--z-header);
  display: inline-flex;
  width: var(--fab-size);
  height: var(--fab-size);
}

.upload-fab .icon {
  width: var(--fab-icon-size);
  height: var(--fab-icon-size);
}

.progress {
  --progress: 0;
  position: relative;
  width: 100%;
  height: var(--progress-height);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.progress-detail {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

.progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-accent);
  transform: translateX(calc((var(--progress) - 1) * 100%));
  transition: transform var(--duration-base) cubic-bezier(0.2, 0, 0, 1);
}

.progress[data-state="waiting"] .progress-fill {
  width: var(--progress-sweep-width);
  transition: none;
  animation: progress-sweep var(--duration-progress-sweep) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes progress-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(calc(100% / var(--progress-sweep-fraction))); }
}

.status {
  margin: 0;
  white-space: pre-line;
  font-size: var(--font-size-sm);
}

.status[data-tone="error"] { color: var(--color-danger); }
.status[data-tone="success"] { color: var(--color-success); }

.workspace {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  width: 100%;
  max-width: var(--content-width);
  min-height: calc(100dvh - var(--header-height));
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--workspace-cue-clearance);
}

.upload-form {
  display: contents;
}

.workspace-cue {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  z-index: var(--z-header);
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  width: min(var(--workspace-cue-width), calc(100% - var(--fab-size) * 2 - var(--space-4) * 4));
  margin-inline: auto;
  text-align: center;
  pointer-events: none;
}

.status:empty {
  display: none;
}

.workspace-cue[data-busy="true"] {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-floating);
  backdrop-filter: var(--glass-filter);
}

.drop-overlay {
  position: fixed;
  inset: var(--space-3);
  z-index: var(--z-drop-overlay);
  display: grid;
  place-items: center;
  border: 2px dashed var(--color-brand);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  backdrop-filter: var(--glass-filter);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) ease-out;
}

.drop-overlay[data-active="true"] {
  opacity: 1;
}

.drop-overlay-text {
  margin: 0;
  font-family: var(--font-heading);
  text-transform: var(--heading-text-transform);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-heading);
}

.workspace-previews {
  display: grid;
  align-content: start;
  gap: var(--space-3);
}

.team-previews {
  --section-gap: var(--space-3);
  display: grid;
  gap: var(--section-gap);
  margin-top: var(--space-6);
}

.own-previews {
  --section-gap: var(--space-3);
  display: grid;
  gap: var(--section-gap);
}

.preview-grid + .pagination {
  margin-top: calc(var(--preview-grid-gap) - var(--section-gap));
}

.preview-grid[data-view="list"] + .pagination {
  margin-top: calc(var(--preview-list-gap) - var(--section-gap));
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.segmented.pagination-pages {
  display: flex;
  align-items: center;
}

.pagination-page,
.pagination-step {
  min-width: var(--control-height-compact);
  background: none;
  font-family: inherit;
}

.pagination-step:disabled {
  opacity: var(--disabled-opacity);
  cursor: default;
}

.pagination-page[data-under-indicator] {
  color: var(--color-on-accent);
  opacity: 1;
}

.pagination-gap {
  padding-inline: var(--space-1);
  color: var(--color-text-muted);
}

.team-previews > .section-empty {
  display: none;
}

.bottom-nav {
  position: fixed;
  right: max(var(--space-3), env(safe-area-inset-right));
  bottom: calc(var(--bottom-nav-shadow-room) + env(safe-area-inset-bottom));
  left: max(var(--space-3), env(safe-area-inset-left));
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bottom-nav-tabs {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: var(--bottom-nav-bar-height);
  padding: var(--space-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-floating);
  backdrop-filter: var(--glass-filter);
}

.bottom-nav-item {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: opacity var(--duration-fast) ease-out;
}

.bottom-nav-item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.bottom-nav-item[data-under-indicator] {
  color: var(--color-on-accent);
}

.bottom-nav-upload {
  flex: none;
  width: var(--bottom-nav-bar-height);
  height: var(--bottom-nav-bar-height);
  box-shadow: var(--shadow-floating);
}

[data-sliding] {
  position: relative;
  touch-action: pan-y;
}

[data-sliding] > :not(.sliding-indicator, legend) {
  position: relative;
  z-index: 1;
}

.sliding-indicator {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  pointer-events: none;
}

[data-sliding-animate] > .sliding-indicator {
  transition: translate var(--duration-base) cubic-bezier(0.2, 0, 0, 1), scale var(--duration-fast) ease-out;
}

[data-dragging] > .sliding-indicator {
  scale: var(--sliding-lift-scale);
  transition: scale var(--duration-fast) ease-out;
}

.segmented[data-sliding] .segmented-option:has(input:checked) {
  border-color: transparent;
  background: none;
  color: var(--color-text);
}

.segmented[data-sliding] .segmented-option[data-under-indicator]:has(input) {
  color: var(--color-on-accent);
  opacity: 1;
}

.heading-short {
  display: none;
}

.heading-glyph {
  display: none;
  width: var(--heading-glyph-size);
  height: var(--heading-glyph-size);
  margin-inline-end: var(--heading-glyph-gap);
  vertical-align: var(--heading-glyph-offset);
  stroke-width: var(--heading-glyph-stroke);
}

:root:has(.selection-bar:not([hidden])) .bottom-nav {
  display: none;
}

.preview-grid {
  --glass-filter: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--preview-card-min-width), calc(50% - var(--preview-grid-gap) / 2)), 1fr));
  gap: var(--preview-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.preview-card {
  --card-inner-radius: calc(var(--radius-md) - 1px);
  display: grid;
  border-radius: var(--radius-md);
  transition: transform var(--duration-base) cubic-bezier(0.2, 0, 0, 1), opacity var(--duration-fast) ease-out;
}

.preview-card > a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--card-inner-radius) var(--card-inner-radius) 0 0;
}

.preview-card::before {
  content: "";
  position: absolute;
  inset: calc((var(--selected-ring-gap) + var(--selected-ring-width)) * -1);
  z-index: 2;
  border-radius: calc(var(--radius-md) + var(--selected-ring-gap) + var(--selected-ring-width));
  box-shadow: inset 0 0 0 var(--selected-ring-width) var(--color-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease-out;
}

.preview-card[data-selected="true"]::before {
  opacity: 1;
}

.preview-card > a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 20%, var(--thumbnail-shimmer) 50%, transparent 80%);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-100%);
  transition: opacity var(--duration-base) ease-out;
}

.preview-card > a[data-loading="true"]::before {
  opacity: 1;
  animation: thumbnail-shimmer var(--duration-shimmer) ease-in-out infinite;
}

.preview-card > a[data-loading="true"] .preview-thumb {
  opacity: 0;
}

@keyframes thumbnail-shimmer {
  to { transform: translateX(100%); }
}

.preview-card > a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-accent) var(--selected-tint), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease-out;
}

.preview-thumb {
  aspect-ratio: 4305 / 3213;
  width: 100%;
  object-fit: cover;
  background: var(--color-surface-muted);
  transition: transform var(--duration-base) ease-out, opacity var(--duration-slow) ease-out;
  will-change: transform;
}

@media (hover: hover) {
  .preview-card:hover .preview-thumb {
    transform: scale(var(--zoom-hover));
  }
}

.preview-check {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-fast) ease-out;
  will-change: opacity;
}

.preview-card:hover .preview-check,
.preview-card:focus-within .preview-check,
.preview-grid[data-has-selection="true"] .preview-check {
  opacity: 1;
}

.preview-check-box {
  display: grid;
  place-items: center;
  width: var(--check-size);
  height: var(--check-size);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-sm);
  background: var(--glass-bg-strong);
  box-shadow: 0 0 0 1px var(--color-on-ink), var(--shadow-sm);
  color: transparent;
}

.preview-check-box .icon {
  width: var(--check-icon-size);
  height: var(--check-icon-size);
  stroke-width: 3;
}

.preview-check:has(input:checked) .preview-check-box {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 0 0 1px var(--color-bg), 0 0 0 2.5px var(--color-accent), var(--shadow-sm);
}

.preview-check:has(input:focus-visible) .preview-check-box {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

@media (hover: none) {
  .preview-check { opacity: 1; }
  .button::after,
  .preview-card::after,
  .viewer-panel::after,
  .segmented-option::after { display: none; }
}

.preview-card[data-selected="true"] {
  box-shadow: var(--shadow-md);
  transform: scale(var(--selected-scale, 1));
}

.preview-grid[data-has-selection="true"] .preview-card:not([data-selected="true"]) {
  opacity: var(--unselected-opacity);
}

.preview-card[data-selected="true"] > a::after {
  opacity: 1;
}

.heading-actions {
  flex-wrap: nowrap;
}

.view-toggle-icon {
  width: var(--view-toggle-icon-size);
  height: var(--view-toggle-icon-size);
  stroke-width: var(--view-toggle-icon-stroke);
}

.segmented-compact {
  --segmented-option-height: var(--control-height-compact);
  --segmented-option-padding: var(--space-2);
  padding: 1px;
}

.preview-grid:not([data-view="list"]) .team-card .preview-body {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
}

.preview-grid:not([data-view="list"]) .team-card .preview-title {
  grid-column: 1 / -1;
}

.preview-grid:not([data-view="list"]) .team-card .text-muted {
  margin: 0;
}

.preview-grid[data-view="list"] {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--preview-list-gap);
}

.preview-grid[data-view="list"] .preview-card {
  grid-template-columns: var(--list-thumb-width) minmax(0, 1fr);
  align-items: center;
}

.preview-grid[data-view="list"] .preview-body {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.preview-grid[data-view="list"] .preview-title {
  font-size: var(--font-size-sm);
}

.preview-grid[data-view="list"] .text-muted {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
  gap: 0 var(--space-3);
  margin: 0;
  font-size: var(--font-size-xs);
}

.preview-grid[data-view="list"] .preview-card {
  height: var(--list-thumb-height);
}

.preview-grid[data-view="list"] .preview-card > a {
  align-self: stretch;
  border-radius: var(--card-inner-radius) 0 0 var(--card-inner-radius);
}

.preview-grid[data-view="list"] .preview-thumb {
  height: 100%;
  aspect-ratio: auto;
}

.preview-grid[data-view="list"] .preview-check {
  width: var(--list-check-target);
  height: var(--list-check-target);
}

.preview-grid[data-view="list"] .preview-body > .cluster {
  grid-column: 2;
  grid-row: 1 / span 2;
  flex-wrap: nowrap;
}

.preview-grid[data-view="list"] .card-delete-button {
  margin-left: 0;
}

.heading-upload {
  display: none;
}

.previews-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.selection-marquee {
  position: absolute;
  z-index: var(--z-marquee);
  border: 1px solid color-mix(in srgb, var(--color-accent) 80%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
  box-shadow: 0 0 var(--marquee-glow) color-mix(in srgb, var(--color-accent) 30%, transparent), inset 0 0 var(--marquee-glow) color-mix(in srgb, var(--color-accent) 12%, transparent);
  pointer-events: none;
}

.context-menu {
  position: fixed;
  z-index: var(--z-menu);
  display: grid;
  gap: 1px;
  min-width: var(--context-menu-width);
  padding: var(--space-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-menu);
  backdrop-filter: var(--glass-filter);
  outline: none;
}

.context-menu:not([hidden]) {
  animation: context-menu-in var(--duration-menu) cubic-bezier(0.2, 0, 0, 1);
}

@keyframes context-menu-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
}

.context-menu-item .icon {
  flex: none;
  color: var(--color-text-muted);
}

.context-menu-item:hover:not(:disabled),
.context-menu-item:focus-visible {
  background: var(--color-surface-muted);
  outline: none;
}

.context-menu-item:hover:not(:disabled) .icon:not(.context-menu-badge),
.context-menu-item:focus-visible .icon:not(.context-menu-badge) {
  color: var(--color-text);
}

.context-menu-item:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus);
}

.context-menu-icon {
  position: relative;
  display: inline-grid;
  flex: none;
}

.context-menu-item .context-menu-badge {
  position: absolute;
  right: calc(var(--context-menu-badge-size) / -3);
  bottom: calc(var(--context-menu-badge-size) / -3);
  width: var(--context-menu-badge-size);
  height: var(--context-menu-badge-size);
  padding: 1px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 1.5px var(--glass-bg-strong);
  color: var(--color-on-accent);
  stroke-width: 3.5;
}

.context-menu-item[aria-checked="true"] {
  font-weight: var(--font-weight-semibold);
  cursor: default;
}

.context-menu-item:disabled {
  opacity: 0.4;
  cursor: default;
}

.context-menu-separator {
  height: 1px;
  margin: var(--space-1) var(--space-2);
  background: var(--color-border);
}

.card-delete-button {
  margin-left: auto;
}

.icon-dots {
  stroke-width: 3.5;
}

.selection-bar {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  width: fit-content;
  margin-inline: auto;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-floating);
  backdrop-filter: var(--glass-filter);
}

.preview-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.preview-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-edit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: text;
}

.title-edit > span {
  overflow-wrap: anywhere;
}

.preview-title .title-edit > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-edit .icon {
  flex: none;
  width: var(--title-edit-icon-size);
  height: var(--title-edit-icon-size);
  opacity: var(--title-edit-icon-opacity);
  transition: opacity var(--duration-fast) ease-out;
}

.title-edit:hover .icon,
.title-edit:focus-visible .icon {
  opacity: 1;
}

.title-edit:focus-visible {
  border-radius: var(--radius-sm);
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.inline-rename {
  display: block;
  width: 100%;
  height: 1lh;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: inset 0 -2px 0 var(--color-accent);
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  outline: none;
}

.preview-link {
  color: var(--color-text);
  text-decoration: none;
}

a:not(.button, .hover-dim):hover {
  text-decoration-thickness: 2px;
}

.hover-dim {
  transition: opacity var(--duration-fast) ease-out;
}

.hover-dim:hover {
  opacity: var(--opacity-dimmed);
}

.empty-state {
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-align: center;
}

.viewer-document {
  overflow: hidden;
  background: var(--color-bg);
}

.viewer-document > body {
  background: transparent;
}

.stage {
  position: absolute;
  inset: 0 0 auto;
  height: calc(100lvh + var(--status-bar-overscroll) + var(--stage-overscan));
  z-index: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.stage:active {
  cursor: grabbing;
}

.viewer-layout {
  --glass-filter: none;
  --spotlight-strength: var(--spotlight-strength-panel);
  position: absolute;
  inset: calc(var(--status-bar-overscroll) + var(--header-height) + env(safe-area-inset-top)) 0 auto;
  height: calc(100svh - var(--header-height) - env(safe-area-inset-top));
  z-index: var(--z-viewer-panel);
  display: grid;
  align-content: end;
  padding: var(--space-3) max(var(--space-3), env(safe-area-inset-right)) max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-3), env(safe-area-inset-left));
  pointer-events: none;
}

.card.viewer-panel {
  --panel-padding: var(--space-3);
  gap: var(--space-2);
  padding: var(--panel-padding);
}

.viewer-panel .panel-section {
  gap: var(--space-2);
  padding-top: var(--space-3);
}

.viewer-panel .button,
.viewer-panel .segmented-option {
  min-height: var(--control-height-compact);
  padding-inline: var(--space-3);
}

.viewer-panel .swatch {
  padding-left: var(--space-1);
}

.panel-header > .stack {
  gap: var(--space-1);
}

.panel-title {
  font-size: var(--font-size-sheet-title);
}

.byline {
  display: flex;
  gap: var(--space-4);
  white-space: nowrap;
}

.byline > :first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.byline > :not(:first-child) {
  flex-shrink: 0;
}

.meta-line {
  display: block;
}

.timestamp-today {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.meta-visibility {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.spinner {
  display: none;
  flex: none;
  width: var(--meta-icon-size);
  height: var(--meta-icon-size);
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin var(--duration-spin) linear infinite;
}

@keyframes spin {
  to { transform: rotate(1turn); }
}

.preview-card[data-busy="true"] .meta-visibility .spinner {
  display: inline-block;
}

.preview-card[data-busy="true"] .meta-visibility .icon {
  display: none;
}

.meta-visibility .icon {
  width: var(--meta-icon-size);
  height: var(--meta-icon-size);
}

.viewer-panel {
  background: var(--glass-bg-strong);
  max-height: var(--viewer-panel-max-height);
  overflow-y: auto;
  pointer-events: auto;
  transition: transform var(--duration-slow) var(--ease-sheet);
}

.viewer-panel[data-dragging="true"] {
  transition: none;
}

.scene-gradient {
  background: radial-gradient(circle at 50% 35%, var(--scene-top), var(--scene-bottom));
}

[data-scene="morning"] {
  --scene-top: var(--color-scene-morning-top);
  --scene-bottom: var(--color-scene-morning-bottom);
  --scene-text: var(--color-scene-light-text);
}

[data-scene="room"] {
  --scene-top: var(--color-scene-room-top);
  --scene-bottom: var(--color-scene-room-bottom);
  --scene-text: var(--color-scene-light-text);
}

[data-scene="evening"] {
  --scene-top: var(--color-scene-evening-top);
  --scene-bottom: var(--color-scene-evening-bottom);
  --scene-text: var(--color-scene-dark-text);
}

:root[data-scene-tint="evening"] .viewer-panel {
  --glass-bg-strong: var(--color-evening-panel);
  --glass-border: var(--color-evening-border);
  --color-surface-muted: var(--color-evening-surface-muted);
  --color-border: var(--color-evening-border);
  --color-border-strong: var(--color-evening-border-strong);
  --color-text: var(--color-evening-text);
  --color-text-muted: var(--color-evening-text-muted);
  --color-button-secondary: var(--color-evening-button);
  --color-button-secondary-text: var(--color-evening-text);
  --color-button-secondary-border: var(--color-evening-border);
  color: var(--color-text);
}

[data-scene="night"] {
  --scene-top: var(--color-scene-night-top);
  --scene-bottom: var(--color-scene-night-bottom);
  --scene-text: var(--color-scene-dark-text);
}

.swatch {
  padding-left: var(--space-1);
}

.swatch:has(input:checked),
.segmented-option:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.accent-swatches {
  margin: 0;
  padding: 0;
  border: 0;
}

.accent-swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.accent-swatch-chip {
  width: var(--accent-swatch-size);
  height: var(--accent-swatch-size);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--swatch-color);
}

.accent-swatch:has(input:checked) .accent-swatch-chip,
.accent-swatch[data-selected="true"] .accent-swatch-chip {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.accent-swatch:has(input:focus-visible) .accent-swatch-chip {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.accent-custom-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.swatch-chip {
  width: var(--swatch-chip-size);
  height: var(--swatch-chip-size);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
}

.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.stage-message {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  color: var(--scene-text);
  text-align: center;
}

.details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-4);
  margin: 0;
  font-size: var(--font-size-sm);
}

.details dt {
  color: var(--color-text-muted);
}

.details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

:root:has(.selection-bar:not([hidden])) {
  --toast-bottom: calc(var(--space-5) + var(--selection-bar-clearance));
}

:root:has(.selection-bar:not([hidden])) .upload-fab {
  display: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--toast-bottom);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  opacity: 0;
  transform: translate(-50%, var(--space-4));
  transition: transform var(--duration-base) ease-out, opacity var(--duration-base) ease-out;
  pointer-events: none;
}

.toast[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

.landing-hero {
  display: grid;
  gap: var(--space-6);
  align-content: center;
  align-items: center;
  justify-items: center;
  min-height: 100dvh;
  margin-top: calc(var(--header-height) * -1);
  position: relative;
  padding: calc(var(--header-height) + var(--space-5)) var(--hero-gutter) var(--space-7);
  overflow: clip;
}

.landing-hero:has(> .scroll-cue:not([hidden])) {
  padding-bottom: calc(var(--space-5) * 2 + var(--touch-target) + env(safe-area-inset-bottom));
}

.scroll-cue {
  position: absolute;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-floating);
  backdrop-filter: var(--glass-filter);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  translate: -50% 0;
  animation: scroll-cue-rise var(--scroll-cue-duration) ease-in-out infinite;
  transition: opacity var(--duration-base) ease-out;
}

.scroll-cue:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

:root[data-scrolled="true"] .scroll-cue {
  opacity: 0;
  pointer-events: none;
}

@keyframes scroll-cue-rise {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(var(--scroll-cue-travel) * -1));
  }
}

.landing-copy {
  gap: var(--space-5);
  max-width: 52rem;
}

.header-sign-in {
  transition: opacity var(--duration-fast) ease-out, visibility var(--duration-fast);
}

.landing-invite {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - var(--header-height) - var(--space-7) * 2);
}

.shared-invite {
  justify-items: center;
  max-width: var(--shared-invite-width);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.shared-invite-icon {
  display: grid;
  place-items: center;
  width: var(--shared-invite-icon-size);
  height: var(--shared-invite-icon-size);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
}

.heading-line {
  display: block;
  white-space: nowrap;
}

.landing-showcase {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--landing-showcase-size);
  aspect-ratio: 1;
  margin: calc(var(--landing-showcase-size) * var(--landing-can-spill));
  isolation: isolate;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.landing-drop {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

.landing-formats {
  text-align: center;
  margin: calc(var(--space-6) + var(--landing-ring-gap) - var(--landing-circle-inset) - var(--landing-showcase-size) * var(--landing-can-spill)) 0 0;
  font-size: var(--font-size-sm);
}

.landing-drop-ring,
.landing-showcase::after {
  position: absolute;
  inset: calc(var(--landing-circle-inset) - var(--landing-ring-gap));
  z-index: 0;
  border: 2px dashed var(--color-border-strong);
  border-radius: 50%;
  pointer-events: none;
}

.landing-showcase::after {
  content: "";
  border-color: var(--color-brand);
  opacity: 0;
  transition: opacity var(--duration-base) ease-out;
}

.landing-showcase:hover::after,
.landing-showcase:focus-visible::after,
.landing-hero[data-dragging="true"] .landing-showcase::after {
  opacity: 1;
}

.landing-showcase:focus-visible {
  outline: none;
}

.landing-drop-hint {
  position: absolute;
  bottom: calc(var(--landing-circle-inset) - var(--landing-ring-gap) - var(--space-4));
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  box-shadow: var(--shadow-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  transition: transform var(--duration-base) ease-out;
  pointer-events: none;
}

.landing-showcase:hover .landing-drop-hint,
.landing-hero[data-dragging="true"] .landing-drop-hint {
  transform: translateY(calc(var(--space-1) * -1));
}

.lead-line {
  display: block;
}

.landing-recent {
  --section-gap: var(--space-4);
  display: grid;
  gap: var(--section-gap);
  padding: 0 var(--hero-gutter) var(--space-7);
}

.segmented-option:has(input:disabled) {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

.landing-showcase::before {
  content: "";
  position: absolute;
  inset: var(--landing-circle-inset);
  border-radius: 50%;
  background: var(--color-showcase-circle);
}

.landing-showcase canvas {
  position: absolute;
  z-index: 1;
  inset: var(--landing-can-overflow);
  width: calc(100% - var(--landing-can-overflow) * 2);
  height: calc(100% - var(--landing-can-overflow) * 2);
}

.landing-can {
  position: relative;
  width: var(--landing-can-size);
  height: auto;
}

.settings {
  max-width: var(--settings-width);
}

.settings-name {
  align-items: end;
}

.settings-name-field {
  flex: 1 1 16rem;
}

.branding-grid {
  display: grid;
  gap: var(--space-4);
}

.branding-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.branding-preview {
  width: var(--branding-preview-size);
  height: var(--branding-preview-size);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  object-fit: contain;
}

.branding-preview-light {
  background: var(--color-logo-preview-light);
}

.branding-preview-dark {
  background: var(--color-logo-preview-dark);
}

.button:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.admin-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-row {
  display: grid;
  grid-template-columns: var(--admin-thumb-width) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-row > .cluster {
  grid-column: 2;
}

.admin-thumb {
  width: var(--admin-thumb-width);
  aspect-ratio: 4305 / 3213;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.admin-details {
  display: grid;
  min-width: 0;
}

.admin-details > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg);
  text-align: center;
  transition: opacity var(--duration-slow) ease-out;
}

.viewer-loader[data-state="done"] {
  opacity: 0;
  pointer-events: none;
}

.viewer-loader-thumb {
  width: var(--loader-thumb-width);
  aspect-ratio: 4305 / 3213;
  border-radius: var(--radius-md);
  object-fit: cover;
  box-shadow: var(--shadow-md);
  animation: loader-pulse 1.1s ease-in-out 0.4s infinite alternate;
}

::view-transition-group(*) {
  animation-duration: var(--duration-transition);
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

::view-transition-old(*),
::view-transition-new(*) {
  height: 100%;
  object-fit: cover;
}

@keyframes loader-pulse {
  from {
    opacity: 0.35;
  }

  to {
    opacity: 1;
  }
}

.stage-hint {
  position: fixed;
  top: calc(var(--header-height) + var(--space-3));
  left: 50%;
  z-index: var(--z-stage-hint);
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg-strong);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(var(--space-2) * -1));
  transition: opacity var(--duration-base) ease-out, transform var(--duration-base) ease-out;
  pointer-events: none;
}

.stage-hint[data-visible="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.sheet-handle {
  display: none;
  justify-content: center;
  align-items: center;
  min-height: var(--touch-target);
  margin: calc(var(--panel-padding, var(--space-4)) * -1) calc(var(--panel-padding, var(--space-4)) * -1) calc(var(--space-3) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: transparent;
  color: var(--color-text-muted);
  cursor: grab;
  touch-action: none;
}

.sheet-handle:active {
  cursor: grabbing;
}

.sheet-handle:focus-visible {
  outline: var(--focus-ring);
  outline-offset: calc(var(--space-1) * -1);
}

.sheet-handle-bar {
  width: var(--sheet-handle-width);
  height: var(--sheet-handle-height);
  border-radius: var(--radius-pill);
  background: currentColor;
  opacity: var(--sheet-handle-opacity);
  transition: opacity var(--duration-fast) ease-out;
}

.sheet-handle:hover .sheet-handle-bar,
.sheet-handle:active .sheet-handle-bar {
  opacity: 1;
}

.toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}

.toggle-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.toggle-track {
  position: relative;
  width: var(--toggle-width);
  height: var(--toggle-height);
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.toggle-track::after {
  content: "";
  position: absolute;
  top: var(--toggle-inset);
  left: var(--toggle-inset);
  width: calc(var(--toggle-height) - var(--toggle-inset) * 2);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) ease-out;
}

.toggle:has(input:checked) .toggle-track {
  background: var(--color-accent);
}

.toggle:has(input:checked) .toggle-track::after {
  background: var(--color-on-accent);
  transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
}

.toggle:has(input:focus-visible) .toggle-track {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.font-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.font-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.font-option-choice {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--touch-target);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.font-option-choice:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.font-option-choice:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.font-option-name {
  font-size: var(--font-size-lg);
  overflow-wrap: anywhere;
}

.font-option-tag {
  font-size: var(--font-size-sm);
  opacity: 0.7;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
}

.segmented-3 {
  --segmented-option-padding: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--segmented-option-height, var(--touch-target));
  padding: 0 var(--segmented-option-padding, var(--space-3));
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-button);
  text-transform: uppercase;
  cursor: pointer;
  opacity: var(--segmented-idle-opacity);
  transition: opacity var(--duration-base) ease-out;
}

.segmented-option:hover,
.segmented-option:has(input:checked) {
  opacity: 1;
}

.segmented-option:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.panel-section {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) 0 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.plain-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.range-field {
  display: grid;
  gap: var(--space-1);
}

.range-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
}

.range-label output {
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.range {
  --range-progress: 50%;
  width: 100%;
  height: var(--touch-target);
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.range::-webkit-slider-runnable-track {
  height: var(--range-track-height);
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--color-accent) var(--range-progress), var(--color-border-strong) var(--range-progress));
}

.range::-moz-range-track {
  height: var(--range-track-height);
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
}

.range::-moz-range-progress {
  height: var(--range-track-height);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.range::-webkit-slider-thumb {
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  margin-top: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-border-strong);
  appearance: none;
}

.range::-moz-range-thumb {
  width: var(--range-thumb-size);
  height: var(--range-thumb-size);
  border: 0;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-border-strong);
}

.range:focus-visible {
  outline: none;
}

.range:focus-visible::-webkit-slider-thumb {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.range:focus-visible::-moz-range-thumb {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.range-ends {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.section-label {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.message-page {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--space-4);
}

@media (width < 40rem) {
  .workspace-previews[data-section="mine"] > :is([data-team-section], [data-opened-section]),
  .workspace-previews[data-section="team"] > :is(.own-previews, [data-opened-section]),
  .workspace-previews[data-section="opened"] > :is(.own-previews, [data-team-section]) {
    display: none;
  }
  .team-previews {
    margin-top: 0;
  }
  .team-previews[data-has-items="false"],
  .own-previews:has(> .empty-state:not([hidden])) {
    grid-template-rows: auto 1fr;
    min-height: var(--phone-section-min-height);
  }
  .team-previews[data-has-items="false"] > .preview-grid,
  .own-previews:has(> .empty-state:not([hidden])) > .preview-grid {
    display: none;
  }
  .team-previews[data-has-items="false"] > .section-empty {
    display: block;
  }
  .team-previews[data-has-items="false"] > .section-empty,
  .own-previews > .empty-state {
    align-self: center;
    border: 0;
  }
  .previews-heading {
    flex-wrap: nowrap;
  }
  .heading-long {
    display: none;
  }
  .heading-short {
    display: inline;
  }
  .previews-heading > .heading-xl {
    min-width: 0;
    text-wrap: balance;
  }
  .upload-fab {
    display: none;
  }
  .workspace {
    padding-bottom: calc(var(--workspace-cue-clearance) + var(--bottom-nav-height) + env(safe-area-inset-bottom));
  }
  :root {
    --toast-bottom: calc(var(--space-5) + var(--bottom-nav-height) + env(safe-area-inset-bottom));
    --phone-section-min-height: calc(100dvh - var(--header-height) - var(--bottom-nav-height) - var(--space-7) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .card-share-button,
  .card-delete-button { display: none; }

  .preview-grid:not([data-view="list"]) .preview-body {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  }

  .preview-grid:not([data-view="list"]) .preview-title {
    grid-column: 1 / -1;
    font-size: var(--font-size-sm);
  }

  .preview-grid:not([data-view="list"]) .text-muted {
    min-width: 0;
    margin: 0;
    font-size: var(--font-size-xs);
  }

  .preview-grid:not([data-view="list"]) .preview-body > .cluster {
    flex-wrap: nowrap;
  }

  :root {
    --landing-showcase-size: clamp(12rem, min(calc((100vw - var(--hero-gutter) * 2) / (1 + var(--landing-can-spill) * 2)), 44svh), 56rem);
  }
  .landing-hero {
    min-height: 100svh;
    align-content: center;
    gap: var(--space-5);
    padding-bottom: var(--space-6);
  }
  .landing-drop { order: -1; }
  .landing-copy {
    justify-items: center;
    gap: var(--space-4);
    text-align: center;
  }
  .landing-copy > .cluster {
    display: grid;
    width: 100%;
  }
  .landing-copy .text-lead { text-wrap: balance; }
  :root:not([data-scrolled="true"]) .header-sign-in {
    opacity: 0;
    visibility: hidden;
  }
  .landing-drop-ring,
  .landing-drop-hint,
  .landing-formats,
  .landing-showcase::after {
    display: none;
  }
}

@media (min-width: 40rem) {
  .bottom-nav { display: none; }
  .heading-glyph { display: inline-block; }
  .team-previews[data-has-items="false"] { display: none; }
  .workspace { padding-top: var(--space-6); }
  .page { padding: var(--space-6) var(--space-5) var(--space-7); }
  .card { padding: var(--space-5); }
  .viewer-layout { justify-content: end; padding: var(--space-4); }
  .viewer-panel { width: var(--viewer-panel-width); }
  .branding-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-row { grid-template-columns: var(--admin-thumb-width) minmax(0, 1fr) auto; }
  .admin-row > .cluster { grid-column: auto; }
}

@media (width < 64rem) {
  .sheet-handle { display: flex; }
  .panel-header { touch-action: none; }
  .viewer-panel[data-collapsed="true"] { overflow: hidden; }
  .viewer-panel > :not(.panel-header, .sheet-handle) {
    opacity: var(--sheet-progress, 1);
    transition: opacity var(--duration-slow) var(--ease-sheet);
  }
  .viewer-panel[data-dragging="true"] > * { transition: none; }
  .viewer-layout {
    height: calc(100lvh + var(--stage-overscan) - var(--header-height) - env(safe-area-inset-top));
    padding: var(--space-3) 0 0;
  }
  .card.viewer-panel {
    --sheet-bottom-clearance: calc(100lvh - 100svh + env(safe-area-inset-bottom) + var(--stage-overscan));
    --viewer-panel-max-height: calc(var(--sheet-expanded-height) + var(--sheet-bottom-clearance));
    padding-bottom: calc(var(--panel-padding) + var(--sheet-bottom-clearance));
    border-bottom-width: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .sheet-handle {
    min-height: var(--sheet-handle-hit-height);
    margin-bottom: calc(var(--space-2) * -1);
  }
}

@media (min-width: 64rem) {
  .landing-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-items: start; }
  .landing-drop { justify-self: end; }
  :root { --landing-showcase-size: clamp(12rem, min(calc((100vw - var(--hero-gutter) * 2 - var(--space-6)) / 2 / (1 + var(--landing-can-spill) * 2)), 68dvh), 56rem); }
  .viewer-layout { align-content: start; }
  .heading-upload { display: inline-flex; }
  .card.viewer-panel { --panel-padding: var(--space-4); }
  .byline { display: grid; gap: 0; }
  .upload-fab { display: none; }
  .viewer-panel { --viewer-panel-max-height: calc(100dvh - var(--header-height) - var(--space-6)); }
}

@supports (-webkit-touch-callout: none) {
  :root { --status-bar-overscroll: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue {
    animation: none;
  }
  [data-sliding-animate] > .sliding-indicator,
  [data-dragging] > .sliding-indicator {
    transition: none;
  }
  .preview-card > a[data-loading="true"]::before {
    animation: none;
    opacity: 0.6;
    transform: none;
  }
  .progress[data-state="waiting"] .progress-fill {
    width: 100%;
    animation: none;
    opacity: 0.5;
    transform: none;
  }
  .viewer-loader-thumb {
    animation: none;
  }

  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after,
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}