@font-face{font-family:"Lexend";src:url("fonts/lexend.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/manrope.woff") format("woff");font-weight:300 800;font-style:normal;font-display:swap}
:root{
  --cyan-primary:#00f5fc;--purple-secondary:#7a1fd9;--darkest-dark:#131313;--grey-dark:#262626;--grey:#858485;--off-white:#bcc8ce;--white:#fff;
  --font-display:"Lexend","Manrope",system-ui,sans-serif;--font-text:"Manrope",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--darkest-dark);color:var(--white);font-family:var(--font-text)}
.page{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.x{padding-left:96px;padding-right:96px}
header{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-shrink:0;padding-top:clamp(12px,3.5vh,32px);padding-bottom:clamp(4px,2vh,24px)}
header img{width:144px;height:auto;display:block}
main{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,4vh,40px);padding:clamp(4px,2vh,24px) 0}
.copy{display:flex;flex-direction:column;gap:16px;flex-shrink:0;max-width:1180px}
.eyebrow{margin:0;color:var(--cyan-primary);font-size:20px;line-height:20px;font-weight:800;letter-spacing:2px}
h1{margin:0;font-family:var(--font-display);font-size:96px;line-height:96px;font-weight:800;letter-spacing:-4px;text-shadow:0 0 20px rgba(255,255,255,.3)}
h1 span{color:var(--cyan-primary)}
.sub{margin:0;max-width:700px;font-size:24px;line-height:32.5px;font-weight:300;letter-spacing:1px}
.choice{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border:1.5px solid var(--grey-dark);border-radius:100px;transition:border-color 180ms ease}
.choice.waiting{border-color:var(--cyan-primary);animation:breathe 2.4s ease-in-out infinite}
.choice.waiting button{color:var(--cyan-primary)}
@keyframes breathe{0%,100%{box-shadow:0 0 10px rgba(0,245,252,.4)}50%{box-shadow:0 0 14px rgba(0,245,252,.7)}}
.peg:disabled{cursor:default}
.choice button{min-height:44px;padding:0 24px;border:0;border-radius:100px;background:transparent;color:var(--off-white)}
.choice button[aria-pressed="true"]{background:var(--cyan-primary);color:var(--darkest-dark);box-shadow:0 0 10px rgba(0,245,252,.4)}
.choice button[aria-pressed="false"]:hover{color:var(--white)}
.band{position:relative;display:flex;flex:1 1 auto;min-height:120px;max-height:300px;padding-right:96px}
.strings{position:relative;flex:1;min-width:0}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.pegs{width:84px;padding-left:12px;display:grid;grid-template-rows:repeat(6,minmax(0,1fr))}
.peg{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0;border:0;background:transparent;cursor:pointer;border-radius:8px}
.peg b{font-family:var(--font-display);font-weight:700;font-size:16px;line-height:24px;color:var(--off-white)}
.peg i{font-style:normal;min-width:36px;display:flex;justify-content:flex-end;font-size:13px;line-height:15px;font-weight:500;letter-spacing:1px;color:var(--grey)}
.peg:hover b{color:var(--white)}
.peg.tuned b,.peg.tuned i,.peg.active b{color:var(--cyan-primary)}
.peg.active i{color:var(--white)}
.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;flex-shrink:0}
.status{display:flex;flex-direction:column;gap:8px;min-width:0}
.count{margin:0;font-size:14px;line-height:20px;font-weight:800;letter-spacing:4px;color:var(--cyan-primary)}
.reading{margin:0;font-family:var(--font-display);font-size:24px;line-height:32px;font-weight:900;color:var(--white)}
.reading.ok{color:var(--cyan-primary)}
.help{margin:0;font-size:13px;line-height:15px;font-weight:500;letter-spacing:1px;color:var(--grey)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
button{font-family:var(--font-display);font-size:16px;line-height:24px;font-weight:700;letter-spacing:-.4px;cursor:pointer;border-radius:12px;transition:box-shadow 180ms ease,background-color 180ms ease,color 180ms ease}
.btn-outline{min-height:48px;padding:0 24px;border:1.5px solid var(--cyan-primary);background:rgba(0,0,0,.24);color:var(--cyan-primary)}
.btn-purple{min-height:48px;padding:0 32px;border:0;background:var(--purple-secondary);color:var(--cyan-primary);box-shadow:0 0 10px rgba(122,31,217,.4)}
.btn-outline:hover{box-shadow:0 0 14px rgba(0,245,252,.7)}
.btn-purple:hover{box-shadow:0 0 10px rgba(122,31,217,.8)}
.icon-btn{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center}
.pill{min-height:44px;padding:0 18px;border:1.5px solid var(--purple-secondary);border-radius:100px;background:transparent;color:var(--cyan-primary)}
.pill[aria-pressed="true"]{background:var(--purple-secondary);box-shadow:0 0 10px rgba(122,31,217,.4)}
.pill:hover{box-shadow:0 0 10px rgba(122,31,217,.8)}
button:focus-visible{outline:2px solid var(--white);outline-offset:3px}
footer{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding-top:32px;padding-bottom:32px;background:#171717;border-top:1px solid var(--grey-dark)}
footer img{width:108px;height:auto;display:block}
.foot-r{margin-left:auto;display:flex;align-items:center;gap:12px;text-decoration:none;border-radius:8px;min-height:44px}
.foot-r span{font-size:13px;line-height:15px;font-weight:500;letter-spacing:1px;color:var(--grey);transition:color 180ms ease}
.foot-r:hover span{color:var(--white)}
.foot-r:focus-visible{outline:2px solid var(--white);outline-offset:3px}
@media (max-width:640px){
  footer{flex-direction:column;align-items:flex-start}
  .foot-r{margin-left:0}
}
[hidden]{display:none!important}
.rise{opacity:0;transform:translateY(22px);animation:rise 650ms cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.lit{animation:lit 1600ms ease-out 500ms both}
@keyframes lit{40%{text-shadow:0 0 24px rgba(0,245,252,.55)}100%{text-shadow:none}}
@media (max-width:1000px){
  .x{padding-left:48px;padding-right:48px}
  h1{font-size:64px;line-height:64px;letter-spacing:-2.5px}
  .band{padding-right:48px}
}
@media (max-width:640px){
  .x{padding-left:16px;padding-right:16px}
  h1{font-size:46px;line-height:48px;letter-spacing:-1.6px}
  .eyebrow{font-size:16px;line-height:20px;letter-spacing:1.5px}
  .sub{font-size:19px;line-height:27px}
  .band{max-height:240px;padding-right:16px}
  .pegs{width:72px}
  .choice button{padding:0 18px}
  .pill{padding:0 14px}
}
@media (max-height:820px){h1{font-size:64px;line-height:64px;letter-spacing:-2.5px}.sub{font-size:19px;line-height:27px}}
@media (max-height:680px){h1{font-size:46px;line-height:48px;letter-spacing:-1.6px}.eyebrow{font-size:16px;line-height:20px;letter-spacing:1.5px}.copy{gap:8px}}
@media (max-width:640px) and (max-height:740px){.sub{display:none}}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;animation:none}.lit{animation:none}.choice.waiting{animation:none;box-shadow:0 0 10px rgba(0,245,252,.4)}}
.d60{animation-delay:60ms}.d150{animation-delay:150ms}.d240{animation-delay:240ms}.d280{animation-delay:280ms}.d330{animation-delay:330ms}.d420{animation-delay:420ms}
.mt16{margin-top:16px}.self-start{align-self:flex-start}