:root{--green:#67ff55;--yellow:#ffd33d;--blue:#2f85ff;--red:#ff3434;--text:#f7f9fb;--line:rgba(255,255,255,.16)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#000;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;overflow-x:hidden}body{background:radial-gradient(circle at 20% 0%,rgba(103,255,85,.10),transparent 25%),#000}.app{min-height:100vh;padding:12px;display:flex;flex-direction:column;gap:10px}.top{display:grid;grid-template-columns:210px 1fr 82px 90px 66px 66px 66px 66px;gap:8px;align-items:center}.brand b{font-size:22px;font-weight:950;white-space:nowrap}.brand .g{color:var(--green)}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#dce7ee;font-weight:950}select,button{height:54px;border-radius:14px;border:2px solid rgba(255,255,255,.7);background:#303030;color:#fff;font-size:18px;font-weight:900;padding:0 10px}button{background:#080808;cursor:pointer}button.green{background:var(--green);color:#061006;border-color:var(--green)}button.red{background:#3b0b0b;border-color:#7a2020}.recOn{background:var(--red)!important;border-color:var(--red)!important;color:white!important}.panel{border:1px solid var(--line);border-radius:16px;background:rgba(8,13,18,.92);padding:10px}.keyBar{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.keyBar b,.patterns b{color:var(--green);font-size:18px;margin-right:4px}.kbtn,.pbtn{min-width:48px;height:42px;border-radius:12px;border:1px solid var(--line);background:#080d12;color:#fff;font-size:18px;font-weight:950;cursor:pointer}.kbtn.active,.pbtn.active{background:var(--green);color:#061006;border-color:var(--green)}.boardCard{flex:1;min-height:0;border:1px solid var(--line);border-radius:20px;background:#060b10;padding:10px;display:flex;flex-direction:column}.title{text-align:center;margin:2px 0 6px}.title h1{font-size:28px;line-height:1;margin:0;font-weight:950}.title p{font-size:13px;color:var(--green);font-weight:950;letter-spacing:4px;margin:5px 0 0}.svgWrap{flex:1;min-height:330px;display:flex;align-items:center;justify-content:center;overflow:auto}.fretSvg{width:100%;min-width:1040px;height:auto;display:block}.bottom{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:10px}.patterns{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.liveBox{text-align:center}.note{font-size:54px;line-height:1;color:var(--yellow);font-weight:950}.freq{font-size:13px;color:#dbe3ea;margin-top:2px}.meter{height:10px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden;margin-top:8px}.meter span{height:100%;width:0%;display:block;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red))}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.stat b{display:block;font-size:24px}.stat small{color:#aeb8c2;font-weight:800}.ok{color:var(--green)}.bad{color:var(--red)}.pct{color:var(--yellow)}.scaleInfo{display:flex;align-items:center;justify-content:center;text-align:center;color:#dce7ee;font-weight:850;line-height:1.5;font-size:14px}.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;z-index:20;padding:18px}.result{max-width:420px;width:100%;background:#0c1319;border:1px solid var(--line);border-radius:24px;padding:24px;text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.6)}.result h2{font-size:30px;margin:0 0 14px}.result .big{font-size:76px;font-weight:950;color:var(--yellow);line-height:1}.result p{color:#d8e0e7}.result button{margin-top:12px;width:100%;background:var(--green);color:#061006;border-color:var(--green)}.portrait{display:none}.hiddenFeature{display:none!important}@media(orientation:portrait){.top,.keyBar,.boardCard,.bottom{display:none}.portrait{display:flex;min-height:100vh;align-items:center;justify-content:center;text-align:center;padding:30px;color:white}.portrait b{color:var(--yellow)}}@media(max-width:900px) and (orientation:landscape){.app{padding:8px;gap:8px}.top{grid-template-columns:140px 1fr 62px 76px 50px 50px 50px 50px;gap:5px}select,button{height:44px;border-radius:11px;font-size:12px;padding:0 4px}.brand b{font-size:17px}.brand small{font-size:7px}.title h1{font-size:22px}.title p{font-size:11px}.svgWrap{min-height:240px}.fretSvg{min-width:880px}.pbtn,.kbtn{min-width:36px;height:34px;font-size:14px}.keyBar b,.patterns b{font-size:15px}.panel{padding:8px}.scaleInfo{font-size:12px}.note{font-size:38px}.stat b{font-size:19px}}