:root {
  --desk: #e7dccd;
  --desk-2: #dccdb9;
  --chrome: rgba(255, 252, 247, .88);
  --chrome-line: rgba(80, 55, 35, .14);
  --chrome-ink: #4a3426;
  --chrome-ink-soft: #8a7262;
  --accent: #c2546a;
  --ink: #3b2a20;
  --shadow: 0 30px 60px -25px rgba(60, 35, 15, .55), 0 12px 24px -12px rgba(60, 35, 15, .35);
  --ease-flip: cubic-bezier(.45, .05, .3, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #2a221d;
    --desk-2: #211a16;
    --chrome: rgba(48, 39, 33, .9);
    --chrome-line: rgba(255, 230, 205, .12);
    --chrome-ink: #f1e4d6;
    --chrome-ink-soft: #b8a493;
    --shadow: 0 30px 60px -25px rgba(0, 0, 0, .8), 0 12px 24px -12px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  --desk: #2a221d; --desk-2: #211a16; --chrome: rgba(48, 39, 33, .9);
  --chrome-line: rgba(255, 230, 205, .12); --chrome-ink: #f1e4d6; --chrome-ink-soft: #b8a493;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: Nunito, system-ui, sans-serif;
  color: var(--chrome-ink);
  background:
    radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0, 0, 0, .12) 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, var(--desk), var(--desk-2));
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- top bar ---------- */
#topbar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 16px 4px;
}
#pager {
  min-width: 150px; text-align: center;
  font-family: Caveat, cursive; font-size: 24px; font-weight: 700;
  color: var(--chrome-ink);
}
.nav {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--chrome-line); background: var(--chrome);
  cursor: pointer; transition: transform .15s, opacity .2s;
}
.nav:hover:not(:disabled) { transform: scale(1.08); }
.nav:disabled { opacity: .3; cursor: default; }

/* ---------- book ---------- */
#stage {
  flex: 1; min-height: 0;
  display: grid; place-items: center;
  padding: 12px 24px 104px;
}
.book {
  position: relative;
  width: min(100%, calc((100dvh - 190px) * 1.5));
  aspect-ratio: 3 / 2;
  perspective: 2600px;
  transition: transform .7s var(--ease-flip);
}
.book.closed { transform: translateX(-25%); }
.book.single {
  width: min(100%, calc((100dvh - 200px) * .75));
  aspect-ratio: 3 / 4;
}
.book.single.closed { transform: none; }
.slot { position: absolute; top: 0; height: 100%; width: 50%; z-index: 1; }
.slot.left { left: 0; }
.slot.right { left: 50%; }
.single .slot.left { display: none; }
.single .slot.right { left: 0; width: 100%; }

/* ---------- pages ---------- */
.page {
  position: relative;
  width: 100%; height: 100%;
  container-type: size;
  background-color: #fbf6ec;
  box-shadow: var(--shadow);
  user-select: none;
  -webkit-user-select: none;
}
.side-left .page { border-radius: 6px 0 0 6px; }
.side-right .page { border-radius: 0 6px 6px 0; }
.single .side-right .page { border-radius: 6px; }
.page::before { /* paper grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page::after { /* gutter shade, sits above items */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 100000; border-radius: inherit;
}
.side-left .page::after { background: linear-gradient(to left, rgba(70, 45, 20, .22), rgba(70, 45, 20, 0) 7%); }
.side-right .page::after { background: linear-gradient(to right, rgba(70, 45, 20, .26), rgba(70, 45, 20, 0) 7%); }
.single .side-right .page::after { background: linear-gradient(to right, rgba(70, 45, 20, .14), rgba(70, 45, 20, 0) 4%); }
.page.active { box-shadow: var(--shadow), inset 0 0 0 2px rgba(194, 84, 106, .28); }
.single .page.active, .cover.active { box-shadow: var(--shadow); }

.paper-cream { background-color: #fbf6ec; }
/* ---------- page themes ---------- */
.paper-rainbow { background: linear-gradient(165deg, #ffd1dc 0%, #ffe2c6 20%, #fff4b8 38%, #d6f5d2 56%, #cfe8ff 74%, #e6d6ff 100%); }
.paper-sunset { background: linear-gradient(180deg, #ffe3b3 0%, #ffc4a8 40%, #f7a8b8 70%, #cdb4db 100%); }
.paper-ocean { background: linear-gradient(180deg, #e3f6ff 0%, #b9e3ef 45%, #8fc9dc 80%, #74b4cf 100%); }
.paper-starry, .paper-galaxy { --star: #fff; }
.paper-starry {
  background:
    radial-gradient(circle at 12% 18%, var(--star) 0 .35cqi, transparent .5cqi) 0 0 / 28cqi 28cqi,
    radial-gradient(circle at 63% 41%, var(--star) 0 .25cqi, transparent .4cqi) 0 0 / 28cqi 28cqi,
    radial-gradient(circle at 37% 77%, #fde68a 0 .45cqi, transparent .6cqi) 0 0 / 28cqi 28cqi,
    radial-gradient(circle at 85% 88%, var(--star) 0 .2cqi, transparent .35cqi) 0 0 / 28cqi 28cqi,
    linear-gradient(180deg, #1b2547 0%, #2c3a6b 60%, #45508a 100%);
}
.paper-galaxy {
  background:
    radial-gradient(circle at 20% 30%, var(--star) 0 .3cqi, transparent .45cqi) 0 0 / 24cqi 24cqi,
    radial-gradient(circle at 70% 65%, #f9c6ff 0 .35cqi, transparent .5cqi) 0 0 / 24cqi 24cqi,
    radial-gradient(ellipse at 30% 30%, rgba(236, 72, 153, .45), transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(99, 102, 241, .5), transparent 55%),
    linear-gradient(160deg, #1e1035, #2e1a55 50%, #12142e);
}
.paper-confetti {
  background:
    radial-gradient(circle at 15% 20%, #f9a8d4 0 1.2cqi, transparent 1.3cqi) 0 0 / 22cqi 22cqi,
    radial-gradient(circle at 60% 35%, #93c5fd 0 1cqi, transparent 1.1cqi) 0 0 / 22cqi 22cqi,
    radial-gradient(circle at 35% 70%, #fde047 0 1.1cqi, transparent 1.2cqi) 0 0 / 22cqi 22cqi,
    radial-gradient(circle at 85% 80%, #86efac 0 .9cqi, transparent 1cqi) 0 0 / 22cqi 22cqi,
    radial-gradient(circle at 80% 10%, #c4b5fd 0 .8cqi, transparent .9cqi) 0 0 / 22cqi 22cqi,
    #fffaf3;
}
.paper-polka { background: radial-gradient(circle, #f7bfd0 0 1.6cqi, transparent 1.7cqi) 0 0 / 10cqi 10cqi, radial-gradient(circle, #f7bfd0 0 1.6cqi, transparent 1.7cqi) 5cqi 5cqi / 10cqi 10cqi, #fff4f7; }
.paper-gingham {
  background:
    linear-gradient(90deg, rgba(240, 150, 175, .38) 50%, transparent 50%) 0 0 / 8cqi 8cqi,
    linear-gradient(rgba(240, 150, 175, .38) 50%, transparent 50%) 0 0 / 8cqi 8cqi,
    #fff8fa;
}
.paper-candy { background: repeating-linear-gradient(45deg, #ffe0ea 0 4cqi, #fffafc 4cqi 8cqi); }
.paper-mint-stripe { background: repeating-linear-gradient(90deg, #dff5ea 0 5cqi, #fbfffd 5cqi 10cqi); }
.paper-hearts {
  background: #fff1f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M10 13c0-3 4-4 5-1 1-3 5-2 5 1 0 3-5 6-5 6s-5-3-5-6z' fill='%23f6b3c6'/%3E%3Cpath d='M28 31c0-2.2 3-3 3.8-.8.8-2.2 3.8-1.4 3.8.8 0 2.2-3.8 4.5-3.8 4.5S28 33.2 28 31z' fill='%23fbd0dc'/%3E%3C/svg%3E") 0 0 / 14cqi 14cqi;
}
.paper-clouds {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 60'%3E%3Cpath d='M8 24h22a5.5 5.5 0 0 0 0-11 8 8 0 0 0-15-2.5A6.8 6.8 0 0 0 8 24z' fill='%23fff'/%3E%3Cpath d='M44 52h20a5 5 0 0 0 0-10 7.2 7.2 0 0 0-13.5-2.3A6 6 0 0 0 44 52z' fill='%23fff' opacity='.85'/%3E%3C/svg%3E") 0 0 / 34cqi 26cqi,
    linear-gradient(180deg, #cfe6fa, #e8f4fd);
}
.paper-lavender {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(216, 180, 254, .7), transparent 50%),
    radial-gradient(ellipse at 85% 60%, rgba(251, 207, 232, .7), transparent 50%),
    radial-gradient(ellipse at 30% 95%, rgba(196, 181, 253, .6), transparent 50%),
    #f8f3ff;
}
.paper-peach { background: radial-gradient(circle at 30% 20%, #fff4ea 0%, #ffe0c7 50%, #ffcfae 100%); }
.paper-watercolor {
  background:
    radial-gradient(ellipse 45% 35% at 20% 25%, rgba(249, 168, 212, .45), transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(147, 197, 253, .45), transparent 70%),
    radial-gradient(ellipse 45% 35% at 35% 80%, rgba(253, 230, 138, .5), transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 85%, rgba(167, 243, 208, .5), transparent 70%),
    #fffdf9;
}
.paper-baby-steps {
  background: #fff7fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3Cg id='f'%3E%3Cpath d='M4.2 7.5c3 0 4.3 3.2 4 6.3-.3 2.5-1.3 3.8-1.3 6 0 1.8-1 3.2-2.8 3.2S1 21.6 1.2 19.6c.2-2.2 1.1-3.1.6-5.8C1.3 11 1.6 7.5 4.2 7.5z'/%3E%3Ccircle cx='1.4' cy='5' r='1.25'/%3E%3Ccircle cx='3.6' cy='3.4' r='1.1'/%3E%3Ccircle cx='5.8' cy='3.1' r='1'/%3E%3Ccircle cx='7.6' cy='3.9' r='.9'/%3E%3Ccircle cx='9' cy='5.4' r='.8'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23f9c5d5'%3E%3Cuse href='%23f' transform='translate(8 6) rotate(-14)'/%3E%3Cuse href='%23f' transform='translate(26 12) rotate(14) scale(-1 1)'/%3E%3Cuse href='%23f' transform='translate(38 36) rotate(-14)'/%3E%3Cuse href='%23f' transform='translate(56 42) rotate(14) scale(-1 1)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 22cqi 22cqi;
}
.paper-starry .folio, .paper-galaxy .folio { color: rgba(255, 255, 255, .55); }
.paper-starry .hint, .paper-galaxy .hint { color: rgba(255, 255, 255, .5); }

/* photo covers: a soft dark glow behind the title so it reads on any picture */
.cover.has-bg .cover-head {
  padding: 5cqi 4cqi; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20, 10, 10, .5), rgba(20, 10, 10, .25) 55%, transparent 72%);
  color: #fff8ec; text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}
.cover.has-bg .cover-frame { color: #fff8ec; opacity: .7; }
/* the glow follows each word (words can be dragged apart), so no shared backdrop */
.cover.has-bg .cover-head { background: none; text-shadow: 0 0 6px rgba(20, 10, 10, .75), 0 2px 14px rgba(20, 10, 10, .55); }
.cover.has-bg .cover-head.dark-ink { text-shadow: 0 0 5px rgba(255, 255, 255, .9), 0 0 16px rgba(255, 255, 255, .7); }
/* photo blended into the cover color: brightened so a light gray backdrop turns into the cover color itself */
.cover-photo-layer {
  background-size: cover; background-position: center; background-repeat: no-repeat;
  mix-blend-mode: multiply; filter: brightness(1.13) contrast(1.04);
}
.cover.blend-photo .cover-frame { color: var(--cv-ink); }
.cover.has-bg::before { opacity: .6; }
.cover-photos .swatch-img { width: 52px; height: 52px; }
.page-bg { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; }
.page.has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }
.paper-lined {
  background-color: #fbf8f1;
  background-image:
    linear-gradient(to right, transparent 11%, #efb6b6 11%, #efb6b6 calc(11% + 1.5px), transparent calc(11% + 1.5px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), #cddbe9 calc(100% - 1px));
  background-size: 100% 100%, 100% 4.6cqh;
  background-position: 0 0, 0 3cqh;
}
.paper-grid {
  background-color: #fbfaf5;
  background-image:
    linear-gradient(to right, #dfe6ea 1px, transparent 1px),
    linear-gradient(to bottom, #dfe6ea 1px, transparent 1px);
  background-size: 6cqi 6cqi;
}
.paper-dots {
  background-color: #fbf7ef;
  background-image: radial-gradient(circle, #cdbfa9 1.1px, transparent 1.6px);
  background-size: 5cqi 5cqi;
}
.paper-kraft {
  background-color: #d6b48a;
  background-image: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .18), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(90, 50, 10, .12), transparent 55%);
}
.paper-blush { background-color: #f7e2df; }
.paper-sage { background-color: #e2e9d8; }
.paper-sky { background-color: #e1e9f2; }

.folio {
  position: absolute; bottom: 2.2cqh; left: 0; right: 0; text-align: center;
  font-family: Caveat, cursive; font-size: 4.4cqi; color: rgba(59, 42, 32, .45);
  pointer-events: none;
}
.hint {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 1cqh;
  text-align: center; padding: 10cqi; pointer-events: none;
  font-family: Caveat, cursive; font-size: 6cqi; line-height: 1.15; color: rgba(59, 42, 32, .38);
}
.hint small { font-size: .62em; }
.blank { display: grid; place-items: center; }
.blank-add {
  position: relative; z-index: 2;
  border: 2px dashed rgba(59, 42, 32, .25); background: transparent; border-radius: 14px;
  padding: 3cqi 6cqi; cursor: pointer;
  font-family: Caveat, cursive; font-size: 6cqi; color: rgba(59, 42, 32, .55);
  transition: background .2s, border-color .2s;
}
.blank-add:hover { background: rgba(255, 255, 255, .5); border-color: var(--accent); color: var(--accent); }

/* ---------- cover ---------- */
.cover {
  --cv: #7a2e3a; --cv-ink: #f3dfb5;
  background-color: var(--cv);
  background-image:
    radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, .14), transparent 55%),
    radial-gradient(ellipse at 75% 85%, rgba(0, 0, 0, .22), transparent 60%);
  color: var(--cv-ink);
  border-radius: 4px 12px 12px 4px !important;
}
.cover::before { opacity: 2.2; }
.cover::after { background: linear-gradient(to right, rgba(0, 0, 0, .32), rgba(0, 0, 0, 0) 5%, rgba(255, 255, 255, .06) 6%, transparent 9%) !important; }
.cover-burgundy { --cv: #7a2e3a; --cv-ink: #f3dfb5; }
.cover-navy { --cv: #25344c; --cv-ink: #ecd9b0; }
.cover-forest { --cv: #2f4a3a; --cv-ink: #efe0bd; }
.cover-kraft { --cv: #b98b5e; --cv-ink: #3b2414; }
.cover-blush { --cv: #e7b2ad; --cv-ink: #6d2a35; }
.cover-frame {
  position: absolute; inset: 6cqi; border: 1.5px solid currentColor; border-radius: 10px; opacity: .45; pointer-events: none;
}
.cover-frame::after { content: ""; position: absolute; inset: 1.4cqi; border: 1px solid currentColor; border-radius: 7px; opacity: .6; }
.cover-head {
  position: absolute; left: 12%; right: 12%; top: 17%;
  display: flex; flex-direction: column; align-items: center; gap: 2.4cqi; text-align: center;
}
.cover-field { outline: none; border-radius: 6px; min-width: 2em; padding: 0 .15em; cursor: text; user-select: text; -webkit-user-select: text; }
.cover-field:hover, .cover-field:focus { background: rgba(255, 255, 255, .1); }
.cover-field:empty::before { content: attr(data-ph); opacity: .45; }
.cover-head [data-move] { cursor: move; position: relative; touch-action: none; }
.cover-head [data-move]:focus { cursor: text; }
.cover-head [data-move].moving { outline: 1.5px dashed currentColor; outline-offset: 4px; background: rgba(255, 255, 255, .08); }
.cover-rule[data-move]::after { content: ""; position: absolute; inset: -10px -4px; } /* easier to grab the thin line */
.reset-words {
  margin-top: 10px; width: 100%; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  border: 1px dashed var(--chrome-line); background: transparent; color: var(--chrome-ink); font-size: 12.5px; font-weight: 800;
}
.reset-words:hover { border-color: var(--accent); color: var(--accent); }
.cover-title { font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 500; font-size: 10.5cqi; line-height: 1.05; }
.cover-names { font-family: Caveat, cursive; font-weight: 700; font-size: 8.5cqi; line-height: 1; }
.cover-rule { width: 30%; height: 1px; background: currentColor; opacity: .5; }
.cover-since { font-size: 3.4cqi; letter-spacing: .28em; text-transform: uppercase; font-weight: 800; opacity: .85; }

/* ---------- items ---------- */
.item {
  position: absolute;
  container-type: inline-size;
  touch-action: none;
  cursor: grab;
  transform-origin: 50% 50%;
}
.item.dragging { cursor: grabbing; }
.item.dragging > :not(.h) { filter: drop-shadow(0 14px 14px rgba(60, 35, 15, .28)); }
.item.selected { outline: 1.5px dashed rgba(194, 84, 106, .9); outline-offset: 7px; }

.editable { outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.editable.editing { cursor: text; user-select: text; -webkit-user-select: text; }
.item .editable:empty::before { content: attr(data-ph); opacity: .4; }
.item-photo .caption:empty::before { content: ""; }
.item-photo.selected .caption:empty::before, .item-photo .caption.editing:empty::before { content: attr(data-ph); }

/* photo frames — default is the polaroid */
.photo-frame {
  position: relative;
  background: var(--fc, #fffdf8);
  padding: 4.5cqi 4.5cqi 3cqi;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 10px 18px -8px rgba(60, 35, 15, .45);
}
.photo-frame .ph { position: relative; }
.photo-frame img, .photo-frame .mock {
  display: block; width: 100%; object-fit: cover; background: #e9e1d4;
  -webkit-user-drag: none; pointer-events: none;
}
.photo-frame img.missing { aspect-ratio: 1; }
.photo-frame .mock { aspect-ratio: 4 / 3; background: linear-gradient(160deg, #f4c7b8, #b9d3ea 70%, #d8e8c8); }
.photo-frame .fx { position: absolute; inset: 0; pointer-events: none; }

.frame-snapshot { padding: 3cqi 3cqi 1.5cqi; border-radius: 1.2cqi; }
.frame-snapshot .caption { margin-top: 1.5cqi; font-size: 8cqi; }

.frame-scallop {
  --r: 2.4cqi;
  background: var(--fc, #fffaf0); padding: 7cqi 7cqi 4cqi; box-shadow: none;
  -webkit-mask: radial-gradient(var(--r), #000 97%, #0000) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round,
    linear-gradient(#000 0 0) var(--r) var(--r) / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat;
  mask: radial-gradient(var(--r), #000 97%, #0000) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round,
    linear-gradient(#000 0 0) var(--r) var(--r) / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat;
}
.item-photo:has(.frame-scallop) { filter: drop-shadow(0 6px 7px rgba(60, 35, 15, .32)); }
.frame-scallop .ph { box-shadow: 0 0 0 1px rgba(90, 60, 30, .12); }

.frame-corners, .frame-heart, .frame-oval, .frame-none { background: transparent; padding: 0; box-shadow: none; }
.frame-corners .caption, .frame-heart .caption, .frame-oval .caption, .frame-none .caption { margin-top: 3.5cqi; }
.frame-corners .ph { box-shadow: 0 8px 14px -8px rgba(60, 35, 15, .5); }
.frame-corners .fx {
  inset: -1.6cqi;
  background:
    linear-gradient(135deg, var(--fc, #2c2420) 0 50%, transparent 50%) top left / 13cqi 13cqi no-repeat,
    linear-gradient(225deg, var(--fc, #2c2420) 0 50%, transparent 50%) top right / 13cqi 13cqi no-repeat,
    linear-gradient(45deg, var(--fc, #2c2420) 0 50%, transparent 50%) bottom left / 13cqi 13cqi no-repeat,
    linear-gradient(315deg, var(--fc, #2c2420) 0 50%, transparent 50%) bottom right / 13cqi 13cqi no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
}

.frame-taped { padding: 1.8cqi 1.8cqi 1cqi; }
.frame-taped::before, .frame-taped::after {
  content: ""; position: absolute; z-index: 2; top: -2.5cqi; width: 28cqi; height: 8cqi;
  background: rgba(247, 236, 196, .8); box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.frame-taped::before { left: -9cqi; transform: rotate(-38deg); }
.frame-taped::after { right: -9cqi; transform: rotate(38deg); }
.frame-taped .caption { margin-top: 1.4cqi; font-size: 8cqi; }

.frame-wood {
  padding: 6.5cqi 6.5cqi 4cqi; border-radius: .8cqi;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .14), transparent 18%, rgba(255, 255, 255, .08) 50%, transparent 82%, rgba(0, 0, 0, .16)),
    repeating-linear-gradient(8deg, #8a5a33 0 1.2cqi, #7a4d2a 1.2cqi 2cqi, #96673e 2cqi 3.4cqi);
  box-shadow: inset 0 0 0 .8cqi rgba(255, 255, 255, .07), inset 0 0 2.5cqi rgba(0, 0, 0, .5), 0 10px 18px -8px rgba(40, 20, 5, .65);
}
.frame-wood .ph { box-shadow: 0 0 0 .7cqi #4a2c15; }
.frame-wood .fx { box-shadow: inset 0 0 3cqi rgba(0, 0, 0, .45); }
.frame-wood .caption { color: #f6e7cf; }

.frame-gold {
  padding: 5cqi 5cqi 3.5cqi;
  background: linear-gradient(135deg, #a8762a, #f4d98b 25%, #b98a32 50%, #f7df99 75%, #9b6a1f);
  box-shadow: inset 0 0 0 .7cqi rgba(255, 240, 200, .5), inset 0 0 0 1.6cqi rgba(120, 80, 20, .3), 0 10px 18px -8px rgba(60, 35, 5, .6);
}
.frame-gold .ph { border: 3cqi solid #fbf5e6; box-shadow: 0 0 0 .5cqi #8a6420; }
.frame-gold .caption { color: #4a3410; }

.frame-black { background: var(--fc, #1f1c1a); padding: 3.5cqi 3.5cqi 2.5cqi; }
.frame-black .ph { border: 6cqi solid #f8f5ef; }
.frame-black .caption { color: #f1ebe2; }

.item-photo:has(.frame-heart), .item-photo:has(.frame-oval) { filter: drop-shadow(0 8px 9px rgba(60, 35, 15, .35)); }
.frame-heart .ph {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 95C20 73 2 55 2 31 2 15 14 4 28 4c10 0 18 6 22 14C54 10 62 4 72 4c14 0 26 11 26 27 0 24-18 42-48 64z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 95C20 73 2 55 2 31 2 15 14 4 28 4c10 0 18 6 22 14C54 10 62 4 72 4c14 0 26 11 26 27 0 24-18 42-48 64z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.frame-heart img, .frame-heart .mock { aspect-ratio: 1 !important; }
.frame-oval .ph { border-radius: 50%; overflow: hidden; border: 3cqi solid #fffaf0; box-shadow: 0 0 0 1cqi var(--fc, #e3c27a); }
/* captions stay readable on whatever frame color was picked */
.photo-frame[style*="--fc"]:not(.frame-wood):not(.frame-gold) .caption { color: var(--ink); }
.photo-frame.dark-frame[style*="--fc"]:not(.x):is(.frame-polaroid, .frame-snapshot, .frame-scallop, .frame-taped, .frame-black) .caption { color: #f6efe6; }
.frame-oval img, .frame-oval .mock { aspect-ratio: 4 / 5 !important; }
.frame-none .ph { border-radius: 1.2cqi; overflow: hidden; box-shadow: 0 10px 18px -8px rgba(60, 35, 15, .55); }
.caption {
  margin-top: 2.5cqi; min-height: 1.15em;
  font-family: Caveat, cursive; font-weight: 500; font-size: 9cqi; line-height: 1.1;
  text-align: center; color: var(--ink);
}

.note {
  position: relative;
  min-height: 100cqi;
  padding: 13cqi 10cqi 10cqi;
  font-family: Caveat, cursive; font-weight: 500; font-size: 11.5cqi; line-height: 1.12; color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 12px 16px -10px rgba(60, 35, 15, .5);
  background-image: linear-gradient(170deg, rgba(255, 255, 255, .35), transparent 40%);
}
.note::before { /* tape strip */
  content: ""; position: absolute; top: -4cqi; left: 30%; width: 40%; height: 11cqi;
  background: rgba(255, 255, 255, .55); box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transform: rotate(-3deg);
}

.text {
  font-family: Caveat, cursive; font-weight: 700; font-size: 13cqi; line-height: 1.05;
  padding: 1cqi 2cqi;
}

.sticker {
  font-size: 78cqi; line-height: 1.15; text-align: center;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 4px 5px rgba(60, 35, 15, .3));
}

/* stitched word label */
.badge {
  position: relative;
  padding: 4.5cqi 7cqi;
  border-radius: 6cqi;
  font-family: Fraunces, Georgia, serif; font-style: italic; font-weight: 500;
  font-size: 9.5cqi; line-height: 1.1; text-align: center; color: #4a2f2a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 14px -8px rgba(60, 35, 15, .45);
}
.badge::after {
  content: ""; position: absolute; inset: 2.2cqi; pointer-events: none;
  border: 1.5px dashed rgba(74, 47, 42, .35); border-radius: 4.5cqi;
}

.tape {
  aspect-ratio: 4.2 / 1;
  opacity: .86;
  clip-path: polygon(0 0, 100% 0, 98.5% 20%, 100% 40%, 98.5% 60%, 100% 80%, 98.5% 100%, 0 100%, 1.5% 80%, 0 60%, 1.5% 40%, 0 20%);
}
.tape-pink { background: repeating-linear-gradient(-45deg, #f6a9c1 0 6cqi, #fbd3df 6cqi 12cqi); }
.tape-mint { background: radial-gradient(circle, #ffffff 1.6cqi, transparent 2cqi) 0 0 / 7cqi 7cqi, #a8dcc6; }
.tape-sky {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .45) 50%, transparent 50%) 0 0 / 8cqi 8cqi,
    linear-gradient(rgba(255, 255, 255, .45) 50%, transparent 50%) 0 0 / 8cqi 8cqi,
    #9fc4e8;
}
.tape-lemon { background: repeating-linear-gradient(90deg, #f7dc7a 0 9cqi, #fbe9a8 9cqi 11cqi); }
.tape-lilac { background: repeating-linear-gradient(45deg, #c9b6ec 0 3cqi, #dccff4 3cqi 9cqi); }
.tape-kraft { background: #c9a578; opacity: .92; }
/* baby ribbons: little repeating SVG tiles, sized to the tape's height */
.tape-feet {
  opacity: .95;
  background: #fffdf9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cdefs%3E%3Cg id='f'%3E%3Cpath d='M4.2 7.5c3 0 4.3 3.2 4 6.3-.3 2.5-1.3 3.8-1.3 6 0 1.8-1 3.2-2.8 3.2S1 21.6 1.2 19.6c.2-2.2 1.1-3.1.6-5.8C1.3 11 1.6 7.5 4.2 7.5z'/%3E%3Ccircle cx='1.4' cy='5' r='1.25'/%3E%3Ccircle cx='3.6' cy='3.4' r='1.1'/%3E%3Ccircle cx='5.8' cy='3.1' r='1'/%3E%3Ccircle cx='7.6' cy='3.9' r='.9'/%3E%3Ccircle cx='9' cy='5.4' r='.8'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='%23f59bbb'%3E%3Cuse href='%23f' transform='translate(5 6) rotate(-12)'/%3E%3Cuse href='%23f' transform='translate(26 9) rotate(12) scale(-1 1)'/%3E%3C/g%3E%3Cg fill='%238fc3ec'%3E%3Cuse href='%23f' transform='translate(36 13) rotate(-12)'/%3E%3Cuse href='%23f' transform='translate(57 16) rotate(12) scale(-1 1)'/%3E%3C/g%3E%3Cg fill='%23fcd96b'%3E%3Ccircle cx='31' cy='6' r='1.3'/%3E%3Ccircle cx='3' cy='34' r='1.1'/%3E%3Ccircle cx='60' cy='5' r='1.1'/%3E%3C/g%3E%3C/svg%3E") 0 50% / auto 100% repeat-x;
}
.tape-stars {
  opacity: .95;
  background: #fffdf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cdefs%3E%3Cpath id='s' d='M5 0l1.5 3.3 3.5.4-2.6 2.4.7 3.5L5 7.9 1.9 9.6l.7-3.5L0 3.7l3.5-.4z' stroke-linejoin='round'/%3E%3C/defs%3E%3Cuse href='%23s' fill='%23fcd34d' transform='translate(4 6) scale(1.4)'/%3E%3Cuse href='%23s' fill='%23f9a8c9' transform='translate(24 20) scale(1.2) rotate(15 5 5)'/%3E%3Cuse href='%23s' fill='%2393c5fd' transform='translate(42 4) scale(1.1) rotate(-10 5 5)'/%3E%3Cuse href='%23s' fill='%23a7e3c4' transform='translate(50 24) scale(1.3)'/%3E%3Cuse href='%23s' fill='%23d8b4fe' transform='translate(10 27) scale(.8)'/%3E%3Cg fill='%23f5c6d6'%3E%3Ccircle cx='22' cy='9' r='1.1'/%3E%3Ccircle cx='38' cy='33' r='1.1'/%3E%3Ccircle cx='60' cy='15' r='.9'/%3E%3C/g%3E%3C/svg%3E") 0 50% / auto 100% repeat-x;
}
.tape-clouds {
  opacity: .95;
  background: #cfe6f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M5 21h17a4.5 4.5 0 0 0 0-9 6.5 6.5 0 0 0-12-2.2A5.6 5.6 0 0 0 5 21z' fill='%23fff'/%3E%3Cpath d='M36 34h15a4 4 0 0 0 0-8 5.8 5.8 0 0 0-10.8-2A5 5 0 0 0 36 34z' fill='%23fff'/%3E%3Cpath d='M47 5a6 6 0 1 0 6 8.5A5 5 0 1 1 47 5z' fill='%23fde68a'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='30' cy='8' r='1.1'/%3E%3Ccircle cx='60' cy='22' r='.9'/%3E%3Ccircle cx='16' cy='32' r='1'/%3E%3C/g%3E%3C/svg%3E") 0 50% / auto 100% repeat-x;
}
.tape-blocks {
  opacity: .95;
  background: #fffaf2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 40' font-family='Arial Rounded MT Bold,Arial,sans-serif' font-weight='700' font-size='13' text-anchor='middle' fill='%23fff'%3E%3Crect x='4' y='11' width='18' height='18' rx='3' fill='%23f9a8a8' transform='rotate(-6 13 20)'/%3E%3Ctext x='13' y='25' transform='rotate(-6 13 20)'%3EA%3C/text%3E%3Crect x='27' y='11' width='18' height='18' rx='3' fill='%2393c5fd' transform='rotate(5 36 20)'/%3E%3Ctext x='36' y='25' transform='rotate(5 36 20)'%3EB%3C/text%3E%3Crect x='50' y='11' width='18' height='18' rx='3' fill='%23a7e3c4' transform='rotate(-3 59 20)'/%3E%3Ctext x='59' y='25' transform='rotate(-3 59 20)'%3EC%3C/text%3E%3C/svg%3E") 0 50% / auto 100% repeat-x;
}

/* real lace, cut from photos (holes are transparent, so the page shows through) */
.tape[class*="tape-lace-"] {
  aspect-ratio: 7 / 1; opacity: 1; clip-path: none;
  background: transparent 0 50% / auto 100% repeat-x;
  filter: drop-shadow(0 1px 1px rgba(40, 25, 10, .25));
}
.tape-lace-black { background-image: url("tapes/lace-black.webp") !important; }
.tape-lace-pink { background-image: url("tapes/lace-pink.webp") !important; }
.tape-lace-gray { background-image: url("tapes/lace-gray.webp") !important; }
.tape-lace-white { background-image: url("tapes/lace-white.webp") !important; }
.tape-lace-wine { background-image: url("tapes/lace-wine.webp") !important; }
.tape-lace-blue { background-image: url("tapes/lace-blue.webp") !important; }
.swatch.tape[class*="tape-lace-"] { background-color: rgba(255, 255, 255, .12); }

/* rubber ducks with pink & blue hearts, like the baby ribbon */
.tape-duck {
  opacity: .95;
  background: #fffdf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cdefs%3E%3Cpath id='h' d='M0 2C0 0 3-1 4 1.5 5-1 8 0 8 2 8 5 4 7 4 7S0 5 0 2z'/%3E%3C/defs%3E%3Cuse href='%23h' x='4' y='5' fill='%23f78fb3'/%3E%3Cuse href='%23h' x='46' y='6' fill='%2390c6f0'/%3E%3Cuse href='%23h' x='52' y='27' fill='%23f78fb3' transform='rotate(12 56 30)'/%3E%3Cuse href='%23h' x='2' y='29' fill='%2390c6f0' transform='scale(.8) translate(0 8)'/%3E%3Cg stroke='%23d99a00' stroke-width='.8' stroke-linejoin='round'%3E%3Cpath d='M10 24l-4-6 7 2z' fill='%23ffd23f'/%3E%3Cellipse cx='21' cy='26' rx='12' ry='8' fill='%23ffd23f'/%3E%3Ccircle cx='28' cy='15' r='6.5' fill='%23ffd23f'/%3E%3Cpath d='M16 25q6-5 11 0-5 5-11 0z' fill='%23f5c000'/%3E%3Cpath d='M33.5 14.5q5-1.2 6.5.8-3 3.2-6.5 1.4z' fill='%23ff8a1c' stroke='%23d96a00'/%3E%3C/g%3E%3Ccircle cx='29.6' cy='13.4' r='1.2' fill='%23222'/%3E%3Ccircle cx='30' cy='13' r='.4' fill='%23fff'/%3E%3C/svg%3E") 0 50% / auto 100% repeat-x;
}

/* ---------- item handles ---------- */
.h {
  position: absolute; width: 30px; height: 30px; padding: 0;
  display: none; place-items: center;
  border-radius: 50%; border: 1px solid rgba(80, 55, 35, .2);
  background: #fffaf3; color: #4a3426;
  box-shadow: 0 4px 10px -4px rgba(60, 35, 15, .5);
  z-index: 3;
}
.h svg { width: 16px; height: 16px; }
.item.selected > .h { display: grid; }
.item.dragging > .h { display: none; }
.h-rot { top: -46px; left: 50%; margin-left: -15px; cursor: grab; }
.h-size { right: -17px; bottom: -17px; cursor: nwse-resize; }
.h-del { right: -17px; top: -17px; cursor: pointer; color: #b4233c; }
.h-color { left: -17px; top: -17px; cursor: pointer; }
.h-color i { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

/* ---------- page turn ---------- */
.leaf {
  position: absolute; top: 0; width: 50%; height: 100%;
  transform-style: preserve-3d; z-index: 10; pointer-events: none;
}
.leaf.fwd { left: 50%; transform-origin: left center; }
.leaf.back { left: 0; transform-origin: right center; }
.single .leaf { left: 0; width: 100%; transform-origin: left center; }
.leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf-face > div { height: 100%; }
.leaf-face.back { transform: rotateY(180deg); }
.leaf-face .page { overflow: hidden; }
.leaf-face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 100001;
  background: linear-gradient(to right, rgba(0, 0, 0, .18), transparent 30%, transparent 70%, rgba(0, 0, 0, .1));
  opacity: 0; animation: shade .7s var(--ease-flip);
}
@keyframes shade { 50% { opacity: 1; } }

/* ---------- toolbar ---------- */
#toolbar {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  max-width: calc(100vw - 32px); overflow-x: auto; scrollbar-width: none;
  padding: 6px; border-radius: 18px;
  background: var(--chrome); border: 1px solid var(--chrome-line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(40, 25, 10, .55);
  z-index: 20;
}
#toolbar::-webkit-scrollbar { display: none; }
#toolbar button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 58px; padding: 7px 8px 6px; border: 0; border-radius: 12px; background: transparent;
  cursor: pointer; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--chrome-ink);
  transition: background .15s, color .15s, opacity .15s;
}
#toolbar button:hover:not(:disabled), #toolbar button.on { background: rgba(194, 84, 106, .12); color: var(--accent); }
#toolbar button:disabled { opacity: .32; cursor: default; }
#toolbar button { position: relative; }
#toolbar button.unsaved::after { /* dot = changes not yet saved to the file */
  content: ""; position: absolute; top: 6px; right: 14px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--chrome);
}
#toolbar .sep { width: 1px; align-self: stretch; margin: 6px 4px; background: var(--chrome-line); flex: none; }

/* ---------- trays ---------- */
.tray {
  position: fixed; left: 50%; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 80px); transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); padding: 12px 14px 14px;
  background: var(--chrome); border: 1px solid var(--chrome-line); border-radius: 18px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -18px rgba(40, 25, 10, .55);
  z-index: 21;
  animation: pop .18s ease-out;
}
.tray[hidden] { display: none !important; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 8px); } }
.tray-label { margin: 2px 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--chrome-ink-soft); }
.tray-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tray-tabs button {
  border: 1px solid var(--chrome-line); background: transparent; border-radius: 999px;
  padding: 5px 12px; cursor: pointer; font-size: 12px; font-weight: 800; color: var(--chrome-ink-soft);
}
.tray-tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-row:not(:empty) { margin-top: 12px; }
.badge-row .badge {
  border: 0; cursor: pointer; padding: 6px 11px; border-radius: 8px;
  font-size: 13px; box-shadow: inset 0 0 0 1px rgba(74, 47, 42, .12);
  transition: transform .12s;
}
.badge-row .badge::after { inset: 3px; border-radius: 6px; border-width: 1px; }
.badge-row .badge:hover { transform: scale(1.06) rotate(-2deg); }
.tray-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.tray-grid button {
  height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  font-size: 26px; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  transition: transform .12s, background .12s;
}
.tray-grid button:hover { background: rgba(194, 84, 106, .1); transform: scale(1.15); }
.tray-row { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  container-type: inline-size;
  width: 64px; height: 42px; border-radius: 10px; cursor: pointer; padding: 0;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
  font-size: 10px; font-weight: 800; color: rgba(59, 42, 32, .7);
  display: grid; place-items: end center; padding-bottom: 3px;
}
.swatch.on { border-color: var(--accent); }
#paperTray { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 170px); overflow-y: auto; }
#paperTray .tray-label { margin-top: 12px; }
#paperTray .tray-label:first-child { margin-top: 2px; }
.theme-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.theme-swatch { width: auto; height: 54px; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 4px; }
.theme-swatch span {
  font-size: 9.5px; font-weight: 800; color: #4a3426; background: rgba(255, 255, 255, .82);
  padding: 1px 6px; border-radius: 6px; white-space: nowrap;
}
.cm-grid.page-colors { grid-template-columns: repeat(auto-fill, minmax(26px, 1fr)); gap: 6px; }
.swatch-img { background-size: cover; background-position: center; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.swatch-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0;
  background: transparent; border: 2px dashed var(--chrome-line); box-shadow: none;
  color: var(--chrome-ink-soft); text-transform: lowercase;
}
.swatch-upload svg { width: 16px; height: 16px; }
.swatch-upload:hover { border-color: var(--accent); color: var(--accent); }
.swatch.tape-swatch { width: 76px; height: 26px; border: 0; box-shadow: none; }
.swatch.cover { border-radius: 10px !important; color: var(--cv-ink); }

/* ---------- sticker tray: search + categories ---------- */
.tray.tray-wide { width: min(560px, calc(100vw - 32px)); display: flex; flex-direction: column; overflow: hidden; }
#stickerTray { max-height: min(560px, calc(100dvh - 170px)); }
.st-search {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 0 12px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, .55); border: 1px solid var(--chrome-line);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .st-search { background: rgba(0, 0, 0, .2); } }
.st-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(194, 84, 106, .15); }
.st-search svg { width: 18px; height: 18px; color: var(--chrome-ink-soft); }
.st-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--chrome-ink);
}
.st-search input::placeholder { color: var(--chrome-ink-soft); opacity: .8; }
.st-chips { display: flex; gap: 6px; flex: none; overflow-x: auto; scrollbar-width: none; padding: 10px 0 4px; }
.st-chips::-webkit-scrollbar { display: none; }
.st-chips button {
  flex: none; border: 1px solid var(--chrome-line); background: transparent; border-radius: 999px;
  padding: 5px 12px; cursor: pointer; font-size: 12px; font-weight: 800; color: var(--chrome-ink-soft);
  transition: background .15s, color .15s;
}
.st-chips button:hover { color: var(--accent); }
.st-chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.st-body { overflow-y: auto; min-height: 0; padding-bottom: 4px; }
#stickerTray .st-body .tray-label { margin-top: 12px; }
.st-sub { margin: 10px 2px 6px; font-size: 11px; font-weight: 800; color: var(--chrome-ink-soft); }
.st-body .tray-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
.st-art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.st-art {
  height: 74px; padding: 6px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .06); cursor: pointer;
  display: grid; place-items: center; transition: background .12s, transform .12s;
}
.st-art:hover { background: rgba(194, 84, 106, .12); transform: scale(1.04); }
.st-art img { max-width: 100%; max-height: 62px; object-fit: contain; display: block; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.sticker.sticker-art { filter: drop-shadow(0 6px 7px rgba(60, 35, 15, .28)); line-height: 0; }
.cm-motion-demo img { object-fit: contain; }
.st-anim img { width: 34px; height: 34px; display: block; margin: auto; pointer-events: none; }
.st-emoji.motion-bounce, .st-emoji[class*="motion-"] { animation-play-state: paused; }
.st-emoji[class*="motion-"]:hover { animation-play-state: running; }
.st-emoji[class*="motion-"]::after, .st-anim::after { /* small "plays" marker */
  content: ""; position: absolute; right: 4px; bottom: 4px; width: 6px; height: 7px;
  background: var(--accent); clip-path: polygon(0 0, 100% 50%, 0 100%); opacity: .75;
}
.tray-grid button { position: relative; }

/* ---------- ink stamps: no border, slightly patchy ink like a real rubber stamp ---------- */
.stamp { line-height: 0; mix-blend-mode: multiply; opacity: .9; }
.stamp svg {
  display: block; width: 100%; height: auto; overflow: visible;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 0 0 0 6.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 140px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 0 0 0 6.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 140px;
}
/* light inks would vanish with multiply on dark themes */
.stamp[style*="rgb(255, 255, 255)"] { mix-blend-mode: normal; }
.stamp-grid { max-height: min(460px, calc(100dvh - 230px)); overflow-y: auto; }
.stamp-grid .tray-label { margin-top: 12px; }
.stamp-grid .tray-label:first-child { margin-top: 0; }
.stamp-section { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.stamp-pick {
  height: 92px; padding: 10px; border: 0; border-radius: 12px; cursor: pointer;
  background: #fbf6ec; color: #3b2a20; display: grid; place-items: center; transition: transform .12s, box-shadow .12s;
}
.stamp-pick:hover { transform: scale(1.04); box-shadow: inset 0 0 0 2px var(--accent); }
.stamp-pick svg { max-width: 100%; max-height: 72px; width: auto; height: 100%; }

/* ---------- looping sticker motions ---------- */
.sticker img.anim { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
/* stroll back and forth, turning around at each end */
.motion-pace { animation: m-pace 10s linear infinite; }
@keyframes m-pace {
  0% { transform: translateX(-40%) scaleX(1); }
  48% { transform: translateX(40%) scaleX(1); }
  50% { transform: translateX(40%) scaleX(-1); }
  98% { transform: translateX(-40%) scaleX(-1); }
  100% { transform: translateX(-40%) scaleX(1); }
}
.motion-bounce { animation: m-bounce 1.1s ease-in-out infinite; }
.motion-wiggle { animation: m-wiggle 1.4s ease-in-out infinite; }
.motion-float { animation: m-float 3s ease-in-out infinite; }
.motion-swing { animation: m-swing 2s ease-in-out infinite; transform-origin: 50% 0; }
.motion-sway { animation: m-sway 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.motion-spin { animation: m-spin 6s linear infinite; }
.motion-pulse { animation: m-pulse 1.3s ease-in-out infinite; }
.motion-jelly { animation: m-jelly 1.6s ease-in-out infinite; }
@keyframes m-bounce { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-14%); } 60% { transform: translateY(0) scale(1.06, .94); } 75% { transform: translateY(-3%); } }
@keyframes m-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes m-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9%) rotate(2deg); } }
@keyframes m-swing { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } }
@keyframes m-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } }
@keyframes m-jelly { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.12, .88); } 50% { transform: scale(.92, 1.08); } 75% { transform: scale(1.04, .96); } }
@media (prefers-reduced-motion: reduce) { [class*="motion-"] { animation: none !important; } }

.cm-motions { grid-template-columns: repeat(5, 1fr); gap: 4px; }
.cm-motion {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px 4px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
.cm-motion:hover { background: rgba(194, 84, 106, .1); }
.cm-motion.on { background: rgba(194, 84, 106, .16); box-shadow: inset 0 0 0 2px var(--accent); }
.cm-motion-demo { display: block; font-size: 22px; line-height: 1.2; font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.cm-motion-demo img { width: 26px; height: 26px; display: block; }

/* ---------- photo tray & media library ---------- */
#photoTray { max-height: calc(100dvh - 170px); overflow-y: auto; }
.upload-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 2px dashed rgba(194, 84, 106, .45); background: rgba(194, 84, 106, .07); color: var(--chrome-ink);
  transition: background .15s, border-color .15s;
}
.upload-btn:hover { background: rgba(194, 84, 106, .14); border-color: var(--accent); }
.upload-btn svg { width: 24px; height: 24px; color: var(--accent); }
.upload-btn span { display: flex; flex-direction: column; gap: 1px; }
.upload-btn b { font-size: 14px; }
.upload-btn small { font-size: 11.5px; color: var(--chrome-ink-soft); font-weight: 600; }
#photoTray .tray-label { margin-top: 14px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
.media-thumb {
  position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  cursor: zoom-in; background: rgba(0, 0, 0, .08);
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.media-thumb:hover img { transform: scale(1.06); }
.media-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.media-new {
  position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 6px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 9.5px; font-weight: 800;
}
.media-empty { margin: 4px 2px; font-size: 13px; color: var(--chrome-ink-soft); }

/* ---------- viewer ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 40;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); place-items: center;
  padding: 56px 72px 20px;
  background: rgba(18, 13, 10, .9);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fade .18s ease-out;
}
.viewer[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.v-stage { position: relative; margin: 0; width: 100%; height: 100%; pointer-events: none; }
.v-stage img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); background: #2a221d;
}
.viewer button { cursor: pointer; }
.v-close, .v-nav {
  position: absolute; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08); color: #fff;
  transition: background .15s;
}
.v-close:hover, .v-nav:hover { background: rgba(255, 255, 255, .2); }
.v-close { top: 14px; right: 16px; width: 40px; height: 40px; }
.v-nav { top: 50%; width: 48px; height: 48px; margin-top: -40px; }
.v-nav[hidden] { display: none; }
.v-prev { left: 14px; }
.v-next { right: 14px; }
.v-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; padding-top: 14px; }
.v-info { color: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 700; }
.v-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.v-actions button {
  display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 12px;
  border: 0; background: #fbf3e8; color: #3b2a20; font-size: 13.5px; font-weight: 800;
  transition: transform .12s, background .15s;
}
.v-actions button:hover:not(:disabled) { transform: translateY(-1px); background: #fff; }
.v-actions button:disabled { opacity: .4; cursor: default; }
.v-actions button svg { width: 17px; height: 17px; }
.v-actions .danger { background: rgba(255, 255, 255, .1); color: #f6b6c3; }
.v-actions .danger:hover { background: rgba(255, 255, 255, .18); }
@media (max-width: 700px) {
  .viewer { padding: 60px 16px 20px; }
  .v-nav { top: auto; bottom: 110px; }
}

/* ---------- color menu ---------- */
.color-menu {
  position: fixed; z-index: 25;
  width: min(248px, calc(100vw - 32px)); padding: 10px 12px 12px;
  background: var(--chrome); border: 1px solid var(--chrome-line); border-radius: 16px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -16px rgba(40, 25, 10, .6);
  animation: cm-pop .16s ease-out;
}
.color-menu[hidden] { display: none; }
@keyframes cm-pop { from { opacity: 0; transform: scale(.94); } }
.cm-label {
  margin: 4px 2px 7px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--chrome-ink-soft);
}
.cm-label ~ .cm-label { margin-top: 12px; }
.cm-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.cm-swatch {
  container-type: inline-size;
  aspect-ratio: 1; width: 100%; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
  transition: transform .12s;
}
.cm-swatch:hover { transform: scale(1.12); }
.cm-swatch.on { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14), 0 0 0 2px var(--chrome), 0 0 0 4px var(--accent); }
.color-menu.frames { width: min(318px, calc(100vw - 32px)); }
.cm-frames { grid-template-columns: repeat(4, 1fr); gap: 8px 6px; }
.cm-frame {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px 4px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  transition: background .12s;
}
.cm-frame:hover { background: rgba(194, 84, 106, .1); }
.cm-frame.on { background: rgba(194, 84, 106, .16); box-shadow: inset 0 0 0 2px var(--accent); }
.cm-frame-box {
  container-type: inline-size; width: 74%; height: 54px;
  display: grid; place-items: center; pointer-events: none;
}
.cm-frame-box .photo-frame { width: 100%; }
.cm-frame-box .caption { min-height: 4cqi; margin-top: 0; }
.cm-frame-name { font-size: 10.5px; font-weight: 800; color: var(--chrome-ink-soft); text-transform: capitalize; }
.cm-frame-colors { grid-template-columns: repeat(9, 1fr); gap: 6px; }
.color-menu.frames { max-height: calc(100dvh - 24px); overflow-y: auto; scrollbar-width: thin; }
.color-menu.frames .cm-label { margin-top: 10px; }
.color-menu.frames .cm-label:first-child { margin-top: 4px; }
.cm-custom {
  position: relative; display: block; cursor: pointer;
  background: conic-gradient(#f87171, #fbbf24, #a3e635, #34d399, #60a5fa, #a78bfa, #f472b6, #f87171);
}
.cm-custom::after { /* "+" until a custom color is picked, then that color in the middle */
  content: "+"; position: absolute; inset: 22%; border-radius: 50%;
  display: grid; place-items: center; background: var(--picked, #fff); color: #6b5b50;
  font-size: 13px; font-weight: 800; line-height: 1;
}
.cm-custom.picked::after { content: ""; }
.cm-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.cm-tapes { grid-template-columns: repeat(3, 1fr); }
.cm-tapes .cm-swatch { aspect-ratio: 3.4 / 1; border-radius: 0; box-shadow: none; }
.cm-tapes .cm-swatch.on { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; top: 18px; transform: translate(-50%, -140%);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 12px;
  background: #3b2a20; color: #fbf3e8; font-size: 14px; font-weight: 600;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden;
  transition: transform .3s ease, opacity .3s, visibility .3s; z-index: 30;
}
#toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
#toast button { border: 0; background: none; color: #f6b6c3; font-weight: 800; cursor: pointer; padding: 0; }

/* ---------- small screens ---------- */
@media (max-width: 700px) {
  #stage { padding: 8px 16px 96px; }
  #toolbar { left: 16px; right: 16px; transform: none; max-width: none; justify-content: flex-start; }
  #toolbar button { min-width: 50px; font-size: 10.5px; }
  .tray { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px); }
  #pager { font-size: 21px; min-width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .book { transition: none; }
}