/* Application composition for Fluid only. The artwork and practice engine are
   unchanged; the article and other experiments retain their reading layouts. */
body.fluid-playground{--workspace-width:960px;--practice-border:#e8e6eb;--practice-quiet:#757078;background:#fcfcfc;color:#242424;}
body.fluid-playground .experiment-site-header{padding-top:16px;gap:24px;}
body.fluid-playground .experiment-intro{display:flex;align-items:center;gap:12px;margin-top:16px;margin-bottom:16px;}
body.fluid-playground .experiment-intro h1{margin:0;font-weight:550;}
body.fluid-playground .experiment-intro .meta{font-size:12px;margin:0;color:var(--practice-quiet);}
body.fluid-playground .experiment-related{margin:0 0 0 auto;}
body.fluid-playground .experiment-related a{font-size:12px;min-height:44px;}
body.fluid-playground .experiment-site-footer{margin-top:24px;padding:12px 0 20px;font-size:12px;}
.fluid-playground .tone-study{margin:0;}
.fluid-playground .tone-study .practice{margin:0;border:1px solid var(--practice-border);border-radius:12px;background:#fff;overflow:hidden;}
.fluid-playground .tone-study .practice-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--practice-border);background:#fafafa;}
.fluid-playground .tone-study :is(.segmented,.treatments){display:flex;gap:0;background:#efedef;border-radius:8px;padding:2px;}
.fluid-playground .tone-study .practice-top button{min-height:44px;padding:8px 12px;border:1px solid transparent;border-radius:6px;background:transparent;color:#77717b;font-size:12px;line-height:18px;white-space:nowrap;}
.fluid-playground .tone-study .practice-top button[aria-pressed=true]{background:#fff;color:#29252c;border-color:#e4e1e7;box-shadow:0 1px 2px #25202c08;}
.fluid-playground .tone-study .practice-top button:hover:not(:disabled){background:#fff;color:#29252c;}
.fluid-playground .tone-study .practice-session{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:stretch;}
.fluid-playground .tone-study .practice-artwork{min-width:0;background:#faf9fc;}
.fluid-playground .tone-study #stage{display:flex;flex-direction:column;height:100%;min-height:374px;}
.fluid-playground .tone-study .syllable{flex:none;display:flex;align-items:baseline;gap:12px;margin:0;padding:16px 20px;background:#fff;}
.fluid-playground .tone-study .syllable #pinyin{font-size:26px;line-height:30px;font-weight:460;}
.fluid-playground .tone-study .syllable #character{font-size:24px;line-height:30px;}
.fluid-playground .tone-study .syllable small{font-size:12px;color:var(--practice-quiet);}
.fluid-playground .tone-study .visual{position:relative;display:grid;flex:1;contain:size;min-height:312px;grid-template-rows:minmax(0,1fr) auto auto;}
.fluid-playground .tone-study .visual-caption{grid-row:2;display:block;text-align:center;font-size:12px;line-height:18px;margin:0;padding:8px 12px;background:#faf9fc;color:var(--practice-quiet);}
.fluid-playground .tone-study #liquidVisual{grid-row:1;display:flex;position:relative;border-radius:0;min-height:0;}
.fluid-playground .tone-study :is(#waterMaterial,#fallbackCharacter){position:absolute;inset:0;width:100%;height:100%;max-width:100%;aspect-ratio:auto;border-radius:0;}
.fluid-playground .tone-study #plot{grid-row:1;width:100%;height:100%;min-height:0;border-radius:0;background:#f8f7f9;}
.fluid-playground .tone-study .legend{grid-row:3;justify-content:center;gap:20px;margin:0;padding:0 12px 12px;color:var(--practice-quiet);font-size:11px;}
.fluid-playground .tone-study .practice-panel{display:flex;flex-direction:column;padding:20px;border-left:1px solid var(--practice-border);min-width:0;}
.fluid-playground .tone-study .feedback{margin:0 0 18px;min-height:72px;}
.fluid-playground .tone-study #status{font-size:14px;line-height:20px;margin:0 0 8px;text-wrap:pretty;}
.fluid-playground .tone-study #detail{display:block;font-size:12px;line-height:18px;color:var(--practice-quiet);}
.fluid-playground .tone-study .controls{display:flex;gap:8px;margin:0;}
.fluid-playground .tone-study .practice-primary{flex-direction:column;align-items:stretch;}
.fluid-playground .tone-study .controls button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:13px;line-height:18px;padding:10px 12px;}
.fluid-playground .tone-study .controls .action-icon{width:16px;height:16px;flex:none;}
.fluid-playground .tone-study .practice-secondary{margin-top:8px;}
.fluid-playground .tone-study .practice-secondary button{flex:1;}
.fluid-playground .tone-study .practice-secondary button:disabled{display:none;}
.fluid-playground .tone-study .privacy{font-size:11px;line-height:16px;margin:10px 0 0;color:var(--practice-quiet);}
.fluid-playground .tone-study .success-cue{border-radius:0;background:transparent;padding:0;margin:14px 0 0;gap:8px;font-size:12px;line-height:18px;min-height:24px;}
.fluid-playground .tone-study .success-cue.complete{color:#3f6b42;background:transparent;}
.fluid-playground .tone-study .recall-controls{margin:8px 0 0;gap:0 12px;}
.fluid-playground .tone-study .practice-utilities{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;margin-top:8px;}
.fluid-playground .tone-study .practice-utilities .recall-controls{display:contents;}
.fluid-playground .tone-study .recall-controls button{background:transparent;border:0;font-size:12px;padding:8px 0;min-height:44px;color:#635c69;}
.fluid-playground .tone-study #recall:disabled{display:none;}
.fluid-playground .tone-study .sound-toggle{font-size:11px;line-height:16px;margin:0;min-height:44px;gap:7px;color:var(--practice-quiet);}
.fluid-playground .tone-study .sound-toggle input{accent-color:#6b6471;}
.fluid-playground .tone-study #recallCover{height:100%;min-height:374px;border-radius:0;background:#f6f4f8;}
.fluid-playground .tone-study .practice-history{position:relative;border-top:1px solid var(--practice-border);padding:12px 20px 16px;}
.fluid-playground .tone-study #practiceProgress{position:absolute;right:20px;top:17px;margin:0;font-size:11px;line-height:18px;color:var(--practice-quiet);pointer-events:none;}
.fluid-playground .tone-study .practice-history:has(#attemptTrail[hidden]) #practiceProgress{position:static;}
.fluid-playground .tone-study #attemptTrail{border:0;margin:0;padding:0;}
.fluid-playground .tone-study .trail-heading{font-size:12px;line-height:18px;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding-right:280px;}
.fluid-playground .tone-study .trail-heading button{border:0;background:transparent;color:#6c5d80;font-size:12px;line-height:18px;padding:8px 0;min-height:44px;}
.fluid-playground .tone-study #attemptFrames{gap:10px;padding:3px;margin:0;}
.fluid-playground .tone-study #attemptFrames li{flex:0 0 68px;font-size:10px;line-height:16px;}
.fluid-playground .tone-study #attemptFrames canvas{width:68px;height:38px;border-radius:4px;margin-bottom:3px;}
.fluid-playground .tone-study #trailHint{position:absolute;left:108px;bottom:30px;max-width:340px;margin:0;font-size:12px;line-height:18px;color:var(--practice-quiet);}
.fluid-playground .tone-study #exampleLabel{max-width:65ch;margin:0 0 12px;font-size:11px;line-height:16px;color:var(--practice-quiet);}
.fluid-playground .tone-study .practice-help{display:grid;grid-template-columns:1fr 1fr 1.5fr;align-items:start;gap:0 20px;margin-top:8px;}
.fluid-playground .tone-study .practice-help>details{margin:0;min-width:0;}
.fluid-playground .tone-study .practice-help summary{font-size:12px;line-height:18px;color:var(--practice-quiet);padding:12px 0;}
.fluid-playground .tone-study .practice-help details[open]{grid-column:1 / -1;}
.fluid-playground .tone-study .practice-help :is(p,h2){font-size:13px;line-height:20px;margin:12px 0;max-width:65ch;}
.fluid-playground .tone-study .practice-help .below{margin:0;}
.fluid-playground .tone-study .samples{gap:8px;}
.fluid-playground .tone-study .samples button{font-size:12px;}
.fluid-playground .tone-study button:focus-visible{outline:2px solid #7955af;outline-offset:2px;}
@media(max-width:700px){
 body.fluid-playground .experiment-site-header{padding-top:8px;}
 body.fluid-playground .experiment-intro{flex-wrap:wrap;gap:0 10px;margin:8px auto 12px;}
 body.fluid-playground .experiment-related{margin:0;flex-basis:100%;}
 body.fluid-playground .experiment-related a{min-height:44px;}
 .fluid-playground .tone-study .practice-top{padding:8px;gap:8px;flex-wrap:wrap;}
 .fluid-playground .tone-study .practice-top button{padding:6px 9px;min-height:44px;}
 .fluid-playground .tone-study .practice-session{grid-template-columns:minmax(0,1fr);}
 .fluid-playground .tone-study #stage{min-height:0;}
 .fluid-playground .tone-study .syllable{padding:12px 16px;gap:10px;margin:0;flex-wrap:nowrap;}
 .fluid-playground .tone-study .syllable small{width:auto;}
 .fluid-playground .tone-study .visual{min-height:264px;}
 .fluid-playground .tone-study .practice-panel{padding:16px;border-left:0;border-top:1px solid var(--practice-border);}
 .fluid-playground .tone-study .feedback{min-height:0;margin-bottom:12px;}
 .fluid-playground .tone-study #detail{font-size:11px;line-height:16px;}
 .fluid-playground .tone-study #status{margin-bottom:5px;}
 .fluid-playground .tone-study .practice-primary{flex-direction:row;}
 .fluid-playground .tone-study .practice-primary button{flex:1 1 0;padding:10px 8px;}
 .fluid-playground .tone-study .privacy{margin-top:8px;}
 .fluid-playground .tone-study .success-cue{margin-top:8px;}
 .fluid-playground .tone-study .recall-controls{margin-top:0;}
 .fluid-playground .tone-study .sound-toggle{margin-top:-4px;}
 .fluid-playground .tone-study #recallCover{min-height:280px;}
 .fluid-playground .tone-study .practice-history{padding:12px 16px;}
 .fluid-playground .tone-study #practiceProgress{position:static;margin:0;font-size:11px;}
 .fluid-playground .tone-study .trail-heading{padding:0;font-size:12px;gap:12px;flex-wrap:wrap;}
 .fluid-playground .tone-study #trailHint{left:98px;right:16px;bottom:22px;font-size:11px;line-height:16px;}
 .fluid-playground .tone-study .practice-help{display:block;margin-top:8px;}
 .fluid-playground .tone-study .practice-help>details{border-bottom:1px solid var(--practice-border);}
}
@media(prefers-reduced-motion:reduce){.fluid-playground .tone-study button{transition:none;}}