:root{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#f2efe7;background:#11102f;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:#11102f;min-width:320px}.machine{max-width:1220px;margin:auto;padding:22px 28px 30px}.masthead{display:grid;grid-template-columns:185px 1fr auto;gap:22px;align-items:center;border-bottom:2px solid #f5a313;padding-bottom:14px}.logo{width:170px;height:auto;display:block}.tagline{margin:0;color:#bfc4d1;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.tagline a{color:#f5a313;text-decoration:none;border-bottom:1px solid transparent}.tagline a:hover,.tagline a:focus-visible{border-bottom-color:#f5a313;outline:none}.power-controls{display:flex;align-items:center;gap:7px}.indicator{width:10px;height:10px;border:1px solid #ee3a24;background:#531b25;box-shadow:0 0 0 2px #273b72}.indicator.on{background:#ee3a24}.control,.text-control{border:1px solid #7986aa;background:#18234a;color:#f2efe7;border-radius:3px;padding:8px 11px;text-transform:uppercase;letter-spacing:.05em;font:600 11px inherit}.control:hover,.text-control:hover{background:#273b72}.control.primary{background:#f5a313;color:#11102f;border-color:#f5a313}.control:disabled{opacity:.5;cursor:not-allowed}.intro-line{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:25px 0 20px}.intro-line h1{font:800 clamp(23px,4vw,46px)/.94 system-ui,sans-serif;letter-spacing:-.06em;margin:0;color:#f2efe7}.intro-line h1 i{font-style:normal;color:#f5a313}.intro-line p{max-width:265px;margin:0;color:#bfc4d1;font-size:12px;line-height:1.55}.editor-panel,.guide-panel{border:2px solid #273b72;background:#17183a;box-shadow:7px 7px #08081f}.panel-title,.instrument-rail,.guide-controls{display:flex;align-items:center;gap:15px}.panel-title{padding:10px 12px;border-bottom:1px solid #273b72;color:#f5a313;font-size:10px;letter-spacing:.09em}.panel-title>span:nth-child(2){color:#aeb3c5;text-transform:none;letter-spacing:0}.panel-title div{margin-left:auto;display:flex;gap:5px}.text-control{padding:4px 7px;font-size:9px}.typing-surface{min-height:150px;max-height:300px;overflow:auto;padding:17px 18px;background:repeating-linear-gradient(to bottom,#11102f 0,#11102f 31px,#273b7244 32px);font:18px/32px ui-monospace,SFMono-Regular,Consolas,monospace;color:#f2efe7;white-space:pre-wrap;word-break:break-word;border-left:4px solid transparent}.typing-surface:empty:before{content:attr(data-placeholder);color:#888ea6}.typing-surface:focus{outline:none;border-left-color:#f5a313}.instrument-rail{min-height:48px;border-top:1px solid #273b72;padding:8px 12px;flex-wrap:wrap}.instrument-rail span,.instrument-rail label{display:flex;gap:6px;align-items:baseline}.instrument-rail em{color:#aeb3c5;font-size:9px;font-style:normal;letter-spacing:.08em}.instrument-rail b{font-size:11px;color:#f2efe7}.instrument-rail label{margin-left:auto}.instrument-rail input{accent-color:#f5a313;width:95px}.instrument-rail meter{width:90px;height:10px;accent-color:#ee3a24}.keyboard-panel{margin:27px 0 22px;padding:14px;border:2px solid #273b72;background:#10112d}.keyboard-heading{display:flex;justify-content:space-between;color:#aeb3c5;font-size:9px;letter-spacing:.07em;margin:0 4px 11px}.keyboard-heading strong{color:#f5a313;font-weight:600}.keyboard{display:grid;gap:6px}.key-row{display:flex;justify-content:center;gap:6px}.visual-key{position:relative;min-width:58px;height:59px;border:1px solid #56658c;border-radius:5px;background:#f2efe7;color:#11102f;box-shadow:0 4px #08081f;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:transform .13s ease,opacity .4s ease,background .13s ease}.visual-key b{font-size:15px}.visual-key small{font-size:10px;color:#273b72;margin-top:3px}.visual-key.low{border-bottom:4px solid #273b72}.visual-key.mid{border-bottom:4px solid #f5a313}.visual-key.high{border-bottom:4px solid #ee3a24}.visual-key.space{min-width:350px}.visual-key.space,.visual-key.enter,.visual-key.backspace{background:#d8d5cb}.visual-key.held{transform:translateY(4px);box-shadow:0 0 #08081f;background:#f5a313;border-color:#f2efe7}.visual-key.held:after{content:"";position:absolute;bottom:3px;left:5px;right:5px;height:2px;background:#11102f;animation:sustain 2.5s linear forwards}.visual-key.releasing{opacity:.55}.visual-key.expected{outline:3px solid #f5a313;outline-offset:3px}.visual-key.expected:before{content:"NEXT";position:absolute;top:-18px;color:#f5a313;font-size:8px;font-weight:700;letter-spacing:.06em}.visual-key.complete{background:#cad4ca}.guide-panel{padding:14px;margin-top:0}.guide-heading{display:flex;justify-content:space-between;gap:20px;align-items:baseline}.guide-heading span{color:#f5a313;font-size:10px;letter-spacing:.1em}.guide-heading h2{font:700 19px/1.1 system-ui,sans-serif;letter-spacing:-.04em;margin:4px 0 0}.guide-heading p{font-size:11px;color:#bfc4d1;margin:0}.guide-controls{margin:16px 0 12px;flex-wrap:wrap}.guide-controls label{font-size:10px;color:#aeb3c5;letter-spacing:.07em}.guide-controls select{margin-left:6px;padding:7px;background:#11102f;border:1px solid #56658c;color:#f2efe7;font:11px inherit}.guide-controls b{margin-left:auto;color:#f5a313;font-size:12px}.guide-sequence{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid #273b72;padding-top:13px}.guide-sequence kbd{min-width:31px;padding:7px 5px;text-align:center;background:#f2efe7;color:#11102f;border-radius:3px;font-size:12px}.guide-sequence kbd.next{background:#f5a313;outline:2px solid #f2efe7}.guide-sequence kbd.complete{background:#a9c6a9;text-decoration:line-through}.status{text-align:center;color:#bfc4d1;font-size:11px;min-height:16px;margin:17px 0 0}button:focus-visible,select:focus-visible,.typing-surface:focus-visible,input:focus-visible{outline:2px solid #f5a313;outline-offset:2px}@keyframes sustain{0%{right:5px}to{right:80%}}@media(max-width:760px){.machine{padding:14px}.masthead{grid-template-columns:1fr auto}.tagline{display:none}.logo{width:145px}.intro-line{display:block;padding:20px 0}.intro-line p{margin-top:10px}.panel-title{align-items:start}.keyboard-heading span{display:none}.visual-key{min-width:clamp(29px,8.2vw,52px);height:53px}.visual-key b{font-size:12px}.visual-key small{font-size:8px}.visual-key.space{min-width:43vw}.visual-key.enter,.visual-key.backspace{min-width:48px}.instrument-rail label{margin-left:0}.guide-heading{display:block}.guide-heading p{margin-top:8px}.guide-controls b{margin-left:0}}@media(max-width:430px){.power-controls .control{padding:7px}.power-controls{gap:4px}.visual-key{min-width:27px;height:47px}.visual-key small{font-size:7px}.visual-key.flourish{display:none}.key-row,.keyboard{gap:3px}.visual-key.space{min-width:43vw}.instrument-rail meter{display:none}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}@media(max-width:760px){.masthead .tagline{display:block;grid-column:1 / -1;grid-row:2;font-size:9px}.masthead .power-controls{grid-column:2;grid-row:1}}:root,body{background:#0a033d}