:root {
  color-scheme: light;
  /* Instacolor design system v1: tokens are the source of truth for active UI. */
  --cyv-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cyv-type-hero: clamp(1.15rem, 2.6vw, 2rem);
  --cyv-type-title: clamp(1.25rem, 2vw, 1.8rem);
  --cyv-type-section: 0.94rem;
  --cyv-type-body: 0.9rem;
  --cyv-type-control: 0.78rem;
  --cyv-type-caption: 0.72rem;
  --cyv-weight-title: 900;
  --cyv-weight-control: 850;
  --cyv-space-0: 0;
  --cyv-space-1: 4px;
  --cyv-space-2: 6px;
  --cyv-space-3: 8px;
  --cyv-space-4: 10px;
  --cyv-space-5: 12px;
  --cyv-space-6: 14px;
  --cyv-space-7: 16px;
  --cyv-space-8: 18px;
  --cyv-space-9: 22px;
  --cyv-space-10: 24px;
  --cyv-space-fluid-page: max(8px, env(safe-area-inset-top)) clamp(8px, 1.5vw, 18px) max(8px, env(safe-area-inset-bottom));
  --cyv-radius-xs: 5px;
  --cyv-radius-sm: 8px;
  --cyv-radius-control: 10px;
  --cyv-radius-control-lg: 12px;
  --cyv-radius-card: 14px;
  --cyv-radius-rail: 16px;
  --cyv-radius-popover: 16px;
  --cyv-radius-panel: 22px;
  --cyv-radius-drawer: 24px;
  --cyv-radius-pill: 999px;
  --cyv-color-ink: #223033;
  --cyv-color-ink-soft: rgba(34, 48, 51, 0.78);
  --cyv-color-muted: #667776;
  --cyv-color-muted-soft: rgba(102, 119, 118, 0.76);
  --cyv-color-canvas-matte: #e8dece;
  --cyv-color-bg: #f1eadf;
  --cyv-color-surface: #fffdf8;
  --cyv-color-surface-soft: rgba(255, 253, 248, 0.72);
  --cyv-color-surface-panel: rgba(250, 247, 241, 0.96);
  --cyv-color-surface-rail: rgba(255, 255, 255, 0.46);
  --cyv-color-surface-control: rgba(255, 255, 255, 0.78);
  --cyv-color-surface-control-hover: rgba(38, 47, 49, 0.06);
  --cyv-color-line: rgba(44, 38, 31, 0.1);
  --cyv-color-line-strong: rgba(34, 43, 46, 0.18);
  --cyv-color-active: #222b2e;
  --cyv-color-active-contrast: #ffffff;
  --cyv-color-accent: #0f7f82;
  --cyv-color-accent-strong: #123f45;
  --cyv-color-danger: #b43d34;
  --cyv-color-overlay: rgba(25, 28, 28, 0.28);
  --cyv-shadow-control: none;
  --cyv-shadow-control-hover: 0 10px 24px rgba(48, 38, 28, 0.09);
  --cyv-shadow-rail: 0 18px 44px rgba(34, 43, 46, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 0 -1px 0 rgba(29, 63, 72, 0.08);
  --cyv-shadow-panel: 0 28px 76px rgba(33, 45, 50, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --cyv-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --cyv-shadow-focus: 0 0 0 3px rgba(15, 127, 130, 0.24);
  --cyv-backdrop-panel: blur(24px) saturate(145%);
  --cyv-backdrop-rail: blur(26px) saturate(155%);
  --cyv-motion-fast: 120ms ease;
  --cyv-motion-base: 160ms ease;
  --cyv-control-min: 44px;
  --cyv-control-compact: 40px;
  --cyv-rail-control: 44px;
  --cyv-breakpoint-mobile: 720px;
  --cyv-breakpoint-compact: 430px;
  --ink: #26333a;
  --muted: #667477;
  --paper: #f7f1e8;
  --sand: #e8dccd;
  --foam: #f8fbf8;
  --driftwood: #9b8067;
  --driftwood-dark: #66513f;
  --blue: #8fb3bf;
  --blue-deep: #486f7b;
  --seaglass: #b8d3cf;
  --sunwash: #e9c58c;
  --lagoon: #1aa7b8;
  --aqua: #74d7df;
  --coral: #ff7968;
  --mango: #ffd166;
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-line: rgba(255, 255, 255, 0.72);
  --line: rgba(38, 51, 58, 0.14);
  --shadow: 0 18px 50px rgba(77, 63, 48, 0.14);
}

.canvas-stage .coloring-page-stage,
.canvas-stage .coloring-zoom-layer,
.canvas-stage .coloring-zoom-layer img,
.canvas-stage .coloring-zoom-layer canvas {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(180deg, rgba(116, 215, 223, 0.28), transparent 34%),
    linear-gradient(120deg, rgba(255, 209, 102, 0.24), transparent 44%),
    linear-gradient(220deg, rgba(255, 121, 104, 0.16), transparent 46%),
    var(--paper);
  color: var(--ink);
  font-family: var(--cyv-font-sans);
  line-height: 1.5;
}

body.is-coloring-active {
  overscroll-behavior: none;
  touch-action: none;
}

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

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 12px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(calc(100% - 24px), 1180px);
  min-height: 66px;
  margin: 12px auto 0;
  padding: 9px 10px 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
    linear-gradient(120deg, rgba(116, 215, 223, 0.28), rgba(255, 209, 102, 0.14) 56%, rgba(255, 121, 104, 0.14));
  box-shadow: 0 24px 54px rgba(31, 125, 143, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(24px) saturate(170%);
}

.brand,
.site-header nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  position: relative;
  isolation: isolate;
  max-width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 999px;
  padding: 4px 8px 4px 6px;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  font-weight: 900;
}

.brand::before,
.brand::after {
  display: none;
}

.brand-mark {
  display: block;
  flex: 0 0 auto;
  width: clamp(78px, 10vw, 128px);
  height: clamp(36px, 4vw, 48px);
  overflow: visible;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(31, 125, 143, 0.16));
}

.brand-text {
  color: var(--ink);
  font-family: "Marker Felt", "Cooper Black", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  font-size: clamp(1.25rem, 2vw, 1.78rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.78),
    0 10px 22px rgba(31, 125, 143, 0.14);
  white-space: nowrap;
}

.site-header nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.site-header nav a {
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.36);
  color: rgba(38, 51, 58, 0.78);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
  transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.site-header nav a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 10px 22px rgba(31, 125, 143, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.site-header nav a.header-cta {
  border-color: rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent 42%),
    linear-gradient(135deg, var(--coral), #ff9f43 54%, var(--mango));
  color: #fff;
  box-shadow: 0 12px 24px rgba(255, 121, 104, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: auto;
  padding: clamp(28px, 5vw, 72px) clamp(18px, 5vw, 72px) clamp(36px, 5vw, 72px);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(244, 238, 220, 0.92)),
    linear-gradient(135deg, rgba(184, 211, 207, 0.2), rgba(233, 197, 140, 0.16));
  position: relative;
  overflow: hidden;
}

.hero h2 {
  text-align: center;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(255, 253, 248, 0.72);
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-copy {
  max-width: 720px;
}

.eyebrow,
.tag {
  margin: 0 0 12px;
  color: var(--blue-deep);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.02;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
}

h1 {
  max-width: 12ch;
  font-size: clamp(3.5rem, 9vw, 7.8rem);
}

h2 {
  font-size: clamp(2rem, 4vw, 4.1rem);
}

h3 {
  font-size: 1.35rem;
}

.hero-copy p:not(.eyebrow),
.section-heading + p,
.intro-grid > p,
.daily-copy p {
  color: var(--muted);
}

.hero-copy p:not(.eyebrow) {
  max-width: 640px;
  margin: 24px 0;
  font-size: 1.2rem;
}

.hero-actions,
.daily-copy,
.submission-form {
  display: grid;
  gap: 14px;
}

.hero-actions {
  grid-template-columns: repeat(2, max-content);
}

.button {
  display: inline-flex;
  max-width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  padding: 12px 18px;
  box-shadow: 0 12px 28px rgba(31, 125, 143, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  font-weight: 950;
  line-height: 1.1;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.icon-command {
  min-width: 44px;
  padding: 8px;
  font-size: clamp(1.28rem, 2.2vw, 1.75rem);
  line-height: 1;
}

.button.primary {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(135deg, var(--lagoon), #2ec4b6 58%, #48bfe3);
  color: #fff;
}

.button.secondary {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.32)),
    linear-gradient(135deg, rgba(116, 215, 223, 0.58), rgba(255, 209, 102, 0.34));
  color: var(--ink);
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(31, 125, 143, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.hero-board {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: clamp(12px, 1.7vw, 22px);
  width: min(100%, 1120px);
  min-height: 0;
  border: 1px solid rgba(38, 51, 58, 0.18);
  border-radius: 12px;
  padding: clamp(18px, 3vw, 34px);
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 251, 248, 0.42)),
    rgba(232, 220, 205, 0.38);
  box-shadow: 0 18px 46px rgba(77, 63, 48, 0.12);
}

.hero-pages,
.hero-page,
.hero-page::after {
  position: absolute;
  inset: 0;
}

.hero-pages {
  z-index: 0;
  height: 100%;
  transform-style: preserve-3d;
}

.hero-page {
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform-origin: left center;
  transform: rotateY(0.01deg);
  will-change: opacity, transform, filter;
  animation: page-turn-cycle 147s ease-in-out infinite;
  backface-visibility: hidden;
}

.hero-page::after {
  content: "";
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 62%, rgba(255, 250, 232, 0.46) 78%, rgba(38, 31, 26, 0.22) 100%);
  opacity: 0;
  transform-origin: right center;
  animation: page-curl-shadow 147s ease-in-out infinite;
}

.page-sunset {
  background-image: url("backgrounds/sunset-background.png");
}

.page-hawaiian {
  background-image: url("backgrounds/hawaiian-background.png");
  animation-delay: -126s;
}

.page-hawaiian::after {
  animation-delay: -126s;
}

.page-tuscany {
  background-image: url("backgrounds/tuscany-background.png");
  animation-delay: -105s;
}

.page-tuscany::after {
  animation-delay: -105s;
}

.page-tidepool {
  background-image: url("backgrounds/tidepool-background.png");
  animation-delay: -84s;
}

.page-tidepool::after {
  animation-delay: -84s;
}

.page-africa {
  background-image: url("backgrounds/africa-wateringhole-background.png");
  animation-delay: -63s;
}

.page-africa::after {
  animation-delay: -63s;
}

.page-garden {
  background-image: url("backgrounds/garden-background.png");
  animation-delay: -42s;
}

.page-garden::after {
  animation-delay: -42s;
}

.page-forest {
  background-image: url("backgrounds/forest-background.png");
  animation-delay: -21s;
}

.page-forest::after {
  animation-delay: -21s;
}

.hero-board::before,
.hero-board::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.hero-board::before {
  z-index: -1;
  inset: auto 22px 18px;
  height: 16px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(154, 128, 103, 0.64), rgba(102, 81, 63, 0.72));
  box-shadow: 0 8px 18px rgba(77, 63, 48, 0.18);
  opacity: 1;
}

.hero-board::after {
  display: none;
}

.cover {
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 14px 26px rgba(43, 58, 62, 0.18);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-drag: none;
  animation: none;
  transform: none;
  transition: filter 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
}

.cover:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 5px;
}

.cover:hover {
  filter: saturate(1.06) contrast(1.03);
  box-shadow: 0 18px 34px rgba(77, 63, 48, 0.24);
  transform: translateY(-4px);
}

@keyframes book-rain {
  0% {
    transform:
      translate3d(var(--fall-sway-start, 0px), -18%, 0)
      rotate(var(--cover-rotation, 0deg));
    opacity: 0;
  }

  8% {
    opacity: 0.94;
  }

  50% {
    transform:
      translate3d(var(--fall-sway-mid, 24px), 330%, 0)
      rotate(var(--cover-rotation-mid, 3deg));
  }

  92% {
    opacity: 0.94;
  }

  100% {
    transform:
      translate3d(var(--fall-sway-end, -20px), 690%, 0)
      rotate(var(--cover-rotation, 0deg));
    opacity: 0;
  }
}

@keyframes page-turn-cycle {
  0%,
  3% {
    opacity: 0;
    transform: rotateY(-26deg) translateX(8%);
    filter: brightness(1.02) saturate(0.98);
  }

  7%,
  20% {
    opacity: 1;
    transform: rotateY(0.01deg) translateX(0);
    filter: brightness(1) saturate(1);
  }

  24%,
  100% {
    opacity: 0;
    transform: rotateY(30deg) translateX(-7%);
    filter: brightness(0.94) saturate(0.94);
  }
}

@keyframes page-curl-shadow {
  0%,
  4%,
  19%,
  100% {
    opacity: 0;
  }

  6%,
  22% {
    opacity: 0.82;
  }
}

.section {
  padding: clamp(54px, 8vw, 112px) clamp(18px, 5vw, 72px);
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 36px;
  align-items: end;
}

.intro-grid > p {
  margin: 0;
  font-size: 1.2rem;
}

.publisher-scene {
  min-height: clamp(360px, 48vw, 560px);
  display: flex;
  align-items: end;
  justify-content: flex-start;
  padding: clamp(56px, 8vw, 118px) clamp(18px, 6vw, 88px);
  background:
    linear-gradient(90deg, rgba(17, 31, 35, 0.2), rgba(17, 31, 35, 0.02) 48%, rgba(17, 31, 35, 0.12)),
    url("backgrounds/surfs-up-background.png") center / cover no-repeat;
  background-size: auto, 106%;
  animation: surf-scene-drift 34s ease-in-out infinite alternate;
}

.publisher-copy {
  width: fit-content;
  max-width: min(560px, 100%);
  padding: clamp(17px, 2.5vw, 26px) clamp(20px, 3vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 32px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.52), transparent 32%),
    linear-gradient(135deg, rgba(255, 249, 236, 0.36), rgba(217, 244, 241, 0.16)),
    rgba(255, 248, 230, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -18px 44px rgba(255, 248, 224, 0.14),
    0 24px 74px rgba(18, 40, 44, 0.2);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}

.publisher-copy p {
  margin: 0;
  color: rgba(38, 51, 58, 0.88);
  font-size: clamp(1.04rem, 1.42vw, 1.24rem);
  line-height: 1.62;
  font-weight: 500;
}

@keyframes surf-scene-drift {
  from {
    background-position: center, 49% 50%;
  }

  to {
    background-position: center, 54% 48%;
  }
}

.section-heading {
  max-width: 980px;
  margin-bottom: 32px;
}

.section-heading.centered {
  max-width: 760px;
  margin: 0;
  text-align: center;
}

.section-heading.centered p {
  margin: 12px auto 0;
  max-width: 58ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.text-link {
  width: max-content;
  margin-top: auto;
  color: var(--blue-deep);
  font-weight: 950;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.daily-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(320px, 1fr);
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
  background:
    linear-gradient(135deg, rgba(248, 253, 255, 0.9), rgba(231, 250, 249, 0.88) 50%, rgba(255, 231, 170, 0.36)),
    linear-gradient(220deg, rgba(255, 121, 104, 0.12), transparent 44%);
}

.coloring-panel {
  display: grid;
  gap: 18px;
}

.driftwood-title-box {
  position: relative;
  width: min(100%, 560px);
  padding: clamp(14px, 2.4vw, 24px) clamp(18px, 4vw, 38px);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.34)),
    linear-gradient(135deg, rgba(116, 215, 223, 0.34), rgba(255, 209, 102, 0.22) 56%, rgba(255, 121, 104, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 20px 44px rgba(31, 125, 143, 0.16);
  backdrop-filter: blur(20px) saturate(150%);
}

.driftwood-title-box::before,
.driftwood-title-box::after {
  display: none;
}

.driftwood-title-box::before {
  left: 14px;
}

.driftwood-title-box::after {
  right: 14px;
}

.driftwood-title-box h2 {
  max-width: 16ch;
  margin: 0 auto;
  color: var(--ink);
  font-family: "Marker Felt", "Cooper Black", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 0.96;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.82),
    0 10px 24px rgba(31, 125, 143, 0.16);
}

.coloring-panel p {
  max-width: 54ch;
}

.daily-intro {
  margin: 0;
  color: rgba(38, 51, 58, 0.76);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  font-weight: 650;
}

.coloring-toolbar,
.tool-group,
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.coloring-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  padding: 14px;
  border: 1px solid var(--glass-line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42)),
    linear-gradient(150deg, rgba(116, 215, 223, 0.24), rgba(255, 209, 102, 0.14) 62%, rgba(255, 121, 104, 0.1));
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 24px 60px rgba(31, 125, 143, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.creator-toolbar {
  position: relative;
  gap: 10px;
  z-index: 75;
}

.tool-group {
  padding: 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.action-group,
.utility-group {
  flex: 1 1 220px;
}

.color-group {
  flex: 2 1 360px;
}

.brush-group {
  flex: 1 1 240px;
}

.creator-topbar {
  justify-content: space-between;
}

.tool-dock {
  justify-content: center;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  background: rgba(255, 255, 255, 0.44);
}

.tool-button {
  display: inline-grid;
  min-width: 58px;
  min-height: 44px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  padding: 8px 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.42)),
    linear-gradient(135deg, rgba(116, 215, 223, 0.28), rgba(255, 209, 102, 0.16));
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(31, 125, 143, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  font-weight: 950;
  line-height: 1.05;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-align: center;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.tool-button.is-active {
  border-color: rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(135deg, var(--coral), #ff9f43 52%, var(--mango));
  color: #fff;
  box-shadow: 0 14px 30px rgba(255, 121, 104, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.74);
  transform: translateY(-1px);
}

@media (hover: hover) and (pointer: fine) {
  .tool-button:hover {
    border-color: rgba(255, 255, 255, 0.92);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 42%),
      linear-gradient(135deg, var(--coral), #ff9f43 52%, var(--mango));
    color: #fff;
    box-shadow: 0 14px 30px rgba(255, 121, 104, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.74);
    transform: translateY(-1px);
  }
}

.tool-button:disabled,
.button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.color-puck {
  min-width: 50px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, var(--puck-color) 0 38%, rgba(255, 255, 255, 0.82) 39% 48%, transparent 49%),
    conic-gradient(#f26f63, #f7c65f, #7bbf9e, #65a9d7, #b78bd8, #f26f63);
}

.color-puck:hover,
.color-puck.is-active {
  background:
    radial-gradient(circle at 50% 50%, var(--puck-color) 0 38%, rgba(255, 255, 255, 0.82) 39% 48%, transparent 49%),
    conic-gradient(#f26f63, #f7c65f, #7bbf9e, #65a9d7, #b78bd8, #f26f63);
}

.popover-panel[hidden] {
  display: none;
}

.color-group.popover-panel[hidden] {
  display: none;
}

.popover-panel {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--glass-strong);
  box-shadow: 0 18px 34px rgba(31, 125, 143, 0.14);
}

.color-group.popover-panel {
  position: fixed;
  top: var(--popover-top, 120px);
  left: var(--popover-left, 16px);
  z-index: 120;
  display: grid;
  width: min(var(--popover-width, 292px), calc(100vw - 24px));
  max-height: min(var(--popover-max-height, 70vh), calc(100vh - 24px));
  overflow: auto;
  overscroll-behavior: contain;
  gap: 13px;
  padding: 14px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.48)),
    linear-gradient(145deg, rgba(116, 215, 223, 0.24), rgba(255, 209, 102, 0.16) 58%, rgba(255, 121, 104, 0.12));
  box-shadow: 0 26px 64px rgba(31, 125, 143, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(24px) saturate(170%);
  animation: glass-pop 150ms ease-out;
}

.color-group.popover-panel::before {
  position: absolute;
  top: -7px;
  left: clamp(18px, var(--popover-anchor-x, 50%), calc(100% - 18px));
  width: 14px;
  aspect-ratio: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.72);
  border-left: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.76);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.color-group.popover-panel.is-above::before {
  top: auto;
  bottom: -7px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.72);
}

@keyframes glass-pop {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.brush-settings {
  display: grid;
  grid-template-columns: 1fr;
}

.autosave-note {
  color: var(--lagoon);
  font-size: 0.86rem;
  font-weight: 900;
}

.swatch {
  width: 36px;
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(31, 125, 143, 0.16), 0 9px 18px rgba(31, 125, 143, 0.14);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.swatch:hover,
.recent-color:hover {
  transform: translateY(-1px);
}

.swatch.is-active {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--lagoon), 0 12px 22px rgba(31, 125, 143, 0.22);
}

.button.is-active {
  border-color: rgba(255, 255, 255, 0.86);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(135deg, var(--coral), #ff9f43 52%, var(--mango));
  color: #fff;
}

.custom-color-control,
.brush-control {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--ink);
  font-weight: 900;
}

.custom-color-control input {
  width: 42px;
  height: 42px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  pointer-events: none;
}

.brush-control input {
  flex: 1 1 120px;
  width: min(180px, 42vw);
  accent-color: var(--lagoon);
}

.brush-size-preview {
  --brush-size-preview: 12px;
  flex: 0 0 46px;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.36)),
    linear-gradient(135deg, rgba(116, 215, 223, 0.22), rgba(255, 209, 102, 0.14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 8px 18px rgba(31, 125, 143, 0.12);
}

.brush-size-preview::after {
  width: var(--brush-size-preview);
  max-width: 42px;
  min-width: 6px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: var(--marker-color, #f26f63);
  content: "";
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 14px rgba(31, 125, 143, 0.18);
}

.signature-control {
  max-width: 440px;
}

.coloring-workspace {
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 68px rgba(31, 125, 143, 0.16);
  overflow: hidden;
}

.coloring-page-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  overscroll-behavior: contain;
  overscroll-behavior-block: contain;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  background:
    linear-gradient(45deg, rgba(26, 167, 184, 0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(26, 167, 184, 0.035) 25%, transparent 25%),
    #fff;
  background-size: 18px 18px;
}

.stage-fit-button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 5;
  display: none;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.5)),
    linear-gradient(135deg, rgba(116, 215, 223, 0.42), rgba(255, 209, 102, 0.22));
  color: var(--ink);
  box-shadow: 0 16px 32px rgba(31, 125, 143, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  font-size: 1.35rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(18px) saturate(160%);
}

.coloring-page-stage.is-zoomed .stage-fit-button {
  display: grid;
}

.coloring-zoom-layer {
  --zoom-scale: 1;
  --view-rotation: 0deg;
  --pan-x: 0px;
  --pan-y: 0px;
  --page-aspect: 0.726;
  position: relative;
  display: grid;
  width: var(--page-width, min(100%, calc(760px * var(--page-aspect))));
  height: var(--page-height, auto);
  aspect-ratio: var(--page-aspect);
  place-items: center;
  transform: translate(var(--pan-x), var(--pan-y)) rotate(var(--view-rotation)) scale(var(--zoom-scale));
  transform-origin: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  background: #fffefb;
  border-radius: 3px;
  isolation: isolate;
  z-index: 1;
}

.site-preview-canvas {
  grid-area: 1 / 1;
  display: none;
  width: var(--page-width, min(100%, calc(760px * var(--page-aspect))));
  height: var(--page-height, auto);
  max-width: min(calc(100vw - clamp(188px, 24vw, 308px)), 1000px);
  max-height: calc(100svh - 330px);
  aspect-ratio: var(--page-aspect, .75);
  border-radius: 2px;
  background: #fffefb;
  box-shadow:
    0 0 0 1px rgba(20, 18, 16, .08),
    var(--studio-paper-shadow);
  object-fit: fill;
  pointer-events: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  z-index: 3;
}

.coloring-zoom-layer::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #fffefb;
  box-shadow: inset 0 0 0 1px rgba(20, 18, 16, .06);
  z-index: 0;
}

.coloring-zoom-layer img,
.coloring-zoom-layer canvas {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: fill;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.coloring-zoom-layer img {
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

.coloring-zoom-layer canvas {
  touch-action: none;
  opacity: var(--color-layer-opacity, 1);
  cursor: none;
}

#coloring-canvas {
  z-index: 1;
  pointer-events: auto;
}

#line-art-canvas {
  z-index: 2;
  opacity: 1;
  pointer-events: none;
}

.paper-screen-canvas,
.color-screen-canvas,
.line-art-screen-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
}

.paper-screen-canvas {
  z-index: 4;
}

.color-screen-canvas {
  z-index: 5;
}

.line-art-screen-canvas {
  z-index: 6;
}

.coloring-page-stage.uses-screen-page-overlay .coloring-zoom-layer {
  background: transparent;
  box-shadow: none;
  z-index: 5;
}

.coloring-page-stage.uses-screen-page-overlay .coloring-zoom-layer img,
.coloring-page-stage.uses-screen-page-overlay .coloring-zoom-layer canvas {
  opacity: 0;
}

.coloring-page-stage.uses-screen-page-overlay #coloring-canvas {
  opacity: 0;
  pointer-events: auto;
}

.coloring-page-stage.uses-screen-page-overlay #line-art-canvas {
  opacity: 0;
}

.coloring-page-stage.is-awaiting-page .coloring-zoom-layer {
  display: none;
}

.browse-start-state {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(120px, 220px) minmax(0, 340px);
  align-items: center;
  gap: clamp(18px, 4vw, 42px);
  width: min(92%, 680px);
  min-height: min(72%, 460px);
  padding: clamp(18px, 4vw, 34px);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 253, 248, .94), rgba(250, 244, 234, .84)),
    radial-gradient(circle at 18% 18%, rgba(255, 209, 102, .2), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(116, 215, 223, .22), transparent 36%);
  box-shadow: 0 24px 64px rgba(31, 26, 20, .2), inset 0 1px 0 rgba(255, 255, 255, .9);
}

.browse-start-state[hidden] {
  display: none;
}

.browse-book-stack {
  position: relative;
  min-height: 260px;
  perspective: 900px;
}

.browse-book-stack img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(150px, 34vw);
  aspect-ratio: .74;
  border-radius: 10px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 18px 36px rgba(31, 26, 20, .22);
  transform-origin: 50% 88%;
  animation: browseBookFloat 5.4s ease-in-out infinite;
}

.browse-book-stack img:nth-child(1) {
  z-index: 3;
  transform: translate(-50%, -50%) rotate(-4deg);
}

.browse-book-stack img:nth-child(2) {
  z-index: 2;
  transform: translate(calc(-50% + 34px), calc(-50% + 8px)) rotate(7deg);
  animation-delay: -.8s;
}

.browse-book-stack img:nth-child(3) {
  z-index: 1;
  transform: translate(calc(-50% - 34px), calc(-50% + 14px)) rotate(-10deg);
  animation-delay: -1.6s;
}

.browse-start-copy {
  display: grid;
  justify-items: start;
  gap: 10px;
}

.browse-start-kicker {
  margin: 0;
  color: var(--studio-muted);
  font-size: .75rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.browse-start-copy h3,
.browse-start-copy p {
  margin: 0;
}

.browse-start-copy h3 {
  max-width: 12ch;
  color: var(--studio-ink);
  font-size: clamp(1.7rem, 4vw, 2.65rem);
  line-height: .98;
  font-weight: 950;
}

.browse-start-copy p:not(.browse-start-kicker) {
  max-width: 27ch;
  color: var(--studio-muted);
  font-size: clamp(.95rem, 1.6vw, 1.08rem);
  line-height: 1.35;
  font-weight: 800;
}

@keyframes browseBookFloat {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

body.studio-awaiting-page .canvas-tool-cluster,
body.studio-awaiting-page .bottom-control-strip {
  opacity: 0;
  pointer-events: none;
}

body.studio-awaiting-page .studio-session-bar,
body.studio-awaiting-page .mac-fullscreen-button {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px) {
  .browse-start-state {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    width: min(94%, 420px);
    min-height: min(82%, 520px);
    text-align: center;
  }

  .browse-book-stack {
    width: 100%;
    min-height: 220px;
  }

  .browse-start-copy {
    justify-items: center;
  }

  .browse-start-copy h3 {
    max-width: 11ch;
  }

}

.marker-cursor {
  --marker-opacity: 100%;
  position: absolute;
  z-index: 8;
  left: var(--marker-x, -120px);
  top: var(--marker-y, -120px);
  box-sizing: border-box;
  display: none;
  width: var(--brush-preview-size, 18px);
  height: var(--brush-preview-size, 18px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(38, 51, 58, 0.78);
  border-radius: 999px;
  background: rgba(242, 111, 99, 0.22);
  background: color-mix(in srgb, var(--marker-color, #f26f63) var(--marker-opacity), transparent);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(38, 51, 58, 0.18);
}

.marker-cursor.is-visible {
  display: block;
}

.marker-cursor.is-hidden {
  display: none;
}

.marker-cursor.is-eraser {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.3);
}

.marker-cursor.is-fill {
  width: 34px;
  height: 34px;
  background: rgba(242, 111, 99, 0.18);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--marker-color, #f26f63) 30%, transparent), transparent),
    rgba(255, 255, 255, 0.28);
}

.marker-body,
.marker-tip {
  display: none;
}

.marker-cursor.is-fill::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 999px;
  background: var(--marker-color, #f26f63);
}

.marker-cursor.is-processing-fill {
  animation: fill-target-pulse 520ms ease-in-out infinite alternate;
}

.marker-cursor.is-sampling {
  width: 64px;
  height: 64px;
  border: 3px solid #fff;
  background:
    radial-gradient(circle at 50% 50%, var(--marker-color, #f26f63) 0 22%, transparent 23%),
    rgba(255, 255, 255, 0.42);
  box-shadow:
    0 0 0 2px rgba(38, 51, 58, 0.82),
    0 14px 28px rgba(38, 51, 58, 0.24);
}

.marker-cursor.is-sampling::before,
.marker-cursor.is-sampling::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(38, 51, 58, 0.72);
  transform: translate(-50%, -50%);
}

.marker-cursor.is-sampling::before {
  width: 36px;
  height: 1px;
}

.marker-cursor.is-sampling::after {
  width: 1px;
  height: 36px;
}

.coloring-canvas.is-sampler-active {
  cursor: none;
}

.sampler-cursor {
  --sampled-color: #ffffff;
  --sampler-lens-x: 18px;
  --sampler-lens-y: -96px;
  position: absolute;
  z-index: 24;
  left: var(--sampler-x, -160px);
  top: var(--sampler-y, -160px);
  display: none;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.sampler-cursor.is-visible {
  display: block;
}

.sampler-target {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border: 2px solid #55b8d0;
  border-radius: 999px;
  background: var(--sampled-color);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .96), 0 4px 12px rgba(30, 49, 54, .2);
  transform: translate(-50%, -50%);
}

.sampler-eyedropper {
  position: absolute;
  left: -2px;
  top: -22px;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #55b8d0;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .98)) drop-shadow(0 4px 7px rgba(30, 49, 54, .22));
}

.sampler-lens {
  position: absolute;
  left: var(--sampler-lens-x);
  top: var(--sampler-lens-y);
  width: 72px;
  height: 72px;
  overflow: visible;
  border: 3px solid rgba(255, 255, 255, .98);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(85, 184, 208, .88), 0 14px 28px rgba(30, 49, 54, .22);
}

.sampler-lens canvas {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: inherit;
  image-rendering: pixelated;
}

.sampler-lens-crosshair::before,
.sampler-lens-crosshair::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(25, 45, 50, .68);
  transform: translate(-50%, -50%);
}

.sampler-lens-crosshair::before {
  width: 24px;
  height: 1px;
}

.sampler-lens-crosshair::after {
  width: 1px;
  height: 24px;
}

.sampler-color-chip {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--sampled-color);
  box-shadow: 0 0 0 1px rgba(30, 49, 54, .28), 0 5px 12px rgba(30, 49, 54, .2);
}

.coloring-page-stage.is-processing-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.22), transparent 58%);
  animation: fill-stage-breathe 520ms ease-in-out infinite alternate;
}

@keyframes fill-target-pulse {
  from { transform: translate(-50%, -50%) scale(0.94); }
  to { transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes fill-stage-breathe {
  from { opacity: 0.25; }
  to { opacity: 0.65; }
}

.coloring-workspace figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(255, 255, 255, 0.72);
  padding: 10px 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.36)),
    linear-gradient(135deg, rgba(116, 215, 223, 0.36), rgba(255, 209, 102, 0.34));
  font-weight: 950;
}

.gallery-section {
  background:
    radial-gradient(circle at 86% 12%, rgba(233, 197, 140, 0.36), transparent 32%),
    linear-gradient(180deg, #eef5f4 0%, #f7f1e8 100%);
}

.gallery-section .section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  max-width: none;
  margin-bottom: 24px;
}

.vibe-gallery-logo {
  display: block;
  width: min(420px, 88vw);
  height: auto;
}

.submission-form {
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42)),
    linear-gradient(145deg, rgba(116, 215, 223, 0.18), rgba(255, 209, 102, 0.12));
  box-shadow: 0 20px 48px rgba(31, 125, 143, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px) saturate(150%);
}

label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-weight: 900;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 8px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 8px 20px rgba(31, 125, 143, 0.08);
}

textarea {
  resize: vertical;
}

.form-note {
  min-height: 1.5em;
  margin: 0;
  color: var(--lagoon);
  font-weight: 800;
}

.fan-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.gallery-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px;
  border: 1px dashed rgba(38, 51, 58, 0.28);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.68);
  color: var(--muted);
  font-weight: 850;
  text-align: center;
}

.gallery-empty.is-hidden {
  display: none;
}

.fan-gallery figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 20px 48px rgba(31, 125, 143, 0.14);
}

.fan-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1.18;
  object-fit: cover;
  background: #fff;
}

.fan-gallery figcaption {
  display: grid;
  gap: 8px;
  min-height: 116px;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.72);
}

.fan-gallery span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
}

.vibe-button {
  min-height: 42px;
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.22)),
    linear-gradient(135deg, var(--mango), var(--coral));
  color: var(--ink);
  box-shadow: 0 12px 24px rgba(255, 121, 104, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.72);
  font-weight: 950;
  cursor: pointer;
}

.vibe-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(255, 121, 104, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 24px clamp(18px, 5vw, 72px);
  background: #26333a;
  color: #fff;
}

.site-footer span {
  color: rgba(255, 255, 255, 0.72);
}

.daily-section {
  grid-template-columns: minmax(280px, 0.52fr) minmax(380px, 1.2fr);
  align-items: start;
}

.coloring-panel {
  position: sticky;
  top: 92px;
}

.creator-toolbar {
  gap: 8px;
}

.creator-topbar,
.utility-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, 1fr));
}

.creator-topbar .button,
.utility-group .button {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
}

.tool-dock {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(52px, 1fr));
  gap: 7px;
}

.tool-button {
  min-width: 0;
  min-height: 46px;
  padding: 7px 6px;
}

.tool-button.compact {
  min-height: 34px;
  font-size: 1.35rem;
}

.zoom-button {
  font-size: 1.25rem;
  line-height: 1;
}

.recent-color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.recent-color-row::before {
  content: "Recent";
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.recent-color-row[hidden] {
  display: none;
}

.recent-color {
  width: 28px;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  background: var(--recent-color);
  box-shadow: 0 0 0 1px rgba(38, 51, 58, 0.18), 0 5px 12px rgba(102, 81, 63, 0.14);
  cursor: pointer;
}

.brush-settings {
  transition: opacity 160ms ease, transform 160ms ease;
}

.brush-settings.is-hidden {
  display: none;
}

.coloring-workspace {
  border-radius: 10px;
  box-shadow: 0 18px 46px rgba(31, 125, 143, 0.14);
}

.coloring-page-stage {
  min-height: min(76vh, 860px);
}

.page-loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  background: rgba(255, 253, 248, 0.82);
  color: var(--ink);
}

.page-loading[hidden] {
  display: none;
}

.page-loading.is-error .loading-spinner {
  display: none;
}

.page-loading-retry {
  min-height: 36px;
  padding: 7px 16px;
  border: 1px solid rgba(19, 113, 127, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.page-loading-retry:hover,
.page-loading-retry:focus-visible {
  border-color: var(--lagoon);
  outline: none;
}

.loading-spinner {
  width: 38px;
  aspect-ratio: 1;
  border: 4px solid rgba(26, 167, 184, 0.18);
  border-top-color: var(--lagoon);
  border-radius: 999px;
  animation: spin 850ms linear infinite;
}

.coloring-zoom-layer img.is-loading {
  opacity: 0.18;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1180px) {
  .intro-grid,
  .daily-section,
  .gallery-layout {
    grid-template-columns: 1fr;
  }

  .hero-board {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 0;
  }

  .fan-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coloring-panel {
    position: static;
    width: 100%;
  }

  .daily-section {
    gap: 24px;
    align-items: stretch;
  }

  .coloring-toolbar {
    max-width: none;
  }

  .coloring-workspace {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .site-header {
    position: sticky;
    top: 8px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    min-height: 0;
    width: calc(100% - 20px);
    margin-top: 8px;
    padding: 8px;
    border-radius: 22px;
  }

  .brand {
    align-items: center;
    gap: 8px;
    justify-content: center;
    flex: 1 1 100%;
  }

  .brand-mark {
    width: min(28vw, 96px);
    height: 38px;
  }

  .brand-text {
    font-size: clamp(1.28rem, 7vw, 1.72rem);
    white-space: nowrap;
  }

  .site-header nav {
    flex: 1 1 100%;
    justify-content: center;
    gap: 6px;
  }

  .site-header nav a {
    min-height: 36px;
    padding: 8px 11px;
    font-size: 0.84rem;
  }

  .coloring-toolbar {
    gap: 7px;
    padding: 9px;
    border-radius: 12px;
  }

  .hero-actions,
  .fan-gallery {
    grid-template-columns: 1fr;
  }

  h1 {
    max-width: 10ch;
    font-size: 3.4rem;
  }

  .hero-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 0;
  }

  .publisher-scene {
    align-items: center;
    justify-content: center;
    background-size: auto, cover;
  }

  .button,
  .text-link {
    width: 100%;
  }

  .creator-topbar,
  .utility-group {
    grid-template-columns: 1fr 1fr;
  }

  .tool-dock {
    position: fixed;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    z-index: 130;
    grid-template-columns: repeat(7, minmax(38px, 1fr));
    gap: 6px;
    border-color: rgba(255, 255, 255, 0.84);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.58)),
      linear-gradient(135deg, rgba(116, 215, 223, 0.34), rgba(255, 209, 102, 0.2));
    box-shadow: 0 18px 44px rgba(31, 125, 143, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(22px) saturate(170%);
  }

  .color-puck {
    min-width: 0;
  }

  .brush-settings,
  .utility-group {
    padding: 7px;
  }

  .brush-control {
    width: 100%;
  }

  .color-group.popover-panel {
    border-radius: 14px;
  }

  .coloring-page-stage {
    min-height: 62vh;
  }

  .daily-section {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 440px) {
  .tool-dock {
    grid-template-columns: repeat(7, minmax(34px, 1fr));
  }

  .tool-button {
    min-height: 42px;
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-board {
    display: grid;
  }

  .hero-page,
  .hero-page::after {
    animation: none;
  }

  .hero-page:not(.page-sunset),
  .hero-page::after {
    display: none;
  }

  .page-sunset {
    opacity: 1;
    transform: none;
  }

  .cover {
    animation: none;
    transition: none;
    transform: none;
    opacity: 1;
  }

  .publisher-scene {
    animation: none;
  }
}

/* Instacolor Studio redesign */
.studio-body { --studio-bg: #f6efe5; --studio-panel: rgba(255,255,255,.68); --studio-border: rgba(255,255,255,.76); --studio-ink: #26333a; --studio-muted: #6f7b7d; --studio-shadow: 0 22px 60px rgba(79,67,54,.16); min-height: 100svh; background: radial-gradient(circle at 18% 12%, rgba(255,214,121,.28), transparent 28%), radial-gradient(circle at 88% 18%, rgba(116,215,223,.24), transparent 30%), linear-gradient(180deg, #fbf7ef, var(--studio-bg)); overflow-x: hidden; }
.color-studio-layout { display: grid; gap: clamp(18px, 3vw, 34px); min-height: 100svh; padding: max(12px, env(safe-area-inset-top)) clamp(12px, 2vw, 24px) 34px; }
.studio-topbar { position: sticky; top: max(10px, env(safe-area-inset-top)); z-index: 130; display: grid; grid-template-columns: minmax(170px, auto) 1fr auto; gap: 12px; align-items: center; width: min(100%, 1380px); min-height: 64px; margin: 0 auto; padding: 8px; border: 1px solid var(--studio-border); border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.48)); box-shadow: 0 16px 46px rgba(80,70,57,.13), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(24px) saturate(150%); }
.studio-brand, .mode-tabs, .topbar-actions, .discover-actions, .share-actions, .gallery-post-flow { display: flex; align-items: center; }
.studio-brand { gap: 10px; min-width: 0; padding: 4px 10px 4px 6px; color: var(--studio-ink); font-family: "Marker Felt", "Cooper Black", "Trebuchet MS", ui-rounded, system-ui, sans-serif; font-size: clamp(1.04rem, 2vw, 1.36rem); font-weight: 950; line-height: 1; text-decoration: none; white-space: nowrap; }
.studio-brand-mark { width: clamp(60px, 8vw, 92px); height: 38px; }
.studio-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.mode-tabs { justify-content: center; gap: 5px; min-width: 0; }
.mode-tabs a, .studio-command, .studio-icon-button, .tool-button { min-width: 48px; min-height: 48px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.42)); color: var(--studio-ink); box-shadow: 0 10px 26px rgba(71,62,50,.1), inset 0 1px 0 rgba(255,255,255,.9); touch-action: manipulation; transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease; backdrop-filter: blur(18px) saturate(150%); }
.mode-tabs a { display: inline-grid; place-items: center; min-height: 42px; padding: 0 14px; color: rgba(38,51,58,.76); font-size: .9rem; font-weight: 850; text-decoration: none; }
.studio-command { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; font-weight: 900; text-align: center; cursor: pointer; }
.studio-command.primary { border-color: rgba(255,255,255,.88); background: linear-gradient(135deg, #26333a, #3f5960); color: #fff; }
.studio-command.ghost { background: rgba(255,255,255,.34); }
.studio-icon-button, .tool-button { display: inline-grid; place-items: center; padding: 0; cursor: pointer; }
.studio-icon-button svg, .tool-button svg { width: 22px; height: 22px; fill: currentColor; }
.studio-icon-button.compact { min-width: 42px; min-height: 42px; }
.tool-button:disabled, .studio-command:disabled { cursor: not-allowed; opacity: .42; transform: none; }
@media (hover: hover) and (pointer: fine) { .studio-command:hover, .studio-icon-button:hover, .tool-button:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.95); background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.54)); box-shadow: 0 14px 34px rgba(71,62,50,.16), inset 0 1px 0 rgba(255,255,255,.94); } }
.studio-command:active, .studio-icon-button:active, .tool-button:active { transform: scale(.96); }
.tool-button.is-active, .tool-button[aria-pressed="true"], .studio-icon-button.is-active { background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.52)), linear-gradient(135deg, rgba(242,111,99,.34), rgba(116,215,223,.28)); box-shadow: 0 14px 34px rgba(242,111,99,.16), inset 0 0 0 2px rgba(255,255,255,.72); }
[data-tooltip] { position: relative; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 220; width: max-content; max-width: 180px; padding: 7px 9px; border-radius: 999px; background: rgba(38,51,58,.9); color: #fff; font-size: .72rem; font-weight: 850; line-height: 1; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity 140ms ease, transform 140ms ease; }
@media (hover: hover) and (pointer: fine) { [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); } }

.cyv-app .unified-tool-rail [data-tooltip]::after {
  display: none;
}

.main-pill-tooltip {
  position: fixed;
  z-index: 1000;
  width: max-content;
  max-width: min(180px, calc(100vw - 20px));
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(38, 51, 58, .94);
  color: #fff;
  box-shadow: 0 5px 16px rgba(24, 34, 37, .16);
  font-size: .72rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.main-pill-tooltip[hidden] {
  display: none;
}
.topbar-actions { justify-content: flex-end; gap: 8px; }
.studio-kicker { margin: 0 0 7px; color: #4f7f86; font-size: .74rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.studio-mode-section { width: min(100%, 1380px); margin: 0 auto; }
.discover-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; padding: 8px clamp(6px, 1vw, 12px) 0; }
.discover-copy h1, .section-heading h2, .drawer-header h2, .share-card h2 { margin: 0; color: var(--studio-ink); font-size: clamp(1.8rem, 4vw, 4.2rem); line-height: .98; }
.discover-copy p:not(.studio-kicker) { max-width: 62ch; margin: 10px 0 0; color: var(--studio-muted); font-size: 1.02rem; font-weight: 650; }
.discover-actions { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.discover-actions .studio-icon-button {
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 48px;
}
.discover-actions .studio-icon-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.studio-shell { position: relative; display: grid; min-height: min(76svh, 880px); padding: 0 clamp(64px, 7vw, 104px) clamp(92px, 10vw, 118px); }
.canvas-stage.coloring-workspace { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: min(76svh, 880px); margin: 0; overflow: hidden; border: 1px solid var(--studio-border); border-radius: 28px; background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.52)), linear-gradient(180deg, rgba(241,235,224,.9), rgba(255,255,255,.82)); box-shadow: var(--studio-shadow), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter: blur(22px) saturate(145%); }
.stage-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 10px; }
.stage-header h2 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.08; }
.canvas-stage .coloring-page-stage { min-height: 0; height: 100%; border-radius: 18px; margin: 0 18px; background: linear-gradient(45deg, rgba(38,51,58,.035) 25%, transparent 25%), linear-gradient(-45deg, rgba(38,51,58,.035) 25%, transparent 25%), #fffefa; background-size: 20px 20px; touch-action: pan-y; }
.canvas-stage .coloring-zoom-layer { width: var(--page-width, min(100%, calc((100svh - 260px) * var(--page-aspect)))); height: var(--page-height, auto); max-width: min(72vw, 700px); max-height: calc(100svh - 260px); filter: drop-shadow(0 22px 42px rgba(60,51,40,.18)); }
.canvas-stage .coloring-zoom-layer img { background: #fff; border-radius: 4px; }
.stage-caption { display: flex; justify-content: center; gap: 12px; padding: 10px 16px 14px; color: var(--studio-muted); font-size: .84rem; font-weight: 750; }
.stage-caption span:first-child { color: var(--studio-ink); }
.tool-dock { position: absolute; z-index: 100; top: 50%; right: auto; bottom: auto; left: 10px; display: grid; grid-template-columns: 1fr; grid-auto-flow: row; gap: 8px; padding: 8px; border: 1px solid var(--studio-border); border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.42)); box-shadow: 0 18px 46px rgba(66,56,45,.16), inset 0 1px 0 rgba(255,255,255,.88); transform: translateY(-50%); backdrop-filter: blur(24px) saturate(155%); }
.tool-button.danger[data-confirm="true"] { background: linear-gradient(135deg, #f26f63, #e34d41); color: #fff; }
.color-dock { position: absolute; z-index: 105; left: 50%; bottom: 14px; display: flex; align-items: center; gap: 10px; max-width: min(calc(100% - 24px), 1080px); min-height: 72px; padding: 10px; border: 1px solid var(--studio-border); border-radius: 999px; background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.5)); box-shadow: 0 18px 46px rgba(66,56,45,.16), inset 0 1px 0 rgba(255,255,255,.9); transform: translateX(-50%); backdrop-filter: blur(24px) saturate(155%); }
.current-color { width: 50px; height: 50px; border: 3px solid #fff; border-radius: 999px; background: var(--puck-color); box-shadow: 0 0 0 1px rgba(38,51,58,.12), 0 10px 22px rgba(38,51,58,.14); }
.color-dock .swatches, .color-dock #color-popover { position: static; display: flex !important; flex-wrap: nowrap; align-items: center; gap: 7px; width: auto; max-height: none; overflow: visible; padding: 0; border: 0; background: transparent; box-shadow: none; transform: none; }
.swatch, .recent-color, .favorite-color, .custom-color-control { width: 38px; height: 38px; min-width: 38px; border: 2px solid rgba(255,255,255,.92); border-radius: 999px; background: var(--swatch, var(--recent-color, var(--favorite-color, #fff))); box-shadow: 0 8px 16px rgba(38,51,58,.12), inset 0 1px 0 rgba(255,255,255,.44); cursor: pointer; }
.swatch.is-active, .recent-color.is-active, .favorite-color.is-active { outline: 3px solid rgba(38,51,58,.72); outline-offset: 3px; }
.custom-color-control { position: relative; display: grid; place-items: center; overflow: visible; background: conic-gradient(from 0deg, #f26f63, #f7c65f, #2ec4b6, #4c6fff, #b78bd8, #f26f63); }
.custom-color-control::after { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--studio-ink); font-weight: 950; }
.custom-color-control::after { pointer-events: none; }
.custom-color-control input { position: absolute; inset: -10px; z-index: 2; width: auto; height: auto; opacity: 0; cursor: pointer; pointer-events: none; }
.recent-color-row, .favorite-color-row { display: flex; gap: 6px; }
.brush-settings { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.brush-control { display: flex; align-items: center; gap: 8px; min-width: 190px; color: var(--studio-muted); font-size: .82rem; font-weight: 850; }
.brush-control input { width: 128px; accent-color: var(--puck-color, #f26f63); }
.brush-size-preview { display: grid; place-items: center; width: 34px; height: 34px; }
.brush-size-preview::after { content: ""; width: var(--brush-size-preview, 12px); height: var(--brush-size-preview, 12px); max-width: 30px; max-height: 30px; border-radius: 999px; background: var(--marker-color, #f26f63); }
.size-presets { display: flex; align-items: center; gap: 7px; }
.size-presets button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.78); border-radius: 999px; background: rgba(255,255,255,.52); cursor: pointer; }
.size-presets button::after { content: ""; border-radius: 999px; background: var(--studio-ink); }
.size-presets [data-size="6"]::after { width: 7px; height: 7px; } .size-presets [data-size="14"]::after { width: 14px; height: 14px; } .size-presets [data-size="28"]::after { width: 23px; height: 23px; }
.share-panel, .saved-work-dialog { position: fixed; inset: 0; z-index: 200; }
.saved-work-dialog { z-index: 260; display: grid; place-items: center; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.share-panel[hidden], .saved-work-dialog[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(38,51,58,.26); backdrop-filter: blur(3px); }
.saved-work-scrim { position: absolute; inset: 0; background: rgba(38,51,58,.34); backdrop-filter: blur(5px); }
.drawer-panel, .share-card { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); gap: 14px; width: min(720px, calc(100% - 24px)); padding: 18px; border: 1px solid var(--studio-border); border-radius: 28px; background: linear-gradient(135deg, rgba(255,255,255,.9), rgba(255,255,255,.68)); box-shadow: 0 28px 76px rgba(33,45,50,.24), inset 0 1px 0 rgba(255,255,255,.92); backdrop-filter: blur(28px) saturate(155%); }
.share-card { grid-template-rows: auto auto auto auto auto; width: min(460px, calc(100% - 24px)); bottom: auto; }
.saved-work-card { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; width: min(520px, 100%); padding: 16px; border: 1px solid var(--studio-border); border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,255,255,.78)); box-shadow: 0 28px 76px rgba(33,45,50,.28), inset 0 1px 0 rgba(255,255,255,.94); color: var(--studio-ink); backdrop-filter: blur(24px) saturate(150%); }
.saved-work-card img { width: 112px; aspect-ratio: .74; object-fit: contain; align-self: start; border-radius: 12px; background: #fffefa; box-shadow: inset 0 0 0 1px rgba(38,51,58,.08); }
.saved-work-copy { display: grid; gap: 7px; align-content: start; min-width: 0; }
.saved-work-kicker { margin: 0; color: #2f6972; font-size: .76rem; font-weight: 950; text-transform: uppercase; letter-spacing: .06em; }
.saved-work-copy h2 { margin: 0; color: var(--studio-ink); font-size: clamp(1.45rem, 4vw, 2.1rem); line-height: 1; }
.saved-work-copy p:last-child { margin: 0; color: var(--studio-muted); font-size: .92rem; font-weight: 750; line-height: 1.35; }
.saved-work-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.studio-command.subtle { border-color: transparent; background: transparent; box-shadow: none; color: var(--studio-muted); }
@media (max-width: 520px) {
  .saved-work-card { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .saved-work-card img { width: 82px; }
  .saved-work-actions { grid-template-columns: 1fr; }
}
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.drawer-header h2, .share-card h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); }
.gallery-post-flow input { width: 100%; min-height: 48px; border: 1px solid rgba(38,51,58,.1); border-radius: 999px; padding: 0 16px; background: rgba(255,255,255,.74); color: var(--studio-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.86); }
.page-choice { display: grid; grid-template-rows: minmax(220px, 1fr) auto; gap: 10px; min-height: 306px; border: 1px solid rgba(255,255,255,.76); border-radius: 18px; padding: 10px; background: rgba(255,255,255,.62); color: var(--studio-ink); box-shadow: 0 12px 26px rgba(71,62,50,.1), inset 0 1px 0 rgba(255,255,255,.84); text-align: left; cursor: pointer; }
.page-choice.is-current { outline: 3px solid rgba(38,51,58,.55); outline-offset: 2px; }
.page-thumb { display: grid; place-items: center; overflow: hidden; min-height: 220px; border-radius: 12px; background: #fffefa; }
.page-thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center center; }
.page-card-copy { display: grid; gap: 6px; }
.page-card-copy strong { font-size: .98rem; line-height: 1.08; }
.page-meta, .page-tags { display: none; }
.page-meta span, .page-tags span { border-radius: 999px; padding: 4px 7px; background: rgba(38,51,58,.07); color: var(--studio-muted); font-size: .7rem; font-weight: 850; }
.start-coloring-label { color: #2f6972; font-size: .82rem; font-weight: 950; }
.page-load-more { justify-self: center; width: min(100%, 320px); }
.share-actions, .gallery-post-flow { gap: 10px; flex-wrap: wrap; }
.gallery-post-flow { display: grid; }
.gallery-post-flow label { display: grid; gap: 7px; color: var(--studio-muted); font-size: .82rem; font-weight: 850; }
.gallery-section, .books-section { padding: clamp(22px, 4vw, 54px) clamp(4px, 1vw, 12px); }
.section-heading { margin-bottom: 18px; }
.fan-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.gallery-empty { grid-column: 1 / -1; margin: 0; padding: 32px; border: 1px solid var(--studio-border); border-radius: 24px; background: var(--studio-panel); color: var(--studio-muted); font-size: 1.02rem; font-weight: 850; text-align: center; box-shadow: var(--studio-shadow); }
.fan-gallery figure { overflow: hidden; margin: 0; border: 1px solid var(--studio-border); border-radius: 22px; background: var(--studio-panel); box-shadow: var(--studio-shadow); }
.fan-gallery img { width: 100%; aspect-ratio: .78; object-fit: cover; background: #fff; }
.fan-gallery figcaption { display: grid; gap: 6px; padding: 12px; }
.gallery-card-meta { color: var(--studio-muted); font-size: .82rem; font-weight: 750; }
.color-this-page { min-height: 38px; border: 1px solid rgba(255,255,255,.78); border-radius: 999px; background: rgba(255,255,255,.62); color: var(--studio-ink); font-weight: 900; cursor: pointer; }
.studio-toast { position: fixed; z-index: 1400; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom)); max-width: min(92vw, 420px); padding: 10px 14px; border-radius: 999px; background: rgba(38,51,58,.92); color: #fff; font-size: .88rem; font-weight: 850; box-shadow: 0 18px 44px rgba(38,51,58,.24); transform: translateX(-50%); }
body.studio-fullscreen { overflow: hidden; }
body.studio-fullscreen .studio-topbar, body.studio-fullscreen .discover-section, body.studio-fullscreen .gallery-section, body.studio-fullscreen .books-section { display: none; }
body.studio-fullscreen .color-studio-layout { padding: 0; }
body.studio-fullscreen .studio-shell, body.studio-fullscreen .canvas-stage.coloring-workspace { width: 100vw; height: 100svh; min-height: 100svh; border-radius: 0; padding-left: clamp(62px, 7vw, 104px); padding-right: clamp(8px, 2vw, 20px); }
body.studio-fullscreen .canvas-stage .coloring-zoom-layer { max-height: calc(100svh - 140px); }
@media (orientation: landscape) and (max-width: 1180px) { .studio-shell { min-height: 74svh; padding-right: 16px; padding-left: 70px; } .canvas-stage .coloring-zoom-layer { max-width: 58vw; } .color-dock { max-width: min(calc(100% - 22px), 900px); } }
@media (max-width: 980px) { .studio-topbar { grid-template-columns: 1fr auto; border-radius: 26px; } .mode-tabs { order: 3; grid-column: 1 / -1; justify-content: stretch; } .mode-tabs a { flex: 1; } .topbar-actions { gap: 6px; } .topbar-actions .autosave-note { display: none; } .discover-section { grid-template-columns: 1fr; } .discover-actions { justify-content: flex-start; } .studio-shell { padding: 0 10px 114px 72px; } .color-dock { width: calc(100% - 20px); border-radius: 24px; overflow-x: auto; justify-content: flex-start; } .brush-control { min-width: 160px; } }
@media (max-width: 720px) { .color-studio-layout { padding: 8px 8px 24px; } .studio-brand span:last-child { display: none; } .studio-brand-mark { width: 68px; } .topbar-actions .studio-command { padding: 0 12px; } .discover-copy h1 { font-size: clamp(2rem, 12vw, 3.35rem); } .studio-shell { min-height: 74svh; padding: 0 0 126px; } .canvas-stage.coloring-workspace { min-height: 72svh; border-radius: 22px; } .stage-header { padding: 12px 12px 8px; } .stage-caption { display: none; } .canvas-stage .coloring-page-stage { margin: 0 10px 10px; } .canvas-stage .coloring-zoom-layer { width: var(--page-width, min(100%, calc((100svh - 250px) * var(--page-aspect)))); height: var(--page-height, auto); max-width: 94vw; max-height: calc(100svh - 250px); } .tool-dock { top: auto; right: auto; left: 50%; bottom: 88px; grid-auto-flow: column; grid-template-columns: repeat(9, 48px); max-width: calc(100% - 16px); overflow-x: auto; transform: translateX(-50%); } .tool-button { min-width: 48px; } .color-dock { bottom: 8px; min-height: 70px; padding: 8px; } .swatch, .recent-color, .favorite-color, .custom-color-control { width: 34px; height: 34px; min-width: 34px; } .brush-settings { min-width: 218px; } .drawer-panel { left: 8px; right: 8px; width: auto; border-radius: 24px; } .page-choice { grid-template-rows: minmax(260px, 1fr) auto; min-height: 346px; } .page-thumb { min-height: 260px; } .share-card { left: 8px; right: 8px; width: auto; } }
@media (max-width: 440px) { .mode-tabs a { padding: 0 8px; font-size: .78rem; } .topbar-actions .studio-command { min-width: 44px; min-height: 44px; padding: 0 10px; font-size: .82rem; } .stage-header h2 { font-size: 1rem; } .brush-control input { width: 96px; } .recent-color-row { display: none; } }

/* Instacolor Studio v2: canvas-first tablet workflow */
.studio-body {
  --studio-bg: #f4efe7;
  --studio-panel: rgba(255,255,255,.78);
  --studio-border: rgba(44,38,31,.1);
  --studio-ink: #272f31;
  --studio-muted: #68706f;
  --studio-shadow: 0 18px 46px rgba(38,31,24,.12);
  --studio-control: rgba(249, 247, 242, .72);
  --studio-control-strong: rgba(39, 47, 49, .88);
  --studio-control-border: rgba(39, 47, 49, .1);
  --studio-icon-size: 20px;
  background: #f4efe7;
  overscroll-behavior: none;
}
.color-studio-layout { gap: clamp(14px, 2vw, 24px); padding-inline: clamp(8px, 1.5vw, 18px); }
.studio-topbar { position: static; top: auto; min-height: 52px; border-radius: 22px; box-shadow: 0 10px 28px rgba(38,31,24,.08); }
.studio-topbar .mode-tabs a { min-height: 38px; }
.studio-shell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  width: min(100%, 1460px);
  height: min(100dvh, 920px);
  min-height: 680px;
  margin: 0 auto;
  padding: max(6px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  overflow: hidden;
  border: 1px solid rgba(44,38,31,.08);
  border-radius: clamp(18px, 2.4vw, 30px);
  background: #f7f2ea;
  box-shadow: 0 24px 70px rgba(38,31,24,.12), inset 0 1px 0 rgba(255,255,255,.8);
  touch-action: pan-y;
}
.studio-session-bar {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 42px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px clamp(6px, 1vw, 10px);
  border: 1px solid rgba(44,38,31,.08);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(246,242,234,.62));
  box-shadow: 0 14px 34px rgba(38,31,24,.11), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(28px) saturate(150%);
  color: var(--studio-ink);
  transition: opacity 120ms ease-out;
}
.mac-fullscreen-button {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  right: auto;
  z-index: 108;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(44, 57, 57, .1);
  border-radius: 12px;
  padding: 0;
  background: linear-gradient(135deg, #0f555b, #0b8187);
  color: #fff;
  box-shadow:
    0 10px 24px rgba(15, 85, 91, .2),
    inset 0 1px 0 rgba(255, 255, 255, .24);
  cursor: pointer;
  touch-action: manipulation;
  backdrop-filter: blur(16px) saturate(125%);
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, opacity 120ms ease;
}
.mac-fullscreen-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mac-fullscreen-button:hover {
  border-color: rgba(255, 255, 255, .34);
  background: linear-gradient(135deg, #12656c, #0d9298);
  color: #fff;
  box-shadow:
    0 12px 28px rgba(15, 85, 91, .26),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}
.mac-fullscreen-button:focus-visible {
  outline: 3px solid rgba(15, 127, 130, .28);
  outline-offset: 4px;
}
.mac-fullscreen-button.is-active {
  background: linear-gradient(135deg, #0f555b, #0b8187);
  color: #fff;
}
.session-title { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.session-title h2 { flex: 0 0 auto; overflow: hidden; margin: 0; font-size: clamp(.92rem, 1.2vw, 1.05rem); line-height: 1; white-space: nowrap; text-overflow: ellipsis; }
.session-title span, .studio-session-bar .autosave-note { color: var(--studio-muted); font-size: .75rem; font-weight: 800; }
.session-status-strip {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  max-width: min(72vw, 640px);
  overflow: hidden;
  padding: 0;
}
.session-status-strip span {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 18px;
  padding: 2px 5px;
  border: 1px solid rgba(38, 51, 58, .06);
  border-radius: 999px;
  background: rgba(255, 255, 255, .52);
  line-height: 1;
  font-size: .68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .84;
}
.session-done { min-height: 42px; padding-inline: 15px; }
.minimal-session-bar .session-title {
  padding-inline: 8px 4px;
}
.minimal-session-bar .session-title h2 {
  max-width: min(34vw, 360px);
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 20px rgba(38, 31, 24, .08);
  font-size: clamp(.88rem, 1.05vw, .98rem);
}
.minimal-session-bar .session-share-button svg {
  transform: translateY(-1px);
}
.studio-session-bar.minimal-session-bar {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: max(58px, calc(env(safe-area-inset-left) + 58px));
  z-index: 107;
  width: min(calc(100% - 76px), 760px);
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.canvas-stage.coloring-workspace {
  position: relative;
  display: block;
  min-height: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.canvas-stage .coloring-page-stage {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding-inline: clamp(72px, 11vw, 136px);
  overflow: hidden;
  border-radius: 18px;
  background: #f1ece3;
  touch-action: pan-y;
}

.canvas-stage .coloring-zoom-layer {
  width: var(--page-width, min(100%, calc((100dvh - 150px) * var(--page-aspect))));
  height: var(--page-height, auto);
  max-width: min(calc(100vw - clamp(176px, 26vw, 328px)), 980px);
  max-height: calc(100dvh - 150px);
  aspect-ratio: var(--page-aspect, .75);
  filter: drop-shadow(0 18px 34px rgba(31,26,20,.18));
  transform: translate(var(--pan-x, 0), var(--pan-y, 0)) rotate(var(--view-rotation, 0deg)) scale(var(--zoom-scale, 1));
  transform-origin: center;
}
.canvas-stage .coloring-zoom-layer img {
  background: #fffdfa;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(20,18,16,.06);
}
.canvas-tool-cluster {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  right: max(8px, env(safe-area-inset-right));
  z-index: 180;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(44, 38, 31, .08);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(247, 244, 238, .64));
  box-shadow: 0 16px 40px rgba(38, 31, 24, .13), inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(30px) saturate(155%);
}
.canvas-tool-button,
.color-puck-button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
}
.canvas-tool-button.is-active {
  border-color: rgba(255, 255, 255, .8);
  background: var(--studio-control-strong);
  color: #fff;
  box-shadow: 0 10px 24px rgba(38, 31, 24, .18), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.canvas-tool-button svg {
  width: var(--studio-icon-size);
  height: var(--studio-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.canvas-tool-button .default-brush-icon,
.brush-size-icon .default-brush-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition: filter .16s ease;
  pointer-events: none;
  user-select: none;
}
.canvas-tool-button.is-active .default-brush-icon {
  filter: invert(1);
}
.color-puck-button {
  display: block;
  border: 3px solid rgba(255, 255, 255, .96);
  border-radius: 999px;
  padding: 0;
  background: var(--puck-color, #f7f3ea);
  box-shadow: 0 0 0 1px rgba(38, 51, 58, .12), 0 10px 22px rgba(38, 51, 58, .14);
  cursor: pointer;
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
}
.color-puck-button.is-active {
  outline: 3px solid rgba(39, 47, 49, .74);
  outline-offset: 3px;
}
.color-menu {
  left: var(--popover-left, auto) !important;
  top: var(--popover-top, 116px);
  right: auto;
  bottom: auto;
  display: grid;
  gap: 10px;
  width: min(var(--popover-width, 360px), calc(100vw - 24px));
  max-height: min(var(--popover-max-height, 460px), calc(100dvh - 24px));
  overflow: auto;
  padding: 12px;
  border-radius: 22px;
}
.color-tray-topline {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.color-current-chip {
  width: 46px;
  height: 46px;
  border: 3px solid rgba(255, 255, 255, .98);
  border-radius: 999px;
  background: var(--puck-color, #FF0000);
  box-shadow: 0 0 0 1px rgba(38,47,49,.14), 0 10px 22px rgba(38,31,24,.16);
}
.color-menu-disc {
  position: relative;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(44, 38, 31, .08);
  border-radius: 999px;
  padding: 6px 12px 6px 7px;
  background: rgba(249, 247, 242, .62);
  color: var(--studio-ink);
  font-size: .86rem;
  font-weight: 900;
  cursor: pointer;
}
.color-menu-disc::before {
  content: "";
  width: 32px;
  height: 32px;
  border: 2px solid rgba(255, 255, 255, .96);
  border-radius: 999px;
  background: conic-gradient(from 0deg, #f26f63, #f7c65f, #2ec4b6, #4c6fff, #b78bd8, #f26f63);
  box-shadow: 0 7px 16px rgba(38, 31, 24, .14);
}
.color-menu-disc input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.color-menu-section {
  display: grid;
  gap: 7px;
}
.color-menu-section strong {
  color: var(--studio-muted);
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.classic-color-row,
.value-color-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 3px 6px;
  scrollbar-width: none;
}
.classic-color-row::-webkit-scrollbar,
.value-color-row::-webkit-scrollbar,
.compact-color-row::-webkit-scrollbar {
  display: none;
}
.color-menu-section-primary {
  margin-top: 1px;
}
.color-menu .swatch {
  width: 44px;
  height: 44px;
  min-width: 44px;
}
.color-menu .favorite-sample-strip {
  display: flex;
  gap: 8px;
  padding: 2px 3px 4px;
}
.color-menu .compact-color-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 3px 5px;
}
.bottom-control-strip {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: max(6px, env(safe-area-inset-bottom));
  z-index: 45;
  display: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 4px 5px;
  width: min(470px, calc(100% - 24px));
  border: 1px solid rgba(44,38,31,.07);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(247,244,238,.64));
  box-shadow: 0 12px 32px rgba(38,31,24,.12), inset 0 1px 0 rgba(255,255,255,.92);
  transform: translateX(-50%);
  backdrop-filter: blur(30px) saturate(155%);
  transition: opacity 120ms ease-out;
}
.bottom-control-strip .tool-button svg,
.studio-icon-button svg,
.tool-mode-icon svg,
.brush-size-icon svg,
.tool-glyph svg {
  width: var(--studio-icon-size);
  height: var(--studio-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brush-control input::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(39,47,49,.18);
}
.brush-control input::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 999px;
  background: var(--studio-control-strong);
  box-shadow: 0 5px 13px rgba(38,31,24,.22);
  -webkit-appearance: none;
  appearance: none;
}
.brush-control input::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(39,47,49,.18);
}
.brush-control input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.94);
  border-radius: 999px;
  background: var(--studio-control-strong);
  box-shadow: 0 5px 13px rgba(38,31,24,.22);
}
.bottom-control-strip .tool-button,
.bottom-control-strip .studio-icon-button.compact,
.studio-session-bar .studio-icon-button,
.palette-button {
  min-width: 34px;
  min-height: 34px;
  border-color: var(--studio-control-border);
  background: var(--studio-control);
  box-shadow: 0 8px 20px rgba(38,31,24,.08), inset 0 1px 0 rgba(255,255,255,.92);
}
.bottom-control-strip .studio-icon-button.compact {
  width: 34px;
  height: 34px;
}
.tool-mode-pill, .size-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  border: 1px solid rgba(44,38,31,.08);
  border-radius: 999px;
  padding: 0 13px;
  background: var(--studio-control);
  color: var(--studio-ink);
  box-shadow: 0 8px 20px rgba(38,31,24,.08), inset 0 1px 0 rgba(255,255,255,.9);
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.tool-mode-pill { min-width: 124px; }
.tool-mode-pill #active-tool-label { white-space: nowrap; }
.tool-mode-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--studio-control-strong); color: #fff; font-weight: 950; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 5px 12px rgba(38,31,24,.14); }
.tool-mode-icon svg { --studio-icon-size: 17px; }
.size-pill { display: none; min-width: 76px; }
.size-pill.is-visible { display: inline-flex; }
.brush-size-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--studio-control-strong);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 5px 12px rgba(38,31,24,.14);
}
.brush-size-icon svg {
  --studio-icon-size: 16px;
}
.bottom-control-strip .tool-mode-pill,
.bottom-control-strip .size-pill {
  display: none !important;
}
.active-palette { display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.active-palette::-webkit-scrollbar { display: none; }
.swatch, .recent-color, .favorite-color, .custom-color-control {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 2px solid rgba(255,255,255,.96);
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(38,31,24,.13), inset 0 1px 0 rgba(255,255,255,.4);
}
.swatch { background: var(--swatch, #fff); }
.recent-color { background: var(--recent-color, #fff); }
.favorite-color { background: var(--favorite-color, #fff); }
.swatch.is-active, .recent-color.is-active, .favorite-color.is-active { outline: 2px solid rgba(39,47,49,.78); outline-offset: 3px; box-shadow: 0 8px 18px rgba(38,31,24,.16), inset 0 1px 0 rgba(255,255,255,.4); }
.current-color { order: -1; width: 30px; height: 30px; min-width: 30px; border-width: 2px; }
.canvas-tool-cluster .color-puck-button.current-color {
  order: 0;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-width: 3px;
}
.color-menu .color-menu-disc.custom-color-control {
  width: 100%;
  height: auto;
  min-width: 0;
  border-radius: 16px;
}
.color-menu .color-menu-disc.custom-color-control input {
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
.favorite-sample-strip { order: 2; }
.palette-button { order: 3; }
.quick-custom-color {
  background: var(--puck-color, #1F3D2B);
}
.quick-custom-color::after {
  content: "+";
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255,255,255,.96);
  border-radius: 999px;
  background: var(--studio-ink);
  color: #fff;
  font-size: .62rem;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(38,31,24,.2);
}
.studio-popover,
.palette-drawer {
  position: absolute;
  z-index: 190;
  border: 1px solid rgba(44,38,31,.1);
  background: rgba(255,255,255,.86);
  box-shadow: 0 22px 58px rgba(38,31,24,.18), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(22px) saturate(150%);
}
.studio-popover[hidden], .palette-drawer[hidden] { display: none; }
.tool-popover {
  left: max(12px, env(safe-area-inset-left));
  bottom: calc(76px + env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
  width: min(300px, calc(100% - 24px));
  padding: 10px;
  border-radius: 20px;
}
.tool-choice {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-areas: "icon title" "icon sub";
  gap: 1px 10px;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  padding: 8px 10px;
  background: transparent;
  color: var(--studio-ink);
  text-align: left;
  cursor: pointer;
}
.tool-choice span { grid-area: icon; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(39,47,49,.08); font-weight: 950; }
.tool-choice .tool-glyph { color: var(--studio-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.tool-choice .tool-glyph svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tool-choice .tool-glyph svg path:first-child:nth-last-child(1),
.tool-choice .tool-glyph svg path:first-child:nth-last-child(2) { fill: none; }
.tool-choice.is-active .tool-glyph { background: var(--studio-ink); color: #fff; }
.tool-choice strong { grid-area: title; font-size: .92rem; }
.tool-choice em { grid-area: sub; color: var(--studio-muted); font-size: .74rem; font-style: normal; font-weight: 750; }
.tool-choice.is-active { background: rgba(139,94,52,.12); }
.brush-size-popover {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: grid;
  gap: 10px;
  width: min(380px, calc(100% - 20px));
  max-height: min(82dvh, 660px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .995), rgba(252, 250, 245, .99)),
    #fffefa;
  box-shadow:
    0 24px 70px rgba(34, 45, 49, .22),
    inset 0 1px 0 rgba(255, 255, 255, .98);
  transform: translateX(-50%);
  z-index: 220;
  backdrop-filter: blur(28px) saturate(145%);
}
.brush-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 4px 4px 2px;
  color: var(--studio-muted);
  font-size: .72rem;
  font-weight: 850;
}
.brush-panel-header strong {
  min-width: 0;
  color: var(--studio-ink);
  font-size: .9rem;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brush-panel-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(38, 51, 58, .07);
  border-radius: 16px;
  background: rgba(38, 51, 58, .06);
}
.brush-panel-tab {
  min-height: 34px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--studio-muted);
  font-size: .78rem;
  font-weight: 900;
  cursor: pointer;
}
.brush-panel-tab.is-active {
  background: rgba(255,255,255,.94);
  color: var(--studio-ink);
  box-shadow: 0 6px 16px rgba(38,51,58,.08), inset 0 1px 0 rgba(255,255,255,.86);
}
.brush-panel-view {
  display: grid;
  gap: 8px;
}
.brush-panel-view[hidden] {
  display: none;
}
.brush-panel-section {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid rgba(38, 51, 58, .07);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}
.brush-panel-section.compact {
  gap: 6px;
}
.brush-current-button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  border: 1px solid rgba(38,51,58,.08);
  border-radius: 16px;
  padding: 8px 10px;
  background: rgba(255,255,255,.9);
  color: var(--studio-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.brush-current-button span:not(.brush-preset-icon) {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.brush-current-button strong,
.brush-current-button em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brush-current-button strong {
  font-size: .9rem;
  line-height: 1.1;
}
.brush-current-button em {
  color: var(--studio-muted);
  font-size: .72rem;
  font-style: normal;
  font-weight: 850;
}
.brush-current-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .62;
}
.brush-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.brush-preset {
  display: grid;
  gap: 2px;
  min-height: 68px;
  border: 1px solid rgba(38, 51, 58, .08);
  border-radius: 15px;
  padding: 8px 6px 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,247,242,.88));
  color: var(--studio-ink);
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .brush-preset:hover {
    transform: translateY(-1px);
    border-color: rgba(23, 109, 117, .2);
    box-shadow: 0 10px 20px rgba(38,51,58,.08), inset 0 1px 0 rgba(255,255,255,.9);
  }
}
.brush-preset-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 auto 2px;
  border-radius: 999px;
  background: rgba(39,47,49,.08);
  color: var(--studio-ink);
}
.brush-preset-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brush-preset strong {
  font-size: .78rem;
  line-height: 1.05;
}
.brush-preset span:not(.brush-preset-icon) {
  color: var(--studio-muted);
  font-size: .66rem;
  font-weight: 800;
}
.brush-preset.is-active {
  border-color: rgba(23, 109, 117, .9);
  background: linear-gradient(180deg, #176d75, #0f555b);
  color: #fff;
  box-shadow:
    0 12px 24px rgba(15, 85, 91, .18),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.brush-preset.is-active .brush-preset-icon {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.brush-preset.is-active span:not(.brush-preset-icon) {
  color: rgba(255,255,255,.78);
}
@media (max-width: 440px) {
  .brush-preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brush-preset { min-height: 64px; }
}
.brush-control {
  display: grid;
  grid-template-columns: minmax(72px, .7fr) minmax(112px, 1fr) minmax(38px, auto);
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  min-height: 36px;
  color: var(--studio-muted);
  font-size: .78rem;
  font-weight: 850;
}
.brush-control input { width: 100%; }
.brush-control span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brush-control span:last-child {
  min-width: 36px;
  color: var(--studio-muted);
  font-size: .78rem;
  font-weight: 900;
  text-align: right;
}
.brush-toggle {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 10px 6px 8px;
  border: 1px solid rgba(38,51,58,.07);
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  color: var(--studio-ink);
  font-size: .82rem;
  font-weight: 850;
}
.brush-toggle input {
  appearance: none;
  position: relative;
  width: 38px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(38, 51, 58, .18);
  box-shadow: inset 0 1px 2px rgba(38,51,58,.18);
  cursor: pointer;
  transition: background 140ms ease;
}
.brush-toggle input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(38,51,58,.18);
  transition: transform 140ms ease;
}
.brush-toggle input:checked {
  background: linear-gradient(135deg, #176d75, #0d9298);
}
.brush-toggle input:checked::after {
  transform: translateX(16px);
}
.brush-toggle input:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.brush-toggle span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-drawer {
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  display: grid;
  gap: 12px;
  max-height: min(42dvh, 330px);
  padding: 8px 14px 14px;
  border-radius: 24px;
}
.palette-handle { width: 42px; height: 4px; margin: 0 auto; border-radius: 999px; background: rgba(39,47,49,.22); }
.palette-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.palette-header div { display: grid; gap: 1px; }
.palette-header strong { font-size: 1rem; }
.palette-header span { color: var(--studio-muted); font-size: .78rem; font-weight: 800; }
.palette-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(152px, 190px);
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
}
.palette-tab {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 58px;
  border: 1px solid rgba(44,38,31,.08);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,.58);
  color: var(--studio-ink);
  text-align: left;
  font-weight: 850;
}
.palette-tab strong {
  font-size: .84rem;
  line-height: 1.05;
}
.palette-tab span {
  color: var(--studio-muted);
  font-size: .68rem;
  line-height: 1.15;
}
.palette-tab.is-active { background: var(--studio-ink); color: #fff; }
.palette-tab.is-active span { color: rgba(255,255,255,.76); }
.palette-family {
  display: grid;
  gap: 8px;
  padding: 3px 3px 7px;
}
.palette-context {
  display: grid;
  gap: 2px;
  color: var(--studio-muted);
  font-size: .76rem;
  font-weight: 800;
}
.palette-context strong {
  color: var(--studio-ink);
  font-size: .86rem;
}
.palette-swatch-row,
.recent-color-row,
.favorite-color-row { display: flex; gap: 10px; overflow-x: auto; padding: 5px 3px 7px; }
.favorite-color-row[hidden], .recent-color-row[hidden] { display: none; }
.favorite-color-row::before, .recent-color-row::before {
  flex: 0 0 auto;
  align-self: center;
  min-width: 58px;
  color: var(--studio-muted);
  font-size: .72rem;
  font-weight: 900;
}
.favorite-color-row::before { content: "Favorites"; }
.recent-color-row::before { content: "Recent"; }
.more-menu {
  position: fixed;
  right: var(--more-menu-right, max(12px, env(safe-area-inset-right)));
  top: var(--more-menu-top, calc(58px + env(safe-area-inset-top)));
  display: grid;
  min-width: 210px;
  padding: 8px;
  border-radius: 18px;
}
.menu-row {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 0 12px;
  background: transparent;
  color: var(--studio-ink);
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}
.menu-range {
  display: grid;
  grid-template-columns: 76px minmax(92px, 1fr) 42px;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--studio-ink);
  font-size: .82rem;
  font-weight: 850;
}
.menu-range input {
  width: 100%;
  accent-color: var(--studio-control-strong);
}
.menu-range span:last-child {
  color: var(--studio-muted);
  text-align: right;
}
.menu-row:hover, .tool-choice:hover { background: rgba(39,47,49,.07); }
.menu-row.danger { color: #b43d34; }
.menu-row.danger[data-confirm="true"] { background: #b43d34; color: #fff; }
.studio-shell.is-chrome-idle .studio-session-bar,
.studio-shell.is-chrome-idle .bottom-control-strip {
  opacity: .9;
}
.studio-shell.is-chrome-idle .current-color { opacity: 1; }
body.is-coloring-active { overscroll-behavior: contain; }
.canvas-stage .coloring-page-stage { touch-action: none; }
body.studio-fullscreen .studio-shell {
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(255, 255, 255, .075), transparent 62%),
    radial-gradient(820px 460px at 86% 22%, rgba(170, 214, 187, .07), transparent 68%),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .12)),
    #203b35;
  background-size: auto, auto, 34px 34px, 34px 34px, auto, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0 90px rgba(0, 0, 0, .34);
}
body.studio-fullscreen .canvas-stage.coloring-workspace {
  height: 100%;
  padding: 0;
  border-radius: 0;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(255, 255, 255, .075), transparent 62%),
    radial-gradient(820px 460px at 86% 22%, rgba(170, 214, 187, .07), transparent 68%),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .12)),
    #203b35;
  background-size: auto, auto, 34px 34px, 34px 34px, auto, auto;
}
body.studio-fullscreen .canvas-stage .coloring-page-stage {
  background:
    radial-gradient(660px 460px at 52% 48%, rgba(255, 255, 255, .065), transparent 68%),
    linear-gradient(90deg, rgba(255, 255, 255, .05), transparent 96px, transparent calc(100% - 96px), rgba(255, 255, 255, .045)),
    linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .02) 1px, transparent 1px),
    #1d342f;
  background-size: auto, auto, 30px 30px, 30px 30px, auto;
}
body.studio-fullscreen .canvas-stage .coloring-zoom-layer { max-height: calc(100dvh - 138px); }
@media (orientation: landscape) and (max-width: 1180px) {
  .studio-shell { height: min(82dvh, 760px); min-height: 620px; border-radius: 18px; }
  .canvas-stage .coloring-zoom-layer { width: var(--page-width, min(96%, calc((100dvh - 140px) * var(--page-aspect)))); height: var(--page-height, auto); max-width: 78vw; max-height: calc(100dvh - 140px); }
}
@media (max-width: 820px) {
  .studio-shell { height: min(84dvh, 860px); min-height: 640px; border-radius: 18px; }
  .studio-session-bar { grid-template-columns: minmax(0, 1fr) 38px 38px; }
  .studio-session-bar .autosave-note { display: none; }
  .bottom-control-strip { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .size-pill { display: none !important; }
  .current-color { width: 36px; height: 36px; min-width: 36px; }
  .active-palette { justify-content: flex-start; overflow-x: auto; }
  .swatch, .recent-color, .favorite-color, .custom-color-control { width: 32px; height: 32px; min-width: 32px; }
  .canvas-stage .coloring-page-stage { padding-inline: clamp(58px, 13vw, 116px); }
  .canvas-stage .coloring-zoom-layer { width: var(--page-width, min(100%, calc((100dvh - 146px) * var(--page-aspect)))); height: var(--page-height, auto); max-width: calc(100vw - clamp(136px, 30vw, 268px)); max-height: calc(100dvh - 146px); }
}
@media (max-width: 520px) {
  .studio-session-bar { grid-template-columns: minmax(0, 1fr) 38px 38px; }
  .bottom-control-strip { grid-template-columns: minmax(0, 1fr); bottom: max(6px, env(safe-area-inset-bottom)); }
  .bottom-control-strip .palette-button { display: none; }
  .active-palette .swatch:nth-of-type(n+7) { display: none; }
  .tool-mode-pill { padding-inline: 10px; }
  .tool-mode-pill #active-tool-label { max-width: 82px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .palette-drawer { max-height: 48dvh; }
}

/* Tablet compact studio shell */
@media (pointer: coarse) {
  .studio-body {
    background: #f2eee6;
  }

  .color-studio-layout {
    gap: 10px;
    min-height: 100dvh;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 18px max(8px, env(safe-area-inset-left));
  }

  .studio-shell {
    width: 100%;
    height: min(84dvh, 900px);
    min-height: 640px;
    margin: 0;
    padding: max(4px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    border: 1px solid rgba(44,38,31,.08);
    border-radius: 18px;
    background: #efebe3;
    box-shadow: 0 16px 40px rgba(38,31,24,.08), inset 0 1px 0 rgba(255,255,255,.76);
  }

  .studio-session-bar {
    top: max(5px, env(safe-area-inset-top));
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    grid-template-columns: minmax(0, 1fr) 36px 36px;
    gap: 5px;
    min-height: 38px;
    padding: 4px 5px;
    border-color: rgba(39,47,49,.08);
    border-radius: 12px;
    background: rgba(248,246,241,.74);
    box-shadow: 0 8px 22px rgba(38,31,24,.1), inset 0 1px 0 rgba(255,255,255,.86);
  }

  .studio-session-bar .autosave-note,
  .session-title span {
    display: none;
  }

  .session-title h2 {
    font-size: .9rem;
    font-weight: 850;
  }

  .session-done {
    min-height: 34px;
    padding-inline: 10px;
    border-radius: 10px;
    font-size: .78rem;
  }

  .studio-session-bar .studio-icon-button,
  .bottom-control-strip .tool-button,
  .palette-button {
    min-width: 34px;
    min-height: 34px;
    border-radius: 10px;
  }

  .studio-icon-button.compact {
    min-width: 34px;
    min-height: 34px;
  }

  .canvas-stage .coloring-page-stage {
    border-radius: 0;
    background: #ebe7df;
    padding-inline: clamp(78px, 12vw, 136px);
  }

  .canvas-stage .coloring-zoom-layer {
    width: var(--page-width, min(100%, calc((100dvh - 92px) * var(--page-aspect))));
    height: var(--page-height, auto);
    max-width: calc(100vw - clamp(184px, 28vw, 320px));
    max-height: calc(100dvh - 92px);
    filter: drop-shadow(0 13px 24px rgba(31,26,20,.16));
  }

  .bottom-control-strip .tool-button svg,
  .studio-icon-button svg,
  .tool-mode-icon svg,
  .tool-glyph svg {
    --studio-icon-size: 18px;
  }

  .brush-control input::-webkit-slider-runnable-track {
    height: 4px;
  }

  .brush-control input::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -7px;
  }

  .bottom-control-strip {
    bottom: max(6px, env(safe-area-inset-bottom));
    grid-template-columns: 30px minmax(0, 1fr) auto 34px 34px;
    gap: 5px;
    width: min(450px, calc(100vw - 138px));
    min-height: 40px;
    padding: 4px 5px;
    border-radius: 13px;
    background: rgba(248,246,241,.74);
    box-shadow: 0 12px 32px rgba(38,31,24,.12), inset 0 1px 0 rgba(255,255,255,.88);
  }

  .tool-mode-pill,
  .size-pill {
    display: none !important;
  }

  .current-color {
    order: -1;
    width: 30px;
    height: 30px;
    min-width: 30px;
  }

  .palette-button {
    order: 3;
  }

  .active-palette {
    order: 1;
    justify-content: flex-start;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .active-palette::-webkit-scrollbar {
    display: none;
  }

  .swatch,
  .recent-color,
  .favorite-color,
  .custom-color-control {
    width: 24px;
    height: 24px;
    min-width: 24px;
  }

  .swatch.is-active,
  .recent-color.is-active,
  .favorite-color.is-active {
    outline-width: 2px;
    outline-offset: 2px;
  }

  .tool-popover {
    left: max(6px, env(safe-area-inset-left));
    bottom: calc(56px + env(safe-area-inset-bottom));
    width: min(240px, calc(100vw - 12px));
    padding: 7px;
    border-radius: 14px;
  }

  .tool-choice {
    grid-template-columns: 30px 1fr;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: 10px;
  }

  .tool-choice span {
    width: 30px;
    height: 30px;
  }

  .tool-choice em {
    display: none;
  }

  .tool-choice.move-choice {
    display: none;
  }

  .palette-drawer {
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
    max-height: min(34dvh, 260px);
    padding: 6px 10px 10px;
    border-radius: 16px;
  }

  .drawer-panel,
  .share-card {
    top: max(7px, env(safe-area-inset-top));
    right: max(7px, env(safe-area-inset-right));
    bottom: max(7px, env(safe-area-inset-bottom));
    border-radius: 18px;
  }

  .gallery-section,
  .books-section {
    margin-top: 0;
  }
}

@media (min-width: 821px) and (max-width: 1180px) and (orientation: portrait) and (pointer: coarse) {
  .bottom-control-strip {
    width: min(450px, calc(100vw - 168px));
  }

  .canvas-stage .coloring-zoom-layer {
    max-width: calc(100vw - clamp(184px, 28vw, 320px));
  }
}

@media (max-width: 520px) and (pointer: coarse) {
  .canvas-stage .coloring-zoom-layer {
    width: var(--page-width, min(98%, calc((100dvh - 150px) * var(--page-aspect))));
    height: var(--page-height, auto);
    max-width: calc(100vw - 112px);
    max-height: calc(100dvh - 150px);
  }

  .bottom-control-strip {
    width: min(420px, calc(100vw - 14px));
    grid-template-columns: 30px minmax(0, 1fr) auto 34px 34px;
  }
}

.studio-shell svg circle { fill: currentColor; stroke: none; }

/* Modern coastal art studio pass: warm, polished, and quiet enough for the artwork to stay primary. */
.studio-body {
  --studio-bg: #f1eadf;
  --studio-surface: #fffdf8;
  --studio-panel: rgba(255, 255, 255, .88);
  --studio-panel-soft: rgba(255, 255, 255, .68);
  --studio-border: rgba(44, 57, 57, .12);
  --studio-ink: #223033;
  --studio-muted: #667776;
  --studio-accent: #0f7f82;
  --studio-accent-strong: #123f45;
  --studio-warm: #c97555;
  --studio-shell-bg: #e8dece;
  --studio-matte: #e7dccb;
  --studio-shadow: 0 18px 46px rgba(48, 38, 28, .13);
  --studio-shadow-soft: 0 10px 24px rgba(48, 38, 28, .09);
  --studio-paper-shadow: 0 18px 42px rgba(34, 28, 21, .18), 0 2px 5px rgba(34, 28, 21, .1);
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(247, 195, 125, .28), transparent 62%),
    radial-gradient(760px 420px at 92% 2%, rgba(102, 183, 184, .22), transparent 64%),
    linear-gradient(135deg, rgba(255, 255, 255, .38) 0 25%, transparent 25% 50%, rgba(255, 255, 255, .22) 50% 75%, transparent 75%),
    linear-gradient(180deg, #fffaf1 0%, #f4ede2 46%, #e9e0d2 100%);
  background-size: auto, auto, 28px 28px, auto;
  color: var(--studio-ink);
}

.color-studio-layout {
  gap: clamp(12px, 1.8vw, 22px);
  padding: max(10px, env(safe-area-inset-top)) clamp(10px, 1.8vw, 22px) 30px;
}

.studio-topbar {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 140;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr);
  width: min(100%, 1360px);
  min-height: 56px;
  padding: 7px 8px 7px 10px;
  border-color: rgba(38, 47, 49, .08);
  border-radius: 16px;
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--studio-shadow-soft);
  backdrop-filter: blur(16px) saturate(120%);
}

.studio-brand {
  gap: 9px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 900;
  letter-spacing: 0;
}

.studio-brand-mark {
  width: clamp(52px, 6vw, 76px);
  height: 34px;
}

.mode-tabs {
  justify-content: flex-end;
  gap: 4px;
}

.mode-tabs a,
.studio-command,
.studio-icon-button,
.tool-button,
.tool-mode-pill,
.size-pill,
.palette-tab,
.color-this-page {
  border-radius: 10px;
  border-color: rgba(38, 47, 49, .1);
  background: rgba(255, 255, 255, .72);
  box-shadow: none;
  backdrop-filter: none;
}

.mode-tabs a {
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.mode-tabs a {
  min-height: 38px;
  padding: 0 13px;
  color: rgba(34, 43, 46, .72);
  font-size: .86rem;
  font-weight: 850;
}

.mode-tabs a[href="#studio"] {
  background: #222b2e;
  color: #fff;
}

.studio-command.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #0f555b, #0b8187);
  color: #fff;
  box-shadow: 0 12px 26px rgba(13, 113, 120, .2);
}

.studio-command.session-done {
  background: var(--studio-accent);
  color: #fff;
}

.discover-section {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: auto;
  padding: 6px clamp(2px, .8vw, 10px) 0;
}

.discover-copy {
  display: grid;
  gap: 5px;
}

.summer-vibe-brand {
  position: relative;
  isolation: isolate;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 22px;
  padding: 10px clamp(15px, 2.2vw, 24px) 11px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .18)),
    conic-gradient(from 215deg at 50% 50%, #ff5f6d, #ffc371, #f9f871, #42e695, #3bb2ff, #a77cff, #ff5f6d);
  box-shadow:
    0 12px 28px rgba(48, 38, 28, .12),
    0 0 0 1px rgba(255, 255, 255, .32),
    inset 0 1px 0 rgba(255, 255, 255, .7);
  backdrop-filter: blur(12px) saturate(145%);
}

.summer-vibe-brand::before,
.summer-vibe-brand::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
}

.summer-vibe-brand::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .22), transparent 34% 62%, rgba(255, 255, 255, .2)),
    repeating-linear-gradient(128deg, rgba(255, 255, 255, .26) 0 10px, transparent 10px 20px);
  mix-blend-mode: soft-light;
}

.summer-vibe-brand::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06));
  opacity: .86;
}

.summer-vibe-brand h1 {
  margin: 0;
  color: #fff;
  font-family: "Marker Felt", "Bradley Hand", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  font-size: clamp(1.9rem, 4.6vw, 3.25rem);
  font-weight: 950;
  line-height: .95;
  background: linear-gradient(90deg, #fff7f1 0 16%, #fff1a8 26%, #b9ffdc 45%, #b7e8ff 64%, #ffd6ff 82%, #fff7f1 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .46),
    0 2px 0 rgba(20, 39, 42, .82),
    0 8px 18px rgba(20, 39, 42, .38);
  -webkit-text-stroke: 1px rgba(20, 39, 42, .48);
  white-space: nowrap;
}

.studio-kicker {
  margin: 0;
  color: var(--studio-accent);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.discover-copy h1 {
  max-width: none;
  font-size: clamp(2rem, 4vw, 4.8rem);
  line-height: .95;
}

.discover-copy p:not(.studio-kicker),
.section-heading p {
  max-width: 62ch;
  margin: 0;
  color: var(--studio-muted);
  font-size: .98rem;
  font-weight: 600;
}

.discover-actions {
  gap: 8px;
}

.studio-shell {
  width: min(100%, 1460px);
  height: min(760px, calc(100dvh - 210px));
  min-height: 620px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(255, 255, 255, .075), transparent 62%),
    radial-gradient(820px 460px at 86% 22%, rgba(170, 214, 187, .07), transparent 68%),
    linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .12)),
    #203b35;
  background-size: auto, auto, 34px 34px, 34px 34px, auto, auto;
  box-shadow: var(--studio-shadow), inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0 90px rgba(0, 0, 0, .24);
}

.studio-session-bar {
  top: max(8px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  min-height: 42px;
  border-radius: 12px;
  border-color: rgba(38, 47, 49, .08);
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--studio-shadow-soft);
  backdrop-filter: blur(14px) saturate(120%);
}

.session-title h2 {
  font-size: clamp(.94rem, 1.25vw, 1.14rem);
  font-weight: 850;
}

.canvas-stage .coloring-page-stage {
  padding-inline: clamp(78px, 10vw, 132px);
  touch-action: none;
  background:
    radial-gradient(660px 460px at 52% 48%, rgba(255, 255, 255, .065), transparent 68%),
    linear-gradient(90deg, rgba(255, 255, 255, .05), transparent 96px, transparent calc(100% - 96px), rgba(255, 255, 255, .045)),
    linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, .02) 1px, transparent 1px),
    #1d342f;
  background-size: auto, auto, 30px 30px, 30px 30px, auto;
}

.canvas-stage .coloring-zoom-layer {
  max-width: min(calc(100vw - clamp(188px, 24vw, 308px)), 1000px);
  max-height: calc(100dvh - 330px);
  filter: drop-shadow(0 22px 38px rgba(31, 26, 20, .18));
}

.canvas-stage .coloring-zoom-layer img {
  border-radius: 2px;
  background: #fffefb;
  box-shadow:
    0 0 0 1px rgba(20, 18, 16, .08),
    var(--studio-paper-shadow);
}

.tool-choice.is-active .tool-glyph {
  background: linear-gradient(135deg, #0f555b, #0b8187);
  color: #fff;
}

.bottom-control-strip {
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(520px, calc(100% - 152px));
  min-height: 44px;
  padding: 5px 6px;
  border-radius: 14px;
  border-color: rgba(38, 47, 49, .08);
  background: rgba(255, 253, 248, .92);
  box-shadow: var(--studio-shadow-soft);
  backdrop-filter: blur(16px) saturate(120%);
}

.active-palette {
  gap: 7px;
}

.swatch,
.recent-color,
.favorite-color,
.custom-color-control {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border: 2px solid rgba(255, 255, 255, .98);
  box-shadow: 0 0 0 1px rgba(38, 47, 49, .1);
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
}

.swatch.is-active,
.recent-color.is-active,
.favorite-color.is-active {
  outline: 2px solid var(--studio-accent-strong);
  outline-offset: 3px;
}

.current-color,
.quick-custom-color {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--puck-color, #1F3D2B);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .98), 0 0 0 3px rgba(38, 47, 49, .16);
}

.quick-custom-color::after {
  right: -3px;
  bottom: -3px;
  width: 17px;
  height: 17px;
  border: 2px solid #fff;
  background: var(--studio-accent-strong);
  color: #fff;
  font-size: .72rem;
  box-shadow: 0 2px 6px rgba(34, 43, 46, .22);
}

.favorite-sample-strip {
  order: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 92px;
}

.favorite-sample-slot {
  position: relative;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border: 2px dotted rgba(38, 47, 49, .48);
  border-radius: 999px;
  padding: 0;
  background: transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.64);
  cursor: pointer;
  touch-action: none;
  -webkit-user-drag: none;
  user-select: none;
}

.favorite-sample-slot.is-empty::before,
.favorite-sample-slot.is-empty::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 10px;
  height: 2px;
  border-radius: 999px;
  background: rgba(38, 47, 49, .42);
  transform: translate(-50%, -50%);
}

.favorite-sample-slot.is-empty::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.favorite-sample-slot.is-filled {
  border-style: solid;
  border-color: rgba(255,255,255,.98);
  background: var(--favorite-sample-color, transparent);
  box-shadow: 0 0 0 1px rgba(38, 47, 49, .12), inset 0 1px 0 rgba(255,255,255,.42);
}

.favorite-sample-slot.is-active {
  outline: 2px solid var(--studio-accent-strong);
  outline-offset: 2px;
}

.favorite-sample-slot:disabled {
  cursor: default;
}

.studio-popover,
.palette-drawer,
.drawer-panel,
.share-card,
.gallery-empty,
.fan-gallery figure {
  border-color: rgba(38, 47, 49, .1);
  background: rgba(255, 253, 248, .95);
  box-shadow: var(--studio-shadow);
  backdrop-filter: none;
}

.tool-popover,
.brush-size-popover,
.more-menu {
  border-radius: 16px;
}

.brush-size-popover {
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .995), rgba(252, 250, 245, .99)),
    #fffefa;
  backdrop-filter: blur(28px) saturate(145%);
}

.tool-choice,
.brush-preset,
.brush-toggle,
.menu-row,
.menu-range {
  border-radius: 10px;
}

.brush-preset,
.brush-toggle,
.brush-current-button,
.brush-panel-section,
.brush-panel-tabs {
  border-radius: 16px;
}

.tool-choice.is-active {
  background: rgba(23, 109, 117, .1);
}

.palette-tab.is-active {
  background: var(--studio-accent-strong);
  color: #fff;
}

.palette-drawer {
  max-height: min(38dvh, 300px);
  border-radius: 18px;
}

.section-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.section-heading h2 {
  font-size: clamp(1.5rem, 3vw, 3rem);
}

.gallery-section {
  padding: clamp(24px, 4vw, 56px) clamp(2px, 1vw, 10px);
  background: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .studio-command:hover,
  .studio-icon-button:hover,
  .tool-button:hover {
    transform: none;
    box-shadow: var(--studio-shadow-soft);
  }

  .mode-tabs a:hover {
    color: var(--studio-ink);
    border-color: rgba(38, 47, 49, .16);
    background: rgba(255, 255, 255, .86);
    box-shadow: none;
    transform: none;
  }

  .mode-tabs a[href="#studio"]:hover {
    background: #222b2e;
    color: #fff;
  }
}

.studio-shell.is-chrome-idle .studio-session-bar,
.studio-shell.is-chrome-idle .bottom-control-strip {
  opacity: .96;
}

@media (pointer: coarse) {
  .color-studio-layout {
    gap: 9px;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 18px max(8px, env(safe-area-inset-left));
  }

  .studio-topbar {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 50px;
    border-radius: 14px;
  }

  .studio-shell {
    height: min(82dvh, 890px);
    min-height: 640px;
    border-radius: 16px;
    background:
      radial-gradient(620px 340px at 18% 8%, rgba(255, 248, 232, .46), transparent 66%),
      radial-gradient(700px 400px at 92% 4%, rgba(137, 190, 185, .2), transparent 68%),
      linear-gradient(135deg, rgba(112, 91, 67, .035) 25%, transparent 25% 50%, rgba(112, 91, 67, .026) 50% 75%, transparent 75%),
      var(--studio-shell-bg);
    background-size: auto, auto, 22px 22px, auto;
  }

  .studio-session-bar {
    border-radius: 11px;
    background: rgba(255, 255, 255, .9);
  }

  .canvas-stage .coloring-page-stage {
    padding-inline: clamp(84px, 12vw, 138px);
    background:
      radial-gradient(500px 360px at 52% 48%, rgba(255, 255, 255, .48), transparent 68%),
      linear-gradient(90deg, rgba(44, 57, 57, .06), transparent 76px, transparent calc(100% - 76px), rgba(44, 57, 57, .06)),
      linear-gradient(135deg, rgba(255, 255, 255, .2) 0 24%, transparent 24% 50%, rgba(255, 255, 255, .15) 50% 74%, transparent 74%),
      var(--studio-matte);
    background-size: auto, auto, 18px 18px, auto;
  }

  .canvas-stage .coloring-zoom-layer {
    width: var(--page-width, min(100%, calc((100dvh - 104px) * var(--page-aspect))));
    height: var(--page-height, auto);
    max-width: calc(100vw - clamp(194px, 28vw, 322px));
    max-height: calc(100dvh - 104px);
  }

  .bottom-control-strip {
    bottom: max(16px, env(safe-area-inset-bottom));
    width: min(520px, calc(100vw - 166px));
  }

  .swatch,
  .recent-color,
  .favorite-color,
  .custom-color-control {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }
}

@media (max-width: 820px) {
  .studio-topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
  }

  .studio-brand {
    justify-self: start;
  }

  .mode-tabs {
    justify-content: flex-end;
    order: initial;
    grid-column: auto;
  }

  .mode-tabs a {
    flex: 1;
    min-width: 0;
  }

  .discover-section {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 0;
  }

  .discover-actions {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .discover-copy h1 {
    font-size: clamp(1.85rem, 6.8vw, 2.8rem);
  }

  .discover-copy p:not(.studio-kicker) {
    font-size: .92rem;
    line-height: 1.35;
  }

  .summer-vibe-brand h1 {
    font-size: clamp(1.55rem, 8vw, 2.65rem);
  }

  .discover-actions .studio-command {
    min-height: 38px;
    min-width: max-content;
    padding-inline: 12px;
    font-size: .84rem;
  }

  .studio-shell {
    height: min(82dvh, 840px);
    min-height: 620px;
  }
}

@media (max-width: 520px) {
  .studio-brand span:last-child {
    display: inline;
  }

  .studio-brand-mark {
    width: 46px;
    height: 30px;
  }

  .mode-tabs a {
    min-height: 34px;
    padding: 0 7px;
    font-size: .76rem;
  }

  .studio-shell {
    height: min(72dvh, 620px);
    min-height: 520px;
  }

  .studio-session-bar {
    grid-template-columns: minmax(0, 1fr) 38px 38px;
  }

  .canvas-stage .coloring-page-stage {
    padding-inline: 54px;
  }

  .canvas-stage .coloring-zoom-layer {
    width: var(--page-width, min(100%, calc((100dvh - 160px) * var(--page-aspect))));
    height: var(--page-height, auto);
    max-width: calc(100vw - 116px);
    max-height: calc(100dvh - 160px);
  }

  .bottom-control-strip {
    grid-template-columns: minmax(0, 1fr) auto;
    width: min(450px, calc(100vw - 14px));
    min-height: 44px;
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .active-palette .swatch:nth-of-type(n+7) {
    display: none;
  }

}

.palette-tabs .palette-tab {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 58px;
  border-radius: 12px;
  padding: 8px 10px;
  text-align: left;
}

.palette-tabs .palette-tab strong {
  font-size: .84rem;
  line-height: 1.05;
}

.palette-tabs .palette-tab span {
  color: var(--studio-muted);
  font-size: .68rem;
  line-height: 1.15;
}

.palette-tabs .palette-tab.is-active {
  background: var(--studio-ink);
  color: #fff;
}

.palette-tabs .palette-tab.is-active span {
  color: rgba(255,255,255,.76);
}

/* Stable chrome pass: no sliding controls during scroll or interaction. */
.mode-tabs a,
.studio-topbar,
.studio-command,
.studio-icon-button,
.tool-button {
  transform: none;
}

.mode-tabs a,
.studio-command,
.studio-icon-button,
.tool-button {
  transition-property: background, border-color, box-shadow, color, opacity;
}

.studio-command:active,
.studio-icon-button:active,
.tool-button:active,
.mode-tabs a:active {
  transform: none;
}

.studio-session-bar .session-status-strip span,
.studio-session-bar.minimal-session-bar .session-status-strip span,
.studio-session-bar.minimal-session-bar .session-status-strip .autosave-note {
  display: inline-flex;
  align-items: center;
}

/* Final brush popover placement/theme override after all responsive rules. */
.brush-size-popover {
  position: fixed;
  left: var(--brush-popover-left, 12px);
  top: var(--brush-popover-top, 88px);
  right: auto;
  bottom: auto;
  width: min(360px, calc(100vw - 20px));
  height: auto;
  max-height: min(76dvh, 620px);
  align-content: start;
  padding: 18px 14px 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  background: #303030;
  color: #d6d6d6;
  box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  transform: none;
  backdrop-filter: none;
}

@media (max-width: 430px) {
  .brush-size-popover {
    width: min(360px, calc(100vw - 24px));
    max-height: min(72dvh, 620px);
  }
}
/* EOF viewport-safe overlay placement. This must remain last. */
.color-menu {
  position: fixed;
  left: var(--popover-left, 10px) !important;
  top: var(--popover-top, 10px) !important;
  right: auto !important;
  bottom: auto !important;
  width: min(var(--popover-width, 392px), calc(100vw - 20px));
  max-height: min(var(--popover-max-height, 720px), calc(100dvh - 20px));
  overflow: hidden;
  overscroll-behavior: contain;
}

.color-menu .color-tab-panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tool-popover {
  position: fixed;
  left: var(--tool-popover-left, 10px);
  top: var(--tool-popover-top, 10px);
  right: auto;
  bottom: auto;
  width: min(var(--tool-popover-width, 300px), calc(100vw - 20px));
  max-height: min(var(--tool-popover-max-height, 520px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.brush-size-popover {
  width: min(var(--brush-popover-width, 360px), calc(100vw - 20px));
  max-height: min(var(--brush-popover-max-height, 620px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.more-menu {
  position: fixed;
  left: var(--more-menu-left, auto);
  top: var(--more-menu-top, 10px);
  right: auto;
  bottom: auto;
  width: min(var(--more-menu-width, 220px), calc(100vw - 20px));
  max-height: min(var(--more-menu-max-height, 360px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Minimal canvas identity strip. */
.studio-session-bar.minimal-session-bar {
  left: max(58px, calc(env(safe-area-inset-left) + 58px));
  right: auto;
  width: min(520px, calc(100% - 72px));
  min-height: 42px;
  display: inline-grid;
  grid-template-columns: 34px minmax(0, auto);
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.session-book-thumb {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 9px;
  object-fit: cover;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.session-book-thumb[hidden] {
  display: none !important;
}

.minimal-session-bar .session-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
}

.minimal-session-bar .session-title h2,
.minimal-session-bar #session-tool-state {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(48,48,48,.72);
  color: #f3f3f3;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  backdrop-filter: blur(14px) saturate(135%);
}

.minimal-session-bar .session-title h2 {
  max-width: min(38vw, 300px);
  padding: 0 10px;
  font-size: .82rem;
  font-weight: 860;
}

.minimal-session-bar .session-status-strip {
  display: contents;
}

.minimal-session-bar #session-tool-state {
  max-width: 150px;
  padding: 0 9px;
  font-size: .72rem;
  font-weight: 850;
}

.minimal-session-bar #session-book-name,
.minimal-session-bar #session-zoom-state,
.minimal-session-bar .autosave-note {
  display: none !important;
}

.brush-panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.brush-panel-header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.brush-panel-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: #d6d6d6;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.brush-panel-close:focus-visible {
  outline: 3px solid rgba(10,132,255,.3);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .studio-session-bar.minimal-session-bar {
    width: min(308px, calc(100% - 70px));
  }

  .minimal-session-bar .session-title h2 {
    max-width: 132px;
  }

  .minimal-session-bar #session-tool-state {
    max-width: 96px;
  }
}

/* Mobile immersive polish: keep identity and tools from competing for the same space. */
.start-book-carousel {
  scroll-padding-inline: max(28px, 12vw);
  scroll-snap-stop: always;
  touch-action: pan-x;
}

.start-book-card {
  -webkit-tap-highlight-color: transparent;
}

.start-book-card img {
  will-change: transform;
}

.start-book-card:active img {
  transform: translateY(-8px) rotateY(0deg) rotateZ(0deg) scale(1.03);
}

.shelf-scroll-surface {
  position: relative;
}

.shelf-scroll-button {
  position: absolute;
  z-index: 8;
  top: 50%;
  display: none;
  place-items: center;
  align-self: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border: 1px solid rgba(255, 255, 255, .56);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #243436;
  box-shadow: 0 16px 34px rgba(31, 26, 20, .16);
  backdrop-filter: blur(18px) saturate(140%);
  cursor: pointer;
  transform: translateY(-50%);
}

.shelf-scroll-button svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shelf-scroll-button-prev {
  left: 10px;
}

.shelf-scroll-button-next {
  right: 10px;
}

.shelf-scroll-button[hidden] {
  display: none !important;
}

.start-book-back {
  justify-self: start;
  min-height: 38px;
  border: 1px solid rgba(35, 50, 54, .1);
  border-radius: 999px;
  padding: 0 15px;
  background: rgba(255, 255, 255, .72);
  color: #233236;
  box-shadow: 0 10px 22px rgba(31, 26, 20, .1);
  font-weight: 900;
  cursor: pointer;
}

.browse-start-state.is-page-scene {
  align-content: stretch;
  gap: clamp(12px, 2vw, 18px);
}

.browse-start-state.is-page-scene .start-book-carousel {
  display: none;
}

.browse-start-state.is-page-scene .start-page-shelf {
  align-self: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(100%, 900px);
}

.browse-start-state.is-page-scene .start-page-rail {
  grid-auto-columns: clamp(190px, 26vw, 252px);
  align-items: stretch;
  min-height: 0;
  padding: 8px 34px 24px;
}

.browse-start-state.is-page-scene .start-page-card {
  grid-template-rows: minmax(230px, 1fr) auto;
  min-height: clamp(306px, 48vh, 420px);
}

.browse-start-state.is-page-scene .start-page-card img {
  min-height: 230px;
}

@media (max-width: 720px) {
  body.studio-fullscreen .color-studio-layout {
    min-height: 100dvh;
  }

  body.studio-fullscreen .studio-shell,
  body.studio-fullscreen .canvas-stage.coloring-workspace {
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
  }

  body.studio-fullscreen .canvas-stage.coloring-workspace {
    padding: 0;
  }

  body.studio-fullscreen .canvas-stage .coloring-page-stage {
    min-height: 100dvh;
    margin: 0;
    padding: calc(env(safe-area-inset-top) + 92px) 18px calc(env(safe-area-inset-bottom) + 92px);
  }

  body.studio-fullscreen .canvas-stage .coloring-zoom-layer {
    max-width: calc(100vw - 36px);
    max-height: calc(100dvh - 204px);
  }

  .studio-session-bar.minimal-session-bar {
    left: calc(env(safe-area-inset-left) + 74px);
    top: calc(env(safe-area-inset-top) + 18px);
    width: min(54vw, 240px);
    grid-template-columns: 32px minmax(0, 1fr);
    min-height: 44px;
    z-index: 190;
  }

  .session-book-thumb {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }

  .minimal-session-bar .session-title {
    display: grid;
    gap: 3px;
  }

  .minimal-session-bar .session-title h2 {
    max-width: 100%;
    min-height: 30px;
    padding: 0 11px;
    overflow: hidden;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .minimal-session-bar #session-tool-state {
    display: none;
  }

  .canvas-tool-cluster {
    top: auto;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom) + 16px);
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 28px);
    overflow-x: auto;
    padding: 8px;
    transform: translateX(-50%);
    scroll-snap-type: x proximity;
  }

  .canvas-tool-button,
  .color-puck-button {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .mac-fullscreen-button {
    top: calc(env(safe-area-inset-top) + 16px);
    left: calc(env(safe-area-inset-left) + 16px);
    z-index: 195;
  }

  .browse-start-state {
    width: 100%;
    min-height: 100%;
    max-height: none;
    margin-top: 0;
    padding: calc(env(safe-area-inset-top) + 24px) 0 calc(env(safe-area-inset-bottom) + 24px);
  }

  .start-book-carousel {
    grid-auto-columns: clamp(156px, 50vw, 220px);
    width: 100%;
    min-height: clamp(314px, 72vw, 396px);
    gap: 22px;
    padding: clamp(86px, 16vh, 118px) max(74px, calc(50% - 84px)) 48px;
  }

  .start-book-card {
    min-height: clamp(292px, 68vw, 374px);
  }

  .start-book-card span {
    max-width: 13ch;
  }

  .browse-start-state.is-page-scene {
    padding: 18px 0 20px;
  }

  .browse-start-state.is-page-scene .start-page-shelf {
    width: 100%;
  }

  .browse-start-state.is-page-scene .start-page-rail {
    grid-auto-columns: min(72vw, 244px);
    padding: 8px max(42px, 12vw) 24px;
  }

  .browse-start-state.is-page-scene .start-page-card {
    min-height: min(62vh, 430px);
  }
}

@media (hover: hover) and (pointer: fine) {
  .shelf-scroll-surface:hover .shelf-scroll-button:not([hidden]),
  .shelf-scroll-surface:focus-within .shelf-scroll-button:not([hidden]) {
    display: grid;
  }

  .shelf-scroll-button:hover {
    background: rgba(255, 255, 255, .94);
    transform: translateY(-50%) scale(1.04);
  }
}

/* EOF interactive start shelf. */

/* Latest scroll concept: calm card, centered hero book, and a single clear action. */
.coloring-page-stage.is-awaiting-page {
  background:
    radial-gradient(circle at 46% 36%, rgba(255,255,255,.74), transparent 24%),
    radial-gradient(circle at 25% 22%, rgba(233, 177, 86, .18), transparent 30%),
    radial-gradient(circle at 76% 64%, rgba(83, 137, 119, .14), transparent 34%),
    linear-gradient(145deg, #f2e8d8 0%, #edf3ed 54%, #fbf5eb 100%);
}

.coloring-page-stage.is-awaiting-page::before,
.coloring-page-stage.is-awaiting-page::after {
  display: none;
}

.browse-start-state {
  --trip-ink: #302923;
  --trip-muted: #746c63;
  --trip-green: #3f7468;
  --trip-gold: #d9a451;
  align-content: start;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  margin: auto;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 46px) clamp(28px, 4.5vw, 54px);
  border-radius: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(ellipse at 50% 49%, rgba(255,255,255,.98), rgba(255,255,255,.64) 42%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)),
    #fffdf8;
  box-shadow:
    0 48px 120px rgba(68, 48, 28, .18),
    0 12px 28px rgba(68, 48, 28, .1),
    inset 0 0 0 1px rgba(255, 255, 255, .76);
}

.browse-start-state::before {
  content: "From Driftwood and Ink";
  position: relative;
  z-index: 3;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: clamp(12px, 2.8vh, 28px);
  color: var(--trip-green);
  font-size: clamp(.88rem, 1.6vw, 1rem);
  font-weight: 900;
}

.browse-start-state::after {
  content: "";
  position: absolute;
  top: clamp(28px, 4vw, 48px);
  left: clamp(22px, 4vw, 46px);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e0ad65, #f1d4a3 46%, #4e7f72);
  box-shadow: 0 4px 14px rgba(63, 116, 104, .22);
}

.browse-start-state::before {
  padding-left: 46px;
}

.browse-start-copy {
  position: relative;
  inset: auto;
  z-index: 2;
  justify-items: start;
  padding: 0;
  pointer-events: none;
  text-align: left;
}

.browse-start-copy h3 {
  max-width: 10.5ch;
  color: var(--trip-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.55rem, 4.8vw, 3.55rem);
  font-weight: 900;
  line-height: .9;
  text-shadow: none;
}

.start-book-shelf {
  position: relative;
  z-index: 2;
  width: calc(100% + clamp(44px, 8vw, 92px));
  margin-inline: calc(clamp(22px, 4vw, 46px) * -1);
  perspective: 900px;
}

.start-book-carousel {
  grid-auto-columns: clamp(96px, 14vw, 122px);
  justify-content: start;
  align-items: end;
  gap: 0;
  min-height: clamp(264px, 30vw, 318px);
  padding: clamp(36px, 5vh, 56px) max(40px, calc(50% - 61px)) clamp(10px, 2vw, 18px);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.start-book-carousel::before {
  bottom: clamp(8px, 2vw, 18px);
  width: min(560px, 74%);
  height: clamp(54px, 8vw, 84px);
  background: radial-gradient(ellipse at center, rgba(68, 48, 28, .18), rgba(68, 48, 28, .08) 52%, transparent 76%);
}

.start-book-card {
  align-content: end;
  min-height: clamp(234px, 28vw, 306px);
  margin-inline: -6px;
  color: var(--trip-ink);
}

.start-book-card img {
  width: clamp(94px, 12vw, 112px);
  height: clamp(127px, 16.2vw, 151px);
  border: 0;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 22px 42px rgba(62, 40, 22, .15), inset 0 0 0 1px rgba(255,255,255,.48);
  transform: translateY(10px) scale(.96);
  opacity: .84;
}

.start-book-card[data-shelf-position="-1"] img {
  width: clamp(94px, 12vw, 112px);
  height: clamp(127px, 16.2vw, 151px);
  transform: translateY(10px) scale(.96);
  opacity: .84;
}

.start-book-card[data-shelf-position="-2"] {
  order: 1;
}

.start-book-card[data-shelf-position="-1"] {
  order: 2;
}

.start-book-card[data-shelf-position="0"] {
  order: 3;
  z-index: 4;
  width: clamp(196px, 22vw, 224px);
  justify-self: center;
}

.start-book-card[data-shelf-position="1"] {
  order: 4;
}

.start-book-card[data-shelf-position="2"] {
  order: 5;
}

.start-book-card[data-shelf-position="0"] img {
  width: clamp(196px, 22vw, 224px);
  height: clamp(265px, 29.7vw, 303px);
  border-radius: 14px;
  box-shadow:
    0 36px 70px rgba(62, 40, 22, .24),
    0 18px 34px rgba(217, 164, 81, .16),
    0 0 0 5px rgba(255,255,255,.92),
    0 0 0 7px rgba(217, 164, 81, .7);
  transform: translateY(-24px) scale(1.02);
  opacity: 1;
}

.start-book-card[data-shelf-position="1"] img {
  width: clamp(94px, 12vw, 112px);
  height: clamp(127px, 16.2vw, 151px);
  transform: translateY(10px) scale(.96);
  opacity: .84;
}

.start-book-card[data-shelf-position="2"] img,
.start-book-card[data-shelf-position="-2"] img {
  width: clamp(94px, 12vw, 112px);
  height: clamp(127px, 16.2vw, 151px);
  transform: translateY(10px) scale(.96);
  opacity: .84;
}

.start-book-card:is(:hover, :focus-visible) img {
  filter: saturate(1.05) contrast(1.02);
}

.start-book-card span {
  display: none;
}

.start-book-feature-panel {
  z-index: 3;
  display: grid;
  gap: 12px;
  width: min(100%, 560px);
  margin: clamp(2px, 1vh, 12px) auto 0;
}

@media (min-width: 721px) {
  .start-book-feature-panel {
    position: absolute;
    top: clamp(116px, 18vh, 150px);
    right: clamp(34px, 5vw, 72px);
    width: min(42%, 520px);
    margin: 0;
  }

  .start-book-dots {
    justify-content: flex-end;
    padding-right: 20px;
  }
}

.start-book-selection-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 2.4vw, 18px);
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 24px 54px rgba(62, 40, 22, .11), inset 0 1px 0 rgba(255,255,255,.85);
}

.start-book-selection-title {
  color: var(--trip-ink);
  font-size: clamp(1.22rem, 2.5vw, 1.55rem);
  font-weight: 950;
  line-height: 1.05;
}

.start-book-selection-meta {
  margin-top: 6px;
  color: var(--trip-muted);
  font-size: clamp(.88rem, 1.55vw, 1rem);
  font-weight: 750;
  line-height: 1.25;
}

.start-book-open {
  min-width: 92px;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--trip-green);
  color: white;
  box-shadow: 0 12px 24px rgba(63, 116, 104, .26);
  font-size: .95rem;
  font-weight: 950;
  cursor: pointer;
}

.start-book-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.start-book-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(48, 41, 35, .22);
}

.start-book-dot.is-active {
  width: 26px;
  background: var(--trip-gold);
}

.browse-start-state.has-book-selected {
  justify-content: center;
  width: min(100%, 940px);
  min-height: min(100%, 860px);
  padding: clamp(24px, 4vw, 42px);
}

.browse-start-state.has-book-selected::before,
.browse-start-state.has-book-selected::after {
  display: none;
}

.start-book-back {
  min-height: 42px;
  padding-inline: 18px;
  border: 0;
  background: rgba(63, 116, 104, .12);
  color: var(--trip-green);
}

.start-page-shelf {
  width: min(100%, 820px);
  padding-inline: 0;
}

.start-page-title {
  display: block;
  color: var(--trip-muted);
  font-size: .88rem;
  text-align: left;
}

.start-page-rail {
  grid-auto-columns: clamp(190px, 26vw, 250px);
  gap: clamp(14px, 2vw, 22px);
  padding: 8px 42px 34px;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.start-page-card {
  grid-template-rows: minmax(250px, 1fr) auto;
  min-height: clamp(350px, 52vh, 470px);
  border: 0;
  border-radius: 24px;
  padding: 12px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 24px 54px rgba(62, 40, 22, .12), inset 0 1px 0 rgba(255,255,255,.86);
}

.start-page-card img {
  min-height: 250px;
  border-radius: 18px;
}

.start-page-card span {
  color: var(--trip-ink);
  font-size: .92rem;
}

@media (max-width: 720px) {
  .browse-start-state {
    width: min(100%, 430px);
    min-height: min(100%, 100dvh);
    border-radius: clamp(28px, 9vw, 42px);
    padding: calc(env(safe-area-inset-top) + 28px) 24px calc(env(safe-area-inset-bottom) + 30px);
  }

  .browse-start-copy h3 {
    font-size: clamp(2.85rem, 11vw, 4.1rem);
  }

  .start-book-shelf {
    width: calc(100% + 48px);
    margin-inline: -24px;
  }

  .start-book-carousel {
    grid-auto-columns: clamp(78px, 23vw, 100px);
    min-height: clamp(274px, 76vw, 342px);
    padding: clamp(50px, 8vh, 72px) max(36px, calc(50% - 50px)) 18px;
  }

  .start-book-card {
    min-height: clamp(232px, 68vw, 316px);
  }

  .start-book-card[data-shelf-position="0"] img {
    width: clamp(150px, 46vw, 188px);
    height: clamp(203px, 62vw, 254px);
  }

  .start-book-selection-card {
    grid-template-columns: 1fr auto;
    border-radius: 22px;
  }

  .browse-start-state.has-book-selected {
    width: min(100%, 430px);
    padding: calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 22px);
  }

  .browse-start-state.is-page-scene .start-page-rail {
    grid-auto-columns: min(72vw, 250px);
    padding-inline: max(34px, 9vw);
  }

  .browse-start-state.is-page-scene .start-page-card {
    min-height: min(64vh, 448px);
  }
}

/* Final journey picker layer: keep this after legacy picker blocks. */
.browse-start-state.is-book-scene {
  --journey-ink: #2d2722;
  --journey-muted: #746c63;
  --journey-green: #3f7c68;
  --journey-gold: #e0ad46;
  display: grid;
  grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(24px, 5vw, 72px);
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(32px, 4.4vw, 58px) clamp(28px, 4.6vw, 72px);
  overflow: hidden;
  border: 0;
  border-radius: clamp(24px, 3vw, 36px);
  background:
    radial-gradient(circle at 72% 72%, rgba(224, 173, 70, .13), transparent 26%),
    radial-gradient(circle at 20% 16%, rgba(63, 124, 104, .1), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,253,248,.94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.74), 0 42px 92px rgba(44,36,28,.15);
}

.browse-start-state.is-book-scene::before {
  content: "From Driftwood and Ink";
  position: absolute;
  top: clamp(28px, 4vw, 54px);
  left: clamp(70px, 7.8vw, 116px);
  z-index: 4;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: var(--journey-green);
  font-size: clamp(.88rem, 1.35vw, 1.12rem);
  font-weight: 900;
}

.browse-start-state.is-book-scene::after {
  content: "";
  position: absolute;
  top: clamp(24px, 3.9vw, 48px);
  left: clamp(28px, 4.5vw, 72px);
  z-index: 4;
  width: clamp(34px, 3.4vw, 44px);
  height: clamp(34px, 3.4vw, 44px);
  border-radius: 50%;
  background: linear-gradient(135deg, #e8b765, #f0d4a0 48%, #4f8173);
  box-shadow: 0 16px 30px rgba(63,124,104,.18);
}

.browse-start-state.is-book-scene .browse-start-copy {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  justify-items: start;
  margin-top: clamp(108px, 15vh, 150px);
  padding: 0;
  text-align: left;
}

.browse-start-state.is-book-scene .browse-start-copy h3 {
  max-width: 9.6ch;
  margin: 0;
  color: var(--journey-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5.45vw, 5rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: 0;
  text-shadow: none;
}

.browse-start-state.is-book-scene .start-book-feature-panel {
  position: absolute;
  left: clamp(36px, 5vw, 78px);
  top: clamp(416px, 53vh, 488px);
  right: auto;
  z-index: 5;
  display: block;
  width: min(36vw, 460px);
  margin: 0;
  transform: none;
  pointer-events: none;
}

.browse-start-state.is-book-scene .start-book-selection-card {
  display: block;
  grid-template-columns: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.browse-start-state.is-book-scene .start-book-selection-title {
  color: var(--journey-green);
  font-size: clamp(1.26rem, 2.2vw, 1.78rem);
  font-weight: 950;
  line-height: 1.05;
}

.browse-start-state.is-book-scene .start-book-selection-meta {
  margin-top: 8px;
  color: var(--journey-muted);
  font-size: clamp(.98rem, 1.45vw, 1.18rem);
  font-weight: 850;
  line-height: 1.25;
}

.browse-start-state.is-book-scene .start-book-dots,
.browse-start-state.is-book-scene .start-book-card span {
  display: none;
}

.browse-start-state.is-book-scene .start-book-shelf {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  perspective: 1200px;
}

.browse-start-state.is-book-scene .start-book-shelf::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 3%;
  bottom: clamp(88px, 12vh, 130px);
  height: clamp(150px, 17vw, 230px);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(224,173,70,.25), rgba(255,255,255,.56) 48%, transparent 72%);
  pointer-events: none;
}

.browse-start-state.is-book-scene .start-book-carousel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(126px, 13vw, 184px);
  align-items: center;
  gap: clamp(10px, 1.8vw, 26px);
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: clamp(90px, 10vh, 116px) max(42px, calc(50% - clamp(63px, 6.5vw, 92px))) clamp(84px, 10vh, 116px);
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scroll-padding-inline: max(42px, calc(50% - clamp(63px, 6.5vw, 92px)));
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.browse-start-state.is-book-scene .start-book-carousel::before {
  display: none;
}

.browse-start-state.is-book-scene .start-book-card {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: clamp(320px, 46vw, 520px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  scroll-snap-align: center;
  transform-style: preserve-3d;
}

.browse-start-state.is-book-scene .start-book-card img {
  width: clamp(118px, 13vw, 174px);
  aspect-ratio: .74;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 14px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 24px 46px rgba(48,39,30,.16);
  opacity: .38;
  filter: saturate(.82);
  transform: translateY(44px) rotateY(-36deg) rotateZ(-7deg) scale(.92);
  transform-origin: 50% 84%;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease, filter 220ms ease, box-shadow 220ms ease;
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="-1"] img {
  opacity: .58;
  transform: translate(48px, 12px) rotateY(32deg) rotateZ(-5deg) scale(.98);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="1"] img {
  opacity: .58;
  transform: translate(-48px, 12px) rotateY(-32deg) rotateZ(5deg) scale(.98);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="-2"] img {
  opacity: .26;
  transform: translate(86px, 58px) rotateY(42deg) rotateZ(-10deg) scale(.86);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="2"] img {
  opacity: .26;
  transform: translate(-86px, 58px) rotateY(-42deg) rotateZ(10deg) scale(.86);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] {
  z-index: 8;
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] img {
  width: clamp(256px, 24vw, 340px);
  border-radius: 18px;
  opacity: 1;
  filter: saturate(1.03) contrast(1.02);
  box-shadow: 0 34px 68px rgba(48,39,30,.22), 0 16px 34px rgba(224,173,70,.17), 0 0 0 7px rgba(240,213,160,.72);
  transform: translateY(-18px) rotateY(-8deg) rotateZ(1deg) scale(1.02);
}

.browse-start-state.is-book-scene .start-book-card:is(:hover, :focus-visible) img {
  filter: saturate(1.08) contrast(1.03);
}

.browse-start-state.is-book-scene .shelf-scroll-button {
  top: 54%;
  display: grid;
  width: 58px;
  height: 58px;
  min-width: 58px;
  border: 0;
  background: rgba(255,255,255,.9);
  color: #20352f;
  box-shadow: 0 18px 42px rgba(31,26,20,.13);
}

.browse-start-state.is-book-scene .shelf-scroll-button-prev {
  left: clamp(2px, 1vw, 12px);
}

.browse-start-state.is-book-scene .shelf-scroll-button-next {
  right: clamp(2px, 1vw, 12px);
}

@media (max-width: 760px) {
  .browse-start-state.is-book-scene {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    gap: 0;
    padding: calc(env(safe-area-inset-top) + 26px) 20px calc(env(safe-area-inset-bottom) + 24px);
    border-radius: clamp(24px, 7vw, 34px);
  }

  .browse-start-state.is-book-scene::before {
    top: calc(env(safe-area-inset-top) + 28px);
    left: 72px;
    font-size: .9rem;
  }

  .browse-start-state.is-book-scene::after {
    top: calc(env(safe-area-inset-top) + 24px);
    left: 24px;
    width: 38px;
    height: 38px;
  }

  .browse-start-state.is-book-scene .browse-start-copy {
    grid-row: 1;
    margin-top: 92px;
  }

  .browse-start-state.is-book-scene .browse-start-copy h3 {
    max-width: 9.8ch;
    font-size: clamp(3.05rem, 13vw, 4.25rem);
  }

  .browse-start-state.is-book-scene .start-book-feature-panel {
    position: relative;
    left: auto;
    top: auto;
    grid-row: 2;
    width: 100%;
    margin: clamp(34px, 7vh, 56px) 0 0;
    transform: none;
  }

  .browse-start-state.is-book-scene .start-book-shelf {
    grid-column: 1;
    grid-row: 3;
    min-height: clamp(300px, 58vh, 470px);
    margin-top: clamp(10px, 2vh, 18px);
  }

  .browse-start-state.is-book-scene .start-book-shelf::before {
    left: 4%;
    right: 4%;
    bottom: 34px;
    height: 132px;
  }

  .browse-start-state.is-book-scene .start-book-carousel {
    grid-auto-columns: clamp(106px, 34vw, 142px);
    padding: 28px max(32px, calc(50% - 71px)) 54px;
    scroll-padding-inline: max(32px, calc(50% - 71px));
  }

  .browse-start-state.is-book-scene .start-book-card {
    min-height: clamp(260px, 64vw, 360px);
  }

  .browse-start-state.is-book-scene .start-book-card img {
    width: clamp(92px, 27vw, 126px);
  }

  .browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] img {
    width: clamp(184px, 58vw, 238px);
  }

  .browse-start-state.is-book-scene .shelf-scroll-button {
    display: none;
  }
}

/* Absolute last journey picker desktop correction. */
@media (min-width: 761px) {
  .browse-start-state.is-book-scene::before {
    left: calc(var(--journey-left) + 52px);
  }

  .browse-start-state.is-book-scene::after {
    left: var(--journey-left);
  }

  .browse-start-state.is-book-scene .browse-start-copy {
    position: absolute;
    left: var(--journey-left);
    top: clamp(198px, 22vh, 238px);
    grid-column: auto;
    grid-row: auto;
    width: min(35vw, 470px);
    margin: 0;
  }

  .browse-start-state.is-book-scene .browse-start-copy h3 {
    width: auto;
    max-width: 10.8ch;
    font-size: clamp(3.7rem, 4.72vw, 5.25rem);
  }

  .browse-start-state.is-book-scene .start-book-feature-panel {
    left: var(--journey-left);
    top: clamp(584px, 58vh, 640px);
    width: min(34vw, 460px);
  }

  .browse-start-state.is-book-scene .start-book-card {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.72);
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(-n+5) {
    opacity: 1;
    pointer-events: auto;
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(1) {
    z-index: 9;
    width: clamp(276px, 23vw, 336px);
    transform: translate(-48%, calc(-50% + 154px)) rotateY(-5deg);
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(1) img {
    border-radius: 19px;
    filter: saturate(1.04) contrast(1.02);
    box-shadow:
      0 34px 74px rgba(48,39,30,.24),
      0 18px 38px rgba(224,173,70,.16),
      0 0 0 6px rgba(255,255,255,.96),
      0 0 0 8px rgba(224,173,70,.66);
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(2) {
    z-index: 5;
    width: clamp(128px, 11vw, 160px);
    opacity: .78 !important;
    pointer-events: auto !important;
    transform: translate(calc(-50% + 292px), calc(-50% + 116px)) rotateY(-27deg) rotateZ(3deg);
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(3) {
    z-index: 5;
    width: clamp(128px, 11vw, 160px);
    opacity: .78 !important;
    pointer-events: auto !important;
    transform: translate(calc(-50% - 292px), calc(-50% + 116px)) rotateY(27deg) rotateZ(-3deg);
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(4) {
    z-index: 3;
    width: clamp(104px, 9vw, 132px);
    opacity: .38 !important;
    pointer-events: auto !important;
    transform: translate(calc(-50% + 340px), calc(-50% + 132px)) rotateY(-38deg) rotateZ(5deg);
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(5) {
    z-index: 3;
    width: clamp(104px, 9vw, 132px);
    opacity: .38 !important;
    pointer-events: auto !important;
    transform: translate(calc(-50% - 340px), calc(-50% + 132px)) rotateY(38deg) rotateZ(-5deg);
  }
}
  .browse-start-state.is-book-scene {
    grid-template-columns: minmax(460px, 40%) minmax(0, 1fr);
  }

  .browse-start-state.is-book-scene .browse-start-copy h3 {
    max-width: 12.8ch;
  }

  .browse-start-state.is-book-scene .start-book-feature-panel {
    top: clamp(500px, 50vh, 540px);
    bottom: auto;
    transform: none;
  }
}

/* EOF Safari correction: detail must sit below the headline, not inside it. */
@media (min-width: 761px) {
  .browse-start-state.is-book-scene .browse-start-copy h3 {
    max-width: 11.9ch;
  }

  .browse-start-state.is-book-scene .start-book-feature-panel {
    top: clamp(560px, 67vh, 710px);
    bottom: auto;
    transform: none;
  }
}

/* Safari/site-mode correction for the journey picker composition. */
.browse-start-state.is-book-scene {
  grid-template-columns: minmax(360px, 34%) minmax(0, 1fr);
  column-gap: clamp(44px, 5.5vw, 96px);
  padding: clamp(38px, 4.6vw, 72px) clamp(42px, 5.4vw, 96px);
}

.browse-start-state.is-book-scene::before {
  left: clamp(92px, 8.8vw, 148px);
}

.browse-start-state.is-book-scene::after {
  left: clamp(42px, 5.4vw, 96px);
}

.browse-start-state.is-book-scene .browse-start-copy {
  margin-top: clamp(118px, 15vh, 156px);
}

.browse-start-state.is-book-scene .browse-start-copy h3 {
  max-width: 11.9ch;
  font-size: clamp(4.15rem, 4.85vw, 6.05rem);
  line-height: .9;
}

.browse-start-state.is-book-scene .start-book-feature-panel {
  left: clamp(42px, 5.4vw, 96px);
  top: clamp(510px, 62vh, 660px);
  width: min(35vw, 520px);
}

.browse-start-state.is-book-scene .start-book-shelf {
  min-height: 100%;
}

.browse-start-state.is-book-scene .start-book-carousel {
  padding-top: clamp(116px, 13vh, 156px);
  padding-bottom: clamp(96px, 12vh, 142px);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.browse-start-state.is-book-scene .start-book-card {
  min-height: clamp(390px, 44vw, 560px);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] img {
  width: clamp(270px, 22vw, 350px);
  transform: translateY(-8px) rotateY(-8deg) rotateZ(1deg) scale(1.02);
}

@media (max-width: 980px) {
  .browse-start-state.is-book-scene {
    grid-template-columns: minmax(260px, 36%) minmax(0, 1fr);
    padding-inline: clamp(28px, 5vw, 58px);
  }

  .browse-start-state.is-book-scene::before {
    left: clamp(70px, 7.8vw, 116px);
  }

  .browse-start-state.is-book-scene::after,
  .browse-start-state.is-book-scene .start-book-feature-panel {
    left: clamp(28px, 5vw, 58px);
  }

  .browse-start-state.is-book-scene .browse-start-copy h3 {
    max-width: 10.5ch;
    font-size: clamp(3.05rem, 5.2vw, 4.6rem);
  }

  .browse-start-state.is-book-scene .start-book-feature-panel {
    top: clamp(430px, 61vh, 560px);
  }
}

@media (max-width: 760px) {
  .browse-start-state.is-book-scene {
    grid-template-columns: 1fr;
    padding: calc(env(safe-area-inset-top) + 26px) 20px calc(env(safe-area-inset-bottom) + 24px);
  }

  .browse-start-state.is-book-scene::before {
    left: 72px;
  }

  .browse-start-state.is-book-scene::after {
    left: 24px;
  }

  .browse-start-state.is-book-scene .browse-start-copy {
    margin-top: 92px;
  }

  .browse-start-state.is-book-scene .browse-start-copy h3 {
    max-width: 9.8ch;
    font-size: clamp(3.05rem, 13vw, 4.25rem);
  }

  .browse-start-state.is-book-scene .start-book-feature-panel {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    margin: clamp(34px, 7vh, 56px) 0 0;
  }

  .browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] img {
    width: clamp(184px, 58vw, 238px);
  }
}

/* Journey picker: dimensional book-stage pass. */
.browse-start-state.is-book-scene {
  --journey-ink: #2d2722;
  --journey-muted: #746c63;
  --journey-green: #3f7c68;
  --journey-gold: #e0ad46;
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(24px, 5vw, 72px);
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: clamp(32px, 4.4vw, 58px) clamp(28px, 4.6vw, 72px);
  overflow: hidden;
  border-radius: clamp(24px, 3vw, 36px);
  background:
    radial-gradient(circle at 72% 72%, rgba(224, 173, 70, .13), transparent 26%),
    radial-gradient(circle at 20% 16%, rgba(63, 124, 104, .1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 253, 248, .94));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.74),
    0 42px 92px rgba(44, 36, 28, .15);
}

.browse-start-state.is-book-scene::before {
  content: "From Driftwood and Ink";
  position: absolute;
  top: clamp(28px, 4vw, 54px);
  left: clamp(70px, 7.8vw, 116px);
  z-index: 4;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: var(--journey-green);
  font-size: clamp(.88rem, 1.35vw, 1.12rem);
  font-weight: 900;
  letter-spacing: .005em;
  text-transform: none;
}

.browse-start-state.is-book-scene::after {
  content: "";
  position: absolute;
  top: clamp(24px, 3.9vw, 48px);
  left: clamp(28px, 4.5vw, 72px);
  z-index: 4;
  width: clamp(34px, 3.4vw, 44px);
  height: clamp(34px, 3.4vw, 44px);
  border-radius: 50%;
  background: linear-gradient(135deg, #e8b765, #f0d4a0 48%, #4f8173);
  box-shadow: 0 16px 30px rgba(63, 124, 104, .18);
}

.browse-start-state.is-book-scene .browse-start-copy {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  justify-items: start;
  margin-top: clamp(108px, 15vh, 150px);
  padding: 0;
  text-align: left;
}

.browse-start-state.is-book-scene .browse-start-copy h3 {
  max-width: 9.6ch;
  margin: 0;
  color: var(--journey-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5.45vw, 5rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: 0;
  text-shadow: none;
}

.browse-start-state.is-book-scene .start-book-feature-panel {
  position: absolute;
  left: clamp(36px, 5vw, 78px);
  top: clamp(416px, 53vh, 488px);
  z-index: 5;
  display: block;
  width: min(36vw, 460px);
  margin: 0;
  pointer-events: none;
}

.browse-start-state.is-book-scene .start-book-selection-card {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.browse-start-state.is-book-scene .start-book-selection-title {
  color: var(--journey-green);
  font-size: clamp(1.26rem, 2.2vw, 1.78rem);
  font-weight: 950;
  line-height: 1.05;
}

.browse-start-state.is-book-scene .start-book-selection-meta {
  margin-top: 8px;
  color: var(--journey-muted);
  font-size: clamp(.98rem, 1.45vw, 1.18rem);
  font-weight: 850;
  line-height: 1.25;
}

.browse-start-state.is-book-scene .start-book-dots {
  display: none;
}

.browse-start-state.is-book-scene .start-book-shelf {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  perspective: 1200px;
}

.browse-start-state.is-book-scene .start-book-shelf::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 3%;
  bottom: clamp(88px, 12vh, 130px);
  height: clamp(150px, 17vw, 230px);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(224, 173, 70, .25), rgba(255, 255, 255, .56) 48%, transparent 72%);
  pointer-events: none;
}

.browse-start-state.is-book-scene .start-book-carousel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(126px, 13vw, 184px);
  align-items: center;
  gap: clamp(10px, 1.8vw, 26px);
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: clamp(90px, 10vh, 116px) max(42px, calc(50% - clamp(63px, 6.5vw, 92px))) clamp(84px, 10vh, 116px);
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scroll-padding-inline: max(42px, calc(50% - clamp(63px, 6.5vw, 92px)));
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.browse-start-state.is-book-scene .start-book-carousel::before {
  display: none;
}

.browse-start-state.is-book-scene .start-book-card {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: clamp(320px, 46vw, 520px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  scroll-snap-align: center;
  transform-style: preserve-3d;
}

.browse-start-state.is-book-scene .start-book-card img {
  width: clamp(118px, 13vw, 174px);
  aspect-ratio: .74;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 14px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 24px 46px rgba(48, 39, 30, .16);
  opacity: .38;
  filter: saturate(.82);
  transform: translateY(44px) rotateY(-36deg) rotateZ(-7deg) scale(.92);
  transform-origin: 50% 84%;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease, filter 220ms ease, box-shadow 220ms ease;
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="-1"] img {
  opacity: .58;
  transform: translate(48px, 12px) rotateY(32deg) rotateZ(-5deg) scale(.98);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="1"] img {
  opacity: .58;
  transform: translate(-48px, 12px) rotateY(-32deg) rotateZ(5deg) scale(.98);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="-2"] img {
  opacity: .26;
  transform: translate(86px, 58px) rotateY(42deg) rotateZ(-10deg) scale(.86);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="2"] img {
  opacity: .26;
  transform: translate(-86px, 58px) rotateY(-42deg) rotateZ(10deg) scale(.86);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] {
  z-index: 8;
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] img {
  width: clamp(256px, 24vw, 340px);
  border-radius: 18px;
  opacity: 1;
  filter: saturate(1.03) contrast(1.02);
  box-shadow:
    0 34px 68px rgba(48, 39, 30, .22),
    0 16px 34px rgba(224, 173, 70, .17),
    0 0 0 7px rgba(240, 213, 160, .72);
  transform: translateY(-18px) rotateY(-8deg) rotateZ(1deg) scale(1.02);
}

.browse-start-state.is-book-scene .start-book-card:is(:hover, :focus-visible) img {
  filter: saturate(1.08) contrast(1.03);
}

.browse-start-state.is-book-scene .start-book-card span {
  display: none;
}

.browse-start-state.is-book-scene .shelf-scroll-button {
  top: 54%;
  display: grid;
  width: 58px;
  height: 58px;
  min-width: 58px;
  border: 0;
  background: rgba(255,255,255,.9);
  color: #20352f;
  box-shadow: 0 18px 42px rgba(31, 26, 20, .13);
}

.browse-start-state.is-book-scene .shelf-scroll-button-prev {
  left: clamp(2px, 1vw, 12px);
}

.browse-start-state.is-book-scene .shelf-scroll-button-next {
  right: clamp(2px, 1vw, 12px);
}

@media (max-width: 760px) {
  .browse-start-state.is-book-scene {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    gap: 0;
    padding: calc(env(safe-area-inset-top) + 26px) 20px calc(env(safe-area-inset-bottom) + 24px);
    border-radius: clamp(24px, 7vw, 34px);
  }

  .browse-start-state.is-book-scene::before {
    top: calc(env(safe-area-inset-top) + 28px);
    left: 72px;
    font-size: .9rem;
  }

  .browse-start-state.is-book-scene::after {
    top: calc(env(safe-area-inset-top) + 24px);
    left: 24px;
    width: 38px;
    height: 38px;
  }

  .browse-start-state.is-book-scene .browse-start-copy {
    grid-row: 1;
    margin-top: 92px;
  }

  .browse-start-state.is-book-scene .browse-start-copy h3 {
    max-width: 9.8ch;
    font-size: clamp(3.05rem, 13vw, 4.25rem);
  }

  .browse-start-state.is-book-scene .start-book-feature-panel {
    position: relative;
    left: auto;
    top: auto;
    grid-row: 2;
    width: 100%;
    margin: clamp(34px, 7vh, 56px) 0 0;
  }

  .browse-start-state.is-book-scene .start-book-shelf {
    grid-column: 1;
    grid-row: 3;
    min-height: clamp(300px, 58vh, 470px);
    margin-top: clamp(10px, 2vh, 18px);
  }

  .browse-start-state.is-book-scene .start-book-shelf::before {
    left: 4%;
    right: 4%;
    bottom: 34px;
    height: 132px;
  }

  .browse-start-state.is-book-scene .start-book-carousel {
    grid-auto-columns: clamp(106px, 34vw, 142px);
    padding: 28px max(32px, calc(50% - 71px)) 54px;
    scroll-padding-inline: max(32px, calc(50% - 71px));
  }

  .browse-start-state.is-book-scene .start-book-card {
    min-height: clamp(260px, 64vw, 360px);
  }

  .browse-start-state.is-book-scene .start-book-card img {
    width: clamp(92px, 27vw, 126px);
  }

  .browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] img {
    width: clamp(184px, 58vw, 238px);
  }

  .browse-start-state.is-book-scene .shelf-scroll-button {
    display: none;
  }
}

/* Final book shelf focus rule: one centered hero, all other covers uniform. */
.start-book-card:not([data-shelf-position="0"]) {
  width: clamp(94px, 12vw, 112px);
}

.start-book-card:not([data-shelf-position="0"]) img {
  width: clamp(94px, 12vw, 112px) !important;
  height: clamp(127px, 16.2vw, 151px) !important;
  max-width: none;
  object-fit: cover;
  opacity: .84 !important;
  transform: translateY(10px) scale(.96) !important;
}

.start-book-card[data-shelf-position="0"] {
  width: clamp(196px, 22vw, 224px);
}

.start-book-card[data-shelf-position="0"] img {
  width: clamp(196px, 22vw, 224px) !important;
  height: clamp(265px, 29.7vw, 303px) !important;
  max-width: none;
  object-fit: cover;
}

@media (max-width: 720px) {
  .start-book-card:not([data-shelf-position="0"]),
  .start-book-card:not([data-shelf-position="0"]) img {
    width: clamp(78px, 24vw, 104px) !important;
  }

  .start-book-card:not([data-shelf-position="0"]) img {
    height: clamp(105px, 32.4vw, 140px) !important;
  }

  .start-book-card[data-shelf-position="0"] {
    width: clamp(150px, 46vw, 188px);
  }

  .start-book-card[data-shelf-position="0"] img {
    width: clamp(150px, 46vw, 188px) !important;
    height: clamp(203px, 62vw, 254px) !important;
  }
}

/* Final picker simplification: book tap selects; centered book owns the details. */
.browse-start-state.is-book-scene .start-book-carousel {
  grid-auto-columns: clamp(112px, 12vw, 132px);
  min-height: clamp(344px, 34vw, 430px);
  padding-top: clamp(34px, 4vh, 54px);
  padding-bottom: clamp(76px, 9vh, 104px);
}

.browse-start-state.is-book-scene .start-book-card {
  order: initial !important;
  width: clamp(112px, 12vw, 132px) !important;
  min-height: clamp(250px, 28vw, 330px);
  transform-style: flat;
}

.browse-start-state.is-book-scene .start-book-card:not([data-shelf-position="0"]) {
  z-index: 1;
}

.browse-start-state.is-book-scene .start-book-card:not([data-shelf-position="0"]) img {
  width: clamp(102px, 10.2vw, 118px) !important;
  height: clamp(138px, 13.8vw, 159px) !important;
  max-width: none;
  object-fit: cover;
  opacity: .7 !important;
  transform: translateY(34px) scale(.98) !important;
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] {
  z-index: 6;
  width: clamp(112px, 12vw, 132px) !important;
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] img {
  width: clamp(196px, 20vw, 246px) !important;
  height: clamp(265px, 27vw, 332px) !important;
  max-width: none;
  object-fit: contain;
  background: #fff;
  opacity: 1 !important;
  transform: translateX(calc((clamp(196px, 20vw, 246px) - clamp(112px, 12vw, 132px)) / -2)) translateY(-150px) scale(1) !important;
}

.browse-start-state.is-book-scene .start-book-feature-panel {
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: clamp(18px, 3vh, 32px);
  width: min(420px, 48vw);
  margin: 0;
  transform: translateX(-50%);
}

.browse-start-state.is-book-scene .start-book-selection-card {
  display: block;
  border-radius: 18px;
  padding: 13px 16px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 40px rgba(62, 40, 22, .1), inset 0 1px 0 rgba(255,255,255,.82);
  text-align: center;
}

.browse-start-state.is-book-scene .start-book-selection-title {
  font-size: clamp(1rem, 1.65vw, 1.25rem);
}

.browse-start-state.is-book-scene .start-book-selection-meta {
  margin-top: 4px;
  font-size: clamp(.78rem, 1.05vw, .9rem);
}

.browse-start-state.is-book-scene .start-book-dots {
  justify-content: center;
  padding-right: 0;
}

@media (max-width: 720px) {
  .browse-start-state.is-book-scene .start-book-carousel {
    grid-auto-columns: clamp(86px, 25vw, 108px);
    min-height: clamp(318px, 76vw, 392px);
    padding-bottom: 96px;
  }

  .browse-start-state.is-book-scene .start-book-card {
    width: clamp(86px, 25vw, 108px) !important;
  }

  .browse-start-state.is-book-scene .start-book-card:not([data-shelf-position="0"]) img {
    width: clamp(78px, 22vw, 96px) !important;
    height: clamp(105px, 30vw, 130px) !important;
  }

  .browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] img {
    width: clamp(150px, 45vw, 188px) !important;
    height: clamp(203px, 61vw, 254px) !important;
    transform: translateX(calc((clamp(150px, 45vw, 188px) - clamp(86px, 25vw, 108px)) / -2)) translateY(-84px) scale(1) !important;
  }

  .browse-start-state.is-book-scene .start-book-feature-panel {
    bottom: calc(env(safe-area-inset-bottom) + 24px);
    width: min(82vw, 340px);
  }
}

.coloring-page-stage.is-awaiting-page {
  align-items: stretch;
  justify-items: stretch;
  padding-inline: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(155deg, rgba(255,255,255,.12), transparent 38%),
    linear-gradient(20deg, rgba(7, 82, 85, .36), transparent 54%),
    #1f3a35;
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
}

.coloring-page-stage.is-awaiting-page::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background:
    linear-gradient(180deg, transparent, rgba(5, 22, 20, .22)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 96px);
  transform: perspective(640px) rotateX(62deg);
  transform-origin: bottom center;
  pointer-events: none;
}

.coloring-page-stage.is-awaiting-page::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(72px, 13vh, 138px);
  width: min(78%, 920px);
  height: clamp(58px, 10vw, 104px);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(6, 20, 18, .32), rgba(6, 20, 18, .1) 52%, transparent 76%);
  filter: blur(1px);
  transform: translateX(-50%);
  pointer-events: none;
}

.browse-start-state {
  position: relative;
  z-index: 3;
  grid-template-columns: 1fr;
  justify-items: stretch;
  align-content: center;
  gap: clamp(10px, 2.4vw, 24px);
  width: 100%;
  min-height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(24px, 5vw, 64px) 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.browse-start-copy {
  position: absolute;
  top: clamp(18px, 4.5vh, 44px);
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0;
  padding-inline: 18px;
  pointer-events: none;
  text-align: center;
}

.browse-start-copy h3 {
  max-width: none;
  margin: 0;
  color: rgba(250, 248, 240, .96);
  font-size: clamp(2.35rem, 5.2vw, 4.85rem);
  line-height: .88;
  letter-spacing: 0;
  text-shadow: 0 22px 52px rgba(0,0,0,.28);
}

.browse-start-copy p:not(.browse-start-kicker),
.browse-start-kicker {
  display: none;
}

.start-book-shelf {
  min-width: 0;
  width: 100%;
  perspective: 1100px;
}

.start-book-carousel {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(156px, 18vw, 218px);
  align-items: end;
  gap: clamp(18px, 3vw, 42px);
  width: 100%;
  min-height: clamp(312px, 44vw, 470px);
  margin: 0 auto;
  padding: clamp(88px, 13vh, 126px) max(18px, calc(50% - 108px)) clamp(30px, 5vw, 62px);
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  perspective: 1200px;
  transform-style: preserve-3d;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.start-book-carousel::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 2vw, 22px);
  width: min(980px, 86%);
  height: clamp(78px, 13vw, 138px);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(2, 18, 16, .34), rgba(2, 18, 16, .12) 54%, transparent 75%),
    linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

.start-book-carousel::-webkit-scrollbar,
.start-page-rail::-webkit-scrollbar {
  height: 0;
}

.start-book-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  justify-items: center;
  align-content: start;
  min-height: clamp(282px, 39vw, 410px);
  border: 0;
  border-radius: 18px;
  padding: 0;
  background: transparent;
  color: rgba(250, 248, 240, .92);
  cursor: pointer;
  scroll-snap-align: center;
  transform-style: preserve-3d;
}

.start-book-card img {
  width: 100%;
  aspect-ratio: .74;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: 14px;
  object-fit: cover;
  background: #fff;
  box-shadow:
    12px 32px 64px rgba(0,0,0,.36),
    -10px 18px 44px rgba(255,255,255,.07),
    inset 0 1px 0 rgba(255,255,255,.58);
  transform: translateY(20px) rotateY(-24deg) rotateZ(-4deg);
  transform-origin: 50% 82%;
  transition: transform 260ms ease, box-shadow 260ms ease, filter 260ms ease;
}

.start-book-card:nth-child(2n) img {
  transform: translateY(4px) rotateY(18deg) rotateZ(3deg);
}

.start-book-card:nth-child(3n) img {
  transform: translateY(30px) rotateY(-12deg) rotateZ(5deg);
}

.start-book-card:is(:hover, :focus-visible) img,
.start-book-card.is-selected img {
  filter: saturate(1.08) contrast(1.03);
  box-shadow:
    0 44px 86px rgba(0,0,0,.44),
    0 0 0 1px rgba(255,255,255,.54),
    inset 0 1px 0 rgba(255,255,255,.72);
  transform: translateY(-26px) rotateY(0deg) rotateZ(0deg) scale(1.085);
}

.start-book-card span {
  display: block;
  max-width: 15ch;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(17, 29, 27, .36);
  color: rgba(250,248,240,.92);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  font-size: clamp(.78rem, 1.2vw, .92rem);
  font-weight: 920;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(16px) saturate(130%);
}

.browse-start-state.has-book-selected {
  align-content: start;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  padding: clamp(22px, 3.8vw, 46px) 0 clamp(20px, 3vw, 38px);
}

.browse-start-state.has-book-selected .browse-start-copy {
  display: none;
}

.browse-start-state.has-book-selected .start-book-carousel {
  display: none;
  grid-auto-columns: clamp(96px, 15vw, 132px);
  min-height: clamp(146px, 18vw, 194px);
  padding-top: 18px;
  padding-bottom: 24px;
}

.browse-start-state.has-book-selected .start-book-carousel::before {
  height: 48px;
  bottom: 4px;
}

.browse-start-state.has-book-selected .start-book-card {
  min-height: clamp(132px, 17vw, 178px);
  opacity: .62;
}

.browse-start-state.has-book-selected .start-book-card.is-selected {
  opacity: 1;
}

.browse-start-state.has-book-selected .start-book-card.is-selected img {
  transform: translateY(0) rotateY(0deg) rotateZ(0deg) scale(1.035);
}

.browse-start-state.has-book-selected .start-book-card span {
  display: none;
}

.start-page-shelf {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  min-width: 0;
  width: min(100%, 1060px);
  min-height: 0;
  margin: 0 auto;
  padding-inline: clamp(12px, 4vw, 44px);
}

.start-page-title {
  display: none;
  margin: 0;
  color: var(--studio-muted);
  font-size: .78rem;
  font-weight: 950;
  text-align: center;
}

.start-page-rail-wrap {
  min-width: 0;
  width: 100%;
}

.start-page-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(180px, 23vw, 250px);
  gap: clamp(14px, 2.2vw, 24px);
  min-width: 0;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 6px 34px clamp(22px, 4vw, 40px);
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.start-page-card {
  display: grid;
  grid-template-rows: minmax(230px, 1fr) auto;
  gap: 10px;
  min-height: clamp(312px, 48vh, 452px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 12px;
  background: rgba(255,255,255,.1);
  color: var(--studio-ink);
  box-shadow: 0 26px 58px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.2);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: center;
  transition: transform 160ms ease, box-shadow 160ms ease;
  backdrop-filter: blur(18px) saturate(125%);
}

.start-page-card:is(:hover, :focus-visible) {
  box-shadow: 0 34px 72px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.28);
  transform: translateY(-7px);
}

.start-page-card img {
  width: 100%;
  height: 100%;
  min-height: 230px;
  border-radius: 14px;
  object-fit: contain;
  background: #fffefa;
}

.start-page-card span {
  overflow: hidden;
  color: rgba(250,248,240,.94);
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
}

.fly-book-cover,
.fly-page-title {
  border-radius: 12px;
  filter: drop-shadow(0 28px 48px rgba(0,0,0,.28));
}

.fly-page-title {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(48,48,48,.78);
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .browse-start-state {
    min-height: 100%;
    padding: calc(env(safe-area-inset-top) + 22px) 0 calc(env(safe-area-inset-bottom) + 22px);
  }

  .start-book-carousel {
    grid-auto-columns: clamp(156px, 52vw, 218px);
    min-height: clamp(314px, 76vw, 396px);
    padding-top: clamp(82px, 15vh, 110px);
  }

  .start-book-card {
    min-height: clamp(292px, 70vw, 372px);
  }

  .start-page-rail {
    grid-auto-columns: min(74vw, 244px);
  }

  .browse-start-state.has-book-selected .start-book-carousel {
    grid-auto-columns: 100px;
    min-height: 150px;
  }

  .start-page-card {
    min-height: 226px;
  }
}

/* EOF viewport-safe overlay placement. This must remain last. */
.color-menu {
  position: fixed;
  left: var(--popover-left, 10px) !important;
  top: var(--popover-top, 10px) !important;
  right: auto !important;
  bottom: auto !important;
  width: min(var(--popover-width, 392px), calc(100vw - 20px));
  max-height: min(var(--popover-max-height, 720px), calc(100dvh - 20px));
  overflow: hidden;
  overscroll-behavior: contain;
}

.color-menu .color-tab-panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tool-popover {
  position: fixed;
  left: var(--tool-popover-left, 10px);
  top: var(--tool-popover-top, 10px);
  right: auto;
  bottom: auto;
  width: min(var(--tool-popover-width, 300px), calc(100vw - 20px));
  max-height: min(var(--tool-popover-max-height, 520px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.brush-size-popover {
  width: min(var(--brush-popover-width, 360px), calc(100vw - 20px));
  max-height: min(var(--brush-popover-max-height, 620px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.more-menu {
  position: fixed;
  left: var(--more-menu-left, auto);
  top: var(--more-menu-top, 10px);
  right: auto;
  bottom: auto;
  width: min(var(--more-menu-width, 220px), calc(100vw - 20px));
  max-height: min(var(--more-menu-max-height, 360px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Final viewport-safe overlay placement. This must remain last. */
.color-menu {
  position: fixed;
  left: var(--popover-left, 10px) !important;
  top: var(--popover-top, 10px) !important;
  right: auto !important;
  bottom: auto !important;
  width: min(var(--popover-width, 392px), calc(100vw - 20px));
  max-height: min(var(--popover-max-height, 720px), calc(100dvh - 20px));
  overflow: hidden;
  overscroll-behavior: contain;
}

.color-menu .color-tab-panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tool-popover {
  position: fixed;
  left: var(--tool-popover-left, 10px);
  top: var(--tool-popover-top, 10px);
  right: auto;
  bottom: auto;
  width: min(var(--tool-popover-width, 300px), calc(100vw - 20px));
  max-height: min(var(--tool-popover-max-height, 520px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.brush-size-popover {
  width: min(var(--brush-popover-width, 360px), calc(100vw - 20px));
  max-height: min(var(--brush-popover-max-height, 620px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.more-menu {
  position: fixed;
  left: var(--more-menu-left, auto);
  top: var(--more-menu-top, 10px);
  right: auto;
  bottom: auto;
  width: min(var(--more-menu-width, 220px), calc(100vw - 20px));
  max-height: min(var(--more-menu-max-height, 360px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Viewport-safe overlay placement. Menus must never depend on the canvas container size. */
.color-menu {
  position: fixed;
  left: var(--popover-left, 10px) !important;
  top: var(--popover-top, 10px) !important;
  right: auto !important;
  bottom: auto !important;
  width: min(var(--popover-width, 392px), calc(100vw - 20px));
  max-height: min(var(--popover-max-height, 720px), calc(100dvh - 20px));
  overflow: hidden;
  overscroll-behavior: contain;
}

.color-menu .color-tab-panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tool-popover {
  position: fixed;
  left: var(--tool-popover-left, 10px);
  top: var(--tool-popover-top, 10px);
  right: auto;
  bottom: auto;
  width: min(var(--tool-popover-width, 300px), calc(100vw - 20px));
  max-height: min(var(--tool-popover-max-height, 520px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.brush-size-popover {
  width: min(var(--brush-popover-width, 360px), calc(100vw - 20px));
  max-height: min(var(--brush-popover-max-height, 620px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.more-menu {
  position: fixed;
  left: var(--more-menu-left, auto);
  top: var(--more-menu-top, 10px);
  right: auto;
  bottom: auto;
  width: min(var(--more-menu-width, 220px), calc(100vw - 20px));
  max-height: min(var(--more-menu-max-height, 360px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.brush-size-popover .brush-panel-view {
  gap: 9px;
}

.brush-size-popover .brush-panel-section {
  display: grid;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
}

.brush-size-popover .brush-control {
  --range-fill: 50%;
  display: grid;
  grid-template-columns: 104px minmax(118px, 1fr) 38px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 4px 0;
  color: #d7d7d7;
  font-size: .82rem;
  font-weight: 820;
}

.brush-size-popover .brush-control > span:first-child {
  min-width: 0;
  color: #cfcfcf;
  white-space: nowrap;
}

.brush-size-popover .brush-control > span:last-child {
  justify-self: end;
  min-width: 32px;
  color: #d8d8d8;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.brush-size-popover .brush-control input[type="range"] {
  width: 100%;
  min-width: 0;
  height: 28px;
  margin: 0;
  border: 0;
  background: transparent;
  accent-color: #0a84ff;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}

.brush-size-popover .brush-control input[type="range"]:focus {
  outline: none;
}

.brush-size-popover .brush-control input[type="range"]::-webkit-slider-runnable-track {
  height: 7px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background:
    linear-gradient(90deg, #0a84ff 0 var(--range-fill), rgba(255,255,255,.13) var(--range-fill) 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.32);
}

.brush-size-popover .brush-control input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 3px solid #f5f5f5;
  border-radius: 999px;
  background: #0a84ff;
  box-shadow: 0 6px 16px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.18);
  -webkit-appearance: none;
  appearance: none;
}

.brush-size-popover .brush-control input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 6px 16px rgba(0,0,0,.32), 0 0 0 4px rgba(10,132,255,.28);
}

.brush-size-popover .brush-control input[type="range"]::-moz-range-track {
  height: 7px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.32);
}

.brush-size-popover .brush-control input[type="range"]::-moz-range-progress {
  height: 7px;
  border-radius: 999px;
  background: #0a84ff;
}

.brush-size-popover .brush-control input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 3px solid #f5f5f5;
  border-radius: 999px;
  background: #0a84ff;
  box-shadow: 0 6px 16px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.18);
}

.brush-size-popover .brush-control input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 6px 16px rgba(0,0,0,.32), 0 0 0 4px rgba(10,132,255,.28);
}

.brush-size-popover .brush-control .brush-size-preview {
  justify-self: end;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(245,245,245,.92) 0 var(--brush-preview-size, 42%), transparent calc(var(--brush-preview-size, 42%) + 1px)),
    rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.brush-size-popover #brush-panel-adjust .brush-control {
  grid-template-columns: 54px minmax(132px, 1fr) 40px;
  padding: 8px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
}

@media (max-width: 380px) {
  .brush-size-popover .brush-control {
    grid-template-columns: 92px minmax(96px, 1fr) 36px;
    gap: 8px;
  }

  .brush-size-popover #brush-panel-adjust .brush-control {
    grid-template-columns: 48px minmax(112px, 1fr) 38px;
  }
}

/* Final brush popover placement/theme override after all responsive rules. */
.brush-size-popover {
  position: fixed;
  left: var(--brush-popover-left, 12px);
  top: var(--brush-popover-top, 88px);
  right: auto;
  bottom: auto;
  width: min(360px, calc(100vw - 20px));
  height: auto;
  max-height: min(76dvh, 620px);
  align-content: start;
  padding: 18px 14px 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  background: #303030;
  color: #d6d6d6;
  box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  transform: none;
  backdrop-filter: none;
}

@media (max-width: 430px) {
  .brush-size-popover {
    width: min(360px, calc(100vw - 24px));
    max-height: min(72dvh, 620px);
  }
}

.brush-size-popover {
  position: fixed;
  left: var(--brush-popover-left, 12px);
  top: var(--brush-popover-top, 88px);
  right: auto;
  bottom: auto;
  width: min(360px, calc(100vw - 20px));
  height: auto;
  max-height: min(76dvh, 620px);
  align-content: start;
  padding: 18px 14px 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  background: #303030;
  color: #d6d6d6;
  box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  transform: none;
  backdrop-filter: none;
}

@media (max-width: 430px) {
  .brush-size-popover {
    width: min(360px, calc(100vw - 24px));
    max-height: min(72dvh, 620px);
  }
}

/* Brush popover follows the Colors panel language, anchored to the brush control. */
.brush-size-popover {
  position: fixed;
  left: var(--brush-popover-left, 12px);
  top: var(--brush-popover-top, 88px);
  right: auto;
  bottom: auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, auto);
  align-content: start;
  gap: 14px;
  width: min(360px, calc(100vw - 20px));
  max-height: min(76dvh, 620px);
  padding: 18px 14px 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  background: #303030;
  color: #d6d6d6;
  box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: none;
  backdrop-filter: none;
}

.brush-panel-header {
  padding: 0 2px;
  color: #f2f2f2;
}

.brush-panel-header span {
  color: #f2f2f2;
  font-size: 1.42rem;
  line-height: 1;
  font-weight: 860;
}

.brush-panel-header strong {
  color: #f2f2f2;
  font-size: .95rem;
}

.brush-panel-tabs {
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.brush-panel-tab {
  min-height: 44px;
  border-radius: 14px;
  color: #bcbcbc;
  font-size: .82rem;
  font-weight: 850;
}

.brush-panel-tab.is-active {
  background: #25466f;
  color: #8ec5ff;
  box-shadow: none;
}

.brush-panel-view {
  gap: 10px;
}

.brush-current-button,
.brush-panel-section,
.brush-toggle {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: #f2f2f2;
  box-shadow: none;
}

.brush-current-button {
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  min-height: 58px;
  border-radius: 16px;
}

.brush-current-button em,
.brush-control,
.brush-control span:last-child,
.brush-toggle span,
.brush-preset span:not(.brush-preset-icon) {
  color: #bcbcbc;
}

.brush-preset-grid {
  gap: 8px;
}

.brush-preset {
  min-height: 70px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  color: #f2f2f2;
  box-shadow: none;
}

.brush-preset.is-active {
  border-color: rgba(10,132,255,.7);
  background: #25466f;
  color: #f2f2f2;
  box-shadow: none;
}

.brush-preset-icon {
  background: rgba(255,255,255,.1);
  color: #f2f2f2;
}

.brush-control input {
  accent-color: #ff6a5f;
}

.brush-toggle input {
  background: rgba(255,255,255,.22);
}

.brush-toggle input:checked {
  background: #0a84ff;
}

@media (max-width: 430px) {
  .brush-size-popover {
    width: min(360px, calc(100vw - 24px));
    max-height: min(72dvh, 620px);
    padding: 18px 14px 14px;
    border-radius: 30px;
  }
}

.studio-session-bar.minimal-session-bar {
  grid-template-columns: minmax(0, 1fr) 38px 38px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.studio-session-bar.minimal-session-bar .autosave-note,
.studio-session-bar.minimal-session-bar .session-title span {
  display: none;
}

.studio-shell.is-chrome-idle .studio-session-bar,
.studio-shell.is-chrome-idle .bottom-control-strip {
  opacity: .96;
}

.studio-shell.is-chrome-idle .bottom-control-strip {
  transform: translateX(-50%);
}

/* Compact tablet/phone control pass: keep every picker reachable without fullscreen. */
@media (max-width: 820px), (max-height: 720px) and (pointer: coarse) {
  .tool-popover,
  .brush-size-popover,
  .palette-drawer {
    position: fixed;
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    transform: none;
    z-index: 180;
    border-radius: 22px;
  }

  .tool-popover,
  .brush-size-popover {
    max-height: min(62dvh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .tool-popover {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .tool-choice {
    min-height: 58px;
  }

  .brush-size-popover {
    gap: 10px;
    padding: 12px;
    max-height: min(78dvh, 620px);
  }

  .brush-preset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brush-preset {
    min-height: 58px;
  }

  .palette-drawer {
    max-height: min(56dvh, 480px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .palette-tabs {
    grid-auto-columns: minmax(136px, 170px);
  }
}

@media (max-width: 520px) {
  .bottom-control-strip {
    grid-template-columns: minmax(0, 1fr);
    width: min(430px, calc(100% - 16px));
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .bottom-control-strip .palette-button {
    display: inline-grid;
  }

  .active-palette .swatch:nth-of-type(n+6) {
    display: none;
  }

  .tool-popover {
    grid-template-columns: 1fr;
  }

  .brush-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brush-control {
    grid-template-columns: minmax(72px, .7fr) minmax(0, 1fr) 42px;
  }

  .palette-header span {
    display: none;
  }
}

/* Usability hardening: keep primary touch targets at least 44px. */
.discover-actions .studio-command,
.discover-actions .studio-icon-button.compact,
#close-share-panel,
#undo-coloring,
#redo-coloring,
.size-presets button,
.favorite-sample-slot,
.color-menu .swatch,
.color-menu .recent-color,
.color-menu .favorite-color {
  min-width: 44px;
  min-height: 44px;
}

.discover-actions .studio-icon-button.compact,
#close-share-panel,
#undo-coloring,
#redo-coloring {
  width: 44px;
  height: 44px;
}

.size-presets button {
  width: 44px;
  height: 44px;
}

.color-menu .swatch,
.color-menu .recent-color,
.color-menu .favorite-color,
.favorite-sample-slot {
  width: 44px;
  height: 44px;
}

.color-menu .color-menu-disc.custom-color-control {
  display: grid;
  grid-template-columns: 36px 1fr;
  width: auto;
  height: auto;
  min-width: 0;
  border-radius: 999px;
  background: rgba(249, 247, 242, .68);
}

.color-menu .color-menu-disc.custom-color-control::after {
  content: none;
}

.color-menu .recent-color-row::before,
.color-menu .favorite-color-row::before {
  content: none;
}

.color-menu .recent-color,
.color-menu .favorite-color {
  width: 44px;
  height: 44px;
  min-width: 44px;
}

.tool-popover .tool-choice.move-choice {
  display: grid;
}

.fan-gallery .color-this-page,
.fan-gallery .vibe-button {
  min-height: 44px;
}

.studio-icon-button svg,
.tool-button svg {
  pointer-events: none;
}

/* Procreate-inspired single-surface color picker. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.color-menu {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  width: min(var(--popover-width, 392px), calc(100vw - 20px));
  max-height: min(var(--popover-max-height, 720px), calc(100dvh - 18px));
  padding: 22px 18px 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 34px;
  background: #303030;
  color: #d6d6d6;
  box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}

.color-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.color-panel-header h3 {
  margin: 0;
  color: #f2f2f2;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 860;
}

.color-panel-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
}

.panel-color-swatch {
  width: 44px;
  height: 38px;
  min-width: 44px;
  min-height: 38px;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 14px;
  background: var(--panel-color, #ff0000);
  box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);
  cursor: pointer;
}

.panel-color-swatch-current {
  width: 52px;
  height: 46px;
  min-width: 52px;
  min-height: 46px;
  border-color: rgba(255,255,255,.82);
}

.color-panel-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: #d6d6d6;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.color-tab-panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 2px 4px;
}

.color-tab-panel[hidden] {
  display: none;
}

.color-wheel-picker {
  --wheel-hue-color: #ff0000;
  --wheel-hue: 0deg;
  --shade-x: 100%;
  --shade-y: 0%;
  --shade-position: 50%;
  --wheel-ring-radius: 102px;
  position: relative;
  display: grid;
  gap: 16px;
  width: min(248px, calc(100vw - 86px));
  margin: 0 auto 2px;
}

.color-wheel-ring {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  box-shadow: 0 18px 38px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.18);
  cursor: crosshair;
  touch-action: none;
}

.color-wheel-ring:focus-visible,
.shade-disc:focus-visible,
.color-wheel-ring.is-adjusting,
.shade-disc.is-adjusting {
  outline: 2px solid rgba(34, 43, 46, .26);
  outline-offset: 3px;
}

.color-wheel-ring::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: #303030;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  pointer-events: none;
}

.color-wheel-cursor {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--wheel-hue-color);
  box-shadow: 0 0 0 1px rgba(39,47,49,.32), 0 7px 14px rgba(38,31,24,.22);
  transform: rotate(var(--wheel-hue)) translateY(calc(-1 * var(--wheel-ring-radius))) rotate(calc(-1 * var(--wheel-hue))) translate(-50%, -50%);
  transform-origin: 0 0;
  pointer-events: none;
}

.shade-disc {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 48px;
  min-height: 48px;
  border: 2px solid rgba(255,255,255,.26);
  border-radius: 999px;
  background:
    linear-gradient(to right, #f4f4f4 0%, var(--wheel-hue-color) 50%, #161616 100%);
  box-shadow: 0 12px 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.14);
  cursor: ew-resize;
  overflow: hidden;
  touch-action: none;
}

.shade-cursor {
  position: absolute;
  left: var(--shade-position);
  top: 50%;
  width: 24px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--puck-color, #ff0000);
  box-shadow: 0 0 0 1px rgba(39,47,49,.45), 0 6px 14px rgba(38,31,24,.24);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.color-history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.color-panel-section {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.color-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #d6d6d6;
  font-size: .82rem;
  font-weight: 850;
}

.color-menu .recent-color-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
  overflow: visible;
  padding: 0;
}

.color-menu .recent-color,
.color-menu .recent-color.is-empty {
  width: 100%;
  min-width: 0;
  height: 26px;
  min-height: 26px;
  border-radius: 4px;
  border-color: rgba(255,255,255,.18);
}

.color-menu .recent-color.is-empty {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.07);
  box-shadow: none;
}

.clear-history-button,
.palette-toggle-button {
  min-height: 36px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #d6d6d6;
  font-size: .78rem;
  font-weight: 950;
  cursor: pointer;
}

.clear-history-button {
  padding: 0 12px;
}

.palette-grid,
.palette-swatch-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.color-menu .palette-grid .swatch,
.color-menu .palette-swatch-row .swatch {
  width: 100%;
  min-width: 0;
  height: 24px;
  min-height: 24px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.color-menu .palette-tabs {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  gap: 6px;
  max-height: 390px;
  overflow-y: auto;
  padding: 0 2px 2px;
}

.color-menu .palette-tabs[hidden],
.color-menu .palette-family[hidden],
.color-menu .value-color-row[hidden],
.color-menu .favorite-sample-strip[hidden] {
  display: none;
}

.color-menu .palette-tab {
  display: grid;
  gap: 8px;
  min-height: 76px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  padding: 10px;
  background: rgba(255,255,255,.07);
  color: #d6d6d6;
}

.color-menu .palette-tab.is-active {
  border-color: rgba(10,132,255,.9);
  box-shadow: inset 0 0 0 1px rgba(10,132,255,.45);
}

.color-menu .palette-tab strong {
  color: #f0f0f0;
  font-size: .9rem;
}

.color-menu .palette-preview-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border-radius: 10px;
}

.color-menu .palette-preview-grid i {
  display: block;
  height: 10px;
  background: var(--swatch);
}

.color-menu .palette-family {
  padding: 0;
}

.color-bottom-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 2px -4px 0;
  padding-top: 9px;
  border-top: 1px solid rgba(255,255,255,.12);
}

.color-bottom-tab {
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #afafaf;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
}

.color-bottom-tab.is-active {
  background: rgba(10,132,255,.18);
  color: #66b2ff;
}

.classic-picker-box {
  --wheel-hue-color: #ff0000;
  --shade-x: 100%;
  --shade-y: 0%;
  position: relative;
  height: 210px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0), #000),
    linear-gradient(to right, #fff, rgba(255,255,255,0)),
    var(--wheel-hue-color);
  overflow: hidden;
  touch-action: none;
}

.classic-picker-cursor {
  position: absolute;
  left: var(--shade-x);
  top: var(--shade-y);
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 6px 14px rgba(0,0,0,.26);
  transform: translate(-50%, -50%);
}

.color-slider-row,
.hex-input-row,
.value-control-row,
.value-hex-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #d6d6d6;
  font-size: .82rem;
  font-weight: 800;
}

.hex-input-row,
.value-hex-row {
  grid-template-columns: 72px minmax(0, 1fr);
}

.color-slider-row input,
.value-control-row input {
  accent-color: #0a84ff;
}

.hex-input-row input,
.value-hex-row input {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 0 12px;
  background: rgba(255,255,255,.08);
  color: #f2f2f2;
  font-weight: 850;
}

.harmony-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.harmony-mode-button {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: #d6d6d6;
  font-weight: 850;
}

.harmony-mode-button.is-active {
  border-color: rgba(10,132,255,.8);
  color: #66b2ff;
}

.harmony-color-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.harmony-color-grid .swatch {
  width: 100%;
  height: 56px;
  border-radius: 16px;
}

.value-control-grid {
  display: grid;
  gap: 7px;
}

@media (max-width: 430px) {
  .color-menu {
    left: 8px !important;
    right: 12px;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(var(--popover-width, 362px), calc(100vw - 24px));
    max-height: min(86dvh, 720px);
    padding: 20px 14px 12px;
    border-radius: 34px 34px 24px 24px;
  }

  .color-wheel-picker {
    width: min(228px, calc(100vw - 92px));
  }

  .color-wheel-cursor {
    transform: rotate(var(--wheel-hue)) translateY(calc(-1 * var(--wheel-ring-radius))) rotate(calc(-1 * var(--wheel-hue))) translate(-50%, -50%);
  }

.color-menu .recent-color,
.color-menu .recent-color.is-empty,
.color-menu .palette-grid .swatch,
.color-menu .palette-swatch-row .swatch {
    height: 22px;
    min-height: 22px;
  }
}

.studio-session-bar .session-status-strip span,
.studio-session-bar.minimal-session-bar .session-status-strip span,
.studio-session-bar.minimal-session-bar .session-status-strip .autosave-note {
  display: inline-flex;
  align-items: center;
}

/* Final brush popover placement/theme override after all responsive rules. */
.brush-size-popover {
  position: fixed;
  left: var(--brush-popover-left, 12px);
  top: var(--brush-popover-top, 88px);
  right: auto;
  bottom: auto;
  width: min(360px, calc(100vw - 20px));
  height: auto;
  max-height: min(76dvh, 620px);
  align-content: start;
  padding: 18px 14px 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 30px;
  background: #303030;
  color: #d6d6d6;
  box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
  transform: none;
  backdrop-filter: none;
}

@media (max-width: 430px) {
  .brush-size-popover {
    width: min(360px, calc(100vw - 24px));
    max-height: min(72dvh, 620px);
  }
}

/* EOF viewport-safe overlay placement. This must remain last. */
.color-menu {
  position: fixed;
  left: var(--popover-left, 10px) !important;
  top: var(--popover-top, 10px) !important;
  right: auto !important;
  bottom: auto !important;
  width: min(var(--popover-width, 392px), calc(100vw - 20px));
  max-height: min(var(--popover-max-height, 720px), calc(100dvh - 20px));
  overflow: hidden;
  overscroll-behavior: contain;
}

.color-menu .color-tab-panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tool-popover {
  position: fixed;
  left: var(--tool-popover-left, 10px);
  top: var(--tool-popover-top, 10px);
  right: auto;
  bottom: auto;
  width: min(var(--tool-popover-width, 300px), calc(100vw - 20px));
  max-height: min(var(--tool-popover-max-height, 520px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.brush-size-popover {
  width: min(var(--brush-popover-width, 360px), calc(100vw - 20px));
  max-height: min(var(--brush-popover-max-height, 620px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.more-menu {
  position: fixed;
  left: var(--more-menu-left, auto);
  top: var(--more-menu-top, 10px);
  right: auto;
  bottom: auto;
  width: min(var(--more-menu-width, 220px), calc(100vw - 20px));
  max-height: min(var(--more-menu-max-height, 360px), calc(100dvh - 20px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* EOF minimal canvas identity strip. */
.studio-session-bar.minimal-session-bar {
  left: max(58px, calc(env(safe-area-inset-left) + 58px));
  right: auto;
  width: min(520px, calc(100% - 72px));
  min-height: 42px;
  display: inline-grid;
  grid-template-columns: 34px minmax(0, auto);
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.session-book-thumb {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 9px;
  object-fit: cover;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.minimal-session-bar .session-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
}

.minimal-session-bar .session-title h2,
.minimal-session-bar #session-tool-state {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(48,48,48,.72);
  color: #f3f3f3;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
  backdrop-filter: blur(14px) saturate(135%);
}

.minimal-session-bar .session-title h2 {
  max-width: min(38vw, 300px);
  padding: 0 10px;
  font-size: .82rem;
  font-weight: 860;
}

.minimal-session-bar .session-status-strip {
  display: contents;
}

.minimal-session-bar #session-tool-state {
  max-width: 150px;
  padding: 0 9px;
  font-size: .72rem;
  font-weight: 850;
}

.minimal-session-bar #session-book-name,
.minimal-session-bar #session-zoom-state,
.minimal-session-bar .autosave-note {
  display: none !important;
}

.brush-panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.brush-panel-header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.brush-panel-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  color: #d6d6d6;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.brush-panel-close:focus-visible {
  outline: 3px solid rgba(10,132,255,.3);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .studio-session-bar.minimal-session-bar {
    width: min(308px, calc(100% - 70px));
  }

  .minimal-session-bar .session-title h2 {
    max-width: 132px;
  }

  .minimal-session-bar #session-tool-state {
    max-width: 96px;
  }
}

body:not(.studio-fullscreen) .canvas-stage .coloring-page-stage {
  touch-action: pan-y;
}

body:not(.studio-fullscreen) .studio-shell,
body:not(.studio-fullscreen) .canvas-stage.coloring-workspace,
body:not(.studio-fullscreen) .canvas-stage .coloring-page-stage {
  overscroll-behavior: auto;
  touch-action: pan-y !important;
}

body:not(.studio-fullscreen):not(.studio-awaiting-page) .canvas-stage.coloring-workspace {
  contain: layout paint;
  pointer-events: none;
}

body:not(.studio-fullscreen):not(.studio-awaiting-page) .canvas-stage .coloring-page-stage {
  contain: layout paint;
}

body:not(.studio-fullscreen) .mac-fullscreen-button {
  display: none;
}

body:not(.studio-fullscreen) .coloring-page-stage .site-preview-canvas {
  display: block;
}

body.studio-awaiting-page .coloring-page-stage .site-preview-canvas {
  display: none;
}

body.studio-awaiting-page .studio-session-bar,
body.studio-awaiting-page .mac-fullscreen-button,
body.studio-awaiting-page .canvas-tool-cluster,
body.studio-awaiting-page .bottom-control-strip {
  display: none !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.studio-shell:has(.coloring-page-stage.is-awaiting-page) .studio-session-bar,
.studio-shell:has(.coloring-page-stage.is-awaiting-page) .mac-fullscreen-button,
.studio-shell:has(.coloring-page-stage.is-awaiting-page) .canvas-tool-cluster {
  display: none !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body:not(.studio-fullscreen) .coloring-page-stage .paper-screen-canvas,
body:not(.studio-fullscreen) .coloring-page-stage .color-screen-canvas,
body:not(.studio-fullscreen) .coloring-page-stage .line-art-screen-canvas {
  display: none;
}

body:not(.studio-fullscreen) .coloring-page-stage .coloring-zoom-layer {
  pointer-events: auto;
  touch-action: none;
}

body:not(.studio-fullscreen) .coloring-page-stage .coloring-zoom-layer img,
body:not(.studio-fullscreen) .coloring-page-stage .coloring-zoom-layer canvas {
  touch-action: none;
}

body:not(.studio-fullscreen) .coloring-page-stage #coloring-canvas {
  pointer-events: auto;
}

/* Single-line top header: logo and compact studio actions. */
.discover-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 18px);
  min-width: 0;
}

.discover-copy,
.summer-vibe-brand {
  min-width: 0;
}

.summer-vibe-brand {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  padding: clamp(7px, 1.2vw, 10px) clamp(10px, 2vw, 24px);
}

.summer-vibe-brand h1 {
  overflow: hidden;
  font-size: clamp(1.35rem, 4vw, 3.25rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: clamp(6px, 1.2vw, 10px);
  min-width: max-content;
}

.discover-actions .studio-command {
  min-width: auto;
  min-height: clamp(38px, 5vw, 48px);
  padding-inline: clamp(10px, 2vw, 16px);
  white-space: nowrap;
}

.discover-actions .primary-share-button {
  min-width: clamp(38px, 5vw, 48px);
  min-height: clamp(38px, 5vw, 48px);
  border-color: rgba(255, 255, 255, .58);
  background: linear-gradient(135deg, #0f555b, #0b8187);
  color: #fff;
  box-shadow: 0 12px 26px rgba(13, 113, 120, .2), inset 0 1px 0 rgba(255,255,255,.18);
}

.discover-actions .primary-share-button svg {
  stroke-width: 2.4;
}

@media (max-width: 720px) {
  .discover-section {
    display: flex;
    grid-template-columns: none;
    gap: 7px;
    padding-top: 4px;
  }

  .discover-copy {
    flex: 1 1 auto;
  }

  .summer-vibe-brand {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 16px;
    padding: 7px 9px;
  }

  .summer-vibe-brand h1,
  .discover-copy h1 {
    max-width: none;
    font-size: clamp(.95rem, 4.9vw, 1.35rem);
    text-overflow: clip;
    -webkit-text-stroke-width: .65px;
  }

  .discover-actions {
    gap: 6px;
  }

  .discover-actions .studio-command {
    min-height: 38px;
    padding-inline: 9px;
    font-size: .76rem;
  }

  .discover-actions .primary-share-button {
    min-width: 38px;
    min-height: 38px;
  }
}

@media (max-width: 420px) {
  .summer-vibe-brand h1,
  .discover-copy h1 {
    font-size: clamp(.82rem, 4.1vw, 1rem);
  }

  .discover-actions .studio-command {
    min-height: 34px;
    padding-inline: 7px;
    font-size: .68rem;
  }

  .discover-actions .primary-share-button {
    min-width: 34px;
    min-height: 34px;
  }
}

/* Final start-scene override: latest book-selection scroll concept. */
.coloring-page-stage.is-awaiting-page {
  align-items: center;
  justify-items: center;
  padding: 0;
  background:
    radial-gradient(circle at 46% 36%, rgba(255,255,255,.74), transparent 24%),
    radial-gradient(circle at 25% 22%, rgba(233, 177, 86, .18), transparent 30%),
    radial-gradient(circle at 76% 64%, rgba(83, 137, 119, .14), transparent 34%),
    linear-gradient(145deg, #f2e8d8 0%, #edf3ed 54%, #fbf5eb 100%);
  background-size: auto;
}

.coloring-page-stage.is-awaiting-page::before,
.coloring-page-stage.is-awaiting-page::after {
  display: none;
}

.browse-start-state {
  --trip-ink: #302923;
  --trip-muted: #746c63;
  --trip-green: #3f7468;
  --trip-gold: #d9a451;
  align-content: start;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  margin: auto;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 46px) clamp(28px, 4.5vw, 54px);
  overflow: hidden;
  border: 0;
  border-radius: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(ellipse at 50% 49%, rgba(255,255,255,.98), rgba(255,255,255,.64) 42%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.78)),
    #fffdf8;
  box-shadow:
    0 48px 120px rgba(68, 48, 28, .18),
    0 12px 28px rgba(68, 48, 28, .1),
    inset 0 0 0 1px rgba(255, 255, 255, .76);
}

.browse-start-state[hidden] {
  display: none;
}

.browse-start-state::before {
  content: "From Driftwood and Ink";
  position: relative;
  z-index: 3;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: clamp(12px, 2.8vh, 28px);
  padding-left: 46px;
  color: var(--trip-green);
  font-size: clamp(.88rem, 1.6vw, 1rem);
  font-weight: 900;
}

.browse-start-state::after {
  content: "";
  position: absolute;
  top: clamp(28px, 4vw, 48px);
  left: clamp(22px, 4vw, 46px);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e0ad65, #f1d4a3 46%, #4e7f72);
  box-shadow: 0 4px 14px rgba(63, 116, 104, .22);
}

.browse-start-copy {
  position: relative;
  inset: auto;
  z-index: 2;
  justify-items: start;
  padding: 0;
  pointer-events: none;
  text-align: left;
}

.browse-start-copy h3 {
  max-width: 10.5ch;
  color: var(--trip-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.55rem, 4.8vw, 3.55rem);
  font-weight: 900;
  line-height: .9;
  text-shadow: none;
}

.start-book-shelf {
  position: relative;
  z-index: 2;
  width: calc(100% + clamp(44px, 8vw, 92px));
  margin-inline: calc(clamp(22px, 4vw, 46px) * -1);
  perspective: 900px;
}

.start-book-carousel {
  grid-auto-columns: clamp(96px, 14vw, 122px);
  justify-content: start;
  align-items: end;
  gap: 0;
  min-height: clamp(264px, 30vw, 318px);
  padding: clamp(36px, 5vh, 56px) max(40px, calc(50% - 61px)) clamp(10px, 2vw, 18px);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.start-book-carousel::before {
  bottom: clamp(8px, 2vw, 18px);
  width: min(560px, 74%);
  height: clamp(54px, 8vw, 84px);
  background: radial-gradient(ellipse at center, rgba(68, 48, 28, .18), rgba(68, 48, 28, .08) 52%, transparent 76%);
}

.start-book-card {
  align-content: end;
  min-height: clamp(234px, 28vw, 306px);
  margin-inline: -6px;
  color: var(--trip-ink);
}

.start-book-card img {
  width: clamp(76px, 13vw, 102px);
  aspect-ratio: .74;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 22px 42px rgba(62, 40, 22, .15), inset 0 0 0 1px rgba(255,255,255,.48);
  transform: rotateY(34deg) rotateZ(-2deg) scale(.86);
}

.start-book-card[data-shelf-position="-1"] img {
  width: clamp(98px, 17vw, 132px);
  transform: rotateY(18deg) rotateZ(-1deg) scale(.94);
  opacity: .94;
}

.start-book-card[data-shelf-position="0"] {
  width: clamp(196px, 22vw, 224px);
  justify-self: center;
}

.start-book-card[data-shelf-position="0"] img {
  width: clamp(196px, 22vw, 224px);
  border-radius: 14px;
  box-shadow:
    0 36px 70px rgba(62, 40, 22, .24),
    0 18px 34px rgba(217, 164, 81, .16),
    0 0 0 5px rgba(255,255,255,.92),
    0 0 0 7px rgba(217, 164, 81, .7);
  transform: translateY(-24px) scale(1.02);
  opacity: 1;
}

.start-book-card[data-shelf-position="1"] img {
  width: clamp(98px, 17vw, 132px);
  transform: rotateY(-18deg) rotateZ(1deg) scale(.94);
  opacity: .94;
}

.start-book-card[data-shelf-position="2"] img,
.start-book-card[data-shelf-position="-2"] img {
  opacity: .82;
}

.start-book-card[data-shelf-position="2"] img {
  transform: rotateY(-34deg) rotateZ(2deg) scale(.86);
}

.start-book-card:is(:hover, :focus-visible) img {
  filter: saturate(1.05) contrast(1.02);
}

.start-book-card span {
  display: none;
}

.start-book-feature-panel {
  z-index: 3;
  display: grid;
  gap: 12px;
  width: min(100%, 560px);
  margin: clamp(2px, 1vh, 12px) auto 0;
}

@media (min-width: 721px) {
  .start-book-feature-panel {
    position: absolute;
    top: clamp(116px, 18vh, 150px);
    right: clamp(34px, 5vw, 72px);
    width: min(42%, 520px);
    margin: 0;
  }

  .start-book-dots {
    justify-content: flex-end;
    padding-right: 20px;
  }
}

.start-book-selection-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 2.4vw, 18px);
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 24px 54px rgba(62, 40, 22, .11), inset 0 1px 0 rgba(255,255,255,.85);
}

.start-book-selection-title {
  color: var(--trip-ink);
  font-size: clamp(1.22rem, 2.5vw, 1.55rem);
  font-weight: 950;
  line-height: 1.05;
}

.start-book-selection-meta {
  margin-top: 6px;
  color: var(--trip-muted);
  font-size: clamp(.88rem, 1.55vw, 1rem);
  font-weight: 750;
  line-height: 1.25;
}

.start-book-open {
  min-width: 92px;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--trip-green);
  color: white;
  box-shadow: 0 12px 24px rgba(63, 116, 104, .26);
  font-size: .95rem;
  font-weight: 950;
  cursor: pointer;
}

.start-book-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.start-book-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(48, 41, 35, .22);
}

.start-book-dot.is-active {
  width: 26px;
  background: var(--trip-gold);
}

.browse-start-state.has-book-selected {
  justify-content: center;
  width: min(100%, 940px);
  min-height: min(100%, 860px);
  padding: clamp(24px, 4vw, 42px);
}

.browse-start-state.has-book-selected::before,
.browse-start-state.has-book-selected::after {
  display: none;
}

.start-book-back {
  min-height: 42px;
  padding-inline: 18px;
  border: 0;
  background: rgba(63, 116, 104, .12);
  color: var(--trip-green);
}

.start-page-shelf {
  width: min(100%, 820px);
  padding-inline: 0;
}

.start-page-title {
  display: block;
  color: var(--trip-muted);
  font-size: .88rem;
  text-align: left;
}

.start-page-rail {
  grid-auto-columns: clamp(190px, 26vw, 250px);
  gap: clamp(14px, 2vw, 22px);
  padding: 8px 42px 34px;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.start-page-card {
  grid-template-rows: minmax(250px, 1fr) auto;
  min-height: clamp(350px, 52vh, 470px);
  border: 0;
  border-radius: 24px;
  padding: 12px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 24px 54px rgba(62, 40, 22, .12), inset 0 1px 0 rgba(255,255,255,.86);
}

.start-page-card img {
  min-height: 250px;
  border-radius: 18px;
}

.start-page-card span {
  color: var(--trip-ink);
  font-size: .92rem;
}

@media (max-width: 720px) {
  .coloring-page-stage.is-awaiting-page {
    padding: 0;
  }

  .browse-start-state {
    width: min(100%, 430px);
    min-height: min(100%, 100dvh);
    border-radius: clamp(28px, 9vw, 42px);
    padding: calc(env(safe-area-inset-top) + 28px) 24px calc(env(safe-area-inset-bottom) + 30px);
  }

  .browse-start-copy h3 {
    font-size: clamp(2.85rem, 11vw, 4.1rem);
  }

  .start-book-shelf {
    width: calc(100% + 48px);
    margin-inline: -24px;
  }

  .start-book-carousel {
    grid-auto-columns: clamp(78px, 23vw, 100px);
    min-height: clamp(274px, 76vw, 342px);
    padding: clamp(50px, 8vh, 72px) max(36px, calc(50% - 50px)) 18px;
  }

  .start-book-card {
    min-height: clamp(232px, 68vw, 316px);
  }

  .start-book-card[data-shelf-position="0"] img {
    width: clamp(150px, 46vw, 188px);
  }

  .start-book-selection-card {
    grid-template-columns: 1fr auto;
    border-radius: 22px;
  }

  .browse-start-state.has-book-selected {
    width: min(100%, 430px);
    padding: calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 22px);
  }

  .browse-start-state.is-page-scene .start-page-rail {
    grid-auto-columns: min(72vw, 250px);
    padding-inline: max(34px, 9vw);
  }

  .browse-start-state.is-page-scene .start-page-card {
    min-height: min(64vh, 448px);
  }
}

/* True final journey picker override. */
.browse-start-state.is-book-scene {
  --journey-ink: #2d2722;
  --journey-muted: #746c63;
  --journey-green: #3f7c68;
  --journey-gold: #e0ad46;
  display: grid;
  grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(24px, 5vw, 72px);
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(32px, 4.4vw, 58px) clamp(28px, 4.6vw, 72px);
  overflow: hidden;
  border: 0;
  border-radius: clamp(24px, 3vw, 36px);
  background:
    radial-gradient(circle at 72% 72%, rgba(224, 173, 70, .13), transparent 26%),
    radial-gradient(circle at 20% 16%, rgba(63, 124, 104, .1), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,253,248,.94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.74), 0 42px 92px rgba(44,36,28,.15);
}

.browse-start-state.is-book-scene::before {
  content: "From Driftwood and Ink";
  position: absolute;
  top: clamp(28px, 4vw, 54px);
  left: clamp(70px, 7.8vw, 116px);
  z-index: 4;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: var(--journey-green);
  font-size: clamp(.88rem, 1.35vw, 1.12rem);
  font-weight: 900;
}

.browse-start-state.is-book-scene::after {
  content: "";
  position: absolute;
  top: clamp(24px, 3.9vw, 48px);
  left: clamp(28px, 4.5vw, 72px);
  z-index: 4;
  width: clamp(34px, 3.4vw, 44px);
  height: clamp(34px, 3.4vw, 44px);
  border-radius: 50%;
  background: linear-gradient(135deg, #e8b765, #f0d4a0 48%, #4f8173);
  box-shadow: 0 16px 30px rgba(63,124,104,.18);
}

.browse-start-state.is-book-scene .browse-start-copy {
  position: relative;
  inset: auto;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  justify-items: start;
  margin-top: clamp(108px, 15vh, 150px);
  padding: 0;
  text-align: left;
}

.browse-start-state.is-book-scene .browse-start-copy h3 {
  max-width: 9.6ch;
  margin: 0;
  color: var(--journey-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5.45vw, 5rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: 0;
  text-shadow: none;
}

.browse-start-state.is-book-scene .start-book-feature-panel {
  position: absolute;
  left: clamp(36px, 5vw, 78px);
  top: clamp(416px, 53vh, 488px);
  right: auto;
  bottom: auto;
  z-index: 5;
  display: block;
  width: min(36vw, 460px);
  margin: 0;
  transform: none;
  pointer-events: none;
}

.browse-start-state.is-book-scene .start-book-selection-card {
  display: block;
  grid-template-columns: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.browse-start-state.is-book-scene .start-book-selection-title {
  color: var(--journey-green);
  font-size: clamp(1.26rem, 2.2vw, 1.78rem);
  font-weight: 950;
  line-height: 1.05;
}

.browse-start-state.is-book-scene .start-book-selection-meta {
  margin-top: 8px;
  color: var(--journey-muted);
  font-size: clamp(.98rem, 1.45vw, 1.18rem);
  font-weight: 850;
  line-height: 1.25;
}

.browse-start-state.is-book-scene .start-book-dots,
.browse-start-state.is-book-scene .start-book-card span {
  display: none;
}

.browse-start-state.is-book-scene .start-book-shelf {
  position: relative;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  perspective: 1200px;
}

.browse-start-state.is-book-scene .start-book-shelf::before {
  content: "";
  position: absolute;
  left: 5%;
  right: 3%;
  bottom: clamp(88px, 12vh, 130px);
  height: clamp(150px, 17vw, 230px);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(224,173,70,.25), rgba(255,255,255,.56) 48%, transparent 72%);
  pointer-events: none;
}

.browse-start-state.is-book-scene .start-book-carousel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(126px, 13vw, 184px);
  align-items: center;
  gap: clamp(10px, 1.8vw, 26px);
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: clamp(90px, 10vh, 116px) max(42px, calc(50% - clamp(63px, 6.5vw, 92px))) clamp(84px, 10vh, 116px);
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scroll-padding-inline: max(42px, calc(50% - clamp(63px, 6.5vw, 92px)));
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.browse-start-state.is-book-scene .start-book-carousel::before {
  display: none;
}

.browse-start-state.is-book-scene .start-book-card {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: clamp(320px, 46vw, 520px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  scroll-snap-align: center;
  transform-style: preserve-3d;
}

.browse-start-state.is-book-scene .start-book-card img {
  width: clamp(118px, 13vw, 174px);
  height: auto;
  max-width: none;
  aspect-ratio: .74;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 14px;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 24px 46px rgba(48,39,30,.16);
  opacity: .38;
  filter: saturate(.82);
  transform: translateY(44px) rotateY(-36deg) rotateZ(-7deg) scale(.92);
  transform-origin: 50% 84%;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 220ms ease, filter 220ms ease, box-shadow 220ms ease;
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="-1"] img {
  opacity: .58;
  transform: translate(48px, 12px) rotateY(32deg) rotateZ(-5deg) scale(.98);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="1"] img {
  opacity: .58;
  transform: translate(-48px, 12px) rotateY(-32deg) rotateZ(5deg) scale(.98);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="-2"] img {
  opacity: .26;
  transform: translate(86px, 58px) rotateY(42deg) rotateZ(-10deg) scale(.86);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="2"] img {
  opacity: .26;
  transform: translate(-86px, 58px) rotateY(-42deg) rotateZ(10deg) scale(.86);
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] {
  z-index: 8;
}

.browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] img {
  width: clamp(256px, 24vw, 340px);
  height: auto;
  max-width: none;
  border-radius: 18px;
  opacity: 1;
  filter: saturate(1.03) contrast(1.02);
  box-shadow: 0 34px 68px rgba(48,39,30,.22), 0 16px 34px rgba(224,173,70,.17), 0 0 0 7px rgba(240,213,160,.72);
  transform: translateY(-18px) rotateY(-8deg) rotateZ(1deg) scale(1.02);
}

.browse-start-state.is-book-scene .start-book-card:is(:hover, :focus-visible) img {
  filter: saturate(1.08) contrast(1.03);
}

.browse-start-state.is-book-scene .shelf-scroll-button {
  top: 54%;
  display: grid;
  width: 58px;
  height: 58px;
  min-width: 58px;
  border: 0;
  background: rgba(255,255,255,.9);
  color: #20352f;
  box-shadow: 0 18px 42px rgba(31,26,20,.13);
}

.browse-start-state.is-book-scene .shelf-scroll-button-prev {
  left: clamp(2px, 1vw, 12px);
}

.browse-start-state.is-book-scene .shelf-scroll-button-next {
  right: clamp(2px, 1vw, 12px);
}

@media (max-width: 760px) {
  .browse-start-state.is-book-scene {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    gap: 0;
    padding: calc(env(safe-area-inset-top) + 26px) 20px calc(env(safe-area-inset-bottom) + 24px);
    border-radius: clamp(24px, 7vw, 34px);
  }

  .browse-start-state.is-book-scene::before {
    top: calc(env(safe-area-inset-top) + 28px);
    left: 72px;
    font-size: .9rem;
  }

  .browse-start-state.is-book-scene::after {
    top: calc(env(safe-area-inset-top) + 24px);
    left: 24px;
    width: 38px;
    height: 38px;
  }

  .browse-start-state.is-book-scene .browse-start-copy {
    grid-row: 1;
    margin-top: 92px;
  }

  .browse-start-state.is-book-scene .browse-start-copy h3 {
    max-width: 9.8ch;
    font-size: clamp(3.05rem, 13vw, 4.25rem);
  }

  .browse-start-state.is-book-scene .start-book-feature-panel {
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    grid-row: 2;
    width: 100%;
    margin: clamp(34px, 7vh, 56px) 0 0;
    transform: none;
  }

  .browse-start-state.is-book-scene .start-book-shelf {
    grid-column: 1;
    grid-row: 3;
    min-height: clamp(300px, 58vh, 470px);
    margin-top: clamp(10px, 2vh, 18px);
  }

  .browse-start-state.is-book-scene .start-book-shelf::before {
    left: 4%;
    right: 4%;
    bottom: 34px;
    height: 132px;
  }

  .browse-start-state.is-book-scene .start-book-carousel {
    grid-auto-columns: clamp(106px, 34vw, 142px);
    padding: 28px max(32px, calc(50% - 71px)) 54px;
    scroll-padding-inline: max(32px, calc(50% - 71px));
  }

  .browse-start-state.is-book-scene .start-book-card {
    min-height: clamp(260px, 64vw, 360px);
  }

  .browse-start-state.is-book-scene .start-book-card img {
    width: clamp(92px, 27vw, 126px);
  }

  .browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] img {
    width: clamp(184px, 58vw, 238px);
  }

  .browse-start-state.is-book-scene .shelf-scroll-button {
    display: none;
  }
}

/* Absolute last journey picker desktop correction. */
@media (min-width: 761px) {
  .browse-start-state.is-book-scene .browse-start-copy h3 {
    max-width: 11.9ch;
  }

  .browse-start-state.is-book-scene .start-book-feature-panel {
    top: clamp(500px, 50vh, 540px);
    bottom: auto;
    transform: none;
  }
}

/* Site-mode preview stability: keep normal scrolling from resizing the canvas shell. */
body:not(.studio-fullscreen):not(.studio-awaiting-page) .canvas-stage.coloring-workspace,
body:not(.studio-fullscreen):not(.studio-awaiting-page) .canvas-stage .coloring-page-stage {
  contain: layout paint;
}

body:not(.studio-fullscreen):not(.studio-awaiting-page) .coloring-page-stage .site-preview-canvas {
  max-height: calc(100svh - 330px);
}

.discover-actions .studio-command,
.discover-actions .studio-icon-button {
  min-height: 44px;
}

/* Polished journey stage: final iPad/desktop book picker composition. */
@media (min-width: 761px) {
  .browse-start-state.is-book-scene {
    --journey-left: clamp(58px, 6vw, 96px);
    --journey-top: clamp(54px, 5vw, 82px);
    display: grid;
    grid-template-columns: minmax(360px, 36%) minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: stretch;
    width: 100%;
    height: 100%;
    min-height: 720px;
    padding: 0;
    overflow: hidden;
    border-radius: clamp(28px, 3vw, 42px);
    background:
      radial-gradient(ellipse at 74% 68%, rgba(224, 173, 70, .18), transparent 30%),
      radial-gradient(ellipse at 24% 24%, rgba(63, 124, 104, .10), transparent 32%),
      linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,253,248,.96));
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.82),
      0 46px 98px rgba(44,36,28,.16);
  }

  .browse-start-state.is-book-scene::before {
    top: var(--journey-top);
    left: calc(var(--journey-left) + 48px);
    font-size: clamp(.94rem, 1.15vw, 1.08rem);
  }

  .browse-start-state.is-book-scene::after {
    top: calc(var(--journey-top) - 5px);
    left: var(--journey-left);
    width: 40px;
    height: 40px;
  }

  .browse-start-state.is-book-scene .browse-start-copy {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin: clamp(180px, 22vh, 230px) 0 0 var(--journey-left);
    width: min(34vw, 460px);
  }

  .browse-start-state.is-book-scene .browse-start-copy h3 {
    max-width: 10.25ch;
    font-size: clamp(4.05rem, 5.15vw, 5.9rem);
    line-height: .88;
  }

  .browse-start-state.is-book-scene .start-book-feature-panel {
    left: var(--journey-left);
    top: clamp(580px, 62vh, 650px);
    width: min(36vw, 500px);
  }

  .browse-start-state.is-book-scene .start-book-selection-title {
    font-size: clamp(1.28rem, 1.9vw, 1.72rem);
  }

  .browse-start-state.is-book-scene .start-book-selection-meta {
    max-width: 34ch;
    font-size: clamp(.96rem, 1.26vw, 1.12rem);
  }

  .browse-start-state.is-book-scene .start-book-shelf {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-height: 100%;
    perspective: 1400px;
  }

  .browse-start-state.is-book-scene .start-book-shelf::before {
    left: 9%;
    right: 8%;
    bottom: clamp(128px, 17vh, 190px);
    height: clamp(120px, 14vw, 190px);
    background: radial-gradient(ellipse at center, rgba(224,173,70,.22), rgba(62,40,22,.08) 46%, transparent 72%);
    filter: blur(.2px);
  }

  .browse-start-state.is-book-scene .start-book-carousel {
    position: absolute;
    inset: 0;
    display: block;
    min-height: 100%;
    padding: 0;
    overflow: visible;
    mask-image: none;
    scroll-snap-type: none;
    touch-action: pan-x;
  }

  .browse-start-state.is-book-scene .start-book-card {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    width: 156px;
    min-height: 0;
    padding: 0;
    place-items: center;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: transform 340ms cubic-bezier(.2,.8,.2,1), opacity 240ms ease, filter 240ms ease;
  }

  .browse-start-state.is-book-scene .start-book-card img {
    width: 100%;
    max-width: none;
    border: 0;
    border-radius: 14px;
    opacity: 1;
    filter: saturate(.94) contrast(.98);
    transform: none;
    box-shadow: 0 22px 42px rgba(48,39,30,.18);
  }

  .browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] {
    z-index: 8;
    width: clamp(272px, 23vw, 336px);
    transform: translate(-48%, -58%) rotateY(-5deg);
  }

  .browse-start-state.is-book-scene .start-book-card[data-shelf-position="0"] img {
    width: 100%;
    border-radius: 19px;
    filter: saturate(1.04) contrast(1.02);
    box-shadow:
      0 34px 74px rgba(48,39,30,.24),
      0 18px 38px rgba(224,173,70,.16),
      0 0 0 6px rgba(255,255,255,.96),
      0 0 0 8px rgba(224,173,70,.66);
  }

  .browse-start-state.is-book-scene .start-book-card[data-shelf-position="-1"] {
    z-index: 5;
    width: clamp(128px, 11vw, 160px);
    opacity: .78;
    transform: translate(calc(-50% + 292px), calc(-50% + 116px)) rotateY(-27deg) rotateZ(3deg);
  }

  .browse-start-state.is-book-scene .start-book-card[data-shelf-position="1"] {
    z-index: 5;
    width: clamp(128px, 11vw, 160px);
    opacity: .78;
    transform: translate(calc(-50% - 292px), calc(-50% + 116px)) rotateY(27deg) rotateZ(-3deg);
  }

  .browse-start-state.is-book-scene .start-book-card[data-shelf-position="-2"] {
    z-index: 3;
    width: clamp(104px, 9vw, 132px);
    opacity: .38;
    transform: translate(calc(-50% + 340px), calc(-50% + 132px)) rotateY(-38deg) rotateZ(5deg);
  }

  .browse-start-state.is-book-scene .start-book-card[data-shelf-position="2"] {
    z-index: 3;
    width: clamp(104px, 9vw, 132px);
    opacity: .38;
    transform: translate(calc(-50% - 340px), calc(-50% + 132px)) rotateY(38deg) rotateZ(-5deg);
  }

  .browse-start-state.is-book-scene .start-book-card[data-shelf-position="2"] ~ .start-book-card,
  .browse-start-state.is-book-scene .start-book-card:nth-child(n+6) {
    opacity: 0;
    pointer-events: none;
  }

  .browse-start-state.is-book-scene .shelf-scroll-button {
    top: 50%;
    z-index: 20;
    width: 54px;
    height: 54px;
    min-width: 54px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(18px) saturate(150%);
  }

  .browse-start-state.is-book-scene .shelf-scroll-button-prev {
    left: clamp(8px, 1.2vw, 18px);
  }

  .browse-start-state.is-book-scene .shelf-scroll-button-next {
    right: clamp(10px, 1.6vw, 24px);
  }
}

/* Absolute final iPad/desktop correction for the book journey stage. */
@media (min-width: 761px) {
  .browse-start-state.is-book-scene {
    display: block;
  }

  .browse-start-state.is-book-scene::before {
    left: calc(var(--journey-left) + 52px);
  }

  .browse-start-state.is-book-scene::after {
    left: var(--journey-left);
  }

  .browse-start-state.is-book-scene .browse-start-copy {
    position: absolute;
    left: var(--journey-left);
    top: clamp(198px, 22vh, 238px);
    width: min(35vw, 470px);
    margin: 0;
  }

  .browse-start-state.is-book-scene .browse-start-copy h3 {
    width: auto;
    max-width: 10.8ch;
    font-size: clamp(3.7rem, 4.72vw, 5.25rem);
  }

  .browse-start-state.is-book-scene .start-book-feature-panel {
    left: var(--journey-left);
    top: clamp(584px, 58vh, 640px);
    width: min(34vw, 460px);
  }

  .browse-start-state.is-book-scene .start-book-shelf {
    position: absolute;
    left: clamp(430px, 37vw, 560px);
    right: clamp(84px, 7vw, 124px);
    top: 0;
    bottom: 0;
    grid-column: auto;
    grid-row: auto;
    width: auto;
    min-height: 0;
  }

  .browse-start-state.is-book-scene .start-book-card {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.72);
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(-n+5) {
    opacity: 1;
    pointer-events: auto;
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(1) {
    z-index: 9;
    width: clamp(276px, 23vw, 336px);
    transform: translate(-48%, calc(-50% + 154px)) rotateY(-5deg);
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(1) img {
    border-radius: 19px;
    filter: saturate(1.04) contrast(1.02);
    box-shadow:
      0 34px 74px rgba(48,39,30,.24),
      0 18px 38px rgba(224,173,70,.16),
      0 0 0 6px rgba(255,255,255,.96),
      0 0 0 8px rgba(224,173,70,.66);
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(2) {
    z-index: 5;
    width: clamp(128px, 11vw, 160px);
    opacity: .78;
    transform: translate(calc(-50% + 292px), calc(-50% + 116px)) rotateY(-27deg) rotateZ(3deg);
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(3) {
    z-index: 5;
    width: clamp(128px, 11vw, 160px);
    opacity: .78;
    transform: translate(calc(-50% - 292px), calc(-50% + 116px)) rotateY(27deg) rotateZ(-3deg);
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(4) {
    z-index: 3;
    width: clamp(104px, 9vw, 132px);
    opacity: .38;
    transform: translate(calc(-50% + 340px), calc(-50% + 132px)) rotateY(-38deg) rotateZ(5deg);
  }

  .browse-start-state.is-book-scene .start-book-card:nth-child(5) {
    z-index: 3;
    width: clamp(104px, 9vw, 132px);
    opacity: .38;
    transform: translate(calc(-50% - 340px), calc(-50% + 132px)) rotateY(38deg) rotateZ(-5deg);
  }
}

/* Milestone 1: selected artwork owns the stage, even outside native fullscreen. */
.browse-start-state[hidden],
.browse-start-state.is-book-scene[hidden],
.browse-start-state.is-page-scene[hidden],
.browse-start-state.has-book-selected[hidden] {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

body:not(.studio-fullscreen):not(.studio-awaiting-page) .canvas-stage.coloring-workspace {
  pointer-events: auto;
}

body:not(.studio-fullscreen):not(.studio-awaiting-page) .mac-fullscreen-button {
  display: inline-grid;
}

body:not(.studio-fullscreen):not(.studio-awaiting-page) .coloring-page-stage .site-preview-canvas {
  display: none;
}

body:not(.studio-fullscreen):not(.studio-awaiting-page) .coloring-page-stage .coloring-zoom-layer {
  display: grid;
  pointer-events: auto;
  touch-action: none;
}

body:not(.studio-fullscreen):not(.studio-awaiting-page) .coloring-page-stage.uses-screen-page-overlay .paper-screen-canvas,
body:not(.studio-fullscreen):not(.studio-awaiting-page) .coloring-page-stage.uses-screen-page-overlay .color-screen-canvas,
body:not(.studio-fullscreen):not(.studio-awaiting-page) .coloring-page-stage.uses-screen-page-overlay .line-art-screen-canvas {
  display: block;
}

body:not(.studio-fullscreen):not(.studio-awaiting-page) .coloring-page-stage.uses-screen-page-overlay #coloring-canvas {
  opacity: 0;
  pointer-events: auto;
}

body:not(.studio-fullscreen):not(.studio-awaiting-page) .coloring-page-stage.uses-screen-page-overlay #line-art-canvas {
  opacity: 0;
}

/* Milestone 2: the browser page behaves like a studio shell, not a scrolling site. */
.studio-body {
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
}

.color-studio-layout {
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(6px, 1.1vw, 12px);
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  padding: max(8px, env(safe-area-inset-top)) clamp(8px, 1.5vw, 18px) max(8px, env(safe-area-inset-bottom));
}

.discover-section {
  align-items: center;
  width: min(100%, 1460px);
  min-height: clamp(44px, 6svh, 58px);
  padding: 0;
}

.summer-vibe-brand {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.summer-vibe-brand h1 {
  font-size: clamp(1.15rem, 2.6vw, 2rem);
  line-height: 1;
}

.discover-actions .secondary-surface-button {
  min-width: clamp(38px, 5vw, 48px);
  min-height: clamp(38px, 5vw, 48px);
  color: rgba(39, 47, 49, .84);
}

.discover-actions .secondary-surface-button svg {
  width: 20px;
  height: 20px;
}

.studio-shell {
  width: min(100%, 1460px);
  height: 100%;
  min-height: 0;
  max-height: none;
}

.canvas-stage.coloring-workspace {
  min-height: 0;
}

.studio-secondary-panel {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.studio-secondary-panel[hidden] {
  display: none !important;
}

.studio-secondary-panel.gallery-section,
.studio-secondary-panel.books-section {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.secondary-panel-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100svh - 24px);
  min-height: min(520px, calc(100svh - 24px));
  overflow: hidden;
  border: 1px solid rgba(44, 38, 31, .1);
  border-radius: 22px;
  padding: 16px;
  background: rgba(250, 247, 241, .94);
  box-shadow: 0 28px 76px rgba(33, 45, 50, .24), inset 0 1px 0 rgba(255, 255, 255, .88);
  backdrop-filter: blur(24px) saturate(145%);
}

.secondary-panel-card-wide {
  width: min(1040px, calc(100vw - 24px));
}

.secondary-panel-card .drawer-header h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1;
}

.secondary-panel-card .fan-gallery {
  min-height: 0;
  overflow: auto;
  padding: 2px 2px 10px;
}

.secondary-panel-card .gallery-empty {
  border-radius: 16px;
  padding: 24px;
  box-shadow: none;
}

@media (max-width: 720px) {
  .color-studio-layout {
    gap: 6px;
    padding: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom));
  }

  .discover-section {
    min-height: 42px;
  }

  .summer-vibe-brand {
    padding: 0;
  }

  .discover-actions .secondary-surface-button,
  .discover-actions .primary-share-button {
    min-width: 36px;
    min-height: 36px;
  }

  .discover-actions .secondary-surface-button svg,
  .discover-actions .primary-share-button svg {
    width: 18px;
    height: 18px;
  }

  .studio-shell {
    border-radius: 16px;
  }

  .secondary-panel-card {
    width: calc(100vw - 16px);
    max-height: calc(100svh - 16px);
    min-height: calc(100svh - 16px);
    border-radius: 18px;
    padding: 12px;
  }
}

/* Milestone 3: page-first artwork selection. Books are filters, not a commerce step. */
.coloring-page-stage.is-awaiting-page {
  align-items: stretch;
  justify-items: stretch;
  padding: clamp(8px, 1.2vw, 14px);
  background: #eee8df;
}

/* Milestone 4: one coherent tool system. Primary tools stay persistent; settings stay contextual. */
.canvas-stage .coloring-page-stage:not(.is-awaiting-page) {
  padding-inline: clamp(58px, 8vw, 112px);
}

.canvas-stage .coloring-zoom-layer {
  max-width: min(calc(100vw - clamp(132px, 17vw, 230px)), 1040px);
  max-height: calc(100dvh - 98px);
}

body.studio-fullscreen .canvas-stage .coloring-zoom-layer {
  max-height: calc(100dvh - 76px);
}

.canvas-tool-cluster.unified-tool-rail {
  --rail-control-size: 44px;
  position: absolute;
  top: 50%;
  right: max(10px, env(safe-area-inset-right));
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-height: calc(100dvh - 32px);
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(38, 47, 49, .1);
  border-radius: 16px;
  background: rgba(255, 253, 248, .94);
  box-shadow: 0 18px 42px rgba(34, 43, 46, .14), inset 0 1px 0 rgba(255, 255, 255, .86);
  transform: translateY(-50%);
  backdrop-filter: blur(18px) saturate(118%);
  scrollbar-width: none;
}

.canvas-tool-cluster.unified-tool-rail::-webkit-scrollbar {
  display: none;
}

.unified-tool-rail .tool-rail-group {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: var(--rail-control-size);
}

.unified-tool-rail [hidden] {
  display: none !important;
}

.unified-tool-rail .tool-rail-group + .tool-rail-group {
  margin-top: 1px;
  padding-top: 6px;
  border-top: 1px solid rgba(38, 47, 49, .09);
}

.unified-tool-rail .canvas-tool-button,
.unified-tool-rail .rail-context-button,
.unified-tool-rail .color-puck-button.current-color {
  width: var(--rail-control-size);
  height: var(--rail-control-size);
  min-width: var(--rail-control-size);
  min-height: var(--rail-control-size);
  border-radius: 12px;
}

.unified-tool-rail .canvas-tool-button,
.unified-tool-rail .rail-context-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--studio-ink);
  box-shadow: none;
}

.unified-tool-rail .canvas-tool-button svg,
.unified-tool-rail .rail-context-button svg {
  width: 21px;
  height: 21px;
}

.unified-tool-rail .canvas-tool-button .default-brush-icon {
  width: 27px;
  height: 27px;
}

.unified-tool-rail .canvas-tool-button:is(:hover, :focus-visible),
.unified-tool-rail .rail-context-button:is(:hover, :focus-visible) {
  border-color: rgba(38, 47, 49, .1);
  background: rgba(38, 47, 49, .06);
  box-shadow: none;
}

.unified-tool-rail .canvas-tool-button.is-active,
.unified-tool-rail .rail-context-button[aria-expanded="true"],
.unified-tool-rail .rail-action-button.is-active {
  border-color: rgba(34, 43, 46, .1);
  background: #222b2e;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.unified-tool-rail .canvas-tool-button.is-active .default-brush-icon,
.unified-tool-rail .rail-context-button[aria-expanded="true"] .default-brush-icon {
  filter: invert(1);
}

.unified-tool-rail .canvas-tool-button:disabled {
  color: rgba(38, 47, 49, .28);
  cursor: default;
}

.unified-tool-rail .canvas-tool-button:disabled:is(:hover, :focus-visible) {
  border-color: transparent;
  background: transparent;
}

.unified-tool-rail .color-puck-button.current-color {
  display: block;
  border: 3px solid rgba(255, 255, 255, .98);
  border-radius: 999px;
  background: var(--puck-color, #FF0000);
  box-shadow: 0 0 0 1px rgba(38, 47, 49, .18), 0 8px 18px rgba(34, 43, 46, .13);
}

.unified-tool-rail .color-puck-button.current-color.is-active {
  outline: 2px solid #222b2e;
  outline-offset: 3px;
}

.unified-tool-rail .tool-mode-pill,
.unified-tool-rail .size-pill {
  display: inline-flex !important;
  justify-content: center;
  gap: 0;
  padding: 0;
  font-size: .76rem;
  font-weight: 900;
}

.unified-tool-rail .tool-mode-pill {
  min-width: var(--rail-control-size);
}

.unified-tool-rail .size-pill {
  display: none !important;
  width: 56px;
  min-width: 56px;
  padding-inline: 6px;
}

.unified-tool-rail .size-pill.is-visible {
  display: inline-flex !important;
}

.unified-tool-rail .tool-mode-icon,
.unified-tool-rail .brush-size-icon {
  width: 24px;
  height: 24px;
  border-radius: 0;
  background: transparent;
  color: currentColor;
  box-shadow: none;
}

.unified-tool-rail .brush-size-icon {
  display: none;
}

.unified-tool-rail #brush-size-label {
  min-width: 0;
  color: currentColor;
  line-height: 1;
}

.studio-shell.is-chrome-idle .unified-tool-rail {
  opacity: .96;
}

.tool-popover {
  gap: 5px;
  width: min(var(--tool-popover-width, 252px), calc(100vw - 20px));
  max-height: min(var(--tool-popover-max-height, 460px), calc(100dvh - 20px));
  padding: 6px;
  border-radius: 16px;
}

.tool-popover .tool-choice {
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 44px;
  gap: 8px;
  padding: 5px 8px 5px 5px;
  border-radius: 12px;
}

.tool-popover .tool-choice strong {
  min-width: 0;
  overflow: hidden;
  font-size: .86rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-popover .tool-choice em {
  display: none;
}

.tool-popover .tool-glyph {
  width: 34px;
  height: 34px;
}

@media (max-width: 720px) {
  .canvas-stage .coloring-page-stage:not(.is-awaiting-page) {
    padding: max(52px, env(safe-area-inset-top)) 12px max(76px, calc(env(safe-area-inset-bottom) + 74px));
  }

  .canvas-stage .coloring-zoom-layer,
  body.studio-fullscreen .canvas-stage .coloring-zoom-layer {
    width: var(--page-width, min(100%, calc((100dvh - 132px) * var(--page-aspect))));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 132px);
  }

  .canvas-tool-cluster.unified-tool-rail {
    top: auto;
    left: 50%;
    right: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: calc(100vw - 16px);
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 16px;
    transform: translateX(-50%);
    overscroll-behavior-x: contain;
  }

  .unified-tool-rail .tool-rail-group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  .unified-tool-rail .tool-rail-group + .tool-rail-group {
    margin-top: 0;
    margin-left: 1px;
    padding-top: 0;
    padding-left: 6px;
    border-top: 0;
    border-left: 1px solid rgba(38, 47, 49, .09);
  }

  .tool-popover,
  .brush-size-popover {
    bottom: max(66px, calc(env(safe-area-inset-bottom) + 66px));
  }
}

@media (max-width: 390px) {
  .canvas-tool-cluster.unified-tool-rail {
    --rail-control-size: 42px;
    gap: 5px;
    padding: 5px;
  }

  .unified-tool-rail .size-pill {
    width: 52px;
    min-width: 52px;
  }
}

.coloring-page-stage.is-space-panning {
  cursor: grab;
}

.coloring-page-stage.is-space-panning:active {
  cursor: grabbing;
}

/* Milestone 5: compact creative inspectors. */
.color-menu,
.brush-size-popover {
  --inspector-bg: rgba(255, 253, 248, .97);
  --inspector-line: rgba(38, 47, 49, .1);
  --inspector-muted: rgba(38, 47, 49, .62);
  --inspector-control: rgba(38, 47, 49, .055);
  --inspector-control-strong: #222b2e;
  border: 1px solid var(--inspector-line);
  border-radius: 16px;
  background: var(--inspector-bg);
  color: var(--studio-ink);
  box-shadow: 0 18px 44px rgba(34, 43, 46, .14), inset 0 1px 0 rgba(255, 255, 255, .84);
  backdrop-filter: blur(18px) saturate(118%);
}

.color-menu {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  width: min(var(--popover-width, 340px), calc(100vw - 20px));
  max-height: min(var(--popover-max-height, 600px), calc(100dvh - 20px));
  padding: 10px;
  overflow: hidden;
}

.color-panel-header {
  gap: 8px;
  min-height: 34px;
}

.color-panel-header h3 {
  color: var(--studio-ink);
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: 0;
}

.color-panel-swatches {
  gap: 6px;
}

.panel-color-swatch,
.panel-color-swatch-current {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border: 3px solid rgba(255, 255, 255, .98);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(38, 47, 49, .16), 0 6px 14px rgba(34, 43, 46, .12);
}

.color-panel-sampler,
.color-panel-close,
.brush-panel-close {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--studio-muted);
  box-shadow: none;
  font-size: 1.05rem;
}

.color-panel-sampler {
  border-color: rgba(82, 177, 202, .56);
  background: transparent;
  color: #55b8d0;
}

.color-panel-sampler svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.color-panel-sampler:is(:hover, :focus-visible),
.color-panel-close:is(:hover, :focus-visible),
.brush-panel-close:is(:hover, :focus-visible) {
  border-color: var(--inspector-line);
  background: var(--inspector-control);
  color: var(--studio-ink);
}

.color-panel-sampler:is(:hover, :focus-visible) {
  border-color: rgba(62, 159, 184, .72);
  background: rgba(92, 187, 210, .1);
  color: #379cb5;
}

.cyv-app .color-menu .color-panel-sampler[data-tooltip]::after {
  top: calc(100% + 6px);
  right: 0;
  bottom: auto;
  left: auto;
  max-width: min(160px, calc(100vw - 40px));
  transform: translateY(-4px);
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .cyv-app .color-menu .color-panel-sampler[data-tooltip]:is(:hover, :focus-visible)::after {
    transform: translateY(0);
  }
}

.color-tab-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 0 1px 2px;
}

.color-wheel-picker {
  --wheel-ring-radius: 70.5px;
  width: min(172px, calc(100vw - 100px));
  gap: 8px;
  margin: 0 auto;
}

.color-wheel-ring {
  border: 1px solid rgba(38, 47, 49, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), 0 10px 20px rgba(34, 43, 46, .12);
}

.color-wheel-ring::after {
  inset: 20%;
  background: var(--inspector-bg);
  box-shadow: inset 0 0 0 1px rgba(38, 47, 49, .08);
}

.color-wheel-cursor,
.shade-cursor {
  border-width: 2px;
  box-shadow: 0 0 0 1px rgba(38, 47, 49, .24), 0 5px 12px rgba(34, 43, 46, .18);
}

.color-wheel-cursor {
  width: 18px;
  height: 18px;
}

.color-wheel-ring.is-adjusting .color-wheel-cursor,
.shade-disc.is-adjusting .shade-cursor {
  box-shadow: 0 0 0 1px rgba(38, 47, 49, .36), 0 8px 16px rgba(34, 43, 46, .22);
}

.shade-disc {
  height: 30px;
  min-height: 30px;
  border: 1px solid rgba(38, 47, 49, .12);
  background: linear-gradient(to right, #fff 0%, var(--wheel-hue-color) 50%, #111 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
  overflow: visible;
}

.shade-cursor {
  width: 20px;
  height: 20px;
}

.color-panel-section {
  gap: 5px;
  margin-top: 4px;
}

.color-section-title {
  min-height: 24px;
  color: var(--inspector-muted);
  font-size: .72rem;
  font-weight: 850;
}

.color-section-title span:not(#active-palette-name) {
  display: none;
}

#active-palette-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clear-history-button {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--inspector-line);
  border-radius: 9px;
  background: transparent;
  color: var(--inspector-muted);
  font-size: .68rem;
  box-shadow: none;
}

.color-menu .recent-color-row {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
}

.color-menu .recent-color,
.color-menu .recent-color.is-empty {
  height: 20px;
  min-height: 20px;
  border: 1px solid rgba(38, 47, 49, .1);
  border-radius: 6px;
}

.color-menu .recent-color.is-empty {
  background: rgba(38, 47, 49, .045);
  box-shadow: none;
}

.palette-grid,
.palette-swatch-row {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.color-menu .palette-grid .swatch,
.color-menu .palette-swatch-row .swatch {
  height: 22px;
  min-height: 22px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(38, 47, 49, .08);
}

.color-bottom-tabs {
  gap: 4px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--inspector-line);
}

.color-bottom-tab {
  min-height: 34px;
  border-radius: 10px;
  color: var(--inspector-muted);
  font-size: .72rem;
}

.color-bottom-tab.is-active {
  background: #222b2e;
  color: #fff;
}

.value-control-grid {
  gap: 5px;
}

.value-control-row,
.value-hex-row {
  grid-template-columns: 28px minmax(0, 1fr) 34px;
  min-height: 34px;
  gap: 7px;
  color: var(--studio-ink);
  font-size: .72rem;
}

.value-hex-row {
  grid-template-columns: 42px minmax(0, 1fr);
}

.value-control-row input {
  width: 100%;
  accent-color: #222b2e;
}

.value-control-row output {
  color: var(--inspector-muted);
  text-align: right;
}

.value-hex-row input {
  min-height: 34px;
  border: 1px solid var(--inspector-line);
  border-radius: 10px;
  background: var(--inspector-control);
  color: var(--studio-ink);
  font-size: .8rem;
}

.color-menu .palette-tabs {
  gap: 5px;
  max-height: min(330px, calc(100dvh - 160px));
  padding: 0 1px 2px;
}

.color-menu .palette-tab {
  grid-template-columns: minmax(86px, .6fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--inspector-line);
  border-radius: 11px;
  padding: 7px;
  background: transparent;
  color: var(--studio-ink);
  box-shadow: none;
}

.color-menu .palette-tab.is-active {
  border-color: rgba(34, 43, 46, .28);
  background: var(--inspector-control);
  box-shadow: inset 0 0 0 1px rgba(34, 43, 46, .08);
}

.color-menu .palette-tab strong {
  min-width: 0;
  overflow: hidden;
  color: var(--studio-ink);
  font-size: .78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.color-menu .palette-preview-grid {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 1px;
  border-radius: 6px;
}

.color-menu .palette-preview-grid i {
  height: 13px;
}

.brush-size-popover {
  display: grid;
  gap: 8px;
  width: min(var(--brush-popover-width, 328px), calc(100vw - 20px));
  max-height: min(var(--brush-popover-max-height, 540px), calc(100dvh - 20px));
  padding: 10px;
  border-radius: 16px;
}

.brush-panel-header {
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

.brush-panel-header > div {
  gap: 0;
}

.brush-panel-header span {
  display: none;
}

.brush-panel-header strong {
  overflow: hidden;
  color: var(--studio-ink);
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brush-panel-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.brush-panel-tabs.is-two-tab {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brush-panel-tabs[hidden],
.brush-panel-tab[hidden] {
  display: none;
}

.brush-panel-tab {
  min-height: 34px;
  border-radius: 10px;
  background: transparent;
  color: var(--inspector-muted);
  font-size: .72rem;
}

.brush-panel-tab.is-active {
  background: #222b2e;
  color: #fff;
}

.brush-panel-view {
  gap: 7px;
}

.brush-current-button {
  min-height: 42px;
  border: 1px solid var(--inspector-line);
  border-radius: 11px;
  padding: 6px 8px;
  background: transparent;
  color: var(--studio-ink);
  box-shadow: none;
}

.brush-current-button em {
  display: none;
}

.brush-preset-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.brush-control {
  grid-template-columns: 64px minmax(0, 1fr) 40px;
  min-height: 36px;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--studio-ink);
}

.brush-size-popover .brush-control {
  color: var(--studio-ink);
}

.brush-control > span:first-child,
.brush-control > span:last-child,
.brush-control output {
  color: var(--inspector-muted);
  font-size: .72rem;
  font-weight: 850;
}

.brush-size-popover .brush-control > span:first-child,
.brush-size-popover .brush-control > span:last-child,
.brush-size-popover .brush-control output {
  color: var(--inspector-muted);
}

.brush-control input[type="range"] {
  width: 100%;
  accent-color: #222b2e;
}

.brush-control .brush-size-preview {
  width: 28px;
  height: 28px;
  min-width: 28px;
  justify-self: end;
}

.brush-toggle {
  min-height: 36px;
  border: 1px solid var(--inspector-line);
  border-radius: 11px;
  padding: 0 8px;
  background: transparent;
  color: var(--studio-ink);
}

.brush-toggle span {
  color: var(--studio-ink);
  font-size: .76rem;
  font-weight: 850;
}

.brush-preset-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.brush-preset {
  min-height: 50px;
  grid-template-columns: 30px minmax(0, 1fr);
  align-content: center;
  gap: 7px;
  border: 1px solid var(--inspector-line);
  border-radius: 11px;
  padding: 6px;
  background: transparent;
  color: var(--studio-ink);
}

.brush-preset strong {
  font-size: .76rem;
  line-height: 1.05;
}

.brush-preset span:not(.brush-preset-icon) {
  display: none;
}

.brush-preset.is-active {
  border-color: rgba(34, 43, 46, .3);
  background: var(--inspector-control);
}

.brush-preset.is-active .brush-preset-icon {
  background: #222b2e;
  color: #fff;
}

#brush-panel-advanced {
  gap: 7px;
}

@media (max-width: 430px) {
  .color-menu {
    width: min(var(--popover-width, 332px), calc(100vw - 20px));
    max-height: min(var(--popover-max-height, 620px), calc(100dvh - 20px));
    padding: 10px;
    border-radius: 16px;
  }

  .color-wheel-picker {
    width: min(164px, calc(100vw - 112px));
  }

  .brush-size-popover {
    width: min(var(--brush-popover-width, 328px), calc(100vw - 20px));
    max-height: min(var(--brush-popover-max-height, 620px), calc(100dvh - 20px));
  }
}

/* Milestone 6: sharing owns publishing; gallery stays a viewing surface. */
.publish-panel {
  position: fixed;
  inset: 0;
  z-index: 205;
}

.publish-panel[hidden] {
  display: none !important;
}

body.studio-fullscreen .studio-secondary-panel.gallery-section,
body.studio-fullscreen .studio-secondary-panel.books-section {
  display: grid;
  z-index: 1200;
}

body.studio-fullscreen .studio-secondary-panel[hidden] {
  display: none !important;
}

.share-panel.export-panel,
.publish-panel,
.studio-secondary-panel.gallery-section,
.studio-secondary-panel.books-section {
  z-index: 1200;
}

.share-card.export-card,
.publish-card {
  position: absolute;
  right: max(12px, env(safe-area-inset-right));
  top: max(12px, env(safe-area-inset-top));
  display: grid;
  gap: 14px;
  width: min(420px, calc(100% - 24px));
  padding: 16px;
  border: 1px solid rgba(44, 38, 31, .1);
  border-radius: 20px;
  background: rgba(250, 247, 241, .96);
  box-shadow: 0 28px 76px rgba(33, 45, 50, .22), inset 0 1px 0 rgba(255, 255, 255, .88);
  backdrop-filter: blur(24px) saturate(145%);
}

.share-card.export-card {
  grid-template-rows: auto auto;
  bottom: auto;
}

.publish-card {
  z-index: 1;
  grid-template-rows: auto auto auto;
}

.drawer-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 8px;
}

.export-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.export-actions .studio-command,
.gallery-post-flow .studio-command {
  justify-content: center;
  width: 100%;
}

.publish-card .gallery-post-flow {
  display: grid;
  gap: 10px;
}

.publish-card .form-note {
  min-height: 20px;
  color: var(--studio-muted);
  font-size: .82rem;
}

.gallery-card-meta {
  line-height: 1.25;
}

.fan-gallery .color-this-page[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .share-card.export-card,
  .publish-card {
    left: 8px;
    right: 8px;
    width: auto;
    border-radius: 18px;
    padding: 12px;
  }

  .drawer-actions {
    gap: 6px;
  }

}

/* Milestone 7: design system primitives for active studio UI. */
.cyv-app {
  --studio-bg: var(--cyv-color-bg);
  --studio-surface: var(--cyv-color-surface);
  --studio-panel: var(--cyv-color-surface-panel);
  --studio-panel-soft: var(--cyv-color-surface-soft);
  --studio-border: var(--cyv-color-line);
  --studio-ink: var(--cyv-color-ink);
  --studio-muted: var(--cyv-color-muted);
  --studio-accent: var(--cyv-color-accent);
  --studio-accent-strong: var(--cyv-color-accent-strong);
  --studio-shell-bg: var(--cyv-color-canvas-matte);
  --studio-matte: var(--cyv-color-canvas-matte);
  --studio-shadow: var(--cyv-shadow-panel);
  --studio-shadow-soft: var(--cyv-shadow-control-hover);
  color: var(--cyv-color-ink);
  font-family: var(--cyv-font-sans);
}

.cyv-app .color-studio-layout {
  gap: clamp(var(--cyv-space-2), 1.1vw, var(--cyv-space-5));
  padding: var(--cyv-space-fluid-page);
}

.cyv-app .summer-vibe-brand h1 {
  font-size: var(--cyv-type-hero);
  font-weight: var(--cyv-weight-title);
}

.cyv-app .studio-command,
.cyv-app .studio-icon-button,
.cyv-app .tool-button,
.cyv-app .color-this-page,
.cyv-app .clear-history-button {
  min-height: var(--cyv-control-min);
  border: 1px solid var(--cyv-color-line);
  border-radius: var(--cyv-radius-control);
  background: var(--cyv-color-surface-control);
  color: var(--cyv-color-ink);
  box-shadow: var(--cyv-shadow-control);
  font-weight: var(--cyv-weight-control);
  letter-spacing: 0;
  transition:
    background var(--cyv-motion-fast),
    border-color var(--cyv-motion-fast),
    box-shadow var(--cyv-motion-fast),
    color var(--cyv-motion-fast),
    transform var(--cyv-motion-fast);
  touch-action: manipulation;
}

.cyv-app .studio-command {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cyv-space-3);
  min-width: var(--cyv-control-min);
  padding-inline: var(--cyv-space-7);
  font-size: var(--cyv-type-control);
  line-height: 1;
}

.cyv-app .studio-command.compact,
.cyv-app .studio-icon-button.compact {
  min-width: var(--cyv-control-compact);
  min-height: var(--cyv-control-compact);
}

.cyv-app .studio-icon-button,
.cyv-app .tool-button {
  display: inline-grid;
  width: var(--cyv-control-min);
  min-width: var(--cyv-control-min);
  place-items: center;
  padding: 0;
}

.cyv-app .studio-icon-button svg,
.cyv-app .tool-button svg {
  width: 21px;
  height: 21px;
}

.cyv-app .studio-command.primary {
  border-color: transparent;
  background: var(--cyv-color-active);
  color: var(--cyv-color-active-contrast);
  box-shadow: none;
}

.cyv-app .studio-command.subtle {
  border-color: transparent;
  background: transparent;
  color: var(--cyv-color-muted);
  box-shadow: none;
}

.cyv-app .studio-command:disabled,
.cyv-app .studio-icon-button:disabled,
.cyv-app .tool-button:disabled {
  cursor: default;
  opacity: 0.42;
  transform: none;
}

.cyv-app .studio-command:not(:disabled):active,
.cyv-app .studio-icon-button:not(:disabled):active,
.cyv-app .tool-button:not(:disabled):active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .cyv-app .studio-command:not(.primary):not(:disabled):hover,
  .cyv-app .studio-icon-button:not(:disabled):hover,
  .cyv-app .tool-button:not(.is-active):not([aria-pressed="true"]):not(:disabled):hover,
  .cyv-app .color-this-page:hover,
  .cyv-app .clear-history-button:hover {
    border-color: var(--cyv-color-line-strong);
    background: var(--cyv-color-surface-control-hover);
    box-shadow: var(--cyv-shadow-control-hover);
    transform: none;
  }
}

.cyv-app :is(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--cyv-color-accent);
  outline-offset: 2px;
  box-shadow: var(--cyv-shadow-focus);
}

.cyv-app .canvas-tool-cluster.unified-tool-rail {
  --rail-control-size: var(--cyv-rail-control);
  gap: var(--cyv-space-2);
  padding: var(--cyv-space-2);
  border-color: var(--cyv-color-line);
  border-radius: var(--cyv-radius-rail);
  background: var(--cyv-color-surface-rail);
  box-shadow: var(--cyv-shadow-rail);
  backdrop-filter: var(--cyv-backdrop-rail);
}

.cyv-app .unified-tool-rail .tool-rail-group {
  gap: var(--cyv-space-1);
}

.cyv-app .unified-tool-rail .tool-rail-group + .tool-rail-group {
  border-top-color: var(--cyv-color-line);
  padding-top: var(--cyv-space-2);
}

.cyv-app .unified-tool-rail .canvas-tool-button,
.cyv-app .unified-tool-rail .rail-context-button,
.cyv-app .unified-tool-rail .color-puck-button.current-color {
  width: var(--cyv-rail-control);
  height: var(--cyv-rail-control);
  min-width: var(--cyv-rail-control);
  min-height: var(--cyv-rail-control);
  border-radius: var(--cyv-radius-control-lg);
}

.cyv-app .unified-tool-rail .canvas-tool-button,
.cyv-app .unified-tool-rail .rail-context-button {
  border-color: transparent;
  background: transparent;
  color: var(--cyv-color-ink);
  box-shadow: none;
}

.cyv-app .unified-tool-rail .canvas-tool-button.is-active,
.cyv-app .unified-tool-rail .rail-context-button[aria-expanded="true"],
.cyv-app .unified-tool-rail .rail-action-button.is-active {
  border-color: transparent;
  background: var(--cyv-color-active);
  color: var(--cyv-color-active-contrast);
}

.cyv-app .unified-tool-rail .canvas-tool-button .brush-options-icon {
  width: 29px;
  height: 29px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.cyv-app .brush-options-icon .brush-options-fill,
.cyv-app .brush-options-icon .brush-options-dots circle {
  fill: currentColor;
  stroke: none;
}

.cyv-app .unified-tool-rail .color-tool-group {
  gap: var(--cyv-space-1);
}

.cyv-app .unified-tool-rail .asmr-toggle-button {
  display: grid;
  place-items: center;
  width: var(--cyv-rail-control);
  min-width: var(--cyv-rail-control);
  height: 24px;
  min-height: 24px;
  border: 1px solid transparent;
  border-radius: var(--cyv-radius-sm);
  padding: 0 5px;
  background: rgba(34, 48, 51, .06);
  color: var(--cyv-color-ink-soft);
  box-shadow: none;
  font: inherit;
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--cyv-motion-fast), color var(--cyv-motion-fast), opacity var(--cyv-motion-fast);
}

.cyv-app .unified-tool-rail .asmr-toggle-button:is(:hover, :focus-visible) {
  background: var(--cyv-color-surface-control-hover);
}

.cyv-app .unified-tool-rail .asmr-toggle-button:focus-visible {
  outline: none;
  box-shadow: var(--cyv-shadow-focus);
}

.cyv-app .unified-tool-rail .asmr-toggle-button.is-active {
  background: var(--cyv-color-active);
  color: var(--cyv-color-active-contrast);
}

.cyv-app .unified-tool-rail .asmr-toggle-button[hidden] {
  display: none;
}

.cyv-app .drawer-panel,
.cyv-app .secondary-panel-card,
.cyv-app .share-card.export-card,
.cyv-app .publish-card,
.cyv-app .saved-work-card {
  border: 1px solid var(--cyv-color-line);
  border-radius: var(--cyv-radius-panel);
  background: var(--cyv-color-surface-panel);
  box-shadow: var(--cyv-shadow-panel);
  backdrop-filter: var(--cyv-backdrop-panel);
}

.cyv-app .drawer-panel {
  border-radius: var(--cyv-radius-drawer);
  padding: var(--cyv-space-8);
}

.cyv-app .share-card.export-card,
.cyv-app .publish-card {
  width: min(420px, calc(100% - 24px));
  gap: var(--cyv-space-6);
  padding: var(--cyv-space-7);
  border-radius: var(--cyv-radius-panel);
}

.cyv-app .drawer-header {
  gap: var(--cyv-space-5);
}

.cyv-app .drawer-header h2,
.cyv-app .secondary-panel-card .drawer-header h2,
.cyv-app .share-card h2 {
  color: var(--cyv-color-ink);
  font-size: var(--cyv-type-title);
  font-weight: var(--cyv-weight-title);
  letter-spacing: 0;
}

.cyv-app .studio-popover,
.cyv-app .palette-drawer {
  border: 1px solid var(--cyv-color-line);
  border-radius: var(--cyv-radius-popover);
  background: var(--cyv-color-surface-panel);
  box-shadow: var(--cyv-shadow-panel);
  backdrop-filter: var(--cyv-backdrop-panel);
}

.cyv-app .brush-size-popover,
.cyv-app .color-menu {
  gap: var(--cyv-space-3);
  padding: var(--cyv-space-4);
  border-radius: var(--cyv-radius-popover);
}

.cyv-app .drawer-scrim,
.cyv-app .saved-work-scrim {
  background: var(--cyv-color-overlay);
}

.cyv-app .color-bottom-tabs,
.cyv-app .brush-panel-tabs {
  gap: var(--cyv-space-1);
  border-color: var(--cyv-color-line);
}

.cyv-app .color-bottom-tab,
.cyv-app .brush-panel-tab,
.cyv-app .menu-row {
  min-height: 34px;
  border-radius: var(--cyv-radius-control);
  color: var(--cyv-color-muted);
  font-size: var(--cyv-type-caption);
  font-weight: var(--cyv-weight-control);
  letter-spacing: 0;
  transition:
    background var(--cyv-motion-fast),
    color var(--cyv-motion-fast),
    border-color var(--cyv-motion-fast);
}

.cyv-app .menu-row {
  min-height: 40px;
  color: var(--cyv-color-ink);
}

.cyv-app .menu-row.danger {
  color: var(--cyv-color-danger);
}

.cyv-app .color-bottom-tab.is-active,
.cyv-app .brush-panel-tab.is-active,
.cyv-app .palette-tab.is-active {
  background: var(--cyv-color-active);
  color: var(--cyv-color-active-contrast);
}

.cyv-app .gallery-post-flow input,
.cyv-app .value-hex-row input {
  border: 1px solid var(--cyv-color-line);
  border-radius: var(--cyv-radius-control-lg);
  background: var(--cyv-color-surface-control);
  color: var(--cyv-color-ink);
  box-shadow: none;
}

.cyv-app .gallery-post-flow label,
.cyv-app .brush-control,
.cyv-app .value-control-row,
.cyv-app .value-hex-row {
  color: var(--cyv-color-muted);
  font-size: var(--cyv-type-control);
  font-weight: var(--cyv-weight-control);
}

.cyv-app input[type="range"] {
  accent-color: var(--cyv-color-active);
}

.cyv-app .brush-control input[type="range"]::-webkit-slider-runnable-track,
.cyv-app .value-control-row input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(34, 43, 46, 0.12);
  border-radius: var(--cyv-radius-pill);
}

.cyv-app .brush-control input[type="range"]::-webkit-slider-thumb,
.cyv-app .value-control-row input[type="range"]::-webkit-slider-thumb {
  border: 2px solid var(--cyv-color-surface);
  background: var(--cyv-color-active);
  box-shadow: 0 2px 8px rgba(34, 43, 46, 0.18);
}

.cyv-app .brush-control input[type="range"]::-moz-range-track,
.cyv-app .value-control-row input[type="range"]::-moz-range-track {
  background: rgba(34, 43, 46, 0.12);
  border-radius: var(--cyv-radius-pill);
}

.cyv-app .brush-control input[type="range"]::-moz-range-thumb,
.cyv-app .value-control-row input[type="range"]::-moz-range-thumb {
  border: 2px solid var(--cyv-color-surface);
  background: var(--cyv-color-active);
  box-shadow: 0 2px 8px rgba(34, 43, 46, 0.18);
}

.cyv-app .start-page-card,
.cyv-app .page-choice,
.cyv-app .fan-gallery figure,
.cyv-app .gallery-card,
.cyv-app .brush-preset,
.cyv-app .brush-current-button,
.cyv-app .brush-toggle {
  border: 1px solid var(--cyv-color-line);
  border-radius: var(--cyv-radius-card);
  background: var(--cyv-color-surface-control);
  box-shadow: var(--cyv-shadow-card);
  color: var(--cyv-color-ink);
}

.cyv-app .brush-preset.is-active {
  border-color: var(--cyv-color-line-strong);
  background: rgba(34, 43, 46, 0.08);
}

.cyv-app .brush-preset .brush-preset-icon {
  background: rgba(34, 43, 46, 0.075);
  color: rgba(34, 48, 51, 0.68);
}

.cyv-app .brush-preset .brush-preset-icon svg {
  stroke-width: 2.1;
}

.cyv-app .brush-preset:is(:hover, :focus-visible) .brush-preset-icon {
  background: rgba(34, 43, 46, 0.11);
  color: var(--cyv-color-ink);
}

.cyv-app .brush-preset.is-active .brush-preset-icon {
  background: var(--cyv-color-active);
  color: var(--cyv-color-active-contrast);
}

.cyv-app .gallery-empty,
.cyv-app .gallery-card-meta,
.cyv-app .publish-card .form-note {
  color: var(--cyv-color-muted);
}

@media (max-width: 720px) {
  .cyv-app {
    --cyv-control-min: 42px;
    --cyv-control-compact: 36px;
    --cyv-rail-control: 42px;
    --cyv-space-fluid-page: max(6px, env(safe-area-inset-top)) 6px max(6px, env(safe-area-inset-bottom));
  }

  .cyv-app .drawer-panel {
    left: var(--cyv-space-3);
    right: var(--cyv-space-3);
    width: auto;
    padding: var(--cyv-space-5);
    border-radius: var(--cyv-radius-panel);
  }

  .cyv-app .share-card.export-card,
  .cyv-app .publish-card {
    left: var(--cyv-space-3);
    right: var(--cyv-space-3);
    width: auto;
    padding: var(--cyv-space-5);
    border-radius: var(--cyv-radius-popover);
  }

  .cyv-app .canvas-tool-cluster.unified-tool-rail {
    max-width: calc(100vw - 16px);
  }
}

@media (max-width: 430px) {
  .cyv-app {
    --cyv-type-title: 1.25rem;
    --cyv-control-min: 42px;
    --cyv-rail-control: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cyv-app *,
  .cyv-app *::before,
  .cyv-app *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Milestone 8: responsive and accessibility hardening. */
.cyv-app .share-panel,
.cyv-app .publish-panel,
.cyv-app .saved-work-dialog,
.cyv-app .studio-secondary-panel {
  overscroll-behavior: contain;
}

.cyv-app .drawer-panel,
.cyv-app .secondary-panel-card,
.cyv-app .share-card.export-card,
.cyv-app .publish-card,
.cyv-app .saved-work-card {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
}

.cyv-app .drawer-panel,
.cyv-app .secondary-panel-card {
  min-height: 0;
}

.cyv-app .fan-gallery,
.cyv-app .secondary-panel-card .fan-gallery {
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.cyv-app .coloring-canvas,
.cyv-app #coloring-canvas {
  outline: none;
}

.cyv-app .coloring-zoom-layer:focus-within {
  outline: 2px solid var(--cyv-color-accent);
  outline-offset: 4px;
}

.cyv-app .studio-command,
.cyv-app .studio-icon-button,
.cyv-app .tool-button,
.cyv-app .color-puck-button,
  .cyv-app .menu-row,
.cyv-app .color-bottom-tab,
.cyv-app .brush-panel-tab {
  -webkit-tap-highlight-color: transparent;
}

@media (orientation: landscape) and (max-height: 520px) {
  .cyv-app {
    --cyv-control-min: 40px;
    --cyv-control-compact: 36px;
    --cyv-rail-control: 40px;
  }

  .cyv-app .color-studio-layout {
    gap: var(--cyv-space-1);
    padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }

  .cyv-app .discover-section {
    min-height: 36px;
  }

  .cyv-app .summer-vibe-brand h1 {
    font-size: 1rem;
  }

  .cyv-app .discover-actions {
    gap: var(--cyv-space-1);
  }

  .cyv-app .canvas-stage .coloring-page-stage:not(.is-awaiting-page) {
    padding: max(42px, env(safe-area-inset-top)) max(58px, calc(env(safe-area-inset-right) + 54px)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }

  .cyv-app .canvas-stage .coloring-zoom-layer,
  body.studio-fullscreen.cyv-app .canvas-stage .coloring-zoom-layer {
    max-width: calc(100vw - 122px);
    max-height: calc(100dvh - 54px);
  }

  .cyv-app .canvas-tool-cluster.unified-tool-rail {
    top: 50%;
    right: max(6px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    flex-direction: column;
    max-width: none;
    max-height: calc(100dvh - 12px);
    transform: translateY(-50%);
  }

  .cyv-app .unified-tool-rail .tool-rail-group {
    display: grid;
  }

  .cyv-app .unified-tool-rail .tool-rail-group + .tool-rail-group {
    margin-top: 0;
    padding-top: var(--cyv-space-2);
    border-top: 1px solid var(--cyv-color-line);
    border-left: 0;
    padding-left: 0;
  }

  .cyv-app .studio-session-bar {
    top: max(6px, env(safe-area-inset-top));
    left: max(52px, env(safe-area-inset-left));
    max-width: min(46vw, 340px);
    min-height: 36px;
  }

  .cyv-app .session-status-strip {
    display: none;
  }

  .cyv-app .brush-size-popover,
  .cyv-app .color-menu,
  .cyv-app .more-menu {
    overflow: auto;
  }

  .cyv-app .brush-size-popover {
    max-height: min(var(--brush-popover-max-height, calc(100dvh - 16px)), calc(100dvh - 16px));
  }

  .cyv-app .color-menu {
    max-height: min(var(--popover-max-height, calc(100dvh - 16px)), calc(100dvh - 16px));
  }

  .cyv-app .more-menu {
    max-height: min(var(--more-menu-max-height, calc(100dvh - 16px)), calc(100dvh - 16px));
  }

  .cyv-app .drawer-panel,
  .cyv-app .secondary-panel-card {
    max-height: calc(100dvh - 16px);
    padding: var(--cyv-space-4);
  }

  .cyv-app .share-card.export-card,
  .cyv-app .publish-card {
    max-height: calc(100dvh - 16px);
    overflow: auto;
  }
}

@media (forced-colors: active) {
  .cyv-app .studio-command,
  .cyv-app .studio-icon-button,
  .cyv-app .tool-button,
  .cyv-app .color-puck-button,
  .cyv-app .drawer-panel,
  .cyv-app .secondary-panel-card,
  .cyv-app .share-card.export-card,
  .cyv-app .publish-card,
  .cyv-app .start-page-card,
  .cyv-app .page-choice {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    box-shadow: none;
  }

  .cyv-app .studio-command.primary,
  .cyv-app .unified-tool-rail .canvas-tool-button.is-active {
    background: Highlight;
    color: HighlightText;
  }
}

/* Milestone 9: quieter final copy surfaces. */
.cyv-app .saved-work-kicker,
.cyv-app .palette-header span,
.cyv-app .brush-preset span:not(.brush-preset-icon),
.cyv-app .brush-current-button em {
  display: none;
}

/* Publish polish: visible selected states, grounded tooltips, and non-overlapping picker cards. */
.cyv-app .color-menu .palette-tab.is-active {
  border-color: var(--cyv-color-active);
  background: var(--cyv-color-active);
  color: var(--cyv-color-active-contrast);
}

.cyv-app .color-menu .palette-tab.is-active strong {
  color: var(--cyv-color-active-contrast);
}

.cyv-app .color-menu .palette-tab.is-active .palette-preview-grid {
  filter: saturate(1.05);
}

.cyv-app .discover-actions [data-tooltip]::after {
  top: calc(100% + 9px);
  bottom: auto;
  z-index: 999;
  transform: translate(-50%, -4px);
}

@media (hover: hover) and (pointer: fine) {
  .cyv-app .discover-actions [data-tooltip]:is(:hover, :focus-visible)::after {
    transform: translate(-50%, 0);
  }
}

.cyv-app .page-choice {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  overflow: hidden;
}

.cyv-app .page-choice .page-thumb {
  display: grid;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
}

.cyv-app .page-choice .page-card-copy {
  position: relative;
  z-index: 1;
  align-self: end;
  min-height: 30px;
  padding-top: 1px;
  background: transparent;
}

/* Gallery polish: artwork cards keep their natural height instead of collapsing into strips. */
.cyv-app .gallery-section .secondary-panel-card {
  width: min(1500px, calc(100vw - 24px));
}

.cyv-app .secondary-panel-card .fan-gallery {
  align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: max-content;
}

.cyv-app .fan-gallery .gallery-card {
  display: grid;
  grid-template-rows: auto auto;
  overflow: hidden;
}

.cyv-app .fan-gallery .gallery-card img {
  display: block;
  width: 100%;
  height: auto;
  min-height: clamp(220px, 22vw, 380px);
  aspect-ratio: 0.78 / 1;
  object-fit: contain;
  background: #fff;
}

.cyv-app .fan-gallery .gallery-card figcaption {
  min-height: 0;
}

@media (max-width: 720px) {
  .cyv-app .secondary-panel-card .fan-gallery {
    grid-template-columns: 1fr;
  }

  .cyv-app .fan-gallery .gallery-card img {
    min-height: clamp(220px, 72vw, 360px);
  }
}

/* Unified artwork start: books first, then pages. */
.cyv-app .browse-start-state.is-book-scene .start-page-shelf {
  display: none;
}

.cyv-app .browse-start-state.is-page-scene {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
  justify-items: stretch;
  gap: clamp(10px, 1.6vw, 16px);
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(18px, 2.8vw, 30px);
  overflow: hidden;
  border: 0;
  border-radius: clamp(22px, 3vw, 34px);
  background:
    radial-gradient(circle at 82% 18%, rgba(224, 173, 70, .12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(252, 250, 246, .94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.76), 0 36px 86px rgba(44, 36, 28, .13);
}

.cyv-app .browse-start-state.is-page-scene::before,
.cyv-app .browse-start-state.is-page-scene::after,
.cyv-app .browse-start-state.is-page-scene .browse-start-copy,
.cyv-app .browse-start-state.is-page-scene .start-book-shelf {
  display: none;
}

.cyv-app .start-book-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: start;
  width: max-content;
  min-height: 40px;
  border: 1px solid rgba(35, 50, 54, .1);
  border-radius: 999px;
  padding: 0 14px 0 11px;
  background: rgba(255, 255, 255, .72);
  color: #233236;
  box-shadow: 0 10px 22px rgba(31, 26, 20, .08);
  font-weight: 900;
  cursor: pointer;
}

.cyv-app .start-book-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cyv-app .browse-start-state.is-page-scene .start-page-shelf {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 14px);
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.cyv-app .browse-start-state.is-page-scene .start-page-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin: 0;
  color: var(--cyv-color-ink);
}

.cyv-app .browse-start-state.is-page-scene .start-page-title strong {
  overflow: hidden;
  font-size: clamp(1.08rem, 2vw, 1.48rem);
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cyv-app .browse-start-state.is-page-scene .start-page-title span {
  flex: 0 0 auto;
  color: var(--cyv-color-muted);
  font-size: .8rem;
  font-weight: 850;
}

.cyv-app .start-page-rail-wrap {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.cyv-app .start-page-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(176px, 21vw, 250px);
  align-items: stretch;
  gap: clamp(12px, 1.8vw, 18px);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 4px clamp(34px, 4vw, 48px) 12px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: clamp(34px, 4vw, 48px);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.cyv-app .start-page-rail::-webkit-scrollbar {
  display: none;
}

.cyv-app .browse-start-state.is-page-scene .start-page-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  min-height: clamp(280px, 48vh, 430px);
  overflow: hidden;
  scroll-snap-align: start;
}

.cyv-app .start-page-card .page-thumb {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

.cyv-app .start-page-card .page-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 0;
}

.cyv-app .start-page-card .page-card-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cyv-app .start-page-card .page-card-copy strong,
.cyv-app .start-page-card .page-card-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cyv-app .start-page-card .page-card-copy strong {
  color: var(--cyv-color-ink);
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.1;
}

.cyv-app .start-page-card .page-card-copy small {
  color: var(--cyv-color-muted);
  font-size: .68rem;
  font-weight: 800;
}

@media (max-width: 720px) {
  .cyv-app .browse-start-state.is-page-scene {
    padding: calc(env(safe-area-inset-top) + 14px) 12px calc(env(safe-area-inset-bottom) + 16px);
    border-radius: clamp(18px, 6vw, 28px);
  }

  .cyv-app .start-page-rail {
    grid-auto-columns: min(72vw, 246px);
    padding-inline: max(28px, 8vw);
    scroll-padding-inline: max(28px, 8vw);
  }

  .cyv-app .browse-start-state.is-page-scene .start-page-card {
    min-height: min(62vh, 430px);
  }
}

/* Collection-grid start: calm picker with WIP work layered above collections. */
.cyv-app .coloring-page-stage.is-awaiting-page {
  align-items: stretch;
  justify-items: stretch;
  padding: 0;
  background: #f5f2eb;
}

.cyv-app .browse-start-state.is-book-scene,
.cyv-app .browse-start-state.is-page-scene {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #f5f2eb;
  box-shadow: none;
}

.cyv-app .browse-start-state.is-book-scene {
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0;
  padding: clamp(16px, 2.2vw, 28px);
  overflow: hidden;
  align-items: stretch !important;
  justify-items: stretch !important;
  justify-content: stretch !important;
}

.cyv-app .browse-start-state.is-book-scene::before,
.cyv-app .browse-start-state.is-book-scene::after,
.cyv-app .browse-start-state.is-page-scene::before,
.cyv-app .browse-start-state.is-page-scene::after,
.cyv-app .start-book-carousel::before,
.cyv-app .start-book-shelf::before,
.cyv-app .start-book-feature-panel,
.cyv-app .shelf-scroll-button {
  display: none !important;
  content: none !important;
}

.cyv-app .browse-start-copy {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 0;
  pointer-events: auto;
  text-align: left;
}

.cyv-app .browse-start-state.is-book-scene .browse-start-copy {
  position: absolute !important;
  inset: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) auto auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: auto !important;
  justify-self: auto !important;
  z-index: 8 !important;
  width: auto !important;
  max-width: none !important;
  pointer-events: none;
}

.cyv-app .browse-start-copy h3 {
  margin: 0;
  color: #243235;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.25rem, 4vw, 4.1rem);
  font-weight: 950;
  line-height: .92;
  letter-spacing: 0;
  text-shadow: none;
}

.cyv-app .browse-start-state.is-book-scene .browse-start-copy h3 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cyv-app .start-book-shelf {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
  width: 100%;
  min-height: 0;
  margin: 0;
  perspective: none;
  overflow: hidden;
}

.cyv-app .browse-start-state.is-book-scene .start-book-shelf {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  place-self: stretch !important;
  width: 100% !important;
  height: 100% !important;
}

.cyv-app .start-recent-work-layer {
  display: grid;
  flex: 0 0 auto;
  gap: 10px;
  min-width: 0;
}

.cyv-app .start-recent-work-layer h4 {
  margin: 0;
  color: rgba(36, 50, 53, .72);
  font-size: .84rem;
  font-weight: 900;
}

.cyv-app .start-recent-work-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 240px);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.cyv-app .start-recent-work-rail::-webkit-scrollbar {
  display: none;
}

.cyv-app .recent-work-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 76px;
  overflow: hidden;
  border: 1px solid rgba(36, 50, 53, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
  color: #243235;
  text-align: left;
  box-shadow: 0 1px 2px rgba(36, 50, 53, .06);
}

.cyv-app .recent-work-open {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 76px;
  border: 0;
  padding: 8px 52px 8px 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cyv-app .recent-work-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(36, 50, 53, .12);
  border-radius: 10px;
  padding: 0;
  background: rgba(255, 255, 255, .84);
  color: rgba(36, 50, 53, .68);
  cursor: pointer;
}

.cyv-app .recent-work-remove svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.cyv-app .recent-work-thumb {
  display: grid;
  place-items: center;
  width: 54px;
  aspect-ratio: .78;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

.cyv-app .recent-work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cyv-app .recent-work-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cyv-app .recent-work-copy strong,
.cyv-app .recent-work-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cyv-app .recent-work-copy strong {
  font-size: .9rem;
  font-weight: 950;
  line-height: 1.05;
}

.cyv-app .recent-work-copy small {
  color: rgba(36, 50, 53, .62);
  font-size: .74rem;
  font-weight: 850;
}

.cyv-app .start-book-carousel.start-collection-grid {
  position: static;
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(360px, 1fr));
  align-content: start;
  align-items: stretch;
  gap: clamp(14px, 1.6vw, 22px);
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0 2px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  mask-image: none;
  scroll-snap-type: none;
  scrollbar-gutter: stable;
  transform: none;
  -webkit-overflow-scrolling: touch;
}

.cyv-app .start-book-card.start-collection-card,
.cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card {
  position: relative;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: auto;
  min-width: 0;
  min-height: clamp(154px, 19vh, 178px);
  margin: 0;
  border: 1px solid rgba(36, 50, 53, .1);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, .82);
  color: #243235;
  box-shadow: 0 1px 2px rgba(36, 50, 53, .06);
  text-align: left;
  cursor: pointer;
  opacity: 1;
  transform: none;
}

.cyv-app .start-book-card.start-collection-card.is-all-collection {
  grid-template-columns: minmax(0, 1fr);
  background: rgba(36, 50, 53, .055);
  border-color: rgba(36, 50, 53, .18);
}

.cyv-app .start-book-card.start-collection-card .start-collection-visual {
  display: grid;
  place-items: center;
  width: 108px;
  aspect-ratio: .74;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

.cyv-app .start-book-card.start-collection-card.is-all-collection .start-collection-visual {
  display: none;
}

.cyv-app .start-book-card.start-collection-card img,
.cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  box-shadow: none;
  transform: none;
}

.cyv-app .start-collection-body {
  display: grid;
  grid-template-rows: auto auto minmax(44px, auto);
  align-content: center;
  gap: 7px;
  min-width: 0;
}

.cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card .start-collection-body {
  display: grid !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #243235 !important;
  overflow: visible !important;
}

.cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card .start-collection-visual {
  display: grid !important;
  padding: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  color: inherit !important;
}

.cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card.is-all-collection .start-collection-visual {
  display: none !important;
}

.cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card .start-collection-actions {
  display: flex !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  padding: 8px 0 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  overflow: visible !important;
}

.cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card.is-all-collection .start-collection-actions {
  display: none !important;
}

.cyv-app .start-collection-body strong {
  overflow: hidden;
  color: #243235;
  font-size: clamp(1.18rem, 1.55vw, 1.75rem);
  font-weight: 950;
  line-height: 1.02;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cyv-app .start-collection-body small {
  color: rgba(36, 50, 53, .64);
  font-size: clamp(.95rem, 1.45vw, 1.32rem);
  font-weight: 900;
}

.cyv-app .start-collection-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}

.cyv-app .start-collection-card.is-all-collection .start-collection-actions {
  display: none;
}

.cyv-app .start-collection-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 46px;
  border: 1px solid rgba(36, 50, 53, .1);
  border-radius: 999px;
  padding: 0 18px;
  background: rgba(255, 255, 255, .86);
  color: #243235;
  font: inherit;
  font-size: .92rem;
  font-weight: 950;
  box-shadow: 0 1px 2px rgba(36, 50, 53, .05);
  cursor: pointer;
  text-decoration: none;
}

.cyv-app .start-collection-action.is-muted {
  color: rgba(36, 50, 53, .52);
}

.cyv-app .start-book-card.start-collection-card:is(:hover, :focus-visible),
.cyv-app .recent-work-card:is(:hover, :focus-visible),
.cyv-app .recent-work-card:focus-within,
.cyv-app .start-collection-action:is(:hover, :focus-visible),
.cyv-app .start-book-back:is(:hover, :focus-visible) {
  border-color: rgba(36, 50, 53, .22);
  background: #fff;
}

.cyv-app .browse-start-state.is-page-scene {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: clamp(16px, 2.2vw, 28px);
  overflow: hidden;
}

.cyv-app .browse-start-state.is-page-scene .browse-start-copy,
.cyv-app .browse-start-state.is-page-scene .start-book-shelf {
  display: none;
}

.cyv-app .browse-start-state.is-page-scene .start-page-shelf {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.cyv-app .start-page-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.cyv-app .start-book-back {
  min-height: 46px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(36, 50, 53, .05);
}

.cyv-app .browse-start-state.is-page-scene .start-page-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cyv-app .browse-start-state.is-page-scene .start-page-title strong {
  font-size: clamp(1.55rem, 3vw, 3.5rem);
}

.cyv-app .start-page-rail-wrap {
  min-height: 0;
  overflow: hidden;
}

.cyv-app .start-page-rail {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  grid-auto-rows: minmax(240px, max-content) !important;
  gap: clamp(12px, 1.5vw, 18px);
  align-content: start;
  align-items: start;
  width: 100%;
  height: 100%;
  padding: 0 2px 10px;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-snap-type: none;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.cyv-app .browse-start-state.is-page-scene .start-page-card {
  align-self: start;
  height: auto !important;
  min-height: 240px !important;
  grid-template-rows: auto auto !important;
  border-radius: 16px;
  padding: 9px;
  background: rgba(255, 255, 255, .84);
}

.cyv-app .start-page-card .page-thumb {
  aspect-ratio: .78;
  width: 100%;
  height: auto !important;
}

@media (max-width: 1280px) {
  .cyv-app .start-book-carousel.start-collection-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 620px) {
  .cyv-app .browse-start-state.is-book-scene,
  .cyv-app .browse-start-state.is-page-scene {
    padding: max(12px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
  }

  .cyv-app .browse-start-state.is-book-scene .browse-start-copy {
    inset: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) auto auto !important;
  }

  .cyv-app .start-book-shelf {
    gap: 12px;
  }

  .cyv-app .start-recent-work-rail {
    grid-auto-columns: minmax(172px, 76vw);
  }

  .cyv-app .start-book-carousel.start-collection-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .cyv-app .start-book-card.start-collection-card,
  .cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card {
    grid-template-columns: 74px minmax(0, 1fr);
    min-height: 118px;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .cyv-app .start-book-card.start-collection-card .start-collection-visual {
    width: 74px;
  }

  .cyv-app .start-collection-body strong {
    font-size: clamp(1.08rem, 5vw, 1.46rem);
  }

  .cyv-app .start-collection-actions {
    gap: 8px;
    padding-top: 6px;
  }

  .cyv-app .start-collection-action {
    min-width: 76px;
    min-height: 42px;
    padding-inline: 14px;
  }

  .cyv-app .start-page-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cyv-app .start-page-header .start-book-back {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .cyv-app .browse-start-state.is-page-scene .start-page-title strong {
    font-size: clamp(1.35rem, 7vw, 2.2rem);
  }

  .cyv-app .start-page-rail {
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    gap: 10px;
  }
}

.cyv-app .browse-start-state.is-book-scene .start-book-carousel.start-collection-grid {
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 10px !important;
}

.cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card,
.cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card:not([data-shelf-position="0"]) {
  order: initial !important;
  justify-self: stretch !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  min-height: clamp(154px, 19vh, 178px) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card img,
.cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card:not([data-shelf-position="0"]) img {
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 620px) {
  .cyv-app .browse-start-state.is-book-scene .browse-start-copy h3 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }

  .cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card,
  .cyv-app .browse-start-state.is-book-scene .start-book-card.start-collection-card:not([data-shelf-position="0"]) {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    min-height: 118px !important;
    gap: 12px !important;
  }
}

body.studio-awaiting-page {
  touch-action: auto;
}

body.studio-awaiting-page .canvas-stage .coloring-page-stage,
body.studio-awaiting-page #browse-start-state {
  overscroll-behavior: contain;
  touch-action: pan-y !important;
}

/* Logo-only studio identity. */
.cyv-app .summer-vibe-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: clamp(40px, 5vw, 56px);
  max-width: clamp(40px, 5vw, 56px);
  min-height: clamp(40px, 5vw, 56px);
  padding: 0;
}

.cyv-app .summer-vibe-brand .app-logo-mark {
  width: clamp(38px, 4.8vw, 54px);
  height: clamp(38px, 4.8vw, 54px);
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(34, 43, 46, .13));
}

@media (max-width: 720px) {
  .cyv-app .summer-vibe-brand {
    min-width: 38px;
    max-width: 38px;
    min-height: 38px;
  }

  .cyv-app .summer-vibe-brand .app-logo-mark {
    width: 36px;
    height: 36px;
  }
}

/* Fresh site shell and canvas surface. Controls keep their existing pill styling. */
body.studio-body.cyv-app {
  --cyv-color-ink: #1d2d34;
  --cyv-color-muted: #607378;
  --cyv-color-bg: #f3fbfb;
  --cyv-color-canvas-matte: #e8f4f3;
  --cyv-color-surface: #fbfefd;
  --cyv-color-surface-soft: rgba(251, 254, 253, .78);
  --cyv-color-surface-panel: rgba(250, 253, 252, .95);
  --cyv-color-surface-rail: rgba(255, 255, 255, .46);
  --cyv-color-line: rgba(29, 63, 72, .12);
  --cyv-color-line-strong: rgba(29, 63, 72, .2);
  --cyv-color-accent: #0f8996;
  --cyv-color-accent-strong: #0c515b;
  background:
    radial-gradient(900px 560px at 10% -6%, rgba(67, 185, 205, .26), transparent 58%),
    radial-gradient(720px 500px at 88% 2%, rgba(255, 126, 98, .16), transparent 58%),
    radial-gradient(760px 520px at 74% 96%, rgba(255, 205, 104, .12), transparent 58%),
    linear-gradient(135deg, #f8fcff 0%, #edf9f7 52%, #fff8f1 100%);
}

@media (max-width: 720px) {
  .cyv-app .unified-tool-rail .color-tool-group {
    display: flex;
    align-items: center;
  }

  .cyv-app .unified-tool-rail .asmr-toggle-button {
    width: auto;
    min-width: 52px;
    height: var(--cyv-rail-control);
    border-radius: var(--cyv-radius-control-lg);
    font-size: .58rem;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .cyv-app .unified-tool-rail .color-tool-group {
    display: grid;
  }

  .cyv-app .unified-tool-rail .asmr-toggle-button {
    width: var(--cyv-rail-control);
    min-width: var(--cyv-rail-control);
    height: 22px;
    min-height: 22px;
    border-radius: var(--cyv-radius-sm);
  }
}

.cyv-app .studio-shell {
  border: 1px solid rgba(29, 63, 72, .12);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .26)),
    linear-gradient(135deg, rgba(232, 248, 248, .88), rgba(255, 249, 242, .82));
  box-shadow:
    0 24px 68px rgba(27, 52, 58, .14),
    inset 0 1px 0 rgba(255, 255, 255, .76);
}

.cyv-app .canvas-stage .coloring-page-stage:not(.is-awaiting-page),
body.studio-fullscreen.cyv-app .canvas-stage .coloring-page-stage {
  background:
    radial-gradient(720px 480px at 50% 42%, rgba(255, 255, 255, .74), transparent 66%),
    radial-gradient(520px 380px at 18% 18%, rgba(80, 188, 203, .16), transparent 62%),
    radial-gradient(560px 380px at 88% 76%, rgba(255, 135, 112, .11), transparent 64%),
    linear-gradient(90deg, rgba(29, 63, 72, .045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(29, 63, 72, .035) 1px, transparent 1px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .22) 0 2px, rgba(255, 255, 255, 0) 2px 9px),
    #eaf5f3;
  background-size:
    auto,
    auto,
    auto,
    32px 32px,
    32px 32px,
    14px 14px,
    auto;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .68),
    inset 0 38px 100px rgba(255, 255, 255, .34);
}

body.studio-fullscreen.cyv-app .canvas-stage.coloring-workspace {
  background:
    radial-gradient(920px 540px at 8% 0%, rgba(67, 185, 205, .18), transparent 62%),
    radial-gradient(820px 520px at 92% 12%, rgba(255, 126, 98, .11), transparent 64%),
    linear-gradient(135deg, #eef9f8, #f9fbf7);
  background-size: auto;
}

.cyv-app .coloring-page-stage.is-awaiting-page,
.cyv-app .browse-start-state.is-book-scene,
.cyv-app .browse-start-state.is-page-scene {
  background:
    radial-gradient(760px 520px at 12% 0%, rgba(67, 185, 205, .18), transparent 58%),
    radial-gradient(680px 500px at 88% 12%, rgba(255, 126, 98, .11), transparent 58%),
    linear-gradient(135deg, #f8fcff 0%, #eef9f7 58%, #fff9f2 100%);
}

/* Viewport-safe inspector panels. Must stay after theme overrides. */
.cyv-app .color-menu,
.cyv-app .tool-popover,
.cyv-app .brush-size-popover,
.cyv-app .more-menu {
  position: fixed;
  box-sizing: border-box;
  max-width: calc(100vw - 20px);
  max-height: calc(100dvh - 20px);
  overscroll-behavior: contain;
}

.cyv-app .tool-popover,
.cyv-app .brush-size-popover,
.cyv-app .more-menu {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.cyv-app .color-menu {
  overflow: hidden;
}

.cyv-app .color-menu .color-tab-panel {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Secondary coloring preference rail. Kept last so it overrides older rail placement rules. */
.cyv-app .canvas-rail-stack {
  position: absolute;
  top: 50%;
  right: max(10px, env(safe-area-inset-right));
  z-index: 190;
  display: grid;
  justify-items: center;
  gap: var(--cyv-space-5);
  transform: translateY(-50%);
}

.cyv-app .canvas-rail-stack .canvas-tool-cluster.unified-tool-rail {
  position: static;
  inset: auto;
  transform: none;
}

.cyv-app .secondary-control-rail {
  --secondary-control-size: var(--cyv-rail-control);
  display: grid;
  justify-items: center;
  gap: var(--cyv-space-2);
  min-width: calc(var(--secondary-control-size) + (var(--cyv-space-2) * 2));
  padding: var(--cyv-space-2);
  border: 1px solid var(--cyv-color-line);
  border-radius: var(--cyv-radius-rail);
  background: var(--cyv-color-surface-rail);
  box-shadow: var(--cyv-shadow-rail);
  backdrop-filter: var(--cyv-backdrop-rail);
}

.cyv-app .canvas-rail-stack .canvas-tool-cluster.unified-tool-rail,
.cyv-app .secondary-control-rail {
  border-color: rgba(255, 255, 255, .72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 52%, rgba(85, 184, 208, .1)),
    var(--cyv-color-surface-rail);
  box-shadow: var(--cyv-shadow-rail);
  -webkit-backdrop-filter: var(--cyv-backdrop-rail);
  backdrop-filter: var(--cyv-backdrop-rail);
}

.cyv-app .secondary-control-button {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--secondary-control-size);
  height: var(--secondary-control-size);
  min-width: var(--secondary-control-size);
  min-height: var(--secondary-control-size);
  border: 1px solid transparent;
  border-radius: var(--cyv-radius-control-lg);
  padding: 0;
  background: transparent;
  color: var(--cyv-color-ink);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--cyv-motion-fast), color var(--cyv-motion-fast), opacity var(--cyv-motion-fast);
}

.cyv-app .secondary-control-button + .secondary-control-button {
  position: relative;
}

.cyv-app .secondary-control-button + .secondary-control-button::before {
  content: "";
  position: absolute;
  top: calc(var(--cyv-space-2) * -1);
  left: 0;
  right: 0;
  height: 1px;
  background: var(--cyv-color-line);
  pointer-events: none;
}

.cyv-app .secondary-control-button:is(:hover, :focus-visible) {
  border-color: var(--cyv-color-line);
  background: var(--cyv-color-surface-control-hover);
}

.cyv-app .secondary-control-button.is-active,
.cyv-app .secondary-control-button[aria-pressed="true"],
.cyv-app .secondary-control-button[aria-expanded="true"] {
  border-color: transparent;
  background: var(--cyv-color-active);
  color: var(--cyv-color-active-contrast);
}

.cyv-app .secondary-control-button:disabled {
  color: rgba(38, 52, 56, .26);
  cursor: default;
  opacity: .72;
}

.cyv-app .secondary-control-button:disabled:is(:hover, :focus-visible) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.cyv-app .rail-symbol {
  width: 25px;
  height: 25px;
  overflow: visible;
}

.cyv-app .rail-symbol path,
.cyv-app .rail-symbol rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.cyv-app .rail-symbol .rail-symbol-accent {
  stroke: var(--cyv-color-accent);
}

.cyv-app .rail-symbol .rail-symbol-accent-fill {
  fill: var(--cyv-color-accent);
  stroke: none;
}

.cyv-app .rail-symbol .rail-symbol-fill {
  fill: rgba(15, 137, 150, .72);
  stroke: currentColor;
}

.cyv-app .rail-symbol-more circle {
  fill: currentColor;
  stroke: none;
}

.cyv-app .rail-text-symbol {
  display: block;
  font-size: .61rem;
  font-weight: 950;
  letter-spacing: .035em;
  line-height: 1;
}

.cyv-app .secondary-control-rail [data-tooltip]::after {
  left: auto;
  right: calc(100% + 10px);
  top: 50%;
  bottom: auto;
  z-index: 260;
  transform: translate(4px, -50%);
}

@media (hover: hover) and (pointer: fine) {
  .cyv-app .secondary-control-rail [data-tooltip]:is(:hover, :focus-visible)::after {
    transform: translate(0, -50%);
  }
}

body.studio-awaiting-page .canvas-rail-stack,
.studio-shell:has(.coloring-page-stage.is-awaiting-page) .canvas-rail-stack {
  display: none !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 720px) {
  .cyv-app .canvas-rail-stack {
    top: auto;
    right: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 50%;
    width: min-content;
    max-width: calc(100vw - 16px);
    gap: var(--cyv-space-2);
    transform: translateX(-50%);
  }

  .cyv-app .canvas-rail-stack .canvas-tool-cluster.unified-tool-rail {
    max-width: calc(100vw - 16px);
  }

  .cyv-app .secondary-control-rail {
    grid-auto-flow: column;
    grid-template-columns: repeat(3, var(--secondary-control-size));
    width: max-content;
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .cyv-app .secondary-control-button + .secondary-control-button::before {
    top: 0;
    bottom: 0;
    left: calc(var(--cyv-space-2) * -1);
    right: auto;
    width: 1px;
    height: auto;
  }

  .cyv-app .secondary-control-rail [data-tooltip]::after {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(100% + 9px);
    transform: translate(-50%, 4px);
  }

  .cyv-app .secondary-control-rail [data-tooltip]:is(:hover, :focus-visible)::after {
    transform: translate(-50%, 0);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .cyv-app .canvas-rail-stack {
    top: 50%;
    right: max(6px, env(safe-area-inset-right));
    bottom: auto;
    left: auto;
    max-height: calc(100dvh - 12px);
    overflow-y: auto;
    gap: var(--cyv-space-2);
    transform: translateY(-50%);
    scrollbar-width: none;
  }

  .cyv-app .canvas-rail-stack::-webkit-scrollbar {
    display: none;
  }

  .cyv-app .secondary-control-rail {
    grid-auto-flow: row;
    grid-template-columns: none;
    width: auto;
    overflow: visible;
  }

  .cyv-app .secondary-control-button + .secondary-control-button::before {
    top: calc(var(--cyv-space-2) * -1);
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }
}

@media (max-width: 720px) and (orientation: portrait) {
  .cyv-app .canvas-rail-stack {
    --cyv-rail-control: 40px;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: safe center;
    width: calc(100vw - 4px);
    max-width: calc(100vw - 4px);
    gap: 2px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
  }

  .cyv-app .canvas-rail-stack::-webkit-scrollbar {
    display: none;
  }

  .cyv-app .canvas-rail-stack .canvas-tool-cluster.unified-tool-rail {
    flex: 0 0 auto;
    max-width: none;
    padding: 5px;
  }

  .cyv-app .canvas-rail-stack .canvas-tool-button,
  .cyv-app .canvas-rail-stack .rail-context-button,
  .cyv-app .canvas-rail-stack .color-puck-button.current-color,
  .cyv-app .secondary-control-button {
    width: var(--cyv-rail-control);
    min-width: var(--cyv-rail-control);
    height: var(--cyv-rail-control);
    min-height: var(--cyv-rail-control);
  }

  .cyv-app .canvas-rail-stack #undo-coloring,
  .cyv-app .canvas-rail-stack #redo-coloring {
    width: var(--cyv-rail-control);
    min-width: var(--cyv-rail-control);
    height: var(--cyv-rail-control);
    min-height: var(--cyv-rail-control);
  }

  .cyv-app .secondary-control-rail {
    flex: 0 0 auto;
    max-width: none;
    padding: 5px;
    gap: var(--cyv-space-1);
  }

  .cyv-app .secondary-control-button + .secondary-control-button::before {
    left: calc(var(--cyv-space-1) * -1);
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .cyv-app .canvas-rail-stack {
    --cyv-rail-control: 38px;
    width: 100vw;
    max-width: 100vw;
    gap: 0;
  }
}

@media (max-width: 370px) and (orientation: portrait) {
  .cyv-app .canvas-rail-stack {
    --cyv-rail-control: 35px;
  }
}

.cyv-app .fan-gallery > .gallery-load-more {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 112px;
  min-height: 44px;
  margin: 8px 0 18px;
}

/* Optical-crystal studio chrome: selected from the Encapsulated Crest study. */
.cyv-app {
  --cyv-optical-border: rgba(255, 255, 255, .88);
  --cyv-optical-border-cool: rgba(94, 180, 200, .22);
  --cyv-optical-fill: rgba(255, 255, 255, .1);
  --cyv-optical-highlight: rgba(255, 255, 255, .92);
  --cyv-optical-shadow:
    0 12px 28px rgba(34, 74, 84, .13),
    0 2px 5px rgba(34, 74, 84, .07),
    inset 0 1.5px 0 rgba(255, 255, 255, .96),
    inset 1px 0 0 rgba(255, 255, 255, .7),
    inset 0 -2px 0 rgba(83, 174, 196, .17),
    inset -1px 0 0 rgba(28, 84, 97, .08);
  --cyv-optical-backdrop: blur(18px) saturate(158%) contrast(104%);
}

.cyv-app .discover-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.2vw, 14px);
  min-height: 58px;
}

.cyv-app .summer-vibe-brand,
.cyv-app .discover-actions {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--cyv-optical-border);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .1) 38%, rgba(218, 246, 250, .08) 68%, rgba(91, 185, 207, .13)),
    var(--cyv-optical-fill);
  box-shadow: var(--cyv-optical-shadow);
  -webkit-backdrop-filter: var(--cyv-optical-backdrop);
  backdrop-filter: var(--cyv-optical-backdrop);
}

.cyv-app .summer-vibe-brand::before,
.cyv-app .discover-actions::before {
  position: absolute;
  inset: 1px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .52), transparent 22% 76%, rgba(88, 188, 211, .1));
  box-shadow: inset 0 -1px 0 rgba(63, 151, 172, .09);
  content: "";
  pointer-events: none;
}

.cyv-app .summer-vibe-brand::after,
.cyv-app .discover-actions::after {
  position: absolute;
  top: 4px;
  right: 12%;
  left: 12%;
  z-index: -1;
  height: 1px;
  border-top: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--cyv-optical-highlight), transparent);
  content: "";
  opacity: .76;
  pointer-events: none;
  transform: none;
}

.cyv-app .summer-vibe-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 54px;
  padding: 4px 17px 4px 5px;
  overflow: visible;
  border-radius: var(--cyv-radius-pill);
}

.cyv-app .brand-logo-lens {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .72), transparent 35%),
    rgba(255, 255, 255, .12);
  box-shadow:
    0 7px 15px rgba(30, 74, 84, .14),
    inset 0 2px 2px rgba(255, 255, 255, .96),
    inset 0 -2px 2px rgba(76, 173, 196, .2);
  -webkit-backdrop-filter: blur(7px) saturate(145%);
  backdrop-filter: blur(7px) saturate(145%);
}

.cyv-app .brand-logo-lens::before {
  display: none;
}

.cyv-app .brand-logo-lens::after {
  position: absolute;
  inset: 2px 7px auto;
  height: 28%;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, 0));
  content: "";
  opacity: .72;
  pointer-events: none;
  transform: none;
}

.cyv-app .summer-vibe-brand .app-logo-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: saturate(1.04) drop-shadow(0 2px 4px rgba(27, 60, 70, .16));
  transform: scale(.98);
}

.cyv-app .studio-signature {
  display: block;
  margin: 1px 0 -1px;
  color: #123f4a;
  font-family: "Snell Roundhand", "Segoe Script", "Apple Chancery", "Brush Script MT", cursive;
  font-size: clamp(1.8rem, 2.6vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .9;
  text-rendering: geometricPrecision;
  white-space: nowrap;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .68));
}

.cyv-app .discover-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-height: 72px;
  padding: 7px;
  overflow: visible;
  border-radius: var(--cyv-radius-pill);
  flex-wrap: nowrap;
}

.cyv-app .discover-actions .studio-command,
.cyv-app .discover-actions .studio-icon-button {
  min-height: 58px;
  height: 58px;
  border-radius: 18px;
}

.cyv-app .discover-actions .studio-command {
  padding-inline: 22px;
  font-size: .94rem;
}

.cyv-app .discover-actions .studio-icon-button,
.cyv-app .discover-actions .secondary-surface-button,
.cyv-app .discover-actions .primary-share-button {
  width: 58px;
  min-width: 58px;
}

.cyv-app .discover-actions .studio-command.primary {
  border: 1px solid rgba(255, 255, 255, .14);
  background: #203138;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 4px 10px rgba(30, 51, 58, .12);
}

.cyv-app .discover-actions .secondary-surface-button,
.cyv-app .discover-actions .primary-share-button {
  border-color: rgba(255, 255, 255, .66);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .1)),
    rgba(255, 255, 255, .035);
  color: var(--cyv-color-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 3px 8px rgba(34, 74, 84, .08);
}

.cyv-app .canvas-rail-stack .canvas-tool-cluster.unified-tool-rail,
.cyv-app .secondary-control-rail {
  overflow: visible;
  border-color: var(--cyv-optical-border);
  border-radius: var(--cyv-radius-pill);
}

.cyv-app .canvas-rail-stack .canvas-tool-cluster.unified-tool-rail {
  padding: 10px;
}

.cyv-app .secondary-control-rail {
  --secondary-control-size: 41px;
  padding: 8px 12px;
}

.cyv-app .canvas-rail-stack {
  --cyv-rail-control: 46px;
  top: 52%;
  right: clamp(40px, 6vw, 82px);
  gap: 16px;
}

.cyv-app .canvas-rail-stack .unified-tool-rail .asmr-toggle-button {
  width: var(--cyv-rail-control);
  min-width: var(--cyv-rail-control);
  height: var(--cyv-rail-control);
  min-height: var(--cyv-rail-control);
  border-radius: var(--cyv-radius-control-lg);
  padding: 0;
  background: transparent;
}

@media (max-width: 720px) {
  .cyv-app {
    --cyv-optical-shadow:
      0 6px 15px rgba(34, 74, 84, .1),
      inset 0 1px 0 rgba(255, 255, 255, .94),
      inset 0 -1px 0 rgba(83, 174, 196, .15);
    --cyv-optical-backdrop: blur(14px) saturate(150%);
  }

  .cyv-app .color-studio-layout {
    gap: 5px;
  }

  .cyv-app .discover-section {
    gap: 4px;
    min-height: 42px;
  }

  .cyv-app .summer-vibe-brand {
    gap: 4px;
    min-width: 0;
    max-width: none;
    min-height: 42px;
    padding: 2px 9px 2px 3px;
  }

  .cyv-app .brand-logo-lens {
    width: 36px;
    height: 36px;
  }

  .cyv-app .brand-logo-lens::before {
    inset: 1px;
  }

  .cyv-app .brand-logo-lens::after {
    top: 5px;
    left: 6px;
    width: 21px;
    height: 12px;
    border-top-width: 2px;
    border-left-width: 1px;
  }

  .cyv-app .summer-vibe-brand .app-logo-mark {
    width: 31px;
    height: 31px;
  }

  .cyv-app .studio-signature {
    font-size: clamp(1.22rem, 6vw, 1.55rem);
    letter-spacing: -.04em;
  }

  .cyv-app .discover-actions {
    gap: 3px;
    min-height: 42px;
    padding: 3px;
  }

  .cyv-app .discover-actions .studio-command,
  .cyv-app .discover-actions .studio-icon-button,
  .cyv-app .discover-actions .secondary-surface-button,
  .cyv-app .discover-actions .primary-share-button {
    min-width: 34px;
    min-height: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .cyv-app .discover-actions .studio-icon-button,
  .cyv-app .discover-actions .secondary-surface-button,
  .cyv-app .discover-actions .primary-share-button {
    width: 34px;
  }

  .cyv-app .discover-actions .studio-command {
    padding-inline: 10px;
    font-size: .72rem;
  }

  .cyv-app .canvas-rail-stack {
    --cyv-rail-control: 40px;
    top: auto;
    right: auto;
    gap: 2px;
  }

  .cyv-app .canvas-rail-stack .canvas-tool-cluster.unified-tool-rail,
  .cyv-app .secondary-control-rail {
    padding: 5px;
  }

  .cyv-app .secondary-control-rail {
    --secondary-control-size: var(--cyv-rail-control);
    width: max-content;
    min-width: 0;
    height: auto;
    min-height: 0;
    justify-content: start;
    gap: var(--cyv-space-1);
  }

  .cyv-app .canvas-rail-stack .unified-tool-rail .asmr-toggle-button {
    width: var(--cyv-rail-control);
    min-width: var(--cyv-rail-control);
    height: var(--cyv-rail-control);
    min-height: var(--cyv-rail-control);
    font-size: .52rem;
  }
}

@media (max-width: 380px) {
  .cyv-app .summer-vibe-brand {
    gap: 2px;
    padding-right: 7px;
  }

  .cyv-app .brand-logo-lens {
    width: 34px;
    height: 34px;
  }

  .cyv-app .summer-vibe-brand .app-logo-mark {
    width: 29px;
    height: 29px;
  }

  .cyv-app .studio-signature {
    font-size: 1.18rem;
  }

  .cyv-app .discover-actions .studio-command {
    padding-inline: 8px;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .cyv-app .canvas-rail-stack {
    --cyv-rail-control: 35px;
  }
}

@media (max-width: 370px) and (orientation: portrait) {
  .cyv-app .canvas-rail-stack {
    --cyv-rail-control: 32px;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .cyv-app .discover-section,
  .cyv-app .summer-vibe-brand,
  .cyv-app .discover-actions {
    min-height: 36px;
  }

  .cyv-app .summer-vibe-brand {
    padding: 1px 8px 1px 2px;
  }

  .cyv-app .brand-logo-lens {
    width: 32px;
    height: 32px;
  }

  .cyv-app .summer-vibe-brand .app-logo-mark {
    width: 28px;
    height: 28px;
  }

  .cyv-app .studio-signature {
    font-size: 1.2rem;
  }

  .cyv-app .discover-actions {
    padding: 2px;
  }

  .cyv-app .discover-actions .studio-command,
  .cyv-app .discover-actions .studio-icon-button {
    min-height: 32px;
    height: 32px;
  }
}

/* Low, full-width glass header from the approved live header study. */
.cyv-app .discover-section {
  position: relative;
  isolation: isolate;
  min-height: 66px;
  padding: 5px 16px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(241, 252, 253, .9), rgba(235, 248, 250, .76) 56%, rgba(247, 252, 252, .86)),
    rgba(235, 249, 250, .78);
  box-shadow:
    0 8px 20px rgba(34, 74, 84, .1),
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(94, 180, 200, .13);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

.cyv-app .summer-vibe-brand,
.cyv-app .discover-actions {
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.cyv-app .summer-vibe-brand::before,
.cyv-app .summer-vibe-brand::after,
.cyv-app .discover-actions::before,
.cyv-app .discover-actions::after {
  display: none;
}

.cyv-app .summer-vibe-brand {
  gap: 10px;
  min-height: 54px;
  padding: 0;
}

.cyv-app .brand-logo-lens {
  width: 56px;
  height: 56px;
  border-color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .32);
  box-shadow:
    0 7px 14px rgba(34, 74, 84, .14),
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(80, 168, 187, .12);
}

.cyv-app .brand-logo-lens::before {
  display: none;
}

.cyv-app .brand-logo-lens::after {
  inset: 2px 8px auto;
  height: 24%;
  border: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7), transparent);
  transform: none;
}

.cyv-app .summer-vibe-brand .app-logo-mark {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 2px 4px rgba(27, 60, 70, .13));
  transform: none;
}

.cyv-app .studio-signature {
  margin: 1px 0 -1px;
  font-size: 3rem;
  letter-spacing: -.05em;
  line-height: .9;
}

.cyv-app .discover-actions {
  gap: 6px;
  min-height: 44px;
  padding: 0;
}

.cyv-app .discover-actions .studio-command,
.cyv-app .discover-actions .studio-icon-button,
.cyv-app .discover-actions .secondary-surface-button,
.cyv-app .discover-actions .primary-share-button {
  min-height: 44px;
  height: 44px;
  border-radius: 12px;
}

.cyv-app .discover-actions .studio-command {
  min-width: 91px;
  padding-inline: 17px;
  font-size: .84rem;
}

.cyv-app .discover-actions .studio-icon-button,
.cyv-app .discover-actions .secondary-surface-button,
.cyv-app .discover-actions .primary-share-button {
  width: 44px;
  min-width: 44px;
}

/* Original studio controls, with ASMR restored to the secondary rail. */
.cyv-app .canvas-rail-stack {
  --cyv-rail-control: 44px;
  top: 50%;
  right: max(10px, env(safe-area-inset-right));
  gap: var(--cyv-space-5);
}

.cyv-app .canvas-rail-stack .canvas-tool-cluster.unified-tool-rail,
.cyv-app .secondary-control-rail {
  border-color: rgba(255, 255, 255, .72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .12) 52%, rgba(85, 184, 208, .1)),
    var(--cyv-color-surface-rail);
  box-shadow: var(--cyv-shadow-rail);
  -webkit-backdrop-filter: var(--cyv-backdrop-rail);
  backdrop-filter: var(--cyv-backdrop-rail);
}

.cyv-app .canvas-rail-stack .canvas-tool-cluster.unified-tool-rail {
  padding: var(--cyv-space-2);
}

.cyv-app .secondary-control-rail {
  --secondary-control-size: var(--cyv-rail-control);
  padding: var(--cyv-space-2);
}

@media (max-width: 720px) {
  .cyv-app .discover-section {
    min-height: 44px;
    padding: 3px 6px;
    border-radius: 10px;
  }

  .cyv-app .summer-vibe-brand {
    gap: 4px;
    min-height: 36px;
    padding: 0;
  }

  .cyv-app .brand-logo-lens {
    width: 36px;
    height: 36px;
  }

  .cyv-app .summer-vibe-brand .app-logo-mark {
    width: 31px;
    height: 31px;
  }

  .cyv-app .studio-signature {
    font-size: clamp(1.22rem, 6vw, 1.55rem);
    letter-spacing: -.05em;
  }

  .cyv-app .discover-actions {
    gap: 3px;
    min-height: 44px;
  }

  .cyv-app .discover-actions .studio-command,
  .cyv-app .discover-actions .studio-icon-button,
  .cyv-app .discover-actions .secondary-surface-button,
  .cyv-app .discover-actions .primary-share-button {
    min-height: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .cyv-app .discover-actions .studio-command {
    min-width: 0;
    padding-inline: 10px;
    font-size: .72rem;
  }

  .cyv-app .discover-actions .studio-icon-button,
  .cyv-app .discover-actions .secondary-surface-button,
  .cyv-app .discover-actions .primary-share-button {
    width: 44px;
    min-width: 44px;
  }

  .cyv-app .canvas-rail-stack {
    top: auto;
    right: auto;
  }
}

/* Adaptive artwork search: one quiet intent shelf above the permanent catalog. */
.cyv-app .catalog-search {
  position: relative;
  display: grid;
  grid-template-columns: 42px 0 0;
  align-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .66);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .48), rgba(255, 255, 255, .1)),
    rgba(255, 255, 255, .035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 3px 8px rgba(34, 74, 84, .08);
  transition:
    width 180ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.cyv-app .catalog-search.is-open {
  grid-template-columns: 42px minmax(116px, 1fr) 40px;
  width: min(34vw, 340px);
  border-color: rgba(29, 63, 72, .17);
  background: rgba(255, 255, 255, .82);
  box-shadow:
    0 7px 18px rgba(34, 74, 84, .1),
    inset 0 1px 0 rgba(255, 255, 255, .94);
}

.cyv-app .catalog-search-toggle,
.cyv-app .catalog-search-clear {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--cyv-color-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cyv-app .catalog-search-clear {
  width: 40px;
  min-width: 40px;
  color: var(--cyv-color-muted);
}

.cyv-app .catalog-search-toggle svg,
.cyv-app .catalog-search-clear svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cyv-app .catalog-search input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: 0;
  padding: 0 4px;
  opacity: 0;
  background: transparent;
  color: var(--cyv-color-ink);
  font: inherit;
  font-size: .88rem;
  font-weight: 760;
  line-height: 1;
  pointer-events: none;
  transition: opacity 120ms ease;
  appearance: none;
}

.cyv-app .catalog-search.is-open input {
  opacity: 1;
  pointer-events: auto;
}

.cyv-app .catalog-search input::placeholder {
  color: rgba(29, 63, 72, .5);
  opacity: 1;
}

.cyv-app .catalog-search input::-webkit-search-cancel-button {
  display: none;
}

.cyv-app .catalog-search-toggle:focus-visible,
.cyv-app .catalog-search-clear:focus-visible,
.cyv-app .catalog-search input:focus-visible {
  outline: 2px solid var(--cyv-color-accent);
  outline-offset: -3px;
  box-shadow: none;
}

.cyv-app .catalog-search-clear[hidden] {
  display: none;
}

.cyv-app .catalog-search-results-layer {
  display: grid;
  flex: 0 0 auto;
  gap: 10px;
  min-width: 0;
  animation: catalog-search-layer-in 180ms ease both;
}

.cyv-app .catalog-search-results-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.cyv-app .catalog-search-results-header h4 {
  margin: 0;
  overflow: hidden;
  color: rgba(36, 50, 53, .78);
  font-size: .84rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cyv-app .catalog-search-results-header span {
  flex: 0 0 auto;
  color: rgba(36, 50, 53, .54);
  font-size: .72rem;
  font-weight: 850;
}

.cyv-app .catalog-search-results-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(214px, 260px);
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  padding: 0 1px 3px;
  scrollbar-width: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.cyv-app .catalog-search-results-rail::-webkit-scrollbar {
  display: none;
}

.cyv-app .catalog-search-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 104px;
  overflow: hidden;
  border: 1px solid rgba(36, 50, 53, .1);
  border-radius: 16px;
  padding: 8px 12px 8px 8px;
  background: rgba(255, 255, 255, .8);
  color: #243235;
  box-shadow: 0 1px 2px rgba(36, 50, 53, .06);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.cyv-app .catalog-search-card .page-thumb {
  display: grid;
  width: 72px;
  min-height: 0;
  height: auto;
  aspect-ratio: .78;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

.cyv-app .catalog-search-card .page-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cyv-app .catalog-search-card .page-card-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.cyv-app .catalog-search-card .page-card-copy strong,
.cyv-app .catalog-search-card .page-card-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cyv-app .catalog-search-card .page-card-copy strong {
  font-size: .91rem;
  font-weight: 950;
  line-height: 1.08;
}

.cyv-app .catalog-search-card .page-card-copy small {
  color: rgba(36, 50, 53, .6);
  font-size: .73rem;
  font-weight: 840;
}

.cyv-app .catalog-search-card.has-saved-artwork {
  border-color: rgba(15, 137, 150, .3);
}

.cyv-app .catalog-search-card:is(:hover, :focus-visible) {
  border-color: rgba(36, 50, 53, .24);
  background: #fff;
  transform: translateY(-2px);
}

@keyframes catalog-search-layer-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 900px) {
  .cyv-app .discover-actions.is-searching {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cyv-app .discover-actions.is-searching > :not(.catalog-search) {
    display: none;
  }

  .cyv-app .discover-actions.is-searching .catalog-search.is-open {
    width: 100%;
    max-width: 440px;
  }
}

@media (max-width: 620px) {
  .cyv-app .discover-actions.is-searching {
    width: auto;
  }

  .cyv-app .catalog-search,
  .cyv-app .catalog-search.is-open {
    height: 44px;
    border-radius: 10px;
  }

  .cyv-app .catalog-search.is-open {
    grid-template-columns: 40px minmax(82px, 1fr) 38px;
  }

  .cyv-app .catalog-search-toggle {
    width: 40px;
    min-width: 40px;
  }

  .cyv-app .catalog-search-clear {
    width: 38px;
    min-width: 38px;
  }

  .cyv-app .catalog-search input {
    padding-inline: 2px;
    font-size: .82rem;
  }

  .cyv-app .catalog-search-results-rail {
    grid-auto-columns: minmax(204px, 76vw);
  }

  .cyv-app .catalog-search-card {
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 94px;
  }

  .cyv-app .catalog-search-card .page-thumb {
    width: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cyv-app .catalog-search-results-layer {
    animation: none;
  }
}

/* Preserve the original Instacolor identity as the compact app mark. */
.cyv-app .brand-logo-lens {
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 13px;
  background: #fff;
}

.cyv-app .brand-logo-lens::after {
  display: none;
}

.cyv-app .summer-vibe-brand .app-logo-mark {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  object-fit: contain;
  clip-path: inset(0 round 12px);
  filter: drop-shadow(0 4px 10px rgba(34, 43, 46, .12));
}

@media (max-width: 720px) {
  .cyv-app .brand-logo-lens {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .cyv-app .summer-vibe-brand .app-logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    clip-path: inset(0 round 9px);
  }
}