:root:root[data-surface=device]{--bg:#141518;--bg-deep:#101113;--panel:#1f2124;--well:#17181b;--key:#2b2d32;--fg:#ece9e1;--muted:#aba79d;--hint:#9a968c;--line:#2e3035;--line-strong:#4a4d53;--led:#ff4a3d;--led-ink:#ff8a78;--led-soft:#ff4a3d40;--led-glow:#ff4a3d8c;--on-led:#fff;--play:#e0312b;--led-off:#3a3c41;--beat-on:#f1ddb0;--beat-sub:#b9ad93;--ad:#1a1b1e;--bevel:inset 0 1px 0 #ffffff0f;--shadow:0 8px 24px #00000073;--inset:inset 0 1px 3px #0009;--dev-body:#1b1c1f;--dev-lcd-ink:#ffb9a8;--dev-lcd-glow:#ff5a468c;--dev-lcd-label:#c49a8d;--dev-lcd-mark:#ff8a74;--dev-red:#ff4a3d;--dev-cream:#f1ddb0;--dev-ok:#8be0a4;--dev-ok-glow:#78dc968c;--dev-key-text:#d8d4c9;--f-body:"Pretendard Variable", "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;--f-label:"Space Grotesk", "Pretendard Variable", system-ui, sans-serif;--f-mono:"Space Grotesk", "Pretendard Variable", system-ui, sans-serif;--f-num:"Oxanium", "Pretendard Variable", system-ui, sans-serif;--f-lcd:"Oxanium", "Pretendard Variable", system-ui, sans-serif;color-scheme:dark}[data-surface=device] body{background-color:var(--dev-body);background-image:radial-gradient(#ffffff08 1px,#0000 1px),radial-gradient(#00000052 1px,#0000 1px);background-position:0 0,2px 3px;background-size:4px 4px,5px 5px}[data-surface=device] .site-header,[data-surface=device] .site-footer{border-color:var(--line);background:#101113d9}[data-surface=device] .tool__main.panel{box-shadow:none;background:0 0;border:0;padding:0}.rig{background-color:var(--dev-body);max-width:420px;color:var(--fg);background-image:radial-gradient(#ffffff09 1px,#0000 1px),radial-gradient(#00000059 1px,#0000 1px),linear-gradient(#26282c,#141518);background-position:0 0,2px 3px,0 0;background-size:4px 4px,5px 5px,100% 100%;border-radius:28px;margin-inline:auto;padding:14px 14px 18px;position:relative;box-shadow:0 18px 40px #0000008c,inset 0 1px #ffffff12}.rig__top{align-items:center;gap:8px;min-height:40px;padding:0 4px 10px;display:flex}.rig__name{font-family:var(--f-label);letter-spacing:.08em;color:#c9c5ba;font-size:.9375rem;font-weight:700}.rig__top .tag{font-family:var(--f-label);border:1px solid var(--line-strong);color:var(--muted);background:0 0;font-size:.75rem}.rig__top .key{margin-left:auto}.rig__top .key+.key{margin-left:0}.key{min-width:48px;min-height:44px;color:var(--dev-key-text);font:600 .875rem/1 var(--f-body);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:linear-gradient(#3b3e44,#25272b);border:0;border-radius:14px;justify-content:center;align-items:center;padding:0 12px;display:inline-flex;box-shadow:0 6px 10px #0009,inset 0 1px #ffffff24,inset 0 -2px #0006}.key:active{transform:translateY(1px);box-shadow:0 3px 6px #0009,inset 0 1px #ffffff1a,inset 0 -1px #0006}.key--sm{border-radius:10px;min-width:44px;min-height:36px;font-size:.8125rem}.key--big{min-height:58px;font:600 1.375rem/1 var(--f-label);letter-spacing:.02em;flex:1}.key--step{width:56px;min-height:46px;padding:0 0 .11em;font-size:1.5rem;font-weight:500}[data-meter-key-label]{position:relative;top:-.115em}.lcd-bezel{background:linear-gradient(#0e0f11,#1f2124);border-radius:20px;padding:8px;box-shadow:inset 0 2px 3px #000000e6,0 1px #ffffff14}.lcd{color:var(--dev-lcd-ink);background:radial-gradient(120% 90% at 50% 0,#2a1d1c,#140f0f);border-radius:14px;padding:12px 14px;box-shadow:inset 0 0 24px #000c}.lcd__labels,.lcd__row{grid-template-columns:minmax(0,1fr) 4.25rem 5rem;align-items:baseline;gap:8px;display:grid}.lcd__row{align-items:start}.lcd__meter,.lcd__sub{margin-top:.85rem}.lcd__labels{letter-spacing:.06em;color:var(--dev-lcd-label);font-size:.6875rem}.lcd__labels span{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.lcd__labels span:last-child,.lcd__sub{text-align:right}.lcd__labels span:nth-child(2),.lcd__meter{text-align:center}.lcd__tempo{flex-direction:column;min-width:0;display:flex}.lcd .readout--bpm,.is-playing .lcd .readout--bpm{height:auto;font-family:var(--f-lcd);letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--dev-lcd-ink);text-shadow:0 0 14px var(--dev-lcd-glow);font-size:4.5rem;font-weight:700;line-height:1;transition:none;display:block}.lcd__mark{min-height:1.2em;font-family:var(--f-label);color:var(--dev-lcd-mark);white-space:nowrap;text-overflow:ellipsis;min-width:0;margin-top:4px;font-size:.8125rem;line-height:1.2;display:block;overflow:hidden}.lcd__meter,.lcd__sub{font-family:var(--f-lcd);color:var(--dev-lcd-ink);text-shadow:0 0 10px #ff5a4673;white-space:nowrap;font-weight:700}.lcd__meter{font-variant-numeric:tabular-nums;font-size:1.875rem}.lcd__sub{font-family:var(--f-body);font-size:.9375rem;font-weight:700}.lcd .beats{--cols:4;grid-template-columns:repeat(var(--cols), minmax(0, 1fr));gap:8px;margin:12px 0 0;display:grid}.lcd .beat{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:0;border-radius:6px;flex-direction:column;gap:6px;height:auto;padding:0;display:flex}.beat__segs{height:var(--seg-h,96px);flex-direction:column-reverse;gap:3px;display:flex}.beat__segs i{background:#ffffff0d;border-radius:3px;flex:1;transition:background 50ms,box-shadow 50ms,opacity 50ms;box-shadow:inset 0 0 0 1px #ffffff0f}.beat[data-level=strong] .beat__segs i,.beat[data-level=medium] .beat__segs i:nth-child(-n+2),.beat[data-level=weak] .beat__segs i:first-child{box-shadow:none;opacity:.42;background:linear-gradient(#f6e7c8,#e7c98e)}.beat:first-child[data-level=strong] .beat__segs i,.beat:first-child[data-level=medium] .beat__segs i:nth-child(-n+2),.beat:first-child[data-level=weak] .beat__segs i:first-child{background:linear-gradient(#ff6a55,#e0312b)}.beat[data-level=mute] .beat__segs i:first-child{box-shadow:none;outline-offset:-1.5px;background:0 0;outline:1.5px dashed #ffc8b473}.beat.on[data-level=strong] .beat__segs i,.beat.on[data-level=medium] .beat__segs i:nth-child(-n+2),.beat.on[data-level=weak] .beat__segs i:first-child{opacity:1;box-shadow:0 0 8px #f0c88273}.beat:first-child.on[data-level=strong] .beat__segs i,.beat:first-child.on[data-level=medium] .beat__segs i:nth-child(-n+2),.beat:first-child.on[data-level=weak] .beat__segs i:first-child{box-shadow:0 0 10px #ff4a3da6}.beat__subs{gap:3px;height:3px;display:flex}.beat__subs b{background:#ffffff14;border-radius:2px;flex:1}.beat__subs b.on{background:var(--dev-cream);box-shadow:0 0 6px #f0c88299}.beat:first-child .beat__subs b:first-child.on{background:var(--dev-red);box-shadow:0 0 8px var(--dev-red)}.lcd .beat:focus-visible{outline:2px solid var(--dev-lcd-ink);outline-offset:3px}.rig__dial{justify-content:center;padding:22px 0 18px;display:flex;position:relative}.rig__dial .key--step{position:absolute;top:22px}.rig__dial .key--step[data-step="-1"]{left:4px}.rig__dial .key--step[data-step="1"]{right:4px}.dial{--dial:236px;width:var(--dial);height:var(--dial);touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;border-radius:50%;position:relative}.dial.is-turning{cursor:grabbing}.dial__ring{background:repeating-conic-gradient(#2e3035 0deg 4deg,#45484e 4deg 8deg);border-radius:50%;position:absolute;inset:0;box-shadow:0 18px 30px #000000bf,inset 0 2px 2px #ffffff1f}.dial__plate{transform:rotate(var(--turn,0deg));background:conic-gradient(from 20deg,#b9bbbe,#e9eaec,#9ea1a5,#d7d9dc,#a4a7ab,#edeef0,#b2b4b8,#dadcde,#b9bbbe);border-radius:50%;position:absolute;inset:22px;box-shadow:inset 0 2px 4px #fff9,inset 0 -6px 14px #00000059,0 0 0 3px #ff4a3dd9,0 0 18px #ff4a3d59}.dial__mark{background:#e0312b;border-radius:3px;width:6px;height:14px;margin-left:-3px;position:absolute;top:10px;left:50%;box-shadow:0 0 6px #ff4a3db3}.dial__hint{color:#00000061;pointer-events:none;font-size:1.375rem;position:absolute;top:50%;transform:translateY(-50%)}.dial__hint--l{left:34px}.dial__hint--r{right:34px}.dial__play{cursor:pointer;-webkit-tap-highlight-color:transparent;background:radial-gradient(circle at 40% 30%,#fff,#c9cbce 60%,#9fa2a6);border:0;border-radius:50%;justify-content:center;align-items:center;width:96px;height:96px;margin:-48px 0 0 -48px;display:flex;position:absolute;top:50%;left:50%;box-shadow:0 6px 12px #00000073,inset 0 -3px 6px #00000040}.dial__play:active{transform:translateY(1px);box-shadow:0 3px 6px #00000073,inset 0 -2px 4px #00000040}.dial__play:disabled{cursor:default;opacity:.7}.dial__play svg{fill:#e0312b;width:34px;height:34px}.dial__play .i-stop,.is-playing .dial__play .i-play{display:none}.is-playing .dial__play .i-stop{display:block}.dial__input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;inset:auto}.dial:has(.dial__input:focus-visible) .dial__ring,.dial__play:focus-visible{outline:3px solid var(--dev-lcd-ink);outline-offset:4px}.rig__keys{gap:12px;display:flex}.rig .met__foot{flex-wrap:wrap;margin-top:14px}.rig .met__foot[data-wide] .met__status{flex:100%}.rig .met__foot[data-timer] [data-timer-status]{flex:100%;min-height:1.5em;line-height:1.5}.rig .met__foot [data-full]{white-space:nowrap;margin-left:auto}.rig .met__status{color:var(--muted)}.rig .msg{color:var(--led-ink)}.rig .notice{margin:14px 0 0}@media (width<=380px){.lcd{padding-inline:10px}.lcd__labels,.lcd__row{grid-template-columns:minmax(0,1fr) 3.5rem 4.5rem;gap:6px}.lcd__meter{font-size:1.5rem}.lcd__sub{font-size:.8125rem}}@media (width<=480px){.rig{margin-inline:calc(var(--gutter) * -.5)}[data-surface=device] .page-title{margin:4px 0 0}[data-surface=device] .page-title h1{font-size:1.375rem}[data-surface=device] .tool{margin-top:10px}.lcd{--seg-h:66px}.lcd .beats[data-rows="2"],.lcd .beats[data-rows="3"]{row-gap:4px}.lcd .beats[data-rows="2"]{--seg-h:34px}.lcd .beats[data-rows="3"]{--seg-h:20px}.rig__dial{padding:14px 0 12px}.rig__dial .key--step{top:14px}.dial{--dial:204px}.dial__plate{inset:18px}.dial__hint--l{left:28px}.dial__hint--r{right:28px}.dial__play{width:84px;height:84px;margin:-42px 0 0 -42px}}html[data-stage=on] .rig{max-width:480px}.dial__play.btn--play,.dial__play.btn--ink{color:inherit;background:radial-gradient(circle at 40% 30%,#fff,#c9cbce 60%,#9fa2a6)}.tun__lcd{text-align:center;padding:12px 14px 14px}.tun__labels{font-family:var(--f-label);letter-spacing:.06em;color:var(--dev-lcd-label);justify-content:space-between;gap:8px;font-size:.6875rem;display:flex}.tun__head{justify-content:center;align-items:center;gap:10px;height:104px;margin-top:2px;display:flex}.lcd .tun__note{font-family:var(--f-lcd);letter-spacing:0;color:var(--dev-lcd-ink);text-shadow:0 0 16px var(--dev-lcd-glow);font-size:104px;font-weight:700;line-height:1}.lcd .tun__note[data-empty]{font-family:var(--f-body);color:#ffb9a838;text-shadow:none;font-size:80px;font-weight:200}.lcd .tun__note sub{font-family:var(--f-lcd);margin-left:2px;font-size:40%}.lcd .tun__solfege{min-height:0;font-family:var(--f-body);color:var(--dev-lcd-mark);align-self:flex-end;margin-bottom:14px;font-size:1rem;font-weight:700}.lcd .tun__dir{min-height:1.4em;font-family:var(--f-body);color:var(--dev-lcd-mark);font-size:1rem;font-weight:700;display:block}.lcd .tun__dir[data-dir=ok]{color:var(--dev-ok);text-shadow:0 0 10px var(--dev-ok-glow)}.lcd .meter{height:60px;margin:6px 6px 0}.lcd .meter__scale,.lcd .meter__tick{background:#ffb9a847}.lcd .meter__label{font-family:var(--f-lcd);color:var(--dev-lcd-label)}.lcd .meter__zone{opacity:1;background:#78dc961a;border:1px solid #78dc9680}.lcd .meter__needle{background:var(--dev-lcd-ink)}.lcd .meter[data-state=idle] .meter__needle{opacity:.3;box-shadow:none}.lcd .meter[data-state=off] .meter__needle{background:var(--dev-lcd-ink);box-shadow:0 0 10px var(--dev-lcd-glow)}.lcd .meter[data-state=ok] .meter__needle{background:var(--dev-ok);box-shadow:0 0 12px var(--dev-ok-glow)}.lcd .tun__nums{font-family:var(--f-lcd);font-variant-numeric:tabular-nums;color:var(--dev-lcd-label);justify-content:center;gap:16px;font-size:.875rem}.tun .led--on{background:var(--dev-ok);box-shadow:0 0 0 3px #78dc9633, 0 0 12px var(--dev-ok-glow)}.rig .mic-note{color:var(--muted);margin:14px 4px 10px}.rig .mic-note:before{background:var(--dev-ok)}.key.tun__mic,.key.tun__mic.btn--play,.key.tun__mic.btn--ink{width:100%;color:var(--dev-key-text);font:700 1.125rem/1 var(--f-body);letter-spacing:0;background:linear-gradient(#3b3e44,#25272b);gap:10px;display:flex}.key.tun__mic:before{content:"";background:#5b2b27;border-radius:50%;width:10px;height:10px}.key.tun__mic.btn--ink:before{background:var(--dev-red);box-shadow:0 0 10px var(--led-glow)}.rig .strings{--cols:4;grid-template-columns:repeat(var(--cols), minmax(0, 1fr));gap:8px;margin-top:14px;display:grid}.rig .strings[hidden]{display:none}.rig .strings button{min-width:0;min-height:52px;color:var(--dev-key-text);font-family:var(--f-num);background:linear-gradient(#3b3e44,#25272b);border:0;border-radius:12px;font-weight:700;box-shadow:0 5px 9px #0000008c,inset 0 1px #ffffff24,inset 0 -2px #0006}.rig .strings button small{font-family:var(--f-body);color:var(--muted);font-weight:500}.rig .strings button[data-active=true]{color:var(--dev-lcd-ink);box-shadow:0 5px 9px #0000008c, inset 0 1px 0 #ffffff24, inset 0 -3px 0 var(--dev-red)}.rig .strings button[data-ok=true]{color:var(--dev-ok);box-shadow:0 5px 9px #0000008c, inset 0 1px 0 #ffffff24, inset 0 -3px 0 var(--dev-ok)}.rig .strings button[aria-pressed=true]{color:var(--dev-cream);background:linear-gradient(#1d1f22,#2a2c31);box-shadow:inset 0 2px 5px #000000b3,0 1px #ffffff0f}.rig .strings button:focus-visible{outline:2px solid var(--dev-lcd-ink);outline-offset:2px}@media (width>=960px){html:not([data-stage=on]) .rig{margin-inline:0}html[data-surface=device]:not([data-stage=on]) .tool{grid-template-columns:420px minmax(var(--side), 400px);justify-content:center;gap:32px}}@media (width>=1280px){html[data-surface=device]:not([data-stage=on]) .tool:has(>.tool__rail){grid-template-columns:420px minmax(var(--side), 400px) var(--rail-w)}}html[data-stage=on] .tool__rail{display:none}.ramp-chip{border:1px solid var(--line-strong);max-width:100%;min-height:36px;color:var(--fg);font:600 .8125rem/1.3 var(--f-body);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#ffffff08;border-radius:10px;align-items:center;gap:8px;padding:0 10px 0 12px;display:inline-flex}.ramp-chip:hover{border-color:var(--dev-key-text)}.ramp-chip:focus-visible{outline:2px solid var(--dev-lcd-ink);outline-offset:2px}.ramp-chip__go{color:var(--muted);font-size:1.125rem;line-height:1}.ramp-chip--warn{border-color:var(--led-ink);color:var(--led-ink)}.ramp-sheet__fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.ramp-sheet__fields .field>span{min-height:2.6em}.ramp-sheet .hint:empty{display:none}.ramp-sheet .hint{color:var(--led-ink);margin:0}