.mobile-sheet { display: none; }
@media (max-width: 760px) {
  body.has-mobile-sheet { overflow: hidden; }
  .has-mobile-sheet .layout { height: 100dvh; min-height: 0; }
  .has-mobile-sheet .stage { height: 100dvh; min-height: 0; }
  .has-mobile-sheet .brand { top: max(18px, env(safe-area-inset-top)); left: 18px; font-size: 11px; }
  .has-mobile-sheet .brand img { width: 118px; }
  .has-mobile-sheet .intro { top: 65px; left: 20px; }
  .has-mobile-sheet .intro p { font-size: 10px; }
  .has-mobile-sheet .intro h1 { font-size: 28px; margin: 8px 0; }
  .has-mobile-sheet .intro span { display: none; }
  .has-mobile-sheet .stage-footer { top: 183px; bottom: auto; left: 20px; font-size: 9px; max-width: 250px; }
  .has-mobile-sheet .panel {
    position: fixed; z-index: 10; inset: auto 0 0; height: min(55dvh, 580px);
    padding: 0; overflow: hidden; border-radius: 23px 23px 0 0;
    background: #fbfdfb; box-shadow: 0 -6px 35px #183f3d26;
    transition: height 220ms ease;
  }
  .has-mobile-sheet .panel.sheet-collapsed { height: calc(108px + env(safe-area-inset-bottom)); }
  .mobile-sheet { display: flex; flex-direction: column; height: 100%; }
  .sheet-handle {
    flex: none; width: 100%; display: grid; justify-items: center; gap: 3px;
    border: 0; padding: 9px 12px 8px; color: #234f42; background: transparent;
    font-family: inherit; touch-action: none; cursor: ns-resize;
  }
  .sheet-handle > span { width: 36px; height: 4px; border-radius: 4px; background: #b0c6bc; margin-bottom: 3px; }
  .sheet-handle b { font-size: 12px; }
  .sheet-handle small { font-size: 10px; color: #617b6e; }
  .sheet-tabs { display: flex; flex: none; padding: 0 12px 6px; gap: 4px; border-bottom: 1px solid #dce7df; }
  .sheet-tabs button { min-height: 40px; flex: 1; border: 0; border-radius: 9px; background: transparent; color: #617b6e; font: 600 12px system-ui; }
  .sheet-tabs button[aria-selected="true"] { background: #e3efe7; color: #245743; }
  .sheet-pages { display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sheet-pages::-webkit-scrollbar { display: none; }
  .sheet-page { flex: 0 0 100%; width: 100%; min-width: 0; padding: 18px 20px calc(28px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-align: start; scroll-snap-stop: always; }
  .sheet-page .panel-head, .sheet-page > .lead, .sheet-page > .rule { display: none; }
  .sheet-page > .section-head:first-child { margin-top: 0; }
  .sheet-page input:not([type="range"]):not([type="checkbox"]), .sheet-page select { max-width: 100%; font-size: 16px; }
  .sheet-page button { min-height: 40px; }
  .sheet-page input[type="range"] { min-height: 32px; }
  .sheet-page .result-controls {
    position: static; transform: none; width: 100%; max-width: none; padding: 0;
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  }
  .sheet-page .result-controls[hidden] { display: none; }
  .sheet-page .result-top { flex-wrap: wrap; justify-content: flex-start; }
  .sheet-page .result-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 6px; }
  .sheet-page .result-actions button { padding: 10px 5px; font-size: 11px; }
  .sheet-page .result-controls .result-detail { height: auto; text-align: left; font-size: 12px; line-height: 1.5; }
  .sheet-page .result-controls #result-key { width: 100%; border: 0; padding: 0; min-height: 30px; }
  .sheet-page .result-controls .result-range { font-size: 11px; }
  .sheet-page .result-variant-tray { position: static; order: -1; }
  .sheet-page .result-variant-tray #result-variant { justify-content: flex-start; }
  .sheet-page .result-variant-tray #result-variant button { min-width: 44px; font-size: 11px; }
  .sheet-page .result-info { position: static; width: 100%; max-width: none; }
  .sheet-page .result-scene-toggle, .sheet-page .result-info-button { font-size: 11px; }
  .variant-explorer { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; padding: max(20px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); }
  .variant-explorer header { position: sticky; top: -20px; z-index: 1; background: #f5f8f3; padding: 12px 0; }
  .variant-explorer select { font-size: 16px; min-height: 44px; }
  .variant-explorer button { min-height: 44px; }
  .variant-explorer [data-close] { min-width: 44px; }
  .explorer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .has-mobile-sheet .panel { transition: none; }
}