:root{--paper:var(--panel);--gap:24px;--edge:clamp(16px, 4vw, 40px);--display:800 clamp(42px, 6.6vw, 96px)/.94 var(--sans);font:400 17px/1.55 var(--sans);color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{background:var(--paper);margin:0}a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:3px}.sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.wrap{width:min(1280px,100%);padding-inline:var(--edge);margin-inline:auto}.grid{column-gap:var(--gap);grid-template-columns:minmax(0,1fr);display:grid}.grid>*{grid-column:var(--col,1 / -1);min-width:0}.btn{height:48px;font:600 16px/1 var(--sans);white-space:nowrap;color:#fff;background:var(--device);border-radius:8px;align-items:center;gap:11px;padding:0 20px 0 17px;text-decoration:none;transition:background-color .15s;display:inline-flex;box-shadow:inset 0 1px #ffffff1f,0 1px #00000040,0 6px 14px -8px #1d223080}.btn:before{content:"";background:var(--led,var(--led-green));width:8px;height:8px;box-shadow:0 0 10px var(--led,var(--led-green));border-radius:50%}.btn:hover{background:#31353c}.btn:active{translate:0 1px}.btn.quiet{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-hi);background:0 0}.btn.quiet:hover{background:var(--panel-2)}.btn.live{--led:var(--led-yellow)}.btn.learn{--led:#3be7ff}.btn.small{gap:9px;height:38px;padding:0 15px 0 13px;font-size:15px}.logo{font:400 22px/1 var(--pixel);letter-spacing:.02em;text-decoration:none}.top{justify-content:space-between;align-items:center;height:76px;display:flex}.top nav{align-items:center;gap:28px;font-size:15px;font-weight:500;display:flex}.top nav a:not(.btn){color:var(--muted);text-decoration:none}.top nav a:not(.btn):hover{color:var(--text)}.top nav a:not(.btn){display:none}.hero{row-gap:28px;padding-block:40px 0}h1{font:var(--display);letter-spacing:-.028em;text-wrap:balance;margin:0;font-stretch:88%}.lead{max-width:40ch;margin:0 0 24px;font-size:18px;line-height:1.5}.actions{flex-wrap:wrap;gap:10px;display:flex}.need{color:var(--muted);margin:14px 0 0;font-size:14px}.stage{margin:28px 0 0}.lk-pads button:active{translate:0 1px}.lk-pads [data-s=dim]{background:color-mix(in srgb, var(--c) 34%, var(--off))}.lk-pads [data-s=sel]{background:color-mix(in srgb, var(--c) 72%, var(--off));animation:1.6s ease-in-out infinite alternate breathe}@keyframes breathe{0%{background:color-mix(in srgb, var(--c) 50%, var(--off))}}.lk-pads [data-s=beat]{background:color-mix(in srgb, #fff 9%, var(--off))}.lk-pads [data-s=on]{background:color-mix(in srgb, var(--c) 86%, var(--off))}.lk-pads [data-s=hit],.lk-pads [data-s=head]{background:var(--c);box-shadow:inset 0 0 0 1px #0000004d, 0 0 22px color-mix(in srgb, var(--c) 55%, transparent);transition:none}.lk-pads [data-s=head]{--c:#f1f3f5}.lk-ctl{grid-area:ctl;align-items:center;gap:8px;display:flex}.lk-play[aria-pressed=true]{color:var(--led-green)}.lk-rec[aria-pressed=true]{color:#ff4d5a}.lk-key[aria-pressed=true] svg{filter:drop-shadow(0 0 5px)}.lk-modes{background:#17191c;border-radius:9px;gap:3px;margin-left:auto;padding:3px;display:flex;box-shadow:inset 0 1px 2px #000}.lk-modes button{height:32px;font-size:var(--fs-s);border-radius:6px;padding:0 14px;font-weight:600;transition:background-color .15s,color .15s}.lk-modes button:hover{color:#e3e6ea}.lk-modes [aria-pressed=true]{color:#fff;background:#3a3f47;box-shadow:inset 0 1px #ffffff1a}.hint{color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:6px 24px;margin:18px 0 0;font-size:14px;display:flex}.hint p{max-width:70ch;margin:0}.hint kbd{font:500 12px/1 var(--mono);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--text);border-radius:4px;padding:3px 5px}.hint .typing{display:none}@media (hover:hover) and (pointer:fine){.hint .typing{display:block}}.sec{row-gap:32px;padding-block:96px 0}.sec:before{content:"";border-top:1px solid var(--line);grid-column:1/-1;margin-bottom:40px}h2{font:800 clamp(28px, 3.2vw, 40px)/1.02 var(--sans);letter-spacing:-.02em;text-wrap:balance;margin:0;font-stretch:88%}h3{font:700 21px/1.2 var(--sans);letter-spacing:-.01em;margin:0;font-stretch:94%}.sec p,.sec li,.sec dd{color:var(--muted)}.sec strong{color:var(--text);font-weight:600}.parts{margin:0}.parts>div{border-top:1px solid var(--line);gap:8px;padding-block:22px;display:grid}.parts>div:first-child{border-top:0;padding-top:0}.parts dt{align-items:center;gap:14px;display:flex}.parts svg{fill:none;width:34px;height:34px;stroke:var(--text);stroke-width:1.5px;stroke-linejoin:round;flex:none}.parts dd{max-width:56ch;margin:0}.way{flex-direction:column;align-items:flex-start;gap:16px;display:flex}.way p,.way ul,.way ol{margin:0}.way ul{gap:6px;padding-left:1.1em;display:grid}.way .btn{margin-top:4px}.steps-title{border-top:1px solid var(--line);width:100%;margin:12px 0 0;padding-top:22px;font-size:15px;font-weight:600}.steps{counter-reset:n;gap:14px;padding:0;font-size:15px;list-style:none;display:grid}.steps li{counter-increment:n;grid-template-columns:28px minmax(0,1fr);display:grid}.steps li:before{content:counter(n);font:600 13px/1.7 var(--mono);color:var(--text)}code{font:13px/1.5 var(--mono);color:var(--text);overflow-wrap:anywhere}.path{border-radius:var(--r-tile);background:var(--bg);grid-template-columns:64px minmax(0,1fr);margin-top:8px;padding:8px 10px;font-size:12.5px;display:grid}.path:first-of-type{margin-top:12px}.path b{font:500 12px/1.6 var(--sans);color:var(--muted)}.qa details{border-top:1px solid var(--line)}.qa details:last-child{border-bottom:1px solid var(--line)}.qa summary{cursor:pointer;justify-content:space-between;align-items:center;gap:24px;padding-block:18px;font-size:18px;font-weight:600;list-style:none;display:flex}.qa summary::-webkit-details-marker{display:none}.qa summary:after{content:"";background:linear-gradient(currentColor 0 0) 50%/14px 1.5px no-repeat,linear-gradient(currentColor 0 0) 50%/1.5px 14px no-repeat;flex:none;width:14px;height:14px;transition:rotate .2s}.qa details[open] summary:after{rotate:45deg}.qa summary:hover{color:var(--muted)}.qa details p{max-width:64ch;margin:-4px 0 22px}.shot{border-radius:var(--r-shell);background:var(--device);margin:0;padding:8px;box-shadow:inset 0 1px #ffffff1f,0 24px 40px -28px #1b2030b3}.shot img{border-radius:7px;width:100%;height:auto;display:block}.feat{gap:22px;display:grid}.feat+.feat{padding-top:40px}.feat-text{gap:8px;display:grid}.feat-text h3{flex-wrap:wrap;align-items:baseline;gap:10px;display:flex}.feat-text h3 small{font:500 14px/1 var(--mono);color:var(--muted);letter-spacing:0}.feat-text p,.feat-text ul{max-width:60ch;margin:0}.feat-text ul{gap:6px;padding-left:1.1em;display:grid}.feat .parts{margin-top:8px}.sec-lead{max-width:60ch;margin:0;font-size:18px}.lk-shot{max-width:340px;margin:0}.lk-shot div{background:#0c0e10;border-radius:8px;padding:7px;box-shadow:inset 0 0 0 1px #000,0 12px 22px -16px #1b2030b3}.lk-shot img{filter:drop-shadow(0 0 4px #9cc9d438);border-radius:3px;width:100%;height:auto;display:block}.lk-shot figcaption{color:var(--muted);margin-top:9px;font-size:13px}.feat-text .lk-shot{margin-top:12px}.outro{row-gap:28px;padding-top:96px}.outro h2{font:var(--display);letter-spacing:-.028em;font-size:clamp(36px,5vw,72px);font-stretch:88%}.outro .lead{color:var(--text)}footer{color:var(--muted);row-gap:12px;padding-block:96px 48px;font-size:13px}footer:before{content:"";border-top:1px solid var(--line);grid-column:1/-1;margin-bottom:28px}footer p{max-width:80ch;margin:0}footer .logo{color:var(--text);font-size:18px}@media (width>=700px){.lk{border-radius:20px;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);grid-template-areas:"screen encs""screen pads""ctl pads""keys keys";gap:20px 40px;padding:24px}.lk-pads{align-self:end;gap:9px}.lk-pads button{aspect-ratio:1.22;border-radius:6px}.lk-ctl{align-self:end}.lk-keys{height:clamp(84px,9vw,120px);margin-top:6px}}@media (width>=900px){.grid{grid-template-columns:repeat(12,minmax(0,1fr))}.top nav a:not(.btn){display:inline}.hero{padding-top:64px}.hero h1{--col:1 / span 8}.intro{--col:9 / span 4;align-self:end}.stage{margin-top:48px}.sec{padding-top:136px}.sec h2{--col:1 / span 4}.parts,.qa,.feat,.sec-lead,.sec>.lk-shot{--col:5 / span 8}.parts>div,.feat-text{column-gap:var(--gap);grid-template-columns:repeat(8,minmax(0,1fr))}.parts dt,.feat-text h3{grid-column:span 3;align-self:start}.parts dd,.feat-text>:not(h3,.lk-shot){grid-column:4/span 5}.feat-text>:not(h3,.lk-shot){grid-row:1/span 2}.feat-text h3{flex-direction:column;gap:6px}.feat-text .lk-shot{grid-area:2/1/auto/span 3;align-self:start}.way{--col:5 / span 4}.way+.way{--col:9 / span 4}.way.alone{--col:5 / span 6}.outro{padding-top:160px}.outro h2{--col:1 / span 8}footer{padding-top:120px}footer .logo{--col:1 / span 4}footer p{--col:5 / span 8}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}