/* S7WILD.COM / GE-87 playable / R7 visual alignment. No third-party assets. */
:root{--bg:#030408;--surface:#0c1018;--line:#242b38;--ink:#f5f6fa;--muted:#a7afc0;--gold:#7846c4;--gold-dim:#251936;--brand-violet:#6537bd;--brand-magenta:#f0367a;--brand-cyan:#40c7f5;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink)}
html,body{background:var(--bg)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--brand-cyan)}
.skip{background:var(--brand-violet);color:#fff}
.site-header{max-width:1380px;min-height:74px;border-color:#1b212e;padding:16px 36px;gap:20px}
.wordmark{flex-direction:row;width:156px;min-width:126px;align-items:center}
.wordmark img{display:block;width:100%;height:auto;object-fit:contain}
.header-actions{gap:20px}.header-label{font-size:10px;font-weight:750;letter-spacing:1.6px;color:#aeb7c5}
.small-cta{color:#f0f2f8;display:inline-flex;align-items:center;justify-content:center;font-weight:700;border-radius:100px;border:1px solid #283043;min-height:38px;padding:8px 14px;font-size:12px}
.small-cta:hover{border-color:#7854ba;color:#fff}.text-button{color:#acb6c8;font-weight:550}.text-button:hover{color:#fff}
main{max-width:1380px;padding:0 36px}
.intro{padding:28px 3px 20px;align-items:center;gap:24px}.intro-copy{max-width:820px}
.eyebrow{font:750 10px/1.5 Inter,"Segoe UI",sans-serif;letter-spacing:2.1px;color:#afb6ca;margin:0 0 10px;display:flex;align-items:center;gap:11px}
.eyebrow:before{content:"";display:block;width:28px;height:2px;flex:none;background:linear-gradient(90deg,var(--brand-magenta),var(--brand-cyan))}
h1{font-family:Inter,"Segoe UI",Arial,sans-serif;font-weight:830;font-size:clamp(30px,4.1vw,51px);line-height:1.07;letter-spacing:-2.15px;margin-bottom:10px}
.lead{max-width:690px!important;color:#abb5c6;font-size:14px;line-height:1.55!important}
.primary{border:1px solid var(--brand-violet);background:var(--brand-violet);color:#fff;border-radius:999px;padding:15px 24px;font-size:13px;letter-spacing:.1px;box-shadow:none;min-height:48px}
.primary:hover{background:#7448cb;border-color:#7448cb}.primary:focus-visible{outline:2px solid var(--brand-cyan)}.primary.playing{background:#231a33;border-color:#6a5292;color:#e7dafa}
.play-icon{font-size:12px;line-height:1}.intro-action{gap:0}.intro-action .primary{white-space:nowrap}
.performance{position:relative}
.top-controls{padding:0 3px;min-height:51px;align-items:center;gap:22px;flex-wrap:wrap}
.era-selector{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.era-selector>.control-label{color:#8f9bad;font:700 10px/1.3 Inter,"Segoe UI",sans-serif;letter-spacing:1.4px;margin:0}
.eras{border:1px solid #303345;background:#0b0e17;border-radius:11px;padding:4px;gap:2px}
.eras button{min-height:38px;min-width:122px;padding:9px 13px!important;border:0;border-radius:7px;color:#aab4c7;font-family:Inter,"Segoe UI",Arial,sans-serif}
.eras button b{display:block;font-size:11px;font-weight:760;letter-spacing:.15px;white-space:nowrap}
.eras button:hover:not([aria-pressed=true]){background:#181f2c;color:white}
.eras button[aria-pressed=true]{background:var(--brand-violet);border-color:var(--brand-violet);color:#fff;box-shadow:0 2px 12px #3e287540}
.eras button[aria-pressed=true] span{color:#e5defb}
.view-controls{gap:6px;margin-left:auto;align-items:center}.view-controls button{font-size:11px;font-weight:650;padding:12px 10px;min-height:40px}
.era-caption{min-height:0;margin:8px 4px 13px;font-size:11px;line-height:1.5;color:#919db1}
.machine-scroll{border:0;background:transparent}.machine{position:relative}
.machine:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 52%,#2a1a4d36,transparent 70%);pointer-events:none;z-index:-1}
#visual-loading{background:#0b101a;color:#9aa7bd}#visual-loading span{color:#b0a0ec}
.native-control:focus-visible{outline-color:var(--brand-cyan)}.native-control.guide-lit{outline-color:#40c7f5;box-shadow:0 0 25px #40c7f533}
.loading-box{background:#111723;border-color:#3b4659;color:#dee5f2;border-radius:9px}.loading-box progress{accent-color:var(--brand-violet)}
.helper{background:#111823;border:1px solid #2c3444;color:#bac5d7;border-radius:10px}.helper b{color:#f1f4f9}
.performance-controls{gap:14px;border-bottom:0;justify-content:flex-start;padding:8px 3px 5px}
.performance-controls button:not(.text-button),.advanced-row .bank-select button{font:700 11px/1.2 Inter,"Segoe UI",Arial,sans-serif;border:1px solid #313a49;color:#c2cad8;background:#0e131e;padding:10px 12px;border-radius:8px;min-width:39px}
.performance-controls button[aria-pressed=true]:not(.text-button),.advanced-row .bank-select button[aria-pressed=true]{background:#2d204d;color:#f5edff;border-color:#7656b0}
.pattern-select button.queued{border-color:#40c7f5!important;box-shadow:inset 0 -2px var(--brand-cyan)}
.control-label{font:700 9px/1.5 Inter,"Segoe UI",Arial,sans-serif;color:#8794aa;letter-spacing:1.1px;white-space:nowrap}
.transport-select{border:1px solid #262d3c;border-radius:9px;padding:3px;background:#0d121a;gap:2px}
.transport-select button{min-width:94px;border:0!important;background:transparent!important}
.transport-select button[aria-pressed=true]{background:#362254!important;border-color:transparent!important;color:#fff!important}
.pattern-select{gap:5px}
.advanced-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:3px 4px 5px}.advanced-row .bank-select{display:flex;align-items:center;gap:5px}
.advanced-row .text-button{font-size:11px;color:#8e9ab1}
.control-feedback{min-height:28px;margin:0 3px;padding:7px 0 5px;border-bottom:1px solid #222937;color:#8e9ab1;font:10px/1.4 "Segoe UI",Arial,sans-serif;letter-spacing:.2px}
#playback-status{color:#b6c1d3;font-weight:550}
.song-strip{display:none;gap:14px;align-items:center;padding:9px 4px 12px}
html[data-demo-mode="song"] .song-strip{display:flex}
.song-rows{max-width:none;gap:3px}.song-row{height:7px;font-size:0;line-height:0;border:0;background:#252c3e;border-radius:100px;color:transparent}.song-row.active{border:0;background:#6841a7}.song-row-fill{background:#40c7f552}.song-row span{display:none}.time{color:#9aabc4;font:11px/1.3 Inter,"Segoe UI",Arial,sans-serif}
.next-step{border-top:1px solid #242b39;margin:34px 3px 0;padding:27px 0 25px;gap:30px;align-items:center}
.next-step .eyebrow{display:none}.next-step h2{font-size:clamp(22px,2.8vw,29px);font-weight:790;line-height:1.12;letter-spacing:-.75px;margin:0 0 6px}
.next-step p:not(.eyebrow){font-size:13px;line-height:1.55!important;color:#9ca9bc;max-width:510px}
.next-step .primary{margin:0;min-height:45px;padding:12px 22px}
footer{border-top:1px solid #1b2230;margin:0 auto;padding:17px 2px 30px;color:#78849a;font:10px/1.6 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:1.1px;max-width:1306px}
#toast{background:#161c2af5;border:1px solid #485375;color:#e8edf9;border-radius:10px}
body.focus-view .performance{background:#030408}.focus-view .eras button{min-width:0}
@media(min-width:1001px){
 .machine-options{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #202838;padding:5px 3px 7px}
 .machine-options .advanced-row{flex:1;padding:0}.touch-adjust,.touch-selected,.touch-utilities{display:none}
 .control-feedback{border-bottom:none}
}
@media(max-width:1000px),(pointer:coarse){
 .site-header{min-height:67px}.era-caption{min-height:0}
 .touch-navigation{margin:5px 0 6px}.zoom-tabs{gap:4px;flex-wrap:wrap}
 .zoom-tabs button{background:#101622;border:1px solid #293448;color:#acbbd0;border-radius:8px;min-height:39px;padding:8px 12px;font-weight:650}
 .zoom-tabs button[aria-pressed=true]{background:#2a1f42;color:#eee6ff;border-color:#704bb3}
 .zoom-tabs #landscape-options{display:block;margin-left:auto;background:#1a1530;border-color:#624693;color:#dfcfff;white-space:nowrap}
 .touch-instruction{display:none}
 .machine-options{display:none;border:1px solid #293347;background:#0e1420;border-radius:12px;padding:12px 14px;margin:8px 0 6px}
 .performance.touch-options-open>.machine-options{display:block}
 .touch-adjust{display:flex;border-bottom:1px solid #263348;padding:4px 0 11px}
 .touch-adjust button,.touch-selected button,.touch-utilities button{border-color:#344057;background:#131a28;color:#becde3;border-radius:8px}
 .touch-adjust button[aria-pressed=true]{background:#332550;border-color:#805ac4;color:#f4ecff}
 .advanced-row{padding:10px 0;border-bottom:1px solid #293245;flex-wrap:wrap}
 .advanced-row .bank-select button{padding:9px 11px}
 .touch-selected{color:#d1daec;border-top:0;padding:10px 0 4px}
 .touch-utilities button[aria-pressed=true]{border-color:#805ac4;color:#e8dbff}
 .song-strip{margin:0 3px;padding:11px 0 9px}
 .mobile-dock{background:#080c15f8;border-top:1px solid #273248;box-shadow:0 -8px 25px #0008}
 .mobile-dock button{background:#151b2b;border-color:#35435e;color:#dae4f4;border-radius:10px;font-weight:700}
 .mobile-dock #mobile-play{background:var(--brand-violet);border-color:var(--brand-violet);color:#fff}
 .mobile-dock #mobile-play[aria-pressed=true]{background:#33214e;border-color:#7453ad;color:#eee2fc}
 .mobile-dock #dock-status{display:none}
 .mobile-dock #mobile-focus{margin-left:auto}
}
@media(max-width:700px){
 main{padding:0 15px}.site-header{padding:11px 17px;gap:12px;min-height:61px}
 .wordmark{width:139px;min-width:104px}.header-label{display:none}.header-actions{gap:9px}.header-actions .language-control{padding:8px 6px;min-width:36px}
 .small-cta{font-size:11px;min-height:36px;padding:8px 12px}
 .intro{padding:21px 2px 16px;display:block}.eyebrow{font-size:9px;letter-spacing:1.3px;gap:8px;margin-bottom:8px}.eyebrow:before{width:20px}
 h1,.intro h1{font-size:32px;line-height:1.08;letter-spacing:-1.1px;margin-bottom:9px}
 .lead,.intro .lead{font-size:12.5px;line-height:1.6!important;max-width:520px}
 .intro-action{margin:14px 0 0}.intro-action .primary{min-height:45px;min-width:170px;justify-content:center;padding:11px 19px;font-size:12px}
 .top-controls{padding:0;gap:3px;min-height:0;display:flex;flex-wrap:wrap}
 .era-selector{width:100%;display:block}.era-selector>.control-label{display:block;margin:0 0 7px;font-size:9px}
 .eras{width:100%;border-radius:10px;padding:3px;min-width:0;display:flex}
 .eras button{flex:1;min-height:40px;min-width:0;padding:9px 6px!important;border-radius:7px}
 .eras button b{font-size:10px;letter-spacing:0}
 .view-controls{margin:2px 0 0 auto;gap:10px;width:auto}.view-controls button{min-height:34px;font-size:11px;padding:6px}
 .era-caption{margin:3px 2px 8px;line-height:1.4;font-size:10px;min-height:0}
 .touch-navigation{margin:5px 0 6px}
 .zoom-tabs{display:flex;flex-wrap:nowrap;gap:4px}.zoom-tabs button{font-size:10px;min-height:39px;flex:1;padding:7px 4px;white-space:nowrap}
 .zoom-tabs button:nth-child(4),.zoom-tabs button:nth-child(5){display:none}
 .zoom-tabs #landscape-options{flex:1.1;min-width:70px;padding:7px 5px}
 .performance-controls{padding:9px 0 6px;gap:11px 6px;display:flex;flex-wrap:wrap}
 .performance-controls>.transport-select{width:auto;flex:1;margin-right:4px}.transport-select button{flex:1;min-width:69px;padding:10px 8px!important}
 .pattern-select{flex:1;min-width:150px;gap:4px}.pattern-select .control-label{font-size:9px}
 .pattern-select button{min-width:37px!important;padding:10px 7px!important}
 .control-feedback{gap:6px;flex-direction:row;flex-wrap:wrap;padding:7px 0;font-size:10px}
 .next-step{display:flex;flex-wrap:wrap;gap:12px;margin-top:19px;padding:24px 0 23px}
 .next-step h2{font-size:24px;margin-bottom:6px}.next-step p:not(.eyebrow){font-size:12px}
 .next-step .primary{margin:1px 0 0;padding:11px 19px;font-size:12px;min-height:44px}
 footer{margin:0 14px;font-size:9px;padding:14px 0 25px}
 .loading-box{margin:0 0 8px}
}
@media(max-width:380px){
 .wordmark{width:113px}.header-actions{gap:6px}.small-cta{font-size:10px;padding:7px 10px}
 .zoom-tabs button{font-size:9px;padding:7px 3px}.performance-controls>.transport-select{width:100%;flex:auto}
 .pattern-select{width:100%;flex:auto}.advanced-row .bank-select{width:100%}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:600px){
 .top-controls .era-selector{display:flex;width:auto;flex:1;gap:8px}.top-controls .era-selector>.control-label{display:none}
 .eras{width:100%;max-width:520px}.view-controls{width:auto}
 body.focus-view .top-controls{padding-top:0;min-height:44px}
 body.focus-view .touch-navigation{height:41px}
 body.focus-view .zoom-tabs{height:41px}
 body.focus-view .zoom-tabs button{min-height:40px}
 body.focus-view .machine-scroll{max-height:calc(100dvh - 153px)}
 body.focus-view .touch-options-open>.machine-options{position:fixed;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:calc(68px + env(safe-area-inset-bottom));width:auto;max-height:calc(100dvh - 160px);z-index:72;overflow:auto;background:#101722;border-color:#4a3e68;box-shadow:0 10px 40px #000b}
}
@media(prefers-reduced-motion:reduce){.primary{transition:none}}

/* Product-site official white S7WILD AUDIO lockup and landscape panel states. */
.wordmark{width:154px;min-width:130px}
.wordmark img{filter:none}
body.focus-view #landscape-options{color:#e7dafa;border-color:#7656b0;background:#231938}
@media(max-width:700px){.wordmark{width:135px;min-width:112px}}
@media(max-width:380px){.wordmark{width:120px;min-width:107px}}

/* Render the approved master logo in white; preserve its original geometry. */
.wordmark img{filter:brightness(0) invert(1)}