/* Page shell: stage → window → canvas → scrolling view layer. */
.stage>.window{animation:.52s cubic-bezier(.22,1,.36,1) both site-window-enter}
@media (prefers-reduced-motion:reduce) {
.stage>.window{animation:none}
}
.stage{height:100dvh;padding:0}
.window{background:var(--window);width:100%;height:100%;display:flex;overflow:hidden}
.canvasWrap{background:var(--window);flex:1;min-width:0;position:relative}
.bottomBar{left:0;right:0;bottom:var(--space-4);z-index:80;pointer-events:none;padding:0 var(--space-4);justify-content:center;align-items:center;display:flex;position:absolute}
.modeToggle.on{background:color-mix(in srgb, var(--text) 78%, transparent);border-color:#ffffff2e}
.modeToggle.on .modeToggleKnob{background:var(--color-surface);transform:translate(18px)}
.viewLayer{position:absolute;inset:0}
.workRoot{background:var(--window);flex-wrap:wrap;align-items:flex-start;display:flex;position:absolute;inset:0;overflow:hidden auto}
.workMain{min-width:0;padding:16px 8px var(--space-bar) 8px;flex:1;overflow:visible}
@media (max-width:900px) {
.bottomBar{bottom:max(var(--space-3), env(safe-area-inset-bottom))}
.workRoot{-webkit-overflow-scrolling:touch;flex-flow:column;align-items:stretch;overflow:hidden auto}
.workMain{width:100%;min-width:0;max-width:100%;padding:4px 16px max(var(--space-bar), env(safe-area-inset-bottom));flex:none;overflow:visible}
}
#main{height:100%}
#main[data-transition-busy=true]{pointer-events:none;will-change:transform, opacity, filter}
@media (min-width:901px) {
.workLayout-stack .workMain{width:100%;padding:0 max(clamp(1rem, 5vw, 5rem), calc((100% - 71.25rem) / 2)) var(--space-bar)}
}