/* ============================================================ TOKENS */
:root {
  /* Craft table: a green cutting mat with paper on it. Ink is near-black, never pure. */
  --mat: #2c5a48;
  --mat-deep: #234a3b;
  --bg: var(--mat);
  --panel: #fbf7ee;     /* cream paper */
  --line: #ddd2bd;      /* pencil rule on paper */
  --soft: #f2ead9;
  --text: #1f1d1a;
  --muted: #706858;
  --ink: #1f1d1a;
  --radius: 10px;
  --ui: 'Manrope', system-ui, sans-serif;               /* app text */
  --display: 'Bricolage Grotesque', system-ui, sans-serif; /* app headings */
  --f-mono: 'Space Mono', ui-monospace, monospace;   /* inside zine pages only */
  --f-label: 'Manrope', system-ui, sans-serif;        /* app labels, tabs, counts */
  --desk-ink: #ff4fa3;
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --press: 2px 2px 0 rgb(31 29 26 / 0.9);   /* printed offset shadow for paper buttons */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 var(--ui);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ============================================================ APP SHELL */
.app {
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-rows: auto 1fr;
  height: 100vh;
  height: 100dvh;
}

.bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.brand__name { font: 800 18px/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.02em; }
.brand__tag { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__actions { display: flex; gap: 8px; flex: 1; justify-content: flex-end; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:hover { border-color: #c9c4b9; }
.btn:active { transform: scale(0.97); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--ink { background: var(--text); border-color: var(--text); color: #fff; }
.btn--ink:hover { background: #33312d; border-color: #33312d; }
.btn--icon { width: 34px; padding: 0; justify-content: center; }
.btn--icon .off, .btn--icon[aria-pressed='false'] .on { display: none; }
.btn--icon[aria-pressed='false'] .off { display: block; }
.btn--icon[aria-pressed='false'] { color: var(--muted); }
.btn--wide { width: 100%; justify-content: center; }

.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--soft); border: 1px solid var(--line); border-radius: 9px; }
.seg button {
  border: 0;
  background: none;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.seg button:hover { color: var(--text); }
.seg button[aria-selected='true'],
.seg button[aria-pressed='true'] { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
.seg--full { display: flex; }
.seg--full button { flex: 1; font-size: 15px; height: 32px; }
/* text toggles in the editor: smaller type that never wraps out of the pill */
.seg--compact button { min-width: 0; padding: 0 8px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.link { border: 0; background: none; padding: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.link:hover { color: var(--text); }

/* ============================================================ STAGE */
.stage {
  position: relative;
  display: flex;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 20px;
  background-color: var(--bg);
  background-image: radial-gradient(rgb(0 0 0 / 0.09) 1px, transparent 1.2px);
  background-size: 18px 18px;
  overflow: hidden;
}
.stage__col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.stage__rail { position: relative; z-index: 3; flex: none; display: flex; align-items: center; }
/* The book's box is two pages wide even when only the cover shows (it slides left so the cover
   sits centered), so its empty half can lie over the tool rail. Only the pages take clicks. */
.book { pointer-events: none; }
.leaf, .face { pointer-events: auto; }
body[data-view='sheet'] .stage__rail { display: none; }
.stage__main { flex: 1; min-height: 0; display: grid; place-items: center; }
.frame { position: relative; }
.scaler { position: absolute; top: 0; left: 0; width: 600px; height: 424px; transform-origin: 0 0; perspective: 2600px; }
.scaler--sheet { width: 1200px; height: 848px; perspective: none; }

/* book */
.book {
  position: relative;
  width: 600px;
  height: 424px;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease);
}
.leaf {
  position: absolute;
  top: 0;
  left: 300px;
  width: 300px;
  height: 424px;
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease);
}
.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.08), 0 8px 24px -12px rgb(0 0 0 / 0.35);
  user-select: none;
}
.face--back { transform: rotateY(180deg); }
.face::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.face--front::before { background: linear-gradient(90deg, rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.03) 7%, transparent 14%); }
.face--back::before { background: linear-gradient(270deg, rgb(0 0 0 / 0.16), rgb(0 0 0 / 0.03) 7%, transparent 14%); }
.face .pg { pointer-events: none; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 14px; }
.pager__label { min-width: 110px; text-align: center; font: 12px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pager__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  transition: opacity 0.2s, transform 0.1s;
}
.pager__btn:active { transform: scale(0.94); }
.pager__btn:disabled { opacity: 0.35; cursor: default; }
.pager__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* sheet */
.sheet {
  display: grid;
  grid-template-columns: repeat(4, 300px);
  grid-template-rows: repeat(2, 424px);
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.08), 0 20px 50px -24px rgb(0 0 0 / 0.4);
}
.cell { position: relative; overflow: hidden; cursor: pointer; }
.cell--flip .pg { transform: rotate(180deg); }
.guides { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.guides line { stroke: rgb(0 0 0 / 0.28); stroke-width: 1.5; stroke-dasharray: 3 7; }
.guides .cut { stroke: #e0312d; stroke-width: 3; stroke-dasharray: 14 8; }
.scissors rect { fill: #e0312d; }
.scissors text { fill: #fff; font: 700 11px var(--f-label); text-anchor: middle; letter-spacing: 0.1em; }

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px auto 0;
  padding: 0;
  max-width: 980px;
  list-style: none;
  counter-reset: step;
  color: var(--muted);
  font-size: 13px;
}
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--text);
  color: #fff;
  font: 700 11px var(--f-label);
}
.steps b { color: var(--text); font-weight: 600; }

.stage.is-shuffling .frame { animation: wiggle 0.5s var(--ease); }
@keyframes wiggle {
  30% { transform: rotate(-1.4deg) scale(0.985); }
  60% { transform: rotate(0.8deg); }
}

/* ============================================================ PANEL */
.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--line);
}
.group { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.group__title { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.group--editor { flex: 1; border-bottom: 0; display: flex; flex-direction: column; gap: 12px; }
.group--editor .group__title { margin: 0; color: var(--text); font-size: 14px; }

.swatches { display: flex; gap: 8px; }
.swatch {
  position: relative;
  flex: 1;
  height: 40px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--p);
  transition: transform 0.12s, box-shadow 0.15s;
}
.swatch:hover { transform: translateY(-1px); }
.swatch i { position: absolute; top: 9px; width: 20px; height: 20px; border-radius: 50%; mix-blend-mode: multiply; }
.swatch i:first-child { left: calc(50% - 15px); background: var(--a); }
.swatch i:last-child { left: calc(50% - 5px); background: var(--b); }
.swatch[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }

.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 8px; }
.thumb { border: 0; background: none; padding: 0; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.thumb__pg {
  position: relative;
  width: 100%;
  aspect-ratio: 300 / 424;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow 0.15s, transform 0.12s;
}
.thumb__pg .pg { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(var(--ts, 0.23)); }
.thumb:hover .thumb__pg { transform: translateY(-1px); }
.thumb.is-active .thumb__pg { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--text); }
.thumb__label { font: 11px var(--f-label); color: var(--muted); }
.thumb.is-active .thumb__label { color: var(--text); }

.ed-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.select select {
  height: 30px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378746b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  appearance: none;
  font-weight: 500;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 12px; font-weight: 500; color: var(--muted); }
.field input,
.field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  resize: vertical;
  line-height: 1.45;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus,
.field textarea:focus,
.select select:focus-visible { outline: none; border-color: #a9a397; box-shadow: 0 0 0 3px rgb(0 0 0 / 0.06); }
.field small { color: var(--muted); font-size: 12px; }
.field .link { align-self: flex-start; font-size: 13px; }
.drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 64px;
  border: 1.5px dashed #cdc8bd;
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  font-weight: 500;
  transition: border-color 0.15s, color 0.15s;
}
.drop:hover { border-color: var(--text); color: var(--text); }
.drop { flex-direction: column; gap: 4px; height: auto; min-height: 92px; padding: 14px; text-align: center; outline: none; }
.drop__row { display: flex; align-items: center; gap: 8px; color: var(--text); }
.drop small { font-size: 12px; color: var(--muted); }
.drop .link { font-weight: 500; color: var(--text); }
.drop:focus-visible, .drop.is-focus { border-color: var(--text); border-style: solid; color: var(--text); box-shadow: 0 0 0 3px rgb(0 0 0 / 0.06); }
.drop.is-over { border-color: var(--text); border-style: solid; background: var(--soft); }
.drop.has-image { padding: 8px; flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; }
.drop__thumb { width: 64px; height: 64px; flex: none; border-radius: 6px; object-fit: cover; background: var(--soft); }
.drop.is-busy { opacity: 0.6; pointer-events: none; }
.face.is-over, .thumb.is-over .thumb__pg { box-shadow: 0 0 0 3px var(--text); }
.drop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.panel__foot-links { display: flex; gap: 14px; align-items: flex-start; flex: none; }
.credits { position: relative; }
.credits summary { list-style: none; cursor: pointer; }
.credits summary::-webkit-details-marker { display: none; }
.credits p { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; width: 260px; margin: 0; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px -14px rgb(0 0 0 / 0.3); font-size: 12px; line-height: 1.5; color: var(--muted); }
.credits a { color: var(--text); }
.panel__foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }

:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ============================================================ ZINE PAGE */
/* Designed at 300×424. Ink A is the dark plate, ink B the bright one; both multiply. */
.pg {
  position: relative;
  width: 300px;
  height: 424px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink-a);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.32;
  text-align: left;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.pg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Paper stock: the pattern sits under everything printed on the page. One definition (--tex)
   serves the pages and the paper swatches in the Style tab. */
.pg::before, .paperchip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--tex, none);
}
.paper-graph {
  --tex:
    linear-gradient(rgb(60 110 170 / 0.32) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgb(60 110 170 / 0.32) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(rgb(60 110 170 / 0.16) 1px, transparent 1px) 0 0 / 12px 12px,
    linear-gradient(90deg, rgb(60 110 170 / 0.16) 1px, transparent 1px) 0 0 / 12px 12px;
}
.paper-lined {
  --tex:
    linear-gradient(90deg, transparent 13px, rgb(226 70 80 / 0.45) 13px 14.5px, transparent 14.5px),
    linear-gradient(transparent 15px, rgb(60 110 170 / 0.3) 15px 16px, transparent 16px) 0 6px / 100% 16px;
}
.paper-dots { --tex: radial-gradient(rgb(60 60 70 / 0.32) 0.9px, transparent 1.3px) 0 0 / 12px 12px; }
.paper-speckled {
  --tex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='1' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .26  0 0 0 0 .2  9 0 0 0 -5.9'/></filter><rect width='100%' height='100%' filter='url(%23f)'/></svg>");
}
.paper-kraft {
  --tex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.012 .45' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .23  0 0 0 0 .12  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
}
.paper-newsprint {
  --tex: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25  0 0 0 0 .25  0 0 0 0 .25  0 0 0 .4 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}
/* riso grain strength */
.pg.grain-none::after { opacity: 0; }
.pg.grain-heavy::after { opacity: 0.62; }

.pg > * { position: relative; z-index: 1; }
.pg > .shapes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.pg > .stickers { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.pg > .typed-layer { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.typed { position: absolute; transform-origin: 0 0; font-family: 'Special Elite', 'Courier New', monospace; line-height: 1.25; white-space: pre-wrap; overflow-wrap: anywhere; mix-blend-mode: multiply; text-shadow: 0 0 0.5px currentColor; }
.typed .w { white-space: nowrap; }
.typed .w > span { position: relative; }
.typed.is-editing { visibility: hidden; }
.typed.is-selected { outline: 1.5px dashed rgb(28 27 25 / 0.7); outline-offset: 4px; mix-blend-mode: normal; }
.typed-edit {
  position: absolute;
  z-index: 30;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 1.5px dashed rgb(28 27 25 / 0.45);
  outline-offset: 4px;
  background: transparent;
  resize: none;
  overflow: hidden;
  transform-origin: 0 0;
  font-family: 'Special Elite', 'Courier New', monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  caret-color: #e0312d;
}
.pg > .ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; overflow: visible; }
.sticker { position: absolute; }
.sticker > svg, .sticker > img { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1.2px rgb(0 0 0 / 0.22)); }
.sticker.is-flat > svg { filter: none; }
.sticker > img { object-fit: contain; }
.sticker.is-selected { outline: 1.5px dashed rgb(28 27 25 / 0.7); outline-offset: 4px; }
.knob { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 1.5px solid #1c1b19; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); }
.knob--del { top: -10.5px; left: -10.5px; background: #1c1b19; }
.knob--del::before, .knob--del::after { content: ''; position: absolute; left: 2.5px; top: 4.5px; width: 5px; height: 1.4px; background: #fff; transform: rotate(45deg); }
.knob--del::after { transform: rotate(-45deg); }
.knob--rot { right: -10.5px; bottom: -10.5px; }
.knob--pal { right: -10.5px; top: -10.5px; border: 1.5px solid #fff; background: conic-gradient(#ff5a3c, #ffcf2e, #34c38f, #4ea5ff, #b48cff, #ff6fb5, #ff5a3c); box-shadow: 0 0 0 1px #1c1b19, 0 1px 3px rgb(0 0 0 / 0.25); }
/* image stickers get the same white die-cut edge, traced around their transparent shape */
.sticker.is-baked > img { filter: none !important; }
.sticker.is-img > img { filter: drop-shadow(1.6px 0 0 #fffdf8) drop-shadow(-1.6px 0 0 #fffdf8) drop-shadow(0 1.6px 0 #fffdf8) drop-shadow(0 -1.6px 0 #fffdf8) drop-shadow(0 1px 1.2px rgb(0 0 0 / 0.22)); }
.pg p { margin: 0 0 0.7em; }
.pg p:last-child { margin-bottom: 0; }
.pg .mono { font-family: var(--f-mono); }

.disp {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  line-height: 0.9;
  mix-blend-mode: multiply;
  overflow-wrap: normal;
}
.f-serif .disp { line-height: 0.95; }
.f-mono .disp { line-height: 1; }

.fitbox { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; }
.fitbox.center { align-items: center; }
.fitbox > * { width: 100%; }
.hbox { flex: none; max-height: 130px; display: flex; align-items: flex-end; }
.hbox > * { width: 100%; }
.bodybox { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.bodybox.center { display: flex; align-items: center; }
.bodybox > *, .capbox > *, .cv-sub > *, .chip > * { width: 100%; }
.capbox { flex: none; max-height: 76px; overflow: hidden; }
.spacer { flex: 1; }

.num {
  position: absolute;
  right: 18px;
  bottom: 13px;
  z-index: 2;
  font: 700 9px var(--f-mono);
  letter-spacing: 0.08em;
}
.cap { font-size: 13px; line-height: 1.3; }
.f-mono .copy, .f-mono .list, .f-mono .cap, .f-mono .colophon { line-height: 1.4; }
.f-serif .pg, .pg.f-serif { font-size: 15px; }

/* cover */
.t-cover .cv-top { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.t-cover .cv-title { line-height: 0.86; }
.t-cover.f-serif .cv-title { line-height: 0.9; font-style: italic; }
.t-cover .cv-sub { flex: none; max-height: 90px; margin-top: 14px; padding-top: 10px; border-top: 2px solid var(--ink-a); overflow: hidden; line-height: 1.28; }

/* text */
.t-text .rule { flex: none; width: 46px; height: 9px; margin: 14px 0 16px; background: var(--ink-b); mix-blend-mode: multiply; }
.t-text .bodybox { padding-bottom: 14px; }

/* quote */
.t-quote .q-mark {
  position: absolute;
  top: -14px;
  left: 6px;
  font-size: 240px;
  line-height: 1;
  color: var(--ink-b);
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
}
.t-quote .q-text { line-height: 1; }
.t-quote .cap { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 6px; }

/* big */
.t-big .halftone {
  position: absolute;
  z-index: 0;
  width: 250px;
  height: 250px;
  top: 40px;
  right: -60px;
  border-radius: 50%;
  background: radial-gradient(var(--ink-b) 42%, transparent 46%) 0 0 / 9px 9px;
  mix-blend-mode: multiply;
}
.t-big .big { line-height: 0.8; text-align: center; }
.t-big .capbox { padding-top: 12px; padding-right: 20px; border-top: 2px solid var(--ink-a); }

/* list */
.t-list .hbox { margin-bottom: 18px; }
.t-list .list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.7em; line-height: 1.25; }
.t-list li { display: grid; grid-template-columns: 1.55em 1fr; gap: 0.6em; align-items: start; }
.t-list .dot {
  display: grid;
  place-items: center;
  width: 1.55em;
  height: 1.55em;
  margin-top: -0.1em;
  border-radius: 50%;
  background: var(--ink-b);
  color: var(--ink-a);
  font-size: 0.8em;
  font-weight: 700;
  mix-blend-mode: multiply;
}

/* image */
.t-image .img-box { position: relative; z-index: 6; flex: 1 1 auto; min-height: 0; margin: -22px -22px 14px; }
.t-image .img-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-image .img-box--whole { margin: 0 0 14px; }
.t-image .img-box--whole img { object-fit: contain; }
.t-image .img-empty { position: absolute; inset: 22px 22px 0; display: grid; place-items: center; border: 2px dashed var(--ink-a); }
.t-image .img-empty .halftone { position: absolute; inset: 0; opacity: 0.6; background: radial-gradient(var(--ink-b) 30%, transparent 34%) 0 0 / 8px 8px; mix-blend-mode: multiply; }
.t-image .img-empty span { position: relative; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--paper); padding: 4px 8px; }
.t-image .capbox { padding-right: 18px; }

/* shapes */
.t-shapes .chip { flex: none; max-height: 90px; overflow: hidden; align-self: flex-start; max-width: 82%; padding: 9px 11px; background: var(--paper); border: 2px solid var(--ink-a); }

/* back */
.t-back .sticker {
  position: absolute;
  top: 26px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--ink-b);
  color: var(--ink-a);
  font-size: 19px;
  line-height: 1;
  text-align: center;
  transform: rotate(-12deg);
}
.t-back .bodybox { padding: 70px 30px 16px 0; }
.t-back .colophon { line-height: 1.38; }
.t-back .back-foot { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
.t-back .barcode { width: 64px; height: 24px; color: var(--ink-a); }

/* ============================================================ TOOL RAIL */
/* Desktop: a vertical rail beside the page, tools lying sideways with tips toward the page.
   Phones: a dock under the page with the tools standing up. Same element in both places. */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.tray {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 74px;
  max-height: 100%;
  padding: 10px 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 10px 30px -16px rgb(0 0 0 / 0.3);
  overflow-y: auto;
  scrollbar-width: none;
}
.tray__sep { flex: none; width: 40px; height: 1px; background: var(--line); }

.tray__tools { display: flex; flex-direction: column; width: 100%; overflow: hidden; }
.tool { position: relative; width: 100%; height: 30px; padding: 0; border: 0; background: none; }
.tool--move { height: 38px; display: grid; place-items: center; }
.tool__move { width: 22px; height: 22px; fill: #fff; stroke: var(--text); stroke-width: 1.6; stroke-linejoin: round; padding: 4px; box-sizing: content-box; border-radius: 8px; transition: background 0.15s; }
.tool--move:hover .tool__move { background: var(--soft); }
.tool--move[aria-checked='true'] .tool__move { background: var(--text); fill: var(--text); stroke: #fff; }
.tool__art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 74px;
  stroke-width: 1;
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.14));
  transform: translate(-50%, -50%) translateX(-24px) rotate(90deg);
  transition: transform 0.22s var(--ease);
}
.tool:hover .tool__art { transform: translate(-50%, -50%) translateX(-20px) rotate(90deg); }
.tool[aria-checked='true'] .tool__art { transform: translate(-50%, -50%) translateX(-9px) rotate(90deg); }

.tray__dots { display: grid; grid-template-columns: repeat(2, 24px); gap: 8px; transition: opacity 0.15s; }
.tray__dots.is-off { opacity: 0.35; }
.dot { position: relative; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid rgb(0 0 0 / 0.12); background: var(--c); cursor: pointer; transition: transform 0.12s, box-shadow 0.15s; }
.dot:hover { transform: scale(1.08); }
.dot[aria-checked='true'], .dot--custom.is-on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--text); }
.dot--custom { background: conic-gradient(#ff4f4f, #ffcf2e, #2fbf71, #1f9bd8, #8a4fff, #ff4fa3, #ff4f4f); }
.dot--custom.is-on { background: var(--c); }
.dot--custom input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }

.tray__sizes { display: flex; flex-direction: column; gap: 2px; }
.tray__sizes button { display: grid; place-items: center; width: 40px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; }
.tray__sizes button:hover { background: var(--soft); }
.tray__sizes button[aria-checked='true'] { background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--text); }
.tray__sizes i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--tip); }

.tray__hist { display: flex; flex-direction: column; gap: 2px; }
.tray__btn { display: grid; place-items: center; width: 40px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text); }
.tray__btn:hover:not(:disabled) { background: var(--soft); }
.tray__btn:disabled { opacity: 0.3; cursor: default; }
.tray__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.is-drawing .tray__full { display: none; }

/* pointer feedback on pages */
body[data-cursor='draw'] .face,
body[data-cursor='erase'] .face,
body[data-cursor='draw'] .draw__page,
body[data-cursor='erase'] .draw__page { cursor: var(--tool-cursor, crosshair); }
body[data-cursor='type'] .face,
body[data-cursor='type'] .draw__page { cursor: text; }
.tool__type { width: 28px; height: 24px; padding: 3px 4px; box-sizing: content-box; border-radius: 8px; overflow: visible; transition: background 0.15s; }
.tool__type .tw-paper { fill: #fff; stroke: var(--text); stroke-width: 1.3; }
.tool__type .tw-ink { stroke: var(--tip); stroke-width: 1.3; stroke-linecap: round; }
.tool__type .tw-body { fill: #e9e4da; stroke: var(--text); stroke-width: 1.4; stroke-linejoin: round; }
.tool__type .tw-keys { stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; }
.tool--type:hover .tool__type { background: var(--soft); }
.tool--type[aria-checked='true'] .tool__type { background: var(--text); }
.tool--type[aria-checked='true'] .tw-body { fill: #4a4741; stroke: #fff; }
.tool--type[aria-checked='true'] .tw-paper { stroke: #fff; }
.tool--type[aria-checked='true'] .tw-keys { stroke: #fff; }
.face, .draw__page { touch-action: none; }

/* ============================================================ STICKER BOOK */
.stickerbook { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sb {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper, #f4efe6);
  cursor: grab;
  touch-action: none;
  transition: transform 0.12s, border-color 0.15s;
}
.sb:hover { transform: translateY(-1px) rotate(-3deg); border-color: #c9c4b9; }
.sb svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.18)); }
.sb--upload { display: flex; flex-direction: column; gap: 1px; cursor: pointer; background: #fff; border-style: dashed; color: var(--muted); font-size: 9px; font-weight: 600; }
.sb--upload svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; filter: none; }
.sb-ghost { position: fixed; top: 0; left: 0; z-index: 60; width: 72px; height: 72px; pointer-events: none; opacity: 0.9; }
.sb-ghost > svg, .sb-ghost > img { display: block; width: 100%; height: 100%; object-fit: contain; overflow: visible; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.25)); }
.sb, .sb img, .sticker img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
body.is-sticker-over .sb-ghost { opacity: 1; }
/* Section headers: title left, meta or action right, all on one centred line */
.group__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; margin-bottom: 10px; }
.group__head > * { line-height: 20px; }
.group__head .group__title { margin: 0; }
.group__head .link { font-size: 12px; }
.sb--img img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
/* Tiles take their share of the row whatever the art's own size (a big image sticker would
   otherwise stretch its column past the panel and throw the rows off). */
.sb { min-width: 0; min-height: 0; overflow: hidden; background: #f4f1ea; }
.sb > svg, .sb > img { display: block; min-width: 0; max-width: 100%; max-height: 100%; }
.sb--upload { overflow: hidden; }
.group__meta { font-size: 12px; color: var(--muted); }
.sticker-head { display: flex; flex-direction: column; align-items: flex-start; }
.pack-back { display: inline-flex; align-items: center; gap: 2px; height: 20px; margin: 0 0 4px -4px; padding: 0 6px 0 2px; border: 0; border-radius: 6px; background: none; font-size: 12px; font-weight: 500; color: var(--muted); }
.sticker-head .group__head { align-self: stretch; }
.pack-back:hover { color: var(--text); background: var(--soft); }
.pack-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pack-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* pack list: cards with a fanned peek at what's inside */
.packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f4f1ea;
  text-align: left;
  transition: transform 0.15s var(--ease), border-color 0.15s, box-shadow 0.15s;
}
.pack:hover { transform: translateY(-2px); border-color: #c9c4b9; box-shadow: 0 8px 18px -12px rgb(0 0 0 / 0.35); }
.pack__fan { position: relative; display: block; width: 100%; height: 74px; margin-bottom: 8px; }
.pack__name, .pack__count { position: relative; z-index: 5; }
.pack__peek { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; display: grid; place-items: center; transition: transform 0.25s var(--ease); }
.pack__peek > svg, .pack__peek > img { width: 100%; height: 100%; object-fit: contain; overflow: visible; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.22)); }
.pack__peek--0 { transform: translate(-112%, -52%) rotate(-12deg); z-index: 1; }
.pack__peek--1 { transform: translate(-58%, -62%) rotate(5deg); z-index: 3; }
.pack__peek--2 { transform: translate(2%, -46%) rotate(-4deg); z-index: 2; }
.pack__peek--3 { transform: translate(-30%, -30%) rotate(14deg) scale(0.72); z-index: 4; }
.pack:hover .pack__peek--0 { transform: translate(-126%, -56%) rotate(-18deg); }
.pack:hover .pack__peek--2 { transform: translate(14%, -50%) rotate(4deg); }
.pack__name { width: 100%; font-weight: 600; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack__count { font-size: 11px; color: var(--muted); }

.group__hint { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.field__links { display: flex; gap: 14px; }
.field__links:empty { display: none; }

/* ============================================================ FULL-SCREEN DRAW */
.draw {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  background-image: radial-gradient(rgb(0 0 0 / 0.09) 1px, transparent 1.2px);
  background-size: 18px 18px;
  animation: draw-in 0.22s var(--ease);
}
@keyframes draw-in { from { opacity: 0; transform: scale(0.985); } }
body.is-drawing { overflow: hidden; }
.draw__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.draw__nav { display: flex; align-items: center; gap: 10px; }
.draw__label { min-width: 92px; text-align: center; font: 12px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.draw__actions { display: flex; gap: 8px; }
.draw__actions .btn:disabled { opacity: 0.4; cursor: default; }
.draw .pager__btn { width: 32px; height: 32px; }
.draw__body { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 16px; }
.draw__rail { flex: none; display: flex; align-items: center; }
.draw__stage { position: relative; flex: 1; min-width: 0; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.draw__frame { position: relative; box-shadow: 0 1px 1px rgb(0 0 0 / 0.08), 0 24px 60px -28px rgb(0 0 0 / 0.45); }
.draw__page { position: absolute; top: 0; left: 0; width: 300px; height: 424px; transform-origin: 0 0; user-select: none; -webkit-user-select: none; }
.draw__page .pg { pointer-events: none; }

/* phones: dock under the page, tools standing up */
@media (max-width: 900px) {
  .stage { flex-direction: column; gap: 10px; }
  .stage__rail { order: 2; justify-content: center; }
  .draw__body { flex-direction: column; padding: 12px; gap: 10px; }
  .draw__rail { order: 2; justify-content: center; }
  .tray { flex-direction: row; flex-wrap: wrap; justify-content: center; width: auto; max-width: 100%; max-height: none; gap: 8px 12px; padding: 8px 12px 0; overflow: hidden; }
  .tray__sep { display: none; }
  .tray__dots { display: flex; gap: 6px; }
  .tray__sizes, .tray__hist { flex-direction: row; }
  .tray__sizes button { width: 30px; }
  .tray__btn { width: 34px; }
  .tray__tools { order: 2; flex-direction: row; justify-content: center; width: 100%; height: 56px; gap: 8px; }
  .tool { width: 34px; height: 100%; }
  .tool--move { height: 100%; }
  .tool__art { top: auto; bottom: -30px; transform: translateX(-50%); }
  .tool:hover .tool__art { transform: translateX(-50%) translateY(-3px); }
  .tool[aria-checked='true'] .tool__art { transform: translateX(-50%) translateY(-14px); }
  .stickerbook { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .draw__bar { flex-wrap: wrap; padding: 10px 12px; }
  .draw__actions { flex: 1; justify-content: flex-end; }
}

/* editor: draw entry */
.btn--draw { width: 100%; justify-content: center; height: 38px; }

/* ============================================================ OFFSCREEN */
#measure { position: fixed; left: -10000px; top: 0; width: 300px; visibility: hidden; pointer-events: none; }
#printRoot { display: none; }

/* ============================================================ MOTION */
body:not(.is-ready) .leaf,
body:not(.is-ready) .book { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .leaf, .book { transition-duration: 0.01s; }
  .stage.is-shuffling .frame { animation: none; }
}

/* ============================================================ SMALL SCREENS */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px, 58vh) auto; height: auto; min-height: 100vh; }
  .bar { flex-wrap: wrap; padding: 12px 16px; }
  .brand__tag { display: none; }
  .bar__actions { flex: none; }
  .bar .seg { order: 3; width: 100%; }
  .bar .seg button { flex: 1; }
  .stage { padding: 16px; }
  .panel { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .btn { padding: 0 10px; }
  .steps { grid-template-columns: 1fr; gap: 6px; }
}

/* ============================================================ PRINT */
@media print {
  @page { size: A4 landscape; margin: 0; }
  html, body { height: auto; background: #fff; }
  .app { display: none !important; }
  #printRoot { display: block; }
  .print-sheet {
    display: grid;
    grid-template-columns: repeat(4, 74.25mm);
    grid-template-rows: repeat(2, 105mm);
    width: 297mm;
    height: 210mm;
    overflow: hidden;
    break-inside: avoid;
  }
  .pcell { position: relative; overflow: hidden; }
  .pcell .pg { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(0.9354); }
  .pcell--flip .pg { transform: translate(74.25mm, 105mm) rotate(180deg) scale(0.9354); }
}


/* ============================================================ CRAFT TABLE */
/* The app is a maker's desk: everything sits on a cutting mat, controls are paper. */

body { font-size: 14px; background: var(--mat); }

/* cutting mat: fine 1cm-ish grid, heavier every fifth line, a little texture */
.app, .draw {
  background-color: var(--mat);
  background-image:
    linear-gradient(rgb(255 255 255 / 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.14) 1px, transparent 1px),
    linear-gradient(rgb(255 255 255 / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.055) 1px, transparent 1px),
    radial-gradient(ellipse at 30% 20%, rgb(255 255 255 / 0.06), transparent 60%);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px, 100% 100%;
  background-position: -1px -1px;
}
.stage, .draw__body { background: none; }
.app { grid-template-columns: 1fr 356px; }

/* header: sits on the mat, cream type, paper controls */
.bar { background: none; border-bottom: 0; padding: 14px 18px 4px 22px; color: #f6efe0; }
.brand__name { font-size: 22px; color: #fbf3e2; }
.brand__tag { font: 11px var(--f-label); letter-spacing: 0.04em; color: rgb(246 239 224 / 0.62); }

/* paper buttons with a printed offset shadow; pressing pushes them into the shadow */
.btn {
  height: 34px;
  border: 1.5px solid var(--ink);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--press);
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
}
.btn:hover { border-color: var(--ink); background: #fffaf0; }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn--ink { background: #e8553a; border-color: var(--ink); color: #fffaf0; }
.btn--ink:hover { background: #f0603f; border-color: var(--ink); }
.btn--icon[aria-pressed='false'] { color: var(--muted); background: var(--soft); }
.btn:disabled { opacity: 0.45; box-shadow: none; }

/* segmented controls: a strip of paper, the chosen one inked in */
.seg { padding: 2px; gap: 2px; background: var(--panel); border: 1.5px solid var(--ink); border-radius: 8px; box-shadow: var(--press); }
.seg button { height: 28px; border-radius: 5px; color: var(--muted); font-weight: 600; }
.seg button:hover { color: var(--ink); background: var(--soft); }
.seg button[aria-selected='true'],
.seg button[aria-pressed='true'] { background: var(--ink); color: #fbf7ee; box-shadow: none; }
.panel .seg { box-shadow: none; }

/* pager: paper tag between two paper buttons */
.pager { padding-top: 16px; }
.pager__label { min-width: 0; padding: 4px 12px; border-radius: 4px; background: #f4ecda; color: var(--ink); box-shadow: 0 1px 0 rgb(0 0 0 / 0.25); }
.pager__btn { border: 1.5px solid var(--ink); background: var(--panel); box-shadow: var(--press); }
.pager__btn:active { transform: translate(2px, 2px); box-shadow: none; }
.pager__btn:disabled { opacity: 0.4; box-shadow: none; }

/* pages lie on the mat */
.face { box-shadow: 0 1px 0 rgb(0 0 0 / 0.15), 0 14px 30px -14px rgb(0 0 0 / 0.6); }
.sheet { box-shadow: 0 1px 0 rgb(0 0 0 / 0.15), 0 24px 50px -22px rgb(0 0 0 / 0.65); }
.steps { color: rgb(246 239 224 / 0.7); }
.steps b { color: #fbf3e2; }
.steps li::before { background: #f4c43a; color: var(--ink); }

/* tool rail: a paper tray on the mat */
.tray { background: var(--panel); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 rgb(31 29 26 / 0.85); }
.tray__sep { background: var(--line); }

/* ---- binder: index tabs over one paper card ---- */
.panel { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 12px 16px 16px 4px; background: none; border-left: 0; overflow: visible; }
.tabs { display: flex; gap: 3px; padding: 0 10px; margin-bottom: -1px; position: relative; z-index: 2; }
.tab {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 6px;
  border: 1.5px solid var(--ink);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  background: var(--tab, #e9d8a6);
  color: var(--ink);
  font: 700 10.5px var(--f-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(4px);
  transition: transform 0.15s var(--ease), background 0.15s;
}
.tab:hover { transform: translateY(1px); }
.tab--style { --tab: #f3c7c4; }
.tab--pages { --tab: #e9d8a6; }
.tab--stickers { --tab: #c9dcc0; }
.tab--page { --tab: #c7d8ea; }
.tab[aria-selected='true'] { background: var(--panel); transform: none; height: 34px; }

.card {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 4px 4px 0 rgb(31 29 26 / 0.85);
}
/* paper grain on the card */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .22  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.tape {
  /* holds the card's bottom-right corner down, like tape on a photo */
  position: absolute;
  right: -22px;
  bottom: 10px;
  z-index: 3;
  width: 78px;
  height: 22px;
  transform: rotate(-40deg);
  background: repeating-linear-gradient(45deg, rgb(244 196 58 / 0.78) 0 6px, rgb(244 196 58 / 0.62) 6px 12px);
  clip-path: polygon(0 12%, 4% 0, 9% 14%, 14% 0, 100% 0, 100% 88%, 95% 100%, 90% 86%, 85% 100%, 0 100%);
  pointer-events: none;
}
.card[data-tab='style'] .tape { background: repeating-linear-gradient(45deg, rgb(255 111 160 / 0.6) 0 6px, rgb(255 111 160 / 0.45) 6px 12px); }
.card[data-tab='stickers'] .tape { background: repeating-linear-gradient(-45deg, rgb(52 160 120 / 0.55) 0 5px, rgb(52 160 120 / 0.38) 5px 10px); }
.card[data-tab='page'] .tape { background: repeating-linear-gradient(90deg, rgb(78 140 220 / 0.55) 0 7px, rgb(78 140 220 / 0.38) 7px 14px); }
.pane { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding-top: 10px; }
.panel__foot { position: relative; border-top: 1.5px dashed var(--line); background: none; }

/* inside the card */
.group { padding: 14px 18px; border-bottom: 1.5px dashed var(--line); }
.pane .group:last-child { border-bottom: 0; }
.group__title { margin: 0 0 12px; font: 700 11px var(--f-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.group__head .group__title, .pack-title { font: 800 17px/1.1 var(--display); letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.group--editor .group__title { font: 800 19px/1.1 var(--display); letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.group__meta { font: 11px var(--f-label); color: var(--muted); }
.pack-back { font: 700 11px var(--f-label); letter-spacing: 0.04em; text-transform: uppercase; }
.group__hint { font-size: 12.5px; }

.swatch { height: 46px; border: 1.5px solid var(--ink); border-radius: 8px; }
.swatch[aria-pressed='true'] { box-shadow: var(--press); transform: translate(-1px, -1px); }
.swatch i { top: 11px; }

.thumb__pg { border-radius: 2px; box-shadow: 0 0 0 1px var(--line), 0 4px 8px -5px rgb(0 0 0 / 0.4); }
.thumb.is-active .thumb__pg { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink), 0 4px 8px -5px rgb(0 0 0 / 0.4); }
.thumb__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; }

.pack { border: 1.5px solid var(--ink); background: #f6efdf; box-shadow: 2px 2px 0 rgb(31 29 26 / 0.8); }
.pack:hover { border-color: var(--ink); box-shadow: 4px 4px 0 rgb(31 29 26 / 0.8); transform: translate(-2px, -2px); }
.pack__name { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: -0.01em; }
.pack__count { font: 10.5px var(--f-label); }
.sb { border-color: var(--line); background: #f6efdf; border-radius: 8px; }
.sb:hover { border-color: var(--ink); }

/* fields: ruled paper inputs */
.field > span { font: 700 10.5px var(--f-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea, .select select {
  border: 1.5px solid #cbbfa6;
  border-radius: 6px;
  background-color: #fffdf7;
  font-family: var(--ui);
}
.field input:focus, .field textarea:focus, .select select:focus-visible { border-color: var(--ink); box-shadow: var(--press); }
.select select { font-weight: 600; }
.drop { border: 1.5px dashed #b9ab8e; background: #fffdf7; }
.drop:hover, .drop.is-over, .drop:focus-visible, .drop.is-focus { border-color: var(--ink); }
.link { color: var(--muted); text-decoration-color: rgb(112 104 88 / 0.5); }
.credits p { border: 1.5px solid var(--ink); box-shadow: var(--press); }

/* full-screen draw: same mat, paper bar */
.draw__bar { margin: 12px 16px 0; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--panel); box-shadow: 3px 3px 0 rgb(31 29 26 / 0.85); }
.draw__label { color: var(--ink); }
.draw__frame { box-shadow: 0 1px 0 rgb(0 0 0 / 0.15), 0 24px 50px -22px rgb(0 0 0 / 0.65); }

:focus-visible { outline: 2px solid #f4c43a; outline-offset: 2px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .panel { padding: 8px 12px 16px; overflow: visible; }
  .card { overflow: visible; }
  .pane { overflow: visible; }
  .bar { padding: 12px 16px 4px; }
}

/* ---- Style tab: paper swatches and finish toggles ---- */
.papers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.paperbtn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; }
.paperchip {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 4px 8px -5px rgb(0 0 0 / 0.45);
  transition: transform 0.15s var(--ease), box-shadow 0.15s;
}
/* a folded corner, so each swatch reads as a scrap of paper */
.paperchip::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, rgb(0 0 0 / 0.14) 50%, #fbf7ee 50%);
}
.paperbtn:hover .paperchip { transform: translateY(-2px); }
.paperbtn[aria-pressed='true'] .paperchip { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink), 0 4px 8px -5px rgb(0 0 0 / 0.45); }
.paperbtn span { font: 10.5px var(--f-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.paperbtn[aria-pressed='true'] span { color: var(--ink); font-weight: 700; }

.finish { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.finish + .finish { margin-top: 12px; }
.finish__label { font-weight: 600; }
.finish .seg { flex: none; }
.finish .seg button { height: 26px; padding: 0 10px; font-size: 13px; }

/* switch: a paper toggle */
.switch { position: relative; width: 44px; height: 24px; flex: none; padding: 0; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--soft); transition: background 0.15s; }
/* knob is centred on the track's middle, so its size can't push it off-centre */
.switch::after { content: ''; position: absolute; top: 50%; left: 2px; box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; background: #fffdf7; border: 1.5px solid var(--ink); transform: translateY(-50%); transition: transform 0.18s var(--ease); }
.switch[aria-checked='true'] { background: #e8553a; }
.switch[aria-checked='true']::after { transform: translate(19px, -50%); }

/* ---- Pages tab: spreads, page actions, swapping ---- */
.thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; width: 78%; margin: 0 auto; }
.thumb { gap: 6px; }
.thumb.is-active .thumb__pg { position: relative; z-index: 2; }

.page-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.page-actions__title { margin: 0; font: 800 17px/1.1 var(--display); letter-spacing: -0.01em; white-space: nowrap; }
.page-actions__btns { display: flex; gap: 6px; }
.page-actions .btn { height: 30px; padding: 0 9px; gap: 5px; font-size: 13px; }
.page-actions .btn svg { width: 14px; height: 14px; }
.page-actions.is-swapping #swapBtn { background: var(--ink); color: #fbf7ee; transform: translate(2px, 2px); box-shadow: none; }

/* choosing a page to swap with: the others wobble, the source is marked */
body.is-swapping .thumb[data-page]:not(.is-swap-source) .thumb__pg { animation: wobble 0.9s ease-in-out infinite; outline: 2px dashed var(--ink); outline-offset: 2px; }
body.is-swapping .thumb[data-page]:nth-child(even) .thumb__pg { animation-delay: -0.45s; }
.thumb.is-swap-source .thumb__pg { opacity: 0.45; }
@keyframes wobble { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@media (prefers-reduced-motion: reduce) { body.is-swapping .thumb[data-page] .thumb__pg { animation: none; } }

.thumb { touch-action: none; }
.thumb.is-dragging .thumb__pg { opacity: 0.35; }
.thumb.is-drop .thumb__pg { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px #e8553a; transform: scale(1.04); }
.thumb-ghost { position: fixed; top: 0; left: 0; z-index: 70; pointer-events: none; overflow: hidden; border-radius: 3px; box-shadow: 0 14px 30px -10px rgb(0 0 0 / 0.5); }
.thumb-ghost .pg { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(var(--ts, 0.23)); }
/* the action bar stays put while the spreads scroll beneath it */
.page-actions-wrap { position: sticky; top: -10px; z-index: 4; padding-top: 14px; background: var(--panel); }
.page-actions-wrap .group__hint { margin-top: 8px; }

/* ---- Stickers tab: big tiles, search, recents, pack chips ---- */
.sb { padding: 12px; border-radius: 10px; }
.sb:hover { transform: translateY(-2px) rotate(-2deg); box-shadow: 2px 2px 0 rgb(31 29 26 / 0.8); }
.sb > svg, .sb > img { filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.18)); }
.sb--upload { font-size: 11px; gap: 4px; }
.sb--upload svg { width: 22px; height: 22px; }

.search { position: relative; display: block; margin-bottom: 14px; }
.search svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 34px;
  border: 1.5px solid #cbbfa6;
  border-radius: 8px;
  background: #fffdf7;
  font: inherit;
}
.search input:focus { outline: none; border-color: var(--ink); box-shadow: var(--press); }
.search input::-webkit-search-cancel-button { cursor: pointer; }

.sb-section { margin-bottom: 16px; }
.sb-section__title { margin: 0 0 8px; font: 700 10.5px var(--f-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stickerbook--recent { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.stickerbook--recent .sb { padding: 5px; border-radius: 7px; }
.sb-empty { margin: 4px 0 0; padding: 18px; border: 1.5px dashed var(--line); border-radius: 10px; text-align: center; color: var(--muted); font-size: 13px; }

.chips { display: flex; gap: 6px; margin: 0 -18px; padding: 2px 18px 6px; overflow-x: auto; scrollbar-width: none; }
.chips:empty { display: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 28px; padding: 0 11px; border: 1.5px solid #cbbfa6; border-radius: 999px; background: #fffdf7; color: var(--muted); font: 600 12px var(--ui); white-space: nowrap; transition: border-color 0.15s, color 0.15s; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { border-color: var(--ink); background: var(--ink); color: #fbf7ee; }

/* search, heading and pack chips stay pinned while the sticker grid scrolls under them */
.sticker-top {
  position: sticky;
  top: -10px;
  z-index: 4;
  margin: -14px -18px 12px;
  padding: 14px 18px 8px;
  background: var(--panel);
  box-shadow: 0 8px 8px -8px rgb(31 29 26 / 0.18);
}
.sticker-top .sticker-head { margin-bottom: 0; }
.sticker-top .group__head { margin-bottom: 8px; }

/* ---- Page tab: layout picker ---- */
.layout { position: relative; }
.layout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 8px 0 6px;
  border: 1.5px solid var(--ink);
  border-radius: 8px;
  background: #fffdf7;
  color: var(--ink);
  font: 700 13px var(--ui);
  box-shadow: var(--press);
  transition: transform 0.08s, box-shadow 0.08s;
}
.layout-btn:active, .layout-btn[aria-expanded='true'] { transform: translate(2px, 2px); box-shadow: none; }
.layout-btn .layout-ico { width: 18px; height: 25px; }
.layout-chev { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.18s var(--ease); }
.layout-btn[aria-expanded='true'] .layout-chev { transform: rotate(180deg); }

/* a page sketch: cream sheet, ink marks, one accent */
.layout-ico {
  flex: none;
  fill: currentColor;
  color: #3b3731;
  background: #fffdf7;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #cbbfa6;
  --acc: #e8553a;
  --paper2: #fffdf7;
  overflow: hidden;
}

.layout-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 76px);
  gap: 6px;
  padding: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 4px 4px 0 rgb(31 29 26 / 0.85);
  transform-origin: top right;
  animation: menu-in 0.16s var(--ease);
}
.layout-menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
.layout-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 7px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: 600 11.5px var(--ui);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.layout-opt .layout-ico { width: 36px; height: 50px; transition: transform 0.15s var(--ease); }
.layout-opt:hover, .layout-opt:focus-visible { background: #fffdf7; border-color: #cbbfa6; color: var(--ink); outline: none; }
.layout-opt:hover .layout-ico, .layout-opt:focus-visible .layout-ico { transform: translateY(-2px); }
.layout-opt[aria-selected='true'] { border-color: var(--ink); background: #fffdf7; color: var(--ink); }
.layout-opt[aria-selected='true'] .layout-ico { box-shadow: 0 0 0 1.5px var(--ink); }
@media (prefers-reduced-motion: reduce) { .layout-menu { animation: none; } }

/* Each pack card keeps its fanned previews in its own layer, so when cards scroll under the
   pinned search/heading the previews go under it too instead of poking through. */
.pack { position: relative; isolation: isolate; }
.sb { isolation: isolate; }
.sticker-top { z-index: 10; }

/* ---- Placeholders: faint hints on empty fields. Shown on screen, never printed. ---- */
.pg .ph { opacity: 0.28; }
.pg .ph .ph { opacity: 1; }
.pg .blank-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-a);
  opacity: 0.32;
}
.t-image .img-empty.ph { opacity: 1; }
.t-image .img-empty.ph span { opacity: 0.6; }
#printRoot .ph, #printRoot .img-empty { visibility: hidden; }
@media print { .pg .ph, .pg .img-empty { visibility: hidden !important; } }

/* Manrope labels: a touch heavier and tighter than the old mono so small caps stay crisp */
.tab { font-weight: 800; font-size: 11px; letter-spacing: 0.08em; }
.group__title, .sb-section__title, .field > span { font-weight: 800; letter-spacing: 0.09em; }
.group__meta, .pack__count { font-weight: 600; font-size: 11.5px; }
.paperbtn span, .thumb__label { font-weight: 700; font-size: 11px; letter-spacing: 0.06em; }
.pager__label, .draw__label { font-weight: 700; letter-spacing: 0.1em; }
.pack-back { font-weight: 800; }
.brand__tag { font-size: 12px; font-weight: 500; letter-spacing: 0.01em; }

/* ---- Page tab: background tints, items on the page, starters ---- */
.ed-section { margin: 6px -18px 0; padding: 14px 18px 0; border-top: 1.5px dashed var(--line); }
.ed-section__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 20px; margin-bottom: 10px; }
.ed-section__head .group__title { margin: 0; }
.ed-section__head .link { font-size: 12px; }

.tints { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.tint {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 1.5px solid #cbbfa6;
  border-radius: 7px;
  background: var(--t);
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s;
}
.tint:hover { transform: translateY(-2px); border-color: var(--ink); }
.tint[aria-pressed='true'], .tint--custom.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--ink); }
/* default = the zine's own paper: shown with a diagonal slash */
.tint--default { background: linear-gradient(to top right, transparent calc(50% - 1px), #e8553a calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), #fffdf7; }
.tint--custom { background: conic-gradient(#f6d9d3, #f6e7b4, #d6ead3, #d4e2ef, #e2d8ee, #f6d9d3); }
.tint--custom.is-on { background: var(--t); }
.tint--custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

.layers { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.layer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 6px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: #fffdf7;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.layer:hover { border-color: #b9ab8e; }
.layer.is-on { border-color: var(--ink); box-shadow: var(--press); }
.layer__thumb { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; background: #f4ecda; overflow: hidden; }
.layer__thumb img, .layer__art, .layer__art svg { width: 30px; height: 30px; object-fit: contain; overflow: visible; }
.layer__art { display: block; }
.layer__thumb--ico svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.layer__thumb--type { font: 16px 'Special Elite', monospace; color: var(--ink); }
.layer__name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer__name small { font-weight: 500; font-size: 11.5px; color: var(--muted); }
.layer__btns { flex: none; display: flex; gap: 2px; }
.layer__btn { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); }
.layer__btn:hover:not(:disabled) { background: var(--soft); color: var(--ink); }
.layer__btn:disabled { opacity: 0.3; cursor: default; }
.layer__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.starters { padding: 14px; border: 1.5px dashed #cbbfa6; border-radius: 10px; text-align: center; }
.starters p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.starters__btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.starter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 4px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 9px;
  background: #fffdf7;
  box-shadow: var(--press);
  font: 700 12px var(--ui);
  color: var(--ink);
  transition: transform 0.08s, box-shadow 0.08s;
}
.starter:active { transform: translate(2px, 2px); box-shadow: none; }
.starter svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ed-section .group__title { font: 800 11px var(--f-label); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }

/* ============================================================ FIRST RUN */
.welcome {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgb(18 36 29 / 0.55);
  animation: fade-in 0.25s ease;
}
@keyframes fade-in { from { opacity: 0; } }
.welcome__card {
  position: relative;
  width: min(520px, 100%);
  padding: 30px 30px 26px;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 6px 6px 0 rgb(31 29 26 / 0.85);
  animation: card-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes card-in { from { opacity: 0; transform: translateY(14px) rotate(-1.5deg) scale(0.97); } }
.welcome__tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 96px;
  height: 24px;
  transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(45deg, rgb(244 196 58 / 0.8) 0 6px, rgb(244 196 58 / 0.62) 6px 12px);
  clip-path: polygon(0 12%, 4% 0, 9% 14%, 14% 0, 100% 0, 100% 88%, 95% 100%, 90% 86%, 85% 100%, 0 100%);
}
.welcome__kicker { margin: 0 0 6px; font: 800 11px var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: #e8553a; }
.welcome__title { margin: 0 0 10px; font: 800 34px/1 var(--display); letter-spacing: -0.02em; }
.welcome__lede { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: #4a453d; }
.welcome__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: s; }
.welcome__steps li { display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; border: 1.5px dashed #cbbfa6; border-radius: 10px; background: #fffdf7; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.welcome__steps svg { width: 48px; height: 40px; fill: #f4ecda; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.welcome__steps .ln { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.welcome__steps .dash { stroke-dasharray: 2 2.5; }
.welcome__steps .acc { fill: none; stroke: #e8553a; stroke-width: 2.2; }
.welcome__steps b { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 800; color: var(--ink); }
.welcome__actions { display: flex; gap: 10px; }
.welcome__actions .btn { height: 40px; padding: 0 18px; font-size: 14px; white-space: nowrap; }

/* tour: everything dims except a ring around the thing being explained */
.coach { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.coach__ring {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 3px #f4c43a, 0 0 0 9999px rgb(18 36 29 / 0.55);
  transition: left 0.35s var(--ease), top 0.35s var(--ease), width 0.35s var(--ease), height 0.35s var(--ease);
}
.coach__note {
  position: fixed;
  pointer-events: auto;
  padding: 18px 18px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: #fffaf0;
  box-shadow: 4px 4px 0 rgb(31 29 26 / 0.85);
  transition: left 0.35s var(--ease), top 0.35s var(--ease);
}
.coach__tape {
  position: absolute;
  top: -10px;
  left: 22px;
  width: 64px;
  height: 20px;
  transform: rotate(-4deg);
  background: repeating-linear-gradient(-45deg, rgb(255 111 160 / 0.6) 0 6px, rgb(255 111 160 / 0.42) 6px 12px);
}
.coach__arrow { position: absolute; width: 14px; height: 14px; background: #fffaf0; border: 1.5px solid var(--ink); border-width: 0 0 1.5px 1.5px; }
.coach__note[data-side='right'] .coach__arrow { left: -8.5px; transform: translateY(-50%) rotate(45deg); }
.coach__note[data-side='left'] .coach__arrow { right: -8.5px; transform: translateY(-50%) rotate(-135deg); }
.coach__note[data-side='bottom'] .coach__arrow { top: -8.5px; transform: translateX(-50%) rotate(135deg); }
.coach__note[data-side='top'] .coach__arrow { bottom: -8.5px; transform: translateX(-50%) rotate(-45deg); }
.coach__count { margin: 0 0 4px; font: 800 10.5px var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: #e8553a; }
.coach__title { margin: 0 0 6px; font: 800 19px/1.15 var(--display); letter-spacing: -0.01em; }
.coach__body { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: #4a453d; }
.coach__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coach__foot .link { font-size: 12.5px; }
.coach__btns { display: flex; gap: 6px; }
.coach__btns .btn { height: 32px; padding: 0 12px; font-size: 13px; }

@media (max-width: 560px) {
  .welcome__card { padding: 26px 18px 20px; }
  .welcome__title { font-size: 28px; }
  .welcome__steps { grid-template-columns: 1fr; }
  .welcome__steps li { flex-direction: row; align-items: center; }
  .welcome__actions .btn { flex: 1; justify-content: center; padding: 0 10px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome, .welcome__card { animation: none; }
  .coach__ring, .coach__note { transition: none; }
}

/* ============================================================ MOTION */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* binder: the new card's contents settle in when its tab opens */
.pane:not([hidden]) { animation: pane-in 180ms var(--ease-out); }
@keyframes pane-in { from { opacity: 0; transform: translateY(4px); } }

/* sticker book: tiles and pack cards deal in, one after another (capped so big packs don't drag) */
.sb-wrap.is-dealing .sb,
.sb-wrap.is-dealing .pack { animation: deal-in 220ms var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 14) * 25ms); }
@keyframes deal-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } }

/* touchscreens fire hover on tap: no lifts or tilts there */
@media (hover: none) {
  .sb:hover, .pack:hover, .tab:hover, .tint:hover, .swatch:hover,
  .paperbtn:hover .paperchip, .thumb:hover .thumb__pg, .layout-opt:hover .layout-ico { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pane:not([hidden]) { animation: pane-fade 140ms ease; }
  @keyframes pane-fade { from { opacity: 0; } }
  .sb-wrap.is-dealing .sb, .sb-wrap.is-dealing .pack { animation: none; }
}