:root{--ink:#212c48;--paper:#f3f5fa;--cream:#e4eaf4;--accent:#5269c7;--muted:#66708a;--line:#212c4829;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--paper);color:var(--ink);font-family:Apple SD Gothic Neo,Malgun Gothic,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer;border:0}:is(button:focus-visible,input:focus-visible){outline-offset:3px;outline:3px solid #4c82b8}.app-shell{min-height:100dvh;padding:max(18px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));background:var(--paper);grid-template-rows:auto auto minmax(0,1fr) auto;gap:16px;display:grid}.topbar{justify-content:space-between;align-items:start;gap:12px;display:flex}.eyebrow{color:var(--accent);letter-spacing:.16em;text-transform:uppercase;margin:0 0 5px;font-size:11px;font-weight:800}h1{letter-spacing:-.04em;margin:0;font:800 clamp(22px,6vw,36px)/1.08 Georgia,Noto Serif KR,serif}.subtitle{color:var(--muted);margin:7px 0 0;font-size:13px}.header-actions{gap:8px;display:flex}.language,.icon-button{border:1px solid var(--line);min-height:40px;color:var(--ink);background:#ffffffa3;border-radius:20px;padding:0 12px;font-size:12px;font-weight:800}.icon-button{width:40px;padding:0;font-size:21px}.control-panel{border:1px solid var(--line);background:#ffffff94;border-radius:18px;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;display:flex;box-shadow:0 12px 36px #48381c0d}.range-control,.bpm,.select-control{min-width:112px;color:var(--muted);letter-spacing:.02em;gap:4px;font-size:12px;font-weight:800;display:grid}.select-control select{border:1px solid var(--line);min-height:36px;color:var(--ink);background:#fff;border-radius:9px;padding:0 9px}input[type=range]{accent-color:var(--accent);width:100%;min-height:26px}.stepper{border:1px solid var(--line);min-height:44px;color:var(--muted);border-radius:12px;align-items:center;gap:8px;padding:0 5px 0 9px;font-size:11px;font-weight:800;display:flex}.stepper button{background:var(--cream);width:30px;height:30px;color:var(--ink);border-radius:9px;font-size:18px}.stepper output{min-width:12px;color:var(--ink);text-align:center}.toggle{min-height:44px;color:var(--muted);background:0 0;border-radius:12px;align-items:center;gap:7px;padding:0 10px;font-size:12px;font-weight:750;display:flex}.toggle i{background:#bcc0c3;border-radius:9px;width:23px;height:13px;position:relative}.toggle i:after{content:"";background:#fff;border-radius:50%;width:9px;height:9px;transition:transform .16s;position:absolute;top:2px;left:2px}.toggle.on{color:#9c3b2b;background:#fbe4de}.toggle.on i{background:var(--accent)}.toggle.on i:after{transform:translate(10px)}.stage{grid-template-rows:auto minmax(320px,1fr) auto;gap:10px;min-height:0;padding:12px 0 2px;display:grid}.status-line{color:var(--muted);align-items:center;gap:7px;font-size:12px;font-weight:700;display:flex}.ready-dot,.recording-dot{background:#69a37b;border-radius:50%;width:8px;height:8px;display:inline-block}.recording-dot{background:var(--accent);animation:1s infinite alternate pulse}.sound-hint{color:#8a8172;text-align:right;margin-left:auto;font-weight:500}.keyboard-scroll{overscroll-behavior-x:contain;scrollbar-color:var(--cream) transparent;min-height:320px;padding:5px 3px 12px;overflow:auto hidden}.keyboard{-webkit-user-select:none;user-select:none;touch-action:none;background:#465879;border-radius:12px;width:100%;min-width:352px;height:100%;min-height:320px;padding:5px;position:relative;box-shadow:0 18px 26px #212c483d,inset 0 1px #ffffff38}.white-keys{height:100%;display:flex}.white-key{color:#7e786c;touch-action:none;background:linear-gradient(90deg,#fffef9,#f1eee4);border-bottom:7px solid #d5cdbd;border-right:1px solid #b9b2a5;border-radius:0 0 8px 8px;flex:1;min-width:44px;position:relative;box-shadow:inset 0 -2px 2px #51401f14}.white-key:first-child{border-radius:7px 0 8px 8px}.white-key:last-child{border-right:0;border-radius:0 7px 8px 8px}.white-key span{text-align:center;width:100%;font-size:clamp(10px,2vw,13px);font-weight:800;position:absolute;bottom:13px;left:0}.white-key.pressed{background:linear-gradient(90deg,#e6c8ae,#dcae8b);border-bottom-width:3px;transform:translateY(4px)}.black-key{z-index:2;color:#edf0f1;touch-action:none;background:linear-gradient(90deg,#202737,#35405a 55%,#202737);border-radius:0 0 7px 7px;width:8.5%;min-width:28px;max-width:58px;height:62%;position:absolute;top:5px;transform:translate(-50%);box-shadow:2px 5px 5px #0000005c}.black-key span{text-align:center;writing-mode:vertical-rl;width:100%;font-size:9px;font-weight:700;position:absolute;bottom:11px;left:0}.black-key.pressed{background:linear-gradient(90deg,#5269c7,#7588d7,#5269c7);height:60%}.keyboard-help{color:var(--muted);text-align:center;margin:0;font-size:12px}.transport{flex-wrap:wrap;align-items:center;gap:8px;min-height:50px;display:flex}.transport button{border:1px solid var(--line);min-height:44px;color:var(--ink);background:#fffdf7;border-radius:12px;padding:0 14px;font-size:13px;font-weight:800}.transport button:disabled{cursor:not-allowed;opacity:.42}.record-button{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}.record-button span{background:var(--accent);border-radius:50%;width:9px;height:9px;margin-right:6px;display:inline-block}.record-button.recording span{background:#ff927a;animation:.7s infinite alternate pulse}.install{color:#9c3b2b!important;border-color:#e8b9ad!important}.transport small{color:var(--muted);margin-left:auto;font-size:11px}@keyframes pulse{to{opacity:.35;transform:scale(.72)}}@media (min-width:760px){.app-shell{gap:24px;max-width:1240px;margin:0 auto;padding:34px clamp(28px,6vw,72px)}.keyboard{width:100%;min-height:390px}.white-key{min-width:0}.black-key{width:7%}.control-panel{justify-content:center}.bpm{min-width:150px}}@media (max-width:430px){.control-panel{gap:5px;padding:7px}.range-control{width:100%}.bpm{display:none}.toggle{padding:0 8px}.sound-hint{display:none}.transport small{text-align:center;width:100%;margin:0}}@media (orientation:landscape) and (max-height:540px) and (max-width:1024px){.app-shell{min-height:100dvh;padding:max(6px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));grid-template-rows:auto auto minmax(180px,1fr) auto;gap:7px}.topbar{align-items:center}.eyebrow,.subtitle,.keyboard-help,.sound-hint,.transport small{display:none}h1{font-size:20px;line-height:1.1}.language,.icon-button{min-height:36px}.control-panel{scrollbar-width:none;border-radius:12px;flex-wrap:nowrap;justify-content:flex-start;min-height:52px;padding:4px 6px;overflow-x:auto}.control-panel::-webkit-scrollbar{display:none}.range-control,.select-control{min-width:108px}.bpm{min-width:130px}.stage{grid-template-rows:auto minmax(180px,1fr);gap:4px;padding:0}.keyboard-scroll,.keyboard{min-height:180px}.keyboard-scroll{padding:2px 3px 5px}.keyboard{padding:4px}.black-key{top:4px}.transport{flex-wrap:nowrap;min-height:40px}.transport button{min-height:38px;padding:0 12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}