/* Painting v5 board: flow bar on top, pen tray at the bottom, no panel behind either.
   Values come from design-tokens.json (pt-v5-*, kid-motion-*). Groups are separated by space only. */
#app[data-two-stage=true]{--pt-workspace-draw-top:var(--pt-v5-draw-top)}
@media(max-width:760px){#app[data-two-stage=true]{--pt-workspace-draw-top:var(--pt-v5-draw-top-sm)}}
/* The right-hand tool column and its popovers are replaced by the tray. */
#flowDock{display:none!important}
#flowShell button{font:inherit;color:inherit}

/* Name bubble: the only visible guidance text on the board. */
#flowName{position:fixed;z-index:var(--kid-z-bubble);left:0;top:0;padding:4px 12px;border-radius:var(--kid-shape-bubble);background:var(--pt-v5-ink);color:var(--pt-v5-tip-ink);font-size:var(--pt-v5-bubble-size);font-weight:700;line-height:1.5;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity var(--kid-motion-release) var(--kid-motion-ease-out),transform var(--kid-motion-release) var(--kid-motion-ease-out)}
#flowName[data-side=above]{transform:translateY(-4px)}
#flowName[data-show=true]{opacity:1;transform:none}


/* ---- Flow bar (top) ---- */
#flowModes,#flowCorners,#flowDrawLesson{display:none!important}
/* Flow capsule: one heavy chip holding the reference card (the only 看一看), 画线, 涂色 and 画好了. Inner nodes stay flat until current.
   Values: pt-flow-* and pt-v5-*-lift in design-tokens.json. */
#flowSteps{--fn:var(--pt-flow-inner);position:fixed;z-index:var(--kid-z-hud);top:max(var(--pt-v5-top),env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:var(--pt-flow-gap);padding:var(--pt-flow-pad);border-radius:var(--kid-shape-round);background:var(--pt-v5-chip);box-shadow:var(--pt-v5-chip-lift)}
#flowSteps :is(button){position:relative;display:grid;place-items:center;flex:none;min-width:0;min-height:0;width:var(--fn);height:var(--fn);padding:0;border:0;border-radius:var(--kid-shape-round);background:transparent;color:var(--pt-v5-ink);box-shadow:none;cursor:pointer;touch-action:manipulation;transition:transform var(--kid-motion-pop) var(--kid-motion-ease-spring),background var(--kid-motion-release),box-shadow var(--kid-motion-tap)}
#flowSteps button:active:not(:disabled){transform:translateY(var(--pt-v5-press))}
#flowSteps button[aria-current=step]{background:var(--pt-v5-sun);box-shadow:0 var(--pt-flow-edge) 0 var(--pt-v5-sun-edge)}
#flowSteps button[aria-current=step]:active:not(:disabled){box-shadow:0 1px 0 var(--pt-v5-sun-edge)}
#flowSteps button .v5-icon{width:calc(var(--fn) * .56);height:calc(var(--fn) * .56);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#flowSteps .flow-stage-check{display:none;position:absolute;top:calc(-0.25 * var(--pt-v5-check));right:calc(-0.25 * var(--pt-v5-check));width:var(--pt-v5-check);height:var(--pt-v5-check);place-items:center;border-radius:var(--kid-shape-round);background:var(--pt-v5-leaf);color:#fff;box-shadow:0 0 0 var(--pt-v5-check-ring) var(--pt-v5-chip)}
#flowSteps [data-complete=true]>.flow-stage-check{display:grid;animation:v5-pop var(--kid-motion-pop) var(--kid-motion-ease-spring)}
#flowSteps .flow-stage-check svg{width:70%;height:70%;stroke:currentColor;stroke-width:3;fill:none}
.v5-dots{display:flex;align-items:center;gap:var(--pt-space-island);margin:0}
.v5-dots i{display:block;width:var(--pt-v5-dot);height:var(--pt-v5-dot);border-radius:var(--kid-shape-round);background:var(--pt-v5-dots)}
#flowSteps .v5-dots i:nth-child(n+2){display:none}
#flowShell #flowSteps #flowDone{min-height:0}
#flowSteps #flowDone{min-width:var(--fn);height:var(--fn);margin-left:var(--pt-flow-gap);animation:v5-pop var(--kid-motion-fin-pop) var(--kid-motion-ease-spring)}
#flowSteps #flowDone #flowNextIcon{display:grid;place-items:center;width:calc(var(--fn) * .5);height:calc(var(--fn) * .5)}
#flowSteps #flowDone svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
/* The reference card at the head of the capsule: a small paper photo, ▶ when the lesson has a demo. */
#flowSteps #flowReference{width:var(--fn);height:var(--fn);padding:var(--pt-flow-thumb-pad);box-sizing:border-box;border-radius:var(--pt-flow-thumb-radius);background:var(--pt-v5-note);box-shadow:inset 0 0 0 var(--pt-depth-sm) var(--pt-v5-chip-edge)}
#flowSteps #flowReference[hidden]{display:none}
#flowSteps #flowReferenceArt{position:absolute;inset:var(--pt-flow-thumb-pad);width:auto;height:auto;overflow:hidden;border-radius:calc(var(--pt-flow-thumb-radius) - var(--pt-flow-thumb-pad))}
#flowSteps #flowReferenceArt :is(img,svg){display:block;width:100%;height:100%;max-width:none;object-fit:contain}
#flowSteps #flowReference:is([aria-expanded=true],[data-playing=true]){box-shadow:inset 0 0 0 var(--pt-depth-sm) var(--pt-v5-sun),0 var(--pt-flow-edge) 0 var(--pt-v5-sun-edge)}
#flowSteps #flowReference .flow-look-play{position:absolute;right:calc(-0.3 * var(--pt-flow-play));bottom:calc(-0.3 * var(--pt-flow-play));display:none;place-items:center;width:var(--pt-flow-play);height:var(--pt-flow-play);border-radius:var(--kid-shape-round);background:var(--pt-v5-ink);box-shadow:0 0 0 var(--pt-depth-sm) var(--pt-v5-chip)}
#flowSteps #flowReference[data-demo=true] .flow-look-play{display:grid}
#flowSteps #flowReference .flow-look-play svg{width:45%;height:45%;fill:var(--pt-v5-tip-ink);stroke:none}
#flowSteps #flowDone.hop{animation:v5-hop var(--kid-motion-hop) var(--kid-motion-ease-spring)}
#flowSteps #flowColor.nudge{animation:v5-shake var(--kid-motion-shake) ease-in-out 2}
@keyframes v5-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-12px)}65%{transform:translateY(0)}82%{transform:translateY(-4px)}}
@keyframes v5-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-10deg)}40%{transform:rotate(9deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}

/* ---- Top left: back and lesson thumbnail ---- */
#flowReferenceWindow{top:max(var(--pt-v5-top),env(safe-area-inset-top));left:max(var(--pt-v5-side),env(safe-area-inset-left));gap:var(--pt-v5-gap-flow);padding:0;background:transparent;box-shadow:none;border-radius:0;align-items:flex-start}
#flowReferenceWindow #flowHome{display:grid;place-items:center;min-width:0;min-height:0;width:var(--pt-v5-node);height:var(--pt-v5-node);padding:0;border:0;border-radius:var(--kid-shape-round);background:var(--pt-v5-chip);color:var(--pt-v5-ink);box-shadow:var(--pt-v5-chip-lift)}
#flowReferenceWindow #flowHome:active{transform:translateY(var(--pt-v5-press));box-shadow:var(--pt-v5-chip-press)}
#flowReferenceWindow #flowHome svg{width:var(--pt-v5-icon);height:var(--pt-v5-icon);stroke-width:2.4}

/* ---- Top right: more ---- */
#flowUtilities{top:max(var(--pt-v5-top),env(safe-area-inset-top));right:max(var(--pt-v5-side),env(safe-area-inset-right));flex-direction:column;align-items:flex-end;gap:var(--pt-v5-gap-flow)}
#flowUtilities>#settingsCorner{display:grid;place-items:center;min-width:0;min-height:0;width:var(--pt-v5-node);height:var(--pt-v5-node);padding:0;border:0;border-radius:var(--kid-shape-round);background:var(--pt-v5-chip);color:var(--pt-v5-ink);box-shadow:var(--pt-v5-chip-lift)}
#flowUtilities>#settingsCorner:active{transform:translateY(var(--pt-v5-press));box-shadow:var(--pt-v5-chip-press)}
#flowUtilities #flowMoreFan{position:absolute;top:calc(var(--pt-v5-node) + var(--pt-v5-gap-flow));right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:208px;padding:var(--pt-ui-float-padding);border-radius:var(--pt-ui-float-radius);background:var(--pt-ui-float-surface);box-shadow:var(--pt-ui-float-shadow)}
#flowUtilities #flowMoreFan button{display:flex;align-items:center;justify-content:flex-start;gap:var(--pt-space-control);width:100%;min-width:0;min-height:var(--kid-size-target-min);height:auto;padding:0 var(--pt-space-control);border:0;border-radius:var(--kid-shape-key);background:transparent;color:var(--pt-v5-ink);box-shadow:none;font-size:var(--kid-font-size-label);font-weight:600;white-space:nowrap;text-align:start;animation:none}
#flowUtilities #flowMoreFan button svg,#flowUtilities #flowMoreFan button img{flex:none;width:var(--pt-v5-icon);height:var(--pt-v5-icon);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#flowUtilities #flowMoreFan button.pt-key{background-color:transparent!important;background-image:none!important;box-shadow:none!important}
#flowUtilities #flowMoreFan button[aria-pressed=true]{background:var(--pt-v5-note)}
#flowUtilities #flowMoreFan button:focus{outline:none}
#flowUtilities #flowMoreFan button:focus-visible{background:var(--pt-v5-note);outline:var(--pt-depth-sm) solid var(--pt-v5-leaf);outline-offset:calc(var(--pt-depth-sm)*-1)}
#flowUtilities #flowMoreFan .v5-menu-hint{margin-inline-start:auto;font-size:var(--kid-font-size-tiny);font-weight:400;color:var(--pt-ink-soft)}
#flowUtilities #flowMoreFan #flowParent[data-hint=true] .v5-menu-hint{font-weight:600;color:var(--pt-v5-leaf-ink)}
#flowUtilities #flowMoreFan #flowParent.is-holding{background:linear-gradient(90deg,var(--pt-v5-note) var(--v5-hold,0%),transparent 0);animation:v5-hold var(--kid-motion-parent-hold) linear forwards}
@property --v5-hold{syntax:"<percentage>";inherits:false;initial-value:0%}
@keyframes v5-hold{from{--v5-hold:0%}to{--v5-hold:100%}}
@media(max-width:760px){
 #flowSteps{top:max(var(--pt-v5-top-sm),env(safe-area-inset-top))}
 #flowSteps{--fn:var(--pt-flow-inner-sm);gap:var(--pt-flow-gap-sm);padding:var(--pt-flow-pad-sm)}
 #flowReferenceWindow{top:max(var(--pt-v5-top-sm),env(safe-area-inset-top));left:max(var(--pt-v5-side-sm),env(safe-area-inset-left))}
 #flowReferenceWindow #flowHome{width:var(--pt-v5-node-sm);height:var(--pt-v5-node-sm)}
 #flowUtilities{top:max(var(--pt-v5-top-sm),env(safe-area-inset-top));right:max(var(--pt-v5-side-sm),env(safe-area-inset-right))}
 #flowUtilities>#settingsCorner{width:var(--pt-v5-node-sm);height:var(--pt-v5-node-sm)}
 #flowUtilities #flowMoreFan{top:calc(var(--pt-v5-node-sm) + var(--pt-v5-gap-flow))}
}
#flowSteps :focus-visible,#flowReferenceWindow :focus-visible,#flowUtilities :focus-visible{outline:var(--pt-depth-sm) solid var(--pt-v5-leaf);outline-offset:var(--pt-depth-sm)}
#app[data-flow=draw][data-hud-quiet=true] #flowSteps{opacity:var(--kid-opacity-hud-drawing);pointer-events:none}
@media(prefers-reduced-motion:reduce){:is(#flowSteps,#flowUtilities,#flowReferenceWindow) *{transition:none!important;animation:none!important}}
[data-motion=reduced] :is(#flowSteps,#flowUtilities,#flowReferenceWindow) *{transition:none!important;animation:none!important}

/* ---- Hand-cut paper chips: organic outlines and a slight tilt, pressed with a raised edge ---- */
#flowReferenceWindow #flowHome{border-radius:var(--pt-v5-blob-2);rotate:var(--pt-v5-tilt-2)}
#flowUtilities>#settingsCorner{border-radius:var(--pt-v5-blob-3);rotate:var(--pt-v5-tilt-3)}

/* ---- Demo card (看一看) ---- */
.board-demo-outline{fill:none;stroke:var(--pt-action);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#flowDemo{position:fixed;z-index:var(--kid-z-hud);left:max(var(--pt-v5-side),env(safe-area-inset-left));top:calc(max(var(--pt-v5-top),env(safe-area-inset-top)) + var(--pt-v5-node) + var(--pt-v5-gap-flow) + var(--pt-space-compact));width:var(--pt-v5-demo-width);box-sizing:border-box;padding:var(--pt-space-control) var(--pt-space-control) var(--pt-space-section);border-radius:var(--kid-shape-polaroid);background:var(--pt-v5-chip);box-shadow:var(--pt-v5-chip-lift);rotate:-2deg;pointer-events:none;transform-origin:50% 50%;transition:transform var(--kid-motion-demo-fold) var(--kid-motion-ease-spring),opacity var(--kid-motion-demo-fold) var(--kid-motion-ease-out)}
#flowDemo[data-state=playing],#flowDemo[data-state=ended]{animation:v5-pop var(--kid-motion-pop) var(--kid-motion-ease-spring)}
#flowDemo[data-state=folding]{transform:translate(var(--fold-x,0),var(--fold-y,0)) scale(.2);opacity:0}
#flowDemo .demo-tape{position:absolute;left:50%;top:calc(-0.5 * var(--pt-space-section));width:64px;height:20px;margin-left:-32px;background:var(--pt-v5-tape);rotate:2deg}
#flowDemo .demo-frame{position:relative;aspect-ratio:1;background:var(--pt-v5-paper);border-radius:var(--pt-space-compact);overflow:hidden}
#flowDemo .demo-svg{display:block;width:100%;height:100%;fill:none;stroke:none;overflow:hidden}
#flowDemo .demo-ghost-path{fill:none;stroke:#b8c4c0;stroke-width:var(--demo-stroke,6px);stroke-linecap:round;stroke-linejoin:round;opacity:.55}
#flowDemo[data-kind=oracle] .demo-ghost-path{stroke-width:2;stroke:#b8c4c0}
#flowDemo .demo-line{fill:none;stroke:var(--pt-v5-ink);stroke-width:var(--demo-stroke,6px);stroke-linecap:round;stroke-linejoin:round}
#flowDemo[data-kind=oracle] .demo-line{stroke-width:3}
#flowDemo .demo-veil{position:absolute;inset:0;background:var(--pt-v5-paper);opacity:0;transition:opacity var(--kid-motion-release)}
#flowDemo .demo-replay{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:var(--pt-v5-replay);height:var(--pt-v5-replay);margin:calc(-0.5 * var(--pt-v5-replay)) 0 0 calc(-0.5 * var(--pt-v5-replay));padding:0;border:0;border-radius:var(--pt-v5-blob-1);background:var(--pt-v5-sun);color:var(--pt-v5-ink);box-shadow:var(--pt-v5-sun-lift);opacity:0;scale:0;pointer-events:none;transition:scale var(--kid-motion-pop) var(--kid-motion-ease-spring),opacity var(--kid-motion-release)}
#flowDemo .demo-replay svg{width:var(--pt-v5-icon);height:var(--pt-v5-icon);fill:currentColor;stroke:none}
#flowDemo[data-state=ended] .demo-veil{opacity:.55}
#flowDemo[data-state=ended] .demo-replay{opacity:1;scale:1;pointer-events:auto}
#flowDemo .demo-pips{display:flex;justify-content:center;gap:var(--pt-space-compact);margin-top:var(--pt-space-control)}
#flowDemo .demo-pips:empty{display:none}
#flowDemo .demo-pips i{display:grid;place-items:center;width:var(--pt-v5-pip);height:var(--pt-v5-pip);border-radius:var(--kid-shape-round);background:var(--pt-v5-pip-todo);color:var(--pt-v5-ink-2);font:700 var(--kid-font-size-tiny) var(--kid-font-family);font-style:normal;transition:scale var(--kid-motion-pop) var(--kid-motion-ease-spring),background var(--kid-motion-release)}
#flowDemo .demo-pips i[data-state=done]{background:var(--pt-v5-pip-done);color:var(--pt-v5-leaf-ink)}
#flowDemo .demo-pips i[data-state=current]{background:var(--pt-v5-leaf);color:#fff;scale:1.18}
#flowDemoHand{position:fixed;z-index:var(--kid-z-bubble);width:var(--pt-v5-hand);height:var(--pt-v5-hand);margin:calc(-0.1 * var(--pt-v5-hand)) 0 0 calc(-0.4 * var(--pt-v5-hand));pointer-events:none;filter:none}
@media(max-width:760px){#flowDemo{left:max(var(--pt-v5-side-sm),env(safe-area-inset-left));top:calc(max(var(--pt-v5-top-sm),env(safe-area-inset-top)) + var(--pt-v5-node-sm) + var(--pt-v5-gap-flow));width:var(--pt-v5-demo-width-sm);padding:var(--pt-space-compact) var(--pt-space-compact) var(--pt-space-control)}#flowDemo .demo-pips i{width:var(--pt-v5-pip-sm);height:var(--pt-v5-pip-sm)}#flowDemo .demo-replay{scale:0}#flowDemo[data-state=ended] .demo-replay{scale:.75}}
#app[data-refhidden=true] #flowDemoHand{display:none}
/* The demo hand sits above the board but must never cover the open more menu. */
body:has(#flowMoreFan:not([hidden])) #flowDemoHand{visibility:hidden}
/* The open reference card already shows the picture; the board demo still plays, so the mirrored demo card stays out of the way. */
body:has(#flowRefCard:not([hidden])) #flowDemo{display:none!important}
/* Keep the demonstration beside the left rail, including short landscape screens. */
@media(orientation:landscape){#flowDemo{left:calc(max(var(--pt-tray-edge),env(safe-area-inset-left)) + var(--pt-tray-rail-w) + var(--pt-space-control))}}
#app[data-ref-hidden=true] :is(#boardReference,#oracleReference){visibility:hidden}
@media(prefers-reduced-motion:reduce){#flowDemo,#flowDemo *{transition:none!important;animation:none!important}}
[data-motion=reduced] #flowDemo,[data-motion=reduced] #flowDemo *{transition:none!important;animation:none!important}

/* ---- v5.2: tilt rests at +-2deg and returns to 0 when selected or pressed; neutral shadow only ---- */
#flowRound button,#flowReferenceWindow #flowHome,#flowUtilities>#settingsCorner{transition:transform var(--kid-motion-pop) var(--kid-motion-ease-spring),rotate var(--kid-motion-release) var(--kid-motion-ease-out),box-shadow var(--kid-motion-tap),background var(--kid-motion-release)}
#flowRound button:active,#flowReferenceWindow #flowHome:active,#flowUtilities>#settingsCorner:active{rotate:0deg}
#app[data-demo=playing] #guideBubble{visibility:hidden}

/* ---- Choose screen: icon-only start chip and "keep drawing" badge ---- */
#flowShell .flow-primary{background:var(--pt-v5-sun);color:var(--pt-v5-ink);box-shadow:var(--pt-v5-sun-lift);border-radius:var(--pt-v5-blob-1);rotate:var(--pt-v5-tilt-2)}
#flowShell .flow-primary:active:not(:disabled){rotate:0deg;box-shadow:var(--pt-v5-chip-press);transform:translateY(var(--pt-v5-press))}
#flowShell .flow-primary svg{width:var(--pt-v5-icon);height:var(--pt-v5-icon);stroke-width:2.6}
#flowPrepare.resume #flowStart{width:var(--kid-size-target-primary);padding-inline:0;border-radius:var(--pt-v5-blob-1)}
#flowShell .flow-choice{position:relative}
#flowShell .flow-choice-again{position:absolute;top:var(--pt-space-compact);left:var(--pt-space-compact);display:grid;place-items:center;width:var(--pt-v5-badge);height:var(--pt-v5-badge);border-radius:var(--pt-v5-blob-3);background:var(--pt-v5-note);color:var(--pt-v5-cinnabar);box-shadow:var(--pt-v5-chip-lift);rotate:var(--pt-v5-tilt-1)}
#flowShell .flow-choice-again svg{width:calc(var(--pt-v5-badge) - var(--pt-space-compact) * 2);height:calc(var(--pt-v5-badge) - var(--pt-space-compact) * 2);fill:none;stroke:currentColor;stroke-width:2.2}

/* ---- Finish screen: same chip language for every lesson kind ---- */
#flowComplete{display:grid;grid-template-columns:minmax(0,var(--pt-v5-card-max)) auto;align-items:center;justify-content:center;gap:var(--pt-space-section) calc(var(--pt-space-section) * 2);background:var(--pt-v5-paper)}
#flowComplete #flowArtworkCard{grid-column:1;width:100%;max-width:var(--pt-v5-card-max);padding:var(--pt-space-section);box-sizing:border-box;background:var(--pt-v5-chip);box-shadow:var(--pt-v5-chip-lift)}
#flowComplete .flow-tape{position:absolute;left:50%;top:calc(-0.5 * var(--pt-space-section));width:120px;height:28px;margin-left:-60px;background:var(--pt-v5-tape);rotate:1.5deg}
#flowComplete .flow-stamp{position:absolute;right:var(--pt-space-section);bottom:calc(var(--pt-space-section) * 1.5);display:grid;place-items:center;width:var(--pt-v5-stamp);height:var(--pt-v5-stamp);border:3px solid var(--pt-v5-cinnabar);border-radius:var(--kid-shape-round);color:var(--pt-v5-cinnabar);font:900 var(--kid-font-size-label) var(--kid-font-family);rotate:-12deg;opacity:0;scale:1.6;transition:opacity var(--kid-motion-stamp),scale var(--kid-motion-stamp) var(--kid-motion-ease-spring) var(--kid-motion-fast)}
#flowComplete[data-landed=true] .flow-stamp{opacity:1;scale:1}
#flowComplete #flowArtCaption{position:absolute;left:0;top:100%;margin-top:var(--pt-space-control);display:flex;align-items:baseline;gap:var(--pt-space-compact);white-space:nowrap}
#flowComplete #flowArtCaption b{font-size:var(--kid-font-size-title);color:var(--pt-v5-ink)}
#flowComplete #flowArtCaption span{font-size:var(--kid-font-size-label);color:var(--pt-v5-ink-2)}
.flow-complete-side{grid-column:2;display:flex;flex-direction:column;align-items:stretch;gap:var(--pt-space-control);min-width:min(340px,100%)}
#flowDoneTitle{margin:0;font-size:var(--kid-font-size-word);font-weight:900;color:var(--pt-v5-ink);line-height:1.1}
.flow-complete-side .flow-art-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--pt-space-control)}
.flow-complete-side .flow-art-next{grid-column:1/-1;order:-1;display:flex}
#flowShell .flow-complete-side .flow-art-actions>button:not(#flowSave){width:auto;height:var(--pt-v5-sub-height);min-height:0;padding:0 var(--pt-space-control);gap:var(--pt-space-compact);border-radius:var(--pt-v5-blob-2);background:var(--pt-v5-chip);color:var(--pt-v5-ink);box-shadow:var(--pt-v5-chip-lift);font-size:var(--kid-font-size-label);rotate:var(--pt-v5-tilt-2)}
#flowShell .flow-complete-side #flowNew{border-radius:var(--pt-v5-blob-3);rotate:var(--pt-v5-tilt-3)}
#flowShell .flow-complete-side .flow-art-actions>button:active:not(:disabled){rotate:0deg;box-shadow:var(--pt-v5-chip-press);transform:translateY(var(--pt-v5-press))}
#flowShell .flow-complete-side .flow-art-actions>button svg{width:var(--pt-v5-icon);height:var(--pt-v5-icon)}
#flowShell #artworkHandoffBtn{display:flex;align-items:center;gap:var(--pt-space-control);width:100%;min-width:0;max-width:none;height:auto;min-height:calc(var(--pt-v5-main-thumb) + var(--pt-space-control));padding:var(--pt-space-compact) var(--pt-space-control) var(--pt-space-compact) var(--pt-space-compact);border-radius:var(--pt-v5-blob-1);background:var(--pt-v5-sun);color:var(--pt-v5-ink);box-shadow:var(--pt-v5-sun-lift);rotate:var(--pt-v5-tilt-1);font-size:var(--kid-font-size-label);font-weight:800}
#flowShell #artworkHandoffBtn:active:not(:disabled){rotate:0deg;box-shadow:var(--pt-v5-chip-press);transform:translateY(var(--pt-v5-press))}
#flowShell #artworkHandoffBtn #artworkHandoffIcon{order:0;display:grid;place-items:center;flex:none;width:var(--pt-v5-main-thumb);height:var(--pt-v5-main-thumb);border-radius:var(--pt-v5-blob-2);background:var(--pt-v5-ink);overflow:hidden}
#flowShell #artworkHandoffBtn #artworkHandoffIcon :is(img,svg){width:80%;height:80%;object-fit:contain;fill:none;stroke:#fff}
#flowShell #artworkHandoffBtn>span:last-child{order:1;flex:1;text-align:start}
#flowShell #artworkHandoffBtn>svg{order:2;flex:none;width:var(--pt-v5-icon);height:var(--pt-v5-icon);stroke-width:2.6}
#flowPutBack{position:fixed;z-index:var(--kid-z-sheet);left:50%;bottom:max(var(--pt-v5-side),env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:var(--pt-space-control);padding:var(--pt-space-control);border-radius:var(--pt-v5-blob-1);background:var(--pt-v5-chip);box-shadow:var(--pt-v5-chip-lift);animation:v5-pop var(--kid-motion-pop) var(--kid-motion-ease-spring);max-width:calc(100vw - var(--pt-v5-side) * 2)}
#flowPutBack canvas{width:96px;height:64px;border-radius:var(--kid-shape-polaroid);background:var(--pt-v5-paper)}
#flowPutBack .flow-put-arrow svg{width:var(--pt-v5-icon);height:var(--pt-v5-icon);stroke:currentColor;fill:none;stroke-width:2.6}
#flowPutBackDest{display:grid;place-items:center;width:var(--pt-v5-main-thumb);height:var(--pt-v5-main-thumb);border-radius:var(--pt-v5-blob-2);background:var(--pt-v5-ink);overflow:hidden}
#flowPutBackDest :is(img,svg){width:80%;height:80%;object-fit:contain;fill:none;stroke:#fff}
#flowShell #flowPutBack button{min-height:var(--pt-v5-sub-height);padding:0 var(--pt-space-control);border:0;border-radius:var(--pt-v5-blob-3);background:var(--pt-v5-chip);color:var(--pt-v5-ink);box-shadow:var(--pt-v5-chip-lift);font-size:var(--kid-font-size-label);cursor:pointer}
#flowShell #flowPutBackYes{background:var(--pt-v5-sun);box-shadow:var(--pt-v5-sun-lift);font-weight:800}
#flowShell #flowPutBack button:active{box-shadow:var(--pt-v5-chip-press);transform:translateY(var(--pt-v5-press))}
@media(max-width:760px){
 #flowComplete{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;gap:calc(var(--pt-space-section) * 2) var(--pt-space-section)}
 #flowComplete #flowArtworkCard{max-width:min(var(--pt-v5-card-max),86vw)}
 .flow-complete-side{grid-column:1;width:min(100%,360px)}
 #flowDoneTitle{font-size:var(--kid-font-size-title)}
 #flowComplete .flow-stamp{width:calc(var(--pt-v5-stamp) * .8);height:calc(var(--pt-v5-stamp) * .8)}
}
#flowPutBack :focus-visible,#flowComplete :focus-visible{outline:var(--pt-depth-sm) solid var(--pt-v5-leaf);outline-offset:var(--pt-depth-sm)}
@media(prefers-reduced-motion:reduce){#flowComplete *,#flowPutBack,#flowPutBack *{transition:none!important;animation:none!important}}
[data-motion=reduced] :is(#flowComplete *,#flowPutBack,#flowPutBack *){transition:none!important;animation:none!important}
#flowComplete #flowArtworkCard::before{display:none}
#flowComplete #flowSaved{right:auto;left:var(--pt-space-section);bottom:calc(var(--pt-space-section) * 1.5)}
@media(max-width:760px){#flowComplete #flowArtworkCard{margin-bottom:calc(var(--pt-space-section) * 1.5)}}
#flowComplete #flowArtEdit{height:auto}
#flowComplete #flowArtwork{display:block;width:100%;height:auto;aspect-ratio:1280/820}

/* Wide chips use the fixed-radius irregular shape; percentage blobs would turn them into ellipses. */
#flowShell #artworkHandoffBtn{flex-direction:row;flex-wrap:nowrap;border-radius:var(--kid-shape-card)}
#flowShell .flow-complete-side .flow-art-actions>button:not(#flowSave),#flowShell .flow-complete-side #flowNew{border-radius:var(--kid-shape-card)}
#flowPutBack{border-radius:var(--kid-shape-card);flex-wrap:nowrap}
#flowShell #flowPutBack button{border-radius:var(--kid-shape-key)}
#flowShell #artworkHandoffBtn #artworkHandoffIcon,#flowPutBackDest{border-radius:var(--kid-shape-key)}
#artworkHandoffIcon :is(img,svg),#flowPutBackDest :is(img,svg){filter:invert(1) brightness(1.4)}
#flowShell #flowPutBack button{white-space:nowrap}
@media(max-width:760px){#flowPutBack canvas{width:64px;height:48px}#flowPutBack{gap:var(--pt-space-compact);padding:var(--pt-space-compact)}}

/* ---- Oracle reference notes live in the more menu; one shared hide/show switch ---- */
#flowMoreFan #oracleTools{width:100%;box-sizing:border-box}
#flowMoreFan #oracleTools>summary{display:flex;align-items:center;gap:var(--pt-space-compact);min-height:var(--kid-size-target-min);padding:0 var(--pt-space-control);list-style:none;border-radius:var(--kid-shape-key);color:var(--pt-ink-soft);font-size:var(--kid-font-size-tiny);font-weight:400;white-space:nowrap;cursor:pointer}
#flowMoreFan #oracleTools>summary::-webkit-details-marker{display:none}
#flowMoreFan #oracleTools>summary::after{content:"";flex:none;width:var(--pt-space-control);height:var(--pt-space-control);margin-inline-start:auto;background:currentColor;clip-path:polygon(15% 30%,50% 70%,85% 30%,85% 45%,50% 85%,15% 45%);transition:rotate var(--kid-motion-release) var(--kid-motion-ease-out)}
#flowMoreFan #oracleTools[open]>summary::after{rotate:180deg}
#flowMoreFan #oracleTools>summary:focus-visible{outline:var(--pt-depth-sm) solid var(--pt-v5-leaf);outline-offset:calc(var(--pt-depth-sm)*-1)}
#flowMoreFan #oracleTools .oracle-reference-controls{position:static;width:auto;max-height:min(40dvh,300px);padding:var(--pt-space-control);border-radius:var(--kid-shape-key);background:transparent;box-shadow:none;font-size:var(--kid-font-size-tiny)}
#flowMoreFan #oracleTools .oracle-reference-controls label:has(#oracleGuideToggle){display:none}
#flowComplete #flowSaved{position:absolute;width:1px;height:1px;border:0;clip-path:inset(50%);overflow:hidden}

/* ---- Board fill: trace contrast and HUD fade (values: design-tokens.json pt-trace-*, kid-opacity-hud-drawing) ---- */
.trace-outline path[data-trace]{stroke:var(--pt-trace-ink);opacity:var(--pt-trace-outline-opacity)}
.trace-outline path[data-trace].trace-current{stroke:var(--pt-trace-current-ink);opacity:var(--pt-trace-current-opacity);stroke-width:var(--pt-trace-current-width);stroke-dasharray:var(--pt-trace-current-dash)}
.trace-outline path[data-trace].trace-covered{opacity:var(--pt-trace-covered-opacity)}
.canvas-wrap.drawing-ui .trace-outline path[data-trace].trace-current,.canvas-wrap.guide-drawing .trace-outline path[data-trace].trace-current{opacity:var(--pt-trace-current-opacity)}
#flowSteps,#flowReferenceWindow,#flowUtilities,#flowDial,#flowRound{transition:opacity var(--kid-motion-release) var(--kid-motion-ease-out)}
#app[data-flow=draw][data-hud-quiet=true] :is(#flowSteps,#flowReferenceWindow,#flowUtilities,#flowDial,#flowRound){opacity:var(--kid-opacity-hud-drawing);pointer-events:none}
@media(prefers-reduced-motion:reduce){#flowSteps,#flowReferenceWindow,#flowUtilities,#flowDial,#flowRound{transition:none}}
[data-motion=reduced] :is(#flowSteps,#flowReferenceWindow,#flowUtilities,#flowDial,#flowRound){transition:none}

/* ---- Hit areas: chips look smaller than they are; a transparent ring keeps every target at least 48px ---- */
#flowReferenceWindow #flowHome,#flowUtilities>#settingsCorner{position:relative}
:is(#flowReferenceWindow #flowHome,#flowUtilities>#settingsCorner,#flowSteps button)::before{content:"";position:absolute;inset:calc(-1 * var(--pt-hit-pad));border-radius:inherit}

/* ---- Material: the top controls share the dial's frameless translucent paper (no outline, no blur) ---- */
#flowSteps,#flowReferenceWindow #flowHome,#flowUtilities>#settingsCorner{background:var(--pt-glass-surface)}
#flowSteps button[aria-current=step],#flowSteps button[aria-current=step]:active:not(:disabled){box-shadow:none}
#flowSteps #flowReference{box-shadow:inset 0 0 0 var(--pt-depth-sm) var(--pt-flow-thumb-ring)}