/* Full paper and three task islands; ink and capture geometry stay caller-owned. */
#app[data-two-stage=true] #canvasWrap{position:fixed;inset:0;margin:0;width:auto;height:auto;min-height:0;border:0;border-radius:0;box-shadow:none;background:var(--canvas-paper,var(--kid-color-paper))}
#app[data-two-stage=true] #viewport{inset:0;--flow-left:0px;--flow-right:0px}
#app[data-two-stage=true] #canvasStage{border:0;box-shadow:none;background:transparent}
#app[data-two-stage=true] #board{visibility:hidden}
.drawing-surface{pointer-events:none;max-width:none;max-height:none}
#app[data-two-stage=true] #viewport:focus{outline:none}
#app[data-two-stage=true][data-keyboard-controls=true] #viewport:focus-visible{outline:var(--pt-depth-sm) solid var(--kid-color-ocean-deep);outline-offset:calc(-1 * var(--pt-depth))}
#app[data-two-stage=true]{--workspace-top:max(var(--kid-size-hud-inset),env(safe-area-inset-top));--workspace-bottom:max(var(--kid-size-hud-inset),env(safe-area-inset-bottom));--workspace-left:max(var(--kid-size-hud-inset),env(safe-area-inset-left));--workspace-right:max(var(--kid-size-hud-inset),env(safe-area-inset-right))}
#app[data-two-stage=true] [hidden]{display:none!important}
#flowGuide{position:static;padding:0;background:transparent}
#flowReferenceWindow,#flowModes,#flowDock{position:fixed;z-index:var(--kid-z-hud);display:flex;align-items:center;gap:var(--pt-space-island);padding:var(--pt-space-island);border:0;border-radius:var(--kid-shape-sheet);background:var(--pt-ui-hud-surface);box-shadow:var(--pt-ui-shadow-card);backdrop-filter:none;-webkit-backdrop-filter:none;opacity:var(--kid-opacity-hud-rest);transition:opacity var(--kid-motion-tap)}
#flowReferenceWindow{top:var(--workspace-top);left:var(--workspace-left)}
#flowReferenceWindow #flowReference{display:block;width:var(--kid-size-ref-thumb);height:var(--kid-size-target-min);padding:0;background:transparent}
#flowReferenceArt{display:block;width:100%;height:100%}
#flowReferenceArt :is(img,svg){display:block;width:100%;height:100%;object-fit:contain}
#flowModes{left:var(--workspace-left);bottom:var(--workspace-bottom)}
#flowShell #flowModes button{position:relative;width:var(--kid-size-target-min);height:var(--kid-size-target-min);padding:var(--pt-space-compact);background:transparent;box-shadow:none}
#flowShell #flowModes button svg{width:100%;height:100%}
#flowShell #flowModes [aria-pressed=true]{background:var(--kid-color-ink);color:var(--kid-color-sun)}
.flow-stage-check{display:none;position:absolute;right:var(--pt-space-compact);bottom:var(--pt-space-compact);width:var(--pt-space-section);height:var(--pt-space-section);border-radius:var(--kid-shape-round);background:var(--kid-color-leaf);color:var(--kid-color-paper)}
#flowModes button[data-complete=true] .flow-stage-check{display:grid;place-items:center}
#flowShell #flowModes .flow-stage-check svg{width:70%;height:70%}
#flowShell :is(.stage-gold,.stage-blue){fill:currentColor}
#flowDock{right:var(--workspace-right);top:50%;transform:translateY(-50%);flex-direction:column;max-height:calc(100dvh - var(--workspace-top) - var(--workspace-bottom));width:max-content;overflow-x:hidden;overflow-y:auto;background:transparent;box-shadow:none;border-radius:0}
#flowEditTools,#flowOperations{display:flex;width:var(--kid-size-target-min);min-width:var(--kid-size-target-min);flex-direction:column;align-items:stretch;gap:var(--pt-space-island)}
#flowQuickTools{display:none}
#flowDock button{display:grid;place-items:center;gap:0;width:var(--kid-size-target-min);min-width:var(--kid-size-target-min);flex-shrink:0;height:var(--kid-size-target-min);padding:0;background:transparent;box-shadow:none;transition:background-color var(--pt-ui-feedback-time) var(--kid-motion-ease-out),scale var(--kid-motion-tap) var(--kid-motion-ease-press)}
#flowDock #flowBrush{height:var(--kid-size-target-min);padding:0;overflow:hidden}
#flowActiveCrayon,#flowActiveTeachingCrayon{display:block;width:var(--kid-size-crayon-w);height:var(--kid-size-crayon-h);object-fit:contain;mask-size:contain;mask-repeat:no-repeat;mask-position:center}
#flowDock .workspace-tool-chevron,#flowDock button>span:not(#flowActiveTeachingCrayon){display:none}
#flowDock #flowBrush[aria-pressed=true]{background:var(--pt-ui-tool-fill)}
#flowDock #eraser[aria-pressed=true]{background:var(--pt-ui-eraser-fill);color:var(--kid-color-ink)}
#flowDock :is(svg,img):not(.workspace-tool-chevron):not([hidden]){display:block;margin:0;place-self:center;flex:none;width:var(--pt-hint-icon-size);height:var(--pt-hint-icon-size)}
#flowDock #flowActiveCrayon,#flowDock #flowActiveTeachingCrayon{width:var(--pt-dock-crayon-width);height:var(--pt-dock-crayon-height)}
#flowCorners{position:fixed;z-index:var(--kid-z-hud);bottom:var(--workspace-bottom);left:50%;transform:translateX(-50%);padding:0;background:transparent}
#flowShell #flowDone{width:var(--kid-size-target-primary);min-width:var(--kid-size-target-primary);height:var(--kid-size-target-primary);min-height:var(--kid-size-target-primary);padding:var(--pt-space-control);border-radius:var(--kid-shape-round);background:var(--kid-color-sun);color:var(--kid-color-ink);box-shadow:var(--kid-shadow-sun);animation:pt-action-in var(--kid-motion-pop) var(--kid-motion-ease-spring)}
#flowDone #flowNextLabel{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
#flowNextIcon,#flowNextIcon svg{display:block;width:100%;height:100%}
#flowUtilities{position:fixed;top:var(--workspace-top);right:var(--workspace-right);z-index:var(--kid-z-bubble);display:flex;align-items:flex-start;gap:var(--pt-space-compact)}
#flowUtilities>button{width:var(--kid-size-target-min);height:var(--kid-size-target-min);background:var(--pt-ui-hud-surface);box-shadow:var(--pt-ui-shadow-card)}
#flowMoreFan{display:flex;gap:var(--pt-space-island);padding:var(--pt-space-island);border-radius:var(--kid-shape-sheet);background:var(--pt-ui-hud-surface);box-shadow:var(--pt-ui-shadow-card)}
#flowMoreFan button{position:relative;width:var(--kid-size-target-min);height:var(--kid-size-target-min);background:transparent;animation:pt-action-in var(--kid-motion-pop) var(--kid-motion-ease-spring)}
#flowMoreFan button:nth-child(2){animation-delay:var(--kid-motion-stagger)}
#flowMoreFan button:nth-child(3){animation-delay:calc(var(--kid-motion-stagger)*2)}
#flowParent.is-holding{box-shadow:inset 0 0 0 var(--pt-depth) var(--kid-color-coral);animation:pt-parent-hold var(--kid-motion-parent-hold) linear}
@keyframes pt-parent-hold{from{background:transparent}to{background:var(--kid-color-coral)}}
#app[data-flow=draw][data-hud-quiet=true] :is(#flowReferenceWindow,#flowModes,#flowDock,#flowCorners,#flowUtilities){opacity:var(--kid-opacity-hud-drawing);pointer-events:none}
#flowPopoverShield{position:fixed;inset:0;z-index:var(--kid-z-bubble);background:transparent;border:0}
.flow-popover{position:fixed;z-index:var(--kid-z-sheet);display:flex;flex-direction:column;gap:var(--pt-ui-stack-gap);box-sizing:border-box;max-width:calc(100vw - var(--pt-space-panel));padding:var(--pt-space-control);overflow:auto;overscroll-behavior:contain;border:0;border-radius:var(--kid-shape-key);background:var(--pt-ui-hud-surface);color:var(--kid-color-ink);box-shadow:var(--pt-ui-shadow-lift);font-family:var(--kid-font-family);backdrop-filter:blur(var(--pt-ui-panel-blur));-webkit-backdrop-filter:blur(var(--pt-ui-panel-blur))}
.flow-popover :is(img,svg){width:var(--pt-hint-icon-size);height:var(--pt-hint-icon-size)}
#flowBrushSizeMenu{width:min(var(--pt-ui-palette-width),calc(100vw - var(--pt-space-panel)));gap:var(--pt-space-island)}
#flowColors .color-group{display:flex;align-items:flex-end;gap:0;overflow:auto;padding:var(--pt-space-island) 0;border:0;border-radius:0}
#flowColors .color-wrap{position:relative;flex-shrink:0;min-width:var(--kid-size-target-min);width:var(--kid-size-target-min);height:calc(var(--kid-size-target-min) + var(--pt-space-compact)*2);padding:var(--pt-space-compact);border:0;border-radius:var(--kid-shape-key);background:transparent}
#flowColors .color-wrap :is(img,.teaching-crayon){display:block;width:var(--kid-size-crayon-w);height:var(--kid-size-target-min);object-fit:contain;mask-size:contain;mask-position:center;mask-repeat:no-repeat;transition:transform var(--kid-motion-release) var(--kid-motion-ease-spring)}
#flowColors .color-wrap>img[hidden]{display:none}
#flowColors .color-wrap[aria-pressed=true]{background:var(--pt-ui-tool-fill)}
#flowColors .color-wrap[aria-pressed=true] :is(img,.teaching-crayon){transform:translateY(calc(-1 * var(--pt-space-island)))}
#flowColors .color{display:none}
#flowBrushSizeMenu .workspace-tool-label{display:none}
#flowBrushRange,#flowEraserRange,#flowVolumeRange{width:100%;writing-mode:horizontal-tb;direction:ltr}
.flow-range{display:flex;align-items:center;min-width:0;width:100%;flex:1}
@media(hover:hover) and (pointer:fine){#flowShell #flowDock button:not(:disabled):not([aria-pressed=true]):hover,#calmSettingsPanel button:not(:disabled):hover{background:var(--pt-ui-card-surface)}}
@media(prefers-reduced-motion:reduce){#flowChoiceGroups button,#flowShell .flow-choice,#flowDock button{transition:none;animation:none}}
[data-motion=reduced] :is(#flowChoiceGroups button,#flowShell .flow-choice,#flowDock button){transition:none;animation:none}
@media(forced-colors:active){
 :is(#flowChoiceGroups,#flowPresets) [aria-pressed=true]{background:Highlight;color:HighlightText}
}
.workspace-range-heading{margin-top:var(--pt-space-compact);display:flex;align-items:center;justify-content:space-between;gap:var(--pt-space-compact)}
#flowSizePreview{position:static;inset:auto;display:block;width:var(--kid-size-target-min);height:var(--pt-space-section);touch-action:auto}
#flowBrushValue,#flowEraserValue{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.workspace-range-ends{display:flex;justify-content:space-between;font-size:var(--kid-font-size-label)}
#flowEraserPreview{display:block;width:var(--eraser-diameter);height:var(--eraser-diameter);border-radius:var(--kid-shape-round);background:var(--kid-color-paper)}
#calmSettingsPanel #paperColorOptions{display:flex;flex-direction:column;gap:var(--pt-ui-stack-gap);margin:0;padding:0}
#calmSettingsPanel #paperChoicesTitle{margin:0;font-size:var(--pt-type-action)}
#calmSettingsPanel .paper-choices{display:flex;gap:var(--pt-space-compact);padding:0}
#calmSettingsPanel .paper-choices button{position:relative;flex:1;display:flex;flex-direction:column;min-width:var(--kid-size-target-min);min-height:var(--kid-size-target-min);padding:var(--pt-space-compact);font:inherit;border:0;border-radius:var(--kid-shape-key);background:var(--paper-swatch);box-shadow:inset 0 0 0 var(--pt-ui-selection-width) var(--pt-line)}
#calmSettingsPanel .paper-choices button[aria-pressed=true]{outline:none;background:var(--pt-ui-paper-selected-fill);box-shadow:inset 0 0 0 var(--pt-ui-selection-width) var(--kid-color-ink)}
#calmSettingsPanel .workspace-paper-check{position:absolute;top:var(--pt-space-island);right:var(--pt-space-island);visibility:hidden;color:var(--kid-color-ink)}
#calmSettingsPanel .workspace-paper-check svg{width:var(--pt-range-thumb-size);height:var(--pt-range-thumb-size)}
#calmSettingsPanel [aria-pressed=true] .workspace-paper-check{visibility:visible}
#flowLook{position:fixed;inset:var(--workspace-top) var(--workspace-right) var(--workspace-bottom) var(--workspace-left);z-index:var(--kid-z-sheet);background:var(--pt-ui-surface);border-radius:var(--kid-shape-sheet);padding:var(--pt-space-panel);box-shadow:var(--kid-shadow-float)}
#flowLookArt :is(img,svg){width:100%;height:70dvh;object-fit:contain}
#flowColorGuide{display:none}
#calmSettingsPanel{top:var(--pt-settings-inset);right:var(--pt-settings-inset);bottom:auto;left:auto;display:flex;flex-direction:column;box-sizing:border-box;width:min(var(--pt-ui-parent-width),calc(100vw - var(--pt-settings-inset)*2));height:auto;max-height:calc(100dvh - var(--pt-settings-inset)*2);padding:var(--pt-settings-inset);overflow:hidden;border:0;border-radius:var(--pt-ui-float-radius);background:var(--pt-ui-float-surface);color:var(--kid-color-ink);box-shadow:var(--pt-ui-float-shadow)}
#calmSettingsPanel .calm-grab{display:none}
#calmSettingsPanel .calm-settings-head{flex-shrink:0;margin:0 0 var(--pt-space-compact)}
#calmSettingsTitle:focus{outline:none}
#calmSettingsPanel .calm-settings-body{display:flex;flex-direction:column;min-height:0;gap:var(--pt-space-control);overflow-y:auto;overscroll-behavior:contain}
#calmSettingsPanel button{min-width:var(--kid-size-target-min);min-height:var(--kid-size-target-min);background:transparent;box-shadow:none}
#calmSettingsPanel .calm-settings-head .close{padding:0}
#flowSettings{display:grid;gap:var(--pt-space-section)}
#flowSoundInline{display:flex;align-items:center;gap:var(--pt-space-control)}
#flowSoundInline>#flowSoundTitle{flex:none;margin:0;font-size:var(--pt-type-action);font-weight:700;color:var(--kid-color-ink)}
#flowVolumeMenu{min-width:0;flex:1;display:flex;align-items:center}
#flowVolumeRange{min-width:0;flex:1;accent-color:var(--kid-color-ink)}
#flowParentExports{display:grid;grid-template-columns:repeat(var(--pt-settings-action-columns),minmax(0,1fr));gap:var(--pt-space-compact)}
#flowParentExports button{min-width:0;white-space:nowrap}
#flowSettingsFooter{margin:0;font-size:var(--kid-font-size-tiny);color:var(--pt-ink-soft)}
#flowSettingsFooter>div{display:flex;justify-content:space-between;gap:var(--pt-space-control)}
@media(max-width:700px){#calmSettingsPanel{top:auto;left:var(--pt-settings-inset);right:var(--pt-settings-inset);bottom:calc(var(--pt-settings-inset) + env(safe-area-inset-bottom,0px));width:auto;max-width:var(--pt-ui-parent-width);max-height:calc(100dvh - var(--pt-settings-inset)*2 - env(safe-area-inset-bottom,0px));margin-inline:auto}}
#exportSheet[data-purpose=save] :is(#shareImage,#shareLink){display:none}
#traceOutline:is([data-teaching=true],[data-vehicle-teaching=true])>path[data-trace]{stroke:var(--pt-trace-ink);stroke-width:calc(var(--teaching-stroke,2px)*var(--pt-trace-teaching-scale));opacity:var(--pt-trace-outline-opacity)}
#traceOutline:is([data-teaching=true],[data-vehicle-teaching=true])>path[data-trace].trace-current{stroke:var(--pt-trace-current-ink);stroke-width:calc(var(--teaching-stroke,2px)*var(--pt-trace-teaching-scale-current));opacity:var(--pt-trace-current-opacity)}
#traceOutline:is([data-teaching=true],[data-vehicle-teaching=true])>path[data-trace].trace-covered{opacity:var(--pt-trace-covered-opacity)}
@media(max-width:599px){#flowMoreFan{flex-direction:column}#flowCorners{left:calc(var(--workspace-left) + var(--kid-size-target-min)*2 + var(--pt-space-panel));transform:none}}
@media(max-height:500px) and (orientation:landscape){#flowDock #flowBrush{height:var(--kid-size-target-min)}#flowDock #flowActiveCrayon,#flowDock #flowActiveTeachingCrayon{height:var(--kid-size-target-min)}#flowOperations{display:flex;flex-direction:column}#flowDock{top:calc(var(--workspace-top) + var(--kid-size-target-min) + var(--pt-space-control));max-height:calc(100dvh - var(--workspace-top) - var(--workspace-bottom) - var(--kid-size-target-min) - var(--pt-space-control));transform:none}#flowMoreFan{flex-direction:row}#flowCorners{left:calc(var(--workspace-left) + var(--kid-size-target-min)*2 + var(--pt-space-panel));transform:none}}
@media(prefers-reduced-motion:reduce){#flowUtilities *,#flowReferenceWindow *,#flowModes *,#flowDock *,#flowParent.is-holding{animation:none!important;transition:none!important}}
[data-motion=reduced] :is(#flowShell,#flowUtilities,#flowReferenceWindow,#flowModes,#flowDock) *,[data-motion=reduced] #flowIdleHand{animation:none!important;transition:none!important}
[data-motion=reduced] :is(#flowShell,#calmSettingsPanel,.flow-popover) button{scale:none!important}
/* The reference and animated guide share one paper-space layer, outside ink/export. */
#boardReference,#boardDemonstration{pointer-events:none}
.board-reference-path{fill:none;stroke:var(--pt-trace-ink);stroke-width:var(--pt-space-compact);stroke-linecap:round;stroke-linejoin:round;opacity:var(--pt-trace-outline-opacity)}
.board-demo-path{fill:none;stroke:var(--pt-action);stroke-width:var(--pt-demo-stroke);stroke-linecap:round;stroke-linejoin:round}
.board-demo-dot{fill:var(--pt-select);stroke:var(--pt-ink);stroke-width:var(--pt-demo-dot-stroke)}
.board-color-cue{fill:none;stroke:var(--pt-select-deep);stroke-width:var(--pt-demo-color-stroke);stroke-linecap:round}

.flow-popover:not([hidden]){animation:pt-menu-arrive var(--kid-motion-release) var(--kid-motion-ease-out)}
@keyframes pt-menu-arrive{from{opacity:var(--pt-ui-menu-start-opacity)}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.flow-popover:not([hidden]){animation:none}}
[data-motion=reduced] .flow-popover:not([hidden]){animation:none}