/* Layout and interaction polish only: theme colors remain owned by day/night styles. */
html{scroll-padding-top:96px}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a,input,select,textarea{touch-action:manipulation}
button,input,select,textarea{font-size:max(.8125rem,13px)}
button:not(:disabled),a{transition:transform 160ms ease,border-color 160ms ease,box-shadow 160ms ease}
button:not(:disabled):active{transform:translateY(1px)}
:is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--acid,var(--app-foreground));outline-offset:4px}
:is(h1,h2,h3){text-wrap:balance}
p{line-height:1.65}
.public-home{max-width:1320px;padding-top:28px;padding-bottom:48px}
.public-nav{padding-bottom:24px;gap:24px}
.public-brand{letter-spacing:.015em;font-size:.875rem}
.public-brand img{width:44px;height:44px}
.public-nav-actions{gap:10px}
.public-hero{gap:clamp(28px,5vw,72px);padding:clamp(48px,6vw,88px) 0;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.public-hero h1{font-size:clamp(3.4rem,8.8vw,8rem);letter-spacing:.015em;margin:22px 0 26px}
.public-hero p{font-size:clamp(.875rem,1.2vw,1rem);max-width:60ch}
.public-hero-art{max-width:340px}
.detail-kicker{font-size:.6875rem;letter-spacing:.15em;line-height:1.6}
.public-actions{gap:12px;margin-top:30px;align-items:center}
.public-actions a,.public-home button{padding:13px 18px;min-height:48px;border-radius:8px;font-weight:700;line-height:1.4}
.public-section{padding:44px 0}
.public-section h2{letter-spacing:.035em;margin-bottom:24px}
.public-features{gap:20px}
.public-feature,.public-preview,.public-price{border-radius:14px;padding:clamp(22px,3vw,32px)}
.public-feature{display:flex;flex-direction:column;gap:8px}
.public-feature h3{line-height:1.15;margin:0}
.public-feature p{margin:0;font-size:.8125rem}
.public-preview{max-width:100%}
.public-preview h3{margin:8px 0 12px}
.public-preview p{font-size:.875rem}
.public-preview audio{margin-top:24px}
.public-price{gap:32px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.public-price h2{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.public-price p{font-size:.875rem}
.public-footer{gap:12px 28px;align-items:center;font-size:.75rem}
.public-footer a{padding:8px 0;text-underline-offset:4px}
.shell{padding-top:40px;padding-bottom:40px}
.headline{align-items:end;gap:28px;margin-bottom:32px}
.headline h1{letter-spacing:.02em}
.headline p{max-width:55ch;font-size:.875rem}
.tools{gap:12px}
.control{border-radius:8px;line-height:1.5}
.grid{gap:20px}
.card{border-radius:12px;overflow:hidden;isolation:isolate}
.card .body{padding:18px 20px}
.card .title{font-size:.9375rem;line-height:1.45;overflow-wrap:anywhere}
.card .meta{line-height:1.5;margin-top:8px}
.card:hover,.card.playing{transform:translateY(-2px)}
:is(.library-panel,.profile-card,.public-card,.site-tool-grid button,.auth-card,.mini-dialog,.detail,.glass-card,.glass-surface){border-radius:14px}
.site-tool-grid{gap:20px}
.site-tool-grid button{padding:24px;min-height:128px;line-height:1.5}
:is(.library-panel,.profile-card,.public-card){padding:28px}
.auth-card{padding:clamp(24px,4vw,40px)}
.auth-card h1{margin-bottom:16px}
:is(.auth-primary,.auth-secondary,.theme-toggle,.account-btn,.library-actions button,.detail-actions button){border-radius:8px}
:is(.auth-primary,.auth-secondary,.theme-toggle,.account-btn){min-height:44px}
.playerbar{gap:20px}
.player-track{min-width:0}
.ll .ll-top{gap:20px}
.ll .ll-top p{max-width:60ch;margin-top:12px}
.ll .ll-transport,.ll .ll-sessions{border-radius:12px;padding:20px;gap:14px}
.ll .ll-grid{gap:18px}
.ll .ll-pad{border-radius:12px;padding:20px}
.ll .ll-pad h2{font-family:var(--vault-font-ui,var(--font-ui,monospace))!important;font-size:14px;line-height:1.5}
.ll .ll-pad-head{align-items:baseline;gap:12px}
.ll .ll-state{margin:12px 0;line-height:1.5}
.ll .ll-pad-actions{gap:8px;margin:16px 0}
.ll :is(button,select,input[type=number],input[type=text],.ll-file){border-radius:8px}
.ll .ll-editor label{margin-top:14px;line-height:1.6}
.ll .ll-beat{font-variant-numeric:tabular-nums}
#vault-tool-content{line-height:1.6}
#vault-tool-content :is(h1,h2,h3){text-wrap:balance}
#vault-tool-content :is(.glass-card,.glass-surface){border-radius:14px}
@media(hover:hover){.site-tool-grid button:hover,.public-feature:hover{transform:translateY(-2px)}.public-feature{transition:transform 180ms ease}}
@media(max-width:1050px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tools{grid-template-columns:repeat(3,minmax(0,1fr))}.tools>input:first-child{grid-column:1/-1}}
@media(max-width:720px){.public-home{padding:20px 20px 32px}.public-nav{gap:14px;flex-wrap:wrap}.public-nav-actions{gap:8px}.public-nav-actions button{padding:10px 12px}.public-hero{grid-template-columns:1fr;gap:28px;padding:36px 0 40px}.public-hero-art{grid-row:1;max-width:160px}.public-hero h1{font-size:clamp(3.25rem,13vw,5rem);margin:18px 0 22px}.public-hero p{font-size:.875rem}.public-actions{margin-top:24px;gap:10px}.public-actions>*{flex:1;text-align:center;justify-content:center}.public-features,.public-price{grid-template-columns:1fr}.public-features{gap:12px}.public-section{padding:32px 0}.public-price{gap:20px}.public-feature,.public-preview,.public-price{padding:22px}.public-footer{gap:8px 20px}.shell{padding:28px 18px}.headline{align-items:start;flex-direction:column;gap:18px}.headline h1{font-size:clamp(2.75rem,13vw,5rem)}.headline p{font-size:.8125rem}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card .body{padding:14px}.card .title{font-size:.8125rem}.tools{grid-template-columns:repeat(2,minmax(0,1fr))}.tools>*{min-width:0}.library-layout,.profile-grid{grid-template-columns:1fr}.topbar{padding-left:14px;padding-right:14px}.tabs{overflow-x:auto;scrollbar-width:thin}.library-panel,.profile-card{padding:22px}.ll .ll-grid{gap:12px}.ll .ll-pad{padding:14px}.ll .ll-transport,.ll .ll-sessions{padding:16px}.playerbar{gap:12px}}
@media(max-width:420px){.public-nav{align-items:flex-start}.public-brand{font-size:.75rem;gap:10px}.public-brand img{width:36px;height:36px}.public-nav-actions{width:100%}.public-nav-actions>*{flex:1}.ll .ll-grid{grid-template-columns:1fr}.site-tool-grid{grid-template-columns:1fr}.card .body{padding:12px}.public-price strong{font-size:3rem}.ll .ll-transport>label{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Keep the actual audio controls reachable while scrolling on phones. */
@media (max-width: 767px) {
  .daw-transport, .stem-global-transport {
    position: fixed !important;
    inset: auto 8px 0 8px !important;
    z-index: 90;
    display: flex;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 110px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px 18px 0 0 !important;
    background: var(--frost-panel, rgba(12, 36, 22, .9)) !important;
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    backdrop-filter: blur(28px) saturate(140%);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .2);
  }
  .daw-transport > *, .stem-global-transport > * {
    flex-shrink: 0;
  }
  .daw-transport button, .stem-global-transport button {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }
  body:has(.daw-transport) .daw-console, body:has(.stem-global-transport) .app-window-page {
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body:has(#looplab-view:not([hidden])), body:has(#daw-view:not([hidden])) {
    padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px));
  }
  body:has(#looplab-view:not([hidden])) .playerbar,
  body:has(#daw-view:not([hidden])) .playerbar { display: none !important; }
}

/* Embedded tools have their own fixed transport; reserve space inside the shadow DOM. */
#vault-tool-content .daw-console,
#vault-tool-content .app-window-page {min-width:0;overflow-wrap:anywhere}
#vault-tool-content :is([role="dialog"],[role="alertdialog"]) {
  width:calc(100% - 24px);max-height:calc(100dvh - 32px);overflow-y:auto;
  overscroll-behavior:contain;
}
#vault-tool-content :is(button,a,input,select,textarea):focus-visible {
  outline:2px solid #2dff3a;outline-offset:3px;
}
@media(max-width:767px) {
  #vault-tool-content :is(.daw-console,.app-window-page) {
    padding-bottom:calc(170px + env(safe-area-inset-bottom,0px))!important;
  }
  #vault-tool-content :is(input[type="text"],input[type="email"],input[type="password"],textarea,select) {font-size:16px}
}
@media (max-width: 767px) {
  body:has(.mobile-bottom-nav) :is(.daw-transport, .stem-global-transport) {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: 10px !important;
    border-radius: 18px !important;
  }
  body:has(.mobile-bottom-nav):has(.daw-transport) .daw-console,
  body:has(.mobile-bottom-nav):has(.stem-global-transport) .app-window-page {
    padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* Phone-sized targets, immediate press feedback and less GPU work while mixing. */
@media (pointer: coarse) {
  button, [role="button"], summary, .ll-file {
    min-height: 48px !important;
    min-width: 44px;
    touch-action: manipulation;
  }
  button, [role="button"] { transition: none !important; }
  button:not(:disabled):active { transform: none !important; opacity: .78; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  input[type="range"] { min-height: 48px !important; touch-action: pan-y; }
  input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; }
  input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; }
  .ll-pad-actions { gap: 8px !important; }
  .ll-pad-actions button { padding: 12px !important; }
  .lt td button { min-width: 64px; min-height: 48px !important; }
  .lt th input { min-height: 48px !important; }
  .daw-steps { grid-template-columns: repeat(16, minmax(44px, 1fr)) !important; overflow-x: auto; gap: 6px; }
  .ll .ll-source-row input[type="number"] { min-width: 96px; }
  .ll .ll-source-row > label { flex-basis: 150px; }
  :root[data-theme] :is(.ll-pad,.glass-card,.glass-surface,.card) {
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
  }
}

/* LOOP LAB playback follows document scrolling, including inside the mobile rail layout. */
html body .app>.shell>#looplab-view.view {overflow:visible}
html body #looplab-view .ll-playback {
 position:sticky;top:80px;z-index:9;
 display:flex;flex-wrap:wrap;gap:8px;
 margin:12px 0;padding:10px;border-radius:12px;
 background-color:rgba(16,31,24,.90)!important;
 box-shadow:0 5px 18px rgba(0,0,0,.25)!important;
}
html[data-theme="light"] body #looplab-view .ll-playback {background-color:rgba(245,252,248,.92)!important}
html body #looplab-view .ll-playback button {min-height:44px;touch-action:manipulation}
html body #looplab-view .ll-playback .ll-beat {min-width:0}
@media(max-width:767px){
 html body #looplab-view .ll-playback {
  top:calc(var(--mobile-header-height,64px) + 6px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding:8px;gap:6px;
 }
 html body #looplab-view .ll-playback button {padding:8px 4px;font-size:12px;line-height:1.4;white-space:normal}
 html body #looplab-view .ll-playback .ll-beat {margin:0;text-align:center;font-size:16px}
 html body #looplab-view .ll-playback .ll-download {grid-column:1/-1;font-size:12px;overflow-wrap:anywhere}
 html body #looplab-view .ll-tempo {margin-bottom:8px}
}