@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{--bg:#f7f6f2;--paper:#fff;--ink:#303b35;--muted:#858b83;--line:#e9ebe5;--orange:#df704a;--green:#48735c;--soft:#eff3ed}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans','Noto Sans KR',sans-serif;font-size:14px}button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{transition:background .18s,transform .18s}button:hover{filter:brightness(.97)}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #dca47d;outline-offset:4px}button:disabled{cursor:wait;opacity:.6}.header{height:94px;max-width:1200px;margin:auto;border-bottom:1px solid #e2e5dc;display:flex;justify-content:space-between;align-items:center;padding:0 22px}.brand{text-decoration:none;color:var(--ink);font-size:27px;font-weight:700;letter-spacing:-1.3px;display:flex;align-items:center}.brand>span:not(.brand-icon):not(.brand-dot){font-weight:400}.brand-dot{color:var(--orange)}.brand-icon{width:33px;height:33px;background:var(--orange);color:white;border-radius:10px;margin-right:11px;display:grid;place-items:center;font-size:30px;letter-spacing:1px;line-height:1;transform:rotate(180deg)}.header-right{display:flex;align-items:center;gap:27px}.local-label{font-size:11px;color:#787e76;display:flex;align-items:center;gap:8px}.tiny-dot{display:inline-block;width:6px;height:6px;border-radius:100%;background:#b7bdb2}.help-button{border:1.5px solid #d2d8cb;background:#ffffff;height:36px;padding:0 14px 0 8px;border-radius:9999px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-weight:600;font-size:13px;color:var(--ink);box-shadow:0 2px 8px rgba(48,59,53,0.06);transition:all .2s cubic-bezier(.16,1,.3,1)}.help-button .help-q{width:22px;height:22px;border-radius:50%;background:#edf1e8;color:var(--orange);display:grid;place-items:center;font-size:13px;font-weight:700;line-height:1;transition:background .2s,color .2s}.help-button:hover{border-color:var(--orange);color:var(--orange);background:#fffcf9;transform:translateY(-1px);box-shadow:0 4px 14px rgba(223,112,74,0.18)}.help-button:hover .help-q{background:var(--orange);color:#ffffff}main{max-width:1080px;margin:0 auto;padding:49px 22px 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--orange);margin:0 0 13px}h1{font-size:31px;letter-spacing:-1.6px;font-weight:600;margin:0 0 12px}.intro-copy{color:#85887e;font-size:13px;margin:0}.edition{font-size:9px;letter-spacing:1.7px;line-height:1.9;color:#90978b;text-align:right}.workspace{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(285px,1fr);gap:22px}.card{background:var(--paper);border:1px solid var(--line);border-radius:17px}.card-top{display:flex;justify-content:space-between;align-items:center}h2{font-size:13px;font-weight:600;margin:0;letter-spacing:-.3px}h2 .tiny-dot{margin-right:8px}.tuner{padding:24px 28px 0}.badge{font-size:10px;background:#f4f5f1;color:#858d7f;padding:6px 10px;border-radius:6px}.note-display{text-align:center;padding-top:29px}.small-label{font-size:11px;color:var(--muted);margin:0}.big-note{font-size:91px;font-weight:500;letter-spacing:-5px;height:116px;line-height:116px}.big-note sub{font-size:39px;letter-spacing:-1px;bottom:0;vertical-align:baseline;margin-left:4px;color:#768171}.frequency{font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:.5px}.frequency>span:last-child{font-size:12px;color:#939a90;margin-left:4px}.pitch-message{font-size:11px;margin:18px auto 0;color:var(--green);min-height:26px;background:#f1f5ef;border-radius:20px;width:fit-content;padding:6px 13px}.meter{max-width:440px;margin:28px auto 0}.meter-heading,.meter-numbers{display:flex;justify-content:space-between;font-size:10px;color:#93998f}.center-label{color:var(--green)}.meter-track{position:relative;height:40px;margin-top:10px}.in-tune-zone{position:absolute;left:45%;width:10%;height:40px;background:#edf3e9;border-radius:5px}.meter-ticks{position:absolute;left:0;right:0;top:12px;height:19px;background:repeating-linear-gradient(90deg,#d6dbd1 0,#d6dbd1 1px,transparent 1px,transparent 5%)}.meter-track:after{content:'';position:absolute;left:50%;height:32px;top:4px;width:1px;background:#7f9a74}.needle{position:absolute;left:50%;top:-3px;height:46px;width:3px;background:var(--orange);border-radius:2px;z-index:1;transition:left .13s ease-out}.needle:before{content:'';position:absolute;left:-4px;top:-5px;border:5px solid transparent;border-top:6px solid var(--orange)}.needle.idle{opacity:.25}.cent-label{text-align:center;font-size:11px;color:#8b9386;margin:13px 0 0}.cent-label strong{color:#485840;font-weight:500}.cent-label>span{font-size:9px;color:#a3a79f;margin-left:7px}.microphone-area{text-align:center;margin:24px 0 19px}.primary{border:none;color:white;background:var(--orange);padding:14px 27px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:500;box-shadow:0 4px 10px #df704a18;min-width:238px}.mic-hint{font-size:10px;color:#90978c;margin:11px 0}.text-button{border:none;background:none;font-size:10px;color:#7c8476;padding:5px}.text-button span{margin-left:5px}.input-row{border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:15px 0;font-size:9px;color:#90988a}.input-bars{display:flex;gap:3px;flex:1}.input-bars i{width:4px;height:10px;border-radius:1px;background:#e6ebdf}.input-bars i.active{background:#739365}.side-panel{display:flex;flex-direction:column;gap:18px}.practice{padding:24px}.mini-icon{font-size:19px;color:#8b9484}.section-description{font-size:10px;color:#92978d;margin:10px 0 0}.segmented{padding:4px;background:#f3f4ef;display:flex;border-radius:8px;margin:22px 0 25px}.segmented button{border:none;background:none;flex:1;padding:10px 3px;font-size:11px;color:#89917f;border-radius:5px}.segmented button.selected{background:white;box-shadow:0 1px 5px #2835200b;color:#3b4a36;font-weight:600}.target-heading{display:flex;justify-content:space-between;align-items:center;font-size:11px}.target-heading span{font-size:9px;color:#92998b}.note-select{display:flex;align-items:center;justify-content:space-between;border:1px solid #e5e9df;border-radius:8px;padding:10px;margin-top:11px}.note-select button{border:0;background:#f5f6f1;border-radius:6px;width:30px;height:30px;font-size:19px;color:#899480}.note-select select{border:none;background:transparent;appearance:none;text-align:center;font-size:25px;font-weight:500;cursor:pointer;width:110px}.listen-button{background:#f5f6f1;border:0;width:100%;border-radius:7px;padding:12px;display:flex;align-items:center;gap:9px;font-size:10px;margin-top:10px}.listen-button>span:first-child{font-size:18px}.listen-button>span:last-child{margin-left:auto;color:#8e9786;font-size:10px}.reference{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;margin-top:21px;font-size:10px}.reference label span{color:#a3aa9b;margin-left:5px}.reference select{font-size:10px;border:0;background:none;cursor:pointer}.tip-card{background:#edf0e5;border:1px solid #e4e8da;border-radius:15px;padding:24px;display:flex;gap:16px;flex:1}.tip-icon{color:#8f9f76;font-size:31px;line-height:1}.tip-card .eyebrow{color:#8b9978;font-size:8px;margin-bottom:10px;letter-spacing:1.6px}.tip-card h3{font-size:13px;font-weight:500;margin:0 0 10px}.tip-card p:last-child{font-size:10px;line-height:1.9;color:#8a947e;margin:0}.range-card{padding:25px 28px 16px;margin-top:22px}.range-legend{font-size:9px;color:#8b9283;display:flex;gap:6px;align-items:center}.range-legend i{display:inline-block;width:6px;height:6px;background:var(--orange);border-radius:50%}.target-legend{margin-left:12px}.keyboard-scroll{overflow-x:auto;padding:22px 1px 4px}.keyboard{height:101px;position:relative;display:flex;min-width:650px;gap:3px}.key{padding:0;border:1px solid #e2e6dd;border-radius:0 0 5px 5px;background:#fbfcf9;flex:1;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:11px;font-size:9px;color:#88917e;min-width:0}.key.black{position:absolute;height:60px;background:#465044;border:1px solid #394336;z-index:2;width:2.1%;color:#d7ddd0;font-size:8px;padding-bottom:9px}.key.current{background:var(--orange);border-color:var(--orange);color:white;box-shadow:0 3px 9px #df704a22}.key.target:before{content:'◇';position:absolute;top:8px;color:var(--orange);font-size:13px}.key.current.target:before{color:white}.keyboard-footer{display:flex;justify-content:space-between;margin-top:12px;color:#98a08f;font-size:9px}.keyboard-footer>span:nth-child(2){font-size:8px}.keyboard-footer i{font-style:normal;margin:0 7px}.keyboard-footer>span>span{margin:0 6px}.history-card{padding:24px 28px 15px;margin-top:22px}.chart-wrap{height:135px;margin-top:16px;position:relative}canvas{display:block;width:100%;height:100%}.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#9ba390;pointer-events:none}.chart-time{display:flex;justify-content:space-between;padding-left:35px;font-size:8px;color:#9ca393}footer{display:flex;align-items:center;gap:20px;color:#9a9f92;padding:29px 0 32px;font-size:9px}.footer-brand{font-weight:600;font-size:13px;letter-spacing:-.5px;color:#798571}footer p{margin:0}.privacy{margin-left:auto;font-size:9px}dialog.help-modal{position:fixed;inset:0;width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:0;border:none;background:var(--bg);color:var(--ink);box-sizing:border-box;overflow-y:auto;z-index:10000}dialog.help-modal::backdrop{background:rgba(30,42,33,0.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}dialog.help-modal[open]{display:block;animation:helpModalIn .26s cubic-bezier(.16,1,.3,1)}@keyframes helpModalIn{from{opacity:0;transform:scale(0.98) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}.help-container{max-width:1040px;margin:0 auto;padding:42px 24px 70px}.help-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:22px;border-bottom:1px solid #e0e4da}.help-badge{display:inline-block;font-size:10px;letter-spacing:2px;font-weight:700;color:var(--orange);background:#fdf1ec;padding:4px 10px;border-radius:6px;margin-bottom:10px}.help-header h2{font-size:28px;font-weight:700;letter-spacing:-1.2px;margin:0 0 8px;color:var(--ink)}.help-subtitle{font-size:14px;color:var(--muted);margin:0}.dialog-close{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:9999px;border:1px solid #d4d9ce;background:#ffffff;color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;transition:all .18s;box-shadow:0 2px 6px rgba(0,0,0,0.04);flex-shrink:0}.dialog-close svg{stroke:currentColor}.dialog-close:hover{background:#fffcf9;border-color:var(--orange);color:var(--orange);transform:scale(1.02)}.help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px}.help-card{background:#ffffff;border:1px solid #e2e6dd;border-radius:18px;padding:24px;display:flex;flex-direction:column;box-shadow:0 4px 18px rgba(48,59,53,0.04);transition:transform .2s,box-shadow .2s,border-color .2s}.help-card:hover{transform:translateY(-2px);border-color:#d1d8cb;box-shadow:0 8px 24px rgba(48,59,53,0.08)}.help-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.help-card-step{font-size:13px;font-weight:800;color:var(--orange);letter-spacing:.5px}.help-card-cat{font-size:10px;font-weight:600;color:#798373;background:#f1f4ee;padding:3px 8px;border-radius:4px}.help-visual{height:124px;border-radius:12px;background:#f4f6f1;border:1px solid #e1e7dc;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.help-card h3{font-size:17px;font-weight:700;margin:16px 0 8px;letter-spacing:-.5px;color:var(--ink)}.help-card p{font-size:13px;color:#556052;line-height:1.65;margin:0 0 12px}.help-points{list-style:none;padding:0;margin:auto 0 0;border-top:1px dashed #e6eae0;padding-top:12px;display:flex;flex-direction:column;gap:7px}.help-points li{position:relative;padding-left:14px;font-size:12px;color:#727b6f;line-height:1.55}.help-points li::before{content:'·';position:absolute;left:4px;top:-1px;font-weight:900;color:var(--orange);font-size:16px}.help-points strong{color:var(--ink);font-weight:600}.visual-mic{gap:20px;padding:0 18px}.visual-mic-circle{width:52px;height:52px;border-radius:50%;background:#ffffff;border:2px solid var(--orange);color:var(--orange);display:grid;place-items:center;position:relative;box-shadow:0 4px 12px rgba(223,112,74,0.15);flex-shrink:0}.wave-ring{position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(223,112,74,0.35);pointer-events:none}.wave-2{inset:-12px;border-color:rgba(223,112,74,0.18)}.visual-note-mock{text-align:left}.mock-tag{font-size:9px;color:#7c8874;display:block}.mock-note{font-size:32px;font-weight:700;line-height:1.1;color:var(--ink);letter-spacing:-1px}.mock-note sub{font-size:16px;color:#6a7663;margin-left:2px}.mock-hz{font-size:11px;color:var(--orange);font-weight:600}.visual-bars-mock{display:flex;align-items:flex-end;gap:4px;height:38px;margin-left:auto}.vbar{width:5px;border-radius:2px;background:#6fa05f}.vbar.b1{height:16px;opacity:.6}.vbar.b2{height:28px}.vbar.b3{height:38px;background:var(--orange)}.vbar.b4{height:26px}.vbar.b5{height:14px;opacity:.6}.gauge-mock{width:100%;max-width:320px;padding:0 12px}.gauge-header{display:flex;justify-content:space-between;font-size:10px;font-weight:600;color:#8c9586;margin-bottom:8px}.gauge-header .g-center{color:var(--green);font-weight:700}.gauge-bar{position:relative;height:28px;background:#e7ece2;border-radius:6px;overflow:hidden}.g-zone{position:absolute;left:42%;width:16%;top:0;bottom:0;background:#cbe0c5;border:1px solid #9fc496;border-radius:4px}.g-tick-bg{position:absolute;inset:0;background:repeating-linear-gradient(90deg,#c7cec1 0,#c7cec1 1px,transparent 1px,transparent 10%);opacity:.7}.g-needle{position:absolute;left:50%;top:-3px;bottom:-3px;width:3px;background:var(--orange);transform:translateX(-50%);border-radius:2px;z-index:2;box-shadow:0 0 6px rgba(223,112,74,0.6)}.g-needle::before{content:'';position:absolute;left:-4px;top:-4px;border:5px solid transparent;border-top:6px solid var(--orange)}.gauge-readout{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.cent-badge{background:#ebf3e8;color:#3b5f38;border:1px solid #bfdcbe;padding:2px 7px;border-radius:12px;font-size:10px;font-weight:700}.cent-desc{font-size:10px;color:#8a9384}.piano-mock{display:flex;flex-direction:column;align-items:center;width:100%;padding:0 16px;gap:8px}.piano-mode-tag{display:flex;gap:8px}.mode-pill{font-size:10px;font-weight:600;padding:3px 9px;border-radius:9999px;background:#e4e9df;color:#6e7968}.mode-pill.active{background:#ffffff;color:var(--ink);border:1px solid #ced6c8;box-shadow:0 1px 3px rgba(0,0,0,0.05)}.listen-pill{font-size:10px;font-weight:600;padding:3px 9px;border-radius:9999px;background:#fdf1ec;color:var(--orange);border:1px solid #f2c7b5}.keys-mock{display:flex;height:56px;width:260px;position:relative;background:#ffffff;border:1px solid #d4dbce;border-radius:0 0 6px 6px;overflow:hidden}.k-white{flex:1;border-right:1px solid #e1e6dc;font-size:9px;color:#879180;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;position:relative}.k-white.active{background:var(--orange);color:#ffffff;font-weight:700}.k-white.active .diamond{position:absolute;top:4px;font-size:9px;font-style:normal}.k-black{position:absolute;width:16px;height:34px;background:#394236;border-radius:0 0 3px 3px;z-index:2}.k-black:nth-child(2){left:24px}.k-black:nth-child(4){left:62px}.k-black:nth-child(7){left:138px}.k-black:nth-child(9){left:176px}.chart-mock{width:100%;padding:0 16px;position:relative}.chart-grid-mock{display:flex;flex-direction:column;gap:12px;margin-bottom:4px}.chart-line-guide{display:flex;align-items:center;gap:8px;font-size:9px;color:#929d89}.chart-line-guide.current-g{color:var(--orange);font-weight:700}.chart-line-guide .dash{flex:1;height:1px;background:repeating-linear-gradient(90deg,#d3daca 0,#d3daca 3px,transparent 3px,transparent 7px)}.chart-wave{position:absolute;left:45px;right:20px;top:4px;height:50px;width:calc(100% - 65px);pointer-events:none}.chart-labels{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#8d9585;margin-top:10px;padding-left:20px}.stable-tag{background:#eef3eb;color:#3b5f38;border:1px solid #c9d8c4;border-radius:4px;padding:1px 6px;font-size:9px;font-weight:600}.help-tips{margin-top:32px;background:#edf1e7;border:1px solid #d9dfd2;border-radius:16px;padding:24px}.tips-title{font-size:15px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:16px}.tips-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tip-item strong{display:block;font-size:13px;color:var(--ink);margin-bottom:5px}.tip-item p{font-size:12px;color:#636d5e;line-height:1.6;margin:0}.help-footer{margin-top:36px;display:flex;justify-content:center;gap:14px}.help-action-btn{padding:13px 26px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;border:none}.help-action-btn.primary{background:var(--orange);color:#ffffff;box-shadow:0 4px 14px rgba(223,112,74,0.25)}.help-action-btn.primary:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 6px 18px rgba(223,112,74,0.35)}.help-action-btn.secondary{background:#ffffff;border:1.5px solid #d4dacd;color:var(--ink)}.help-action-btn.secondary:hover{border-color:var(--orange);color:var(--orange);background:#fffcf9}body.demo .badge{background:#fff0df;color:#bc7544}body.active #live-dot{background:#729b62;box-shadow:0 0 0 3px #729b6217}
@media(min-width:1500px){main{padding-top:60px}.intro{margin-bottom:42px}}
@media(max-width:760px){.header{height:76px;margin:0 20px;padding:0}.brand{font-size:24px}.local-label{display:none}main{padding:32px 18px 0}.intro{margin-bottom:25px}.edition{display:none}h1{font-size:25px}.intro-copy{font-size:11px}.workspace{grid-template-columns:1fr;gap:16px}.tuner{padding:22px 22px 0}.side-panel{display:grid;grid-template-columns:1fr 1fr;gap:14px}.practice{padding:20px}.tip-card{padding:22px 17px;flex-direction:column;justify-content:center;gap:13px}.range-card,.history-card{padding:22px 18px 16px;margin-top:16px}.range-legend{font-size:8px}.target-legend{display:none}.keyboard-footer>span:nth-child(2){display:none}footer{flex-wrap:wrap;gap:12px}.privacy{margin-left:0;width:100%}.target-heading span{display:none}.reference{gap:5px}.segmented button{font-size:10px}.note-select select{width:65px}.listen-button{padding:9px;gap:5px}.listen-button>span:last-child{font-size:8px}.help-container{padding:26px 18px 50px}.help-header{flex-direction:column;gap:14px}.help-header h2{font-size:22px;letter-spacing:-.8px}.help-subtitle{font-size:12px}.help-grid{grid-template-columns:1fr;gap:16px;margin-top:22px}.tips-list{grid-template-columns:1fr;gap:14px}.help-footer{flex-direction:column-reverse;gap:10px}.help-action-btn{width:100%;text-align:center}}
@media(max-width:540px){.side-panel{grid-template-columns:1fr}.tip-card{flex-direction:row;justify-content:flex-start}.target-heading span{display:inline}.note-select select{width:110px}.intro-copy{font-size:10px}.range-legend{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}