/* One viewport layout for sand, mandala and every drawing exercise.
   Balanced side columns keep the paper itself centered beside the tool rail. */
html:has(body.is-space-embed .drawing-workspace){scrollbar-gutter:auto!important;overflow:hidden!important}
html body #page-module.page.active .drawing-exercise-prompt .drawing-exercise-reference{display:block!important;width:112px;height:112px;margin:0}
html body #page-module.page.active .drawing-exercise-prompt .drawing-exercise-reference img{object-fit:contain}
html body #page-module.page.active .drawing-exercise-prompt .drawing-exercise-reference-block{display:grid!important;grid-template-columns:112px minmax(0,1fr);gap:16px;min-width:0}
html body #page-module.page.active .drawing-sequence{flex:0 0 auto!important;max-height:26vh;overflow:auto;box-sizing:border-box}
html body #page-module.page.active:has(.drawing-workspace){overflow:hidden!important}
html body #page-module.page.active .drawing-workspace{width:100%!important;height:calc(100dvh - 132px)!important;min-height:0!important;max-height:none!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;padding:12px!important;margin:0 auto!important;overflow:hidden!important;box-sizing:border-box}
html body #page-module.page.active .drawing-random-exercise{display:flex!important;flex-direction:column!important;flex:1 1 0!important;width:100%!important;min-height:0!important;height:100%!important;gap:12px!important;overflow:hidden!important}
html body #page-module.page.active .drawing-exercise-prompt,html body #page-module.page.active .drawing-landscape-sequence{flex:0 0 auto!important;max-height:26vh;overflow:auto;box-sizing:border-box}
html body #page-module.page.active .drawing-studio{display:grid!important;grid-template-columns:52px minmax(0,1fr) 52px!important;grid-template-rows:minmax(0,1fr)!important;gap:10px!important;flex:1 1 0!important;min-width:0!important;min-height:0!important;height:100%!important;width:100%!important;max-width:1440px!important;margin:auto!important;padding:8px!important;overflow:hidden!important;box-sizing:border-box;position:relative}
html body #page-module.page.active .drawing-tool-rail{grid-column:1!important;grid-row:1!important;width:52px!important;min-width:0!important;min-height:0!important;align-self:center!important;max-height:100%!important;display:flex!important;flex-direction:column!important;gap:8px!important;overflow-y:auto!important;padding:0!important}
html body #page-module.page.active .drawing-tool-button{flex:0 0 42px!important;width:42px!important;height:42px!important;min-height:42px!important;padding:10px!important;margin:0 auto!important}
html body #page-module.page.active .drawing-guidance-button{padding:5px!important}
html body #page-module.page.active .drawing-canvas-panel{grid-column:2!important;grid-row:1!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-height:100%!important;aspect-ratio:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;overflow:hidden!important;box-sizing:border-box;container-type:normal!important}
html body #page-module.page.active .drawing-studio .drawing-canvas-panel canvas{width:var(--drawing-width,100%)!important;height:var(--drawing-height,auto)!important;max-width:100%!important;max-height:100%!important;min-height:0!important;aspect-ratio:1180/680!important;flex:none!important;margin:auto!important;display:block!important;object-fit:contain!important}
html body #page-module.page.active .drawing-tool-panel{position:absolute!important;left:70px!important;top:12px!important;z-index:10}
html body #page-module.page.active .drawing-tool-rail{position:absolute!important;left:max(8px,calc(50% - var(--drawing-width,80%) / 2 - 62px))!important;top:50%!important;transform:translateY(-50%)}
html body.is-space-embed.app-shell-active:has(.drawing-workspace){padding:0!important;height:100dvh!important;overflow:hidden!important}
html body.is-space-embed.app-shell-active #page-module.page.active:has(.drawing-workspace){display:block!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;padding:0!important;overflow:hidden!important}
html body.is-space-embed.app-shell-active #page-module.page.active:has(.drawing-workspace) :is(.module-container,.module-hero){width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;padding:0!important;margin:0!important;overflow:hidden!important;flex:1 1 0!important}
html body.is-space-embed.app-shell-active #page-module.page.active .drawing-workspace{height:100%!important;padding:clamp(8px,2vw,24px)!important}
@media(max-width:650px){
 html body #page-module.page.active .drawing-exercise-prompt{grid-template-columns:1fr!important;gap:8px!important;max-height:34dvh!important}
 html body #page-module.page.active .drawing-exercise-prompt>.btn{justify-self:end}
 html body #page-module.page.active .drawing-exercise-prompt .drawing-exercise-reference-block{grid-template-columns:76px minmax(0,1fr);gap:10px}
 html body #page-module.page.active .drawing-exercise-prompt .drawing-exercise-reference{width:76px;height:76px}
 html body #page-module.page.active .drawing-workspace{height:calc(100dvh - 110px)!important;padding:6px!important}
 html body #page-module.page.active .drawing-studio{grid-template-columns:1fr!important;grid-template-rows:auto minmax(0,1fr)!important;gap:6px!important;padding:4px!important}
 html body #page-module.page.active .drawing-tool-rail{grid-column:1!important;grid-row:1!important;flex-direction:row!important;width:100%!important;justify-content:center!important;overflow-x:auto!important;overflow-y:hidden!important;gap:4px!important}
 html body #page-module.page.active .drawing-tool-rail{position:static!important;transform:none;left:auto!important;top:auto!important}
 html body #page-module.page.active .drawing-tool-button{margin:0!important;flex-basis:38px!important;width:38px!important;height:38px!important;min-height:38px!important}
 html body #page-module.page.active .drawing-canvas-panel{grid-column:1!important;grid-row:2!important}
 html body #page-module.page.active .drawing-tool-panel{left:8px!important;top:52px!important}
 html body.is-space-embed.app-shell-active #page-module.page.active .drawing-workspace{height:100%!important}
}