/* ViralViz mobile layer.
   Loaded last so phone ergonomics stay explicit instead of being scattered
   across the desktop art direction. */

html {
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

button,
a,
input,
select,
textarea { touch-action:manipulation; }

.studio-app .mobile-workspace-menu-toggle,
.studio-app .mobile-workspace-menu,
.studio-app .mobile-workspace-title { display:none; }

@media (max-width:760px) {
  .site-header {
    height:calc(72px + env(safe-area-inset-top, 0px));
    padding-top:env(safe-area-inset-top, 0px);
    padding-right:max(14px, env(safe-area-inset-right, 0px));
    padding-left:max(14px, env(safe-area-inset-left, 0px));
  }

  .site-header .brand-eleven {
    min-width:44px;
    min-height:44px;
  }

  .site-header .header-text-button,
  .site-header .header-cta.header-text-button {
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 8px;
  }

  .site-header .header-text-button .hover-text {
    top:50%;
    left:8px;
    width:calc(100% - 16px);
    transform:translateY(-50%);
  }

  .site-header .nav {
    display:flex;
    align-items:center;
  }

  .header-actions { gap:6px; }

  .portal-hero.hero {
    height:calc(930px + env(safe-area-inset-top, 0px));
    min-height:calc(930px + env(safe-area-inset-top, 0px));
  }
  .portal-hero.hero::before,
  .portal-grid { inset:calc(72px + env(safe-area-inset-top, 0px)) 0 0; }
  .portal-copy { top:calc(103px + env(safe-area-inset-top, 0px)); }
  .portal-stage {
    touch-action:pan-y;
    -webkit-user-select:none;
    user-select:none;
  }
  .portal-card[data-position="center"] .portal-timeline { height:38px; }
  .portal-card[data-position="center"] .portal-timeline-track { bottom:9px; }
  .portal-card[data-position="center"] .portal-time {
    bottom:17px;
    opacity:.72;
  }

  /* Touch screens cannot express the desktop hover reveal reliably. Keep the
     same palette, but render a single crisp label instead of two stacked text
     layers that some mobile browsers leave half-revealed after a tap. */
  .site-header .header-text-button .actual-text {
    color:rgba(244,241,234,.82);
    -webkit-text-stroke:0;
    text-shadow:0 0 12px rgba(255,255,255,.08);
  }
  .site-header .header-studio-button .actual-text {
    color:#d9ff57;
    text-shadow:0 0 13px rgba(217,255,87,.2);
  }
  .site-header .header-access-button .actual-text {
    color:#b8afff;
    text-shadow:0 0 13px rgba(166,156,255,.2);
  }
  .site-header .header-text-button .hover-text,
  .site-header .header-text-button::after {
    display:none;
  }

  .auth-dialog {
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    margin:0;
    border-radius:0;
  }
  .auth-shell {
    grid-template-rows:clamp(140px,21svh,180px) minmax(0,1fr);
    border:0;
  }
  .auth-close {
    top:calc(13px + env(safe-area-inset-top, 0px));
    right:max(13px, env(safe-area-inset-right, 0px));
    width:46px;
    height:46px;
  }
  .auth-art-meta { top:calc(20px + env(safe-area-inset-top, 0px)); }
  .auth-panel {
    padding-right:max(20px, env(safe-area-inset-right, 0px));
    padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));
    padding-left:max(20px, env(safe-area-inset-left, 0px));
    overscroll-behavior:contain;
  }
  .auth-panel-head { min-height:44px; }
  .auth-brand.brand-eleven { min-height:44px; }
  .auth-tabs button { min-height:48px; }
  .auth-password-toggle {
    width:44px;
    height:44px;
    margin-right:-8px;
  }
  .auth-google-native,
  .auth-google-native > div { max-width:100%; }

  .auth-dialog.is-profile {
    --profile-mobile-rail:calc(116px + env(safe-area-inset-top, 0px));
  }
  .auth-dialog.is-profile .profile-workspace {
    grid-template-rows:var(--profile-mobile-rail) minmax(0,1fr);
  }
  .auth-dialog.is-profile .profile-rail {
    min-height:var(--profile-mobile-rail);
    grid-template-rows:56px 52px;
    padding-top:calc(8px + env(safe-area-inset-top, 0px));
    padding-right:max(14px, env(safe-area-inset-right, 0px));
    padding-left:max(14px, env(safe-area-inset-left, 0px));
  }
  .auth-dialog.is-profile .profile-brand {
    position:absolute;
    z-index:5;
    top:calc(18px + env(safe-area-inset-top, 0px));
    left:max(16px, env(safe-area-inset-left, 0px));
    min-width:40px;
    min-height:40px;
    justify-content:center;
    transform:none;
  }
  .auth-dialog.is-profile .profile-nav { grid-column:1/-1; grid-row:2; }
  .auth-dialog.is-profile .auth-close {
    top:calc(12px + env(safe-area-inset-top, 0px));
    right:max(12px, env(safe-area-inset-right, 0px));
    left:auto;
    width:108px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 10px;
    border-radius:12px;
    color:#e8e5df;
    border-color:rgba(255,255,255,.18);
    background:#1b1c22;
    font:650 10px/1 "Manrope",sans-serif;
    letter-spacing:0;
    white-space:nowrap;
    rotate:none;
  }
  .auth-dialog.is-profile .auth-close:hover { color:#fff; border-color:rgba(166,156,255,.6); background:#24252e; rotate:none; }
  .auth-dialog.is-profile .auth-close-label,
  .auth-dialog.is-profile .auth-close-icon-home { display:block; }
  .auth-dialog.is-profile .auth-close-icon-home { width:15px; flex:0 0 15px; }
  .auth-dialog.is-profile .auth-close-icon-x { display:none; }
  .auth-dialog.is-profile .profile-logout {
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    height:58px;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0;
    padding:0 18px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:16px;
    color:#d2d0d7;
    background:linear-gradient(110deg,#202129,#181920);
    font:650 13px/1 "Manrope",sans-serif;
    line-height:1;
    white-space:nowrap;
  }
  .auth-dialog.is-profile .profile-logout span {
    position:static;
    width:auto;
    height:auto;
    overflow:visible;
    clip-path:none;
  }
  .auth-dialog.is-profile .profile-logout svg { width:18px; flex:0 0 18px; color:#f3a8c6; }
  .auth-dialog.is-profile .profile-logout:hover {
    padding:0 18px;
    color:#ffd1e4;
    border-color:rgba(255,93,162,.55);
    background:rgba(255,93,162,.1);
  }
  .auth-dialog.is-profile .profile-rail > .profile-logout { display:none; }
  .auth-dialog.is-profile .profile-mobile-exit {
    display:block;
    margin-top:clamp(42px,8vh,82px);
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .auth-dialog.is-profile .profile-panel[data-profile-panel="security"] .profile-auth-method button {
    min-height:48px;
    padding:8px 12px;
    border-radius:10px;
  }
  .auth-dialog.is-profile .profile-panel[data-profile-panel="security"] .profile-password-wrap .auth-password-toggle {
    width:44px;
    height:44px;
    min-width:44px;
    margin-right:0;
  }
  .auth-dialog.is-profile .profile-google-connect-head button,
  .auth-dialog.is-profile .profile-google-retry { min-width:44px; min-height:44px; }
  .profile-nav button {
    min-height:48px;
    font-size:9px;
  }
  .profile-main {
    padding-right:max(var(--profile-gutter), env(safe-area-inset-right, 0px));
    padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px));
    padding-left:max(var(--profile-gutter), env(safe-area-inset-left, 0px));
    overscroll-behavior:contain;
  }
  .profile-scrollbar { top:calc(var(--profile-mobile-rail) + 20px); }
  .affiliate-primary,
  .affiliate-primary-light,
  .affiliate-form-head > button,
  .affiliate-add-channel,
  .affiliate-social-row > [data-social-remove] { min-height:48px; }
  .affiliate-social-row > [data-social-remove] {
    width:44px;
    height:48px;
  }
  .affiliate-admin-filters {
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .affiliate-admin-filters > * { scroll-snap-align:start; }

  body > footer a,
  .footer-legal a {
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  body > footer .brand-eleven {
    min-width:46px;
    min-height:46px;
  }

  .legal-page > header {
    min-height:calc(72px + env(safe-area-inset-top, 0px));
    padding-top:env(safe-area-inset-top, 0px);
    padding-right:max(20px, env(safe-area-inset-right, 0px));
    padding-left:max(20px, env(safe-area-inset-left, 0px));
  }
  .legal-page .legal-brand { min-height:44px; }
  .legal-page .legal-hero {
    min-height:0;
    padding:78px max(20px, env(safe-area-inset-right, 0px)) 72px max(20px, env(safe-area-inset-left, 0px));
  }
  .legal-page .legal-hero h1 {
    margin-block:28px 26px;
    font-size:clamp(48px,15vw,68px);
    line-height:.9;
  }
  .legal-page .legal-hero > p { font-size:17px; line-height:1.42; }
  .legal-page .legal-grid { margin-inline:12px; }
  .legal-page .legal-grid article { padding:34px 26px 40px; }
  .legal-page .legal-grid h2 { margin-top:38px; font-size:clamp(29px,9vw,42px); }
  .legal-page .legal-rights {
    padding:78px max(20px, env(safe-area-inset-right, 0px)) 82px max(20px, env(safe-area-inset-left, 0px));
  }
  .legal-page .legal-rights h2 { font-size:clamp(46px,14vw,64px); }
  .legal-page .legal-warning { margin-top:48px; padding:22px 20px; }
  .legal-page > footer {
    padding-right:max(20px, env(safe-area-inset-right, 0px));
    padding-bottom:calc(20px + env(safe-area-inset-bottom, 0px));
    padding-left:max(20px, env(safe-area-inset-left, 0px));
  }
}

@media (max-width:520px) {
  .portal-hero.hero {
    height:calc(clamp(740px,100svh,900px) + env(safe-area-inset-top,0px));
    min-height:calc(740px + env(safe-area-inset-top,0px));
  }
}

@media (max-width:440px) {
  .site-header {
    padding-right:max(10px, env(safe-area-inset-right, 0px));
    padding-left:max(10px, env(safe-area-inset-left, 0px));
  }
  .site-header .header-text-button,
  .site-header .header-cta.header-text-button { padding-inline:5px; }
  .site-header .header-text-button,
  .site-header .header-cta.header-text-button { --fs-size:9px; }
  .site-header .header-studio-button { --fs-size:10px; }
  .site-header .header-access-button { --fs-size:8.5px; letter-spacing:.09em; }
  .header-actions { gap:3px; }
  .site-header .header-text-button .hover-text { left:7px; width:calc(100% - 14px); }
  .portal-copy { right:16px; left:16px; }
  .auth-heading h2,
  .auth-profile h2 { font-size:clamp(37px,11vw,43px); }
  .auth-input-wrap { padding-inline:14px 12px; }
  .profile-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .profile-nav button { gap:4px; padding-inline:2px; font-size:7.5px; }
  .profile-nav svg { width:15px; }
  .affiliate-form-head h2,
  .affiliate-admin-head h2 { font-size:clamp(38px,12vw,48px); }
  .affiliate-form-head > p { padding-left:0; }
}

@media (max-width:340px) {
  .portal-copy h1 { font-size:37px; }
  .profile-nav button { font-size:7.5px; }
  .auth-dialog.is-profile .profile-section-title h2 { font-size:38px; }
  .affiliate-hero-copy h2 { font-size:43px; }
}

@media (max-width:900px) {
  .studio-app {
    --studio-safe-top:env(safe-area-inset-top, 0px);
    --studio-safe-right:env(safe-area-inset-right, 0px);
    --studio-safe-bottom:env(safe-area-inset-bottom, 0px);
    --studio-safe-left:env(safe-area-inset-left, 0px);
    height:100dvh;
    min-height:100dvh;
  }
  .studio-app .topbar {
    height:calc(var(--topbar) + var(--studio-safe-top));
    padding-top:calc(7px + var(--studio-safe-top));
    padding-right:max(10px, var(--studio-safe-right));
    padding-left:max(10px, var(--studio-safe-left));
  }
  .studio-app .workspace {
    height:calc(100dvh - var(--topbar) - var(--studio-safe-top) - var(--mobile-dock) - var(--studio-safe-bottom));
    padding-right:max(8px, var(--studio-safe-right));
    padding-left:max(8px, var(--studio-safe-left));
  }
  .studio-app .top-actions {
    padding-right:max(8px, var(--studio-safe-right));
    padding-bottom:calc(7px + var(--studio-safe-bottom));
    padding-left:max(8px, var(--studio-safe-left));
  }
  .studio-app .mode-panel,
  .studio-app .inspector {
    top:calc(var(--topbar) + var(--studio-safe-top) + 8px);
    bottom:calc(var(--mobile-dock) + var(--studio-safe-bottom) + 8px);
  }
  .studio-app .mode-panel {
    left:max(8px, var(--studio-safe-left));
    width:calc(100vw - max(8px, var(--studio-safe-left)) - max(8px, var(--studio-safe-right)));
  }
  .studio-app .inspector {
    right:max(8px, var(--studio-safe-right));
    width:calc(100vw - max(8px, var(--studio-safe-left)) - max(8px, var(--studio-safe-right)));
  }
  .studio-app .mobile-scrim {
    inset:calc(var(--topbar) + var(--studio-safe-top)) 0 calc(var(--mobile-dock) + var(--studio-safe-bottom));
  }
  .studio-app .mobile-panel-head button,
  .studio-app .inspector-close { width:44px; height:44px; }
  .studio-app .inspector-workspace-nav button { min-height:48px; }
  .studio-app input[type="range"] { height:46px; }
  .studio-app .scene-library-item-actions .scene-edit,
  .studio-app .scene-library-item-actions .scene-delete,
  .studio-app .scene-current-actions .scene-primary-action,
  .studio-app .scene-current-actions .scene-current-rename {
    width:44px;
    min-width:44px;
    height:44px;
    flex-basis:44px;
  }
  .studio-app .scene-switcher-close {
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
  }
  .studio-app .scene-library-search,
  .studio-app .scene-deck-panel .scene-library-search,
  .studio-app .scene-deck-filters button,
  .studio-app .scene-create-confirm-actions button,
  .studio-app .scene-rename-actions button,
  .studio-app .scene-delete-confirm-actions button,
  .studio-app .scene-current-editor button,
  .studio-app .studio-confirm-actions button {
    min-height:44px;
  }
}

@media (max-width:600px) {
  .studio-app .workspace {
    padding-right:max(6px, env(safe-area-inset-right, 0px));
    padding-left:max(6px, env(safe-area-inset-left, 0px));
  }
  .studio-app .mode-panel { left:max(6px, env(safe-area-inset-left, 0px)); }
  .studio-app .inspector { right:max(6px, env(safe-area-inset-right, 0px)); }
  .studio-app .mode-panel,
  .studio-app .inspector {
    width:calc(100vw - max(6px, env(safe-area-inset-left, 0px)) - max(6px, env(safe-area-inset-right, 0px)));
  }
}

/* Studio mobile workspace -------------------------------------------------
   The phone UI keeps the desktop visual language, but exposes controls as a
   touch-first editor. Light is clipped by one panel surface instead of being
   recomposed by every nested section. */
@media (max-width:900px) {
  .studio-app .mode-panel,
  .studio-app .inspector {
    isolation:isolate;
    contain:paint;
    overflow:hidden;
    background:
      radial-gradient(circle at 92% 0,rgba(166,156,255,.055),transparent 24%),
      linear-gradient(180deg,#151720 0%,#0c0e14 100%);
    background-clip:padding-box;
  }
  .studio-app .mode-panel::after,
  .studio-app .inspector::after {
    right:24px;
    left:24px;
    opacity:.34;
    background:linear-gradient(90deg,transparent,rgba(166,156,255,.55),rgba(217,255,87,.46),transparent);
  }
  .studio-app .inspector-workspace-nav {
    position:relative;
    z-index:5;
    min-height:58px;
    overflow:hidden;
    background:linear-gradient(180deg,#161822,#11131b);
  }
  .studio-app .workspace-switch {
    contain:paint;
    overflow:hidden;
    border-color:rgba(255,255,255,.085);
    background:#0b0d13;
    box-shadow:inset 0 1px rgba(255,255,255,.025);
  }
  .studio-app .workspace-switch::before {
    background:linear-gradient(120deg,rgba(217,255,87,.105),rgba(166,156,255,.055));
    box-shadow:inset 0 1px rgba(255,255,255,.045);
  }
  .studio-app .inspector-panel {
    contain:paint;
    overflow:hidden;
    background:linear-gradient(180deg,#13151e,#0c0e14);
  }
  .studio-app .inspector-panel.is-active { grid-template-rows:64px minmax(0,1fr); }
  .studio-app .inspector-head {
    min-width:0;
    overflow:hidden;
    padding:10px 16px;
    background:linear-gradient(100deg,rgba(166,156,255,.035),transparent 58%);
  }
  .studio-app .inspector-head h2 { margin-top:5px; font-size:19px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .studio-app .inspector-head > div:first-child { min-width:0; margin-right:auto; }
  .studio-app .inspector-scroll {
    padding-right:12px;
    scroll-padding-block:12px;
    -webkit-overflow-scrolling:touch;
  }
  .studio-app .inspector-scrollbar { display:none!important; }
  .studio-app .timing-control,
  .studio-app .music-deck,
  .studio-app .music-library,
  .studio-app .scene-layer-intro,
  .studio-app .scene-layer-editor { contain:paint; }

  /* Every frequently used action gets a real finger-sized target. */
  .studio-app .brand { min-width:44px; }
  .studio-app .scene-identity .scene-switcher-trigger { height:44px; min-height:44px; }
  .studio-app .scene-identity .scene-action-button { width:44px; min-width:44px; height:44px; min-height:44px; flex-basis:44px; }
  .studio-app .stage-fullscreen { width:44px; height:44px; }
  .studio-app .transport { min-height:52px; }
  .studio-app .transport-main,
  .studio-app .transport-button { width:44px; min-width:44px; height:44px; min-height:44px; }
  .studio-app .transport-main { width:auto; min-width:78px; }
  .studio-app .stage-toolbar { grid-template-rows:52px 52px; }
  .studio-app .player-time { min-width:146px; height:44px; min-height:44px; padding-inline:7px; }
  .studio-app .player-time .timeline-markup-toggle {
    width:44px;
    height:44px;
    margin:0 0 0 4px;
    border-radius:9px;
  }
  .studio-app .control.has-physics-pin > div,
  .studio-app .compact-control.has-physics-pin > div {
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px max-content;
    align-items:center;
    gap:6px;
  }
  .studio-app .control.has-physics-pin > div > label,
  .studio-app .compact-control.has-physics-pin > div > label { min-width:0; }
  .studio-app .control.has-physics-pin > div > output,
  .studio-app .compact-control.has-physics-pin > div > output { justify-self:end; white-space:nowrap; }
  .studio-app .physics-pin {
    width:44px;
    height:44px;
    margin:0;
    border-radius:10px;
  }
  .studio-app .studio-select-trigger { height:45px; min-height:45px; }

  /* Music controls stay compact visually while their interactive surfaces are
     large enough for a thumb. */
  .studio-app .music-preview-toggle { width:44px; height:44px; }
  .studio-app .music-now-transport { grid-template-columns:44px 30px minmax(0,1fr) 30px; gap:6px; }
  .studio-app .music-waveform { min-height:44px; height:44px; margin-block:-9px; }
  .studio-app .music-waveform i { height:max(2px,calc(var(--level,.15) * 26px)); max-height:26px; }
  .studio-app .music-import { min-height:44px; height:44px; }
  .studio-app .music-track-actions button,
  .studio-app .music-swipe-nav button { width:44px; height:44px; }
  .studio-app .music-swipe-nav { grid-template-columns:44px 1fr 44px; }
  .studio-app .music-track-delete { min-width:44px; min-height:44px; }
  .studio-app .music-editor-dialog { max-height:calc(100dvh - 24px); display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
  .studio-app .music-editor-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
  .studio-app .music-editor-dialog>header button,
  .studio-app .music-editor-dialog>footer button { min-width:44px; min-height:44px; }

  /* Layers switch from an onboarding surface to a focused object editor as
     soon as a layer is selected. Add actions and the object strip remain one
     gesture away, while the long editor starts at the top of its own scroll. */
  .studio-app .scene-layers-scroll { padding:12px 12px 32px; }
  .studio-app .scene-layer-intro { padding:14px; border-radius:16px; }
  .studio-app .scene-layer-intro::after { opacity:.52; }
  .studio-app .scene-layer-intro strong { max-width:230px; font-size:15px; line-height:1.08; }
  .studio-app .scene-layer-intro p { font-size:11px; line-height:1.45; }
  .studio-app .scene-layer-add { min-height:82px; padding:10px; }
  .studio-app .scene-layer-load { min-height:44px; }
  .studio-app .scene-layer-row { min-height:56px; }
  .studio-app .scene-layers-panel.has-selection .scene-layer-intro {
    padding:0;
    overflow:visible;
    border:0;
    background:none;
    box-shadow:none;
  }
  .studio-app .scene-layers-panel.has-selection .scene-layer-intro::after,
  .studio-app .scene-layers-panel.has-selection .scene-layer-intro>div:first-child,
  .studio-app .scene-layers-panel.has-selection .scene-layer-load { display:none; }
  .studio-app .scene-layers-panel.has-selection .scene-layer-add-grid { margin-top:0; }
  .studio-app .scene-layers-panel.has-selection .scene-layer-add {
    min-height:52px;
    grid-template-columns:32px minmax(0,1fr);
    grid-template-rows:1fr;
    align-items:center;
  }
  .studio-app .scene-layers-panel.has-selection .scene-layer-add>span { grid-row:1; width:32px; height:32px; }
  .studio-app .scene-layers-panel.has-selection .scene-layer-add strong { align-self:center; }
  .studio-app .scene-layers-panel.has-selection .scene-layer-add small { display:none; }
  .studio-app .scene-layers-panel.has-selection .scene-layer-stack { margin-top:10px; }
  .studio-app .scene-layers-panel.has-selection .scene-layer-list {
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:3px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .studio-app .scene-layers-panel.has-selection .scene-layer-list::-webkit-scrollbar { display:none; }
  .studio-app .scene-layers-panel.has-selection .scene-layer-row {
    flex:0 0 calc(100% - 20px);
    scroll-snap-align:start;
  }
  .studio-app .scene-layer-editor {
    margin-top:9px;
    padding:12px;
    border-radius:15px;
    background:rgba(5,7,10,.58);
  }
  .studio-app .scene-layer-editor>header {
    position:sticky;
    top:-12px;
    z-index:4;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    margin:-12px -12px 14px;
    padding:12px;
    border-bottom:1px solid rgba(255,255,255,.07);
    background:rgba(10,12,17,.96);
  }
  .studio-app .scene-layer-editor-actions { width:100%; }
  .studio-app .scene-layer-editor-actions { justify-content:flex-end; }
  .studio-app .scene-layer-editor>header .scene-layer-preview-cue {
    width:auto;
    min-width:0;
    min-height:44px;
    flex:1;
    justify-content:center;
  }
  .studio-app .scene-layer-editor>header .scene-layer-preview-cue[hidden] { display:none; }
  .studio-app .scene-layer-editor>header [data-layer-remove] { width:44px; min-width:44px; height:44px; }
  .studio-app .scene-layer-manipulator { min-width:44px; min-height:44px; }
  .studio-app .scene-layer-editor label>span { margin-bottom:7px; font-size:11px; }
  .studio-app .scene-layer-editor textarea { min-height:88px; padding:12px; font-size:16px; }
  .studio-app .scene-layer-editor select,
  .studio-app .scene-layer-editor input[type="number"],
  .studio-app .scene-layer-editor input[type="text"],
  .studio-app .scene-layer-color input { height:44px; min-height:44px; font-size:10px; }
  .studio-app .scene-layer-trigger-field em { min-height:0; font-size:10px; }
  .studio-app .scene-layer-ranges { gap:7px; }
  .studio-app .scene-layer-accent-row { grid-template-columns:minmax(0,1fr) 64px; }
  .studio-app .scene-layer-text-style { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .studio-app .scene-layer-text-style .scene-layer-color { grid-column:1/-1; }
  .studio-app .scene-layer-accent-hint,
  .studio-app .scene-layer-hint { font-size:10px; line-height:1.5; }
}

@media (max-width:340px) {
  .studio-app .scene-layer-field-grid { grid-template-columns:1fr; }
  .studio-app .scene-layer-accent-row { grid-template-columns:minmax(0,1fr) 58px; }
  .studio-app .scene-layer-text-style { grid-template-columns:1fr; }
  .studio-app .scene-layer-text-style .scene-layer-color { grid-column:auto; }
  .studio-app .music-editor-body { grid-template-columns:82px minmax(0,1fr); gap:10px; padding:14px; }
}

@media (max-width:900px) and (max-height:520px) and (orientation:landscape) {
  .auth-close {
    top:max(10px, env(safe-area-inset-top, 0px));
    right:max(10px, env(safe-area-inset-right, 0px));
    width:46px;
    height:46px;
  }
  .auth-shell { grid-template-columns:1fr; grid-template-rows:1fr; }
  .auth-art { display:none; }
  .auth-panel { padding-top:18px; }
  .auth-forms { padding-top:14px; }
  .auth-heading h2 { font-size:36px; }
  .auth-heading { margin-bottom:18px; }
  .portal-hero.hero { height:690px; min-height:690px; }
  .portal-copy { top:102px; right:18px; left:51%; width:auto; }
  .portal-copy h1 { font-size:40px; }
  .portal-copy > p { font-size:11px; }
  .portal-field { top:55%; left:25%; width:480px; }
  .portal-stage { top:55%; left:25%; width:500px; height:360px; }
  .portal-card { width:170px; }
  .portal-stage { --portal-side-offset:132px; }
}

/* Studio touch workspace 2.0 ---------------------------------------------
   On phones, the canvas remains the main surface. Modes and editing tools
   use one bottom sheet with a visible grabber, explicit Done action and a
   predictable thumb dock. */
.studio-app .mobile-sheet-grabber,
.studio-app .mobile-mode-description,
.studio-app .mobile-panel-head button > span,
.studio-app .inspector-close > span,
.studio-app .mobile-history-controls,
.studio-app .scene-layer-placement-open,
.studio-app .mobile-layer-placement-dock,
.studio-app .mobile-precision-shell { display:none; }

@media (max-width:900px) {
  .studio-app {
    --mobile-dock:76px;
    --mobile-sheet-edge:max(6px, var(--studio-safe-left));
    --mobile-sheet-bottom:calc(var(--mobile-dock) + var(--studio-safe-bottom) + 7px);
  }

  .studio-app .top-actions {
    height:calc(var(--mobile-dock) + var(--studio-safe-bottom));
    gap:3px;
    padding-top:7px;
    border-top-color:rgba(255,255,255,.075);
    background:
      radial-gradient(320px 54px at 50% -24px,rgba(217,255,87,.055),transparent 72%),
      rgba(9,10,15,.965);
    box-shadow:0 -14px 42px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.025);
  }
  .studio-app .top-actions .mobile-modes-toggle,
  .studio-app .top-actions .mobile-inspector-toggle,
  .studio-app .top-actions .studio-report-button,
  .studio-app .top-actions .exit-button {
    position:relative;
    min-width:0;
    height:60px;
    min-height:60px;
    gap:5px;
    border:1px solid transparent;
    border-radius:15px;
    color:rgba(196,199,207,.56);
    -webkit-tap-highlight-color:transparent;
  }
  .studio-app .top-actions .icon-button > span,
  .studio-app .top-actions .studio-report-button > span,
  .studio-app .top-actions .exit-button > span {
    display:block;
    overflow:hidden;
    max-width:100%;
    color:inherit;
    font-size:10px;
    font-weight:680;
    letter-spacing:-.01em;
    line-height:1;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .studio-app .top-actions svg { width:19px; height:19px; }
  .studio-app .top-actions [aria-expanded="true"] {
    border-color:color-mix(in srgb,var(--mode-accent) 14%,rgba(255,255,255,.045));
    background:linear-gradient(180deg,color-mix(in srgb,var(--mode-accent) 9%,rgba(255,255,255,.025)),rgba(255,255,255,.018));
    color:var(--mode-accent);
    box-shadow:inset 0 1px rgba(255,255,255,.045);
  }
  .studio-app .top-actions .studio-report-button:active,
  .studio-app .top-actions .exit-button:active,
  .studio-app .top-actions .icon-button:active { transform:scale(.96); }

  .studio-app .workspace {
    height:calc(100dvh - var(--topbar) - var(--studio-safe-top) - var(--mobile-dock) - var(--studio-safe-bottom));
  }
  /* Keep the stage dimensions identical before and after launch. Hiding the
     toolbar with display:none resized the canvas and cancelled non-Classic
     simulations as soon as they started. */
  .studio-app.is-awaiting-start .stage-toolbar { visibility:hidden; pointer-events:none; }
  .studio-app .stage-column { grid-template-rows:auto minmax(0,1fr) 0; }
  .studio-app .stage-toolbar {
    gap:6px;
    margin-bottom:6px;
    padding:6px 8px 9px;
    border-radius:16px;
  }
  .studio-app .stage { min-height:0; border-radius:18px; }

  .studio-app .mode-panel,
  .studio-app .inspector {
    top:auto!important;
    right:max(6px, var(--studio-safe-right));
    bottom:var(--mobile-sheet-bottom);
    left:max(6px, var(--studio-safe-left));
    width:auto;
    max-width:none;
    max-height:calc(100dvh - var(--topbar) - var(--studio-safe-top) - var(--mobile-dock) - var(--studio-safe-bottom) - 14px);
    border-color:rgba(255,255,255,.13);
    border-radius:25px 25px 18px 18px;
    box-shadow:0 -24px 80px rgba(0,0,0,.68),inset 0 1px rgba(255,255,255,.065);
    transform:translate3d(0,calc(100% + var(--mobile-sheet-bottom) + 20px + var(--mobile-sheet-drag-y,0px)),0);
    transform-origin:bottom center;
    transition:transform 360ms cubic-bezier(.2,.82,.2,1),opacity 180ms ease;
  }
  .studio-app .mode-panel { height:auto; }
  .studio-app .inspector {
    height:min(62dvh,calc(100dvh - var(--topbar) - var(--studio-safe-top) - var(--mobile-dock) - var(--studio-safe-bottom) - 14px));
    grid-template-rows:84px minmax(0,1fr);
  }
  .studio-app .inspector[data-mobile-detent="full"] {
    height:calc(100dvh - var(--topbar) - var(--studio-safe-top) - var(--mobile-dock) - var(--studio-safe-bottom) - 14px);
  }
  /* Safari and embedded browsers can shrink only the visual viewport when the
     keyboard opens. Keep the editing sheet above it; the dock can return when
     typing ends. Chrome's resizes-content path leaves this class unused. */
  .studio-app.is-mobile-keyboard-open .top-actions { visibility:hidden; pointer-events:none; }
  .studio-app.is-mobile-keyboard-open .inspector,
  .studio-app.is-mobile-keyboard-open .inspector[data-mobile-detent="full"] {
    bottom:calc(var(--studio-keyboard-inset) + 6px);
    height:calc(var(--studio-keyboard-visible-height) - var(--topbar) - var(--studio-safe-top) - 12px);
    max-height:calc(var(--studio-keyboard-visible-height) - var(--topbar) - var(--studio-safe-top) - 12px);
  }
  .studio-app.is-mobile-keyboard-open .mobile-scrim { bottom:var(--studio-keyboard-inset); }
  .studio-app.is-mobile-keyboard-open .scene-switcher-shell { bottom:var(--studio-keyboard-inset); }
  .studio-app.is-mobile-keyboard-open .scene-switcher-panel {
    max-height:calc(var(--studio-keyboard-visible-height) - var(--topbar) - 12px);
  }
  .studio-app.is-modes-open .mode-panel,
  .studio-app.is-inspector-open .inspector {
    z-index:48;
    transform:translate3d(0,var(--mobile-sheet-drag-y,0px),0);
  }
  .studio-app .mode-panel.is-sheet-dragging,
  .studio-app .inspector.is-sheet-dragging { transition:none; }
  .studio-app .mode-panel::after,
  .studio-app .inspector::after { display:none; }

  .studio-app .mobile-panel-head,
  .studio-app .inspector-workspace-nav {
    position:relative;
    min-height:84px;
    padding:24px 10px 8px 16px;
    border-bottom:1px solid rgba(255,255,255,.075);
    background:linear-gradient(180deg,rgba(26,28,38,.99),rgba(18,20,28,.985));
    touch-action:none;
  }
  .studio-app .mobile-panel-head { display:flex; }
  .studio-app .mobile-sheet-grabber {
    position:absolute;
    top:0;
    left:50%;
    z-index:8;
    display:block;
    width:104px;
    height:24px;
    padding:0;
    border:0;
    background:transparent;
    cursor:grab;
    touch-action:none;
    transform:translateX(-50%);
  }
  .studio-app .mobile-sheet-grabber::after {
    position:absolute;
    top:7px;
    left:50%;
    width:38px;
    height:4px;
    border-radius:99px;
    background:rgba(232,235,240,.22);
    content:"";
    transform:translateX(-50%);
  }
  .studio-app button.mobile-sheet-grabber > span { display:none; }
  .studio-app .inspector button.mobile-sheet-grabber {
    display:flex;
    width:172px;
    min-height:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  .studio-app .inspector button.mobile-sheet-grabber::after {
    position:static;
    flex:none;
    transform:none;
  }
  .studio-app .inspector button.mobile-sheet-grabber > .mobile-sheet-handle-label {
    display:block;
    color:rgba(230,233,239,.55);
    font:700 9px/1 Manrope,sans-serif;
    letter-spacing:.02em;
    white-space:nowrap;
  }
  .studio-app button.mobile-sheet-grabber:focus-visible::after {
    outline:2px solid color-mix(in srgb,var(--mode-accent) 66%,white);
    outline-offset:4px;
  }
  .studio-app .is-sheet-dragging .mobile-sheet-grabber { cursor:grabbing; }
  .studio-app .is-sheet-dragging .mobile-sheet-grabber::after { background:color-mix(in srgb,var(--mode-accent) 46%,rgba(232,235,240,.25)); }

  .studio-app .mobile-panel-head button,
  .studio-app .inspector-close {
    display:inline-flex;
    width:auto;
    min-width:68px;
    height:44px;
    gap:6px;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    border-color:rgba(255,255,255,.085);
    border-radius:13px;
    background:rgba(255,255,255,.03);
    color:rgba(232,235,240,.76);
    font-size:11px;
    font-weight:720;
  }
  .studio-app .mobile-panel-head button > span,
  .studio-app .inspector-close > span { display:inline; }
  .studio-app .mobile-panel-head button svg,
  .studio-app .inspector-close svg { display:none; }

  .studio-app .mode-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    padding:10px;
  }
  .studio-app .mode-list::before { display:none; }
  .studio-app .mode-item {
    min-height:96px;
    flex-direction:row;
    gap:10px;
    justify-content:flex-start;
    padding:12px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:16px;
    background:rgba(255,255,255,.018);
    text-align:left;
  }
  .studio-app .mode-item::before { top:16px; bottom:16px; }
  .studio-app .mode-item.is-active {
    border-color:color-mix(in srgb,var(--item-accent) 30%,rgba(255,255,255,.07));
    background:linear-gradient(135deg,color-mix(in srgb,var(--item-accent) 9%,rgba(255,255,255,.025)),rgba(255,255,255,.014));
    box-shadow:inset 0 1px rgba(255,255,255,.045);
  }
  .studio-app .mode-symbol { width:40px; height:40px; flex-basis:40px; }
  .studio-app .mode-title { min-width:0; }
  .studio-app .mode-title strong { font-size:12px; line-height:1.15; white-space:normal; }
  .studio-app .mobile-mode-description {
    display:-webkit-box;
    margin-top:6px;
    overflow:hidden;
    color:rgba(197,201,210,.42);
    font-size:10px;
    line-height:1.3;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    white-space:normal;
  }

  .studio-app .inspector-workspace-nav {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    min-height:110px;
    padding-top:50px;
    padding-left:10px;
  }
  .studio-app .workspace-switch { height:52px; }
  .studio-app .inspector-workspace-nav .workspace-tab {
    height:44px;
    min-height:44px;
    flex-direction:column;
    gap:2px;
    padding:2px 3px;
    font-size:11px;
    line-height:1;
  }
  .studio-app .workspace-tab svg { width:15px; height:15px; }
  .studio-app .workspace-tab span { display:inline; }
  .studio-app .inspector { grid-template-rows:110px minmax(0,1fr) auto; }
  .studio-app .inspector-panel { grid-row:2; }
  .studio-app .inspector-panel.is-active { grid-template-rows:minmax(0,1fr); }
  .studio-app .inspector-head { display:none; }
  .studio-app .inspector-scroll { overscroll-behavior-y:contain; }
  .studio-app .mobile-workspace-title {
    display:block;
    max-width:100%;
    margin:0 0 16px;
    padding:18px 12px 20px;
    border-bottom:1px solid rgba(255,255,255,.075);
    color:#f4f2ec;
    font-family:"Russo One",sans-serif;
    font-size:clamp(21px,6.2vw,29px);
    font-style:italic;
    font-weight:400;
    letter-spacing:-.035em;
    line-height:1.08;
    overflow-wrap:anywhere;
    text-align:center;
    text-shadow:1px 2px 0 rgba(166,156,255,.25),-1px -1px 0 rgba(217,255,87,.14);
  }

  .studio-app .mobile-scrim {
    inset:calc(var(--topbar) + var(--studio-safe-top)) 0 calc(var(--mobile-dock) + var(--studio-safe-bottom));
    background:rgba(2,3,6,.64);
    backdrop-filter:blur(5px) saturate(.78);
  }

  .studio-app .mobile-history-controls {
    position:relative;
    grid-row:3;
    z-index:6;
    display:flex;
    gap:6px;
    padding:6px 8px 8px;
    border-top:1px solid rgba(255,255,255,.065);
    background:rgba(10,12,18,.96);
  }
  .studio-app .mobile-history-controls[hidden] { display:none; }
  .studio-app .mobile-history-controls button {
    display:inline-flex;
    min-width:0;
    height:44px;
    flex:1;
    gap:7px;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(255,255,255,.09);
    border-radius:13px;
    background:rgba(13,15,21,.92);
    color:rgba(235,237,242,.72);
    box-shadow:0 8px 24px rgba(0,0,0,.28);
  }
  .studio-app .mobile-history-controls button:disabled { opacity:.28; pointer-events:none; }
  .studio-app .mobile-history-controls svg { width:16px; height:16px; }
  .studio-app .mobile-history-controls button:last-child svg { transform:scaleX(-1); }
  .studio-app .mobile-history-controls span { display:inline; font-size:11px; font-weight:760; }

  .studio-app .scene-layer-placement-open {
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 18px;
    gap:11px;
    align-items:center;
    width:100%;
    min-height:64px;
    margin:10px 0 14px;
    padding:9px 12px;
    border:1px solid color-mix(in srgb,var(--mode-accent) 28%,rgba(255,255,255,.08));
    border-radius:16px;
    background:linear-gradient(135deg,color-mix(in srgb,var(--mode-accent) 9%,rgba(255,255,255,.025)),rgba(255,255,255,.018));
    color:var(--ink);
    text-align:left;
  }
  .studio-app .scene-layer-placement-open > svg:first-child {
    width:42px;
    height:42px;
    padding:11px;
    border-radius:12px;
    background:color-mix(in srgb,var(--mode-accent) 12%,rgba(255,255,255,.025));
    color:var(--mode-accent);
  }
  .studio-app .scene-layer-placement-open > svg:last-child { width:15px; height:15px; color:var(--mode-accent); }
  .studio-app .scene-layer-placement-open strong,
  .studio-app .scene-layer-placement-open small { display:block; }
  .studio-app .scene-layer-placement-open strong { font-size:11px; }
  .studio-app .scene-layer-placement-open small { margin-top:4px; color:var(--ink-faint); font-size:10px; line-height:1.3; }

  .studio-app.is-mobile-layer-positioning { grid-template-rows:0 minmax(0,1fr); }
  .studio-app.is-mobile-layer-positioning .topbar { visibility:hidden; height:0; min-height:0; overflow:hidden; }
  .studio-app.is-mobile-layer-positioning .workspace { height:100dvh; }
  .studio-app.is-mobile-layer-positioning .mode-panel,
  .studio-app.is-mobile-layer-positioning .inspector,
  .studio-app.is-mobile-layer-positioning .mobile-scrim,
  .studio-app.is-mobile-layer-positioning .stage-toolbar,
  .studio-app.is-mobile-layer-positioning .telemetry,
  .studio-app.is-mobile-layer-positioning .stage-fullscreen,
  .studio-app.is-mobile-layer-positioning .stage-launch { display:none!important; }
  .studio-app.is-mobile-layer-positioning .stage-column { grid-column:1 / -1; grid-template-rows:minmax(0,1fr); padding:0; }
  .studio-app.is-mobile-layer-positioning .stage {
    height:100dvh;
    border:0;
    border-radius:0;
  }
  .studio-app.is-mobile-layer-positioning .mobile-layer-placement-dock {
    position:absolute;
    right:max(10px,var(--studio-safe-right));
    bottom:max(10px,var(--studio-safe-bottom));
    left:max(10px,var(--studio-safe-left));
    z-index:24;
    display:grid;
    gap:8px;
    padding:9px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:20px;
    background:rgba(12,14,20,.92);
    box-shadow:0 22px 70px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.06);
    backdrop-filter:blur(18px) saturate(1.12);
  }
  .studio-app .mobile-layer-placement-head { display:grid; grid-template-columns:72px minmax(0,1fr) 72px; gap:8px; align-items:center; }
  .studio-app .mobile-layer-placement-head > button,
  .studio-app .mobile-layer-nudges button { min-height:44px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:rgba(255,255,255,.035); color:var(--ink-muted); }
  .studio-app .mobile-layer-placement-head > button:last-child { border-color:color-mix(in srgb,var(--mode-accent) 38%,rgba(255,255,255,.08)); background:var(--mode-accent); color:#0a0c0a; font-weight:800; }
  .studio-app .mobile-layer-placement-head > span { min-width:0; text-align:center; }
  .studio-app .mobile-layer-placement-head small,
  .studio-app .mobile-layer-placement-head strong { display:block; }
  .studio-app .mobile-layer-placement-head small { color:var(--ink-faint); font:750 9px/1.2 "Space Mono",monospace; letter-spacing:.08em; }
  .studio-app .mobile-layer-placement-head strong { margin-top:4px; color:var(--ink); font:720 10px/1 "Space Mono",monospace; }
  .studio-app .mobile-layer-nudges { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
  .studio-app .mobile-layer-nudges button { font-size:18px; }

  .studio-app .mobile-precision-shell {
    position:fixed;
    top:var(--mobile-visual-top,0px);
    right:0;
    bottom:auto;
    left:0;
    height:var(--mobile-visual-height,100dvh);
    z-index:92;
    display:grid;
    align-items:end;
    padding:max(10px,var(--studio-safe-top)) max(10px,var(--studio-safe-right)) max(10px,var(--studio-safe-bottom)) max(10px,var(--studio-safe-left));
  }
  .studio-app .mobile-precision-shell[hidden] { display:none; }
  .studio-app .mobile-precision-backdrop { position:absolute; inset:0; border:0; background:rgba(1,2,5,.68); backdrop-filter:blur(6px); }
  .studio-app .mobile-precision-card {
    position:relative;
    display:grid;
    gap:14px;
    padding:17px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:22px;
    background:linear-gradient(160deg,color-mix(in srgb,var(--mode-accent) 6%,#151821),#0c0e14 62%);
    box-shadow:0 28px 90px rgba(0,0,0,.68),inset 0 1px rgba(255,255,255,.055);
  }
  .studio-app .mobile-precision-card > header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .studio-app .mobile-precision-card header small,
  .studio-app .mobile-precision-card header strong { display:block; }
  .studio-app .mobile-precision-card header small { color:var(--mode-accent); font:750 9px/1 "Space Mono",monospace; letter-spacing:.1em; }
  .studio-app .mobile-precision-card header strong { margin-top:5px; font-size:15px; }
  .studio-app .mobile-precision-card header button { width:44px; height:44px; border:1px solid rgba(255,255,255,.09); border-radius:13px; background:rgba(255,255,255,.03); color:var(--ink-muted); }
  .studio-app .mobile-precision-card header svg { width:15px; height:15px; }
  .studio-app .mobile-precision-stepper { display:grid; grid-template-columns:56px minmax(0,1fr) 56px; gap:8px; }
  .studio-app .mobile-precision-stepper > button { display:grid; min-height:58px; place-items:center; border:1px solid rgba(255,255,255,.1); border-radius:15px; background:rgba(255,255,255,.035); color:var(--mode-accent); font-size:24px; }
  .studio-app #mobilePrecisionMinus::before { display:block; width:15px; height:2px; flex:none; border-radius:99px; background:currentColor; content:""; }
  .studio-app .mobile-precision-stepper label { display:block; }
  .studio-app .mobile-precision-stepper label > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .studio-app .mobile-precision-stepper input { width:100%; height:58px; border:1px solid color-mix(in srgb,var(--mode-accent) 30%,rgba(255,255,255,.1)); border-radius:15px; background:rgba(2,4,8,.55); color:var(--ink); font:760 20px/1 "Space Mono",monospace; text-align:center; }
  .studio-app .mobile-precision-stepper input[aria-invalid="true"] { border-color:#ff7777; box-shadow:0 0 0 3px rgba(255,119,119,.12); }
  .studio-app .mobile-precision-bounds { display:flex; align-items:center; gap:9px; color:var(--ink-faint); font:700 10px/1 "Space Mono",monospace; }
  .studio-app .mobile-precision-bounds i { height:1px; flex:1; background:linear-gradient(90deg,rgba(255,255,255,.08),color-mix(in srgb,var(--mode-accent) 42%,transparent),rgba(255,255,255,.08)); }
  .studio-app .mobile-precision-done { min-height:48px; border:0; border-radius:14px; background:var(--mode-accent); color:#0a0c0a; font-weight:850; }
  .studio-app .mobile-precision-trigger { display:inline-flex; min-width:44px; min-height:44px; align-items:center; justify-content:flex-end; cursor:pointer; border-radius:7px; outline-offset:3px; }

  /* Compact desktop controls become real thumb targets in the mobile sheet.
     Their visual density stays the same; only the interactive box grows. */
  .studio-app .segmented button,
  .studio-app .style-picker button,
  .studio-app .center-presets button,
  .studio-app .passage-effects button {
    min-height:44px;
  }
  .studio-app .style-picker button { min-height:76px; }
  .studio-app input[type="color"] {
    height:44px;
    min-height:44px;
  }
  /* iOS enlarges a page when a focused text field uses tiny type. Keep the
     form controls readable without changing compact non-text sliders. */
  .studio-app input[type="text"],
  .studio-app input[type="search"],
  .studio-app input[type="number"],
  .studio-app textarea,
  .studio-app #watermarkText {
    font-size:16px;
  }
  .studio-app #watermarkText {
    height:44px;
    min-height:44px;
  }
  /* The custom listbox is portalled to <body>, outside .studio-app. */
  .studio-select-popover .studio-select-option {
    min-height:44px;
  }
}

@media (max-width:360px) {
  .studio-app .mode-item { min-height:96px; gap:7px; padding:9px 8px; }
  .studio-app .mode-symbol { width:32px; height:32px; flex-basis:32px; }
  .studio-app .mobile-mode-description { font-size:10px; }
  .studio-app .inspector-close { min-width:60px; padding-inline:9px; }
  .studio-app .workspace-tab { font-size:10px; }
  .studio-app .scene-layer-add-grid { grid-template-columns:1fr; }
  .studio-app .scene-layer-add { min-height:68px; }
  .studio-app .scene-layers-panel.has-selection .scene-layer-add-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .studio-app .scene-layers-panel.has-selection .scene-layer-add { min-height:52px; }
}

@media (max-width:900px) and (max-height:520px) and (orientation:landscape) {
  .studio-app { --mobile-dock:68px; }
  .studio-app .top-actions {
    padding-top:3px;
    padding-bottom:calc(3px + var(--studio-safe-bottom));
  }
  .studio-app .mode-panel,
  .studio-app .inspector {
    max-height:calc(100dvh - var(--topbar) - var(--studio-safe-top) - var(--mobile-dock) - var(--studio-safe-bottom) - 8px);
    border-radius:20px 20px 12px 12px;
  }
  .studio-app .inspector {
    height:calc(100dvh - var(--topbar) - var(--studio-safe-top) - var(--mobile-dock) - var(--studio-safe-bottom) - 8px);
  }
  .studio-app .mode-item { min-height:70px; }
}

@media (prefers-reduced-motion:reduce) {
  .studio-app .mode-panel,
  .studio-app .inspector { transition-duration:.01ms!important; }
}

@media (hover:none) and (pointer:coarse) {
  html,
  body,
  body * {
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  body *::-webkit-scrollbar {
    width:0;
    height:0;
    display:none;
  }
  .auth-scrollbar,
  .profile-scrollbar {
    display:none!important;
  }
  .portal-card[data-position="left"]:hover,
  .portal-card[data-position="right"]:hover { opacity:.48; filter:drop-shadow(0 34px 50px rgba(0,0,0,.58)); }
  .affiliate-platforms span:hover { background:initial; }
}

/* Some phone browsers expose a fine pointer when desktop mode, a stylus or a
   paired mouse is active. Viewport dimensions are the reliable fallback: hide
   scrollbar chrome while leaving every container touch-scrollable. */
@media (max-width:760px), (max-width:900px) and (max-height:520px) {
  html,
  body,
  body * {
    scrollbar-width:none!important;
    -ms-overflow-style:none!important;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  body *::-webkit-scrollbar {
    width:0!important;
    height:0!important;
    display:none!important;
  }
  .auth-scrollbar,
  .profile-scrollbar {
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .auth-dialog[open] .auth-shell { animation:none!important; }
}

/* Phone editor: give controls more of a tall screen. Once the user scrolls,
   the current section becomes a one-tap switcher and returns its space to
   the actual settings. The handle and Done action stay available. */
@media (max-width:900px) and (min-height:521px) {
  .studio-app .inspector:not([data-mobile-detent="full"]) {
    height:min(76dvh,calc(100dvh - var(--topbar) - var(--studio-safe-top) - var(--mobile-dock) - var(--studio-safe-bottom) - 14px));
  }
  .studio-app .inspector {
    transition:transform 360ms cubic-bezier(.2,.82,.2,1),height 250ms cubic-bezier(.2,.82,.2,1),grid-template-rows 360ms cubic-bezier(.2,.82,.2,1);
  }
  .studio-app .inspector-workspace-nav {
    grid-template-rows:52px 0fr;
    row-gap:0;
    transition:min-height 360ms cubic-bezier(.2,.82,.2,1),padding 360ms cubic-bezier(.2,.82,.2,1),grid-template-rows 360ms cubic-bezier(.2,.82,.2,1);
  }
  .studio-app .workspace-switch,
  .studio-app .mobile-workspace-menu-toggle { grid-area:1 / 1; min-width:0; }
  .studio-app .workspace-switch {
    transition:opacity 260ms ease,transform 360ms cubic-bezier(.2,.82,.2,1),visibility 360ms;
  }
  .studio-app .mobile-workspace-menu-toggle {
    display:flex;
    width:100%;
    height:44px;
    min-height:44px;
    align-items:center;
    gap:9px;
    align-self:center;
    padding:0 14px;
    border:1px solid rgba(166,156,255,.22);
    border-radius:12px;
    background:linear-gradient(110deg,rgba(166,156,255,.085),rgba(255,255,255,.025));
    color:#f4f2ec;
    font-size:12px;
    font-weight:720;
    opacity:0;
    pointer-events:none;
    transform:translateY(10px) scale(.97);
    visibility:hidden;
    transition:opacity 260ms ease,transform 360ms cubic-bezier(.2,.82,.2,1),visibility 360ms;
  }
  .studio-app .mobile-workspace-menu-toggle svg { width:16px; height:16px; flex:none; color:var(--mode-accent); }
  .studio-app .mobile-workspace-menu-toggle span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .studio-app .mobile-workspace-menu-toggle i {
    width:8px;
    height:8px;
    margin:-4px 2px 0 auto;
    flex:none;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    opacity:.7;
    transform:rotate(45deg);
    transition:transform 300ms ease,margin 300ms ease;
  }
  .studio-app .inspector.is-mobile-nav-menu-open .mobile-workspace-menu-toggle i { margin:4px 2px 0 auto; transform:rotate(225deg); }
  .studio-app .mobile-workspace-menu {
    display:grid;
    grid-area:2 / 1 / 3 / 3;
    grid-template-rows:repeat(3,44px);
    gap:3px;
    min-height:0;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
    visibility:hidden;
    transition:opacity 250ms ease,transform 360ms cubic-bezier(.2,.82,.2,1),visibility 360ms;
  }
  .studio-app .mobile-workspace-option {
    display:flex;
    width:100%;
    min-height:44px;
    align-items:center;
    gap:12px;
    padding:0 14px;
    border:1px solid transparent;
    border-radius:11px;
    background:rgba(255,255,255,.018);
    color:rgba(233,235,241,.7);
    font-size:12px;
    font-weight:690;
    text-align:left;
  }
  .studio-app .mobile-workspace-option svg { width:16px; height:16px; flex:none; }
  .studio-app .mobile-workspace-option i { width:5px; height:5px; margin-left:auto; border-radius:50%; background:transparent; }
  .studio-app .mobile-workspace-option.is-active {
    border-color:color-mix(in srgb,var(--mode-accent) 23%,transparent);
    background:color-mix(in srgb,var(--mode-accent) 8%,#11131b);
    color:#f4f2ec;
  }
  .studio-app .mobile-workspace-option.is-active i { background:var(--mode-accent); box-shadow:0 0 9px var(--mode-accent); }
  .studio-app .mobile-workspace-option:disabled { opacity:.36; }
  .studio-app .inspector.is-mobile-nav-compact { grid-template-rows:60px minmax(0,1fr) auto; }
  .studio-app .inspector.is-mobile-nav-compact .inspector-workspace-nav {
    min-height:60px;
    padding-top:8px;
    padding-bottom:8px;
    grid-template-rows:44px 0fr;
  }
  .studio-app .inspector.is-mobile-nav-compact .mobile-sheet-handle-label { display:none!important; }
  .studio-app .inspector.is-mobile-nav-compact button.mobile-sheet-grabber { display:none; }
  .studio-app .inspector.is-mobile-nav-compact .workspace-switch {
    opacity:0;
    pointer-events:none;
    transform:translateY(-10px) scale(.97);
    visibility:hidden;
  }
  .studio-app .inspector.is-mobile-nav-compact .mobile-workspace-menu-toggle {
    opacity:1;
    pointer-events:auto;
    transform:translateY(0) scale(1);
    visibility:visible;
  }
  .studio-app .inspector.is-mobile-nav-compact.is-mobile-nav-menu-open { grid-template-rows:216px minmax(0,1fr) auto; }
  .studio-app .inspector.is-mobile-nav-menu-open .inspector-workspace-nav {
    min-height:216px;
    grid-template-rows:44px 140px;
    row-gap:8px;
    padding-bottom:16px;
  }
  .studio-app .inspector.is-mobile-nav-menu-open .mobile-workspace-menu {
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
    visibility:visible;
  }
  .studio-app.is-workspace-transitioning .inspector-panel.is-workspace-entering .inspector-head,
  .studio-app.is-workspace-transitioning .inspector-panel.is-workspace-entering .inspector-scroll {
    animation:viralvizMobileWorkspaceEnter 220ms cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes viralvizMobileWorkspaceEnter {
    from { opacity:.88; transform:translate3d(0,4px,0); }
    to { opacity:1; transform:translate3d(0,0,0); }
  }
}

@media (max-width:760px) {
  .studio-app .trajectory-editor { bottom:20px; }
  .studio-app .trajectory-editor-dialog {
    height:min(790px,calc(100svh - 48px));
  }
}

@media (max-width:900px) {
  .studio-app .section-caption,
  .studio-app .section-caption b { font-size:10px; }
  .studio-app .timing-marks { font-size:9px; }
  .studio-app .duration-director { min-height:36px; padding:8px 10px; }
  .studio-app .duration-director b { font-size:10px; }
  .studio-app .duration-director em { font-size:9px; }
  .studio-app .control,
  .studio-app .compact-control { padding-top:20px; }
  .studio-app .control label,
  .studio-app .compact-control label,
  .studio-app .color-row label,
  .studio-app .select-row > span,
  .studio-app .block-label { font-size:11.5px; line-height:1.35; }
  .studio-app .control output,
  .studio-app .compact-control output { font-size:11px; }
  .studio-app .switch-row > span strong { font-size:12px; line-height:1.35; }
  .studio-app .switch-row > span small { font-size:10.5px; line-height:1.45; }
}

@media (prefers-reduced-motion:reduce) {
  .studio-app .inspector { transition-duration:.01ms!important; }
  .studio-app.is-workspace-transitioning .inspector-panel.is-workspace-entering .inspector-head,
  .studio-app.is-workspace-transitioning .inspector-panel.is-workspace-entering .inspector-scroll { animation:none!important; }
}