.bny-coloring{
  --bny-bg:#fffafc;--bny-card:#fff;--bny-ink:#27344e;--bny-border:#e4eaf2;--bny-pink:#ff8fb6;--bny-lilac:#9b72d8;
  width:100%;max-width:100%;margin:1.25rem auto;color:var(--bny-ink);font-family:Vazirmatn,Vazir,Tahoma,Arial,sans-serif;overflow:clip;
}
.bny-coloring,.bny-coloring *{box-sizing:border-box}
.bny-coloring button{font:inherit}
.bny-coloring__shell{width:min(100%,1040px);min-width:0;margin:auto;padding:14px;border:1px solid var(--bny-border);border-radius:26px;background:linear-gradient(145deg,#fff 0%,var(--bny-bg) 100%);box-shadow:0 18px 50px rgba(63,78,109,.10)}
.bny-coloring__topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.bny-coloring__title{font-size:clamp(17px,2.6vw,24px);line-height:1.35;margin:0;font-weight:800}
.bny-coloring__toolbar,.bny-coloring__viewbar,.bny-coloring__actions,.bny-coloring__brush-sizes{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;padding:8px 4px}
.bny-coloring__mode,.bny-coloring__icon-button,.bny-coloring__tool,.bny-coloring__brush{appearance:none;border:1px solid var(--bny-border);background:#fff;color:var(--bny-ink);min-height:48px;border-radius:15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;box-shadow:0 6px 18px rgba(57,72,102,.08);transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;-webkit-tap-highlight-color:transparent}
.bny-coloring__icon-button,.bny-coloring__tool,.bny-coloring__brush{width:48px;min-width:48px;padding:0}
.bny-coloring__mode{padding:0 15px;font-weight:750}
.bny-coloring__mode[aria-pressed="true"],.bny-coloring__tool[aria-pressed="true"]{background:#ffe6f0;border-color:#ffc7dc;color:#9f315f;box-shadow:0 0 0 2px rgba(255,143,182,.18)}
.bny-coloring__brush[aria-pressed="true"]{background:#e8f4ff;border-color:#c7e2f6;color:#176c9c;box-shadow:0 0 0 2px rgba(25,130,196,.15)}
.bny-coloring__mode:hover,.bny-coloring__icon-button:hover,.bny-coloring__tool:hover,.bny-coloring__brush:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(57,72,102,.13)}
.bny-coloring button:focus-visible{outline:3px solid rgba(25,130,196,.28);outline-offset:3px}
.bny-coloring svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bny-coloring__tool--accent{background:#ffe4ee;color:#a73365;border-color:#ffd0e1}
.bny-coloring__tool--accent-secondary{background:#eee7ff;color:#6745a1;border-color:#ded1fb}
.bny-coloring button:disabled{opacity:.38;cursor:not-allowed;transform:none}
.bny-coloring__viewport{position:relative;width:100%;min-height:360px;height:min(67vh,720px);overflow:hidden;touch-action:none;overscroll-behavior:contain;border-radius:20px;background:#fff;border:1px solid #edf0f5;transition:background-color .18s ease;user-select:none;-webkit-user-select:none}
.bny-coloring__stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center center;will-change:transform;touch-action:none;background:#fff}
.bny-coloring__stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.bny-coloring__line-canvas{pointer-events:none;opacity:0}
.bny-coloring__viewport.cursor-pencil{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 25l2-7L22 3l7 7-15 15-9 2z' fill='%23f5c16c' stroke='%2327344e' stroke-width='2'/%3E%3Cpath d='M7 18l7 7' stroke='%2327344e' stroke-width='2'/%3E%3C/svg%3E") 5 27,crosshair}
.bny-coloring__viewport.cursor-eraser{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 22L18 5l9 7-13 15H8z' fill='%23ffb7cf' stroke='%2327344e' stroke-width='2'/%3E%3C/svg%3E") 7 25,crosshair}
.bny-coloring__loader{position:absolute;z-index:5;inset:50% auto auto 50%;width:38px;height:38px;margin:-19px 0 0 -19px;border:4px solid #f1e6ef;border-top-color:var(--bny-pink);border-radius:50%;animation:bny-spin .75s linear infinite}
.bny-coloring.is-ready .bny-coloring__loader{display:none}
@keyframes bny-spin{to{transform:rotate(360deg)}}
.bny-coloring__message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;width:min(92%,520px);padding:18px 20px;border:1px solid #ffd5df;border-radius:18px;background:#fff8fb;color:#9d345f;text-align:center;line-height:1.9;box-shadow:0 16px 40px rgba(44,59,94,.12)}
.bny-coloring__palette{display:flex;gap:10px;padding:14px 6px 8px;overflow-x:auto;scrollbar-width:thin;justify-content:center;overscroll-behavior-inline:contain;direction:ltr}
.bny-coloring__color{width:52px;height:52px;min-width:52px;border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #cfd6e1;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent}
.bny-coloring__color[aria-pressed="true"]{transform:scale(1.08);box-shadow:0 0 0 4px var(--bny-ink)}
.bny-coloring__brush-dot{display:block;border-radius:50%;background:currentColor}
.bny-coloring__brush[data-brush-size="8"] .bny-coloring__brush-dot{width:8px;height:8px}.bny-coloring__brush[data-brush-size="18"] .bny-coloring__brush-dot{width:16px;height:16px}.bny-coloring__brush[data-brush-size="32"] .bny-coloring__brush-dot{width:26px;height:26px}
.bny-coloring__bottom-panel{min-width:0}
.bny-coloring__secondary-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-width:0}
.bny-coloring__secondary-controls>div{padding-block:4px;direction:ltr}
.bny-coloring__confirm{display:flex;align-items:center;justify-content:center;gap:10px;margin:5px auto;padding:9px 12px;width:max-content;max-width:100%;border:1px solid #ffd5df;border-radius:14px;background:#fff5f8}
.bny-coloring__confirm[hidden]{display:none}.bny-coloring__confirm button{border:0;border-radius:10px;padding:7px 14px;cursor:pointer}.bny-coloring__confirm-yes{background:#ff8fb6;color:#fff}.bny-coloring__confirm-no{background:#fff;border:1px solid #dfe5ee!important;color:var(--bny-ink)}
.bny-coloring-error{padding:14px;border:1px solid #f2c9c9;border-radius:12px;background:#fff5f5;color:#8b2525}
.bny-coloring.is-pseudo-fullscreen,.bny-coloring:fullscreen{position:fixed!important;inset:0!important;z-index:2147483646!important;width:100vw!important;max-width:none!important;height:100vh!important;height:100dvh!important;margin:0!important;padding:0!important;background:#fff!important;overflow:hidden!important;transform:none!important;contain:none!important}
.bny-coloring.is-pseudo-fullscreen .bny-coloring__shell,.bny-coloring:fullscreen .bny-coloring__shell{width:100%;height:100%;max-width:none;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;padding:10px;overflow:hidden}
.bny-coloring.is-pseudo-fullscreen .bny-coloring__viewport,.bny-coloring:fullscreen .bny-coloring__viewport{height:auto;min-height:180px;flex:1 1 auto}
.bny-coloring.is-pseudo-fullscreen .bny-coloring__toolbar,.bny-coloring:fullscreen .bny-coloring__toolbar,.bny-coloring.is-pseudo-fullscreen .bny-coloring__palette,.bny-coloring:fullscreen .bny-coloring__palette,.bny-coloring.is-pseudo-fullscreen .bny-coloring__viewbar,.bny-coloring:fullscreen .bny-coloring__viewbar,.bny-coloring.is-pseudo-fullscreen .bny-coloring__actions,.bny-coloring:fullscreen .bny-coloring__actions,.bny-coloring.is-pseudo-fullscreen .bny-coloring__brush-sizes,.bny-coloring:fullscreen .bny-coloring__brush-sizes{flex:0 0 auto}
html.bny-coloring-lock,body.bny-coloring-lock{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none!important}
@media(max-width:700px){
  .bny-coloring{margin:.45rem auto;overflow:hidden;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important}
  .bny-coloring__shell{display:flex;flex-direction:column;width:100%;height:min(720px,calc(var(--bny-available-height,100svh) - 12px));max-height:min(720px,calc(var(--bny-available-height,100svh) - 12px));min-height:0;padding:6px;border-radius:18px;overflow:hidden;overscroll-behavior:contain;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important}
  .bny-coloring__topbar{flex:0 0 auto;margin:0 2px 4px;min-height:42px}
  .bny-coloring__title{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bny-coloring__toolbar{flex:0 0 auto;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-width:100%;padding:4px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bny-coloring__toolbar::-webkit-scrollbar,.bny-coloring__palette::-webkit-scrollbar,.bny-coloring__secondary-controls::-webkit-scrollbar{display:none}
  .bny-coloring__viewport{flex:1 1 0;height:auto;min-height:190px;max-height:none;border-radius:14px;inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important}
  .bny-coloring__bottom-panel{flex:0 0 auto;min-width:0;max-width:100%;padding-top:2px}
  .bny-coloring__palette{justify-content:flex-start;gap:8px;max-width:100%;padding:7px 5px 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bny-coloring__secondary-controls{justify-content:flex-start;flex-wrap:nowrap;gap:5px;max-width:100%;padding:2px 4px 3px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .bny-coloring__secondary-controls>div{display:flex;flex:0 0 auto;justify-content:flex-start;flex-wrap:nowrap;gap:5px;padding:0;min-width:max-content;max-width:none}
  .bny-coloring__icon-button,.bny-coloring__tool,.bny-coloring__brush{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:13px}
  .bny-coloring__mode{min-height:44px;padding:0 11px;border-radius:13px;white-space:nowrap}
  .bny-coloring__color{width:50px;height:50px;min-width:50px;border-width:3px}
  .bny-coloring__confirm{position:absolute;z-index:20;left:50%;bottom:12px;transform:translateX(-50%);white-space:nowrap;box-shadow:0 12px 35px rgba(38,52,78,.2)}
  .bny-coloring__shell{position:relative}
  .bny-coloring.is-pseudo-fullscreen .bny-coloring__shell,.bny-coloring:fullscreen .bny-coloring__shell{height:100%;max-height:none;min-height:0}
}
@media(max-width:430px){
  .bny-coloring__mode span{display:none}
  .bny-coloring__mode{width:44px;min-width:44px;padding:0}
  .bny-coloring__color{width:46px;height:46px;min-width:46px}
}
@media(max-width:700px) and (max-height:650px){
  .bny-coloring__topbar{min-height:36px}
  .bny-coloring__icon-button,.bny-coloring__tool,.bny-coloring__brush{width:40px;height:40px;min-width:40px;min-height:40px}
  .bny-coloring__mode{min-height:40px}
  .bny-coloring__color{width:42px;height:42px;min-width:42px}
  .bny-coloring__palette{padding-block:4px}
}
@media(pointer:coarse){.bny-coloring__viewport{cursor:default!important}}
@media(prefers-reduced-motion:reduce){.bny-coloring *{animation-duration:.001ms!important;transition-duration:.001ms!important}}


.bny-coloring__watermark{position:absolute;top:14px;right:14px;z-index:8;pointer-events:none;opacity:.78;width:88px;max-width:20%;padding:5px;border-radius:16px;background:rgba(255,255,255,.78);box-shadow:0 8px 24px rgba(34,47,76,.12);backdrop-filter:blur(3px);}
.bny-coloring__watermark img{display:block;max-width:100%;height:auto;filter:drop-shadow(0 2px 10px rgba(34,47,76,.10));}
@media (max-width:767px){.bny-coloring__watermark{top:10px;right:10px;width:68px;max-width:24%;}}


/* Bunny Coloring 1.6.7 — visible source diagnostics */
.bny-coloring__message{max-height:min(72%,620px);overflow:auto;text-align:right}
.bny-coloring__message>p{margin:0 0 12px;text-align:center}
.bny-coloring__error-report{display:grid;gap:9px;color:#8f2f57}
.bny-coloring__error-report>strong{display:block;text-align:center}
.bny-coloring__error-report code{display:inline-block;direction:ltr;unicode-bidi:isolate;padding:2px 6px;border-radius:7px;background:rgba(143,47,87,.08);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}
.bny-coloring__error-report p{margin:0;text-align:center}
.bny-coloring__error-report ol{display:grid;gap:9px;margin:4px 0 0;padding:0 22px 0 0;text-align:right}
.bny-coloring__error-report li{padding:9px 11px;border:1px solid rgba(157,52,95,.16);border-radius:12px;background:rgba(255,255,255,.54);line-height:1.65;overflow-wrap:anywhere}
.bny-coloring__error-report li small{display:block;margin-top:4px;color:#775d68;font-size:10px;text-align:left;overflow-wrap:anywhere}
.bny-coloring__debug-raw{margin-top:4px;border-top:1px dashed rgba(157,52,95,.22);padding-top:9px}
.bny-coloring__debug-raw summary{cursor:pointer;font-weight:800;text-align:center}
.bny-coloring__debug-raw pre{max-height:260px;overflow:auto;margin:9px 0 0;padding:10px;border-radius:10px;background:#201822;color:#f7dce8;text-align:left;white-space:pre-wrap;word-break:break-word;font-size:10px;line-height:1.55}
html[data-bunny-theme="dark"] .bny-coloring__error-report li{background:rgba(20,32,51,.58);border-color:#65404f}
html[data-bunny-theme="dark"] .bny-coloring__error-report code{background:#301e28;color:#f5bfd1}


/* ========================================================================
 * Bunny Coloring 1.6.9 — native dark mode and transparent canvas stack
 * The Bunny theme previously applied a white background to every canvas in
 * dark mode. Because the game stacks base, drawing and line-mask canvases,
 * the white background of the drawing canvas hid the original line art.
 * Keep only the base surface white; every upper canvas must stay transparent.
 * ===================================================================== */
.bny-coloring .bny-coloring__stage{
  isolation:isolate;
  background:#fff!important;
}
.bny-coloring .bny-coloring__stage canvas[data-role="fill-canvas"]{
  z-index:1;
  background:#fff!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}
.bny-coloring .bny-coloring__stage canvas[data-role="draw-canvas"]{
  z-index:2;
  background:transparent!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}
.bny-coloring .bny-coloring__stage canvas[data-role="line-canvas"]{
  z-index:3;
  background:transparent!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  opacity:0!important;
}

html[data-bunny-theme="dark"] .bny-coloring{
  --bny-bg:#0f1724;
  --bny-card:#182538;
  --bny-ink:#eef5ff;
  --bny-border:#34475f;
  --bny-pink:#e28aaa;
  --bny-lilac:#b79ae4;
  color:#eef5ff!important;
}
html[data-bunny-theme="dark"] .bny-coloring__shell{
  background:linear-gradient(145deg,#182538 0%,#142033 100%)!important;
  color:#eef5ff!important;
  border-color:#34475f!important;
  box-shadow:0 18px 50px rgba(0,0,0,.30)!important;
}
html[data-bunny-theme="dark"] .bny-coloring__title{
  color:#f5f9ff!important;
}
html[data-bunny-theme="dark"] .bny-coloring :is(
  .bny-coloring__mode,
  .bny-coloring__icon-button,
  .bny-coloring__tool,
  .bny-coloring__brush
){
  background:#1b2d43!important;
  color:#eaf2fb!important;
  border-color:#40556f!important;
  box-shadow:0 6px 18px rgba(0,0,0,.20)!important;
}
html[data-bunny-theme="dark"] .bny-coloring :is(
  .bny-coloring__mode,
  .bny-coloring__icon-button,
  .bny-coloring__tool,
  .bny-coloring__brush
):hover{
  background:#22384f!important;
  border-color:#58708d!important;
  box-shadow:0 9px 22px rgba(0,0,0,.28)!important;
}
html[data-bunny-theme="dark"] .bny-coloring__mode[aria-pressed="true"],
html[data-bunny-theme="dark"] .bny-coloring__tool[aria-pressed="true"]{
  background:#382331!important;
  border-color:#8e5870!important;
  color:#f5bfd2!important;
  box-shadow:0 0 0 2px rgba(226,138,170,.18)!important;
}
html[data-bunny-theme="dark"] .bny-coloring__brush[aria-pressed="true"]{
  background:#1b344b!important;
  border-color:#5b86a6!important;
  color:#b9ddf5!important;
  box-shadow:0 0 0 2px rgba(91,134,166,.18)!important;
}
html[data-bunny-theme="dark"] .bny-coloring__viewport{
  background:#fff!important;
  border-color:#4b5f78!important;
  color-scheme:light!important;
}
html[data-bunny-theme="dark"] .bny-coloring__stage,
html[data-bunny-theme="dark"] .bny-coloring__stage canvas[data-role="fill-canvas"]{
  background:#fff!important;
  color-scheme:light!important;
}
html[data-bunny-theme="dark"] .bny-coloring__stage canvas[data-role="draw-canvas"],
html[data-bunny-theme="dark"] .bny-coloring__stage canvas[data-role="line-canvas"]{
  background:transparent!important;
  color-scheme:light!important;
}
html[data-bunny-theme="dark"] .bny-coloring__color{
  border-color:#eef5ff!important;
  box-shadow:0 0 0 2px #40556f!important;
}
html[data-bunny-theme="dark"] .bny-coloring__color[aria-pressed="true"]{
  box-shadow:0 0 0 4px #eef5ff!important;
}
html[data-bunny-theme="dark"] .bny-coloring__confirm{
  background:#241d28!important;
  color:#eef5ff!important;
  border-color:#5a3b50!important;
}
html[data-bunny-theme="dark"] .bny-coloring__confirm-no{
  background:#1b2d43!important;
  color:#eef5ff!important;
  border-color:#40556f!important;
}
html[data-bunny-theme="dark"] .bny-coloring__message{
  background:#241d28!important;
  color:#f2b8cd!important;
  border-color:#65404f!important;
  box-shadow:0 16px 40px rgba(0,0,0,.30)!important;
}
html[data-bunny-theme="dark"] .bny-coloring-error{
  background:#351f27!important;
  color:#f3b8ca!important;
  border-color:#65404f!important;
}
html[data-bunny-theme="dark"] .bny-coloring.is-pseudo-fullscreen,
html[data-bunny-theme="dark"] .bny-coloring:fullscreen{
  background:#0f1724!important;
}


/* ========================================================================
 * Bunny Coloring 1.7.0 — mobile scroll ownership
 * The page and all game controls may scroll normally. Only the visible drawing
 * canvas owns touch gestures, because those gestures create strokes or pinch
 * zoom. This prevents the game wrapper from trapping the whole mobile page.
 * ===================================================================== */
.bny-coloring{
  overflow:visible!important;
  touch-action:pan-y!important;
  overscroll-behavior:auto!important;
  min-width:0!important;
}
.bny-coloring__shell,
.bny-coloring__topbar,
.bny-coloring__toolbar,
.bny-coloring__bottom-panel,
.bny-coloring__palette,
.bny-coloring__secondary-controls{
  touch-action:pan-x pan-y!important;
  overscroll-behavior:auto!important;
}
.bny-coloring__viewport{
  touch-action:pan-y!important;
  overscroll-behavior:auto!important;
}
.bny-coloring__stage{
  touch-action:pan-y!important;
  pointer-events:auto;
}
.bny-coloring__stage canvas[data-role="fill-canvas"],
.bny-coloring__stage canvas[data-role="line-canvas"]{
  pointer-events:none!important;
  touch-action:pan-y!important;
}
.bny-coloring__stage canvas[data-role="draw-canvas"]{
  pointer-events:auto!important;
  touch-action:none!important;
}

@media(max-width:700px){
  .bny-coloring{
    width:min(100%,calc(100vw - 12px))!important;
    max-width:calc(100vw - 12px)!important;
    margin-inline:auto!important;
  }
  .bny-coloring__shell{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .bny-coloring__viewport{
    flex:0 0 auto!important;
    width:100%!important;
    max-width:100%!important;
    height:min(62svh,560px)!important;
    min-height:260px!important;
    overflow:hidden!important;
  }
  .bny-coloring__toolbar,
  .bny-coloring__palette,
  .bny-coloring__secondary-controls{
    overscroll-behavior-inline:auto!important;
    -webkit-overflow-scrolling:touch;
  }
}

/* Fullscreen intentionally remains gesture-locked around the canvas app. */
.bny-coloring.is-pseudo-fullscreen,
.bny-coloring:fullscreen{
  overflow:hidden!important;
  touch-action:none!important;
}
.bny-coloring.is-pseudo-fullscreen .bny-coloring__shell,
.bny-coloring:fullscreen .bny-coloring__shell{
  height:100%!important;
  max-height:none!important;
  overflow:hidden!important;
}