.mobile-header,.mobile-import-panel,.mobile-palette-panel,.mobile-footer-logo,.mobile-import-divider{display:none}
.mobile-data-overlay[hidden],.mobile-export-menu[hidden]{display:none!important}

@media(max-width:760px){
  body.stix-mobile .app{height:var(--mobile-viewport,100dvh)}
  body.stix-mobile .app>.shell>.studio-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) 84px 46px calc(40px + env(safe-area-inset-bottom));height:100%;gap:0;transition:grid-template-rows 180ms ease-out}
  body.stix-mobile .app>.shell>.studio-grid[data-mobile-panel=palette]{grid-template-rows:auto minmax(0,1fr) 135px 46px calc(40px + env(safe-area-inset-bottom))}
  body.stix-mobile .app>.shell>.studio-grid:is([data-mobile-panel=import],[data-mobile-panel=data]){grid-template-rows:auto minmax(0,1fr) 0 46px calc(40px + env(safe-area-inset-bottom))}
  body.stix-mobile .mobile-header{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;z-index:15;min-width:0;min-height:54px}
  body.stix-mobile .mobile-activity{min-width:0;flex:1}
  body.stix-mobile .mobile-activity .canvas-title{position:static;gap:2px;pointer-events:auto}
  body.stix-mobile .mobile-activity .canvas-title>span:first-child{font-size:14px;font-weight:600;line-height:18px;max-width:100%}
  body.stix-mobile .mobile-activity .canvas-title>span:last-child{font-size:10px;line-height:13px;max-width:100%}
  body.stix-mobile .mobile-export{position:relative;flex:none;align-self:flex-start;margin-top:2px}
  body.stix-mobile #mobileExportButton{display:flex;align-items:center;justify-content:center;gap:4px;height:30px;padding:0 8px;border:0;border-radius:6px;background:#fff;color:#232326;font-size:11px;font-weight:600;white-space:nowrap}
  body.stix-mobile .mobile-caret{position:relative;width:10px;height:10px;flex:none;transition:transform 150ms ease}
  body.stix-mobile .mobile-caret img{position:absolute;left:-3px;top:-2px;max-width:none}
  body.stix-mobile #mobileExportButton[aria-expanded=true] .mobile-caret{transform:scaleY(-1)}
  body.stix-mobile #mobileExportButton,body.stix-mobile #shufflePalette{position:relative}
  body.stix-mobile #mobileExportButton::before,body.stix-mobile #shufflePalette::before{content:'';position:absolute;inset:-7px -4px}
  body.stix-mobile .mobile-export-menu{position:absolute;right:0;top:34px;width:120px;padding:12px;border-radius:12px;background:#141415;box-shadow:0 8px 24px #0005;animation:stix-menu-in 140ms ease-out}
  body.stix-mobile .mobile-export-menu .export-actions{display:flex;flex-direction:column;gap:8px;margin:0}
  body.stix-mobile .mobile-export-menu button{flex:none;width:100%;height:32px;min-height:32px;padding:0 6px;font-size:11px;font-weight:600}
  body.stix-mobile .studio-grid>.preview-panel{grid-row:2;grid-column:1;margin:0 12px;padding:0;min-height:0;min-width:0;border-radius:6px;background:#121212;overflow:hidden;display:flex;align-items:center;justify-content:center}
  body.stix-mobile .preview-panel .canvas-toolbar,body.stix-mobile .preview-panel .floating-inspector{display:none}
  body.stix-mobile .studio-grid[data-mobile-panel=import]>.preview-panel{display:none}
  body.stix-mobile .studio-grid>.inspector-panel{display:none!important}
  body.stix-mobile .studio-grid>aside.template-sidebar{grid-row:3;grid-column:1;display:none!important;padding:12px 0 8px 24px;margin:0;border:0;overflow:hidden}
  body.stix-mobile .studio-grid[data-mobile-panel=templates]>aside.template-sidebar{display:flex!important}
  body.stix-mobile .template-sidebar>.section-title,body.stix-mobile .template-sidebar>.sidebar-import{display:none!important}
  body.stix-mobile .template-sidebar>#templateStrip.template-library{display:flex;flex-direction:row;align-items:center;gap:11px;width:100%;height:64px;min-height:64px;flex:none;margin:0;padding:0 24px 0 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain;touch-action:pan-x}
  body.stix-mobile #templateStrip::-webkit-scrollbar{display:none}
  body.stix-mobile #templateStrip.template-library .template-chip{width:64px;height:64px;flex:0 0 64px;border:1px solid transparent;border-radius:6px;background:#242424;scroll-snap-align:start;transition:border-color 120ms,background-color 120ms}
  body.stix-mobile #templateStrip .template-chip[aria-pressed=true]{background:#111113;border-color:#eeeeef}
  body.stix-mobile #templateStrip .mini-preview{display:flex;align-items:center;justify-content:center;width:62px;height:62px;aspect-ratio:1;border-radius:5px}
  body.stix-mobile #templateStrip .mini-preview img{width:40px;height:30px;object-fit:contain}
  body.stix-mobile .studio-grid>.mobile-tabs{grid-row:4;grid-column:1;display:flex;align-items:stretch;gap:24px;padding:8px 24px 10px;border:0;background:#080809}
  body.stix-mobile .mobile-tabs>button{position:relative;flex:1;min-width:0;padding:0;border:0;background:transparent;color:#98989f;font-size:12px;font-weight:400;line-height:16px;white-space:nowrap;touch-action:manipulation}
  body.stix-mobile .mobile-tabs>button[aria-selected=true]{color:#eeeeef}
  body.stix-mobile .mobile-tabs>button::after{content:'';position:absolute;bottom:2px;left:calc(50% - 7.5px);width:15px;height:2px;border-radius:99px;background:#7894f1;opacity:0;transform:scaleX(.5);transition:opacity 140ms,transform 140ms}
  body.stix-mobile .mobile-tabs>button[aria-selected=true]::after{opacity:1;transform:scaleX(1)}
  body.stix-mobile .studio-grid>.template-footer{grid-row:5;grid-column:1;display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:12px;height:100%;margin:0;padding:12px 12px calc(12px + env(safe-area-inset-bottom));border-top:.5px solid #ffffff14}
  body.stix-mobile .template-footer .brand{display:block;flex:none}.stix-mobile .template-footer .brand h1{margin:0;line-height:16px}
  body.stix-mobile .template-footer .brand-logo{display:none}
  body.stix-mobile .mobile-footer-logo{display:block;max-width:none}
  body.stix-mobile .template-footer .site-credit{padding:0;margin:3px 0 0;font-size:9px;line-height:13px;text-align:right;white-space:nowrap}
  body.stix-mobile .studio-grid>.mobile-palette-panel{display:none;grid-row:3;grid-column:1;padding:8px 24px 0;overflow:hidden;min-width:0}
  body.stix-mobile .studio-grid[data-mobile-panel=palette]>.mobile-palette-panel{display:block}
  body.stix-mobile .mobile-palette-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;height:16px;margin:0 0 12px}
  body.stix-mobile .mobile-palette-name{font-size:12px;line-height:16px;margin:0}
  body.stix-mobile #resetPalette{position:relative;flex:none;padding:0;border:0;background:none;color:#eeeeef;opacity:.8;font:400 12px/16px Geist,sans-serif}
  body.stix-mobile #resetPalette::before{content:'';position:absolute;inset:-8px -4px}
  body.stix-mobile #resetPalette:hover{opacity:1}
  body.stix-mobile #mobilePalettePanel>#paletteSection{margin:0;border:0;padding:0}
  body.stix-mobile #mobilePalettePanel #paletteSection>summary,body.stix-mobile #mobilePalettePanel #paletteSwatches{display:none}
  body.stix-mobile #mobilePalettePanel .inspector-row{padding:0;margin:0;border:0;background:none;min-height:32px}
  body.stix-mobile #mobilePalettePanel #paletteOptions{display:flex;gap:11px;width:calc(100% + 24px);padding:0 24px 0 0;height:32px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity}
  body.stix-mobile #mobilePalettePanel #paletteOptions .palette-option{flex:0 0 72px;width:72px;height:32px;min-height:32px;padding:1px;border-radius:6px;background:#242424}
  body.stix-mobile #mobilePalettePanel .palette-option[aria-checked=true]{border-color:#eee}
  body.stix-mobile #mobilePalettePanel .palette-option-colors{height:28px;border-radius:3px}
  body.stix-mobile #mobilePalettePanel #colorRoles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 28px;align-items:end;gap:12px;margin:12px 0 0}
  body.stix-mobile #mobilePalettePanel .color-role{display:grid;grid-template-columns:24px minmax(0,1fr) 32px;column-gap:6px;row-gap:6px;align-items:center;min-width:0}
  body.stix-mobile #mobilePalettePanel .color-role>label:first-child{grid-column:1/-1;font-size:10px;line-height:13px}
  body.stix-mobile #mobilePalettePanel .color-role input[type=color]{width:24px;height:24px}
  body.stix-mobile #mobilePalettePanel .color-role input[type=text]{width:100%;height:24px;padding:0;border:0;background:none;font-size:10px;text-align:left}
  body.stix-mobile #mobilePalettePanel .opacity-control{padding:0;gap:2px;height:24px;border:0;background:none}
  body.stix-mobile #mobilePalettePanel .opacity-control input{font-size:10px;appearance:textfield;padding:0}.stix-mobile .opacity-control input::-webkit-inner-spin-button{appearance:none}
  body.stix-mobile #mobilePalettePanel .opacity-control span{font-size:10px;color:#98989f}
  body.stix-mobile #mobilePalettePanel #shufflePalette{align-self:end;width:28px;height:28px;min-height:28px;margin:0}
  body.stix-mobile #shufflePalette>svg{display:none}
  body.stix-mobile .studio-grid>.mobile-import-panel{display:none;grid-row:2;grid-column:1;min-height:0;padding:0 37px;overflow:auto;overscroll-behavior:contain}
  body.stix-mobile .studio-grid[data-mobile-panel=import]>.mobile-import-panel{display:flex;align-items:center;justify-content:center}
  body.stix-mobile #mobileImportPanel>.modal{width:100%;max-width:none;max-height:100%;padding:24px 0 12px;border:0;border-radius:0;background:transparent;overflow:auto;box-shadow:none}
  body.stix-mobile #mobileImportPanel .modal-head,body.stix-mobile #mobileImportPanel .fields-panel{display:none}
  body.stix-mobile #mobileImportPanel .input-row{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0;padding:0;border:0;border-radius:0;background:none}
  body.stix-mobile #mobileImportPanel .input-row>label{display:flex;flex-direction:column;gap:8px;width:100%;font-size:11px;line-height:14px;color:#98989f}
  body.stix-mobile #mobileImportPanel input[type=url]{width:100%;height:39px;min-height:39px;padding:10px 12px;background:none;border:1px solid #232326;border-radius:6px;color:#eee;font-size:16px;line-height:17px}
  body.stix-mobile #mobileImportPanel input[type=url]::placeholder{font-size:13px;color:#a8a8b48c}
  body.stix-mobile #mobileImportPanel #modalLoadLink{width:100%;height:30px;font-size:12px;font-weight:600}
  body.stix-mobile .mobile-import-divider{display:block;margin:12px 0;text-align:center;font-size:13px;line-height:17px;color:#a8a8b48c}
  body.stix-mobile #mobileImportPanel .upload-field{background:none;min-height:90px;height:90px;padding:18px;border:.5px dashed #ffffff2e;border-radius:6px}
  body.stix-mobile #mobileImportPanel .upload-field strong{font-size:11px;font-weight:400;color:#98989f}
  body.stix-mobile .mobile-data-overlay{position:fixed;inset:0;z-index:40;background:transparent;display:block;overscroll-behavior:contain}
  body.stix-mobile #mobileDataOverlay>#floatingInspector{position:absolute;left:0!important;right:0!important;top:auto!important;bottom:0;width:100%!important;height:min(400px,calc(var(--mobile-viewport,100dvh) - 54px))!important;max-width:none;max-height:none;border:0;border-radius:24px 24px 0 0;background:#080809;display:flex;flex-direction:column;touch-action:auto;animation:stix-sheet-in 180ms cubic-bezier(.2,.7,.2,1);transition:transform 160ms ease-out}
  body.stix-mobile #floatingInspector #inspectorHandle{position:relative;order:0;min-height:58px;padding:24px 24px 12px;border:0;cursor:grab;flex-shrink:0}
  body.stix-mobile #inspectorHandle::before{content:'';position:absolute;top:8px;left:calc(50% - 20px);width:40px;height:5px;border-radius:99px;background:#232326}
  body.stix-mobile #inspectorHandle>svg,body.stix-mobile #collapseInspector,body.stix-mobile .inspector-resize-bar{display:none!important}
  body.stix-mobile #inspectorHandle h2{font-size:14px;line-height:18px}.stix-mobile #inspectorHandle>span{font-size:10px}
  body.stix-mobile #floatingInspector .inspector-fields{order:1;display:block;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 24px 12px;overscroll-behavior:contain;scrollbar-width:thin}
  body.stix-mobile #floatingInspector .data-row{display:grid;grid-template-columns:26px max-content minmax(0,1fr);column-gap:8px;row-gap:0;min-height:36px;padding:8px 0;margin:0 0 2px;background:none;border:0;border-bottom:1px solid #111113;border-radius:0;align-items:center}
  body.stix-mobile #floatingInspector .data-row>label,body.stix-mobile #floatingInspector .route-row>span{grid-column:2;grid-row:1;font-size:12px;line-height:16px;color:#98989f;max-width:96px}
  body.stix-mobile #floatingInspector .route-row>span{color:#eee}
  body.stix-mobile #floatingInspector .data-row>textarea{grid-column:3;grid-row:1;font-size:16px;line-height:20px;padding:5px 0;min-height:30px}
  body.stix-mobile #floatingInspector .data-row>.switch{grid-column:1;grid-row:1}
  body.stix-mobile #floatingInspector .data-row>.switch::before{all:unset;display:block;content:'';position:absolute;inset:-10px -6px;background:transparent}
  body.stix-mobile #floatingInspector .field-title-control{order:2;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:8px;min-height:40px;padding:12px 24px calc(12px + env(safe-area-inset-bottom));border:0;border-top:1px solid #ffffff14;font-size:12px;line-height:16px;flex-shrink:0}
  body.stix-mobile #floatingInspector .more-fields{border:0;margin-top:12px}
  body.stix-mobile #floatingInspector .more-fields>summary{justify-content:center;min-height:30px;padding:8px 12px;background:#111113;border:1px solid #232326;border-radius:6px;font-size:11px;line-height:14px}
  body.stix-mobile #floatingInspector .more-fields>summary::before,body.stix-mobile #moreFieldCount{display:none}
  body.stix-mobile .toast{top:calc(16px + env(safe-area-inset-top));bottom:auto;pointer-events:none}
  body.stix-mobile .mobile-import-panel,body.stix-mobile .mobile-palette-panel{animation:stix-panel-in 140ms ease-out}
  body.stix-mobile #resetData{display:inline-block;position:relative;border:0;background:none;color:#eeeeef;opacity:.8;padding:4px 0;font:400 12px/16px Geist,sans-serif;touch-action:manipulation}
  body.stix-mobile #inspectorCount{display:none}
  body.stix-mobile #resetData::before{content:'';position:absolute;inset:-8px -4px}
  body.stix-mobile .canvas-editor{font-size:16px;touch-action:manipulation}
  /* Keep editable text at Safari's non-zooming size, while retaining compact palette geometry. */
  body.stix-mobile #mobilePalettePanel .color-role input[type=text]{font-size:16px;width:160%;max-width:none;height:38.4px;margin: -7.2px 0;transform:scale(.625);transform-origin:left center}
  body.stix-mobile #mobilePalettePanel .opacity-control{width:160%;height:38.4px;margin:-7.2px 0;transform:scale(.625);transform-origin:left center}
  body.stix-mobile #mobilePalettePanel .opacity-control input,body.stix-mobile #mobilePalettePanel .opacity-control span{font-size:16px}
}
@keyframes stix-menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes stix-sheet-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes stix-panel-in{from{opacity:.5}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body.stix-mobile *,body.stix-mobile *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}