:root {
  --paper: #f7f0e5;
  --paper-deep: #efe3d1;
  --ink: #24211f;
  --muted: #706a64;
  --line: rgba(36, 33, 31, 0.18);
  --coral: #ef6a52;
  --pink: #f3b7c3;
  --blue: #9fc7d7;
  --cream: #fffaf1;
  --shadow: 0 22px 60px rgba(77, 54, 35, 0.14);
  --radius-lg: 30px;
  --radius-md: 18px;
  --max-width: 1220px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 5%, rgba(239, 106, 82, 0.08), transparent 26rem),
    linear-gradient(180deg, var(--paper) 0%, #fbf6ed 58%, var(--paper-deep) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.24;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}

button,
input,
select {
  font: inherit;
}

button,
a,
label[for] {
  -webkit-tap-highlight-color: transparent;
}

button,
.button,
summary {
  cursor: pointer;
}

a {
  color: inherit;
}

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  transform: translateY(-180%);
  border-radius: 999px;
  color: white;
  background: var(--ink);
}

.skip-link:focus {
  transform: translateY(0);
}

:focus-visible {
  outline: 3px solid #1677a5;
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(calc(100% - 32px), var(--max-width));
  margin: 14px auto 0;
  padding: 12px 14px 12px 18px;
  border: 1px solid rgba(36, 33, 31, 0.12);
  border-radius: 999px;
  background: rgba(255, 250, 241, 0.88);
  box-shadow: 0 8px 30px rgba(78, 58, 42, 0.08);
  backdrop-filter: blur(18px);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  grid-template-columns: repeat(2, 6px);
  gap: 3px;
  padding: 7px;
  border-radius: 8px;
  background: var(--ink);
}

.brand-mark i {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--paper);
}

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

.site-header nav a,
footer nav a {
  color: #514c47;
  font-size: 0.86rem;
  font-weight: 650;
  text-decoration: none;
}

.site-header nav a:hover,
footer nav a:hover {
  color: var(--coral);
}

.site-header .nav-action {
  padding: 9px 16px;
  border-radius: 999px;
  color: white;
  background: var(--ink);
}

main {
  overflow: clip;
}

/* Compact intro: the tool is the hero, the copy just introduces it. */

.intro {
  width: min(calc(100% - 32px), var(--max-width));
  margin: 12px auto 0;
}

.intro-copy {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

.eyebrow,
.micro-label {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eyebrow > span {
  width: 28px;
  height: 2px;
  background: var(--coral);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

h1 {
  max-width: 960px;
  margin: 0 auto 5px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.04;
}

h2 {
  margin-bottom: 24px;
  font-size: clamp(2.4rem, 4vw, 4.9rem);
}

h3 {
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.25;
}

.intro-lede {
  max-width: 760px;
  margin: 0 auto 8px;
  color: #56504a;
  font-size: clamp(0.92rem, 1.2vw, 1.02rem);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--ink);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
}

.booth-shell {
  position: relative;
  padding: clamp(16px, 2.2vw, 26px);
  border: 1px solid rgba(36, 33, 31, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(255, 250, 241, 0.82);
  box-shadow: var(--shadow);
}

.stage-status,
.capture-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.booth-progress {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 750;
}

.mirror-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.mirror-switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--coral);
}

/* The stage has two modes: a template preview (template-aspect canvas or the
   composed result) and the live camera frame. Both sit centered inside one
   fixed letterbox window, so picking templates never moves or resizes the
   stage — only the composition inside changes. The tool drawer floats beside
   the rail as an absolute overlay and never reflows either mode. */

.booth-stage {
  position: relative;
  min-width: 0;
  /* The preview, action row, and slot tray share one width so the stage reads
     as a single centered column. */
  --stage-max: min(100%, 900px);
  --stage-h: min(62vh, 600px);
}

.stage-surface {
  position: relative;
  height: var(--stage-h);
  margin-top: 18px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: rgba(36, 33, 31, 0.03);
}

/* The stage frame shrink-wraps the preview image so the sticker layer sits
   exactly on the composition, whatever aspect the current template has. */

.stage-frame {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  max-width: calc(var(--stage-max) - 24px);
  max-height: calc(var(--stage-h) - 24px);
}

.stage-frame[hidden] {
  display: none;
}

/* All visual layers occupy the same grid cell so the normal preview,
   the frame editor canvas, the camera overlay, and the sticker overlay
   are always perfectly stacked — never side by side. */
.stage-preview,
.frame-editor-canvas,
.camera-slot-canvas,
.sticker-layer {
  grid-area: 1 / 1;
}

/* Unified sizing: the editing canvas and the normal preview must render at
   the exact same CSS size so switching between them never shifts layout. */
.stage-preview,
.frame-editor-canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(var(--stage-max) - 24px);
  max-height: calc(var(--stage-h) - 24px);
  border-radius: 6px;
  filter: drop-shadow(0 15px 24px rgba(60, 44, 30, 0.2));
}

/* Explicit layer order is required for premium scene families. Their
   always-on editor canvas used to cover the live camera canvas in some
   browsers even though the camera was running correctly. */
.stage-preview {
  z-index: 0;
}

.frame-editor-canvas {
  z-index: 1;
}

/* Hidden state must win over the display:block above so the previews
   are strictly mutually exclusive. */
.stage-preview[hidden],
.frame-editor-canvas[hidden],
.camera-slot-canvas[hidden] {
  display: none !important;
}

/* Camera overlay canvas: transparent, same sizing as the stage. */
.camera-slot-canvas {
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  max-width: calc(var(--stage-max) - 24px);
  max-height: calc(var(--stage-h) - 24px);
  pointer-events: none;
}

/* Hidden media source for the camera: visually offscreen but still playing. */
.camera-media-source {
  position: fixed;
  width: 1px;
  height: 1px;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Interactive-only canvas attributes layered on top of the unified sizing. */
.frame-editor-canvas {
  cursor: grab;
  touch-action: none;
}

.frame-editor-canvas:active {
  cursor: grabbing;
}

.frame-editor-canvas:focus-visible {
  outline: 3px solid #1677a5;
  outline-offset: 4px;
}

/* Shot tray NEXT indicator */
.shot-slot.is-next {
  border: 2px dashed var(--coral);
  background: rgba(239, 106, 82, 0.06);
}

.shot-slot.is-selected {
  border: 2px solid #1677a5;
}

.shot-slot .slot-next-badge {
  display: block;
  padding: 2px 8px;
  margin-bottom: 4px;
  border-radius: 999px;
  color: white;
  background: var(--coral);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shot-slot .slot-label {
  display: block;
  color: var(--muted);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shot-slot {
  cursor: pointer;
}

/* Lightweight reset button in the stage status bar */
.layout-reset-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

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

.layout-reset-button:hover {
  color: var(--coral);
}

.camera-window[hidden] {
  display: none;
}

/* Export bar: the download and share actions live directly under the stage,
   mirroring the reference pattern of a compact action strip under the frame. */

.stage-export {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.stage-export[hidden] {
  display: none;
}

.camera-window {
  position: relative;
  display: grid;
  height: calc(var(--stage-h) - 24px);
  width: auto;
  aspect-ratio: 4 / 3;
  max-width: calc(var(--stage-max) - 24px);
  margin: 0;
  overflow: hidden;
  border: 8px solid var(--ink);
  border-radius: 22px;
  color: white;
  background:
    linear-gradient(135deg, rgba(159, 199, 215, 0.26), rgba(239, 106, 82, 0.16)),
    #383431;
  place-items: center;
}

.camera-window::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 36%, rgba(0, 0, 0, 0.22) 100%);
}

#camera-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

#camera-preview.is-live {
  opacity: 1;
}

#camera-preview.is-mirrored {
  transform: scaleX(-1);
}

.camera-empty {
  z-index: 2;
  max-width: min(100%, 420px);
  padding: 38px;
  text-align: center;
}

.camera-empty p {
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.73);
  font-size: 0.9rem;
}

.camera-empty strong {
  color: white;
  font-size: 1rem;
}

.lens-illustration {
  display: grid;
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  place-items: center;
}

.lens-illustration span {
  width: 39px;
  height: 39px;
  border: 8px solid var(--pink);
  border-radius: 50%;
  background: var(--ink);
}

.camera-badge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.countdown {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  background: rgba(23, 20, 18, 0.58);
  font-family: Georgia, serif;
  font-size: clamp(6rem, 15vw, 11rem);
  line-height: 1;
}

.countdown.is-active {
  display: flex;
  animation: flash-in 220ms ease-out;
}

@keyframes flash-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.button-primary {
  color: white;
  background: var(--ink);
}

.button-primary:hover,
.button-dark:hover {
  color: white;
  background: var(--coral);
  border-color: var(--coral);
}

.button-secondary {
  color: var(--ink);
  background: transparent;
}

.button-secondary:hover {
  background: var(--paper-deep);
}

.button-quiet {
  border-color: transparent;
  color: var(--muted);
  background: transparent;
}

.button-quiet:hover {
  color: var(--ink);
  background: rgba(36, 33, 31, 0.06);
}

.button-icon {
  margin-right: 8px;
  color: var(--coral);
  font-size: 0.8rem;
}

.button:disabled,
.shutter:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

#photo-upload {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.permission-note,
.status-message {
  min-height: 1.35em;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.73rem;
}

/* Booth workspace: a narrow tool rail plus the stage. Tool panels live
   INSIDE the camera frame as an absolute overlay, so opening one never
   reflows anything — the frame, the action row, and the slot tray keep
   identical geometry in every tool state. */

.booth-workspace {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.tool-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tool-toggle {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-height: 60px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: transparent;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
}

.tool-toggle:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--cream);
}

.tool-toggle[aria-expanded="true"] {
  color: white;
  background: var(--ink);
  border-color: var(--ink);
}

.rail-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Tool drawer: floats beside the rail, absolutely positioned inside the stage
   surface and bounded by it — never part of the layout, so the stage keeps its
   exact geometry and the action row below stays reachable. Its width stops
   short of the centered preview so the layout stays visible while browsing,
   and dismissal is one tap anywhere outside (no Close). */

.tool-drawer {
  position: absolute;
  top: 12px;
  bottom: auto;
  left: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  width: min(410px, calc(100% - 20px));
  max-height: calc(100% - 24px);
  overflow: hidden;
  border: 1px solid rgba(36, 33, 31, 0.28);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(58, 42, 28, 0.16);
}

.tool-drawer[hidden] {
  display: none;
}

.tool-drawer:not([hidden]) {
  animation: drawer-in 160ms ease-out;
}

/* Desktop dismissal is outside click, Escape, or the rail toggle itself. */
.tool-drawer-close {
  display: none;
}

@keyframes drawer-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

.tool-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--cream);
}

.tool-drawer-title {
  margin: 0;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.2;
}

.tool-drawer-close {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tool-drawer-close:hover {
  color: var(--ink);
  background: var(--paper-deep);
}

.tool-panels {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px;
  overscroll-behavior: contain;
}

.panel-label {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The presets panel is a single scrolling catalog: one titled section per
   occasion, each heading carrying its card count. */
.preset-section {
  margin-bottom: 18px;
}

.preset-section-title {
  margin: 0 0 8px;
  font-family: inherit;
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.preset-section-title span {
  margin-left: 6px;
  color: var(--coral);
}

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

/* Layout cards live in a narrow drawer. Each card therefore stacks its
   geometry preview above the copy; a side-by-side 150px canvas plus text
   cannot fit in a two-column grid and previously forced letter-by-letter
   wrapping and horizontal overflow. */
#template-grid .template-card {
  align-items: stretch;
  flex-direction: column;
  overflow: hidden;
  text-align: center;
}

#template-grid .template-card canvas {
  flex: none;
  width: 100%;
  height: 116px;
  max-width: 100%;
  object-fit: contain;
}

#template-grid .template-text {
  width: 100%;
}

#template-grid .template-name,
#template-grid .template-meta {
  overflow-wrap: normal;
  word-break: normal;
}

/* Keep the catalog scannable: two cards per row in the wider picker. */
#preset-grid .template-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#preset-grid .template-card {
  flex-direction: column;
  text-align: center;
  padding: 10px;
}

#preset-grid .template-card img {
  width: 100%;
  height: 150px;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.template-card {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  text-align: left;
}

.template-card:hover {
  border-color: var(--ink);
  background: var(--cream);
}

.template-card.is-selected {
  border-color: var(--ink);
  background: var(--cream);
  box-shadow: 0 0 0 2px rgba(36, 33, 31, 0.14);
}

/* Thumbnail box: a fixed 150px-wide frame so every card shows real detail;
   strip thumbs letterbox inside it. */
.template-card canvas,
.template-card img {
  flex: 0 0 150px;
  width: 150px;
  height: 112px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(36, 33, 31, 0.06);
  box-shadow: 0 4px 14px rgba(60, 44, 30, 0.18);
}

.template-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.template-text .template-name {
  overflow-wrap: anywhere;
  line-height: 1.15;
  font-size: 0.82rem;
}

/* Locked frame control: painted artwork owns the canvas. */
#frame-control.is-locked {
  opacity: 0.45;
}

#frame-control.is-locked input {
  cursor: not-allowed;
}

.template-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  color: white;
  background: var(--coral);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

.template-name {
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
}

.template-meta {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.3;
}

.template-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

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

legend,
.detail-controls label > span {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice-chip,
.swatch {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  background: transparent;
  font-size: 0.74rem;
  font-weight: 750;
}

.choice-chip {
  padding: 8px 13px;
}

.choice-chip:hover,
.choice-chip.is-selected,
.swatch:hover,
.swatch.is-selected {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--cream);
}

.swatch {
  display: grid;
  min-width: 48px;
  padding: 6px;
  place-items: center;
}

.skin-swatch {
  min-width: 74px;
  font-style: normal;
}

.skin-swatch em {
  color: inherit;
  font-size: 0.66rem;
  font-weight: 750;
}

.swatch span {
  display: block;
  width: 22px;
  height: 13px;
  margin-bottom: 4px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.swatch-warm { background: linear-gradient(90deg, #e9a46f, #f3d9a6); }
.swatch-mono { background: linear-gradient(90deg, #353535, #d7d7d7); }
.swatch-blush { background: linear-gradient(90deg, #dc8c9d, #f0d0d6); }
.swatch-ocean { background: linear-gradient(90deg, #628ca8, #c3d7dd); }
.swatch-faded { background: linear-gradient(90deg, #a9a18f, #e9e2d2); }
.swatch-clean { background: linear-gradient(90deg, #ffffff, #ececec); }

/* Frame and Timer only: the caption and preset-field inputs were removed
   for V1, so the row flexes and never leaves an empty middle column. */
.detail-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px 24px;
  margin-top: 24px;
}

.detail-controls input,
.detail-controls select {
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: var(--cream);
}

.detail-controls input[type="color"] {
  padding: 6px;
}

.detail-controls select {
  padding: 0 12px;
}

.capture-row {
  margin-top: 25px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  justify-content: flex-start;
}

.shutter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 20px 10px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: white;
  background: var(--ink);
  font-size: 0.84rem;
  font-weight: 850;
}

.shutter:hover:not(:disabled) {
  background: #3c3733;
}

.shutter-dot {
  width: 30px;
  height: 30px;
  border: 7px solid white;
  border-radius: 50%;
  background: var(--coral);
}

.shot-tray {
  display: grid;
  grid-template-columns: repeat(var(--slot-columns, 4), 1fr);
  gap: 10px;
  width: var(--stage-max, min(100%, 560px));
  margin: 20px auto 0;
}

.shot-slot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(36, 33, 31, 0.35);
  border-radius: 12px;
  color: var(--muted);
  background: rgba(36, 33, 31, 0.035);
}

.shot-slot .slot-index {
  font-weight: 800;
  font-size: 0.95rem;
  opacity: 0.6;
}

.shot-slot.has-photo {
  border-style: solid;
  border-color: transparent;
}

.shot-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slot-action {
  position: absolute;
  top: 6px;
  z-index: 2;
  display: grid;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  place-items: center;
}

.slot-action[data-remove] {
  right: 6px;
}

.slot-action[data-replace] {
  right: 38px;
}

.slot-action:hover {
  background: var(--ink);
}

.status-message.is-error {
  color: #a12620;
  font-weight: 700;
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(calc(100% - 40px), var(--max-width));
  margin: 72px auto 0;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.proof-strip p {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0 26px;
  border-right: 1px solid var(--line);
}

.proof-strip p:last-child {
  border-right: 0;
}

.proof-strip strong {
  font-family: Georgia, serif;
  font-size: 1.8rem;
  font-weight: 500;
}

.proof-strip span {
  color: var(--muted);
  font-size: 0.73rem;
}

.editorial-section,
.feature-section,
.faq-section {
  width: min(calc(100% - 40px), var(--max-width));
  margin: 150px auto 0;
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px 80px;
  margin-bottom: 56px;
}

.section-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -16px;
}

.section-heading h2 {
  margin: 0;
}

.section-heading > p:last-child {
  align-self: end;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.section-heading.narrow {
  display: block;
  max-width: 770px;
}

.section-heading.narrow .eyebrow {
  margin-bottom: 18px;
}

.step-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-cards li,
.feature-grid article {
  min-height: 250px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255, 250, 241, 0.56);
}

.step-cards li > span {
  display: inline-block;
  margin-bottom: 72px;
  color: var(--coral);
  font-family: Georgia, serif;
  font-size: 1.7rem;
}

.step-cards p,
.feature-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.privacy-story {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(50px, 9vw, 140px);
  width: min(calc(100% - 40px), var(--max-width));
  margin: 160px auto 0;
  padding: clamp(50px, 7vw, 90px);
  border-radius: 38px;
  background: #2d2926;
}

.privacy-visual {
  position: relative;
  min-height: 400px;
}

.paper-stack {
  position: absolute;
  inset: 5% 10%;
  border: 12px solid white;
  border-bottom-width: 48px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
  background:
    radial-gradient(circle at 64% 38%, #f4c1c9 0 9%, transparent 9.5%),
    radial-gradient(circle at 37% 38%, #9fc7d7 0 10%, transparent 10.5%),
    linear-gradient(135deg, #d6af7e, #624e42 72%);
}

.paper-one { transform: rotate(-8deg); }
.paper-two { transform: rotate(7deg) translate(22px, 10px); opacity: 0.7; }

.privacy-seal {
  position: absolute;
  inset: 50% auto auto 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%) rotate(-5deg);
  border: 2px solid var(--paper);
  border-radius: 50%;
  color: var(--paper);
  background: rgba(45, 41, 38, 0.78);
}

.privacy-seal::before,
.privacy-seal::after {
  position: absolute;
  inset: 9px;
  content: "";
  border: 1px dashed rgba(255, 255, 255, 0.72);
  border-radius: 50%;
}

.privacy-seal strong {
  font-family: Georgia, serif;
  font-size: 2rem;
  line-height: 1;
}

.privacy-seal span {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.24em;
}

.privacy-copy {
  color: white;
}

.privacy-copy .eyebrow {
  color: var(--pink);
}

.privacy-copy p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.68);
}

.privacy-copy .text-link {
  border-color: white;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.feature-grid article {
  min-height: 310px;
}

.feature-glyph {
  position: relative;
  display: grid;
  width: 84px;
  height: 84px;
  margin-bottom: 58px;
  place-items: center;
}

.glyph-strip {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px;
  transform: rotate(-5deg);
  background: var(--pink);
}

.glyph-strip i {
  height: 52px;
  background: var(--ink);
}

.glyph-sun {
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: repeating-conic-gradient(var(--coral) 0 8deg, transparent 8deg 18deg);
}

.glyph-sun::after {
  width: 42px;
  height: 42px;
  content: "";
  border-radius: 50%;
  background: var(--paper);
}

.glyph-device {
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--blue);
}

.glyph-device i {
  position: absolute;
  bottom: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}

.glyph-arrow {
  border-radius: 50%;
  color: white;
  background: var(--coral);
  font-family: Georgia, serif;
  font-size: 3.2rem;
}

.faq-section {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 100px;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  padding: 22px 46px 22px 0;
  font-weight: 800;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  position: absolute;
  top: 17px;
  right: 0;
  content: "+";
  color: var(--coral);
  font-family: Georgia, serif;
  font-size: 1.7rem;
  font-weight: 400;
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  max-width: 700px;
  padding: 0 46px 20px 0;
  color: var(--muted);
}

.closing-cta {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: min(calc(100% - 40px), var(--max-width));
  margin: 160px auto 0;
  padding: clamp(65px, 9vw, 120px) 30px;
  border-radius: 38px 38px 0 0;
  color: white;
  background:
    linear-gradient(rgba(45, 41, 38, 0.82), rgba(45, 41, 38, 0.88)),
    radial-gradient(circle at 30% 10%, var(--coral), transparent 35%),
    radial-gradient(circle at 75% 70%, var(--blue), transparent 32%),
    #2d2926;
  text-align: center;
}

.closing-cta .eyebrow {
  color: var(--pink);
}

.closing-cta h2 {
  max-width: 850px;
}

.closing-cta > p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.72);
}

.button-dark {
  margin-top: 16px;
  color: var(--ink);
  background: white;
  border-color: white;
}

footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 36px;
  width: min(calc(100% - 40px), var(--max-width));
  margin: 0 auto;
  padding: 52px 0 38px;
  color: var(--muted);
}

footer > div p,
footer > p {
  margin: 10px 0 0;
  font-size: 0.74rem;
}

footer > p {
  grid-column: 1 / -1;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.legal-page {
  width: min(calc(100% - 40px), 860px);
  margin: 90px auto 140px;
}

.legal-page h1 {
  font-size: clamp(3.2rem, 8vw, 6.3rem);
}

.legal-page h2 {
  margin-top: 62px;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.legal-page p,
.legal-page li {
  color: #59534e;
}

.legal-page .page-intro {
  max-width: 720px;
  font-size: 1.18rem;
}

.legal-page .notice-card {
  margin: 42px 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream);
}

.legal-page .notice-card p:last-child {
  margin-bottom: 0;
}

/* Photo source entries, permission notes, and the capture row belong to the
   stage column: they follow the preview and stay clear of the options panel. */
.booth-actions {
  margin-top: 2px;
}

/* Mobile sheet scrim: sits under the sheet and over everything else, so a tap
   anywhere outside retracts the panel. Inert stage content stays untouchable
   by pointer because the scrim intercepts the tap first. */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  border: 0;
  background: rgba(36, 33, 31, 0.18);
}

.sheet-backdrop[hidden] {
  display: none;
}

/* Short viewports: keep the booth, its entry buttons, and the H1 in view. */
@media (max-height: 940px) and (min-width: 761px) {
  .intro {
    margin-top: 8px;
  }

  h1 {
    margin-bottom: 8px;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
  }

  .intro-lede {
    margin-bottom: 6px;
    font-size: 0.88rem;
  }

  .booth-shell {
    padding: 16px;
  }

  .booth-workspace {
    margin-top: 10px;
  }

  .booth-stage {
    --stage-h: min(52vh, 520px);
  }
}

@media (max-width: 1039px) {
  /* Sheet band: the side panel would crowd the frame here, so the drawer
     docks to the viewport bottom with a scrim instead. Close returns. */
  .tool-drawer {
    position: fixed;
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    z-index: 40;
    width: auto;
    max-height: 62dvh;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(58, 42, 28, 0.24);
    padding-bottom: env(safe-area-inset-bottom);
    animation-name: drawer-up;
  }

  /* The rail stays above the sheet scrim so tools remain switchable. */
  .tool-rail-wrap {
    position: relative;
    z-index: 41;
  }

  .tool-drawer-close {
    display: block;
  }

  @keyframes drawer-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .booth-stage {
    --stage-h: min(48vh, 480px);
  }

  .feature-grid,
  .step-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .privacy-story {
    grid-template-columns: 0.75fr 1.25fr;
    padding: 50px;
  }

  .faq-section {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 75px;
  }

  .site-header {
    top: 8px;
    margin-top: 8px;
  }

  .site-header nav a:not(.nav-action) {
    display: none;
  }

  .intro {
    width: min(calc(100% - 24px), var(--max-width));
    margin-top: 12px;
  }

  h1 {
    font-size: clamp(1.7rem, 7.2vw, 2.25rem);
  }

  .intro-lede {
    margin-bottom: 7px;
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .booth-shell {
    padding: 14px;
    border-radius: 22px;
  }

  .camera-window {
    border-width: 6px;
  }

  .section-heading,
  .privacy-story {
    grid-template-columns: 1fr;
  }

  .booth-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .booth-stage {
    --stage-max: 100%;
  }

  /* Subtle right fade hints more tools without blocking taps. */
  .tool-rail-wrap {
    position: relative;
  }

  .tool-rail-wrap::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 6px;
    width: 26px;
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(247, 240, 229, 0.9));
  }

  .tool-rail {
    position: relative;
    flex-direction: row;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .tool-rail::-webkit-scrollbar {
    display: none;
  }

  .tool-toggle {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 7px;
    min-height: 44px;
    padding: 8px 13px;
    scroll-snap-align: start;
    font-size: 0.74rem;
  }

  .template-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  #preset-grid .template-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }

  #preset-grid .template-card img {
    flex: none;
    height: 132px;
  }

  .template-card {
    flex: 0 0 128px;
    scroll-snap-align: start;
  }

  .template-card {
    flex: 0 0 236px;
  }

  .template-card canvas,
  .template-card img {
    flex: 0 0 96px;
    width: 96px;
    height: 76px;
  }

  .proof-strip {
    grid-template-columns: repeat(2, 1fr);
    width: calc(100% - 24px);
  }

  .proof-strip p {
    padding: 16px;
  }

  .proof-strip p:nth-child(2) {
    border-right: 0;
  }

  .proof-strip p:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .editorial-section,
  .feature-section,
  .faq-section,
  .privacy-story,
  .closing-cta {
    width: calc(100% - 24px);
    margin-top: 110px;
  }

  .section-heading {
    gap: 20px;
    margin-bottom: 35px;
  }

  .privacy-story {
    gap: 22px;
    padding: 34px 22px;
  }

  .privacy-visual {
    min-height: 330px;
  }

  footer {
    grid-template-columns: 1fr;
    width: calc(100% - 24px);
  }

  footer nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  .brand-lockup {
    font-size: 0.8rem;
  }

  .site-header .nav-action {
    padding: 8px 12px;
  }

  .stage-status {
    align-items: flex-start;
  }

  .mirror-switch {
    flex-direction: column;
    align-items: flex-end;
  }

  .camera-empty {
    padding: 26px 18px;
  }

  .source-actions .button,
  .source-actions label {
    flex: 1 1 auto;
  }

  .filter-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .shot-tray {
    grid-template-columns: repeat(3, 1fr);
  }

  .step-cards,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .step-cards li,
  .feature-grid article {
    min-height: 220px;
  }

  .feature-grid article {
    min-height: 275px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .intro-copy,
  .browser-note,
  .stage-status,
  .stage-export,
  .sticker-toolbar,
  .booth-actions,
  .shot-tray,
  .detail-controls,
  .status-message,
  .proof-strip,
  .editorial-section,
  .privacy-story,
  .feature-section,
  .faq-section,
  .closing-cta,
  footer {
    display: none !important;
  }

  body,
  .booth-shell {
    color: black;
    background: white;
    box-shadow: none;
  }

  .stage-surface {
    height: auto;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .stage-frame {
    max-width: none;
    max-height: none;
  }

  .stage-preview {
    max-width: none;
    max-height: none;
    filter: none;
  }
}

/* In-app browser guidance */

.browser-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  width: min(calc(100% - 40px), var(--max-width));
  margin: 16px auto 0;
  padding: 14px 18px;
  border: 1px solid rgba(239, 106, 82, 0.45);
  border-radius: 14px;
  background: rgba(239, 106, 82, 0.08);
}

.browser-note[hidden] {
  display: none;
}

.browser-note p {
  margin: 0;
  color: #7a4a40;
  font-size: 0.84rem;
}

.browser-note .button-quiet {
  min-height: 38px;
  border: 1px solid rgba(122, 74, 64, 0.4);
  color: #7a4a40;
}

/* Camera switching */

.camera-flip {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  font-size: 0.72rem;
  font-weight: 800;
}

.camera-flip[hidden] {
  display: none;
}

.camera-flip:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.6);
}

/* Permission recovery guidance */

.permission-help {
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  font-size: 0.82rem;
}

.permission-help[hidden] {
  display: none;
}

.permission-help summary {
  color: var(--ink);
  font-weight: 800;
}

.permission-help ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}

.permission-help li {
  margin-bottom: 6px;
}

.sticker-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sticker-chip {
  display: grid;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  place-items: center;
}

.sticker-chip:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.sticker-chip img {
  width: 34px;
  height: 34px;
  pointer-events: none;
}

.sticker-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
}

/* Sticker toolbar under the stage, next to the export bar */

.sticker-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 10px;
}

.sticker-toolbar[hidden] {
  display: none;
}

.sticker-toolbar .micro-label {
  margin: 0;
}

.sticker-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Sticker overlay on the stage preview */

.sticker-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* Blank overlay space must fall through to the frame editor, while each
     sticker remains independently targetable above that canvas. */
  pointer-events: none;
}

.sticker-item {
  position: absolute;
  z-index: 2;
  border-radius: 10px;
  cursor: grab;
  line-height: 0;
  touch-action: none;
  pointer-events: auto;
}

.sticker-item:active {
  cursor: grabbing;
}

.sticker-item img {
  display: inline-block;
  max-width: none;
  pointer-events: none;
}

.sticker-item.is-selected {
  outline: 2px dashed rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}

@media print {
  .sticker-layer {
    display: none;
  }
}