/* The Neuro Art drawing pages (worksheets/draw-*). Same frame, fonts and flame as
   the musicogram pages beside them; the two hand colours are the sheets' own
   purple and pink, read from the PDFs. */
:root{
  --or:#f3661e; --te:#4db6ac; --te-d:#00897b; --ink:#2d2a26; --mu:#6f6a64; --cr:#faf8f6; --ln:#ece0d6;
  --left:#7c3aa6; --right:#e0409a; --go:#3fae6f;
}
*{box-sizing:border-box}
html,body{margin:0;background:#eef0ee;color:var(--ink)}
.page{max-width:760px;margin:22px auto;background:var(--cr);border-radius:20px;
  box-shadow:0 24px 70px rgba(45,42,38,.13);padding:28px 32px 26px}
.head{text-align:center;border-bottom:2px dotted var(--te);padding-bottom:14px}
h1{font-family:'Cardo',Georgia,serif;font-weight:700;font-size:44px;color:var(--or);margin:0;line-height:1;letter-spacing:.5px;text-wrap:balance}
.sub{font-family:'Cardo',Georgia,serif;font-style:italic;font-size:17px;color:var(--mu);margin-top:6px}
.tag{font-family:'Montserrat',system-ui,sans-serif;font-size:10.5px;font-weight:700;letter-spacing:2px;color:#c24f12;text-transform:uppercase;margin-top:8px}

/* The two hands. Each lights while that hand has a finger on its half; when both
   are down at once the middle counts the time spent drawing together. */
.hands{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 12px;
  font-family:'Montserrat',system-ui,sans-serif;font-size:12.5px;font-weight:600}
.hand{display:inline-flex;white-space:nowrap;align-items:center;gap:8px;padding:7px 13px 7px 9px;border-radius:999px;
  border:1.5px solid currentColor;background:#fff;transition:background-color .18s ease-out,color .18s ease-out}
.hand i{width:12px;height:12px;border-radius:50%;border:2px solid currentColor;transition:background-color .18s ease-out}
.hand-l{color:var(--left)} .hand-r{color:var(--right)}
.hand.on{color:#fff} .hand-l.on{background:var(--left)} .hand-r.on{background:var(--right)}
.hand.on i{background:#fff;border-color:#fff}
.together{color:var(--mu);text-align:center;font-weight:500;transition:color .18s ease-out}
.together b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700;margin-left:4px}
.together.on{color:var(--te-d)} .together.on b{color:var(--te-d)}

/* The sheet: a white page on the cream, the printed figure under a canvas.
   Sized so the whole figure fits on screen with no scrolling mid-stroke. */
.sheet{position:relative;margin:0 auto;background:#fff;border-radius:14px;
  box-shadow:0 2px 12px rgba(0,0,0,.06),0 18px 44px -24px rgba(60,30,10,.22);
  aspect-ratio:var(--ratio);width:min(100%, calc((100svh - 240px) * var(--ratio)));
  touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}
.guide{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .3s ease-out;pointer-events:none}
.sheet.blank .guide{opacity:0}
#ink{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}

.tools{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.tool{font-family:'Montserrat',system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--ink);
  background:#fff;border:1.5px solid var(--ln);border-radius:12px;padding:11px 16px;min-height:44px;cursor:pointer;
  transition:border-color .15s ease-out,background-color .15s ease-out}
.tool:hover{border-color:var(--or)}
.tool[aria-pressed="true"]{background:#fef3de;border-color:var(--or)}
.tool:disabled{opacity:.45;cursor:default;border-color:var(--ln)}
.tool:focus-visible,#ink:focus-visible{outline:3px solid var(--te);outline-offset:2px}

.how{font-family:'Montserrat',system-ui,sans-serif;font-size:13px;color:var(--mu);text-align:center;
  margin:12px auto 0;max-width:62ch;line-height:1.6}
.quote{font-family:'Caveat',cursive;font-size:24px;color:#d4550f;text-align:center;margin:10px 0 0}
.quote:empty{display:none}
.foot{display:flex;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--ln);
  font-family:'Montserrat',system-ui,sans-serif;font-size:11px;color:var(--mu)}

@media (max-width:640px){
  .page{margin:0;border-radius:0;padding:16px 12px 18px;box-shadow:none}
  h1{font-size:32px} .sub{font-size:15px} .tag{font-size:9.5px}
  .hands{font-size:11px;margin:10px 0 8px} .hand{padding:6px 10px 6px 7px;gap:6px}
  .together{font-size:10.5px;line-height:1.3}
  .sheet{width:min(100%, calc((100svh - 190px) * var(--ratio)))}
  .how{font-size:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}