/* =====================================================================
   NORTH POLE ART STUDIO - canvas-first Coloring Book skin
   The drawing owns the viewport. Four illustrated tool blocks live above
   the canvas and open temporary menus only when a child needs them.
   ===================================================================== */
.cb-workshop {
  --cb-cream: #fffaf0;
  --cb-paper: #fffefb;
  --cb-ink: #18342f;
  --cb-green: #174b3b;
  --cb-green-deep: #0c2f27;
  --cb-red: #c9403f;
  --cb-gold: #f2c85d;
  --cb-gold-deep: #bf872a;
  --cb-blue: #55a9d8;
  --cb-purple: #9467d8;
  --cb-shadow: rgba(20, 37, 31, .26);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: clamp(6px, 1vw, 12px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "head" "tools" "stage";
  gap: clamp(5px, .8vw, 10px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: clamp(16px, 2.2vw, 26px);
  background:
    radial-gradient(circle at 16% 12%, rgba(255,244,195,.95) 0 1.6px, transparent 2px),
    radial-gradient(circle at 85% 18%, rgba(255,255,255,.75) 0 2px, transparent 2.5px),
    linear-gradient(145deg, rgba(255,253,244,.97), rgba(231,244,239,.97));
  box-shadow: inset 0 0 0 1px rgba(95,67,35,.08), 0 20px 60px rgba(7,28,24,.32);
}
.np-win--coloring .cb-workshop {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "head" "tools" "stage";
}
/* compact studio header */
.cb-workshop .cb-head {
  grid-area: head;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 2px clamp(2px, .6vw, 8px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.cb-brand { min-width: 0; display: flex; align-items: center; gap: 9px; }
.cb-brand-star {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffe27a, #f2b834);
  border: 2px solid #fff7d4;
  box-shadow: 0 3px 0 #bd8328, 0 6px 14px rgba(90,58,19,.2);
}
.cb-brand-star svg { width: 29px; height: 29px; fill: #fff2a8; stroke: #7c5724; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cb-brand-copy { min-width: 0; display: grid; line-height: 1.02; }
.cb-kicker, .cb-tray-kicker {
  font-family: "Mulish", system-ui, sans-serif;
  font-size: 9px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase;
  color: #8f6128;
}
.cb-workshop .cb-pagetitle {
  min-width: 0;
  max-width: min(55vw, 620px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--cb-ink);
  font-family: "Mountains of Christmas", "Mulish", system-ui, sans-serif;
  font-style: normal; font-size: clamp(17px, 2.1vw, 27px); font-weight: 700;
}
.cb-headright { position:relative; z-index:14; flex:none; display:flex; align-items:center; gap:7px; }
.cb-utility {
  width:44px; height:44px; flex:none; padding:0; display:grid; place-items:center;
  border:1px solid rgba(38,78,66,.2); border-radius:13px; background:rgba(255,255,255,.88);
  color:var(--cb-green); cursor:pointer; box-shadow:0 3px 9px rgba(28,55,47,.12);
}
.cb-utility svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cb-utility:disabled { opacity:.34; cursor:default; box-shadow:none; }
.cb-quick-undo:not(:disabled) { background:#f3ecff; color:#5b3b86; }
.cb-zoom-control { position:relative; flex:none; }
.cb-zoom-toggle[aria-expanded="true"] { background:#e8f5ef; box-shadow:0 0 0 3px rgba(47,141,89,.18); }
.cb-zoom-panel {
  position:absolute; z-index:30; top:calc(100% + 7px); right:0; min-width:224px; padding:7px;
  display:grid; grid-template-columns:44px minmax(54px,1fr) 44px auto; align-items:center; gap:6px;
  border:1px solid rgba(57,87,75,.18); border-radius:14px; background:#fffdf7;
  box-shadow:0 12px 30px rgba(23,52,43,.24);
}
.cb-zoom-panel[hidden] { display:none; }
.cb-zoom-panel button { min-width:44px; min-height:44px; padding:0 9px; border:1px solid rgba(57,87,75,.16); border-radius:10px; background:#fff; color:#254a3c; font:900 16px/1 "Mulish",sans-serif; cursor:pointer; }
.cb-zoom-panel button:disabled { opacity:.34; cursor:default; }
.cb-zoom-panel output { min-width:54px; text-align:center; color:#31584a; font:900 11px/1 "Mulish",sans-serif; }
.cb-zoom-panel .cb-zoom-fit { width:auto; font-size:10px; }
.cb-workshop .cb-counter {
  padding: 6px 10px; border-radius: 999px;
  color: #765321; background: rgba(255,241,190,.84); border: 1px solid rgba(177,119,31,.26);
  font: 800 10px/1 "Mulish", system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.cb-workshop .cb-expand {
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(38,78,66,.2); border-radius: 14px;
  background: rgba(255,255,255,.78); color: var(--cb-green); cursor: pointer;
  box-shadow: 0 3px 9px rgba(28,55,47,.12);
}
.cb-expand svg { width: 21px; height: 21px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.cb-expand:active { transform: translateY(1px) scale(.97); }
/* drawing stage */
.cb-workshop .cb-stage {
  grid-area: stage;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: clamp(13px, 2vw, 22px);
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.94), rgba(240,247,244,.82) 48%, rgba(208,229,221,.74) 100%),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(28,76,61,.035) 31px 32px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(28,76,61,.035) 31px 32px);
  box-shadow: inset 0 0 0 1px rgba(31,81,64,.1);
}
.cb-stage-glow {
  position: absolute; width: min(78%, 760px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,234,150,.26), transparent 70%);
  filter: blur(8px); pointer-events: none;
}
.cb-workshop .cb-book {
  position: relative;
  z-index: 2;
  width: calc(100% - 8px);
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 448 / 600;
  display: grid;
  place-items: center;
  perspective: 1500px;
}
.cb-zoom-layer {
  position:absolute; inset:0; z-index:2; transform-origin:50% 50%; will-change:transform;
}
.cb-workshop .cb-page {
  position: relative;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 448 / 600;
  overflow: hidden;
  border-radius: clamp(10px, 1.4vw, 18px);
  background: var(--cb-paper);
  border: 1px solid rgba(92,69,37,.15);
  box-shadow: 0 16px 42px rgba(28,54,45,.28), 0 2px 4px rgba(45,70,60,.18);
  transform-origin: center;
}
.cb-workshop .cb-canvas { position:absolute; inset:0; z-index:1; width:100%; height:100%; display:block; cursor:crosshair; touch-action:none; border-radius:inherit; }
.cb-workshop[data-zoomed="true"] .cb-canvas { cursor:grab; }
.cb-workshop[data-zoomed="true"] .cb-canvas:active { cursor:grabbing; }
.cb-workshop .cb-canvas[hidden] { display:none; }
.cb-sparkle-canvas { position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; pointer-events:none; border-radius:inherit; }
.cb-sparkle-canvas[hidden] { display:none; }
.cb-lineart-hires { position:absolute; inset:0; z-index:3; width:100%; height:100%; display:block; object-fit:fill; pointer-events:none; border-radius:inherit; mix-blend-mode:multiply; user-select:none; -webkit-user-drag:none; }
.cb-lineart-hires[hidden] { display:none; }
.cb-cover { position:absolute; inset:0; }
.cb-cover[hidden] { display:none; }
.cb-cover svg { width:100%; height:100%; display:block; }
.cb-hint { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:4; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.9); color:#765321; font:700 11px/1.2 "Mulish",sans-serif; }
.cb-hint[hidden] { display:none; }
/* previous/next arrows hug the page and fade behind the block controls */
.cb-workshop .cb-nav {
  position: absolute; top: 50%; z-index: 5;
  width: 44px; height: 52px; margin: 0; padding: 0;
  display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.88); border-radius: 14px;
  background: rgba(23,75,59,.9); color: #fff8db;
  box-shadow: 0 5px 16px rgba(14,46,37,.25);
  font: 900 30px/1 system-ui, sans-serif; cursor:pointer;
  transform: translateY(-50%);
}
.cb-workshop .cb-prev { left: -25px; }
.cb-workshop .cb-next { right: -25px; }
.cb-workshop .cb-nav:active:not(:disabled) { transform: translateY(-50%) scale(.94); }
.cb-workshop .cb-nav:disabled { opacity:.22; cursor:default; }
/* Compact North Pole tool rail above the artwork. No control overlaps a
   colorable region, and the four actions stay in the same order everywhere. */
.cb-canvas-tools {
  grid-area: tools;
  z-index: 7;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1.3vw, 14px);
  padding: 1px 6px 4px;
}
.cb-tool-block {
  position: relative;
  flex: 0 0 auto;
  width: clamp(54px, 4.8vw, 64px); min-height: clamp(54px, 5vw, 62px);
  padding: 4px 4px 3px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  cursor:pointer;
  border: 2px solid rgba(255,255,255,.96); border-radius: 16px;
  color:#29433a; background:linear-gradient(180deg,#fffdf6,#f5ead5);
  box-shadow: 0 3px 0 #d6c5a7, 0 6px 14px rgba(28,53,45,.20);
  transition: transform .14s ease, filter .14s ease;
}
.cb-tool-block b { font:900 clamp(8px, .72vw, 10px)/1 "Mulish", system-ui, sans-serif; }
.cb-tool-icon {
  width: clamp(31px, 3vw, 38px); height: clamp(31px, 3vw, 38px);
  display:grid; place-items:center; border-radius: 11px;
  background:linear-gradient(180deg,#fff5c6,#f1c651); color:#70501e;
  box-shadow: inset 0 0 0 1px rgba(120,80,20,.12), 0 2px 4px rgba(80,50,20,.12);
}
.cb-tool-icon svg { width:76%; height:76%; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.cb-tool-block--pictures .cb-tool-icon { background:linear-gradient(180deg,#ffe889,#f2bf48); }
.cb-tool-block--tools .cb-tool-icon { background:linear-gradient(180deg,#d7c2ff,#9e72dc); color:#4e2f85; }
.cb-tool-block--save .cb-tool-icon { background:linear-gradient(180deg,#aee9c5,#4cac73); color:#164d31; }
.cb-tool-icon--color { position:relative; background:var(--sw,#f0142b); border:5px solid rgba(255,255,255,.72); }
.cb-tool-icon--color::after { content:""; position:absolute; inset:5px 8px auto 8px; height:7px; border-radius:50%; background:rgba(255,255,255,.42); transform:rotate(-18deg); }
.cb-tool-block[aria-expanded="true"] { transform:translateY(-2px) scale(1.04); filter:brightness(1.04); box-shadow:0 4px 0 #c89534,0 0 0 4px rgba(242,200,93,.34),0 11px 26px rgba(28,53,45,.28); }
.cb-tool-block:active { transform:translateY(2px) scale(.97); }
.cb-tool-block:disabled { opacity:.45; cursor:default; }
.cb-stage-caption {
  position:absolute; z-index:3; left:50%; bottom:6px; transform:translateX(-50%);
  max-width:calc(100% - 150px); padding:6px 12px; border-radius:999px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:rgba(255,255,255,.84); border:1px solid rgba(65,97,84,.14);
  color:#3f6255; font:800 10px/1.1 "Mulish",sans-serif;
  box-shadow:0 3px 12px rgba(28,53,45,.12); pointer-events:none;
}
/* keyboard paint cursor */
.cb-cursor { position:absolute; z-index:6; pointer-events:none; width:26px; height:26px; transform:translate(-50%,-50%); border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 2px #122e26, inset 0 0 0 2px #122e26; }
.cb-cursor::after { content:""; position:absolute; left:50%; top:50%; width:3px; height:3px; transform:translate(-50%,-50%); border-radius:50%; background:#122e26; box-shadow:0 0 0 1px #fff; }
.cb-cursor[hidden] { display:none; }
.cb-canvas:focus-visible { outline:3px solid #1c5c47; outline-offset:-5px; }
/* fill sparkle */
.cb-fill-fx { position:absolute; inset:0; z-index:5; pointer-events:none; overflow:hidden; }
.cb-fill-pop { position:absolute; width:12px; height:12px; transform:translate(-50%,-50%); }
.cb-fill-pop::before,.cb-fill-pop::after { content:""; position:absolute; inset:0; background:#f7cb55; clip-path:polygon(50% 0,61% 37%,100% 50%,61% 63%,50% 100%,39% 63%,0 50%,39% 37%); animation:cbSpark .62s ease-out both; }
.cb-fill-pop::after { background:#fff; animation-delay:.08s; transform:scale(.58) rotate(22deg); }
@keyframes cbSpark { from { opacity:1; transform:scale(.35) rotate(0); } to { opacity:0; transform:scale(3.2) rotate(65deg); } }
/* temporary menus */
.cb-sheet-scrim {
  position:absolute; inset:0; z-index:8; margin:0; padding:0; border:0; border-radius:inherit;
  background:rgba(12,35,29,.26); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .16s ease;
}
.cb-workshop.has-sheet .cb-sheet-scrim { opacity:1; pointer-events:auto; }
.cb-menu,
.cb-workshop .cb-picture-tray,
.cb-workshop .cb-panel {
  position:absolute; z-index:9; box-sizing:border-box;
  display:none; min-width:0; min-height:0;
  border:3px solid rgba(255,255,255,.94); border-radius:22px;
  background:linear-gradient(180deg,#fffdf7,#f5eddf);
  color:var(--cb-ink);
  box-shadow:0 18px 50px rgba(12,35,29,.32),0 0 0 1px rgba(104,72,31,.12);
  overflow:hidden;
}
.cb-menu.is-open,
.cb-workshop .cb-picture-tray.is-open,
.cb-workshop .cb-panel.is-open { display:flex; flex-direction:column; }
.cb-workshop .cb-panel { grid-area:auto !important; padding:0; overflow:hidden; scrollbar-gutter:auto; }
.cb-menu-head { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 12px 9px 15px; border-bottom:1px solid rgba(72,95,84,.11); background:rgba(255,255,255,.58); }
.cb-menu-head > div { display:grid; gap:2px; min-width:0; }
.cb-menu-head strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:900 17px/1.05 "Mulish",system-ui,sans-serif; }
.cb-sheet-close { width:44px; height:44px; flex:none; display:grid; place-items:center; padding:0; border:1px solid rgba(63,89,77,.16); border-radius:14px; background:#fff; color:#34584a; font:700 28px/1 system-ui,sans-serif; cursor:pointer; }
.cb-sheet-close:active { transform:scale(.95); }
.cb-menu--pictures { inset:clamp(8px,2vw,18px); }
.cb-gallery { flex:1 1 auto; min-height:0; padding:12px; overflow:auto; overscroll-behavior:contain; display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:9px; align-content:start; }
.cb-gallery-card { position:relative; min-width:0; padding:0; aspect-ratio:448/600; overflow:hidden; border:2px solid #ded4c1; border-radius:12px; background:#fff; cursor:pointer; box-shadow:0 3px 9px rgba(43,65,56,.12); }
.cb-gallery-card img { width:100%; height:100%; display:block; object-fit:cover; }
.cb-gallery-card.is-current { border-color:#e5aa2d; box-shadow:0 0 0 3px rgba(242,200,93,.36),0 5px 12px rgba(43,65,56,.14); }
.cb-gallery-num { position:absolute; left:5px; bottom:5px; min-width:23px; padding:3px 6px; border-radius:999px; background:rgba(14,48,38,.82); color:#fff; font:800 10px/1 "Mulish",sans-serif; }
.cb-gallery-saved { position:absolute; top:5px; right:5px; width:23px; height:23px; display:none; place-items:center; border-radius:50%; background:#f6c948; color:#734d10; font-size:13px; box-shadow:0 2px 5px rgba(0,0,0,.15); }
.cb-gallery-card.has-art .cb-gallery-saved { display:grid; }
.cb-menu--pictures .cb-picker { flex:none; display:flex; align-items:center; gap:9px; padding:9px 12px 12px; border-top:1px solid rgba(72,95,84,.11); }
.cb-picker label { flex:none; color:#795523; font:900 10px/1 "Mulish",sans-serif; text-transform:uppercase; letter-spacing:.07em; }
.cb-picker select { min-width:0; width:100%; min-height:44px; padding:8px 34px 8px 10px; border:1px solid rgba(51,89,74,.22); border-radius:12px; background:#fff; color:#244a3d; font:700 16px/1.2 "Mulish",system-ui,sans-serif; }
.cb-menu--color { top:12px; right:12px; width:min(350px,calc(100% - 24px)); max-height:calc(100% - 24px); }
.cb-color-readout { flex:none; display:flex; align-items:center; gap:10px; margin:11px 13px 6px; padding:9px 10px; border-radius:14px; background:#fff8e7; border:1px solid rgba(180,126,39,.18); }
.cb-color-dot { width:34px; height:34px; flex:none; border-radius:11px; background:var(--sw,#f0142b); border:4px solid #fff; box-shadow:0 0 0 1px rgba(74,65,47,.17),0 3px 6px rgba(60,48,28,.12); }
.cb-color-readout > span:last-child { display:grid; line-height:1.05; }
.cb-color-readout b { font:900 14px/1.1 "Mulish",sans-serif; }
.cb-color-readout small { margin-top:3px; color:#7a827c; font:700 10px/1.1 "Mulish",sans-serif; }
.cb-workshop .cb-tools { display:block; min-height:0; margin:0; padding:6px 12px 14px; overflow:auto; }
.cb-workshop .cb-tools[hidden] { display:none; }
.cb-workshop .cb-palette { display:grid; grid-template-columns:repeat(5,minmax(44px,1fr)); gap:8px; justify-items:center; width:100%; }
.cb-workshop .cb-swatch { position:relative; box-sizing:border-box; width:48px; height:48px; padding:0; border:4px solid rgba(255,255,255,.9); border-radius:15px; background:var(--sw,#fff); cursor:pointer; box-shadow:0 0 0 1px rgba(40,56,49,.14),0 4px 8px rgba(25,49,40,.15); transition:transform .12s ease; }
.cb-workshop .cb-swatch::after { content:""; position:absolute; left:8px; right:15px; top:6px; height:7px; border-radius:50%; background:rgba(255,255,255,.42); transform:rotate(-18deg); }
.cb-workshop .cb-swatch.is-active { transform:translateY(-2px) scale(1.06); box-shadow:0 0 0 3px #f3c956,0 6px 10px rgba(25,49,40,.18); }
.cb-menu--tools { left:12px; bottom:12px; width:min(330px,calc(100% - 24px)); max-height:calc(100% - 24px); overflow:auto; overscroll-behavior:contain; }
.cb-menu--tools .cb-menu-head { position:sticky; top:0; z-index:2; }
.cb-mode-card { width:calc(100% - 24px); display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:9px; margin:10px 12px 0; padding:10px; text-align:left; border-radius:14px; border:1px solid rgba(56,93,77,.14); background:#fff; color:#254a3c; cursor:pointer; }
.cb-mode-card.is-active { background:#edf8f1; border-color:rgba(45,122,78,.30); box-shadow:inset 0 0 0 1px rgba(45,122,78,.08); }
.cb-mode-star { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#f5cc5c; color:#70501e; font-size:19px; }
.cb-mode-star--sparkle { background:linear-gradient(145deg,#dac7ff,#91dfff); color:#573b87; }
.cb-mode-card span:nth-child(2) { display:grid; gap:2px; }
.cb-mode-card b { font:900 13px/1.1 "Mulish",sans-serif; }
.cb-mode-card small { color:#69776f; font:650 10px/1.25 "Mulish",sans-serif; }
.cb-mode-check { padding:4px 7px; border-radius:999px; background:#2f8d59; color:#fff; font:900 9px/1 "Mulish",sans-serif; text-transform:uppercase; opacity:0; }
.cb-mode-card.is-active .cb-mode-check { opacity:1; }
.cb-sparkle-options { margin:9px 12px 0; padding:10px; border-radius:14px; background:linear-gradient(145deg,#fbf7ff,#eff9ff); border:1px solid rgba(102,76,151,.16); }
.cb-sparkle-options[hidden] { display:none; }
.cb-sparkle-label { display:grid; gap:2px; margin-bottom:8px; color:#4e3a70; }
.cb-sparkle-label b { font:900 12px/1.1 "Mulish",sans-serif; }
.cb-sparkle-label small { color:#756b82; font:650 9.5px/1.25 "Mulish",sans-serif; }
.cb-sparkle-palette { display:grid; grid-template-columns:1fr; gap:7px; }
.cb-sparkle-choice { min-width:0; min-height:50px; padding:5px 7px; display:grid; grid-template-columns:minmax(110px,1fr) 92px; align-items:center; gap:9px; border:1px solid rgba(80,67,112,.15); border-radius:12px; background:#fff; color:#4e3a70; cursor:pointer; text-align:left; }
.cb-sparkle-choice > b { font:850 9px/1.08 "Mulish",sans-serif; }
.cb-sparkle-choice.is-active { box-shadow:0 0 0 3px #b89be5; background:#f8f2ff; transform:translateY(-1px); }
.cb-sparkle-pen { position:relative; height:32px; min-width:0; margin-left:17px; display:block; overflow:visible; border:2px solid rgba(73,67,77,.22); border-radius:7px 15px 15px 7px; box-shadow:inset 0 2px 4px rgba(255,255,255,.55),0 2px 5px rgba(55,42,67,.18); }
.cb-sparkle-pen::before { content:""; position:absolute; left:-18px; top:4px; width:20px; height:20px; border-radius:8px 3px 3px 8px; background:linear-gradient(180deg,#777b84,#4f535c); border:2px solid rgba(54,54,60,.35); }
.cb-sparkle-pen::after { content:""; position:absolute; right:-13px; top:7px; width:15px; height:16px; clip-path:polygon(0 0,100% 50%,0 100%); background:var(--pen-tip,#f7c94f); filter:drop-shadow(1px 1px 1px rgba(30,30,35,.2)); }
.cb-sparkle-pen i { position:absolute; inset:0; border-radius:inherit; background-image:radial-gradient(circle at 18% 25%,rgba(255,255,255,.95) 0 1px,transparent 1.5px),radial-gradient(circle at 72% 68%,rgba(255,255,255,.85) 0 1px,transparent 1.5px),radial-gradient(circle at 48% 42%,rgba(255,255,255,.72) 0 1px,transparent 1.5px); background-size:13px 11px,17px 14px,19px 16px; pointer-events:none; }
.cb-sparkle-choice[data-sparkle="0"] .cb-sparkle-pen { --pen-tip:#f7c94f; background:linear-gradient(90deg,#d99518,#f7c94f 35%,#fff0a8 70%,#e3a321); }
.cb-sparkle-choice[data-sparkle="1"] .cb-sparkle-pen { --pen-tip:#bdeaff; background:linear-gradient(90deg,#eefbff,#9edcff,#ffffff,#c9ecff); }
.cb-sparkle-choice[data-sparkle="2"] .cb-sparkle-pen { --pen-tip:#62c9ef; background:conic-gradient(from 45deg at 20% 50%,#58c8ee,#c9d6ff,#ffffff,#9ee8ff,#58c8ee); }
.cb-sparkle-choice[data-sparkle="3"] .cb-sparkle-pen { --pen-tip:#f06de0; background:repeating-linear-gradient(90deg,#ff5e82 0 10px,#ffca3a 10px 20px,#52d68a 20px 30px,#4eb8ff 30px 40px,#a978ff 40px 50px,#f06de0 50px 60px); }
.cb-sparkle-choice[data-sparkle="4"] .cb-sparkle-pen { --pen-tip:#ef476f; background:repeating-linear-gradient(135deg,#ef476f 0 10px,#fff 10px 20px,#55d6c2 20px 30px,#f7a7c3 30px 40px); }
.cb-clear-sparkles { width:100%; min-height:44px; margin-top:8px; border:1px solid rgba(105,79,142,.18); border-radius:11px; background:#fff; color:#6b4c8f; font:850 11px/1 "Mulish",sans-serif; cursor:pointer; }
.cb-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:11px 12px 13px; }
.cb-workshop .cb-btn { min-width:0; min-height:48px; padding:9px 10px; border:1px solid rgba(57,87,75,.18); border-radius:13px; color:#254a3c; background:#fff; font:900 13px/1.15 "Mulish",sans-serif; cursor:pointer; }
.cb-btn--undo { background:#f3ecff !important; color:#5b3b86 !important; }
.cb-btn--reset { background:#fff1ee !important; color:#923d37 !important; }
.cb-menu--save { right:12px; bottom:12px; width:min(340px,calc(100% - 24px)); max-height:calc(100% - 24px); }
.cb-downloads { display:grid; gap:9px; padding:12px; }
.cb-workshop .cb-dl { min-width:0; min-height:62px; padding:9px 11px; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; text-align:left; border:1px solid rgba(57,87,75,.16); border-radius:15px; cursor:pointer; box-shadow:none; }
.cb-workshop .cb-dl > span:first-child { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.58); font-size:20px; }
.cb-workshop .cb-dl > span:last-child { display:grid; gap:2px; }
.cb-workshop .cb-dl b { font:900 14px/1.05 "Mulish",sans-serif; }
.cb-workshop .cb-dl small { font:650 10px/1.2 "Mulish",sans-serif; opacity:.76; }
.cb-dl--save { color:#164d31 !important; background:linear-gradient(180deg,#bfeccf,#74c693) !important; }
.cb-dl--book { color:#5f4215 !important; background:linear-gradient(180deg,#ffeaa0,#f2c85d) !important; }
.cb-dl:disabled { opacity:.42; cursor:default; }
/* page turn */
.cb-turn-next { animation:cbTurnNext .28s ease-in both; }
.cb-turn-prev { animation:cbTurnPrev .28s ease-in both; }
@keyframes cbTurnNext { 0%{transform:rotateY(0)} 48%{transform:rotateY(-10deg);filter:brightness(.9)} 100%{transform:rotateY(0);filter:none} }
@keyframes cbTurnPrev { 0%{transform:rotateY(0)} 48%{transform:rotateY(10deg);filter:brightness(.9)} 100%{transform:rotateY(0);filter:none} }
/* fullscreen uses the same canvas-first system, simply with more room */
body.cb-noscroll { overflow:hidden; }
.cb-frame.cb-fs { position:fixed; inset:0; z-index:4000; width:auto; height:auto; margin:0; padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); border:0; border-radius:0; background:linear-gradient(145deg,#fffdf4,#e8f3ef); }
.cb-frame.cb-fs .cb-book { max-width:none; max-height:none; }
.cb-close { position:fixed; top:max(10px,env(safe-area-inset-top)); right:max(10px,env(safe-area-inset-right)); z-index:4010; width:44px; height:44px; display:grid; place-items:center; border:2px solid #fff; border-radius:14px; background:#214f40; color:#fff; font:700 26px/1 system-ui,sans-serif; box-shadow:0 5px 15px rgba(0,0,0,.22); cursor:pointer; }
@media (min-aspect-ratio: 3 / 5) {
  .cb-workshop .cb-book {
    width: auto;
    height: calc(100% - 8px);
    max-width: none;
    max-height: none;
  }
}
@media (min-width: 900px) and (min-height: 650px) {
  .np-win.np-win--coloring .np-win-bar {
    gap:12px; padding:8px 14px;
    padding-top:max(8px,env(safe-area-inset-top));
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .np-win.np-win--coloring .np-win-back { min-height:44px; padding:9px 18px; }
  .np-win.np-win--coloring .np-win-title { font-size:clamp(20px,2.5vw,27px); }
  .np-win.np-win--coloring .np-win-fs { width:44px; height:44px; }
  .np-win.np-win--coloring .np-win-body { padding:10px; }
  .cb-workshop { padding:7px; gap:5px; }
  .cb-workshop .cb-head { min-height:36px; padding:0 4px; }
  .cb-brand-star { width:32px; height:32px; border-radius:11px; }
  .cb-brand-star svg { width:24px; height:24px; }
  .cb-kicker { font-size:8px; }
  .cb-workshop .cb-pagetitle { font-size:clamp(16px,1.7vw,23px); }
}
@media (min-width: 700px) {
  .cb-workshop,
  .np-win--coloring .cb-workshop {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head tools" "stage stage";
  }
  .cb-canvas-tools { justify-content:flex-end; align-self:center; padding:0 6px 2px 4px; }
}
/* Phones keep a compact toolbar row above the paper; temporary menus remain
   bounded bottom sheets. */
@media (max-width: 700px), (pointer: coarse) and (max-width: 900px) {
  .cb-workshop { padding:5px; border-radius:16px; gap:3px; }
  .cb-workshop .cb-head { min-height:42px; padding:0 2px; }
  .cb-brand-star { width:32px; height:32px; border-radius:11px; }
  .cb-brand-star svg { width:24px; height:24px; }
  .cb-kicker { display:none; }
  .cb-workshop .cb-pagetitle { max-width:45vw; font-size:16px; }
  .cb-workshop .cb-counter { padding:5px 7px; font-size:9px; }
  .cb-workshop .cb-expand { width:44px; height:44px; border-radius:12px; }
  .cb-workshop .cb-book { width:calc(100% - 6px); height:auto; }
  .cb-workshop .cb-nav { width:40px; height:46px; font-size:26px; background:rgba(23,75,59,.82); }
  .cb-workshop .cb-prev { left:2px; }
  .cb-workshop .cb-next { right:2px; }
  .cb-canvas-tools { gap:7px; padding:0 2px 3px; }
  .cb-tool-block { width:50px; min-height:49px; padding:3px 2px 2px; gap:1px; border-width:2px; border-radius:13px; box-shadow:0 2px 0 #d6c5a7,0 4px 10px rgba(28,53,45,.18); }
  .cb-tool-icon { width:27px; height:27px; border-radius:9px; }
  .cb-tool-block b { font-size:7.5px; }
  .cb-stage-caption { bottom:5px; max-width:calc(100% - 122px); padding:4px 8px; font-size:8.5px; }
  .cb-menu,
  .cb-workshop .cb-picture-tray,
  .cb-workshop .cb-panel { top:auto; left:7px; right:7px; bottom:7px; width:auto; max-height:min(72%,610px); border-radius:20px; }
  .cb-menu--pictures { inset:auto 7px 7px; max-height:82%; }
  .cb-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); padding:10px; gap:7px; }
  .cb-menu--pictures .cb-picker { display:grid; grid-template-columns:1fr; gap:5px; }
  .cb-menu--color { max-height:70%; }
  .cb-workshop .cb-palette { grid-template-columns:repeat(5,minmax(44px,1fr)); gap:7px; }
  .cb-workshop .cb-swatch { width:46px; height:46px; }
}
@media (max-width: 430px) {
  .cb-brand-star { display:none; }
  .cb-workshop .cb-pagetitle { max-width:25vw; font-size:14px; }
  .cb-headright { gap:4px; }
  .cb-utility { width:44px; height:44px; border-radius:11px; }
  .cb-workshop .cb-counter { font-size:8px; }
  .cb-brand { gap:5px; }
  .cb-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cb-workshop .cb-palette { grid-template-columns:repeat(4,minmax(44px,1fr)); }
  .cb-stage-caption { display:none; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .np-win.np-win--coloring .np-win-bar { padding-top:5px; padding-bottom:5px; }
  .np-win.np-win--coloring .np-win-body { padding:4px; }
  .cb-workshop,
  .np-win--coloring .cb-workshop {
    padding:4px;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:40px minmax(0,1fr);
    grid-template-areas:"head tools" "stage stage";
  }
  .cb-workshop .cb-head { min-height:38px; }
  .cb-workshop .cb-pagetitle { max-width:24vw; font-size:14px; }
  .cb-workshop .cb-counter { padding:4px 6px; font-size:8px; }
  .cb-brand-star { display:none; }
  .cb-headright { gap:4px; }
  .cb-utility { width:44px; height:44px; border-radius:10px; }
  .cb-workshop .cb-expand { width:40px; height:40px; }
  .cb-workshop .cb-book { width:calc(100% - 6px); height:auto; }
  .cb-canvas-tools { gap:5px; padding-bottom:2px; }
  .cb-tool-block { width:46px; min-height:44px; padding:2px; }
  .cb-tool-icon { width:24px; height:24px; }
  .cb-tool-block b { font-size:7px; }
  .cb-menu,
  .cb-workshop .cb-picture-tray,
  .cb-workshop .cb-panel { max-height:88%; }
  .cb-menu--pictures { inset:5px; max-height:none; }
  .cb-gallery { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (hover:hover) and (pointer:fine) {
  .cb-tool-block:hover { transform:translateY(-3px) scale(1.03); filter:brightness(1.03); }
  .cb-gallery-card:hover { transform:translateY(-2px); border-color:#e4b343; }
  .cb-swatch:hover { transform:translateY(-2px) scale(1.04); }
  .cb-workshop .cb-expand:hover,.cb-utility:hover:not(:disabled),.cb-zoom-panel button:hover:not(:disabled),.cb-sheet-close:hover,.cb-workshop .cb-btn:hover,.cb-workshop .cb-dl:hover { filter:brightness(1.04); }
}
.cb-tool-block:focus-visible,.cb-nav:focus-visible,.cb-expand:focus-visible,.cb-utility:focus-visible,.cb-zoom-panel button:focus-visible,.cb-sheet-close:focus-visible,.cb-gallery-card:focus-visible,.cb-swatch:focus-visible,.cb-mode-card:focus-visible,.cb-sparkle-choice:focus-visible,.cb-clear-sparkles:focus-visible,.cb-btn:focus-visible,.cb-dl:focus-visible,.cb-picker select:focus-visible { outline:3px solid #255e4a; outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
  .cb-turn-next,.cb-turn-prev,.cb-fill-pop::before,.cb-fill-pop::after { animation:none; }
  .cb-tool-block,.cb-sheet-scrim,.cb-swatch { transition:none; }
}
/* Canvas breathing-room refinement: the paper is the hero, with clean white
   studio space surrounding it. */
.cb-workshop .cb-stage {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(92,69,37,.10);
}
.cb-stage-glow { display:none; }
.cb-workshop .cb-page {
  border-color: rgba(92,69,37,.20);
  box-shadow: 0 18px 44px rgba(28,54,45,.24), 0 2px 5px rgba(45,70,60,.18);
}