/* === RESPONSIVE === */ @media (max-width: 1200px) { .shell { grid-template-columns: 280px minmax(0, 1fr) 280px; } } @media (max-width: 900px) { .shell { grid-template-columns: 1fr; grid-template-rows: auto minmax(300px, 1fr) auto; overflow-y: auto; } .panel-left, .panel-right { height: auto; max-height: none; border: none; border-bottom: 1px solid var(--border); } .stage { min-height: 50vh; order: 0; } .panel-left { order: 1; } .panel-right { order: 2; } .mask-wrap { width: 100%; } .mask-wrap.is-expanded { width: min(1000px, calc(100vw - 24px)); } } @media (max-width: 640px) { .site-topbar { grid-template-columns: 1fr auto; gap: 8px; padding: 0 8px; } .site-brand-text { font-size: 15px; } .site-page-title { display: none; } .site-status-pill { display: none; } .mask-floating-toolbar { bottom: 4px; width: calc(100vw - 8px); gap: 2px; padding: 3px; } .float-tool-button { min-width: 28px; min-height: 28px; padding: 3px 5px; } .float-tool-divider { display: none; } .float-transform-readout { min-width: 52px; } .float-tool-context { flex-wrap: wrap; justify-content: center; } .pivot-download { grid-template-columns: 28px minmax(0, 1fr); } .pivot-mark { width: 28px; height: 28px; } .pivot-link { grid-column: 2; justify-self: start; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: 0.01ms !important; } }