/* User-authorized drawing and motion hierarchy. Loaded after incumbent styles. */
.app{gap:0}
.topbar{flex-shrink:0}
.topbar .progress{padding:6px 0;border:0;background:none;box-shadow:none;border-radius:0;color:var(--pt-ink-soft);white-space:nowrap}
.drawing-empty{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none;color:var(--pt-ink-soft);text-align:center;padding:24px}
.drawing-empty[hidden]{display:none}
.drawing-empty strong{color:var(--pt-ink)}
.drawing-actions{max-width:1260px;width:100%;margin:0 auto;flex-shrink:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;align-items:center;padding:14px 8px 2px}
.drawing-guidance{display:flex;flex-direction:column;gap:4px;min-width:0}
.drawing-guidance>span{color:var(--pt-ink-soft);overflow-wrap:anywhere}
.drawing-action-buttons{display:flex;align-items:center;gap:8px}
.drawing-action-buttons button{min-height:52px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--pt-shape-key);white-space:nowrap}
.drawing-action-buttons .ai-look,.drawing-action-buttons .finish{width:auto;min-width:0;padding:0 14px;background:var(--pt-paper);color:var(--pt-ink-soft);border:1px solid var(--pt-line);box-shadow:none;filter:none}
.drawing-action-buttons .ai-look-label{display:inline}
.drawing-action-buttons .ai-look svg,.drawing-action-buttons .finish svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none}
.drawing-action-buttons .finish:disabled{opacity:.5}
.drawing-action-buttons .finish:not(:disabled):active,.drawing-action-buttons .ai-look:active{transform:scale(.97);box-shadow:none}
.drawing-action-buttons .artwork-handoff{min-width:152px;padding:0 22px;background:var(--pt-action);color:var(--pt-ink);box-shadow:var(--pt-lift);}
.artwork-handoff svg{width:24px;height:24px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.artwork-handoff:active{transform:translateY(2px);box-shadow:var(--pt-lift)}
.artwork-handoff[aria-disabled=true]{background:var(--pt-paper);box-shadow:var(--pt-lift)}
.drawing-action-buttons button:focus-visible,.history-controls button:focus-visible,.viewport:focus-visible{outline:3px solid var(--pt-ink);outline-offset:3px}
.drawing-actions .backend-banner{position:static;grid-column:1/-1;justify-self:end;transform:none;max-width:100%;padding:0;background:none;border:0;box-shadow:none;border-radius:0;color:var(--pt-ink-soft)}
.drawing-actions .backend-banner button{min-height:28px;padding:0 8px;color:var(--pt-ink-soft);text-decoration:underline;text-underline-offset:3px}
.toolbar{max-width:calc(100% - 48px);gap:8px}
.toolbar.compact{padding:6px;background:var(--pt-paper);border:1px solid var(--pt-line);box-shadow:var(--pt-lift);border-radius:var(--pt-shape-card);gap:6px}
.toolbar-handle{position:relative;width:auto;min-width:80px;padding:0 10px;gap:8px;display:flex;flex-direction:row;justify-content:center}
.toolbar.compact .toolbar-handle{background:var(--pt-paper);box-shadow:none;border:0}
.toolbar-summary{display:block;white-space:nowrap}
.toolbar-handle:before{content:'';width:10px;height:10px;border-radius:var(--pt-shape-round);background:var(--current-color,var(--pt-ink));flex-shrink:0}
.toolbar-handle svg{width:16px;height:16px}
.history-controls{display:flex;gap:4px;flex-shrink:0}
.history-controls button{width:44px;height:44px;border-radius:var(--pt-shape-key-sm);background:var(--pt-paper);color:var(--pt-ink-soft);display:grid;place-items:center}
.history-controls svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;fill:none}
.history-controls button:disabled{opacity:.35;cursor:default}
.history-controls button:not(:disabled):active{transform:scale(.96)}
.view-btn{width:44px;height:44px}.view-pill{height:44px}
.word-context{margin:0 0 18px;text-align:center;color:var(--pt-ink-soft)}
.wordbook-tip{overflow-wrap:anywhere}
.canvas-wrap.drawing-ui .drawing-empty{opacity:0}
@media(max-width:900px){
  .drawing-actions{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 4px 4px}
  .drawing-guidance strong{display:none}
  .drawing-action-buttons{display:grid;grid-template-columns:auto auto minmax(0,1fr)}
  .drawing-action-buttons .artwork-handoff{min-width:0;padding:0 16px}
  .drawing-action-buttons .ai-look{height:52px;border-radius:var(--pt-shape-key)}
  .toolbar:not(.compact),.left-handed .toolbar:not(.compact){left:14px;right:14px;bottom:18px;max-width:none}
  .toolbar:not(.compact) .toolbar-main{padding-right:16px}
  .drawing-actions .backend-banner{justify-self:start}
}
@media(max-width:640px){
  .topbar{min-height:58px;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'brand actions';gap:8px;padding:0 2px 8px}
  .topbar .progress{display:none}
  .toolbar,.toolbar.compact{left:max(12px,env(safe-area-inset-left));right:auto;bottom:12px;max-width:calc(100% - 24px)}
  .toolbar:not(.compact),.left-handed .toolbar:not(.compact){left:12px;right:12px;bottom:12px;padding:6px;gap:6px}
  .toolbar-handle{width:auto;min-width:76px;padding:0 8px}.toolbar-summary{display:block}
  .left-handed .toolbar.compact{left:auto;right:max(12px,env(safe-area-inset-right))}.drawing-action-buttons .ai-look,.drawing-action-buttons .finish{padding:0 10px;gap:5px}
  .drawing-action-buttons .ai-look svg,.drawing-action-buttons .finish svg{display:none}
  .view-controls .view-btn{width:auto;height:48px}
}
@media(max-height:520px) and (orientation:landscape){
  .topbar{min-height:44px;height:44px;padding-bottom:4px}
  .brand-mark{width:30px;height:30px}.right .round-btn{width:44px;height:44px}
  .drawing-actions{grid-template-columns:minmax(0,1fr) auto;padding:8px 4px 4px;gap:4px 12px}
  .drawing-action-buttons{display:flex}.drawing-action-buttons button{min-height:44px;height:44px}
  .drawing-action-buttons .artwork-handoff{min-width:124px;}
  .drawing-actions .backend-banner{display:none}
  .toolbar:not(.compact),.left-handed .toolbar:not(.compact){left:12px;right:12px;bottom:12px;max-width:none}
}
@media(prefers-reduced-motion:reduce){.artwork-handoff,.drawing-actions button,.toolbar{transition:none!important}}

:is(.word-pop,.wordbook-modal,.confirm-modal,.result-modal,.panel,.sheet):not(.show){visibility:hidden}/* Animation is the sole default finish action; AI is entered through settings. */


.drawing-action-buttons{display:flex;justify-content:flex-end}
.drawing-action-buttons .artwork-handoff{min-width:200px}
.advanced-intro{margin:0 0 16px;color:var(--pt-ink-soft)}
.advanced-actions{display:grid;gap:10px}
.advanced-action{display:flex;align-items:center;gap:12px;min-height:76px;padding:14px;text-align:left;border:1px solid var(--pt-line);border-radius:var(--pt-shape-key);background:var(--pt-paper);color:var(--pt-ink)}
.advanced-action svg{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.advanced-action span{display:flex;flex-direction:column;gap:5px;min-width:0}.advanced-action small{color:var(--pt-ink-soft)}
.advanced-action:disabled{opacity:.48;cursor:default}
.advanced-action:focus-visible,.advanced-connection summary:focus-visible{outline:3px solid var(--pt-ink);outline-offset:3px}
.advanced-state{margin:12px 0 0;color:var(--pt-ink-soft)}
.advanced-connection{border:1px solid var(--pt-line);border-radius:var(--pt-shape-key);padding:0 12px}
.advanced-connection summary{padding:14px 0;min-height:44px;cursor:pointer}
.advanced-connection .section{border:0;padding:12px 0;box-shadow:none}
@media(max-width:900px){.drawing-action-buttons{display:grid;grid-template-columns:minmax(0,1fr)}.drawing-action-buttons .artwork-handoff{width:100%;min-width:0}}
@media(max-height:520px) and (orientation:landscape){.drawing-action-buttons{display:flex}.drawing-action-buttons .artwork-handoff{width:auto;min-width:180px}}
/* Mobile canvas painting avoids expensive blurred/translucent overlay layers. */
@media(pointer:coarse){
  .toolbar,.canvas-hud .word-chip,.canvas-hud .hint-trigger,.view-dock,.view-controls,.view-btn{backdrop-filter:none;-webkit-backdrop-filter:none}
  .canvas-wrap.drawing-ui .canvas-hud,.canvas-wrap.drawing-ui .painting-hint,.canvas-wrap.drawing-ui .toolbar,.canvas-wrap.drawing-ui .view-dock{opacity:0;visibility:hidden;transition:none;transform:none}
}
.drawing-performance{margin-top:12px;color:var(--pt-ink-soft)}
.drawing-performance summary{cursor:pointer;min-height:44px;padding:10px 0;}
.drawing-performance p{margin:0 0 8px}
.drawing-performance button{min-height:44px;padding:0 12px;border:1px solid var(--pt-line);border-radius:var(--pt-shape-key-sm);background:var(--pt-paper);}
.drawing-performance output{display:block;white-space:pre-wrap;margin-top:10px;overflow-wrap:anywhere}/* Screenshot-led simplification: paper, one core action row, optional More layer. */


.workspace-sr-only{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.workspace-more button:focus-visible{outline:3px solid var(--pt-ink);outline-offset:3px}
.app .drawing-actions{position:relative;display:flex;align-items:center;gap:8px;padding:10px 2px 6px}
.app .drawing-actions .toolbar{position:static;left:auto;right:auto;bottom:auto;width:auto;max-width:none;padding:0;gap:6px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;flex-shrink:0;transition:none}
.app .drawing-actions .toolbar-handle{height:48px;min-height:48px;min-width:80px;padding:0 8px;border-radius:var(--pt-shape-key-sm);background:var(--pt-paper);border:1px solid var(--pt-line);box-shadow:none}
.app .drawing-actions .history-controls button{height:48px;border:1px solid var(--pt-line);background:var(--pt-paper)}
#redoBtn[hidden]{display:none}
.app .drawing-actions .drawing-action-buttons{display:flex;flex:1;min-width:0}
.app .drawing-actions .artwork-handoff{width:100%;min-width:0;max-width:240px;padding:0 12px;height:52px}
#toolbar .toolbar-main{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:12;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px;width:auto;max-height:calc(100dvh - 140px);padding:14px;overflow:auto;overscroll-behavior:contain;border:1px solid var(--pt-line);border-radius:var(--pt-shape-card);background:var(--pt-paper);box-shadow:var(--pt-lift);mask-image:none;-webkit-mask-image:none}
#toolbar.compact .toolbar-main{display:none}
#toolbar .tool-group,#toolbar .brush-group,#toolbar .color-group{padding-right:0;border-right:0;gap:6px;flex-shrink:0}
#toolbar .color-wrap{width:44px;height:44px}
#toolbar .size-group{flex:1;min-width:180px;gap:10px}
#toolbar .size-slider{width:100%;min-width:80px}
.left-handed .drawing-actions{flex-direction:row-reverse}
.left-handed .drawing-actions .toolbar{flex-direction:row-reverse}
.workspace-more{max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px);overflow:auto}
.workspace-more .sheet-head{height:76px}
.more-brand{color:var(--pt-ink-soft)}
.more-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}
.more-word{display:contents}
.workspace-more .word-chip{grid-column:1/-1;min-height:52px;padding:0 12px;gap:8px;min-width:0;background:var(--pt-paper);box-shadow:none;backdrop-filter:none}
.workspace-more #chipWord{margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-more .hint-trigger,.more-action,.workspace-more .view-trigger{position:static;display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-width:0;min-height:52px;padding:10px 12px;border:1px solid var(--pt-line);border-radius:var(--pt-shape-key-sm);background:var(--pt-paper);color:var(--pt-ink-soft);box-shadow:none;}
.more-action svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.workspace-more .view-dock{position:static;display:block;grid-column:1/-1;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;transform:none}
.workspace-more .view-trigger:after{content:'⌄';margin-left:auto}
.workspace-more .view-dock.open .view-trigger:after{content:'⌃'}
.workspace-more .view-controls{position:static;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none}
.workspace-more .view-controls[hidden]{display:none}
.workspace-more .view-pill{display:grid;height:44px}
.workspace-more .view-btn{width:auto;min-height:44px;padding:0 10px;display:flex;align-items:center;gap:5px}
.workspace-more .view-btn-label{display:inline;}
.workspace-more .view-close{display:block;min-height:44px;padding:0 12px;margin-left:auto;}
@media(max-width:640px){
  .app{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))}
  .app .stage{padding:6px;border-radius:var(--pt-shape-card)}
  .canvas-wrap{border-radius:var(--pt-shape-key)}
  .app .drawing-actions .artwork-handoff{max-width:none}
}
@media(max-width:360px){
  .app .drawing-actions{gap:6px}
  .app .drawing-actions .toolbar{gap:4px}
  .app .drawing-actions .toolbar-handle{min-width:72px;padding:0 6px;gap:5px}
  .app .drawing-actions .artwork-handoff{padding:0 8px;gap:4px}
  .artwork-handoff svg{width:20px;height:20px}
}
@media(max-height:520px) and (orientation:landscape){
  .app .drawing-actions{padding-top:6px}
  .app .drawing-actions .artwork-handoff{height:48px;min-height:48px}
  #toolbar .toolbar-main{max-height:calc(100dvh - 100px)}
}
.workspace-more .hint-trigger span{display:inline}
.workspace-more .close{width:44px;height:44px}
.workspace-more .view-dock.open .view-controls{display:flex;width:auto;backdrop-filter:none;-webkit-backdrop-filter:none}/* Icon-led guidance and concise controls; destructive and cost notices stay explicit. */


.ui-icon{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.drawing-guide{display:flex;align-items:flex-start;justify-content:center;gap:26px;list-style:none;padding:0;margin:0;max-width:100%}
.drawing-guide li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:58px}
.drawing-guide-picture{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--pt-line);border-radius:var(--pt-shape-card);background:var(--pt-paper);color:var(--pt-ink-soft)}
.drawing-guide-picture .ui-icon{width:28px;height:28px}
.drawing-guide li:nth-child(2) .drawing-guide-picture{background:var(--pt-paper);color:var(--pt-ink)}
.drawing-empty .drawing-guide li>span:last-child:not(.drawing-guide-arrow),.drawing-empty .drawing-guide li>span:nth-child(2){padding:0}
.drawing-empty .drawing-guide-arrow{position:absolute;left:calc(100% + 4px);top:20px;padding:0;color:var(--pt-ink-soft)}
.drawing-guide-arrow .ui-icon{width:18px;height:18px}
.workspace-more .more-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px}
.workspace-more .more-actions :is(.word-chip,.hint-trigger,.more-action,.view-trigger){grid-column:auto;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:90px;min-width:0;padding:12px 6px;text-align:center;}
.workspace-more .more-actions button>svg,.workspace-more .more-actions .book-icon svg{width:26px;height:26px}
.workspace-more .more-actions .book-icon{width:26px;height:26px;padding:0;background:none;display:grid;place-items:center;border-radius:0}
.workspace-more .more-actions .word-chip{gap:5px}
.workspace-more #chipWord{margin:0;max-width:100%;width:100%;color:var(--pt-ink-soft)}
.workspace-more #wordBookCount{display:none}
.workspace-more .more-actions .view-dock{display:contents;grid-column:auto}
.workspace-more .view-trigger:after{position:absolute;right:8px;top:8px;margin:0;}
.workspace-more .view-controls{grid-column:1/-1}
.workspace-more .view-controls .view-btn{flex-direction:row;min-height:44px;width:auto}
.word-actions .start,.confirm-actions #continueDrawing{display:flex;align-items:center;justify-content:center;gap:8px}
.panel-tabs .ptab{display:flex;align-items:center;justify-content:center;gap:5px;padding:0 10px;min-height:44px}
.panel-tabs .ptab .ui-icon{width:18px;height:18px}
#exportSheet{max-height:var(--pt-export-max-height);overflow-y:auto;overscroll-behavior:contain}
#exportSheet .sheet-head{position:sticky;top:0;z-index:2;background:var(--pt-paper)}
#exportSheet .action{min-height:56px;height:auto;padding:12px 14px}
#exportSheet .action>div{display:flex;align-items:center;gap:12px}
#exportSheet .action:disabled{opacity:.42;cursor:default}
#exportSheet .action[hidden]{display:none}
#exportSheet .export-badge{color:var(--pt-ink-soft)}
#exportSheet .sheet-note{color:var(--pt-ink-soft)}
@media(max-width:360px){
  .drawing-guide{gap:20px}
  .drawing-guide li{min-width:52px}
  .drawing-guide-picture{width:52px;height:52px;border-radius:var(--pt-shape-key)}
  .drawing-empty{padding:14px}
  .panel-tabs{gap:5px;padding:10px 12px 0}
  .panel-tabs .ptab{padding:0 7px;gap:4px;}
}/* Reference SVG is a pointer-transparent DOM layer; never part of ink/export. */

.trace-outline{position:absolute;inset:0;pointer-events:none;overflow:visible}
.trace-outline[hidden],.trace-steps[hidden]{display:none!important}
.trace-outline path[data-trace]{fill:none;stroke:var(--pt-guide-lit);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.18}
.trace-outline path[data-trace].trace-current{stroke:var(--pt-guide-lit);opacity:.45;stroke-dasharray:12 11}
.trace-outline path[data-trace].trace-covered{opacity:.08}
.trace-start{display:none;opacity:.65;pointer-events:none}
.trace-start.trace-current{display:none}
.trace-start circle{fill:var(--pt-paper);stroke:var(--pt-guide-lit);stroke-width:4}
.trace-start path{fill:none;stroke:var(--pt-guide-lit);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.trace-part-label{color:var(--pt-ink-soft);pointer-events:none}
.trace-part-label[hidden]{display:none}
.canvas-wrap.drawing-ui .trace-outline path[data-trace].trace-current{opacity:.18}
.canvas-wrap.drawing-ui .trace-start{opacity:.25}
.canvas-wrap.drawing-ui .trace-steps{opacity:.4;pointer-events:none}
.trace-caption{position:absolute;top:64px;left:17px;right:17px;z-index:4;display:flex;align-items:center;gap:7px;pointer-events:none}
.trace-caption button{min-height:44px;padding:0 8px;display:flex;align-items:center;gap:4px;border:0;border-radius:var(--pt-shape-key-sm);background:var(--pt-paper);color:var(--pt-ink-soft);cursor:pointer;pointer-events:auto}
.trace-caption .ui-icon{width:20px;height:20px}.trace-caption button>span:first-child{display:flex}
.trace-caption[hidden],.trace-caption [hidden],.trace-watch-reference[hidden]{display:none!important}
.trace-caption button:focus-visible,.guide-modes button:focus-visible{outline:3px solid var(--pt-ink);outline-offset:2px}
.canvas-wrap.drawing-ui .trace-caption{opacity:0;pointer-events:none}.canvas-wrap.drawing-ui .trace-caption button{pointer-events:none}
.trace-watch-reference{position:absolute;top:12px;left:15px;width:82px;height:68px;z-index:3;pointer-events:none}
.trace-watch-reference img,.trace-watch-reference svg{width:100%;height:100%;object-fit:contain}
.canvas-wrap.drawing-ui .trace-watch-reference{opacity:.35}
.trace-demo path{fill:none;stroke:var(--pt-guide-lit);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.guide-reference{margin:0 20px 18px;padding:12px;border:1px solid var(--pt-line);border-radius:var(--pt-shape-card);background:var(--pt-paper)}
.guide-reference[hidden]{display:none!important}
.guide-reference-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.guide-reference figure{margin:0;text-align:center;min-width:0}.guide-reference figure>div,.guide-reference figure>svg{width:100%;height:112px}
.guide-reference img,.guide-reference figure>div svg{width:100%;height:100%;object-fit:contain}
.guide-reference figure>svg{fill:none;stroke:var(--pt-ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.guide-reference figcaption{color:var(--pt-ink-soft)}.guide-reference p{margin:8px 0;color:var(--pt-ink-soft)}
.guide-modes{display:flex;gap:6px}.guide-modes button{flex:1;min-height:44px;border:1px solid var(--pt-line);border-radius:var(--pt-shape-key-sm);background:white;color:var(--pt-ink-soft);cursor:pointer}
.guide-modes button[aria-pressed=true]{background:var(--pt-paper);border-color:var(--pt-line);color:var(--pt-ink-soft)}
@media(max-height:520px) and (orientation:landscape){.trace-caption{top:58px}.guide-reference figure>div,.guide-reference figure>svg{height:84px}.trace-watch-reference{height:52px}}
.trace-steps{position:absolute;top:17px;left:17px;z-index:4;display:flex;gap:5px}
.trace-steps button{position:relative;width:44px;height:44px;border:1px solid transparent;border-radius:var(--pt-shape-key-sm);background:var(--pt-paper);color:var(--pt-ink-soft);padding:5px;cursor:pointer}
.trace-steps button svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.trace-steps button span{position:absolute;right:4px;bottom:2px;}
.trace-steps button[aria-pressed=true]{border-color:var(--pt-line);background:var(--pt-paper);color:var(--pt-ink-soft)}
.trace-steps button.trace-covered{color:var(--pt-ink-soft)}
.trace-steps button:focus-visible{outline:3px solid var(--pt-ink);outline-offset:2px}
@media(max-width:400px){.trace-steps{left:11px;gap:2px}.trace-steps button{width:44px}}

.trace-steps button svg path{vector-effect:non-scaling-stroke;stroke-width:1.8}/* One quiet, local feedback line connects drawing to the primary Animate action. */
@media(max-height:520px) and (orientation:landscape){}/* Visual P0–P2: a quiet paper, one guidance group and a single mint action. */


.app{background:var(--pt-desk)}
.app .stage{padding:0;border:0;border-radius:var(--pt-shape-card);background:var(--pt-paper);box-shadow:var(--pt-lift)}
.app .canvas-wrap{border:0;border-radius:var(--pt-shape-card)}
.canvas-wrap:before{display:none}
.app .drawing-actions{padding:8px 0 0}
.app .drawing-actions :is(.toolbar-handle,.history-controls button){border-color:transparent;background:var(--pt-paper);border-radius:var(--pt-shape-key)}

.trace-tools{position:absolute;left:10px;top:10px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:calc(100% - 104px);pointer-events:none}
.trace-tools .trace-steps{position:static;gap:2px;pointer-events:auto}
.trace-steps button{background:transparent;border-radius:var(--pt-shape-key);color:var(--pt-guide)}
.trace-steps button[aria-pressed=true]{background:var(--pt-paper);border-color:transparent;color:var(--pt-guide-lit)}
.trace-steps button.trace-covered{color:var(--pt-ink-soft)}
.trace-steps button span{right:3px;bottom:1px}
.trace-tools .trace-caption{position:static;flex-wrap:wrap;gap:2px}
.trace-caption button{min-width:44px;padding:0 6px;background:var(--pt-paper);border-radius:var(--pt-shape-key);color:var(--pt-ink-soft);}
.trace-part-label{min-width:30px;padding-right:4px;color:var(--pt-ink-soft)}
.trace-caption .template-icon{width:24px;height:24px}
.trace-watch-reference{top:10px;left:10px;width:72px;height:56px}
.trace-watch-reference:not([hidden])~.trace-tools{top:68px}
.template-icon{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.template-icon path{vector-effect:non-scaling-stroke;stroke-width:1.8}
.trace-outline path[data-trace]{stroke:var(--pt-guide);opacity:.55}
.trace-outline path[data-trace].trace-current{stroke:var(--pt-guide-lit);opacity:.5}
.trace-outline path[data-trace].trace-covered{opacity:.12}
.trace-start circle{fill:var(--pt-paper);stroke:var(--pt-guide-lit)}
.trace-start path,.trace-demo path{stroke:var(--pt-guide-lit)}
.canvas-wrap.drawing-ui .trace-tools{opacity:0;visibility:hidden;pointer-events:none}
.canvas-wrap.drawing-ui .trace-outline path[data-trace].trace-current{opacity:.16}
.guide-reference{padding:12px;border:0;border-radius:var(--pt-shape-card)}
.guide-reference-pair{gap:16px}
.guide-reference figure>div,.guide-reference figure>svg{height:132px}
.guide-reference figure>svg{stroke:var(--pt-ink-soft)}
.guide-reference figure>svg path{vector-effect:non-scaling-stroke;stroke-width:2}
.guide-modes button{border-color:transparent;border-radius:var(--pt-shape-key);}
.guide-modes button[aria-pressed=true]{background:var(--pt-paper);border-color:var(--pt-line);color:var(--pt-guide-lit)}
.workspace-more .sheet-head{height:64px;border-bottom:0}
.workspace-more .more-actions :is(.word-chip,.hint-trigger,.more-action,.view-trigger){border-color:transparent;border-radius:var(--pt-shape-key)}
.guide-reference{margin-inline:14px}
.drawing-guide-picture{border:0;box-shadow:none;background:transparent}
.drawing-guide li:nth-child(2) .drawing-guide-picture{background:var(--pt-paper);color:var(--pt-ink-soft)}
#toolbar .toolbar-main{border-radius:var(--pt-shape-card)}
.app .drawing-actions .artwork-handoff{border-radius:var(--pt-shape-key);box-shadow:var(--pt-lift)}
.artwork-handoff[aria-disabled=true]{background:var(--pt-paper);box-shadow:var(--pt-lift)}
@media(max-width:640px){
  .app{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
  .app .stage,.app .canvas-wrap{border-radius:var(--pt-shape-card)}
}
@media(max-height:520px) and (orientation:landscape){
  .trace-tools{flex-direction:row;align-items:center;max-width:calc(100% - 104px)}
  .trace-watch-reference:not([hidden])~.trace-tools{top:10px;left:92px}
  .trace-tools .trace-caption{flex-wrap:nowrap}
  .guide-reference figure>div,.guide-reference figure>svg{height:84px}
}/* Progressive drawing guidance: one cue on paper, choices on demand. */


.trace-tools[hidden],.trace-options[hidden]{display:none!important}
.trace-cue{display:flex;align-items:center;gap:7px;min-height:48px;max-width:100%;padding:5px 8px;border:0;border-radius:var(--pt-shape-key);background:var(--pt-paper);color:var(--pt-ink-soft);text-align:left;cursor:pointer;pointer-events:auto}
.trace-cue-icon{display:flex;flex-shrink:0;width:32px;height:32px;align-items:center;justify-content:center;color:var(--pt-guide-lit)}
.trace-cue-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.trace-cue-icon .template-icon{stroke-width:1.8}
.trace-cue-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.trace-cue .trace-part-label{padding:0;}
.trace-cue-hint{color:var(--pt-ink-soft)}
.trace-cue-chevron{width:18px;height:18px;flex-shrink:0;transition:transform var(--kid-motion-fast) ease}
.trace-cue[aria-expanded=true] .trace-cue-chevron{transform:rotate(180deg)}
.trace-cue:focus-visible,.trace-steps button:focus-visible{outline:3px solid var(--pt-ink);outline-offset:2px}
.trace-options{padding:5px;max-width:100%;border:1px solid var(--pt-line);border-radius:var(--pt-shape-key);background:var(--pt-paper);box-shadow:var(--pt-lift);pointer-events:auto;animation:guide-reveal var(--kid-motion-fast) ease-out}
.trace-options .trace-steps{flex-wrap:wrap}
.trace-options .trace-caption{margin-top:2px}
.trace-tools[data-playing=true] .trace-cue-icon{color:var(--pt-guide-lit)}
.canvas-wrap.guide-drawing .trace-tools{opacity:0;visibility:hidden;pointer-events:none}
.canvas-wrap.guide-drawing .trace-outline path[data-trace].trace-current{opacity:.16}
@keyframes guide-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.trace-options{animation:none}.trace-cue-chevron{transition:none}}/* Keep the visual target on paper while the toolbar yields to the child's hand. */


.trace-outline path[data-trace].trace-current{opacity:.7;stroke-width:6;stroke-dasharray:10 9}
.canvas-wrap.drawing-ui .trace-outline path[data-trace].trace-current,
.canvas-wrap.guide-drawing .trace-outline path[data-trace].trace-current{opacity:.4}
.trace-start{opacity:.9}
.trace-start circle,.trace-start path{vector-effect:non-scaling-stroke;stroke-width:2.5}
.canvas-wrap.drawing-ui .trace-start{opacity:.45}
.trace-options button{min-height:48px}/* One local finishing entry; choices live in a focused preview. */
#polishBtn{display:flex;align-items:center;gap:4px;min-height:44px;padding:0 10px;margin-left:4px;border:0;border-radius:var(--pt-shape-key);background:var(--pt-paper);color:var(--pt-ink-soft);cursor:pointer;pointer-events:auto}
#polishBtn[hidden],#polishRestore[hidden]{display:none!important}
#polishBtn .ui-icon{width:18px;height:18px}
.confirm-modal.local-polish-modal{width:min(760px,calc(100vw - 24px));height:min(700px,calc(100dvh - 24px));gap:12px}
.polish-body{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0;overflow:auto}
.polish-paper{display:flex;align-items:center;justify-content:center;flex:1;min-height:120px;background:var(--pt-paper);border-radius:var(--pt-shape-card);overflow:hidden}
.polish-paper canvas{display:block;width:100%;height:100%;object-fit:contain}
.polish-options,.polish-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}
.polish-options button,.polish-actions button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:0 14px;border:0;border-radius:var(--pt-shape-key);cursor:pointer;background:var(--pt-paper);color:var(--pt-ink)}
.polish-options button[aria-pressed=true]{background:var(--pt-paper);color:var(--pt-guide-lit)}
.polish-options .ui-icon{width:20px;height:20px}
.polish-actions{justify-content:flex-end}
#polishApply{flex:1;background:var(--pt-action);color:var(--pt-ink)}
.local-polish-modal button:focus-visible,#polishBtn:focus-visible{outline:3px solid var(--pt-ink);outline-offset:2px}
@media(max-width:600px),(max-height:520px){.confirm-modal.local-polish-modal{width:auto;height:auto;left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));top:max(6px,env(safe-area-inset-top));bottom:max(6px,env(safe-area-inset-bottom));gap:8px}.polish-paper{min-height:80px}}

#polishBtn,.local-polish-modal button{min-height:48px}
.polish-details[hidden],.polish-palette[hidden],.polish-finished[hidden],.polish-actions[hidden],.polish-more[hidden]{display:none!important}
.polish-details{flex-shrink:0;max-height:180px;overflow:auto;padding:10px;border-radius:var(--pt-shape-key);background:var(--pt-paper)}
.polish-details p{margin:0 0 8px;color:var(--pt-ink-soft)}
.polish-region-choice{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.polish-region-choice select{min-height:48px;max-width:100%;padding:6px 10px;border:1px solid var(--pt-guide-lit);border-radius:var(--pt-shape-key);background:var(--pt-paper);color:var(--pt-ink)}
.polish-palette,.polish-materials,.polish-finished{display:flex;flex-wrap:wrap;gap:8px}
.polish-materials{margin-top:8px}
.polish-details button,.polish-finished button,.polish-more{padding:8px 12px;border:0;border-radius:var(--pt-shape-key);background:var(--pt-paper);color:var(--pt-ink);cursor:pointer}
.polish-details button[aria-pressed=true]{outline:2px solid var(--pt-guide-lit);outline-offset:-2px;background:var(--pt-paper)}
.polish-palette button{display:flex;align-items:center;gap:5px}
.polish-palette span{width:20px;height:20px;border-radius:var(--pt-shape-round);background:var(--swatch)}
.polish-more{align-self:flex-start;background:transparent;color:var(--pt-ink-soft)}
.polish-finished{flex-shrink:0;align-items:center}
.polish-finished button{background:var(--pt-paper)}
#polishAnimate{flex:1;background:var(--pt-action)}
.local-polish-modal.finished .polish-options{display:none}
@media(max-height:520px){.polish-details{max-height:100px}}/* Advice occupies the existing cue; the paper mark never becomes artwork. */


.stroke-feedback-actions[hidden],.stroke-feedback-outline[hidden],#traceCaption[hidden]{display:none!important}
.stroke-feedback-actions{display:flex;flex-wrap:wrap;gap:5px;max-width:100%}
.stroke-feedback-actions button{min-height:48px;padding:6px 10px;border:0;border-radius:var(--pt-shape-key);background:var(--pt-paper);color:var(--pt-ink-soft);cursor:pointer}
.stroke-feedback-actions button:disabled{opacity:.45}
.stroke-feedback-actions button:focus-visible{outline:3px solid var(--pt-ink);outline-offset:2px}
.stroke-feedback-actions span{flex-basis:100%;padding:3px 5px;color:var(--pt-ink-soft)}
.stroke-feedback-outline{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:visible;fill:none;stroke:var(--pt-guide-lit);stroke-linecap:round;stroke-linejoin:round}
.stroke-feedback-outline path{stroke-width:5;stroke-dasharray:7 6;vector-effect:non-scaling-stroke}
.stroke-feedback-outline circle{stroke-width:2;vector-effect:non-scaling-stroke;fill:var(--pt-paper);fill-opacity:.35}
.canvas-wrap.guide-drawing .stroke-feedback-outline{visibility:hidden}
.trace-cue .trace-part-label{overflow-wrap:anywhere}

.guide-listen{display:flex;align-items:center;gap:5px;min-height:48px;padding:6px 10px;margin-bottom:4px;border:0;border-radius:var(--pt-shape-key);background:var(--pt-paper);color:var(--pt-ink-soft);cursor:pointer}
.guide-listen[aria-pressed=true]{background:var(--pt-paper)}
.guide-listen .ui-icon{width:20px;height:20px}
.guide-listen:focus-visible{outline:3px solid var(--pt-ink);outline-offset:2px}/* Child drawing surface: one short cue, icons for secondary entries. */



.trace-cue{padding:6px 8px;gap:6px}
.trace-cue-copy{flex-direction:row}
.trace-cue .trace-part-label{max-width:8em}
.app .drawing-actions .toolbar-handle{width:56px;min-width:56px;padding:0 8px;gap:4px}
.toolbar-handle #toolIcon,.toolbar.compact .toolbar-handle #toolIcon{width:24px;height:24px;transform:none;transition:none}
.toolbar-handle:before{width:8px;height:8px}
#polishBtn.more-action{margin:0;min-height:48px;padding:10px;justify-content:center;gap:8px}
#polishBtn.more-action .ui-icon{width:24px;height:24px}/* Progressive drawing: stable entries, transient controls above the paper. */


.app{position:relative}
.app .drawing-actions{position:absolute;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:10;width:auto;max-width:none;margin:0;padding:0;background:transparent;box-shadow:none}
.app[data-controls=hidden] :is(.drawing-actions,.trace-tools,.settings-corner){opacity:0;visibility:hidden;pointer-events:none}
.app[data-controls=shown] :is(.drawing-actions,.trace-tools,.settings-corner){opacity:1;visibility:visible}
#undoBtn[hidden],#artworkHandoffBtn[hidden],#moreArtwork[hidden]{display:none!important}
#toolbar .toolbar-main{display:block;left:0;right:0;max-height:calc(100dvh - 160px);padding:8px}
#toolbar.compact .toolbar-main{display:none}
.tool-choice{border-bottom:1px solid var(--pt-line)}
.tool-choice:last-child{border:0}
.tool-choice>summary,.more-subsection>summary{display:flex;align-items:center;min-height:48px;padding:8px 10px;cursor:pointer;color:var(--pt-ink-soft)}
.tool-choice>summary:after,.more-section>summary:after,.more-subsection>summary:after{content:'⌄';margin-left:auto}
.tool-choice[open]>summary:after,.more-section[open]>summary:after,.more-subsection[open]>summary:after{content:'⌃'}
.tool-choice-body{display:flex;flex-wrap:wrap;gap:8px;padding:8px}
#toolbar .brush-group,#toolbar .color-group{flex-wrap:wrap}
#toolbar .color-wrap{width:48px;height:48px}
#toolbar .size-group{width:100%;min-width:0}
.more-sections{display:flex;flex-direction:column;gap:8px;padding:12px}
.workspace-more .sheet-head{position:sticky;top:0;z-index:2;background:var(--pt-paper)}
.workspace-more .more-section{margin:0;padding:0;border:0;border-radius:var(--pt-shape-key);background:var(--pt-paper)}
.more-section>summary{display:flex;align-items:center;gap:8px;min-height:56px;padding:12px;cursor:pointer;color:var(--pt-ink-soft);}
.more-section>summary .ui-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.more-section summary:focus-visible,.tool-choice summary:focus-visible{outline:3px solid var(--pt-ink);outline-offset:-3px}
.more-section-body{padding:0 10px 10px}
.more-subsection{margin-top:6px;border-top:1px solid var(--pt-line)}
.workspace-more #traceSteps{position:static;inset:auto;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:8px;transform:none;max-width:100%}
.workspace-more #traceSteps[hidden]{display:none}
.workspace-more #traceSteps button{min-width:48px;min-height:48px}
.workspace-more .guide-reference{margin:0;padding:8px}
.workspace-more .more-actions{padding:10px;gap:8px}
html.painting-expanded .app{position:fixed;inset:0;max-width:none;width:100%;height:100dvh;padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));z-index:1}
html.painting-expanded,html.painting-expanded body{overflow:hidden}
@media(max-width:400px){.app .drawing-actions{gap:4px;padding:6px;left:6px;right:6px}.app .drawing-actions .toolbar{gap:4px}.app .drawing-actions .history-controls{gap:2px}.app .drawing-actions .artwork-handoff{padding:0 8px}.trace-tools{max-width:calc(100% - 130px)}}

.app .drawing-actions{flex-wrap:wrap}
.app .drawing-actions .drawing-action-buttons{min-width:96px}

#drawingActionButtons[hidden]{display:none!important}
.app[data-artwork=false] .drawing-actions{right:auto}/* Press is a physical state; only committed actions own audible feedback. */


:is(.app,.artwork-preview-modal,.workspace-more,.export-sheet) :is(button,summary):not(:disabled):not([aria-disabled=true]):active{filter:brightness(.95);transform:translateY(1px)}
.tool-choice-sample{position:absolute;bottom:calc(100% + 8px);left:0;width:140px;height:70px;padding:0;background:var(--pt-paper);border:1px solid var(--pt-line);border-radius:var(--pt-shape-key);box-shadow:var(--pt-lift);pointer-events:none;z-index:3}
.tool-choice-sample[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){:is(.app,.artwork-preview-modal,.workspace-more,.export-sheet) :is(button,summary):not(:disabled):active{transform:none}}/* Secondary experiments remain below the artwork and outside its primary footer. */


.artwork-options{flex:none;min-width:0;margin:0 12px 12px;border-top:1px solid var(--pt-line)}
.artwork-options>summary{min-height:48px;display:flex;align-items:center;cursor:pointer;color:var(--pt-ink-soft)}
.artwork-options>summary:after{content:"⌄";margin-left:auto}
.artwork-options[open]>summary:after{content:"⌃"}
.artwork-options>button{min-height:48px;min-width:96px;border:1px solid var(--pt-line);border-radius:var(--pt-shape-key);background:var(--pt-paper);color:var(--pt-ink-soft);}
.artwork-options>summary:focus-visible,.artwork-options>button:focus-visible{outline:3px solid var(--pt-ink);outline-offset:2px}

.draft-status{margin:8px 12px;color:var(--pt-ink-soft)}/* Pen guidance: the reference stays display-only, with one current start. */


.trace-tools{gap:6px;max-width:calc(100% - 24px)}
.trace-progress{display:flex;align-items:center;gap:8px;margin-left:2px;flex-shrink:0}
.trace-progress[hidden]{display:none}
.trace-progress i{display:block;width:10px;height:10px;border:2px solid var(--pt-ink-soft);border-radius:var(--pt-shape-round);box-sizing:border-box}
.trace-progress i.covered{background:var(--pt-action);border-color:var(--pt-action)}
.trace-progress i.current{background:var(--pt-select);border:1.5px solid var(--pt-ink);box-shadow:none}
.trace-options{display:flex;align-items:center;gap:6px;width:max-content;max-width:none}
.trace-options .trace-caption,.trace-options .stroke-feedback-actions{position:static;display:flex;flex-wrap:nowrap;gap:6px;margin:0;max-width:none}
.trace-options button{display:flex;align-items:center;justify-content:center;gap:4px;min-height:48px;min-width:56px;padding:0 8px;margin:0;border:0;border-radius:var(--pt-shape-key);background:var(--pt-paper);color:var(--pt-ink-soft);white-space:nowrap}
.trace-options button .ui-icon,.trace-options #traceReferenceIcon svg{width:20px;height:20px;flex-shrink:0}
.trace-options button[hidden]{display:none!important}
.trace-start circle{fill:var(--pt-paper);stroke:var(--pt-guide-lit)}
.trace-start .trace-start-core{stroke-width:5}
.trace-start .trace-start-halo{fill:color-mix(in srgb,var(--pt-hint) 20%,transparent);stroke:none;opacity:1}
.trace-start path{stroke:var(--pt-guide-lit);stroke-width:2}
.trace-end{display:none;fill:var(--pt-paper);stroke:var(--pt-guide-lit);stroke-width:2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.trace-end.trace-current{display:block}
.canvas-wrap.guide-drawing .trace-start,.canvas-wrap.drawing-ui .trace-start{visibility:hidden}
.trace-live path{fill:none;stroke:var(--pt-guide-lit);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.trace-demo .guide-demo-pen path{fill:var(--pt-paper);stroke:var(--pt-guide-lit);stroke-width:2}
#contactNib:not(.erasing){stroke:var(--pt-guide-lit);opacity:.8}
#contactBloom{fill:none;stroke:var(--pt-guide-lit);stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none}
.artwork-handoff-icon{display:flex;align-items:center}
.artwork-handoff-icon svg{fill:currentColor;stroke:currentColor;width:24px;height:24px}
.app .drawing-actions #artworkHandoffBtn[data-readiness=partial]{background:var(--pt-paper);box-shadow:var(--pt-lift);color:var(--pt-ink-soft)}
.app .drawing-actions #artworkHandoffBtn[data-readiness=ready]{background:var(--pt-action);box-shadow:var(--pt-lift)}
#artworkHandoffBtn.guide-landed{outline:4px solid var(--pt-ink);outline-offset:3px}
.guide-completion-flight{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:11;overflow:visible;color:var(--pt-guide-lit);fill:var(--pt-guide-lit)}
.guide-completion-flight .ui-icon{fill:currentColor;stroke:currentColor;stroke-width:1.5}
@media(min-width:901px){.app .drawing-actions{left:var(--drawing-paper-left,12px);right:var(--drawing-paper-right,12px)}}

.draft-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 12px}.draft-actions[hidden]{display:none}.draft-actions button{min-height:48px;padding:8px 12px;border:1px solid var(--pt-line);border-radius:var(--pt-shape-key);background:var(--pt-paper);color:var(--pt-ink-soft);}#settingsCorner[data-draft-warning]:after{content:"";position:absolute;width:9px;height:9px;border-radius:var(--pt-shape-round);right:5px;top:5px;background:var(--pt-ink);border:2px solid var(--pt-paper)}/* W2a: a single physical key contract takes precedence over legacy component states. */


body{color:var(--pt-ink);background:var(--pt-desk)}
.app{background:var(--pt-desk)}
.pt-sheet,:is(.word-pop,.confirm-modal,.result-modal,.panel,.sheet,.wordbook-modal){background-color:var(--pt-paper);background-image:var(--pt-paper-noise);background-blend-mode:multiply;box-shadow:var(--pt-lift)}
.app .stage{box-shadow:none;border-radius:var(--pt-shape-sheet);background-color:var(--pt-desk);padding:0;border:0;overflow:visible}
.app .canvas-wrap{border-radius:24px;background:var(--canvas-paper,var(--pt-paper));box-shadow:0 0 0 1px rgba(31,42,48,.08),0 1px 0 var(--pt-paper-deep),0 8px 24px rgba(31,42,48,.08)}
#viewport{background:var(--canvas-paper,var(--pt-paper))}
#board{mix-blend-mode:normal}
.overlay{background:rgba(31,42,48,.28)}
.loading{background:color-mix(in srgb,var(--pt-paper) 66%,transparent)}
.pt-key{
  --pt-key-fill:var(--pt-paper);--pt-key-edge:var(--pt-paper-deep);--pt-key-ink:var(--pt-ink);
  --pt-key-depth:var(--pt-depth-sm);--pt-key-shape:var(--pt-shape-key);--pt-key-ring:0 0 0 0 transparent;
  min-height:var(--pt-target-min);
  background-color:var(--pt-key-fill)!important;background-image:var(--pt-paper-noise)!important;background-blend-mode:multiply;
  border-radius:var(--pt-key-shape)!important;color:var(--pt-key-ink)!important;
  box-shadow:var(--pt-key-ring),0 var(--pt-key-depth) 0 var(--pt-key-edge),var(--pt-lift)!important;
  translate:none!important;filter:none!important;
  transition:transform var(--pt-motion-release) var(--pt-ease-release),box-shadow var(--pt-motion-release) var(--pt-ease-release),background-color var(--pt-motion-base) var(--pt-ease-base);
}
button.pt-key:not(:disabled):not([aria-disabled=true]):is(:active,[data-pressed]){
  transform:translateY(var(--pt-key-depth))!important;
  box-shadow:var(--pt-key-ring),0 0 0 var(--pt-key-edge),var(--pt-lift)!important;
  transition-duration:var(--pt-motion-press);transition-timing-function:var(--pt-ease-press);
}
.pt-key:focus-visible,:is(button,summary,select,input,.viewport):focus-visible{outline:3px solid var(--pt-ink)!important;outline-offset:3px!important}
.pt-key:disabled{opacity:.48;cursor:default}
.pt-key svg:not(.template-icon){stroke:currentColor}
.pt-key:is(.tool.active,.brush-btn.active,.ptab.active,[aria-pressed=true]){--pt-key-ring:inset 0 0 0 2px var(--pt-select)}
.app .drawing-actions #artworkHandoffBtn{--pt-key-depth:var(--pt-depth);--pt-key-fill:var(--pt-action);--pt-key-edge:var(--pt-action-deep);--pt-key-ink:var(--pt-action-ink);min-height:56px;height:56px;}
.app .drawing-actions #artworkHandoffBtn:is([data-readiness=partial],[aria-disabled=true]){--pt-key-fill:var(--pt-paper);--pt-key-edge:color-mix(in srgb,var(--pt-action) 28%,var(--pt-paper-deep));--pt-key-ink:var(--pt-action);--pt-key-ring:inset 0 0 0 1.5px var(--pt-action)}
:is(.word-pop,.confirm-modal,.result-modal,.panel,.sheet,.wordbook-modal){background-color:var(--pt-paper)}
:is(.setting-sub,.hint,.label,.section-title,.wordbook-sub,.wordbook-tip,.result-provider,.sheet-note,.action span,.api-note,.backend-copy span,.usage-chip span){color:var(--pt-ink-soft)}
:is(.toolbar-handle,.history-controls button,.view-btn,.close){min-width:48px;min-height:48px}.switch{min-width:48px;min-height:48px;background:var(--pt-paper-deep);border-radius:var(--pt-shape-key-sm)}
.switch.on{background:var(--pt-select)}.switch i{background:var(--pt-paper);box-shadow:var(--pt-lift)}

.color{border-color:var(--pt-paper);box-shadow:var(--pt-lift)}.color.active{box-shadow:0 0 0 3px var(--pt-select),var(--pt-lift);transform:none}
.brush-btn .stroke{background:var(--pt-ink)}
.brush-btn.marker .stroke{background:var(--crayon-1)}.brush-btn.crayon .stroke{background:var(--crayon-3)}.brush-btn.water .stroke{background:var(--crayon-2)}
.preview:is(.sticker,.clay,.book){background:var(--pt-paper-deep);box-shadow:var(--pt-lift)}
.preview.book:after{background-image:var(--pt-paper-noise);background-color:transparent;opacity:1}
.preview:is(.sticker,.clay) img{filter:none}
.backend-dot{box-shadow:none}.backend-dot.ok{background:var(--pt-action);box-shadow:none}.backend-dot.bad{background:var(--pt-hint);box-shadow:none}/* Guided Canvas: one action cue, separate asset selection. */


.trace-tools{position:absolute;inset:0;right:0;max-width:none;display:block;pointer-events:none;z-index:9}
.trace-tools>button,.trace-tools>div{pointer-events:auto}
.asset-picker{position:absolute;top:max(22px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:center;gap:4px;width:76px;min-width:76px;min-height:50px;padding:6px;border:1px solid var(--pt-line);--pt-key-depth:2px}
#assetPickerIcon{display:flex;width:36px;height:32px}#assetPickerIcon svg{width:36px;height:32px}
#assetPickerChevron{display:flex}#assetPickerChevron svg{width:16px;height:16px;transition:transform var(--pt-motion-base) var(--pt-ease-base)}
.asset-picker[aria-expanded=true] #assetPickerChevron svg{transform:rotate(180deg)}
.trace-guide{position:absolute;top:max(80px,calc(env(safe-area-inset-top) + 64px));left:50%;translate:-50% 0;display:flex;align-items:center;width:276px;max-width:calc(100% - 32px);min-height:58px;padding:3px 6px;border:1px solid var(--pt-line);border-radius:22px;background:var(--canvas-paper,var(--pt-paper));box-shadow:0 2px 0 var(--pt-paper-deep),0 8px 20px rgba(31,42,48,.04);transition:opacity var(--kid-motion-fast) ease,transform var(--kid-motion-fast) ease}
.trace-guide button{display:flex;align-items:center;justify-content:center;min-height:48px;border:0;background:transparent;color:var(--pt-ink);border-radius:16px;box-shadow:none!important;padding:4px;--pt-key-depth:0px}
.trace-guide button:active{background:var(--pt-paper-deep)}
.trace-guide .trace-cue{flex:1;gap:7px;min-width:0}
.trace-cue-icon{display:flex;flex:0 0 43px;width:43px;height:33px}
.trace-cue-icon svg{width:43px;height:33px;overflow:visible}
.trace-cue-icon path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.trace-cue-icon .cue-muted{stroke:var(--pt-line);stroke-width:1.3}
.trace-cue-icon .cue-current{stroke:var(--pt-guide-lit);stroke-width:2.2}
.trace-guide .trace-cue .trace-part-label{white-space:nowrap}
.trace-cue-copy{display:flex;align-items:center;min-width:0}
.trace-progress-btn{flex:0 0 52px;width:52px}
.trace-guide .trace-progress{display:flex;gap:4px;align-items:center;justify-content:center;margin:0}
.trace-guide .trace-progress i{width:6px;height:6px;border:1.5px solid var(--pt-ink-soft);border-radius:50%;background:transparent}
.trace-guide .trace-progress i.current{width:9px;height:9px;background:var(--pt-select);border-color:var(--pt-ink)}
.trace-guide .trace-progress i.covered{background:var(--pt-guide-lit);border-color:var(--pt-guide-lit)}
.trace-guide .trace-demo-btn{flex:0 0 48px;width:48px;flex-direction:column;gap:0;}
#traceDemoIcon{display:flex}#traceDemoIcon svg{width:20px;height:20px}
.trace-demo-btn[aria-pressed=true]{background:var(--pt-select)}
.trace-options{display:block;position:absolute;top:max(148px,calc(env(safe-area-inset-top) + 132px));left:50%;translate:-50% 0;width:276px;max-width:calc(100% - 32px);padding:12px;border:1px solid var(--pt-line);border-radius:22px;background:var(--canvas-paper,var(--pt-paper));box-shadow:var(--pt-lift)}
.trace-options[hidden],.trace-guide [hidden]{display:none!important}
.cue-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.cue-step{min-height:48px;padding:8px;border:1px solid var(--pt-line);border-radius:14px;background:var(--pt-paper)}
.cue-step[aria-pressed=true]{background:var(--pt-select);border-color:var(--pt-ink)}
.trace-tools:has(.asset-picker[aria-expanded=true]) .trace-guide{opacity:0;visibility:hidden}
.asset-tray{position:absolute;top:84px;left:22px;z-index:1;box-shadow:var(--pt-lift);display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;padding:12px 12px 16px;border:1px solid var(--pt-line);border-radius:var(--pt-shape-card);overflow-x:auto;overscroll-behavior:contain;animation:asset-reveal var(--pt-motion-base) var(--pt-ease-base)}
.asset-tray[hidden]{display:none!important}
.asset-card{--pt-key-shape:var(--pt-shape-card);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 84px;width:84px;height:96px;gap:4px;padding:6px;border:0;}
.asset-card[aria-pressed=true]{--pt-key-ring:inset 0 0 0 3px var(--pt-select)}
.asset-picture{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:52px;flex-shrink:0;color:var(--pt-ink)}
.asset-picture>.template-icon,.asset-picture>.ui-icon{width:100%;height:100%}
.asset-picture>.template-icon path{stroke-width:2}
.asset-check{display:none;position:absolute;left:3px;bottom:3px;width:18px;height:18px;border-radius:var(--pt-shape-round);background:var(--pt-select);color:var(--pt-ink)}
.asset-check svg{width:16px;height:16px;stroke-width:2.5}
.asset-card[aria-pressed=true] .asset-check{display:grid;place-items:center}
@keyframes asset-reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.canvas-wrap:is(.drawing-ui,.guide-drawing) #assetTray{display:none!important}
@media(max-width:640px){.asset-card{flex-basis:72px;width:72px;height:84px;}.asset-picture{height:44px}.asset-picture>.template-icon,.asset-picture>.ui-icon{width:100%;height:100%}.asset-tray{gap:10px;padding:10px 10px 14px}.trace-tools{max-width:calc(100% - 24px)}}
@media(prefers-reduced-motion:reduce){
  .pt-key{transition:none!important;animation:none!important}
  .asset-combo:has(button:is(:active,[data-pressed])){transform:none}
  button.pt-key:not(:disabled):not([aria-disabled="true"]):is(:active,[data-pressed]){transform:none!important;--pt-key-fill:var(--pt-paper-deep)}
  .app .drawing-actions #artworkHandoffBtn[data-readiness=ready]:is(:active,[data-pressed]){--pt-key-fill:var(--pt-action-deep)}
  .asset-tray{animation:none}#assetPickerChevron svg{transition:none}
}/* W2b: reference-only feedback; no raster/export consumer. */


.guide-levels{display:flex;gap:8px;margin:12px 0}
.guide-levels button{flex:1;min-width:0;padding:8px 4px;}
.guide-levels button[aria-pressed=true]{--pt-key-ring:inset 0 0 0 2px var(--pt-select)}
#guideBubble .bubble-base{fill:color-mix(in srgb,var(--pt-hint) 20%,transparent)}
#guideBubble .bubble-ink,.guide-bubble-core .bubble-ink{fill:var(--pt-hint)}
.guide-bubble-core .bubble-base{fill:color-mix(in srgb,var(--pt-hint) 20%,transparent)}
.bubble-highlight,.eye-highlight{fill:var(--pt-action-ink)}
.guide-bubble-core{transform-box:fill-box;transform-origin:center}/* ai-scan-allow: MO-02 SPEC §3.2 requires one idle breathing target, never artwork. */

#guideBubble .guide-bubble-core{animation:none}
@keyframes bubble-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
#tracePattern circle{fill:var(--pt-hint);opacity:.25}
.drawing-bubble circle{fill:var(--pt-paper);stroke:var(--pt-hint);stroke-width:1.5}
.drawing-bubble .bubble-highlight{fill:var(--pt-action-ink);stroke:none}
.trace-outline[data-guide-level=dots] path[data-trace],.trace-outline[data-guide-level=dots] .trace-live,.trace-outline[data-guide-level=dots] .trace-end{display:none}
#traceDots circle{fill:var(--pt-guide);opacity:.8}
#traceDots .dot-current{fill:var(--pt-hint);opacity:1}
#traceDots .dot-covered{fill:var(--pt-action);opacity:.35}
.trace-outline[data-guide-level=free-shape] path[data-trace]{stroke:var(--pt-ink);opacity:.15;stroke-dasharray:none;stroke-width:5}
.trace-outline[data-guide-level=free-shape] :is(.trace-start,.trace-end,#traceLive,#traceDots,#guideBubble,#guideAlive){display:none!important}
@media(prefers-reduced-motion:reduce){#guideBubble .guide-bubble-core{animation:none!important}.drawing-bubble{display:none}}/* W5 calm canvas: the paper, not a second HUD surface, owns the workspace. */


.app .drawing-actions{left:calc(var(--drawing-paper-left,12px) + 12px);right:calc(var(--drawing-paper-right,12px) + 12px);bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px));padding:0;flex-wrap:nowrap}
.app .drawing-actions .toolbar-handle{width:56px;min-width:56px}
.app .drawing-actions .toolbar-handle:before{display:none}
.app .drawing-actions .artwork-handoff{width:auto;min-width:120px;max-width:240px}
.trace-tools{max-width:none}

.settings-corner{position:absolute;top:0;right:0;z-index:9;width:64px;height:64px;padding:0;border-radius:var(--pt-shape-key-sm);background:none;touch-action:manipulation;transition:transform var(--pt-motion-release) var(--pt-ease-release)}
#settingsCorner:focus-visible{outline:none!important}
#settingsCorner:focus-visible:before{content:"";position:absolute;inset:4px;z-index:1;border:3px solid var(--pt-ink);border-radius:inherit;pointer-events:none}
body:has(#settingsPanel.show) #settingsCorner{visibility:hidden;pointer-events:none}
.corner-fold{position:absolute;top:0;right:0;width:44px;height:44px;overflow:visible;filter:drop-shadow(-2px 2px 3px rgba(31,42,48,.10))}
.corner-cut{fill:var(--pt-desk)}
.corner-paper{fill:var(--pt-paper)}
.corner-line{fill:none;stroke:#b9c0c5;stroke-width:1.5}
.corner-gear{position:absolute;top:20px;right:20px;width:16px;height:16px;fill:none;stroke:var(--pt-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.settings-corner:active{transform:translateY(var(--pt-depth-sm));filter:brightness(.96)}
.canvas-wrap.drawing-ui .settings-corner{opacity:0;visibility:hidden;pointer-events:none}
.corner-coach{position:absolute;right:14px;top:70px;z-index:9;max-width:calc(100% - 28px);padding:9px 12px;border-radius:12px;background:var(--pt-ink);color:var(--pt-paper);pointer-events:none}
.corner-coach[hidden]{display:none}
.corner-coach:before{content:"";position:absolute;right:12px;top:-6px;border:6px solid transparent;border-top:0;border-bottom-color:var(--pt-ink)}
.calm-settings{position:fixed;top:0;right:0;bottom:0;z-index:46;width:380px;padding:18px;background:var(--pt-paper);box-shadow:-8px 0 32px rgba(31,42,48,.16);overflow:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transform:translateX(100%);transition:opacity var(--pt-motion-base) var(--pt-ease-base),transform var(--pt-motion-base) var(--pt-ease-base)}
.calm-settings.show{opacity:1;visibility:visible;transform:none}
.calm-grab,.parent-grab{display:none}
.calm-settings-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.calm-settings-head h2{margin:0;}
:is(.calm-settings,#settingsPanel) .close svg{stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.calm-settings-body{display:grid;gap:18px}
.calm-settings .calm-settings-row{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:8px 6px;margin:0;padding:0;background:none}
.calm-settings-row>.ui-icon{grid-column:1;grid-row:1;color:var(--pt-ink);width:18px;height:18px}
.calm-settings-row>h3{grid-column:2;margin:0;color:var(--pt-ink)}
.paper-choices,#calmGuideSlot{grid-column:1 / -1}
.paper-choices{display:flex;gap:16px;padding:4px 6px}
.paper-choices button{width:52px;height:52px;flex:0 0 52px;border-radius:50%;border:1px solid var(--pt-paper-deep);background:var(--paper-swatch);box-shadow:0 3px 0 var(--pt-paper-deep)}
.paper-choices button[aria-pressed=true]{outline:3px solid var(--pt-select);outline-offset:3px}
.calm-settings .guide-levels{display:flex;flex-wrap:nowrap;gap:8px;margin:0}
.calm-settings .guide-levels button{flex:1;min-width:0;min-height:48px;padding:8px 4px;border:1px solid var(--pt-paper-deep)}
:is(.calm-settings,#settingsPanel) .pt-key:is([aria-pressed],.ptab){--pt-key-fill:var(--pt-paper);--pt-key-edge:var(--pt-paper-deep);--pt-key-ink:var(--pt-ink);--pt-key-ring:0 0 0 0 transparent;border:1px solid var(--pt-paper-deep)}
:is(.calm-settings,#settingsPanel) .pt-key:is([aria-pressed=true],.ptab.active){--pt-key-fill:color-mix(in srgb,var(--pt-select) 12%,var(--pt-paper));--pt-key-edge:var(--pt-select-deep);--pt-key-ring:inset 0 0 0 1px var(--pt-select);border-color:var(--pt-select)}
.calm-settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border-top:1px solid var(--pt-line);padding-top:18px}
#settingsPanel{left:auto;right:0;top:0;bottom:0;width:380px;display:block;padding:18px;border:0;border-radius:0;overflow:auto;overscroll-behavior:contain;box-shadow:-8px 0 32px rgba(31,42,48,.16);transform:translateX(100%);transition:opacity var(--pt-motion-base) var(--pt-ease-base),transform var(--pt-motion-base) var(--pt-ease-base)}
#settingsPanel .panel-head{height:auto;min-height:48px;margin-bottom:18px;padding:0;border:0}
#settingsPanel .panel-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:0 0 4px}
#settingsPanel .ptab{display:flex;flex-direction:column;gap:4px;padding:6px 2px;height:auto;min-height:56px;min-width:0;white-space:nowrap}
#settingsPanel .panel-body{padding:18px 0 0;overflow:visible}
#parentControls{max-height:none;overflow:visible}
#parentControls .more-sections{padding:0}
#parentControls .more-section{margin:0}
#parentControls .more-section>summary{padding:12px 0}
#parentControls summary:after{content:none}
#parentControls summary .ui-icon{stroke-width:1.9}
#parentControls summary .parent-chevron{margin-left:auto;width:18px;height:18px}
#parentControls details[open]>summary .parent-chevron{transform:rotate(180deg)}
#parentControls .view-controls{width:100%}
.reference-dialog .guide-reference{margin:0;padding:0}
.reference-dialog .guide-reference figure>div,.reference-dialog .guide-reference figure>svg{height:160px}
.reference-dialog .guide-reference p{text-align:center;margin:16px 0 0}
#parentReferenceBtn{min-width:96px;min-height:48px;margin:12px 0;padding:8px 12px;border:1px solid var(--pt-paper-deep)}
@media(min-width:701px){
  .reference-dialog{inset:0;margin:auto;width:520px;height:max-content;max-height:82dvh;border-radius:24px;box-shadow:0 8px 32px rgba(31,42,48,.16);transform:translateY(12px)}
  .reference-dialog.show{transform:none}
  .reference-dialog .guide-reference figure>div,.reference-dialog .guide-reference figure>svg{height:190px}
}
@media(max-width:700px){
  .calm-settings,#settingsPanel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:82vh;max-height:82dvh;border-radius:24px 24px 0 0;padding:12px 18px max(22px,env(safe-area-inset-bottom));transform:translateY(100%);box-shadow:0 -8px 32px rgba(31,42,48,.16)}
  .calm-settings.show{transform:none}
  .calm-grab,.parent-grab{display:block;width:40px;height:5px;background:var(--pt-paper-deep);border-radius:3px;margin:0 auto 12px}
  .app .drawing-actions{bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px))}
}
@media(prefers-reduced-motion:reduce){
  .settings-corner,.calm-settings,#settingsPanel{transition:none}
  .settings-corner:active{transform:none;translate:none}
}/* Full paper by default; browser fullscreen remains a trusted-click enhancement. */


.app,html.painting-expanded .app{padding:0;max-width:none}
.app .stage{max-width:none;width:100%;border-radius:0}
.app .canvas-wrap{border-radius:0;box-shadow:none}
.app .drawing-actions button,.toolbar .pt-key{--pt-key-depth:2px}
.trace-start.trace-current{display:block;opacity:1}
.trace-start .trace-start-halo{fill:var(--pt-select);stroke:var(--pt-ink);stroke-width:2;opacity:1}
.trace-end{display:none!important}
#guideDirection{fill:none;stroke:var(--pt-guide-lit);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pencil-icon{stroke:var(--pt-ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;fill:none}
.pencil-icon .pencil-body{fill:var(--pt-select)}
.pencil-icon .pencil-cap{fill:var(--pt-hint)}
.pencil-icon .pencil-wood{fill:var(--pt-paper)}
.pencil-icon .pencil-tip{fill:var(--pt-ink);stroke:none}
.pencil-icon .pencil-line{fill:none;stroke:var(--pt-ink-soft);stroke-width:1}
.canvas-wrap:is(.drawing-ui,.guide-drawing) :is(#guideBubble,#guideDirection){visibility:hidden}
.trace-outline[data-guide-level=free-shape] #guideDirection{display:none!important}
@media(max-width:700px){.trace-guide{top:max(88px,calc(env(safe-area-inset-top) + 72px))}.trace-options{top:max(156px,calc(env(safe-area-inset-top) + 140px))}.trace-tools{max-width:none}.asset-picker{left:max(18px,env(safe-area-inset-left));top:max(18px,env(safe-area-inset-top))}.asset-tray{left:18px;max-width:calc(100% - 36px)}}
@media(prefers-reduced-motion:reduce){.trace-guide{transition:none}}

.trace-guide:has(.trace-cue[hidden]){display:none}/* 3.5: one compact cue, authored symbols and adult-only local course management. */


#traceDemoLabel{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#guideNextBtn{flex:0 0 48px;width:48px;min-height:48px}
.trace-guide{width:304px;max-width:calc(100% - 32px)}
.trace-guide .trace-cue{min-width:0}
.trace-guide .trace-cue-copy{min-width:0}
.trace-guide .trace-part-label{max-width:16em;overflow:hidden;text-overflow:ellipsis}
.trace-guide .trace-progress-btn{max-width:80px;overflow:hidden}
.trace-guide .trace-progress{flex-wrap:wrap;max-width:64px}
.lesson-manager{margin-top:var(--pt-space-section);padding:var(--pt-space-control) 0;border:0;}
.lesson-manager summary{min-height:48px;cursor:pointer;}
.lesson-manager .pt-key{min-height:48px;display:inline-flex;align-items:center;margin:4px 8px 4px 0;padding:8px 14px;text-decoration:none}
.lesson-manager p{max-width:60ch;overflow-wrap:anywhere}
.lesson-manager ul{list-style:none;padding:0}
.lesson-manager li{display:flex;align-items:center;justify-content:space-between;gap:12px}
#lessonReview{padding:16px;background:var(--pt-paper);border-radius:14px}
#lessonReview[hidden]{display:none}
#lessonPreview svg{width:150px;height:110px;stroke:var(--pt-ink);stroke-width:2;fill:none}
@media(max-width:380px){.trace-guide .trace-cue-icon{display:none}.trace-guide .trace-progress-btn{width:38px;min-width:38px;padding:4px}}

.trace-options .trace-caption{justify-content:flex-end;margin-top:8px}