:root{--bg: #ffffff;--fg: #000000;--fg2: #6b6b6b;--border: #000000;--bg2: #f3f3f3;--outer: #e8e8e8;--r: 8px;--max: 460px;--font: "Be Vietnam Pro", system-ui, sans-serif;--top: 52px;--bot: calc(62px + env(safe-area-inset-bottom, 0px)) }*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font);background:var(--outer);color:var(--fg);-webkit-font-smoothing:antialiased}#root{height:100%;background:var(--outer)}button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit}ul{list-style:none}a{color:inherit}.app-shell{max-width:var(--max);margin:0 auto;min-height:100vh;position:relative;background:var(--bg);box-shadow:0 0 24px #0000001a}.app-main{padding-top:var(--top);padding-bottom:var(--bot);min-height:100vh}.top-bar{position:fixed;top:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--max);height:var(--top);background:var(--bg);border-bottom:2px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 14px;z-index:200}.top-brand{display:flex;align-items:center;gap:9px}.top-hub-link{color:var(--fg3);font-size:16px;text-decoration:none;padding:4px 6px 4px 0;line-height:1;opacity:.7;transition:opacity .15s}.top-hub-link:hover{opacity:1}.top-brand-logo{height:32px;width:32px;object-fit:contain;border-radius:4px}.top-brand-text{display:flex;flex-direction:column;line-height:1.15}.top-brand-title{font-size:14px;font-weight:700;letter-spacing:.06em}.top-brand-sub{font-size:11px;font-weight:500;color:var(--fg2);letter-spacing:.03em}.top-controls{display:flex;gap:6px}.top-select{border:2px solid var(--border);border-radius:99px;padding:3px 26px 3px 10px;font-size:12px;font-weight:700;font-family:var(--font);background:var(--bg);color:var(--fg);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}.tab-bar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:var(--max);height:var(--bot);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--bg);border-top:2px solid var(--border);display:flex;z-index:200}.tab-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;margin:5px 5px 12px;border:2px solid var(--fg);border-radius:12px;background:var(--bg);color:var(--fg);font-size:9px;font-weight:700;transition:background .12s,color .12s}.tab-btn.active{background:var(--fg);color:var(--bg)}.tab-label{font-size:9px}.ks-wrap{display:flex;flex-direction:column;align-items:center;padding:52px 20px 32px;min-height:100vh;text-align:center}.ks-logo{margin-bottom:16px}.ks-logo-img{width:72px;height:72px;object-fit:contain;border-radius:12px}.ks-title{font-size:36px;font-weight:700;letter-spacing:.1em}.ks-sub{font-size:13px;color:var(--fg2);margin-top:2px}.ks-hint{font-size:13px;color:var(--fg2);margin:24px 0 8px}.ks-group{width:100%;max-width:340px;margin-bottom:16px}.ks-select{width:100%;border:2px solid var(--border);border-radius:var(--r);padding:12px 36px 12px 14px;font-size:15px;font-weight:700;font-family:var(--font);background:var(--bg);color:var(--fg);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}.ks-flute-photo{margin:16px auto 8px;max-width:220px}.ks-flute-img{width:100%;height:auto;border-radius:16px;object-fit:contain}.ks-hub-link{display:block;margin-top:24px;font-size:13px;color:var(--fg3);text-decoration:none;opacity:.7}.ks-hub-link:hover{opacity:1}.ks-footer{margin-top:16px;font-size:11px;color:var(--fg2)}.app-footer{text-align:center;padding:20px 0 8px;font-size:11px}.app-footer a{color:var(--fg2);text-decoration:none;letter-spacing:.04em}.app-footer a:hover{text-decoration:underline}.lung-selector{display:flex;flex-direction:column;align-items:center;padding:24px 14px 8px}.lung-intro{font-size:14px;font-weight:600;color:var(--fg2);margin-bottom:16px;letter-spacing:.03em}.lung-container{position:relative;width:100%;max-width:300px}.lung-full-svg{width:100%;height:auto;display:block;animation:breathe 4s ease-in-out infinite}.lobe-outline{fill:none;transition:stroke-width .15s ease}.flute-hole{fill:var(--bg);stroke:var(--fg);stroke-width:1.5}.lung-click-areas{position:absolute;inset:0;display:flex}.lung-click{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:24px;background:none;border:none;cursor:pointer;transition:background .15s ease;border-radius:0}.lung-click:hover{background:#00000008}.lung-click:active{background:#00000012}.lung-click-left{border-radius:50% 0 0 50%}.lung-click-right{border-radius:0 50% 50% 0}.lung-label{font-size:16px;font-weight:700;letter-spacing:.05em}.lung-sublabel{font-size:11px;color:var(--fg2);font-weight:500}.lung-hint{font-size:12px;color:var(--fg2);margin-top:16px}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.page{padding:16px 14px}.page-title{font-size:22px;font-weight:700;margin-bottom:3px}.page-sub{font-size:12px;color:var(--fg2);margin-bottom:18px}.fingering-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}.fc-card{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid var(--border);border-radius:var(--r);padding:10px 8px 14px;transition:background .08s,transform .08s,box-shadow .08s;text-align:center;box-shadow:0 2px 6px #0000001a}.fc-card--active{background:#f0f0f0;transform:scale(.96);box-shadow:0 1px 2px #00000014}.fc-info{display:flex;flex-direction:column;gap:1px}.fc-notename{font-size:15px;font-weight:700}.fc-interval{font-size:10px;color:var(--fg2)}.fc-tip{font-size:9px;color:var(--fg2);margin-top:2px}.legend-card{border:2px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:16px}.legend-symbols{display:flex;gap:24px;justify-content:center;margin-bottom:16px}.legend-symbol-item{display:flex;flex-direction:column;align-items:center;gap:4px}.legend-symbol-label{font-size:12px;font-weight:600}.dot{border-radius:50%;border:2px solid var(--fg);flex-shrink:0;display:inline-block}.dot.filled{background:var(--fg)}.dot.open{background:var(--bg)}.dot.lg{width:28px;height:28px}.legend-diagram{display:flex;flex-direction:column;align-items:center;margin-bottom:12px;position:relative}.legend-ann{font-size:11px;font-weight:700}.legend-ann--top{margin-bottom:4px}.legend-diagram-row{display:flex;align-items:flex-start;gap:6px}.legend-ann-side{display:flex;align-items:center;gap:3px}.legend-left-col{display:flex;flex-direction:column;align-items:flex-end}.legend-thumb-label{display:flex;align-items:center;gap:4px;margin-top:12px}.legend-labels-row{display:flex;justify-content:center;gap:16px;margin-top:6px}.legend-chamber-label{font-size:11px;font-weight:700}.scale-row{margin-top:10px;font-size:13px;font-weight:600}.prac-card{border:2px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px}.prac-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.prac-label{font-weight:700;font-size:15px}.prac-val{font-weight:700;font-size:18px;margin-left:auto}.prac-desc{font-size:12px;color:var(--fg2);margin-bottom:10px}.tick-dot{width:10px;height:10px;border-radius:50%;background:var(--bg2);transition:.08s;margin-left:6px}.tick-dot.on{background:var(--fg)}.bpm-slider{width:100%;-webkit-appearance:none;appearance:none;height:5px;background:var(--bg2);border-radius:3px;outline:none;margin-bottom:12px}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--fg);cursor:pointer}.prac-btn{width:100%;border:2px solid var(--border);border-radius:99px;padding:9px;font-size:14px;font-weight:700;transition:.12s}.prac-btn:hover,.prac-btn.active{background:var(--fg);color:var(--bg)}.drone-error-inline{font-size:12px;font-weight:700;color:var(--fg);margin-bottom:8px}.drone-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}.drone-row--col{flex-direction:column;align-items:stretch}.drone-row-label{font-size:12px;font-weight:600;color:var(--fg2);min-width:70px}.drone-pills{display:flex;gap:6px}.drone-pill{font-size:12px;font-weight:600;padding:5px 14px;border-radius:99px;border:2px solid var(--border);background:var(--bg);color:var(--fg);cursor:pointer;transition:.12s}.drone-pill.active{background:var(--fg);color:var(--bg)}.drone-inst-desc{font-size:11px;color:var(--fg2);margin:0 0 12px}.drone-finetune-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.drone-finetune-val{font-size:13px;font-weight:700;color:var(--fg)}.drone-slider-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--fg2);margin-top:2px;margin-bottom:12px}.drone-credit{font-size:10px;color:var(--fg2);margin-top:10px;text-align:center}.drone-credit a{color:var(--fg2)}.video-embed{position:relative;width:100%;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#000}.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:none}.video-placeholder{width:100%;padding:32px 16px;border:2px dashed var(--fg2);border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--bg2)}.video-placeholder-text{font-size:13px;font-weight:600;color:var(--fg2)}.tips h3{font-size:14px;margin-bottom:8px}.tips ul{padding-left:16px;list-style:disc}.tips li{font-size:13px;color:var(--fg2);margin-bottom:4px}.info-card{border:2px solid var(--border);border-radius:var(--r);padding:14px;margin-bottom:10px}.info-card h3{font-size:14px;font-weight:700;margin-bottom:8px}.info-card p{font-size:13px;color:var(--fg2);margin-bottom:5px}.info-card ul{padding-left:16px;list-style:disc}.info-card li{font-size:13px;color:var(--fg2);margin-bottom:3px}.scale-display{font-size:15px;font-weight:700;color:var(--fg);margin:6px 0}.gen-options{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}.gen-option-group{display:flex;flex-direction:column;gap:7px}.gen-option-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}.gen-mode-desc{font-size:11px;color:var(--fg2);margin-top:2px}.gen-pills{display:flex;flex-wrap:wrap;gap:6px}.gen-pill{padding:6px 14px;font-size:13px;font-weight:600;border:1.5px solid var(--fg2);border-radius:99px;background:transparent;color:var(--fg2);cursor:pointer;transition:.12s}.gen-pill.active{background:var(--fg);border-color:var(--fg);color:var(--bg)}.gen-pill:active{opacity:.7}.generate-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;padding:13px 18px;margin-bottom:14px;background:var(--fg);border:2px solid var(--fg);border-radius:99px;cursor:pointer;text-align:center}.generate-btn:active{opacity:.7}.generate-btn-label{font-size:15px;font-weight:700;color:var(--bg)}.generate-btn-sub{font-size:11px;color:var(--bg);opacity:.75}.back-btn{font-size:13px;font-weight:600;color:var(--fg2);margin-bottom:12px;display:inline-block}.song-header{margin-bottom:14px}.song-detail-title{font-size:19px;font-weight:700}.song-detail-meta{font-size:11px;color:var(--fg2)}.controls-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}.ctrl-btn{border:2px solid var(--border);border-radius:99px;padding:6px 12px;font-weight:700;font-size:12px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:background .12s,color .12s}.ctrl-btn:hover,.ctrl-btn.active{background:var(--fg);color:var(--bg)}.tempo-slider-row{display:flex;align-items:center;gap:10px;padding:6px 0 2px}.tempo-slider-label{font-size:11px;font-weight:700;color:var(--fg2);white-space:nowrap}.tempo-slider{flex:1;height:4px;accent-color:var(--fg);cursor:pointer}.tempo-slider-bpm{font-size:11px;font-weight:700;color:var(--fg);white-space:nowrap;min-width:52px;text-align:right}.note-row{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0}.note-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 5px 10px;transition:background .08s,transform .08s;text-align:center;cursor:pointer;border-radius:var(--r)}.note-cell:hover{background:var(--bg2)}.note-cell.playing{background:var(--bg2);transform:scale(.96);box-shadow:0 2px 8px #00000026}.note-cell.bar-start{border-left:2px solid rgba(0,0,0,.18);margin-left:5px;padding-left:3px}.dual-note-cell{min-width:48px}.dual-notes-label{display:flex;gap:8px;justify-content:center}.dual-notename{font-size:9px;font-weight:600;color:var(--fg)}.dur-dots{display:flex;gap:3px;align-items:center;justify-content:center;margin-top:2px;min-height:8px}.dur-dot{width:6px;height:6px;border-radius:50%;background:var(--fg2);flex-shrink:0;transition:transform .15s,background .15s}.note-cell.playing .dur-dot{background:var(--fg);animation:dot-swell var(--bd, .5s) ease-in-out var(--del, 0ms) 1 both}@keyframes dot-swell{0%{transform:scale(1)}25%{transform:scale(2)}65%{transform:scale(1)}to{transform:scale(1)}}.note-legend{margin-top:10px}.note-hint{font-size:11px;color:var(--fg2);margin-bottom:6px}.dur-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.dur-legend-label{font-size:11px;font-weight:700;color:var(--fg2)}.dur-legend-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;color:var(--fg2)}.playlist-section{margin-top:16px}.playlist-section-title{font-size:11px;font-weight:700;color:var(--fg2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}.playlist-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:2px solid var(--border);border-radius:10px;margin-bottom:6px;cursor:pointer;transition:background .12s}.playlist-item:hover{background:var(--bg2)}.playlist-item-info{flex:1;min-width:0}.playlist-item-title{font-size:13px;font-weight:700}.playlist-item-meta{font-size:10px;color:var(--fg2);margin-top:1px}.playlist-item-del{padding:8px;color:var(--fg2);flex-shrink:0;display:flex;align-items:center}.playlist-item-del:hover{color:var(--fg)}.playlist-msg{font-size:11px;color:var(--fg);font-weight:700}