@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#0d1116;--panel:#151b23;--line:#2b3440;--text:#f0f2f4;--muted:#9da8b5;--accent:#eeb35a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px 'DM Sans',sans-serif}header{max-width:1400px;margin:auto;padding:25px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{color:var(--text);text-decoration:none;font-size:30px;font-weight:800;display:flex;align-items:center;gap:18px}.brand span{font-size:11px;letter-spacing:1.5px;max-width:120px;line-height:1.5}button{font:600 13px 'DM Sans',sans-serif;color:var(--text);border:1px solid #445160;background:#18212b;border-radius:6px;padding:10px 16px;cursor:pointer}button:hover{background:#283442}button:focus-visible,canvas:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}header button+button{margin-left:8px}main{max-width:1300px;padding:35px 5% 20px;margin:auto}.heading{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:25px}.eyebrow{font-size:11px;letter-spacing:1.8px;color:var(--accent);font-weight:700}h1{font:700 clamp(35px,4vw,54px)/1.1 'Barlow Condensed',sans-serif;margin:9px 0 0}.heading p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}.stage{position:relative;overflow:hidden;border:1px solid #39414c;border-radius:10px;background:#07090e;box-shadow:0 20px 50px #0005}canvas{display:block;width:100%;height:auto;touch-action:none;cursor:none}.stage-label{position:absolute;top:22px;left:25px;pointer-events:none;font-size:11px;letter-spacing:1.5px;color:#c9d0da}.live{display:inline-block;width:6px;height:6px;border-radius:50%;background:#d36451;margin-right:7px}#pause{position:absolute;right:20px;top:17px;background:#0d1116aa}#hand{position:absolute;left:0;top:0;font-size:64px;line-height:1;transform:translate(-50%,-45%) rotate(-18deg);opacity:0;pointer-events:none;z-index:3;filter:drop-shadow(2px 4px 3px #0008)}.status{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;gap:15px;padding:18px 24px;background:#0d1116dd;border-top:1px solid #ffffff16;font-size:13px;pointer-events:none}#state{font-weight:700;color:var(--accent)}#prompt{color:var(--muted)}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#0d1116;z-index:4;color:var(--muted)}.dashboard{display:grid;grid-template-columns:repeat(4,1fr) 1.5fr;background:var(--panel);border:1px solid var(--line);border-radius:8px;margin-top:20px;padding:23px 25px;gap:20px}.dashboard>div{border-right:1px solid var(--line)}.dashboard>div:last-child{border:0}.dashboard small{display:block;color:var(--muted);font-size:10px;letter-spacing:1.4px}.dashboard strong{font:600 34px 'Barlow Condensed',sans-serif;display:block;margin-top:7px}.meter{background:#303946;border-radius:10px;height:5px;margin:16px 0 9px;overflow:hidden}.meter i{height:100%;width:0;display:block;background:var(--accent);transition:width .1s}.power span{font-size:11px;color:var(--muted)}.help{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px;line-height:1.7;margin:20px 0}footer{max-width:1300px;margin:10px auto 0;padding:22px 5%;display:flex;justify-content:space-between;gap:20px;color:#73808f;border-top:1px solid var(--line);font-size:10px;letter-spacing:.7px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:700px){header{padding:18px 5%}.brand{font-size:26px;gap:10px}.brand span{font-size:8px;max-width:90px}button{padding:9px 10px;font-size:11px}.heading{display:block}.heading p{margin-top:15px;font-size:13px}main{padding-top:25px}.stage-label{top:15px;left:14px;font-size:9px}#pause{top:10px;right:12px}.status{padding:10px 12px;font-size:10px}#prompt{display:none}.dashboard{grid-template-columns:repeat(2,1fr);padding:18px;gap:20px}.dashboard>div:nth-child(2n){border-right:0}.power{grid-column:1/-1}.help,footer{display:block}.help span,footer span{display:block;margin-top:8px}#hand{font-size:45px}}

.health-panel{position:absolute;top:60px;left:25px;width:230px;pointer-events:none}.health-panel>div:first-child{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#e6e9ed;margin-bottom:9px}#health-bar{height:9px;background:#091018b3;border:1px solid #ffffff30;border-radius:3px;overflow:hidden}#health-fill{display:block;height:100%;width:100%;background:#bfda82;transition:width .15s}#health-fill.low{background:#ec765d}@media(max-width:700px){.health-panel{top:45px;left:14px;width:160px}.health-panel>div:first-child{font-size:9px;margin-bottom:5px}#health-bar{height:6px}}

:root{--accent:#ffbf39;--line:#493153;--panel:#181425;--bg:#0e0b17}.stage{border:2px solid #765197;box-shadow:0 0 0 4px #201329,0 0 35px #823af52b}.eyebrow{color:#69e5ed}h1{font-style:italic;text-transform:uppercase;letter-spacing:.5px;text-shadow:3px 3px #782774}.dashboard strong{color:#ffbf39}#health-bar{height:14px;border:2px solid #161024;transform:skewX(-8deg);box-shadow:0 0 0 1px #bf90d0}#health-fill{background:linear-gradient(90deg,#db951f,#ffde63);box-shadow:inset 0 -3px #d98222}.health-panel{width:290px}.health-panel>div:first-child{font-weight:700;color:#fff;text-shadow:1px 1px #000}.brand{font-style:italic}.power .meter{background:#382040}.meter i{background:linear-gradient(90deg,#69e5ed,#a56bff,#ffbf39)}@media(max-width:700px){.health-panel{width:175px}#health-bar{height:10px}}

/* Keep the arena proportional while reserving room for controls and stats. */
header{padding:12px 24px;max-width:1180px;width:100%}
main{width:100%;max-width:1180px;padding:14px 20px 6px}
.heading{gap:18px;margin-bottom:12px}
h1{font-size:clamp(28px,3vw,40px);margin-top:4px}
.heading p{font-size:12px;line-height:1.5}
.dashboard{margin-top:12px;padding:12px 18px;gap:12px}
.dashboard strong{font-size:28px;margin-top:3px}
.meter{margin:10px 0 7px}
.help{margin:10px 0 4px;font-size:11px}
footer{width:100%;max-width:1180px;margin:0 auto;padding:10px 24px;font-size:9px}
.status{padding:12px 18px;font-size:11px}
@media(min-width:701px) and (min-height:500px){
 main{max-width:min(1180px,calc((100vh - 280px) * 1.666667 + 40px));max-width:min(1180px,calc((100dvh - 280px) * 1.666667 + 40px))}
 .heading{min-height:52px}
 .heading>div{flex-shrink:0}
 .heading p{max-width:280px}
 .help{flex-wrap:wrap;gap:0 12px}
}
@media(max-width:900px){.heading p{display:none}.brand span{font-size:9px}.dashboard small{letter-spacing:.6px}.health-panel{width:175px}.stage-label{font-size:9px}.status{font-size:10px}#prompt{display:none}}
@media(max-width:700px){
 header{padding:10px 16px}main{padding:12px 12px 4px}.heading{margin-bottom:10px}h1{font-size:30px}
 .dashboard{grid-template-columns:repeat(4,1fr);padding:10px 12px;gap:10px}.dashboard>div:nth-child(2n){border-right:1px solid var(--line)}.dashboard>div:nth-child(4){border:0}
 .dashboard small{font-size:8px}.dashboard strong{font-size:24px}.power{grid-column:1/-1}.power .meter{margin:6px 0}.help span{margin-top:0}footer{padding:8px 16px}.health-panel{top:40px;width:145px}
}
main{container-type:inline-size}
h1{font-size:clamp(24px,5cqw,40px)}
@media(min-width:701px) and (max-height:800px){.heading p{display:none}}

/* Phone controls sit outside the canvas so they cannot cover the action. */
@media(max-width:700px), (pointer:coarse) and (max-width:1000px){
 header{padding:8px 12px;gap:8px}header>div{display:flex;gap:6px;flex-shrink:0}header button+button{margin-left:0}
 button{min-height:44px;padding:8px 12px;font-size:12px;touch-action:manipulation}
 .brand{font-size:24px;gap:8px}.brand span{font-size:8px;max-width:80px}
 main{padding:10px 10px 4px;max-width:700px}.heading{display:block;min-height:0;margin-bottom:10px}.heading>div{min-width:0}.heading p{display:none}
 h1{font-size:clamp(24px,7cqw,36px)}.eyebrow{font-size:9px}
 .stage{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-radius:8px}
 canvas{grid-column:1/-1;grid-row:2;width:100%;min-width:0}
 .health-panel{position:static;grid-row:1;grid-column:1;width:auto;min-width:0;margin:10px 12px;pointer-events:none}
 .health-panel>div:first-child{font-size:9px;margin-bottom:5px}#health-bar{height:10px}
 #pause{position:static;grid-row:1;grid-column:2;margin:6px 8px 6px 0;min-height:44px}
 .stage-label{display:none}.status{position:static;grid-column:1/-1;grid-row:3;padding:8px 12px;font-size:10px;min-height:30px}#prompt{display:none}
 .dashboard{grid-template-columns:repeat(4,minmax(0,1fr));padding:10px;gap:8px;margin-top:10px}
 .dashboard>div{min-width:0}.dashboard>div:nth-child(2n){border-right:1px solid var(--line)}.dashboard>div:nth-child(4){border:0}
 .dashboard small{font-size:8px;letter-spacing:.4px;overflow-wrap:break-word}.dashboard strong{font-size:24px;margin-top:2px}
 .power{grid-column:1/-1}.power .meter{margin:6px 0}.power span{font-size:10px}
 .help{display:block;font-size:11px;margin:8px 0 4px}.help span{display:none}
 footer{display:none}#hand{font-size:38px}
}
@media(max-width:360px){.brand span{display:none}header{padding-inline:10px}button{padding-inline:10px}}
@media(orientation:landscape) and (max-height:500px){
 header{padding:4px 12px;gap:8px}.brand span{display:none}header button{min-height:36px;padding:6px 12px}
 main{padding:6px 10px 0;max-width:min(100%,calc((100vh - 190px) * 1.666667 + 24px));max-width:min(100%,calc((100dvh - 190px) * 1.666667 + 24px))}
 .heading,.help,footer{display:none}.dashboard{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6px;padding:6px 10px;gap:6px}.dashboard strong{font-size:22px;margin:0}.dashboard small{font-size:8px}.power{display:none}
 .health-panel{margin-block:6px}.status{padding-block:6px;min-height:26px}
}

.race-panel{display:flex;align-items:center;gap:12px;margin:0 0 10px;font-size:11px;font-weight:700;color:#b8c5d7}
#race-target{flex:1;min-width:0;color:#69e5ed}.race-track{width:30%;height:6px;background:#35213e;border-radius:6px;overflow:hidden}.race-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffbf39,#ff875b);transition:width .15s}#race-value{white-space:nowrap;font-size:10px}
@media(min-width:701px) and (min-height:500px){main{max-width:min(1180px,calc((100vh - 310px) * 1.666667 + 40px));max-width:min(1180px,calc((100dvh - 310px) * 1.666667 + 40px))}}
@media(max-width:700px),(pointer:coarse) and (max-width:1000px){.race-panel{gap:8px;font-size:10px}#race-value{font-size:9px}.race-track{width:22%}}
@media(orientation:landscape) and (max-height:500px){main{max-width:min(100%,calc((100vh - 215px) * 1.666667 + 24px));max-width:min(100%,calc((100dvh - 215px) * 1.666667 + 24px))}.race-panel{margin-bottom:6px}}


/* A deliberate first gesture starts both the race and its audio. */
[hidden]{display:none!important}
.start-overlay{position:absolute;inset:0;z-index:5;border:0;border-radius:0;background:#0e0b17e8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;cursor:pointer}
.start-overlay:hover{background:#171024ed}.start-title{font:800 italic clamp(28px,5vw,58px) 'Barlow Condensed',sans-serif;color:#ffbf39;text-transform:uppercase}.start-overlay>span:last-child{font-size:13px;line-height:1.5;color:#b8c5d7;max-width:320px}
#loading{z-index:6}
.rotate-overlay{position:fixed;inset:0;z-index:20;background:#0e0b17;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;gap:12px}.rotate-phone{font-size:80px;color:#69e5ed}.rotate-overlay h2{font:700 36px 'Barlow Condensed',sans-serif;margin:0}.rotate-overlay p{color:#b8c5d7;margin:0;line-height:1.6}
body.mobile-game{height:var(--viewport-height,100dvh);overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.mobile-game header{padding:2px 10px;min-height:44px}.mobile-game .brand span{display:none}.mobile-game header button{min-height:40px;padding:6px 12px}
.mobile-game main{max-width:none;padding:4px 8px;margin:0 auto;container-type:normal}.mobile-game .heading,.mobile-game .help,.mobile-game footer{display:none}
.mobile-game .race-panel{max-width:700px;margin:0 auto 4px;font-size:10px;line-height:16px}
.mobile-game .stage{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin:0 auto;border-radius:6px;box-shadow:none}
.mobile-game canvas{grid-column:1/-1;grid-row:2;width:100%;height:auto;min-width:0}
.mobile-game .health-panel{position:static;grid-row:1;grid-column:1;width:auto;margin:4px 12px}.mobile-game .health-panel>div:first-child{font-size:9px;margin-bottom:4px}.mobile-game #health-bar{height:8px}
.mobile-game #pause{position:static;grid-row:1;grid-column:2;margin:0 6px 0 0;min-height:44px;padding:6px 12px}.mobile-game .stage-label{display:none}
.mobile-game .status{position:static;grid-column:1/-1;grid-row:3;padding:4px 10px;min-height:22px;font-size:10px;line-height:13px}.mobile-game #prompt{display:none}
.mobile-game .dashboard{max-width:700px;grid-template-columns:repeat(4,minmax(0,1fr));margin:4px auto 0;padding:4px 10px;gap:8px}.mobile-game .dashboard>div{min-width:0;border-right:1px solid var(--line)}.mobile-game .dashboard>div:nth-child(4){border:0}.mobile-game .dashboard small{font-size:8px;line-height:10px;letter-spacing:0}.mobile-game .dashboard strong{font-size:20px;line-height:22px;margin:0}.mobile-game .power{display:none}
.mobile-game #hand{font-size:38px}

/* Landscape uses the viewport as an arena. */
body.mobile-game{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;min-height:0}
.mobile-game header{max-width:none;margin:0;min-height:40px;padding:2px 8px}
.mobile-game main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:18px minmax(0,1fr);gap:4px 6px;width:100%;height:100%;min-height:0;min-width:0;padding:2px 6px 4px;margin:0;max-width:none}
.mobile-game .race-panel{grid-column:1;grid-row:1;width:100%;min-width:0;max-width:none;margin:0;gap:8px;font-size:9px}
.mobile-game .stage{display:block;grid-column:1;grid-row:2;min-width:0;min-height:0;width:100%;height:100%;margin:0;align-self:stretch}
.mobile-game canvas{width:100%;height:100%;display:block}
.mobile-game .health-panel{position:absolute;top:10px;left:12px;width:155px;margin:0}
.mobile-game #pause{position:absolute;top:4px;right:6px;min-height:36px;margin:0;padding:6px 10px;font-size:11px}
.mobile-game .status{position:absolute;bottom:0;left:0;right:0;min-height:22px;padding:4px 10px}
.mobile-game .dashboard{grid-column:2;grid-row:1/3;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,minmax(0,1fr));width:100%;height:100%;max-width:none;min-height:0;gap:0;margin:0;padding:4px 8px;align-items:stretch}
.mobile-game .dashboard>div,.mobile-game .dashboard>div:nth-child(2n){display:flex;flex-direction:column;justify-content:center;min-width:0;border-right:0;border-bottom:1px solid var(--line);padding:4px 0}
.mobile-game .dashboard>div:nth-child(4){border:0}.mobile-game .dashboard small{font-size:9px;line-height:12px}.mobile-game .dashboard strong{font-size:26px;line-height:30px;margin-top:3px}.mobile-game .dashboard .power{display:none}
@media(max-height:330px){.mobile-game header{min-height:34px}.mobile-game header button{min-height:30px;padding-block:4px}.mobile-game .dashboard strong{font-size:22px;line-height:24px}.mobile-game .health-panel{top:7px}}

#hand{width:90px;height:94px;font-size:0}#hand svg{display:block;width:100%;height:100%;overflow:visible}@media(pointer:coarse){#hand,.mobile-game #hand{width:66px;height:69px}}

@media(min-width:701px) and (min-height:500px){main{max-width:min(1180px,calc((100vh - 220px) * 1.666667 + 40px));max-width:min(1180px,calc((100dvh - 220px) * 1.666667 + 40px))}}

.touch-demo{display:none}
.mobile-game .start-overlay{gap:8px;padding:12px}
.mobile-game .start-title{font-size:clamp(26px,5vh,38px)}
.mobile-game #start-instructions{font-size:17px;font-weight:700;color:#e9edf4}
.mobile-game .touch-demo{display:block;position:relative;width:220px;height:88px;flex-shrink:0;pointer-events:none}
.touch-demo-track{position:absolute;left:36px;right:28px;top:42px;height:4px;border-radius:4px;background:linear-gradient(90deg,#69e5ed00,#69e5ed99);transform-origin:left;animation:touch-track 2.8s infinite}
.touch-demo-finger{position:absolute;left:16px;top:10px;font-size:52px;line-height:1;filter:drop-shadow(0 3px 4px #0008);animation:touch-finger 2.8s infinite}
.touch-demo-ripple{position:absolute;left:35px;top:25px;width:30px;height:30px;border:2px solid #69e5ed;border-radius:50%;animation:touch-ripple 2.8s infinite}
@keyframes touch-finger{0%,8%{transform:translate(0,-12px);opacity:0}16%{transform:translate(0,0);opacity:1}24%,42%{transform:translate(0,5px) scale(.92);opacity:1}72%,82%{transform:translate(140px,5px) scale(.92);opacity:1}94%,100%{transform:translate(140px,-12px);opacity:0}}
@keyframes touch-ripple{0%,16%{transform:scale(.6);opacity:0}24%{transform:scale(1);opacity:.9}42%{transform:scale(1.6);opacity:0}100%{opacity:0}}
@keyframes touch-track{0%,42%{transform:scaleX(0);opacity:0}72%{transform:scaleX(1);opacity:1}90%,100%{transform:scaleX(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.touch-demo-finger,.touch-demo-track,.touch-demo-ripple{animation:none}.touch-demo-finger{left:85px}.touch-demo-ripple{display:none}.touch-demo-track{opacity:.6}}

.mobile-game .race-panel{display:none}
.mobile-game main{grid-template-rows:minmax(0,1fr)}
.mobile-game .stage{grid-row:1}

.start-overlay .sound-hint{position:absolute;top:20px;left:12px;right:12px;display:flex;justify-content:center;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#b8c5d7}.sound-hint>span{font-size:20px}.mobile-game .start-overlay .sound-hint{top:10px;font-size:11px}.mobile-game .sound-hint>span{font-size:17px}

.desktop-demo{display:block;position:relative;width:300px;height:125px;flex-shrink:0;pointer-events:none}
.demo-elon{position:absolute;left:177px;top:17px;width:58px;height:67px;background:url('reference-outfit-atlas.png') no-repeat;background-size:394px 197px;background-position:-24.7px -15.6px;animation:demo-recoil 3s infinite}
.demo-hand{position:absolute;left:27px;top:27px;font-size:48px;line-height:1;animation:demo-hand-swipe 3s infinite;z-index:2;filter:drop-shadow(2px 3px 3px #0008)}
.demo-mouse{position:absolute;left:15px;top:89px;font-size:28px;line-height:1;animation:demo-mouse-swipe 3s infinite}
.demo-swipe-line{position:absolute;left:35px;right:55px;top:102px;height:3px;background:linear-gradient(90deg,#69e5ed00,#69e5ed);transform-origin:left;animation:demo-swipe-track 3s infinite}
.demo-slap{position:absolute;left:200px;top:4px;font:800 italic 27px 'Barlow Condensed',sans-serif;color:#ffbf39;text-shadow:2px 2px #782774;animation:demo-slap-pop 3s infinite;z-index:3}
@keyframes demo-hand-swipe{0%,22%{transform:translateX(0) rotate(-20deg)}43%{transform:translateX(145px) rotate(12deg)}55%{transform:translateX(175px) rotate(20deg);opacity:1}70%,100%{transform:translateX(175px) rotate(20deg);opacity:0}}
@keyframes demo-mouse-swipe{0%,22%{transform:translateX(0);opacity:1}43%,60%{transform:translateX(175px);opacity:1}75%,100%{transform:translateX(175px);opacity:0}}
@keyframes demo-recoil{0%,42%{transform:translateX(0) rotate(0)}48%{transform:translateX(22px) rotate(18deg)}65%{transform:translateX(12px) rotate(8deg)}85%,100%{transform:translateX(0) rotate(0)}}
@keyframes demo-slap-pop{0%,42%{opacity:0;transform:scale(.5)}48%,60%{opacity:1;transform:scale(1.1) rotate(-8deg)}78%,100%{opacity:0;transform:scale(1.1)}}
@keyframes demo-swipe-track{0%,22%{transform:scaleX(0);opacity:0}43%,60%{transform:scaleX(1);opacity:.8}78%,100%{transform:scaleX(1);opacity:0}}
.mobile-game .desktop-demo{display:none}
@media(prefers-reduced-motion:reduce){.desktop-demo>span{animation:none}.demo-slap{display:none}}

/* Give mobile play the full viewport height. */
body.mobile-game{grid-template-rows:minmax(0,1fr);padding-top:0;padding-bottom:0}
.mobile-game header,.mobile-game .status{display:none}
.mobile-game main{padding:0;gap:0}
.mobile-game .stage{border:0;border-radius:0}

.round-indicator{font:700 13px DM Sans,sans-serif;color:#ffbf39;border:1px solid #445160;border-radius:6px;padding:10px 16px;pointer-events:none}

#armor-panel{position:absolute;top:66px;right:20px;width:110px;margin:0;pointer-events:none;font-size:9px;letter-spacing:1px;color:#69e5ed}
#armor-bar{height:7px;background:#101827;border:1px solid #78929e;margin-top:4px}
#armor-fill{display:block;height:100%;background:linear-gradient(90deg,#527a8e,#c3f6ff);transition:width .15s}
.mobile-game #armor-panel{top:47px;right:6px;width:90px;margin:0}

#hand-cooldown{position:absolute;top:76px;left:50%;transform:translateX(-50%);padding:8px 12px;background:#3a151cee;border:1px solid #ff6d66;border-radius:6px;color:#ffb4a7;font-size:12px;font-weight:700;pointer-events:none;z-index:3}.mobile-game #hand-cooldown{top:74px;font-size:11px}

.salute-tutorial .desktop-demo,.salute-tutorial .touch-demo{display:none}
#salute-demo{display:block;position:relative;width:310px;height:155px;flex-shrink:0;pointer-events:none}
.salute-demo-svg{width:100%;height:100%;overflow:visible}
.tutorial-elon-head{position:absolute;left:145px;top:6px;width:58px;height:67px;background:url('reference-outfit-atlas.png') no-repeat;background-size:394px 197px;background-position:-24.7px -15.6px}
.tutorial-salute-arm{transform-origin:22px 0;transform:translate(22px,0) rotate(-135deg);animation:tutorial-salute 4s infinite}
.tutorial-slap-hand{position:absolute;left:20px;top:46px;font-size:44px;animation:tutorial-break-hand 4s infinite}
.tutorial-hand-break,.tutorial-cooldown{position:absolute;left:4px;top:8px;color:#ff796c;font:800 15px DM Sans,sans-serif;animation:tutorial-break-label 4s infinite}
.tutorial-cooldown{top:128px;left:65px;font-size:12px}
.salute-tutorial #start-instructions{max-width:440px;font-size:14px;line-height:1.5;color:#d8e0e8}
#start-continue{font-size:13px;color:#ffbf39;font-weight:700}
.mobile-game .salute-tutorial{gap:6px;padding:28px 12px 8px}
.mobile-game .salute-tutorial .start-title{font-size:25px}
.mobile-game .salute-tutorial #start-instructions{font-size:12px;max-width:420px}
.mobile-game #salute-demo{zoom:.75}
@keyframes tutorial-salute{0%,8%{transform:translate(22px,0) rotate(-45deg)}24%,78%{transform:translate(22px,0) rotate(-135deg)}94%,100%{transform:translate(22px,0) rotate(-45deg)}}
@keyframes tutorial-break-hand{0%,24%{transform:translateX(0) rotate(-18deg);filter:none;opacity:1}38%{transform:translateX(112px) rotate(-18deg);filter:none}45%,75%{transform:translateX(60px) rotate(65deg);filter:grayscale(1) drop-shadow(0 0 6px #ff5549);opacity:1}90%,100%{transform:translateX(60px) rotate(65deg);opacity:0}}
@keyframes tutorial-break-label{0%,38%{opacity:0}45%,75%{opacity:1}90%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.tutorial-salute-arm,.tutorial-slap-hand,.tutorial-hand-break,.tutorial-cooldown{animation:none}.tutorial-slap-hand{transform:rotate(45deg)}}
.salute-tutorial{gap:8px;padding:42px 14px 12px}
.salute-tutorial .start-title{font-size:36px;line-height:1.1}
#salute-demo{zoom:.7}
.tutorial-salute-arm{transform-origin:0 0}
.mobile-game .salute-tutorial{padding-top:34px}