.mobile-menu-toggle { display: none; }
.mobile-menu {
  --menu-soft: #eee8f280;
  --menu-muted: #706a75;
  width: min(440px, calc(100% - 32px));
  max-height: calc(100svh - 40px);
  padding: 25px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.mobile-menu[open] { animation: menu-arrive .22s ease-out; }
.mobile-menu[data-state="closing"] { animation: menu-depart .18s ease-in forwards; pointer-events: none; }
.mobile-menu-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; position: sticky; top: -25px; z-index: 2; margin: -25px -25px 3px; padding: 25px; background: var(--panel); }
.mobile-menu-heading .eyebrow { color: var(--menu-muted); font-size: 9px; letter-spacing: 1.5px; }
.mobile-menu-heading h2 { font-size: 37px; margin-top: 8px; }
.mobile-menu-close, .mobile-menu-toggle {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
  color: var(--ink); border: 1px solid var(--panel-line);
  background: radial-gradient(ellipse at 20% 25%, #b9a0ca1c, transparent 75%), var(--panel);
  place-items: center; transition: background .2s, border-color .2s, transform .2s;
}
.mobile-menu-close { display: grid; margin: -4px -5px 0 0; }
.mobile-menu-close:hover, .mobile-menu-toggle:hover { background: var(--theme-selected); border-color: var(--theme-accent); }
.mobile-menu-close:active, .mobile-menu-toggle:active { transform: scale(.94); }
.menu-icon { display: block; width: 22px; height: 18px; position: relative; }
.menu-icon>span { position: absolute; left: 0; top: 8px; height: 1.7px; width: 22px; border-radius: 2px; background: currentColor; transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s; }
.menu-icon>span:first-child { transform: translateY(-6px); }
.menu-icon>span:last-child { transform: translateY(6px); }
.mobile-menu-toggle[aria-expanded="true"] .menu-icon>span:first-child,
.mobile-menu[data-state="open"] .mobile-menu-close .menu-icon>span:first-child { transform: rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] .menu-icon>span:nth-child(2),
.mobile-menu[data-state="open"] .mobile-menu-close .menu-icon>span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.mobile-menu-toggle[aria-expanded="true"] .menu-icon>span:last-child,
.mobile-menu[data-state="open"] .mobile-menu-close .menu-icon>span:last-child { transform: rotate(-45deg); }
.mobile-menu-section { margin: 0 0 25px; }
.mobile-menu-section h3 { margin: 0 0 12px; font-size: 12px; font-weight: 500; }
.mobile-menu .palette-switcher, .mobile-menu .theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.mobile-menu .palette { display: flex; flex-direction: column; gap: 10px; min-height: 81px; padding: 13px 4px 11px; border: 1px solid var(--panel-line); border-radius: 12px; background: transparent; }
.mobile-menu .palette-label { display: block; font-size: 11px; }
.mobile-menu .swatch { width: 27px; height: 27px; }
.mobile-menu .palette.selected { background: var(--theme-selected); border-color: var(--theme-accent); box-shadow: none; }
.mobile-menu .palette:hover { background: var(--menu-soft); }
.mobile-menu .theme-options button { min-height: 72px; padding: 12px 4px; border: 1px solid var(--panel-line); border-radius: 12px; font-size: 11px; }
.mobile-menu .theme-options button[aria-pressed="true"] { border-color: var(--theme-accent); }
.mobile-menu-help { margin: 10px 0 0; color: var(--menu-muted); font-size: 10px; line-height: 1.5; }
.mobile-menu-actions { border-top: 1px solid var(--panel-line); padding-top: 8px; }
.mobile-menu-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 75px; text-align: left; border-radius: 12px; padding: 12px 7px; font-size: 13px; }
.mobile-menu-link:hover { background: var(--menu-soft); }
.mobile-menu-link small { display: block; margin-top: 6px; font-size: 10px; line-height: 1.4; color: var(--menu-muted); }
.menu-link-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 13px; background: var(--menu-soft); color: var(--theme-accent); flex-shrink: 0; }
.menu-link-arrow { width: 17px; height: 17px; margin-left: auto; color: var(--menu-muted); }
.mobile-settings-back { display: flex; align-items: center; gap: 9px; color: var(--theme-accent); min-height: 44px; padding: 0 8px 0 0; margin: -15px 0 12px; font-size: 11px; }
.mobile-settings-back svg { width: 17px; transform: rotate(180deg); }
.mobile-menu #settings { position: static; width: 100%; max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; box-shadow: none; overflow: visible; animation: none; }
.mobile-menu #settings>.panel-heading, .mobile-menu .shortcuts { display: none; }
.mobile-menu .setting-group { margin-top: 17px; padding-top: 17px; border-color: var(--panel-line); }
.mobile-menu .panel-heading + .setting-group { margin-top: 0; }
.mobile-menu .setting-group h3 { font-size: 13px; }
.mobile-menu .setting { margin-bottom: 17px; }
.mobile-menu .setting>span { font-size: 12px; margin-bottom: 3px; }
.mobile-menu .setting output { font-size: 11px; color: var(--menu-muted); }
.mobile-menu .setting small { font-size: 10px; color: var(--menu-muted); margin-top: 0; }
.mobile-menu input[type="range"] { height: 32px; }
.mobile-menu input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -7px; }
.mobile-menu input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; }
.mobile-menu .reset-button { font-size: 11px; color: var(--menu-muted); min-height: 44px; margin-top: 8px; }
.mobile-menu .group-heading>span { color: var(--menu-muted); }
:root[data-theme="dusk"] .mobile-menu { --menu-muted: #beb5c6; --menu-soft: #bba8c712; }
:root[data-theme="dusk"] .mobile-menu .palette.selected { background: var(--theme-selected); border-color: var(--theme-accent); }
body.mobile-menu-open { overflow: hidden; }
@keyframes menu-arrive { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes menu-depart { to { opacity: 0; transform: translateY(8px) scale(.985); } }
@media (max-width: 700px), (max-width: 950px) and (pointer: coarse) {
  .masthead .header-actions { display: none; }
  .mobile-menu-toggle { display: grid; }
  .masthead { align-items: center; }
}
@media (max-width: 360px) {
  .mobile-menu { padding: 22px 18px; }
  .mobile-menu-heading { top: -22px; margin: -22px -18px 6px; padding: 22px 18px; }
  .mobile-menu-heading h2 { font-size: 33px; }
  .mobile-menu-toggle { width: 44px; height: 44px; }
}
/* Shared studio settings, regardless of the renderer behind the canvas. */
.mobile-menu-link{text-decoration:none;color:inherit}
.elemental-page .mobile-menu{--theme-accent:var(--accent);--theme-selected:var(--selected)}
.mobile-menu .studio-panel-content>.panel-heading{display:none}
.mobile-menu .studio-panel-content .settings-intro{font-size:11px;line-height:1.7}
.mobile-menu .palette-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.mobile-menu .palette-options button{position:relative;display:flex;flex-direction:column;justify-content:center;gap:10px;min-height:81px;padding:13px 4px 11px;border:1px solid var(--panel-line);border-radius:12px;font-size:11px;text-align:center}
.mobile-menu .palette-options button[aria-pressed=true]{background:var(--theme-selected);border-color:var(--theme-accent)}
.mobile-menu .palette-swatch{width:27px;height:27px}
.mobile-menu .palette-check{position:absolute;right:5px;top:4px;font-size:10px}
.mobile-menu .range-field{margin:18px 0}
.mobile-menu .range-field>span{font-size:12px;margin-bottom:3px}
.mobile-menu .range-field output{font-size:11px;color:var(--menu-muted)}
.mobile-menu .mirror-control button{min-height:44px;font-size:12px}
.mobile-menu .reset-control{min-height:44px;font-size:11px}
@media(prefers-reduced-motion:reduce){.mobile-menu,.menu-icon>span{animation:none!important;transition:none!important}}