:root{color:#eceee6;font-synthesis:none;--muted:#91998f;--lime:#d7e998;background:#141716;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit}header,main,.bottom-line{width:min(1360px,100% - 96px);margin:auto}header{border-bottom:1px solid #303630;justify-content:space-between;align-items:center;height:94px;display:flex}.brand{color:inherit;letter-spacing:1px;align-items:center;gap:14px;font-family:Space Grotesk,sans-serif;font-size:22px;font-weight:700;text-decoration:none;display:flex}.brand-mark{background:var(--lime);color:#19231a;letter-spacing:-3px;border-radius:50%;place-items:center;width:37px;height:37px;padding-right:4px;font-size:28px;display:grid}.brand-caption{letter-spacing:2px;color:var(--muted);border-left:1px solid #485044;margin-left:8px;padding-left:20px;font:10px DM Sans,sans-serif}.live{letter-spacing:2px;color:var(--lime);align-items:center;gap:9px;font-size:10px;display:flex}i{background:var(--lime);border-radius:50%;width:6px;height:6px;display:inline-block}.intro{justify-content:space-between;align-items:center;gap:24px;padding:36px 0 30px;display:flex}.eyebrow{letter-spacing:2.5px;color:var(--muted);margin:0 0 13px;font-size:10px}h1{letter-spacing:-4px;margin:0;font-family:Space Grotesk,sans-serif;font-size:clamp(44px,5.4vw,76px);font-weight:500;line-height:1.05}h1 span{color:var(--lime)}.description{color:#aab0a6;margin:15px 0 0;font-size:12px;line-height:1.9}.entry{width:290px;padding-top:30px}.entry button{background:var(--lime);color:#1b281b;cursor:pointer;border:0;border-radius:5px;width:100%;padding:17px 10px;font-weight:700;transition:background .15s}.entry button:hover:not(:disabled){background:#e6ffb0}.entry button:disabled{color:#bac9a6;cursor:default;background:#30392c}.entry p{color:var(--muted);margin:11px 0 0;font-size:11px;line-height:1.7}.studio{background:#191e1c;border:1px solid #3b4438;border-radius:9px;height:clamp(350px,47vh,550px);position:relative;overflow:hidden}#scene{width:100%;height:100%}#scene canvas{touch-action:manipulation;width:100%;height:100%;display:block}.stage-top,.stage-bottom{pointer-events:none;letter-spacing:1.7px;color:#a2ae99;justify-content:space-between;font-size:9px;display:flex;position:absolute;left:25px;right:25px}.stage-top{top:22px}.stage-top i{width:4px;height:4px;margin-right:8px}.stage-bottom{color:#8b9884;font-size:8px;bottom:22px}#feedback{color:var(--lime);font-size:10px}.console{border-bottom:1px solid #303630;justify-content:space-between;align-items:center;gap:38px;padding:24px 0;display:flex}.pads{flex:1;gap:9px;max-width:780px;display:flex}.pads button{height:58px;color:var(--pad);cursor:pointer;touch-action:manipulation;background:#1d231e;border:1px solid #394135;border-radius:5px;flex:1;justify-content:center;align-items:center;gap:12px;transition:border-color .15s;display:flex}.pads button:hover{border-color:var(--pad)}kbd{color:#e5e8df;text-align:center;border:1px solid #4e5749;border-radius:4px;min-width:26px;padding:4px;font-family:Space Grotesk,sans-serif;font-size:13px}.pads button span{letter-spacing:1px;font-size:9px;font-weight:700}.pads button.hit{animation:.22s ease-out strike}@keyframes strike{0%{background:var(--pad);color:#141716;transform:translateY(2px)}to{background:#1d231e}}.volume{flex-shrink:0;width:165px}.volume label{letter-spacing:1.5px;color:#adb7a5;justify-content:space-between;margin-bottom:10px;font-size:9px;display:flex}.volume input{width:100%;accent-color:var(--lime);cursor:pointer;height:4px}footer{color:#91998f;justify-content:space-between;gap:18px;padding:12px 0 20px;font-size:10px;line-height:1.8;display:flex}footer b{color:#ced7c7;letter-spacing:1px;margin-right:10px;font-size:9px}.bottom-line{letter-spacing:2px;color:#626d5e;justify-content:space-between;padding:4px 0 22px;font-size:8px;display:flex}button:focus-visible,a:focus-visible,input:focus-visible{outline-offset:5px;outline:2px solid #d7e998}#failure{text-align:center;color:#ef9c7e;position:absolute;inset:40% 20px auto}@media (width>=1500px){.intro{padding:48px 0 36px}.description{font-size:14px}}@media (width<=850px){header,main,.bottom-line{width:calc(100% - 40px)}header{height:75px}.brand-caption{display:none}.intro{gap:20px;padding:27px 0}h1{letter-spacing:-2px}.entry{width:240px}.console{gap:20px}.pads button{flex-direction:column;gap:6px;height:68px}.volume{width:110px}footer{flex-direction:column;gap:0}footer p{margin:5px 0}.stage-top,.stage-bottom{left:15px;right:15px}}@media (width<=550px){header,main,.bottom-line{width:calc(100% - 28px)}.intro{flex-direction:column;align-items:flex-start;gap:18px}.intro>div:first-child{width:100%;position:relative}h1{font-size:52px}.description{font-size:11px}.entry{width:100%;padding-top:0}.entry button{padding:13px}.entry p{margin:7px 0 0;font-size:10px}.studio{height:350px}.stage-top span:last-child,.stage-bottom span:last-child{display:none}.console{flex-direction:column;gap:18px;padding:17px 0}.pads{gap:5px;width:100%}.pads button{height:63px}.pads button span{font-size:8px}.volume{align-items:center;gap:20px;width:100%;display:flex}.volume label{min-width:110px;margin:0}.volume input{flex:1}.bottom-line{letter-spacing:1px;font-size:7px}footer{font-size:9px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.pads{grid-template-columns:repeat(5,minmax(0,1fr));max-width:none;display:grid}.pads button{flex-wrap:wrap;gap:6px;height:70px}.pads button small{color:#c2c8bb;width:100%;font-size:10px}.console{align-items:center}.entry{width:310px}.studio{height:clamp(420px,52vh,620px)}@media (width<=550px){.pads{grid-template-columns:repeat(5,minmax(0,1fr))}.pads button{flex-direction:column;gap:4px;height:80px}.pads button span{letter-spacing:0;font-size:7px}.pads button small{font-size:9px}.entry{width:100%}.studio{height:360px}}.song-card{background:linear-gradient(120deg,#263125,#19211f);border:1px solid #43513b;border-radius:9px;justify-content:space-between;align-items:center;gap:24px;margin:0 0 24px;padding:24px 28px;display:flex}.song-card h2{letter-spacing:1px;margin:0;font:500 25px Space Grotesk,sans-serif}.song-card p{color:#bec8b6;margin:8px 0;font-size:12px;line-height:1.8}.song-card .eyebrow{color:var(--lime);font-size:9px}.song-controls{grid-template-columns:1fr;gap:8px;min-width:260px;display:grid}.song-controls button{cursor:pointer;background:var(--lime);color:#19231a;border:1px solid #53634a;border-radius:5px;padding:11px 18px;font-weight:700}.song-controls button+button{color:#c6d1bd;background:0 0;font-size:11px}.song-controls button:disabled{opacity:.45;cursor:default}.song-controls p{min-height:20px;margin:0;font-size:11px}.song-controls progress{width:100%;height:5px;accent-color:var(--lime)}@media (width<=650px){.song-card{flex-direction:column;align-items:stretch;gap:14px;padding:20px}.song-controls{min-width:0}.song-card h2{font-size:22px}}.entry button+button{color:#e3f0ce;background:#35452d;border:1px solid #667954;margin-top:9px}.music-level{color:#d6e4c9;grid-template-columns:1fr auto;gap:8px;margin:5px 0;font-size:12px;display:grid}.music-level input{width:100%;accent-color:var(--lime);grid-column:1/-1}#music-state{color:var(--lime);font-size:12px}
