/* Compact mixer directly beneath the timeline, with practice tools alongside. */
.workspace{grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:12px 20px;align-items:start}.player{grid-column:1;grid-row:1}.practice{grid-column:2;grid-row:1 / span 2}.mix{grid-column:1;grid-row:2;padding:18px 22px}.mix .panel-heading{margin-bottom:10px}.mix .instrument-picker{margin:10px 0 8px}.mix .mix-explanation{margin:8px 0 10px;min-height:0}.mix #stems{display:block}.mix .stem{position:relative;display:grid;grid-template-columns:180px minmax(0,1fr);align-items:center;gap:12px;padding:6px 0 12px;border-top:1px solid #292929}.mix .stem-top{gap:6px}.mix .stem-name{font-size:12px;flex:1;margin:0}.mix .stem-top button{min-width:38px;padding:6px 4px;min-height:44px;font-size:10px}.mix .stem-dot{width:5px;height:18px;border-radius:2px}.mix .fader{min-width:0;gap:8px}.mix .fader input{width:100%;min-width:0;height:44px;accent-color:var(--stem)}.mix .fader output{font-size:10px;flex-shrink:0}.channel-wave{display:none}.show-waves .channel-wave{display:flex;grid-column:1 / -1;margin:0 0 8px}.channel-meter{position:absolute;bottom:7px;left:192px;right:44px;height:3px;background:#303030;border-radius:3px;overflow:hidden}.channel-meter i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#2dd4bf 80%,#eab308 94%,#ef4444);transform:scaleX(var(--level,0));transform-origin:left}.console-wave-toggle{margin-top:8px;font-size:11px;min-height:44px}.console-caption{font-size:10px;color:#999;margin:6px 0}.mix-footnote{margin-top:8px}.song-heading .song-copy{flex:1}.tiny-cover{display:none}
@media(max-width:1000px) and (min-width:761px){.workspace{grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:12px}.mix{padding:14px}.mix .stem{grid-template-columns:160px minmax(0,1fr);gap:6px}.channel-meter{left:166px}}
@media(max-width:760px){.mix{padding:16px}.mix .stem{grid-template-columns:1fr;gap:0;padding:5px 0 12px}.mix .stem-top button{min-width:44px}.mix .fader{margin-top:-4px}.channel-meter{left:0;right:44px}.show-waves .channel-wave{grid-column:1}}
@media(min-width:761px){.player{padding:18px 22px}.player .wave{height:96px;margin-top:14px}.player .output-meter{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:10px;margin:10px 0}.player .meter-top{grid-column:1;margin-bottom:4px}.player .stereo-bars{grid-column:1}.player .master-fader{grid-column:2;grid-row:1 / span 2;margin:0;gap:8px}.mix .instrument-picker{display:inline-flex;width:40%;margin:0 2% 0 0}.mix .instrument-picker select{min-width:90px;max-width:110px}.mix .mode-buttons{display:inline-grid;width:57%;vertical-align:middle}.mix .stem{padding-top:2px;padding-bottom:8px}.mix .channel-meter{bottom:4px}.mix .mix-footnote{display:none}}

/* Console faders: recessed rail, engraved scale and metal cap. Native range semantics retained. */
.mix .fader input{appearance:none;-webkit-appearance:none;height:44px;min-height:44px;border:0;border-radius:0;padding:0;cursor:ew-resize;background:repeating-linear-gradient(90deg,#ffffff26 0 1px,transparent 1px 10%) center 34px / calc(100% - 20px) 4px no-repeat;}
.mix .fader input::-webkit-slider-runnable-track{height:5px;border:1px solid #050505;border-radius:3px;background:#070909;box-shadow:0 1px 0 #ffffff14,inset 0 1px 3px #000;}
.mix .fader input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:28px;margin-top:-12px;border:1px solid #070909;border-radius:3px;background:linear-gradient(90deg,transparent 44%,#303638 45% 52%,#ecf0ed 53% 57%,transparent 58%),linear-gradient(90deg,#757e80,#d9dedd 18%,#b3bcbb 48%,#919b9b 83%,#596365);box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 1px #0005,0 2px 4px #000b;}
.mix .fader input::-moz-range-track{height:3px;border:1px solid #050505;border-radius:3px;background:#070909;box-shadow:0 1px 0 #ffffff14,inset 0 1px 3px #000;}
.mix .fader input::-moz-range-progress{height:3px;background:#070909;}
.mix .fader input::-moz-range-thumb{width:18px;height:26px;border:1px solid #070909;border-radius:3px;background:linear-gradient(90deg,transparent 44%,#303638 45% 52%,#ecf0ed 53% 57%,transparent 58%),linear-gradient(90deg,#757e80,#d9dedd 18%,#b3bcbb 48%,#919b9b 83%,#596365);box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 1px #0005,0 2px 4px #000b;}
.mix .fader input:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px;border-radius:4px;}
.player .master-fader input{appearance:none;-webkit-appearance:none;height:44px;min-height:44px;border:0;border-radius:0;padding:0;cursor:ew-resize;background:repeating-linear-gradient(90deg,#ffffff26 0 1px,transparent 1px 10%) center 34px / calc(100% - 20px) 4px no-repeat;}
.player .master-fader input::-webkit-slider-runnable-track{height:5px;border:1px solid #050505;border-radius:3px;background:#070909;box-shadow:0 1px 0 #ffffff14,inset 0 1px 3px #000;}
.player .master-fader input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:28px;margin-top:-12px;border:1px solid #070909;border-radius:3px;background:linear-gradient(90deg,transparent 44%,#303638 45% 52%,#ecf0ed 53% 57%,transparent 58%),linear-gradient(90deg,#757e80,#d9dedd 18%,#b3bcbb 48%,#919b9b 83%,#596365);box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 1px #0005,0 2px 4px #000b;}
.player .master-fader input::-moz-range-track{height:3px;border:1px solid #050505;border-radius:3px;background:#070909;box-shadow:0 1px 0 #ffffff14,inset 0 1px 3px #000;}
.player .master-fader input::-moz-range-progress{height:3px;background:#070909;}
.player .master-fader input::-moz-range-thumb{width:18px;height:26px;border:1px solid #070909;border-radius:3px;background:linear-gradient(90deg,transparent 44%,#303638 45% 52%,#ecf0ed 53% 57%,transparent 58%),linear-gradient(90deg,#757e80,#d9dedd 18%,#b3bcbb 48%,#919b9b 83%,#596365);box-shadow:inset 0 1px 0 #fff9,inset 0 -2px 1px #0005,0 2px 4px #000b;}
.player .master-fader input:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px;border-radius:4px;}
.mix .stem-dot{display:none}.mix .stem-name{font-weight:500;color:#d5dad9}.mix .stem-top button{border-color:#353b3a;border-radius:4px;background:linear-gradient(#242929,#171b1b);box-shadow:inset 0 1px 0 #ffffff08;font-family:'Space Mono',monospace;font-size:9px;color:#aeb8b5}.mix .stem-top button[aria-pressed=true]{background:#183c35;border-color:#398b79;color:#81e9d3;box-shadow:inset 0 1px 0 #6df4d622}.mix .fader output{color:#adb8b4}.mix .channel-wave i{background:#7eaaa1}.mix .stem{border-top-color:#ffffff0c}.mix .channel-meter{height:3px;background:#080c0b;box-shadow:0 1px 0 #ffffff0a}.mix .channel-meter i{background:linear-gradient(90deg,#297d6e,#53cfb3 88%,#d4a84b)}
/* Expanded channels read waveform first, then their volume controls. */
.mix .show-waves .channel-wave{grid-column:1 / -1;grid-row:1;margin:4px 0 0}
.mix .show-waves .stem-top,.mix .show-waves .fader{grid-row:2}
@media(max-width:760px){.mix .show-waves .stem-top{grid-row:1}.mix .show-waves .channel-wave{grid-row:2}.mix .show-waves .fader{grid-row:3}}
/* Practice controls follow the waveform; the compact mixer stays alongside. */
@media(min-width:761px){.workspace{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px 20px}.player{grid-column:1;grid-row:1}.practice{grid-column:1;grid-row:2}.mix{grid-column:2;grid-row:1 / span 2;padding:16px}.mix .instrument-picker{display:flex;width:100%;margin:6px 0 8px}.mix .mode-buttons{display:grid;width:100%}.mix .stem{grid-template-columns:160px minmax(0,1fr);gap:6px}.mix .channel-meter{left:166px;right:44px}.mix .stem-top{gap:4px}.mix .stem-top button{min-width:36px}.player .output-meter{display:block}.player .master-fader{margin-top:4px}}

.player>.panel-heading{justify-content:flex-end}.console-site-count{max-width:1176px;margin:4px auto 0;padding:0 16px;text-align:right;color:#8faaa4;font:11px 'Space Mono',monospace}.console-site-count a{color:inherit;text-decoration:none}
@media(min-width:761px){.workspace{grid-template-rows:min-content 1fr}}

.site-footer .console-site-count{margin:0 auto 0 0;padding:0;text-align:left;max-width:100%;display:flex;align-items:center}.site-footer .console-site-count iframe{max-width:100%;vertical-align:middle}

#accountButton.has-profile{display:inline-flex;align-items:center;gap:10px;padding:7px 12px;font-family:Archivo,sans-serif;max-width:260px;min-height:44px}
.account-avatar{position:relative;display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;overflow:hidden;border-radius:50%;background:#19483f;color:#83e4d5;font-size:12px;font-weight:600}
.account-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:480px){#accountButton.has-profile{max-width:145px;gap:7px;padding:6px 8px}}

#accountDialog{width:min(420px,calc(100vw - 32px))}.account-identity{font-weight:600;margin-bottom:4px}.account-details{padding:12px 16px;border:1px solid #ffffff18;border-radius:10px;margin:20px 0}.account-details p{margin:6px 0}.account-actions{display:grid;gap:10px}.account-actions button{text-align:left;min-height:44px}

#accountDialog{width:min(520px,calc(100vw - 32px));padding:24px;max-height:calc(100dvh - 32px);overflow:auto}
.account-profile{display:flex;align-items:center;gap:12px;margin:22px 0}.account-profile>div{min-width:0}.account-profile .account-avatar{width:42px;height:42px;flex-basis:42px;font-size:16px}.account-profile p{margin:0}.account-profile .preview-note{overflow-wrap:anywhere;margin-top:3px;font-size:12px}.account-plan{margin-left:auto;flex-shrink:0;border:1px solid #2dd4bf40;border-radius:6px;color:#71d8c8;padding:4px 8px;font-size:11px}
.account-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0 24px}.account-stats>button{border:1px solid #ffffff15;border-radius:12px;background:#ffffff03;padding:20px 14px;text-align:center}.account-stats h3{font-size:14px;margin:12px 0 4px}.account-stats p{font-size:12px;color:#94a39e;margin:0;line-height:1.5}
.account-ring{width:108px;height:108px;padding:7px;margin:auto;border-radius:50%;background:conic-gradient(#2dccba var(--allowance),#2a3431 0)}.account-ring>div{height:100%;border-radius:50%;background:#141817;display:flex;flex-direction:column;justify-content:center}.account-ring strong{font:600 32px/1.15 Archivo,sans-serif;color:#f5f5f2}.account-ring span{font-size:11px;color:#a5b3ad}.account-ring.unknown{background:#2a3431}
.account-credit-card .credit-symbol{display:block;font-size:26px;line-height:30px;color:#d4a84b;margin:0 0 8px}.account-credit-card>strong{display:block;font:600 32px/1.3 Archivo,sans-serif}.account-credit-card h3{margin-top:14px}.account-credit-card p{max-width:130px;margin:auto}
.account-actions{grid-template-columns:1fr 1fr}.account-actions button{text-align:center}.account-actions .account-upgrade{background:#d4a84b;color:#18150e;border-color:#d4a84b;font-weight:600}.account-actions .account-signout{grid-column:1/-1;background:transparent;border:0;color:#9fa8a4;font-size:12px;min-height:36px}.account-actions>.preview-note{grid-column:1/-1;margin:0}
@media(max-width:380px){#accountDialog{padding:18px}.account-profile{flex-wrap:wrap}.account-plan{margin-left:54px}.account-stats{gap:8px}.account-stats>button{padding:16px 8px}}

/* Keep the count on the same text baseline and typography as the author credit. */
.site-footer{align-items:baseline}
.site-footer .console-site-count{display:block;font:inherit;color:inherit;line-height:inherit}

.site-footer .console-site-count::before{content:"·";margin-right:10px}

.account-stats>button{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;min-width:0;white-space:normal;color:inherit;font-family:inherit;cursor:pointer}
.account-stats>button:hover{background:#1b2d28;border-color:#5ba692}.account-card-action{font-size:12px;color:#8cd8c6;margin-top:8px}.account-credit-card>strong{margin:auto 0 0}
.channel-wave[role=slider]{cursor:crosshair;touch-action:pan-y;position:relative;min-height:44px}
.channel-wave[role=slider]:hover{background:#2dd4bf0b}.channel-wave[role=slider]:focus-visible{outline:2px solid #5eead4;outline-offset:2px}
.channel-wave .stem-playhead{position:absolute;top:3px;bottom:3px;width:1px;background:#d4eee8;pointer-events:none;opacity:.65}

/* Playback shading follows the real transport, not the prototype bar count. */
#waveSvg rect{fill:#39665e}
#waveSvg rect.played{fill:#2dd4bf}

#outputDb.is-hot{color:#eab308}#outputDb.is-clipping{color:#ff6262;font-weight:700}
.stereo-bars .output-clip-light{display:block;flex:0 0 7px;width:7px;height:7px;border-radius:2px;background:#3c2929}
.stereo-bars .output-clip-light.lit{background:#ff5252;box-shadow:0 0 5px #ff525277}
.output-clip-status{margin-left:auto;margin-right:10px;color:#ff6262;font-weight:700;letter-spacing:.06em}

/* Dialog dimensions include padding; fields never compete with their action. */
#flowDialog{box-sizing:border-box;width:min(480px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);padding:24px;overflow:auto;overscroll-behavior:contain}
#flowDialog .panel-heading{gap:12px;align-items:center;margin-bottom:20px}
#flowDialog .panel-heading h2{min-width:0;margin:0;overflow-wrap:anywhere}
#flowDialog .panel-heading button{flex:0 0 44px;height:44px}
.rename-song-form{display:grid;gap:16px;min-width:0}
.rename-song-form label{display:grid;gap:8px;min-width:0;font-size:13px;color:#a7b7b0}
.rename-song-form input{box-sizing:border-box;display:block;width:100%;min-width:0;max-width:100%;min-height:46px;padding:10px 12px;font:16px/1.4 Archivo,sans-serif;color:#eef4f2;background:#0c1210;border:1px solid #466057;border-radius:8px}
.rename-song-form input:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
.rename-song-form>button{width:100%;min-height:44px;margin:0;background:#1b3c33;color:#b3eddf;border-color:#438572}
.rename-song-form>p{margin:0;overflow-wrap:anywhere}.rename-song-form>p:empty{display:none}
@media(max-width:480px){#flowDialog{padding:20px}#flowDialog .panel-heading h2{font-size:20px}}

#uploadView.loading-saved>:not(.upload-panel){display:none!important}
#uploadView.loading-saved{min-height:60vh}
#uploadView.loading-saved .upload-panel>:not(#splitProgress):not(.upload-status):not(.song-loading){display:none!important}
#uploadView.loading-saved .upload-panel{padding:0;border:0;background:transparent;box-shadow:none;margin-top:24px}
#uploadView.loading-saved #splitProgress{margin-top:0}
#uploadView.loading-saved .split-stages{display:none}

.audio-format-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 20px}
.audio-format-options .audio-format-option{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:16px 12px;white-space:normal;text-align:left;border:1px solid #52635b;background:#151e1a;color:#c6d5ce}
.audio-format-option strong{font-size:18px}.audio-format-option>span{font-size:12px;line-height:1.4}
.audio-format-option[aria-pressed=true]{border-color:#2dd4bf;background:#183c3355;color:#b8f0e2}
.audio-format-option .format-pro{border:1px solid #786336;border-radius:4px;padding:3px 6px;color:#e0c17b}

.song-title-row{display:flex;align-items:center;gap:12px;min-width:0}
.song-title-row h1{min-width:0;flex:0 1 auto}
.song-heading .share-song{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;min-height:44px;padding:9px 12px;border:1px solid #526b61;border-radius:8px;background:rgba(25,42,35,.45);color:#c1d9cf;font:500 13px/1.2 Archivo,sans-serif;white-space:nowrap}
.song-heading .share-song:hover{border-color:#83c0aa;background:rgba(37,66,53,.65);color:#effbf6}
.song-heading .share-song svg{flex:none}
/* Phones: borderless icon-only square (hover styles cleared too, since touch keeps :hover after a tap), centred on the title's first line (28px x 1.2 = 33.6px line, 44px target). */
@media(max-width:760px){.song-title-row{align-items:flex-start;gap:10px}.song-title-row h1{flex:1}.song-heading .share-song{width:44px;height:44px;padding:0;margin-top:calc((33.6px - 44px)/2)}.song-heading .share-song span{display:none}.song-heading .share-song,.song-heading .share-song:hover{border-color:transparent;background:transparent}.song-heading .share-song svg{width:22px;height:22px}}

@media(min-width:761px){
 .song-heading{flex-direction:column;align-items:stretch;gap:16px}
 .song-heading .song-copy{width:100%;min-width:0}
 .song-heading .console-actions{justify-content:flex-start;flex-wrap:wrap;width:100%;margin:0}
 .song-heading .console-actions .share-song{height:46px;min-height:46px;box-sizing:border-box}
 .song-heading .console-actions .new-split{margin-left:0}
}

.mix .channel-wave[role=slider]{padding:0;gap:0;height:48px;overflow:hidden;background:rgba(15,25,21,.5)}
.mix .channel-wave>svg{display:block;width:100%;height:44px;flex:1;min-width:0;pointer-events:none;fill:#699f90;opacity:.9}
.mix .channel-wave[role=slider]:hover>svg{fill:#83cbb5}

#waveSvg .wave-unplayed{fill:#42665e;stroke:none}#waveSvg .wave-played{fill:#2dd4bf;stroke:none}

/* Give the fader the space previously reserved after each instrument name. */
@media(min-width:761px){
 .mix .stem{grid-template-columns:140px minmax(0,1fr)}
 .mix .stem-top{display:grid;grid-template-columns:minmax(0,1fr) 36px 36px;gap:4px}
 .mix .stem-name{min-width:0;overflow-wrap:anywhere}
 .mix .channel-meter{left:146px}
}
@media(max-width:760px){
 .mix .stem-top{justify-content:flex-start}
 .mix .stem-name{flex:0 0 68px;min-width:0;overflow-wrap:anywhere}
}


.problem-dialog{position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid #466258;border-radius:16px;background:#101917;color:#e8efec}.problem-dialog button,.problem-dialog select{margin:8px 8px 0 0}.problem-dialog::backdrop{background:#0009}
/* Landing additions beneath the uploader: same eyebrow, panel and grid language as the console. */
.landing-guides,.landing-plans{margin:44px 0 0;padding-top:28px;border-top:1px solid #292929}
.landing-head{max-width:760px;margin-bottom:18px}.landing-head b{display:block;font:10px 'Space Mono',monospace;color:#2dd4bf;letter-spacing:1px;text-transform:uppercase}.landing-head h2{font-size:22px;letter-spacing:-.4px;margin:10px 0 0;font-weight:600}
.landing-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.landing-guide{display:block;min-width:0;padding:16px;background:var(--panel,#161616);border:1px solid var(--line,#292929);border-radius:13px;color:inherit;text-decoration:none;min-height:44px;transition:border-color .15s}
.landing-guide:hover{border-color:#2dd4bf60}.landing-guide:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
.landing-guide b{display:block;font:10px 'Space Mono',monospace;color:#2dd4bf;letter-spacing:1px}.landing-guide h3{font-size:15px;margin:8px 0 6px;font-weight:600;color:#fff}.landing-guide p{margin:0;font-size:12.5px;line-height:1.5;color:#aaa}
.landing-tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.landing-tier{min-width:0;padding:18px;background:var(--panel,#161616);border:1px solid var(--line,#292929);border-radius:13px}.landing-tier-pro{border-color:#D4A84B70}
.landing-tier b{display:block;font:10px 'Space Mono',monospace;color:#2dd4bf;letter-spacing:1px}.landing-tier-pro b{color:#f5c451}
.landing-tier strong{display:block;font-size:24px;margin:8px 0 10px;letter-spacing:-.4px}.landing-tier ul{margin:0;padding-left:16px}.landing-tier li{font-size:12.5px;line-height:1.55;color:#aaa;margin:2px 0}
.landing-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 0}
.landing-actions a,.landing-actions button{font:500 13px 'Archivo',sans-serif;min-height:44px;padding:10px 16px;border:1px solid #303030;border-radius:8px;background:#111;color:#fff;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center}
.landing-actions a:hover,.landing-actions button:hover{border-color:#2dd4bf}.landing-actions button{background:#2dd4bf;color:#071512;border-color:#2dd4bf}
.landing-compare{margin-top:18px;border-bottom:0;padding:0}.landing-compare summary{min-height:48px;cursor:pointer;padding:12px 16px;font-size:13px;color:#8cdace;border:1px solid #292929;border-radius:10px;list-style:none}.landing-compare summary::-webkit-details-marker{display:none}.landing-compare summary::before{content:'+';display:inline-block;width:16px;color:#2dd4bf;font-family:'Space Mono',monospace}.landing-compare[open] summary::before{content:'–'}
.landing-compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:12px}.landing-compare table{width:100%;min-width:680px;border-collapse:collapse;font-size:12.5px;line-height:1.45}
.landing-compare th,.landing-compare td{text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid #292929;color:#c9cfcc}.landing-compare th{font:10px 'Space Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:#8f9995;font-weight:400}.landing-compare th:nth-child(2),.landing-compare td:nth-child(2){color:#52d7c6}
.landing-compare-note{font-size:12px;color:#8f9995;margin:10px 0 0}.landing-compare-note a{color:#52d7c6}
@media(max-width:1000px){.landing-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.landing-guides,.landing-plans{margin-top:32px;padding-top:22px}.landing-tier-grid{grid-template-columns:1fr}.landing-head h2{font-size:19px}}
@media(max-width:440px){.landing-guide-grid{grid-template-columns:1fr}}
/* Footer: one quiet row on desktop, two tidy rows on phones, and only as much bottom clearance as the dock needs. */
.site-footer{flex-wrap:wrap;row-gap:10px;padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.site-footer .footer-wordmark{font:700 15px 'Montserrat',sans-serif;color:#fff;letter-spacing:-.3px}
.site-footer div a,.site-footer div button,.site-footer>a,.site-footer>button{min-height:36px;padding:0;color:#aaa;font:11px 'Space Mono',monospace;letter-spacing:.02em;display:inline-flex;align-items:center;cursor:pointer}
.site-footer div a:hover,.site-footer div button:hover,.site-footer>a:hover,.site-footer>button:hover{color:#5eead4}
@media(max-width:760px){
 .site-footer{margin:24px 16px 0;padding:20px 0 calc(104px + env(safe-area-inset-bottom));flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 18px}
 .site-footer .footer-meta{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:#8f9995;margin-bottom:2px}
 .site-footer .console-site-count{display:none}
 .site-footer>div{display:contents}
 .site-footer div a,.site-footer div button,.site-footer>a,.site-footer>button{min-height:40px;font-size:11px}
}
.demo-loading{margin-top:18px;min-height:44px}.song-loading{min-height:56px;padding:6px 0}
/* Plan tiles are buttons: lift on hover, show their action, keep the panel look. */
.landing-tier{position:relative;display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.landing-tier:hover,.landing-tier:focus-visible{transform:translateY(-3px);border-color:#2dd4bf80;box-shadow:0 12px 28px -18px #2dd4bf80}
.landing-tier-pro:hover,.landing-tier-pro:focus-visible{border-color:#d4a84b;box-shadow:0 12px 28px -18px #d4a84baa}
.landing-tier:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px}
.landing-tier-go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:500 12px 'Archivo',sans-serif;color:#8cdace;opacity:.75;transition:opacity .18s ease,gap .18s ease}
.landing-tier-go::after{content:'→'}
.landing-tier:hover .landing-tier-go,.landing-tier:focus-visible .landing-tier-go{opacity:1;gap:10px}
.landing-tier-pro .landing-tier-go{color:#f5c451}
@media(prefers-reduced-motion:reduce){.landing-tier,.landing-tier-go{transition:none}.landing-tier:hover{transform:none}}
.landing-tier.is-working{cursor:progress;border-color:#2dd4bf}.landing-tier.is-working .landing-tier-go{opacity:1;color:#8cf0df}.landing-tier.is-working .landing-tier-go::after{content:"";display:inline-block;width:10px;height:10px;border:2px solid #2dd4bf55;border-top-color:#2dd4bf;border-radius:50%;animation:tile-spin .8s linear infinite}@keyframes tile-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.landing-tier.is-working .landing-tier-go::after{animation:none}}

/* Missing stems being fetched again: their waveform areas and the song waveform
   shimmer instead of sitting empty, so a retry reads as working. */
.player .wave.is-loading{position:relative}
.mix .stem.stem-loading .channel-wave{position:relative;background:rgba(15,25,21,.5)}
.mix .stem.stem-loading .channel-wave::before,.player .wave.is-loading::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(45,212,191,.08) 40%,rgba(45,212,191,.18) 50%,rgba(45,212,191,.08) 60%,transparent 100%);background-size:200% 100%;animation:consoleStemShimmer 1.5s ease-in-out infinite}
.load-notice .load-notice-secondary{margin-left:8px}
.load-notice.is-busy p::after{content:'';display:inline-block;width:10px;height:10px;margin-left:8px;border:2px solid #2dd4bf;border-right-color:transparent;border-radius:50%;vertical-align:-1px;animation:consoleSpin .8s linear infinite}
@keyframes consoleStemShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes consoleSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mix .stem.stem-loading .channel-wave::before,.player .wave.is-loading::after,.load-notice.is-busy p::after{animation:none}}

/* Phones: "I'm practising" sits on the same two columns as Hear my part / Play with the band, so the picker lines up with the button below it, the label centres over Hear my part, and its text is centred and sized like theirs (padding is equal on both sides so the arrow does not pull the text off centre). */
@media(max-width:760px){.mix .instrument-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:center;margin:0 0 8px}.mix .instrument-picker label{text-align:center}.mix .instrument-picker select{width:100%;min-width:0;max-width:none;min-height:44px;padding:10px 34px;font-size:12px;line-height:1.45;text-align:center;text-align-last:center;background-position:calc(100% - 12px) 50%}}

/* Phones: the instrument picker must fill its column like the button under it. The rule above asks for
   width:100%, but entry-flow.css caps #mixPanel #instrument at 160px with two ids, which outranks it, so
   the picker stopped short of "Play with the band" on the right. Same cap, lifted here with one more class. */
@media(max-width:760px){#mixPanel.mix #instrument{width:100%;min-width:0;max-width:none;padding-right:34px}}
/* Phones: Practise / Mix is the only way between the two halves of the room, and it read as a quiet strip
   of grey text: easy to miss, and someone who never taps it never sees the other half. It is now a proper
   segmented control: taller, heavier type, the chosen side filled in the brand teal, the other side bright
   enough to read as a button. */
@media(max-width:760px){
 .mobile-tabs{padding:5px;gap:5px;background:#0e1414;border:1px solid #2dd4bf3d;border-radius:14px}
 .mobile-tabs button{min-height:48px;border-radius:10px;font:600 15px/1 Montserrat,sans-serif;letter-spacing:.2px;color:#c9d6d1;background:#ffffff08;transition:background .15s,color .15s}
 .mobile-tabs button[aria-selected=true]{background:#2dd4bf;color:#04110e;font-weight:700;box-shadow:0 2px 14px #2dd4bf33}
 .mobile-tabs button:focus-visible{outline:2px solid #5eead4;outline-offset:2px}
}