:root{color-scheme:dark;--bg:#101416;--panel:#191e21;--line:#30373b;--text:#eef1ed;--muted:#99a4a7;--lime:#c5f277}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px}button,input{font:inherit}button{cursor:pointer;background:#252c30;border:1px solid #3a4348;border-radius:6px;color:var(--text);padding:10px 14px}button:hover:not(:disabled){border-color:var(--lime);color:var(--lime)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:3px}header{height:76px;border-bottom:1px solid var(--line);padding:0 32px;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:var(--text);font-size:18px;letter-spacing:2px;font-weight:750;display:flex;gap:12px;align-items:center}.logo{background:var(--lime);color:#141914;font-size:27px;border-radius:9px;width:36px;height:36px;text-align:center}.brand small{border-left:1px solid var(--line);padding-left:16px;margin-left:8px;font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted)}.header-note,footer{color:#859195;font-size:12px;letter-spacing:1.5px}main{max-width:1800px;margin:auto;padding:20px 32px 12px}form{display:flex;border:1px solid #3b4549;border-radius:8px;background:#1c2225;padding:6px;gap:12px;align-items:center}input{min-width:0}#url{flex:1;background:none;border:0;color:var(--text);padding:8px 0;outline-offset:0}.url-icon{color:var(--muted);padding-left:12px;font-size:22px}.primary{background:var(--lime);color:#182014;border-color:var(--lime);font-weight:650}.primary:hover:not(:disabled){color:#182014;background:#d7ffa0}#notice{font-size:14px;color:var(--muted);min-height:34px;padding:8px 0}.workspace{height:calc(100dvh - 218px);min-height:620px;display:grid;grid-template-rows:2fr 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}.upper{display:grid;grid-template-columns:minmax(0,1fr) 304px;min-height:0}.video-column{display:flex;flex-direction:column;min-height:0;background:#080b0d}.video-stage{position:relative;flex:1;min-height:200px}.video-stage iframe,#player{width:100%;height:100%;position:absolute;inset:0;border:0}#empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:radial-gradient(ellipse at 50% 60%,#1f292a,transparent 65%)}.empty-symbol{border:1px solid #526143;border-radius:50%;color:var(--lime);width:62px;height:62px;display:grid;place-items:center;font-size:22px;padding-left:4px}h1{font-size:25px;font-weight:500;margin:20px 0 0;letter-spacing:-1px}#empty p{font-size:14px;color:var(--muted);line-height:1.8;margin:12px 0 22px}#empty>span{font-size:11px;color:#718083;letter-spacing:3px}.transport{height:58px;display:flex;align-items:center;gap:15px;padding:8px 16px;border-top:1px solid var(--line);background:#171c1f}.transport button{padding:5px 10px;border:0}.transport time{font-family:monospace;font-size:13px;color:#c2cbcd}#seek{flex:1;accent-color:var(--lime);height:4px}aside{padding:22px;border-left:1px solid var(--line);overflow:auto}.panel-title{font-size:12px;font-weight:700;letter-spacing:1.7px;color:#abb6ba;display:flex;justify-content:space-between}.panel-title span{color:#687579}.speed-title{display:flex;justify-content:space-between;align-items:center;margin:16px 0}.speed-title label,.mark label{font-size:14px;color:#bac4c7}#rateText{font-size:32px;font-weight:500;font-variant-numeric:tabular-nums}#rateText span{font-size:21px;color:var(--lime);padding-left:3px}#rates{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}#rates button{font-size:14px;padding:8px}.selected{color:var(--lime);border-color:var(--lime);background:#2b3823}.muted{font-size:12px;color:var(--muted);line-height:1.6;margin:10px 0}.divider{height:1px;background:var(--line);margin:18px 0}.mark{display:flex;justify-content:space-between;align-items:center;margin:16px 0}.mark label{display:block;margin-bottom:4px}.stamp{font-family:monospace;padding:0;border:0;background:none;font-size:20px;color:var(--text)}.keybutton{font-size:12px;padding:8px}kbd{font-family:inherit;display:inline-block;min-width:20px;text-align:center;border:1px solid #505b60;border-radius:4px;color:#bec9cc;padding:1px 4px;font-size:12px}.loop{display:flex;justify-content:space-between;width:100%;font-size:14px;padding:12px}.loop.active{background:var(--lime);border-color:var(--lime);color:#152110}.loop.active kbd{color:#152110;border-color:#749545}.side-footer{font-size:12px;line-height:1.7;color:#829095;margin-top:18px}.pitch-section{border-top:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.pitch-header{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;height:56px}.pitch-header>div{display:flex;align-items:center;gap:16px}.pitch-sub{font-size:13px;color:var(--muted)}.pitch-actions button{font-size:13px;padding:8px 12px}#note{font-family:monospace;color:var(--lime);font-size:21px}.roll{position:relative;flex:1;min-height:120px;background:#13191c}canvas{width:100%;height:100%;display:block}#pitchEmpty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;font-size:14px;color:#c0cbcd;padding-left:50px;background:linear-gradient(90deg,transparent,#13191cbb 25%,#13191cbb 75%,transparent)}#pitchEmpty small{font-size:12px;color:var(--muted);margin-top:9px}.pitch-footer{display:flex;justify-content:space-between;padding:8px 18px;font-size:12px;color:var(--muted);gap:16px}footer{display:flex;justify-content:space-between;align-items:center;padding-top:13px;font-size:11px}footer span:last-child{letter-spacing:0;font-size:12px}@media(min-height:1000px){.workspace{min-height:760px}}@media(max-width:800px){header{padding:0 16px}.brand small,.header-note{display:none}main{padding:16px}.workspace{height:auto;min-height:0}.upper{grid-template-columns:1fr}.video-stage{height:45vw;min-height:240px;flex:auto}aside{border-left:0;border-top:1px solid var(--line);padding:18px}.side-footer{display:none}.pitch-section{height:300px}#rates{grid-template-columns:repeat(6,1fr)}.pitch-footer span:last-child{max-width:65%;text-align:right}.pitch-sub{display:none}footer{flex-direction:column;gap:12px}form{gap:6px}.primary{font-size:13px;padding:10px}#url{font-size:14px}.url-icon{display:none}}
.transpose-row{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:8px}.transpose-row label{font-size:14px}.transpose-row small{display:block;font-size:12px;color:var(--muted);margin-top:4px}.transpose-row>div{display:flex;align-items:center;gap:8px}.transpose-row button{padding:5px 9px;font-size:14px}.transpose-row strong{color:var(--lime);font-variant-numeric:tabular-nums;min-width:22px;text-align:center}.practice{width:100%;font-size:14px;margin-top:12px}.practice:focus{border-color:var(--lime)}#inputLevel{width:72px;height:12px;accent-color:var(--lime)}#pitchEmpty{padding:12px 20px 48px;text-align:center}.pitch-sub{font-size:12px}aside{padding:16px 20px}.divider{margin:12px 0}.mark{margin:12px 0}.speed-title{margin:10px 0}footer span:last-child{text-align:right}@media(max-width:550px){#inputLevel{width:40px}.pitch-header{padding:10px}.pitch-header>div{gap:8px}.pitch-actions button{padding:8px;font-size:12px}}
.workspace{height:calc(100dvh - 142px)}.roll{overflow-x:auto;overflow-y:hidden}.roll-inner{min-width:1176px;height:100%;display:grid;grid-template-rows:minmax(50px,1fr) 64px}#roll{min-height:0;touch-action:none;cursor:crosshair}#pianoKeys{display:grid;grid-template-columns:repeat(49,minmax(0,1fr));padding-left:34px;gap:1px;background:#101619;height:64px;touch-action:none}.piano-key{border:0;border-radius:0 0 3px 3px;padding:5px 0 4px;font-size:12px;font-weight:600;background:#e0e5e1;color:#1c2924;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;touch-action:none;user-select:none}.piano-key.black{background:#222d33;color:#edf2ee;height:47px;border:1px solid #4b595e}.piano-key small{font-size:12px;opacity:.75}.piano-key.held,.piano-key:hover:not(:disabled){background:#c5f277;color:#182018}.piano-key:focus-visible{outline-offset:-3px}#pitchEmpty{bottom:64px;padding:12px 20px}footer a{color:#9daeb1;font-size:11px;margin-left:10px}@media(max-width:800px){.workspace{height:auto}}
.tool-header{height:56px;max-width:1800px;margin:0 auto;padding:0 32px;border-bottom:1px solid var(--line)}.tool-header h1{font-size:20px;font-weight:650;letter-spacing:-.3px;margin:0}.workspace{height:calc(100dvh - 230px)}.usage-note{color:var(--muted);font-size:12px;padding:12px 0 0}.usage-note summary{cursor:pointer}.usage-note p{font-size:13px;line-height:1.7;max-width:900px}.usage-note a{color:var(--lime)}@media(max-width:800px){.tool-header{padding:0 16px}.workspace{height:auto}}
.midi-control{display:flex;align-items:center;gap:12px;min-width:0}.midi-control span{font-size:12px;color:var(--muted);max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.midi-control button{font-size:13px;padding:7px 10px;white-space:nowrap}@media(max-width:650px){.tool-header{height:auto;min-height:74px;align-items:flex-start;flex-direction:column;gap:8px;padding:10px 16px}.midi-control{width:100%;justify-content:space-between}.midi-control span{max-width:55%}}

/* V7: phone-only layout; desktop and tablet rules above stay in effect. */
.phone-only,.pitch-header>.phone-only,#rotateNotice{display:none}
html.phone .phone-only{display:block}
html.phone .tool-header{height:44px;min-height:44px;padding:6px max(12px,env(safe-area-inset-left));flex-direction:row;align-items:center}
html.phone .tool-header h1{font-size:18px}
html.phone .midi-control{width:auto}
html.phone .midi-control span{display:none}
html.phone main{padding:8px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left))}
html.phone form{gap:6px}
html.phone #url{font-size:16px}
html.phone button{min-height:44px}
html.phone .workspace{height:auto;min-height:0;display:flex;flex-direction:column}
html.phone .upper{display:grid;grid-template-columns:minmax(200px,1fr) 240px;min-height:290px}
html.phone .video-stage{min-height:200px;height:auto;flex:1}
html.phone .transport{flex-wrap:wrap;height:auto;gap:8px;padding:6px 8px}
html.phone .transport button{padding:5px 8px;font-size:14px}
html.phone #seek{flex-basis:100%;order:2;min-height:24px;margin:0}
html.phone aside{border-top:0;border-left:1px solid var(--line);padding:8px;max-height:310px;overflow-y:auto}
html.phone aside>.panel-title,html.phone aside>.muted,html.phone .transpose-row,html.phone .practice,html.phone .divider{display:none}
html.phone .speed-title{margin:0 0 4px}
html.phone #rateText{font-size:24px}
html.phone #rates{grid-template-columns:repeat(3,1fr);gap:4px}
html.phone #rates button{padding:6px;font-size:14px}
html.phone .mark{margin:6px 0}
html.phone .mark label{font-size:14px;margin:0}
html.phone .stamp{font-size:16px}
html.phone .keybutton{font-size:14px;padding:6px}
html.phone kbd{display:none}
html.phone .loop{padding:8px}
html.phone .mobile-help{margin:0;padding:8px 12px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
html.phone .pitch-section{height:112px;flex:none}
html.phone .pitch-header{height:32px;padding:6px 12px}
html.phone .pitch-sub,html.phone .pitch-actions,html.phone #roll,html.phone #pitchEmpty,html.phone .pitch-footer{display:none!important}
html.phone .roll{min-height:80px;height:80px;flex:none;touch-action:pan-x}
html.phone .roll-inner{min-width:1372px;display:block;height:80px}
html.phone #pianoKeys{height:80px;padding-left:0}
html.phone .piano-key{height:80px;min-width:27px}
html.phone .piano-key.black{height:62px}
html.phone footer{flex-direction:row;justify-content:flex-start;padding-top:8px}
html.phone footer>span:last-child{display:none}
html.phone #empty h1{font-size:20px;margin-top:10px}
html.phone #empty p{margin:8px 0}
html.phone .empty-symbol,html.phone #empty>span{display:none}
@media(orientation:portrait){
 html.phone body{overflow:hidden}
 html.phone body>.tool-header,html.phone body>main{display:none}
 html.phone #rotateNotice{display:flex;position:fixed;inset:0;padding:28px;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--bg)}
 html.phone #rotateNotice strong{color:var(--lime);font-size:22px}
 html.phone #rotateNotice h2{font-size:22px;margin:28px 0 12px}
 html.phone #rotateNotice p{font-size:16px;line-height:1.7;color:var(--muted)}
}

html.phone .pitch-section{height:132px}html.phone .pitch-header{height:52px}html.phone .key-navigation{display:flex;gap:6px}html.phone .key-navigation button{font-size:14px;padding:6px 10px}

/* V7.2 phone controls: outer hold-to-seek pads, full-width piano. */
html.phone .transport,html.phone .mobile-help{display:none}
html.phone .upper{grid-template-columns:64px minmax(200px,1fr) 184px 64px;min-height:300px;gap:0}
html.phone .video-stage{flex:1;height:auto;min-height:200px}
html.phone aside{max-height:none;padding:8px}
html.phone .seek-pad{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;height:100%;min-height:200px;padding:8px 2px;border:0;border-radius:0;background:#202a2e;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html.phone .seek-pad strong{font-size:20px;color:var(--lime)}
html.phone .seek-pad span{font-size:14px;writing-mode:vertical-rl;letter-spacing:3px}
html.phone .seek-pad.held{background:#3d522b;box-shadow:inset 0 0 0 2px var(--lime)}
html.phone .mobile-clock{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 0 2px;color:var(--muted);font-size:13px}
html.phone .mobile-clock time{font-family:monospace;font-size:23px;color:var(--lime);font-variant-numeric:tabular-nums}
html.phone #loadForm,html.phone #notice{margin-left:64px;margin-right:64px}
@media(max-width:560px) and (orientation:landscape){html.phone .upper{grid-template-columns:48px minmax(200px,1fr) 164px 48px}html.phone #loadForm,html.phone #notice{margin-left:48px;margin-right:48px}}

/* V7.4: seek pads span the video and piano rows. */
html.phone .workspace{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;grid-template-rows:auto 132px}
html.phone .upper{grid-column:2;grid-row:1;grid-template-columns:minmax(200px,1fr) 184px;min-width:0}
html.phone .pitch-section{grid-column:2;grid-row:2;min-width:0}
html.phone #rewindPad{grid-column:1;grid-row:1 / 3}
html.phone #forwardPad{grid-column:3;grid-row:1 / 3}
@media(max-width:560px) and (orientation:landscape){html.phone .workspace{grid-template-columns:48px minmax(0,1fr) 48px}html.phone .upper{grid-template-columns:minmax(200px,1fr) 164px}}

/* Keyboard-only piano area on every device. */
#roll,#pitchEmpty,.pitch-sub,.pitch-footer,#note{display:none!important}
.roll-inner{grid-template-rows:64px}
.roll{min-height:64px;flex:none}
.workspace{grid-template-rows:minmax(0,1fr) 122px}
.pitch-section{height:122px}
html.phone .pitch-section{height:132px}
html.phone .roll{height:80px;min-height:80px}

.vocal-tuner{margin-top:12px;padding:12px 8px;border:1px solid #526143;border-radius:8px;background:#0c1214;text-align:center}
.tuner-title{font-size:13px;font-weight:700;letter-spacing:.7px}.tuner-title span{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:4px}
.tuner-note{font-size:46px;font-weight:750;line-height:1.25;font-variant-numeric:tabular-nums;color:#f5c87a;margin:8px 0 2px}
.tuner-reading{min-height:34px;font-size:14px;line-height:1.4;color:#f5c87a}
.tuner-scale{position:relative;height:24px;margin:6px 4px 0;border-top:1px solid #607077;border-bottom:1px solid #607077;background:linear-gradient(90deg,#302b22, #18291a 50%,#302b22)}
.tuner-zone{position:absolute;left:40%;width:20%;height:100%;background:#c5f27730;border-left:1px solid #c5f277;border-right:1px solid #c5f277}
.tuner-needle{position:absolute;left:50%;width:3px;height:30px;top:-3px;background:#f8f8f0;transform:translateX(-50%);opacity:0}
.tuner-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin:4px 0 6px}.tuner-level{width:100%;height:10px;display:block;margin-bottom:8px}
.tuner-toggle{width:100%;font-size:14px}.tuner-status{font-size:12px;line-height:1.5;overflow-wrap:anywhere;margin:8px 0}.vocal-tuner small{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.vocal-tuner.in-tune .tuner-note,.vocal-tuner.in-tune .tuner-reading{color:var(--lime)}

.tuner-trace{display:block;width:100%;height:240px;margin:8px 0 4px;border:1px solid #405158;border-radius:5px}.tuner-trace-caption{font-size:12px;line-height:1.5;color:var(--muted);margin-bottom:8px}

/* V7.9: video/tuner, compact playback controls, then keyboard. */
html.phone .workspace{grid-template-rows:auto auto 132px}
html.phone .upper{grid-template-columns:minmax(200px,1fr) minmax(184px,32%);min-height:0;align-items:stretch}
html.phone .workspace>aside{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(128px,1fr) minmax(220px,2fr);gap:12px;border-left:0;border-top:1px solid var(--line);padding:8px 10px;min-width:0}
html.phone .pitch-section{grid-row:3}
html.phone #rewindPad,html.phone #forwardPad{grid-row:1 / 4}
html.phone .mobile-speed-group{align-self:center;min-width:0}
html.phone .mobile-loop-group{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center;min-width:0}
html.phone .mobile-loop-group .mark{margin:0;gap:6px}
html.phone .mobile-loop-group .loop{grid-column:1 / -1}
html.phone .tuner-dock{min-width:0;border-left:1px solid var(--line);padding:6px;background:#12191c}
html.phone .tuner-dock .mobile-clock{padding:0 0 4px;gap:2px}
html.phone .tuner-dock .mobile-clock time{font-size:20px}
html.phone .vocal-tuner{margin:0;padding:6px}
html.phone .tuner-title{font-size:12px}.tuner-title span{display:none}
html.phone .tuner-note{font-size:32px;margin:0;line-height:1.1}
html.phone .tuner-reading{font-size:12px;min-height:18px}
html.phone .tuner-trace{height:130px;margin:4px 0}
html.phone .tuner-trace-caption{font-size:12px;margin-bottom:4px}
html.phone .tuner-level{height:8px;margin-bottom:4px}
html.phone .tuner-status{margin:4px 0 0;font-size:12px;line-height:1.3}
html.phone .vocal-tuner>small{display:none}
@media(max-width:650px) and (orientation:landscape){html.phone .workspace>aside{gap:8px;padding:6px}.mobile-loop-group .mark>div{min-width:0}html.phone .mobile-loop-group .stamp{font-size:14px}html.phone .mobile-loop-group .keybutton{padding:5px}}

/* V7.10: paired A/time and B/loop rows, larger tuner trace. */
html.phone .mobile-loop-group .mark:first-child{grid-column:1;grid-row:1}
html.phone .mobile-loop-group .mark:nth-child(2){grid-column:2;grid-row:1}
html.phone .mobile-loop-group .mobile-clock{grid-column:1;grid-row:2;padding:0;gap:2px;align-self:center}
html.phone .mobile-loop-group .mobile-clock time{font-size:20px}
html.phone .mobile-loop-group .loop{grid-column:2;grid-row:2;align-self:center}
html.phone .vocal-tuner{height:320px;display:flex;flex-direction:column;gap:4px}
html.phone .tuner-note:empty,html.phone .tuner-reading:empty{display:none}
html.phone .tuner-trace{height:0;min-height:140px;flex:1 1 0;margin:0}
html.phone .tuner-title,html.phone .tuner-note,html.phone .tuner-reading,html.phone .tuner-level,html.phone .tuner-toggle,html.phone .tuner-status{flex-shrink:0}

.creator-credit{display:block;margin-top:7px;font-size:12px;line-height:1.5;font-weight:400;letter-spacing:0;color:var(--muted)}

.tool-header{display:grid;grid-template-columns:1fr auto 1fr;gap:12px}.tool-header .midi-control{justify-self:end}body:focus{outline:none}
.language-menu{position:relative;justify-self:center;font-size:14px;letter-spacing:0;z-index:20}.language-menu summary{cursor:pointer;list-style:none;padding:9px 12px;border:1px solid #526143;border-radius:6px;background:#202a24;white-space:nowrap}.language-menu summary::-webkit-details-marker{display:none}.language-options{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:200px;max-height:65dvh;overflow-y:auto;padding:6px;background:#192125;border:1px solid #526143;border-radius:8px;box-shadow:0 8px 24px #0008}.language-options button{display:block;width:100%;text-align:left;margin:2px 0;font-size:14px}.language-options button[aria-pressed=true]{color:var(--lime);border-color:var(--lime)}
html.phone .tool-header{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}html.phone .language-menu summary{padding:8px;font-size:13px}#notice:empty{min-height:8px;padding:0}
.tool-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);height:auto;min-height:56px;padding-top:6px;padding-bottom:6px}.tool-header h1{min-width:0}.midi-control button{white-space:normal}.midi-control span{flex-shrink:1}.language-menu summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
html.phone .tool-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);height:auto;min-height:44px}.language-options button{min-height:40px}