/* Napkin Sketch: layout pad, marker ink, one highlighter per state. */
:root {
  --pad: #e9eef2;
  --grid: #dbe3ea;
  --grid-2: #cbd6e0;
  --paper: #fbfcfd;
  --ink: #141414;
  --ink-2: #464c55;
  --ink-3: #6a717c;
  --hl: #fff04a;
  --pink: #ff5fa2;
  --focus: #0d8a7f;
  --warn: #b4420c;
  --hand: "Shantell Sans", "Segoe Print", system-ui, sans-serif;
  --num: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* wobbly marker corners */
  --r1: 14px 4px 12px 5px / 5px 12px 4px 14px;
  --r2: 5px 13px 4px 12px / 12px 4px 14px 5px;
  --r3: 10px 6px 14px 4px / 4px 14px 6px 10px;
  --swipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3 24 L9 18 L52 20 L95 14 L98 30 L96 46 L99 63 L95 80 L57 84 L6 88 L2 72 L5 55 L1 40 Z' fill='%23fff04a'/%3E%3C/svg%3E");
  /* marker-drawn outlines: two passes of ink, corners overshoot */
  --box1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23141414' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='2.2' d='M0.8 6C30 3.4 66 4.6 99 3.8M95.6 0.8C96.6 34 95.4 68 96.4 99.2M99.2 95C66 96.6 32 95.2 1 96.2M4.2 99.4C3.2 66 5 32 3.4 0.6'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1' opacity='.5' d='M7 3.2C34 1.8 60 2.6 86 1.6'/%3E%3C/g%3E%3C/svg%3E");
  --box2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23141414' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='2.2' d='M3 4.4C36 5.6 70 3.2 97.2 4.8C96 36 97.6 70 95.8 96.2C64 94.6 32 96.8 3.6 95.4C5 66 2.4 34 4.6 1'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1' opacity='.5' d='M1.6 14C2.8 40 0.8 66 2.2 90'/%3E%3C/g%3E%3C/svg%3E");
  --box3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23141414' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='2.2' d='M5.4 3.2C36 4.8 68 2.6 99.4 4.2M96.8 1C95.2 30 97.4 70 95.6 95.4C66 97 34 94.8 4 96.8C3 66 5.2 34 3.6 6.4'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='1' opacity='.5' d='M14 98.6C40 97.4 62 99.2 84 98'/%3E%3C/g%3E%3C/svg%3E");
  --boxfill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath vector-effect='non-scaling-stroke' fill='%23141414' stroke='%23141414' stroke-width='2.3' stroke-linejoin='round' d='M1.6 4.5C30 2.4 68 3.2 98.2 2.6C98.9 32 97.6 68 98.4 96.8C68 98.1 30 96.9 2.4 97.6C1.2 68 2.6 30 1.9 4.5Z'/%3E%3C/svg%3E");
  font-family: var(--ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
::selection { background: var(--hl); color: var(--ink); }
* { scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ico { width: 15px; height: 15px; vertical-align: -3px; flex: none; }

body {
  background: var(--pad);
  display: grid;
  grid-template-columns: 300px minmax(320px, 1fr) minmax(400px, 1.2fr);
  grid-template-rows: 60px minmax(0, 1fr);
  grid-template-areas: "top top top" "side net view";
  gap: 14px;
  padding: 0 14px 14px;
  font-size: 13px;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- marker-boxed controls ---------- */
.mk {
  position: relative;
  cursor: pointer;
  font-family: var(--hand);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  padding: 10px 15px 11px;
  border: 0;
  --box: var(--box1);
  --hi: none;
  background: var(--box) center / 100% 100% no-repeat, var(--hi) center 58% / 0% 66% no-repeat;
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
  transition: transform .12s cubic-bezier(.2,.9,.3,1), background-size .32s cubic-bezier(.16,1,.3,1);
}
.mk:nth-child(3n+2) { --box: var(--box2); }
.mk:nth-child(3n) { --box: var(--box3); }
.mk:hover { transform: translateY(-1px) rotate(-.4deg); }
.mk:active { transform: translateY(1px); }
/* the highlighter sweeps across left to right when a toggle goes on */
.mk.on, .mk[aria-pressed="true"] {
  --hi: var(--swipe);
  background: var(--box) center / 100% 100% no-repeat, var(--swipe) 50% 58% / 86% 66% no-repeat;
  animation: sweep .38s cubic-bezier(.16,1,.3,1);
}
@keyframes sweep { from { background-size: 100% 100%, 0% 66%; background-position: center, 7% 58%; } }
.mk-main, .mk-main[aria-pressed="true"] { background: var(--boxfill) center / 100% 100% no-repeat; color: var(--paper); animation: none; }
.mk-main:hover { filter: brightness(1.35); }
.mk-quiet { background: none; }
.mk-quiet:hover { background: var(--box) center / 100% 100% no-repeat; }
.mk:disabled { opacity: .35; cursor: default; transform: none; }
.mk.mini { font-size: 12px; padding: 5px 9px 6px; }
.mk .deg { font-size: 12px; font-weight: 600; opacity: .8; }

/* ---------- top bar ---------- */
.top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proj-name {
  font-family: var(--hand); font-weight: 800; font-size: 22px; letter-spacing: -0.01em;
  border: 2px solid transparent; border-radius: var(--r2); background: transparent;
  padding: 4px 8px; min-width: 0; flex: 1; max-width: 560px; text-overflow: ellipsis;
}
.proj-name:hover, .proj-name:focus { border-color: var(--ink); background: var(--paper); outline: none; }
.top-actions { display: flex; align-items: center; gap: 4px; }
.top-actions .mk { font-size: 13px; padding: 7px 11px 8px; }
.sep { width: 2px; height: 22px; background: var(--ink); opacity: .15; margin: 0 6px; border-radius: 2px; }
.menu { position: relative; }
.menu-list {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r3); padding: 6px;
  box-shadow: 0 10px 24px -8px rgba(20,20,20,.25);
}
.menu.open .menu-list { display: block; }
.menu-list button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-family: var(--hand); font-size: 14px; }
.menu-list button:hover { background: var(--swipe) center 60% / 100% 70% no-repeat; }
.menu-list hr { border: 0; border-top: 2px dashed var(--grid-2); margin: 4px 0; }

/* ---------- panels ---------- */
.side, .net-pane, .stage { border: 2px solid var(--ink); background: var(--paper); }
.side { grid-area: side; border-radius: var(--r1); overflow: auto; display: flex; flex-direction: column; }
.tabs { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 2px dashed var(--grid-2); position: sticky; top: 0; background: var(--paper); z-index: 2; }
.tab { flex: 1; border: 0; background: none; cursor: pointer; font-family: var(--hand); font-weight: 700; font-size: 16px; padding: 6px; color: var(--ink-3); }
.tab.on { color: var(--ink); background: var(--swipe) center 62% / 80% 64% no-repeat; }
.group { padding: 14px 16px; border-bottom: 2px dashed var(--grid); }
.group:empty { display: none; }
.group h3 { margin: 0 0 10px; font-family: var(--hand); font-size: 15px; font-weight: 700; color: var(--ink); }
.group h3 small { font-weight: 500; color: var(--ink-3); font-size: 13px; }
.check-h label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sub.off { opacity: .4; pointer-events: none; }
.row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.row > span:first-child { flex: 1; color: var(--ink-2); }
.row input[type=number] { width: 66px; }
.row input[type=range] { flex: 1.3; }
.row em, .dim em { font-style: normal; color: var(--ink-3); font-size: 12px; }
.row output { width: 44px; text-align: right; color: var(--ink-2); font-size: 12px; }
input[type=number], input[type=text], select, textarea {
  border: 1.5px solid var(--ink); border-radius: var(--r2); padding: 5px 7px; background: #fff; color: var(--ink);
}
input[type=number] { font-family: var(--num); font-size: 12.5px; }
textarea { width: 100%; resize: vertical; min-height: 64px; font-family: var(--ui); }
input[type=color] { width: 34px; height: 28px; padding: 2px; border: 1.5px solid var(--ink); border-radius: var(--r3); background: #fff; cursor: pointer; }
input[type=range] { accent-color: var(--ink); min-width: 0; }
input[type=checkbox] { accent-color: var(--ink); width: 16px; height: 16px; }
.dim { display: grid; grid-template-columns: 52px 1fr 66px 22px; align-items: center; gap: 8px; margin: 8px 0; }
.dim span { color: var(--ink-2); }
.readout { margin: 10px 0 0; color: var(--ink-2); line-height: 1.55; font-size: 12px; }
.readout b { color: var(--ink); font-weight: 600; font-family: var(--num); font-size: 11.5px; }
.readout .warn { color: var(--warn); }
.seg { display: flex; gap: 4px; margin-bottom: 10px; }
.seg button { flex: 1; cursor: pointer; border: 1.5px solid transparent; background: none; padding: 6px 10px; border-radius: var(--r2); color: var(--ink-3); font-family: var(--hand); font-weight: 600; font-size: 14px; }
.seg button:hover { border-color: var(--grid-2); }
.seg button.on { color: var(--ink); border-color: transparent; background: var(--box2) center / 100% 100% no-repeat, var(--swipe) center 60% / 86% 64% no-repeat; }
.swatches { display: flex; flex-wrap: wrap; gap: 5px; flex: 2; justify-content: flex-end; }
.swatches .sw { width: 22px; height: 22px; border-radius: var(--r3); border: 1.5px solid var(--ink); position: relative; overflow: hidden; }
.swatches .sw input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.swatches .add { width: 22px; height: 22px; padding: 0; border: 1.5px dashed var(--ink); background: none; border-radius: var(--r2); cursor: pointer; display: grid; place-items: center; }
.add-row { display: flex; gap: 8px; margin-bottom: 12px; }
.add-row .mk { flex: 1; }
.library { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.library .asset { aspect-ratio: 1; border-radius: var(--r3); background: var(--ink); padding: 10px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; border: 2px solid var(--ink); transition: transform .12s; }
.library .asset:hover { transform: rotate(-1.2deg); }
.library .asset img { max-width: 100%; max-height: 100%; }
.library .asset .x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); display: none; place-items: center; cursor: pointer; }
.library .asset:hover .x { display: grid; }
.hint { color: var(--ink-2); font-size: 12px; line-height: 1.55; margin: 12px 0 0; }
.layers { list-style: none; margin: 0; padding: 0; }
.layers li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: var(--r2); cursor: pointer; }
.layers li:hover { background: var(--pad); }
.layers li.on { background: var(--swipe) center 55% / 100% 80% no-repeat; }
.layers li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layers li small { color: var(--ink-3); }
.layers li button { padding: 2px 4px; border: 1.5px solid transparent; background: none; border-radius: 6px; cursor: pointer; display: grid; place-items: center; }
.layers li button:hover { border-color: var(--ink); background: var(--paper); }
.props-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.props-grid label { display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); font-size: 12px; }
.props-grid label.full { grid-column: 1 / -1; }
.props-grid label.inline { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
.props-grid input[type=number], .props-grid select { width: 100%; }
.props-actions { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.props-actions .mk { flex: 1; font-size: 13px; }
.props-actions .danger { color: var(--warn); }

/* ---------- net editor ---------- */
.net-pane { grid-area: net; border-radius: var(--r2); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.net-head { display: flex; align-items: center; gap: 12px; padding: 10px 12px 0; }
.net-head .seg { margin: 0; width: 240px; }
.net-info { color: var(--ink-3); font-size: 11.5px; }
.net-wrap {
  flex: 1; position: relative; min-height: 0;
  background-color: var(--pad);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 20px 20px;
  margin: 10px; border-radius: var(--r3);
}
.net-wrap.drop { outline: 2.5px dashed var(--ink); outline-offset: -8px; }
#net { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }

/* ---------- the stage ---------- */
.stage {
  grid-area: view; position: relative; border-radius: var(--r3); overflow: hidden; min-height: 0;
  display: flex; flex-direction: column;
  background-color: var(--pad);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;
}
.view-wrap { position: absolute; inset: 0; }
.view-wrap canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.view-wrap canvas:active { cursor: grabbing; }

/* a thin paper halo keeps ink arrows legible where they land on a dark box */
.notes-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; filter: drop-shadow(0 0 1px #fbfcfd) drop-shadow(0 0 1.5px #fbfcfd); }
.notes-ink path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.notes-ink .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.notes { position: absolute; inset: 0; pointer-events: none; }
.note {
  position: absolute; left: 0; top: 0; max-width: 190px;
  font-family: var(--hand); font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--ink);
  opacity: 0; transition: opacity .35s ease-out; will-change: transform;
  text-wrap: balance;
}
.note.show { opacity: 1; }
.note .num { font-size: 13.5px; font-weight: 600; text-decoration: underline 1.5px; text-underline-offset: 3px; }

.stage-head { display: none; position: relative; z-index: 2; padding: 22px 26px 0; pointer-events: none; }
.stage-title { margin: 0; font-family: var(--hand); font-weight: 800; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.02; letter-spacing: -0.02em; max-width: 16ch; text-wrap: balance; }
.stage-sig { margin: 10px 0 0; font-family: var(--hand); font-size: 14px; color: var(--ink-2); }
.stage-sig span { color: var(--ink); font-weight: 700; padding: 0 3px; background: linear-gradient(101deg, transparent 0 2%, var(--pink) 4% 95%, transparent 98%) center 85% / 100% 42% no-repeat; }

.band { position: relative; z-index: 2; margin-top: auto; display: flex; align-items: flex-end; gap: 18px; padding: 12px; pointer-events: none; }
.band > * { pointer-events: auto; }
.facts { display: none; margin: 0; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; width: 100%; }
.lid-ctl { display: flex; align-items: center; gap: 10px; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#btnExitPresent { display: none; }

/* a hand-ruled marker line for the lid slider */
.lid-range { -webkit-appearance: none; appearance: none; width: 150px; height: 22px; background: transparent; cursor: pointer; }
.lid-range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: var(--ink); }
.lid-range::-moz-range-track { height: 3px; border-radius: 3px; background: var(--ink); }
.lid-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -9px; border: 2px solid var(--ink); border-radius: 46% 54% 52% 48% / 55% 47% 53% 45%; background: var(--paper); }
.lid-range::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 46% 54% 52% 48% / 55% 47% 53% 45%; background: var(--paper); }

/* ---------- present mode ---------- */
body.present { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); grid-template-areas: "view"; padding: 0; gap: 0; height: 100dvh; overflow: hidden; }
body.present .top, body.present .side, body.present .net-pane { display: none; }
body.present .stage { border: 0; border-radius: 0; }
body.present .stage-head { display: block; }
body.present #btnExitPresent { display: inline-flex; }
body.present.shared #btnExitPresent { display: none; }
body.present .band {
  align-items: stretch; gap: 0; padding: 0 0 env(safe-area-inset-bottom); margin-top: auto;
  background: var(--paper); border-top: 2px solid var(--ink);
}
body.present .band::before {
  /* torn-off pad edge */
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='8' viewBox='0 0 48 8'%3E%3Cpath d='M0 8 Q3 2 6 6 T12 5 T18 7 T24 4 T30 6 T36 3 T42 6 T48 5 V8Z' fill='%23fbfcfd'/%3E%3C/svg%3E") repeat-x bottom / 48px 8px;
}
body.present .facts {
  display: flex; flex-wrap: wrap; align-content: center; gap: 6px 22px;
  padding: 14px 22px; border-right: 2px dashed var(--grid-2); min-width: 0; flex: 1 1 48%;
}
.facts div { display: flex; flex-direction: column; gap: 2px; }
.facts dt { font-family: var(--hand); font-size: 12.5px; color: var(--ink-2); }
.facts dd { margin: 0; font-family: var(--num); font-size: 14px; font-weight: 600; white-space: nowrap; }
body.present .controls { padding: 12px 18px; justify-content: flex-start; flex: 1 1 52%; gap: 10px 14px; }
body.present .lid-ctl .mk { font-size: 17px; padding: 11px 18px 12px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); background: var(--ink); color: var(--paper); font-family: var(--hand); font-size: 15px; padding: 10px 16px; border-radius: var(--r1); opacity: 0; pointer-events: none; transition: .25s cubic-bezier(.16,1,.3,1); z-index: 50; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- narrow screens ---------- */
@media (max-width: 1100px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto 70vh 70vh auto; grid-template-areas: "top" "view" "net" "side"; overflow: auto; height: auto; }
  .top { flex-wrap: wrap; padding: 10px 0 0; }
  .top-actions { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  body.present .band { flex-direction: column; }
  body.present .facts { border-right: 0; border-bottom: 2px dashed var(--grid-2); padding: 12px 16px; gap: 6px 16px; }
  .facts dd { font-size: 12.5px; }
  body.present .controls { padding: 10px 12px 14px; justify-content: center; }
  .lid-ctl { width: 100%; }
  .lid-range { flex: 1; width: auto; }
  .toggles { width: 100%; }
  .toggles .mk { flex: 1 1 22%; padding: 8px 4px 9px; font-size: 13px; }
  body.present .lid-ctl .mk { font-size: 16px; padding: 10px 14px 11px; }
  .stage-head { padding: 16px 16px 0; }
  .stage-sig { font-size: 13px; margin-top: 6px; }
  .note { font-size: 13.5px; max-width: 130px; }
  .note .num { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk, .note, .toast { transition: none; animation: none !important; }
  .mk:hover { transform: none; }
}
.notes-ink path.head { fill: var(--ink); stroke-width: 1.4; opacity: 0; }

/* ---------- booklet editor rows ---------- */
.fin-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 2px dashed var(--grid); }
.fin-row:first-of-type { border-top: 0; }
.fin-sw { width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: var(--r3); margin-top: 18px; }
.group small { font-weight: 500; color: var(--ink-3); }

/* ---------- booklet reader ---------- */
.bk {
  position: fixed; inset: 0; z-index: 40; outline: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 24px 16px calc(20px + env(safe-area-inset-bottom));
  background-color: var(--pad);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  animation: bk-in .35s cubic-bezier(.16,1,.3,1);
}
.bk[hidden] { display: none; }
@keyframes bk-in { from { opacity: 0; } }
.bk-stage { display: grid; place-items: center; }
.bk-book {
  --pw: 360px;
  position: relative; width: calc(var(--pw) * 2); height: calc(var(--pw) * 210 / 148);
  transform: translateX(var(--shift, 0px)); transition: transform .6s cubic-bezier(.4,.1,.2,1);
  perspective: 2600px; cursor: pointer; touch-action: pan-y;
}
.bk-book.single { width: var(--pw); }
.bk-page { position: absolute; top: 0; width: var(--pw); height: 100%; }
.bk-l { left: 0; }
.bk-r { left: var(--pw); }
.bk-book.single .bk-l { display: none; }
.bk-book.single .bk-r { left: 0; }
.bk-page img, .bk-leaf img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.bk-page img { box-shadow: 0 22px 40px -22px rgba(20, 24, 32, .55), 0 2px 6px rgba(20, 24, 32, .12); }
/* gutter shading where the pages meet the staples */
.bk-l::after, .bk-r::after { content: ""; position: absolute; top: 0; bottom: 0; width: 14%; pointer-events: none; }
.bk-l::after { right: 0; background: linear-gradient(to left, rgba(0,0,0,.16), transparent); }
.bk-r::after { left: 0; background: linear-gradient(to right, rgba(0,0,0,.16), transparent); }
.bk-book.single .bk-r::after { display: none; }
.bk-l:has(img[style*="hidden"])::after, .bk-r:has(img[style*="hidden"])::after { display: none; }
.bk-leaf { position: absolute; top: 0; width: var(--pw); height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.45,.05,.25,1); z-index: 2; }
.bk-leaf[hidden] { display: none; }
.bk-leaf.from-r { left: var(--pw); transform-origin: left center; }
.bk-book.single .bk-leaf.from-r { left: 0; }
.bk-leaf.from-r.go, .bk-leaf.from-r.turned { transform: rotateY(-180deg); }
.bk-leaf.from-l { left: 0; transform-origin: right center; }
.bk-leaf.from-l.go { transform: rotateY(180deg); }
.bk-leaf img { position: absolute; inset: 0; backface-visibility: hidden; }
.bk-leaf .bk-back { transform: rotateY(180deg); }
.bk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.bk-count { min-width: 150px; text-align: center; font-size: 13px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .bk-book, .bk-leaf { transition: none; } .bk { animation: none; } }
.props-grid > label { min-width: 0; }
.props-grid input[type=text], .props-grid textarea { width: 100%; min-width: 0; }
.photo-row { gap: 6px; }
.photo-row > span:first-child { font-size: 12px; }
.photo-row select { width: 104px; min-width: 0; font-size: 12px; }
.step-row { margin-bottom: 10px; }
.mk[hidden] { display: none; }