/* Typography roles live here; values come from design-tokens.json. */
@font-face{font-family:"Painting WenKai";src:url('/fonts/wenkai-screen.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Painting Marker";src:url('/fonts/hand-guide.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
body{font-family:var(--pt-font-system);font-size:var(--pt-type-body);font-weight:var(--pt-weight-body);line-height:var(--pt-line-body);letter-spacing:var(--pt-tracking);font-synthesis:none}
button,select,input,summary,.pt-key,.flow-sound-row b,#flowSoundInline>label,.setting-name,.section-title,.word-name{
 font-family:var(--pt-font);font-size:var(--pt-type-action);font-weight:var(--pt-weight-label);line-height:var(--pt-line-control);letter-spacing:var(--pt-tracking);font-synthesis:none;
}
button b,button strong,summary b,summary strong{font-weight:inherit}
h1,h2,h3,.modal-title,.panel-title,.sheet-title,.wordbook-title,.confirm-word,.drawing-empty strong{
 font-family:var(--pt-font-guide);font-size:var(--pt-type-dialog);font-weight:var(--pt-weight-guide);line-height:var(--pt-line-title);letter-spacing:var(--pt-tracking);font-synthesis:weight;
}
#flowCompleteTitle{font-size:var(--pt-type-title);white-space:nowrap;flex-shrink:0}
#flowPrepareTitle{white-space:nowrap;flex-shrink:0}
#flowShell .flow-primary,#flowReferenceWindow #flowDone,#artworkHandoffBtn,#paperModal .confirm-actions button{
 font-size:var(--pt-type-primary);min-height:var(--pt-primary-target);
}
#flowShell .flow-choice>span,#flowInspectName{font-family:var(--pt-font);font-size:var(--pt-type-action);font-weight:var(--pt-weight-body);line-height:var(--pt-line-control);color:var(--pt-ink);font-synthesis:none;overflow-wrap:anywhere}
#flowShell .flow-choice>span{max-width:100%}
#flowShell .flow-choice>[data-system-font=true],#flowInspectName[data-system-font=true]{font-family:var(--pt-font-system)}
#flowDock button,#flowModes button,.flow-popover,.flow-popover button,#flowSettingsFooter button,.view-btn-label,.trace-part-label,.trace-lesson-label,.cue-step,.flow-step button,.ptab{
 font-family:var(--pt-font);font-size:var(--pt-type-tool);line-height:var(--pt-line-control);font-weight:var(--pt-weight-body);font-synthesis:none;
}
#flowModes span:not(.mode-slider){font-size:inherit}
#flowDock button{height:auto;min-height:var(--pt-target-min);gap:var(--pt-space-island);padding:var(--pt-space-island) 0}
#flowGuide .trace-cue-copy,#flowLessonCaption,#flowLessonSteps button span,.choice-gesture-label,.paper-risk,.confirm-desc,.confirm-error,.word-prompt,.word-desc,.wordbook-tip,.result-desc,.api-note,.toast,.flow-status,.painting-hint,.hint,.setting-sub,.sheet-note,.artwork-preview-status,.advanced-intro,.advanced-state,.generation-state,.backend-copy,.backend-banner,.fb-next,.fb-rest,.voice-pill,.mic-hint,.drawing-empty span{
 font-family:var(--pt-font-system);font-size:var(--pt-type-body);font-weight:var(--pt-weight-body);line-height:var(--pt-line-body);letter-spacing:var(--pt-tracking);font-synthesis:none;
}
.choice-gesture-label{color:var(--pt-ink);font-weight:var(--pt-weight-emphasis)}
.word-meaning,.fb-text{font-family:var(--pt-font-system);font-size:var(--pt-type-action);line-height:var(--pt-line-body)}
.word-main,.word-q{font-family:var(--pt-font);font-size:var(--pt-type-title);line-height:var(--pt-line-title)}
.word-hear-icon{width:var(--pt-target-min);height:var(--pt-target-min);flex-shrink:0}
.brand-word,.brand{font-family:var(--pt-font);font-size:var(--pt-type-tool);line-height:var(--pt-line-control)}
output,.size-readout,.usage-chip,.status-tag,.word-status,.word-chip .book-count,#flowTooltip,.workspace-tooltip,.word-audio-status{
 font-family:var(--pt-font-system);font-size:var(--pt-type-meta);font-weight:var(--pt-weight-body);line-height:var(--pt-line-meta);font-variant-numeric:tabular-nums;
}
#paintingVersion,#flowSettingsFooter{font-family:var(--pt-font-system);font-size:var(--pt-type-version);line-height:var(--pt-line-meta)}
.flow-popover,.paper-modal,#paperModal,#calmSettingsPanel,#lessonPackagePanel{padding:var(--pt-space-panel)}
#flowBrushSizeMenu,#flowEraserMenu{padding:var(--pt-space-compact)}
#flowShell button,#calmSettingsPanel button,.confirm-actions button,.word-actions button{gap:var(--pt-space-compact);padding-inline:var(--pt-control-padding-inline)}
.flow-inspect-actions,.flow-art-actions,.confirm-actions{gap:var(--pt-space-control)}
#flowCompleteTitle{margin-block:var(--pt-space-control)}
#paperModal .confirm-word{margin:0}/* Icon-only and fixed drawing rails retain their existing compact geometry. */

#flowShell :is(#flowRest,#flowDragChoices,#flowLookClose,#flowDrawLesson,#flowFullscreen,#flowMute,#settingsCorner,#settingsFullscreen){padding:var(--pt-space-compact)}
#flowShell #flowModes button{padding:4px 0}
#flowReferenceWindow #flowDone{padding:var(--pt-space-compact);gap:var(--pt-space-compact)}
#flowShell .flow-choice{padding:var(--pt-space-control)}
@media(max-width:599px){
 :root{--pt-type-title:var(--pt-type-title-mobile);--pt-type-dialog:var(--pt-type-dialog-mobile);--pt-type-primary:var(--pt-type-primary-mobile);--pt-type-action:var(--pt-type-action-mobile);--pt-space-panel:var(--pt-space-panel-mobile)}
 #flowShell .flow-art-actions button{padding-inline:var(--pt-space-compact)}
}
@media(max-width:380px),(max-height:480px){
 #flowDock button,#flowModes button,#flowLessonSteps button span{font-size:var(--pt-type-tool-compact)}
 #flowReferenceWindow #flowDone{font-size:var(--pt-type-primary-mobile)}
}
@media(max-width:359px){
 #app[data-two-stage=true] #flowShell .flow-presets .flow-choice{flex-basis:74%;padding:var(--pt-space-control)}
 #flowShell .flow-art-next{grid-template-columns:1fr;gap:var(--pt-space-control)}
 #flowShell .flow-inspect-actions{flex-wrap:wrap}
}