/* SKAY / STUDIO 16 — only the five-stage experience. No layout change elsewhere. */
#journeyScroll { --st-silver:#e6effd; --st-cold:#7f9dc2; --st-bg:#08111b; }
#journeyScroll .journey-main { position:relative; border-radius:22px; border:1px solid rgba(212,226,245,.28); box-shadow:0 40px 120px rgba(0,0,0,.55), 0 0 42px rgba(146,179,222,.1); }
#journeyScroll .journey-visual { --energy:0; --low:0; --high:0; --stage-tint:109,154,213; background:radial-gradient(ellipse at 51% 39%,rgba(var(--stage-tint),.21),transparent 46%),radial-gradient(ellipse at 48% 48%,#2b3c52,#0b1421 64%,#060a12); transition:background 1s ease; }
#journeyScroll .journey-visual[data-stage="1"] {--stage-tint:153,157,225}
#journeyScroll .journey-visual[data-stage="2"] {--stage-tint:98,190,207}
#journeyScroll .journey-visual[data-stage="3"] {--stage-tint:179,201,233}
#journeyScroll .journey-visual[data-stage="4"] {--stage-tint:207,195,222}
#journeyScroll .journey-grid-lines { opacity:.20; background-size:42px 42px; }
#journeyScroll .journey-glow { filter:blur(42px);opacity:calc(.44 + var(--energy)*.32);transition:opacity .2s ease; }
#journeyScroll .journey-visual:before {content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.42;background:linear-gradient(110deg,transparent 38%,rgba(238,246,255,.06) 51%,transparent 64%);background-size:250% 100%;animation:skay-v16-sweep 21s linear infinite}
@keyframes skay-v16-sweep {from{background-position:120% 0}to{background-position:-160% 0}}
/* Consistent 3D editorial cut, no conflicting double-transform owners. */
#journeyScroll .journey-visual .skay-stage {z-index:7; opacity:0;visibility:hidden;pointer-events:none;filter:blur(12px);transform:translate3d(0,22px,0) scale(.95);transition:opacity .68s cubic-bezier(.2,.8,.2,1),filter .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility 0s linear .7s;}
#journeyScroll .journey-visual[data-stage="0"] .skay-produce,
#journeyScroll .journey-visual[data-stage="1"] .skay-voice,
#journeyScroll .journey-visual[data-stage="2"] .skay-mix,
#journeyScroll .journey-visual[data-stage="3"] .skay-master,
#journeyScroll .journey-visual[data-stage="4"] .skay-final {opacity:1;visibility:visible;filter:blur(0);transform:none;transition-delay:0s;}
#journeyScroll .journey-visual[data-stage="0"] .skay-produce,
#journeyScroll .journey-visual[data-stage="2"] .skay-mix {pointer-events:auto;}
#journeyScroll .journey-visual .journey-disc,#journeyScroll .journey-visual .journey-ring,#journeyScroll .journey-visual .journey-tracks,#journeyScroll .journey-visual .journey-playhead {display:none!important}
#journeyScroll .skay-stage-top {color:#c3d5ef;font-weight:700;letter-spacing:.20em;font-size:10px}
#journeyScroll .skay-stage-footer {color:#91a6c5;border-color:rgba(183,204,238,.26);letter-spacing:.18em;font-size:9px}
#journeyScroll .v16-tag {display:inline-flex;align-items:center;gap:8px;color:#d4e7ff;font:650 9px/1 'DM Sans',sans-serif;letter-spacing:.18em;background:rgba(184,213,255,.09);border:1px solid rgba(184,213,255,.19);padding:9px 12px;border-radius:100px;white-space:nowrap;align-self:flex-start}
#journeyScroll .v16-tag::before {content:"";width:5px;height:5px;flex:0 0 5px;background:#b1d4ff;border-radius:50%;box-shadow:0 0 12px rgba(183,219,255,.7)}
#journeyScroll .v16-live-tag[data-playing="yes"]::before {background:#a0ffcc;box-shadow:0 0 14px #a0ffcc}
#journeyScroll .v16-ambient-line {position:absolute;inset:26% 1% 20%;opacity:.5;border-radius:50%;background:radial-gradient(circle,transparent 33%,rgba(193,219,255,.08) 34%,transparent 35%);pointer-events:none}
/* I. Beat Lab: one playhead runs left -> right through ALL 4 ROWS. */
#journeyScroll .skay-seq-grid{position:relative;isolation:isolate;gap:13px;overflow:visible;padding:24px 19px;background:linear-gradient(135deg,rgba(29,48,73,.85),rgba(10,18,30,.94));border-radius:19px;border-color:rgba(182,214,253,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 28px 65px #0005}
#journeyScroll .skay-pads{gap:5px;position:relative;}
#journeyScroll .skay-pads i {height:clamp(23px,3vw,39px);transition:background .14s ease,box-shadow .14s ease,filter .14s ease,transform .14s ease;cursor:pointer;position:relative}
#journeyScroll .skay-pads i.is-lit{animation:none!important;background:linear-gradient(160deg,#f9fcff,#729ac5);box-shadow:0 0 8px rgba(193,222,255,.17),inset 0 1px 0 #fff8}
#journeyScroll .skay-pads i.v16-beat-on{transform:translateY(-2px);filter:brightness(1.44);box-shadow:0 0 20px rgba(229,244,255,.65),0 0 48px rgba(114,172,239,.30)}
#journeyScroll .v16-playhead {position:absolute;z-index:9;top:0;left:0;bottom:0;width:12px;opacity:1;pointer-events:none;will-change:transform;transform:translate3d(0,0,0)}
#journeyScroll .v16-playhead::before {content:"";position:absolute;left:50%;top:-15px;bottom:-15px;width:2px;background:linear-gradient(180deg,transparent,#ecf6ff 14%,#eaf4ff 85%,transparent);box-shadow:0 0 15px 2px rgba(176,219,255,.62);transform:translateX(-50%)}
#journeyScroll .v16-playhead::after {content:"";position:absolute;left:50%;top:-19px;width:8px;height:8px;transform:translateX(-50%) rotate(45deg);background:#ecf6ff;box-shadow:0 0 16px rgba(216,238,255,.8)}
#journeyScroll .skay-seq-row {grid-template-columns:62px minmax(0,1fr);gap:12px}
#journeyScroll .skay-seq-row>span {font-weight:700;color:#b1c8e4}
#journeyScroll .v16-seq-status {display:flex;gap:10px;align-items:center;justify-content:space-between;margin:14px 2px 6px;color:#b4c5dd;font-size:9px;letter-spacing:.13em}
#journeyScroll .v16-step-dots{display:flex;align-items:center;gap:5px}
#journeyScroll .v16-step-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#526882;transition:background .14s,transform .14s}
#journeyScroll .v16-step-dots i.is-current{background:white;transform:scale(1.65);box-shadow:0 0 10px #c5e1ff}
/* II. Vocals: freeze without real audio; when WAV plays the waveform follows its measured energy. */
#journeyScroll .voice-waves i {animation:none!important;transition:height .09s linear,opacity .1s ease;min-height:4px;background:linear-gradient(180deg,#f9fcff,#91bbeb 44%,#e9f4ff)}
#journeyScroll .voice-waves{inset:23% 2% 17%;opacity:.9}
#journeyScroll .voice-halo{animation:none!important;opacity:calc(.33 + var(--energy)*.44);transition:opacity .12s}
#journeyScroll .voice-microphone{animation:voiceFloat 5s ease-in-out infinite}
#journeyScroll .v16-spectrum-legend{font:550 9px 'DM Sans',sans-serif;color:#a3b8d3;letter-spacing:.13em;text-align:center;margin-top:12px}
/* III. Mix Console: real-band meters + adjustable faders; drag never changes the user's music. */
#journeyScroll .skay-mixer{border-radius:20px;background:linear-gradient(165deg,#1f3045,#101725 65%,#0b1019);border-color:#bacfeb5c;padding:17px;gap:10px;box-shadow:0 27px 72px #0006;}
#journeyScroll .skay-channel {background:rgba(194,220,255,.04);border-radius:10px;border-color:rgba(185,214,248,.15);transition:background .28s ease,border-color .28s ease}
#journeyScroll .skay-channel.is-peak {background:rgba(171,221,253,.10);border-color:rgba(220,241,255,.37)}
#journeyScroll .skay-channel-meter{width:10px;height:25%;min-height:22px;border-radius:6px;background:#030b15;display:flex;align-items:end;overflow:hidden}
#journeyScroll .skay-channel-meter i {animation:none!important;position:relative;display:block;inset:auto;width:100%;height:var(--v16-meter,5%)!important;transform:none!important;transition:height .10s linear!important;background:linear-gradient(0deg,#5278a5,#b2d9ff 55%,#eff8ff)}
#journeyScroll .skay-fader {min-width:32px;width:44px!important;max-width:90%;position:relative;background:linear-gradient(90deg,transparent calc(50% - 2px),#6683a4 calc(50% - 1px),#6683a4 calc(50% + 1px),transparent calc(50% + 2px));touch-action:none;cursor:ns-resize;user-select:none;-webkit-user-select:none;pointer-events:auto!important;z-index:12}
#journeyScroll .skay-fader::before {content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:repeating-linear-gradient(180deg,transparent 0 12px,rgba(195,218,244,.14) 13px 14px,transparent 15px 27px);opacity:.45}
#journeyScroll .skay-fader i {animation:none!important;top:var(--v16-fader,40%)!important;transform:translate(-50%,-50%)!important;transition:top .12s linear,background .12s ease!important;z-index:2;pointer-events:none;height:17px;width:min(40px,94%);background:linear-gradient(#f5faff,#a6bdd8 50%,#627e9e);border:1px solid rgba(238,247,255,.58);box-shadow:0 5px 14px #0008}
#journeyScroll .skay-fader.is-dragging i{transition:none!important;background:linear-gradient(#fff,#d7ebff 50%,#8bb0df)}
#journeyScroll .skay-channel>b {font-variant-numeric:tabular-nums;color:#c2d6f0;min-width:30px}
#journeyScroll .v16-mix-note {font:500 9px 'DM Sans',sans-serif;letter-spacing:.12em;color:#8ea2bc;text-align:right;margin-top:9px}
/* IV. Mastering: frequency-accurate waveform with a restrained signal beam. */
#journeyScroll .skay-master-wave i {animation:none!important;transition:height .09s linear,opacity .09s ease;background:linear-gradient(#edf8ff,#658fbf 55%,#eff7ff)}
#journeyScroll .skay-master-art {isolation:isolate}
#journeyScroll .skay-master-art::after {content:"";position:absolute;inset:17% 3%;border-block:1px solid rgba(208,227,248,.18);pointer-events:none}
#journeyScroll .skay-master-halo{animation:skayMasterHalo 9s ease-in-out infinite}
#journeyScroll .v16-lufs{font:600 10px 'DM Sans',sans-serif;letter-spacing:.11em;color:#bed7f2;text-align:center;font-variant-numeric:tabular-nums}
/* V. Release: deliberate luxurious spin, never artificially linked to track energy. */
#journeyScroll .final-vinyl{animation:none!important;transition:none!important;transform-origin:center;}
#journeyScroll .final-cover{animation:finalCover 8s ease-in-out infinite}
#journeyScroll .final-ready{border-color:rgba(212,235,224,.64);box-shadow:0 0 20px rgba(182,245,213,.09),0 8px 30px #0008}
#journeyScroll .journey-info{position:relative}
#journeyScroll .journey-copy{transition:opacity .32s ease,transform .4s ease}
#journeyScroll .journey-nav{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
#journeyScroll .journey-step{border-radius:9px;padding:13px 2px;transition:background .28s,color .28s,transform .3s,border-color .28s}
#journeyScroll .journey-step:hover{transform:translateY(-3px)}
#journeyScroll .journey-step strong{font-size:9px}
#journeyScroll .journey-step.is-current{background:linear-gradient(130deg,#f6fbff,#b1c5e0);box-shadow:0 8px 30px #84a9d526}
@media(max-width:700px){
 #journeyScroll .skay-seq-grid{padding:12px 9px;gap:10px}
 #journeyScroll .skay-seq-row{grid-template-columns:34px minmax(0,1fr);gap:6px}
 #journeyScroll .skay-pads{gap:2px}
 #journeyScroll .skay-pads i{height:clamp(15px,5vw,24px)}
 #journeyScroll .skay-mixer{padding:7px;gap:3px}
 #journeyScroll .skay-fader{min-width:19px;width:28px!important;}
 #journeyScroll .skay-stage-top,#journeyScroll .skay-stage-footer{font-size:7px;letter-spacing:.09em}
 #journeyScroll .v16-tag{font-size:7px;padding:6px 9px}
 #journeyScroll .v16-seq-status{font-size:7px}
 #journeyScroll .v16-step-dots{gap:3px}
 #journeyScroll .v16-step-dots i{height:4px;width:4px}
 #journeyScroll .journey-step strong{font-size:7px}
}
@media(prefers-reduced-motion:reduce){#journeyScroll .journey-visual:before,#journeyScroll .final-cover{animation:none!important}}

/* V17: remove background spinning plate/orbit and keep the five functional scenes. */
#journeyScroll .journey-visual::after,
#journeyScroll .journey-visual::before,
#journeyScroll .journey-disc,
#journeyScroll .journey-ring,
#journeyScroll .v16-ambient-line {display:none!important;content:none!important;animation:none!important;}
#journeyScroll .v17-preview-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:12px 0 7px;position:relative;z-index:13}
#journeyScroll .v17-preview-btn{border:1px solid rgba(231,241,255,.48);border-radius:100px;color:#0a1424;background:linear-gradient(115deg,#f9fcff,#b1c7e3 75%,#f2f7ff);font:700 11px 'DM Sans',Arial,sans-serif;letter-spacing:.025em;padding:13px 21px;cursor:pointer;box-shadow:0 8px 27px rgba(99,145,215,.18);transition:transform .2s ease,box-shadow .25s ease,background .2s ease}
#journeyScroll .v17-preview-btn:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(170,210,255,.3)}
#journeyScroll .v17-preview-btn.is-playing{background:#13243a;color:#e7f2ff;border-color:#97badc}
#journeyScroll .v17-preview-note{font:500 9px 'DM Sans',Arial,sans-serif;color:#9bb0cc;letter-spacing:.08em;line-height:1.5}
#journeyScroll .v17-preview-progress{height:2px;flex-basis:100%;background:rgba(187,211,242,.15);border-radius:8px;overflow:hidden}
#journeyScroll .v17-preview-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#7da5d3,#f5faff);transform-origin:left;transition:width .06s linear}
#journeyScroll .v16-live-tag[data-playing="yes"]{color:#a9efcf;border-color:rgba(139,241,194,.32)}
#journeyScroll .skay-master-wave i,#journeyScroll .voice-waves i{will-change:height,opacity}
@media(max-width:700px){#journeyScroll .v17-preview-btn{font-size:10px;padding:10px 14px}#journeyScroll .v17-preview-note{font-size:7px}}

/* WAV playback affordance (the precomputed signal remains still while paused). */
#journeyScroll .v17-listen-real{align-self:flex-start;position:relative;z-index:10;background:rgba(214,232,255,.10);border:1px solid rgba(219,235,255,.35);border-radius:100px;color:#e6f2ff;font:650 10px 'DM Sans',Arial,sans-serif;padding:9px 14px;cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
#journeyScroll .v17-listen-real:hover{background:rgba(216,235,255,.22);border-color:#d9edff;transform:translateY(-2px)}
@media(max-width:700px){#journeyScroll .v17-listen-real{font-size:8px;padding:6px 10px}}