/* V51 | Premium UX. Scoped only to XALO tool pages. The global header and navigation are untouched. */
:root{--x51-cyan:#87e6fa;--x51-blue:#8a9eff;--x51-slate:#a9c2d7}
.x42-page,.xai-page{--x51-edge:rgba(119,182,221,.26);--x51-ink:#f3faff;background-image:radial-gradient(ellipse 55% 20% at 80% 6%,rgba(63,95,186,.16),transparent 65%),radial-gradient(ellipse 38% 20% at 6% 13%,rgba(24,165,193,.09),transparent 65%)}
.x42-page .x42-wrap,.xai-page .xai-layout{min-width:0}
.x42-page :where(.x42-hero,.x42-panel),.xai-page :where(.xai-hero,.xai-panel,.xai-engines,.v51-ai-connection){position:relative;isolation:isolate}
.x42-page .x42-hero,.xai-page .xai-hero{background:radial-gradient(ellipse at 85% 0%,rgba(105,95,204,.15),transparent 49%),linear-gradient(135deg,rgba(12,25,49,.67),rgba(8,14,32,.2));border:1px solid rgba(109,163,206,.19);border-radius:clamp(17px,2vw,28px);padding:clamp(24px,4vw,47px);overflow:hidden}
.x42-page .x42-hero::after,.xai-page .xai-hero::after{content:'✦';position:absolute;pointer-events:none;font-size:clamp(95px,14vw,230px);font-weight:200;line-height:1;color:#79dffb0c;inset-inline-end:1%;top:0;transform:rotate(-13deg);z-index:-1}
.x42-page .x42-panel,.xai-page .xai-panel,.xai-page .xai-engines{border:1px solid var(--x51-edge);box-shadow:inset 0 1px rgba(218,239,255,.04),0 12px 46px rgba(0,3,13,.18);border-radius:20px;min-width:0}
.x42-page :where(button:not([disabled]),a.x42-btn,.x42-btn),.xai-page :where(button:not([disabled]),a){-webkit-tap-highlight-color:transparent}
.x42-page button:focus-visible,.x42-page a:focus-visible,.xai-page button:focus-visible,.xai-page a:focus-visible{outline:2px solid #a6f0fb;outline-offset:3px}
.x42-page .x42-kicker,.xai-page .xai-eyebrow{letter-spacing:.2em}
.x42-page .x42-flag,.v51-ai-connection,.v51-daw-statusbar{backdrop-filter:blur(9px)}
.x42-page :where(.x42-btn):not(:disabled){transition:transform .2s,border-color .2s,box-shadow .2s}.x42-page :where(.x42-btn):not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(37,169,211,.12)}
.x49-discovery{background:radial-gradient(ellipse at 90% 8%,rgba(72,60,178,.22),transparent 50%),linear-gradient(135deg,#0e1c34,#071021);border-color:#70bee465;box-shadow:0 25px 64px #0008}
#x49-grid .x49-card>a{overflow:hidden;transition:transform .26s ease,border-color .26s ease,box-shadow .26s ease}#x49-grid .x49-card>a:hover{transform:translateY(-5px);border-color:#8ae5f6b0;box-shadow:0 18px 45px #0008}
#x49-grid .x49-card .v42-icon{width:52px;height:52px;display:grid;place-items:center;font-size:27px;border:1px solid #75bed150;background:linear-gradient(140deg,#1d4058,#292d57);border-radius:16px}
#x49-grid .x49-card .v42-soon{color:#f2c8a0}
.v46-coming{background:radial-gradient(ellipse at 50% -10%,#233f9666,transparent 55%),linear-gradient(145deg,#142444,#070f23)!important;box-shadow:0 25px 90px #0009!important}
.v46-coming-icon{animation:v51float 7s ease-in-out infinite;box-shadow:0 0 68px rgba(95,173,224,.2)}
.v46-coming .v46-chip{color:#ffdc99;background:#bc8b3131;border-color:#ffc97980}
.v46-coming .v46-locked{border-color:#e5be7d4d;background:rgba(6,13,30,.76)}
.v46-coming .v46-actions{gap:10px;flex-wrap:wrap}.v46-coming .v46-actions>a{min-width:180px}
/* Digital audio workstation: consolidated transport, timeline, inspector and piano. */
.v51-daw-navigation{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:20px 0 13px;padding:8px;background:#0a162c;border-radius:17px;border:1px solid #72abca50}
.v51-daw-navigation a{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:1 1 140px;text-decoration:none;color:#b4cee5;font-weight:760;font-size:12px;min-height:44px;border-radius:12px;padding:8px 10px;transition:background .2s,color .2s}
.v51-daw-navigation a:hover,.v51-daw-navigation a:focus-visible{color:#f7fbff;background:#223e5e}
.v51-daw-statusbar{display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;min-height:48px;border:1px solid #66b3c659;border-radius:14px;padding:11px 17px;background:#0c2434;color:#9fd4e3;font-size:11px;margin-bottom:18px;letter-spacing:.06em}
.v51-daw-statusbar strong{color:#d9f7ff;margin-inline:7px}.v51-daw-readout{display:flex;gap:14px;align-items:center;font-variant-numeric:tabular-nums;color:#d1e8ff}
.v51-led{display:inline-block;width:9px;height:9px;border-radius:50%;background:#7de7b3;box-shadow:0 0 16px #43d8a177}
.v51-led.is-idle{background:#f5b77a;box-shadow:0 0 12px #c8832a66}.v51-led.is-online{background:#76eac0;box-shadow:0 0 15px #28dba088}
.v46-studio .v46-workspace{min-width:0;overflow:hidden}.v46-studio .v46-master{min-width:0}
.v51-transport-kicker,.v51-lane-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:12px 0 5px;color:#8ce4f6;font-size:11px;font-weight:850;letter-spacing:.1em}
.v51-transport-kicker span:last-child,.v51-lane-heading span{font-weight:500;letter-spacing:0;font-size:10px;color:#a1bad0}
.v46-transport{border:1px solid #6d93ac60;border-radius:15px;background:linear-gradient(115deg,#0b1c31,#142847);padding:12px!important;margin-top:11px!important}
.v46-transport button{min-height:43px}.v46-record-btn{box-shadow:0 4px 18px #f46d7a24}
.v46-timeline{border:1px solid #6c9bbb4e;border-radius:15px;background:#081224;padding:11px;min-height:160px}
.v46-track{border-radius:13px!important;border-color:#6d97be57!important;background:linear-gradient(120deg,#132440,#0b182d)!important;box-shadow:inset 3px 0 #81dff3aa}
.v46-track:nth-child(3n+2){box-shadow:inset 3px 0 #bd9dfaaa}.v46-track:nth-child(3n+3){box-shadow:inset 3px 0 #f9c890aa}
.v46-trackwave{height:66px!important;background:linear-gradient(180deg,#0b1f39,#060e1d)!important}
.v46-master{background:linear-gradient(150deg,#0d1f36,#10192c)!important}
.v46-master .v46-controlgrid{gap:10px}.v46-master input[type=range]{cursor:pointer}
.v51-starter{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px;margin-bottom:12px;background:linear-gradient(110deg,#18345a,#192548);border:1px dashed #83cde885;border-radius:14px}
.v51-starter[hidden]{display:none}.v51-starter strong{font-size:15px;color:#f1f9ff}.v51-starter p{margin:4px 0 0;color:#b0d3e5;font-size:12px}.v51-starter button{flex-shrink:0}
.v47-piano,.v46-beatlab{scroll-margin-top:110px}
.v46-studio,.v46-master,.v46-workspace{scroll-margin-top:100px}
/* AI status: honest live connection signals, without unlocking generators silently. */
.v51-ai-connection{padding:14px 18px;border:1px solid #659fc15b;border-radius:16px;background:linear-gradient(115deg,#101f39,#09172b);color:#d7efff;margin:17px 0}
.v51-connection-title{display:flex;gap:13px;align-items:center}.v51-connection-title strong{font-size:13px}.v51-connection-title p{font-size:12px;color:#b4c6de;margin:4px 0 0}.v51-connection-title p[data-state=online]{color:#8decc5}.v51-connection-title p[data-state=offline]{color:#f7c297}
.v51-ai-connection summary{cursor:pointer;color:#8dcae9;font-size:12px;padding:11px 0 0;list-style-position:inside}.v51-ai-connection summary:focus-visible{outline:2px solid #a6efff}
.v51-ai-setup-fields{display:grid;gap:10px;padding:12px 0}.v51-ai-setup-fields p{margin:0;font-size:12px;line-height:1.7;color:#a9c6db}.v51-ai-setup-fields label{font-size:12px;font-weight:800}.v51-ai-setup-fields input{min-height:43px;min-width:0;width:100%;padding:11px 13px;color:#f0fbff;border:1px solid #6c9dbd88;border-radius:11px;background:#06142b;font-family:inherit}
.v51-setup-actions{display:flex;gap:8px;flex-wrap:wrap}.v51-setup-actions button{border:1px solid #67bcd39a;border-radius:11px;background:#1c3b57;color:#d9f9ff;min-height:40px;padding:8px 15px;font:700 12px inherit;cursor:pointer}.v51-setup-actions button:disabled{opacity:.6;cursor:wait}#v51-ai-setup-error{color:#f6c59e!important}
.xai-engines-grid .xai-engine{transition:transform .22s ease,border-color .22s ease}.xai-engine:not(.is-unavailable):hover{transform:translateY(-3px)}
@media(min-width:1160px){.v46-studio{grid-template-columns:minmax(0,1fr) 300px;align-items:start}.v46-studio .v46-master{position:sticky;top:92px}.v46-master .v46-controlgrid{grid-template-columns:1fr!important}.v46-studio .v46-controls{grid-template-columns:1fr 1fr}.v46-studio .v46-file{grid-column:1/-1}}
@media(max-width:800px){.v51-daw-navigation a{flex:1 1 135px}.v46-trackwave{height:56px!important}}
@media(max-width:520px){.v51-daw-navigation{gap:5px;padding:5px}.v51-daw-navigation a{flex:1 1 120px;font-size:11px;min-height:40px;padding:6px}.v51-daw-statusbar{padding:10px;font-size:10px}.v51-daw-readout{gap:8px}.v51-starter button{width:100%}.v46-track{padding:10px!important}.v46-coming .v46-actions>a{flex:1 1 100%}}
@keyframes v51float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.x42-page *,.xai-page *{scroll-behavior:auto!important}.v46-coming-icon{animation:none}.x42-page .x42-btn,#x49-grid .x49-card>a,.xai-engine,.v51-daw-navigation a{transition:none!important}}

/* Clip legacy decorative overflow inside Tools content; do not clip the fixed global nav. */
body.cinematic-universe[data-cinema-theme="tools"] > main#mainContent{overflow-x:clip}
/* Motion system: restrained, content-first, and off when reduced motion is requested. */
@media(prefers-reduced-motion:no-preference){
 .x42-page .x42-wrap>.x42-hero,.xai-page .xai-hero{animation:x51fadeup .68s cubic-bezier(.2,.8,.2,1) both}
 .x42-page .x42-wrap>.x42-panel,.x42-page .x42-wrap>.v46-studio,.xai-page .xai-engines,.xai-page .v51-ai-connection{animation:x51fadeup .66s .1s cubic-bezier(.2,.8,.2,1) both}
 #x49-grid .x49-card{animation:x51fadeup .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(min(var(--x51-order,0),12)*35ms)}
 .v51-daw-statusbar .v51-led{animation:x51glow 3.6s ease-in-out infinite}
}
@keyframes x51fadeup{from{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes x51glow{0%,100%{box-shadow:0 0 9px #3ed4a374}50%{box-shadow:0 0 23px #3ed4a3aa}}