:root {
  --bg-page: #fafafa;
  --bg-muted: #f4f4f5;
  --bg-subtle: #fafafa;
  --bg-white: #ffffff;
  --border-default: #e4e4e7;
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --neutral-1: #fafafa;

  --font-heading: 'Inter', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: 'Noto Sans Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

.content-column {
  box-sizing: content-box;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 50px 50px;
  border-left: 1px solid var(--border-default);
  border-right: 1px solid var(--border-default);
  min-height: 100vh;
}

/* ---------- Header ---------- */

.page-header {
  position: relative;
  padding: 50px 0 24px;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: var(--border-default);
}

.wordmark {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 900;
  font-size: 32px;
  line-height: 38.4px;
  letter-spacing: -0.16px;
  margin: 0 0 12px;
  color: var(--text-primary);
}

.intro {
  margin: 0;
  font-size: 17px;
  line-height: 23.8px;
  letter-spacing: -0.017px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* ---------- Grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 392px;
  gap: 8px;
  margin-top: 24px;
}

.box {
  background: var(--bg-muted);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  padding: 8px;
}

.box-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.box-canvas {
  flex: none;
  height: 260px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.box-caption {
  flex: 1 1 auto;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: 0 0 8px 8px;
  padding: 10px 10px 32px;
}

.box-caption p {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* ---------- Footer ---------- */

.page-footer {
  margin-top: 50px;
  text-align: center;
}

.page-footer p {
  margin: 0;
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 300;
  color: var(--text-secondary);
}

/* ---------- Shared buttons & icons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  gap: 4px;
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .2s ease, transform .12s ease;
}

.btn:active { transform: scale(0.97); }

.btn-fixed { width: 124px; }

.btn-dark {
  background: var(--text-primary);
  color: var(--neutral-1);
}

.btn-dark:hover { background: #27272a; }

.icon { display: block; flex: none; }
.icon-14 { width: 14px; height: 14px; }
.icon-16 { width: 16px; height: 16px; }

.icon-swap {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
}

.icon-swap .icon {
  position: absolute;
  inset: 0;
  transition: opacity .22s ease, transform .22s ease;
}

/* Explicit from/to keeps this a rotation interpolation — a lone `to` frame
   matrix-interpolates against the element's own transform and renders static. */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ================= Box 1: photo hover scatter ================= */

.photo-stack {
  position: relative;
  width: 100px;
  height: 120px;
}

/* Invisible hit area covering the fanned-out photos, so hovering a spread
   photo doesn't fall outside the stack and collapse it. */
.photo-stack::before {
  content: '';
  position: absolute;
  inset: -10px -66px;
}

.photo {
  position: absolute;
  inset: 0;
  width: 100px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  transition: transform .5s cubic-bezier(.34,1.4,.64,1);
  will-change: transform;
}

.photo-mountain { transform: translate(11.4px, -4px) rotate(5deg); z-index: 1; }
.photo-jungle { transform: translate(-9px, 4.85px) rotate(-5deg); z-index: 2; }
.photo-sea { transform: translate(0, 0) rotate(0deg); z-index: 3; }

.photo-stack.spread .photo-mountain { transform: translate(64px, 0) rotate(5deg); }
.photo-stack.spread .photo-jungle { transform: translate(-64px, 0) rotate(-5deg); }
.photo-stack.spread .photo-sea { transform: translate(0, -7px) rotate(-1.5deg) scale(1.03); }

/* ================= Box 2: coupon tear ================= */

.coupon { display: block; line-height: 0; }

.coupon-svg {
  display: block;
  width: 276px;
  height: 120px;
  max-width: 100%;
  overflow: visible;
}

.coupon-half {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}

.coupon.torn .coupon-half-left { transform: translate(-7px, 9px) rotate(-4.5deg); }
.coupon.torn .coupon-half-right { transform: translate(7px, 7px) rotate(4deg); }

.coupon-off {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.108px;
  fill: var(--text-primary);
}

.coupon-off-label {
  font-weight: 300;
  font-size: 24px;
  fill: var(--text-secondary);
}

.coupon-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.011px;
  fill: var(--text-secondary);
}

/* ================= Box 3: confetti rain ================= */

.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  will-change: transform, opacity;
}

/* ================= Box 4: randomize ================= */

.function-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 43px;
  padding: 5px;
  background: var(--bg-white);
  border: 1px solid var(--border-default);
  border-radius: 10px;
}

.result-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  height: 31px;
  padding: 0 8px;
  background: var(--bg-muted);
  border-radius: 8px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.btn-randomize {
  height: 31px;
  font-size: 11px;
  line-height: 15.4px;
  letter-spacing: 0.011px;
}

.icon-refresh { opacity: 1; transform: scale(1) rotate(0deg); }
.icon-check-circle { opacity: 0; transform: scale(.4) rotate(-40deg); }

.icon-refresh.spinning { animation: spin .55s linear infinite; }

.icon-swap.done .icon-refresh { opacity: 0; transform: scale(.4) rotate(40deg); }
.icon-swap.done .icon-check-circle { opacity: 1; transform: scale(1) rotate(0deg); }

/* ================= Box 5: pills ================= */

.pills {
  position: relative;
  display: inline-flex;
  gap: 4px;
}

.pill-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  width: 80px;
  border-radius: 20px;
  background: var(--text-primary);
  z-index: 1;
  transition: transform .22s cubic-bezier(.3,.9,.3,1), width .22s cubic-bezier(.3,.9,.3,1);
}

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  gap: 4px;
  width: 80px;
  height: 32px;
  border-radius: 20px;
  background: var(--bg-white);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  transition: color .15s ease;
}

.pill > * { position: relative; z-index: 2; }

.pill.active { color: var(--bg-white); }

/* ================= Box 6: radial menu ================= */

.radial-menu {
  position: relative;
  width: 32px;
  height: 32px;
}

.dot-btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot-main { z-index: 2; }

.dot-main.pressed { animation: dotPress .3s cubic-bezier(.34,1.56,.64,1); }

@keyframes dotPress {
  0% { transform: scale(1); }
  40% { transform: scale(0.86); }
  100% { transform: scale(1); }
}

.dot-main .icon { position: absolute; transition: opacity .25s ease, transform .3s ease; }
.dot-main .icon-x { opacity: 0; transform: rotate(-45deg) scale(.5); }
.dot-main .icon-plus { opacity: 1; transform: rotate(0deg) scale(1); }
.dot-main.open .icon-plus { opacity: 0; transform: rotate(45deg) scale(.5); }
.dot-main.open .icon-x { opacity: 1; transform: rotate(0deg) scale(1); }

.dot-satellite {
  z-index: 1;
  opacity: 0;
  transform: translate(0, 0) scale(.3);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  pointer-events: none;
}

.radial-menu.open .dot-satellite {
  opacity: 1;
  transform: translate(var(--dx), var(--dy)) scale(1);
  pointer-events: auto;
}

#satFile { --dx: -40px; --dy: -22px; }
#satImage { --dx: 0px; --dy: -44px; }
#satFilm { --dx: 40px; --dy: -22px; }

.radial-menu.open #satFile { transition-delay: 0s; }
.radial-menu.open #satImage { transition-delay: .05s; }
.radial-menu.open #satFilm { transition-delay: .1s; }
.radial-menu:not(.open) #satFile { transition-delay: .1s; }
.radial-menu:not(.open) #satImage { transition-delay: .05s; }
.radial-menu:not(.open) #satFilm { transition-delay: 0s; }

/* ================= Box 7: install ================= */

#installBtn { gap: 0; }

.icon-swap-collapsible {
  width: 0;
  margin-right: 0;
  transition: width .22s ease, margin-right .22s ease;
}

.icon-swap-collapsible.state-installing,
.icon-swap-collapsible.state-installed {
  width: 14px;
  margin-right: 4px;
}

.icon-spinner, .icon-check { opacity: 0; transform: scale(.5); }

.icon-swap.state-installing .icon-spinner {
  opacity: 1;
  transform: scale(1);
  animation: spin .7s linear infinite;
}

.icon-swap.state-installed .icon-check { opacity: 1; transform: scale(1); }

/* ================= Box 8: translate dissolve ================= */

.translate-block {
  width: 213px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.translate-text {
  margin: 0 0 24px;
  /* Both languages settle at 4 lines; fixing the height keeps the button
     still while characters scramble through. */
  height: 88px;
  overflow: hidden;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* ---------- Small screens ---------- */

@media (max-width: 820px) {
  .content-column {
    max-width: none;
    padding: 0 20px 40px;
    border-left: none;
    border-right: none;
  }
  .grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .box-caption { min-height: 106px; }
  .page-header { padding-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .photo, .coupon-half, .pill-indicator, .dot-satellite { transition: none; }
}