:root{--bg:#05070d;--panel:#111421;--panel-2:#171b2b;--line:#a3aad121;--line-bright:#a9b1dc38;--text:#f4f5fb;--muted:#9da3bb;--teal:#54e7cf;--teal-dim:#54e7cf24;--danger:#ff554c}*{box-sizing:border-box}html,body{width:100%;min-height:100%;color:var(--text);overscroll-behavior:none;background:#020306;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0}button:focus-visible{outline-offset:2px;outline:2px solid #54e7cfd1}.app-shell{width:100%;height:100svh;min-height:100svh;padding:max(3px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));isolation:isolate;background:radial-gradient(circle at 58% -30%,#4a517d38,#0000 46%),linear-gradient(#0a0c15 0%,#05070d 43%,#020306 100%);grid-template-rows:clamp(72px,16.5vh,146px) clamp(54px,12.5vh,112px) minmax(0,1fr);display:grid}.topbar{contain:layout paint;border-bottom:1px solid #7d85b129;grid-template-columns:62px minmax(210px,1.7fr) minmax(128px,.75fr) minmax(150px,1fr) minmax(150px,1fr) repeat(4,minmax(72px,.57fr));align-items:stretch;gap:clamp(7px,.8vw,15px);min-width:0;padding:clamp(8px,1vw,16px) clamp(10px,1.2vw,22px);display:grid}.menu-button,.sound-selector,.metronome-card,.stepper-card,.action-button,.mode-actions button>span,.view-actions button>span,.nav-arrow{background:linear-gradient(145deg,#191c2cf0,#0c0e18f7);border:1px solid #8d95c417;box-shadow:0 7px 16px #0000004d,inset 0 1px #ffffff06}.menu-button{aspect-ratio:1;color:#b7bdd4;border-radius:14px;align-self:center;place-items:center;width:100%;max-height:82px;display:grid}.sound-selector{text-align:left;border-color:#7a53a957;border-radius:13px;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1vw,15px);min-width:0;padding:0 clamp(10px,1vw,17px);display:grid}.instrument-illustration{aspect-ratio:1;color:#c6a777;place-items:center;width:clamp(38px,4.2vw,60px);display:grid;transform:perspective(60px)rotateX(6deg)rotateY(-8deg)}.sound-copy{gap:clamp(2px,.5vh,7px);min-width:0;display:grid}.sound-copy small,.control-heading,.action-button>span:last-child,.mode-actions small,.view-actions small{color:var(--muted);letter-spacing:.02em;font-size:clamp(8px,.72vw,13px);font-weight:600}.sound-copy b{color:#f8f8fc;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(13px,1.25vw,22px);font-weight:550;overflow:hidden}.metronome-card,.stepper-card{border-radius:13px;min-width:0}.metronome-card{align-content:center;place-items:center;gap:clamp(5px,.8vh,12px);display:grid}.metronome-control{color:#aeb5cc;justify-content:center;align-items:center;gap:clamp(7px,.8vw,14px);display:flex}.toggle-switch{background:#303447;border-radius:999px;align-items:center;width:clamp(39px,4.1vw,67px);height:clamp(23px,2.35vw,37px);padding:3px;display:flex;box-shadow:inset 0 1px 5px #0000004d}.toggle-switch i{aspect-ratio:1;background:#cbd0cf;border-radius:50%;width:calc(50% - 1px);margin-left:0;transition:margin .18s,background .18s;box-shadow:0 2px 5px #0000006b}.metronome-card.selected .toggle-switch i{background:#f2f5f4;margin-left:calc(50% + 1px)}.metronome-card.selected .toggle-switch{background:#3dd6a4;box-shadow:inset 0 1px 5px #00000040,0 0 16px #3dd6a429}.stepper-card{text-align:center;place-content:center stretch;gap:clamp(5px,.65vh,9px);padding-inline:clamp(6px,.8vw,13px);display:grid}.stepper-card>div{grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(4px,.7vw,12px);display:grid}.stepper-card button{aspect-ratio:1;color:#c3c8dc;background:linear-gradient(145deg,#202338,#121421);border:1px solid #959dcc1f;border-radius:50%;place-items:center;width:clamp(28px,2.8vw,44px);display:grid}.stepper-card strong{font-size:clamp(20px,2vw,34px);font-weight:500;line-height:1}.action-button{color:#c0c6da;border-radius:13px;align-content:center;place-items:center;gap:clamp(5px,.8vh,12px);display:grid;position:relative}.action-button.record svg{color:var(--danger);stroke-width:2.5px}.action-button.record.selected{background:#ff4b4317}.action-button.record.selected svg{fill:var(--danger)}.action-button.connect{color:#d7ddd9}.action-button.connect>span:last-child{color:#56e9b8}.online-dot{aspect-ratio:1;background:#55dfa9;border-radius:50%;width:clamp(6px,.65vw,10px);position:absolute;top:10%;right:10%;box-shadow:0 0 9px #55dfa98c}.connect-count{align-items:center;gap:6px;display:flex}.connect-count b{font-size:clamp(14px,1.25vw,22px);font-weight:500}.performance-strip{contain:layout paint;background:linear-gradient(#090b14fa,#070910fa);border-bottom:1px solid #6a719721;grid-template-columns:auto minmax(130px,1fr) auto;align-items:center;gap:clamp(10px,2vw,34px);min-width:0;padding:clamp(5px,.9vh,12px) clamp(12px,3.2vw,60px);display:grid}.mode-actions,.view-actions{align-items:stretch;gap:clamp(7px,1vw,15px);height:100%;display:flex}.mode-actions button,.view-actions button{align-content:center;place-items:center;gap:clamp(2px,.45vh,6px);min-width:clamp(47px,4.5vw,74px);display:grid}.mode-actions button>span,.view-actions button>span{color:#aeb5ce;border-radius:10px;place-items:center;width:clamp(36px,3.8vw,59px);height:clamp(31px,4.2vh,51px);display:grid}.mode-actions button.selected>span,.view-actions button.selected>span{color:var(--teal);background:var(--teal-dim);border-color:#54e7cf61}.keyboard-navigator{grid-template-columns:auto minmax(80px,1fr) auto;align-items:center;gap:clamp(12px,2vw,28px);min-width:0;height:100%;display:grid}.nav-arrow{aspect-ratio:1;color:#929abd;border-radius:50%;place-items:center;width:clamp(38px,4.1vw,58px);display:grid}.keyboard-overview{background:#d9dae0;border-radius:4px;height:clamp(36px,7.4vh,76px);position:relative;overflow:hidden;box-shadow:0 5px 12px #00000057}.keyboard-overview-keys{background-color:#0000;background-image:repeating-linear-gradient(90deg,#0000 0 2.7%,#05070ce6 2.7% 4.15%,#0000 4.15% 7.15%),repeating-linear-gradient(90deg,#dbdce2 0 calc(2.38% - 1px),#5f626e calc(2.38% - 1px) 2.38%);background-position:0 0,0 0;background-repeat:repeat-x;background-size:16.66% 58%,100% 100%;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;position:absolute;inset:0}.viewport-window{background:#5ae6d81a;border:2px solid #68ebdc;border-radius:6px;min-width:20%;transition:left .1s linear,width .15s;position:absolute;top:-1px;bottom:-1px;box-shadow:0 0 12px #4ce3d37a,inset 0 0 10px #4ce3d324}.piano-stage{contain:strict;background:#030405;min-height:0;overflow:hidden;box-shadow:inset 0 8px 20px #000000b8}.piano-scroll{scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;width:100%;height:100%;overflow:auto hidden}.piano-scroll::-webkit-scrollbar{display:none}.piano-scroll.scroll-locked{overflow-x:hidden}.piano-board{width:calc(43px * var(--white-count) * var(--key-scale));-webkit-user-select:none;user-select:none;touch-action:none;height:100%;min-height:180px;margin-inline:auto;position:relative}.white-keys{display:flex;position:absolute;inset:0}.piano-key{touch-action:none;border:0;margin:0;padding:0;transition:filter 60ms,box-shadow 70ms,background 70ms}.piano-key.white{background:linear-gradient(90deg,#00000017,#0000 16% 77%,#00000014),linear-gradient(#f5f5f3 0%,#fbfbfa 60%,#e5e6e4 100%);border-bottom:7px solid #c8c9c7;border-right:1.5px solid #191b1e;border-radius:0 0 6px 6px;flex:1;position:relative;box-shadow:inset 0 -15px 23px #00000014}.piano-key.white:first-child{border-left:1px solid #25272a}.piano-key.white>span{color:#777875;pointer-events:none;font-size:clamp(12px,1.45vw,24px);font-weight:600;position:absolute;bottom:clamp(12px,3vh,28px);left:50%;transform:translate(-50%)}.piano-key.white.active{background:radial-gradient(circle at 50% 90%,#ffffffe0 0 3%,#0000 4%),linear-gradient(90deg,#07544f4d,#0000 18% 82%,#073e3c59),linear-gradient(#43baa9 0%,#82f0de 76%,#bff9ef 100%);box-shadow:inset 0 0 22px #2fffe873,0 0 16px #3ae9d761}.piano-key.white.active:after{content:"";aspect-ratio:1;background:#f6fffd;border-radius:50%;width:clamp(10px,1.4vw,22px);position:absolute;bottom:clamp(14px,3.6vh,34px);left:50%;transform:translate(-50%);box-shadow:0 0 18px #d8fff9}.black-keys{pointer-events:none;position:absolute;inset:0}.piano-key.black{z-index:3;pointer-events:auto;background:linear-gradient(90deg,#08090b 0%,#22252a 45%,#0a0b0e 100%);border:1px solid #020303;border-bottom-width:7px;border-radius:0 0 6px 6px;height:61%;position:absolute;top:0;box-shadow:0 7px 8px #0000008c,inset 1px 0 #ffffff1f,inset -1px 0 #ffffff0d}.piano-key.black.active{background:linear-gradient(#13191d 0%,#17292b 74%,#52d8ca 100%);box-shadow:0 0 15px #42e8d785,0 6px 8px #0000008c,inset 0 -18px 22px #48e7d852}.piano-key.white.split-point{border-left:3px solid var(--teal);box-shadow:inset 5px 0 10px #54e7cf1f,inset 0 -15px 23px #00000014}.piano-key.white.split-point:before{content:"SPLIT";z-index:1;color:#188b7c;letter-spacing:.08em;writing-mode:vertical-rl;font-size:8px;font-weight:800;position:absolute;top:8px;left:6px}.pulse{animation:.18s ease-out metroPulse}@keyframes metroPulse{0%{box-shadow:0 0 #54e7cf8c}to{box-shadow:0 0 0 12px #54e7cf00}}.sheet-backdrop{z-index:40;opacity:0;pointer-events:none;background:#00000094;width:100%;height:100%;transition:opacity .2s;position:fixed;inset:0}.sheet-backdrop.open{opacity:1;pointer-events:auto}.settings-sheet{z-index:50;border:1px solid var(--line-bright);width:min(410px,52vw);color:var(--text);background:linear-gradient(155deg,#171a29,#0d101a);border-radius:20px;padding:20px;transition:transform .25s cubic-bezier(.2,.8,.2,1);position:fixed;top:8px;bottom:8px;right:8px;overflow-y:auto;transform:translate(calc(100% + 20px));box-shadow:-24px 0 70px #0000007a}.settings-sheet.open{transform:translate(0)}.sheet-handle{display:none}.sheet-title-row{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.sheet-title-row h2{margin:2px 0 0}.eyebrow{color:var(--teal);letter-spacing:.16em;margin:0;font-size:10px;font-weight:800}.icon-button{border:1px solid var(--line);background:var(--panel-2);border-radius:50%;width:38px;height:38px}.settings-group{border-bottom:1px solid var(--line);padding:14px 0}.settings-group label{justify-content:space-between;gap:12px;margin-bottom:10px;display:flex}.settings-group input[type=range]{width:100%;accent-color:var(--teal)}.setting-toggle{border:1px solid var(--line);text-align:left;background:var(--panel-2);border-radius:14px;justify-content:space-between;align-items:center;gap:14px;width:100%;margin-top:14px;padding:13px;display:flex}.setting-toggle>span:first-child{gap:3px;display:grid}.setting-toggle small,.sound-row small,.sheet-note,.empty-state{color:var(--muted)}.switch{background:#35394a;border-radius:20px;flex:none;width:42px;height:24px;position:relative}.switch:after{content:"";background:#a9afbc;border-radius:50%;width:16px;height:16px;transition:left .2s;position:absolute;top:4px;left:4px}.setting-toggle.selected .switch{background:#54e7cf57}.setting-toggle.selected .switch:after{background:var(--teal);left:22px}.settings-tip,.sheet-note{background:#54e7cf0d;border:1px solid #54e7cf1f;border-radius:14px;gap:5px;margin-top:15px;padding:13px;display:grid}.sound-list,.record-actions,.record-result{gap:8px;display:grid}.sound-row{border:1px solid var(--line);text-align:left;background:var(--panel-2);border-radius:13px;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;width:100%;padding:11px;display:grid}.sound-row.selected{background:var(--teal-dim);border-color:#54e7cf6b}.sound-row>span:nth-child(2){gap:2px;display:grid}.sound-icon{background:#ffffff0d;border-radius:9px;place-items:center;width:38px;height:38px;display:grid}.song-row{min-height:62px}.song-row.playing .sound-icon{color:var(--teal);animation:1s ease-in-out infinite songBeat}.song-play-icon{color:var(--teal);font-size:13px}@keyframes songBeat{50%{opacity:.45}}.metronome-power{border:1px solid var(--line);background:var(--panel-2);border-radius:14px;width:100%;min-height:46px}.metronome-power.selected{color:var(--teal);background:var(--teal-dim);border-color:#54e7cf6b}.bpm-display{text-align:center;padding:18px 0 5px;font-size:clamp(48px,8vw,78px);font-weight:700}.bpm-display small{color:var(--muted);margin-left:8px;font-size:12px}.bpm-presets{grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px;display:grid}.bpm-presets button{border:1px solid var(--line);background:var(--panel-2);border-radius:10px;min-height:38px}.bpm-presets button.selected{border-color:var(--teal);color:#07100f;background:var(--teal);font-weight:800}.primary-action,.danger-action,.secondary-action{border:1px solid var(--line);min-height:44px;color:inherit;background:var(--panel-2);border-radius:13px;justify-content:center;align-items:center;padding:0 15px;text-decoration:none;display:flex}.primary-action{border-color:var(--teal);color:#06110f;background:var(--teal);font-weight:800}.danger-action{color:#ff817a;background:#ff554c1f;border-color:#ff554c66;font-weight:800}.full-width{width:100%;margin-top:14px}.record-display{border:1px solid var(--line);background:#ffffff05;border-radius:16px;place-content:center;place-items:center;gap:7px;min-height:150px;display:grid}.record-display strong{letter-spacing:.04em;font-size:42px}.record-display small{color:var(--muted)}.record-dot{background:#595e6d;border-radius:50%;width:14px;height:14px}.record-display.recording .record-dot{background:var(--danger);animation:1s infinite recBlink;box-shadow:0 0 16px #ff554c99}@keyframes recBlink{50%{opacity:.28}}.record-actions,.record-result{margin-top:12px}.record-result audio,.download-link{width:100%}.empty-state{border:1px dashed var(--line);border-radius:14px;gap:6px;padding:19px;display:grid}.empty-state b{color:var(--text)}.midi-list{margin-top:12px}@media (max-width:1000px) and (orientation:landscape){.topbar{grid-template-columns:48px minmax(145px,1.6fr) 82px 110px 110px repeat(4,58px);gap:7px;padding:7px 9px}.performance-strip{gap:12px;padding-inline:14px}}@media (max-width:740px) and (orientation:landscape){.app-shell{grid-template-rows:70px 53px minmax(0,1fr)}.topbar{grid-template-columns:42px minmax(118px,1.45fr) 68px 86px 86px repeat(4,45px);gap:4px;padding:6px}.sound-selector{gap:5px;padding-inline:7px}.instrument-illustration{width:30px}.instrument-illustration svg{width:27px}.control-heading,.sound-copy small,.action-button>span:last-child{font-size:7px}.sound-copy b{font-size:11px}.metronome-control{gap:4px}.metronome-control>svg{width:21px}.toggle-switch{width:33px;height:20px;padding:2px}.stepper-card{padding-inline:3px}.stepper-card>div{gap:2px}.stepper-card button{width:24px}.stepper-card button svg{width:17px}.stepper-card strong{font-size:17px}.action-button{gap:2px}.action-button svg{width:22px}.performance-strip{gap:6px;padding:4px 7px}.mode-actions,.view-actions{gap:3px}.mode-actions button,.view-actions button{min-width:40px}.mode-actions button>span,.view-actions button>span{width:34px;height:29px}.mode-actions small,.view-actions small{font-size:7px}.keyboard-navigator{gap:6px}.nav-arrow{width:32px}.keyboard-overview{height:34px}.piano-board{width:calc(39px * var(--white-count) * var(--key-scale))}}@media (orientation:portrait) and (max-width:680px){body:after{content:"↻\a หมุนเครื่องเป็นแนวนอน\a เพื่อเล่นเปียโน";white-space:pre;z-index:100;text-align:center;color:#e8ebf4;background:radial-gradient(circle at 50% 40%,#161b2b,#070910 55%);place-content:center;font-size:17px;line-height:2;display:grid;position:fixed;inset:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}