:root {
  --blue: #0632b8;
  --navy: #001b5e;
  --yellow: #fff56a;
  --orange: #ff6500;
  --pink: #eb59ff;
  --cyan: #00bfe8;
  --paper: #f7f4ed;
  --ink: #111111;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; background: var(--paper); }
body { overflow: hidden; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
button, input, select, textarea { font: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.sticker-wall-app { position: relative; width: 100vw; height: 100svh; min-height: 540px; overflow: hidden; background: var(--paper); isolation: isolate; }
.smile-wall { position: absolute; inset: 0; overflow: hidden; overscroll-behavior: none; background: var(--paper); cursor: grab; touch-action: none; user-select: none; }
.smile-wall.is-panning { cursor: grabbing; }
.sticker-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }

.spread-sticker { position: absolute; top: 0; left: 0; z-index: 24; display: block; width: var(--size); height: var(--size); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--navy); cursor: pointer; touch-action: manipulation; transform: translate3d(var(--x, -9999px), var(--y, -9999px), 0) rotate(var(--turn)); will-change: transform; }
.spread-sticker img { display: block; width: 100%; height: 100%; border-radius: 50%; filter: drop-shadow(3px 4px 0 rgb(0 27 94 / .20)) drop-shadow(0 8px 9px rgb(0 27 94 / .13)); }

.spread-sticker::after { position: absolute; inset: 10%; display: grid; place-items: center; border-radius: 50%; background: rgb(255 245 106 / .92); box-shadow: inset 0 0 0 2px var(--navy); content: ""; }
.spread-sticker span { position: absolute; z-index: 1; top: 50%; left: 50%; width: 76%; color: var(--navy); font-size: clamp(11px, 1.5vw, 20px); font-weight: 900; letter-spacing: -.075em; line-height: .84; text-align: center; text-transform: lowercase; transform: translate(-50%, -50%) rotate(calc(var(--turn) * -1)); }
.spread-sticker span small { display: block; margin-top: .35em; color: var(--blue); font-size: .68em; letter-spacing: -.03em; }
.spread-sticker:hover { filter: brightness(1.04); transform: translate3d(var(--x), calc(var(--y) - 10px), 0) rotate(var(--turn)) scale(1.08); }
.spread-sticker:focus-visible { outline: 4px solid var(--pink); outline-offset: 6px; }

.order-dialog { width: min(650px, calc(100vw - 26px)); max-height: min(860px, calc(100svh - 26px)); padding: 0; overflow: auto; border: 0; border-radius: 31px; background: transparent; color: var(--navy); }
.order-dialog::backdrop { background: rgb(0 27 94 / .68); backdrop-filter: blur(4px); }
.order-sheet { position: relative; min-height: 100%; padding: clamp(30px, 5vw, 50px); border: 2px solid var(--navy); border-radius: 31px; background: var(--paper); box-shadow: 9px 10px 0 var(--navy); }
.order-close { position: absolute; top: 14px; right: 14px; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid rgb(0 27 94 / .28); border-radius: 50%; background: var(--paper); color: var(--navy); cursor: pointer; font-size: 27px; line-height: 1; }
.order-close:hover { background: var(--yellow); }
.order-close:focus-visible,
.order-submit:focus-visible,
.order-form :is(input, select, textarea):focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.order-eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.order-sheet h2,
.order-sheet h3 { max-width: 500px; margin: 0; font-size: clamp(37px, 6vw, 59px); font-weight: 900; letter-spacing: -.09em; line-height: .84; }
.order-sheet h3 { font-size: clamp(34px, 5vw, 48px); }
.order-intro { max-width: 510px; margin: 18px 0 26px; font-size: 16px; font-weight: 700; line-height: 1.35; }
.order-form { display: grid; grid-template-columns: minmax(0, 1fr) 138px; gap: 14px; }
.order-form label:not(.order-check) { display: grid; gap: 6px; }
.order-form label > span:not(.order-check span) { font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.order-form :is(input, select, textarea) { width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--navy); border-radius: 11px; background: #fffdf7; color: var(--ink); font-weight: 700; }
.order-form textarea { min-height: 90px; resize: vertical; }
.order-field-wide { grid-column: 1 / -1; }
.order-check { display: grid; grid-template-columns: 20px 1fr; gap: 9px; align-items: start; margin-top: 2px; color: var(--navy); font-size: 12px; font-weight: 700; line-height: 1.3; }
.order-check input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--blue); }
.order-submit { min-height: 49px; border: 1.5px solid var(--navy); border-radius: 999px; background: var(--yellow); box-shadow: 3px 4px 0 var(--navy); color: var(--navy); cursor: pointer; font-size: 13px; font-weight: 900; letter-spacing: -.02em; text-transform: lowercase; }
.order-submit:hover { transform: translate(-1px, -1px); box-shadow: 5px 6px 0 var(--navy); }
.order-privacy { margin: 18px 0 0; color: rgb(0 27 94 / .78); font-size: 11px; font-weight: 700; line-height: 1.35; }
.order-receipt { padding-top: 8px; }
.order-receipt p:last-child { max-width: 465px; margin: 17px 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.order-receipt[hidden], .order-form[hidden] { display: none; }

@media (max-width: 540px) {
  .sticker-wall-app { min-height: 500px; }
  .order-dialog { width: min(100vw - 18px, 650px); max-height: calc(100svh - 18px); }
  .order-sheet { padding: 34px 23px 25px; border-radius: 24px; box-shadow: 6px 7px 0 var(--navy); }
  .order-form { grid-template-columns: 1fr; }
  .order-form label { grid-column: 1 / -1; }
  .order-intro { padding-right: 12px; font-size: 14px; }
  .order-sheet h2 { max-width: 290px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .spread-sticker:hover { transform: translate3d(var(--x), var(--y), 0) rotate(var(--turn)); }
}