@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,700&display=swap";:root{--ink:#102c28;--cream:#f5f0e6;--paper:#fffdf8;--orange:#e65f2e;--sage:#bdd3bc;--line:#d8d5ca;--muted:#687773}*{box-sizing:border-box}body{background:var(--cream);color:var(--ink);margin:0;font-family:DM Sans,sans-serif}.app{min-height:100vh}button{font:inherit;color:inherit;cursor:pointer}header{background:var(--paper);border-bottom:1px solid var(--line);z-index:20;align-items:center;gap:60px;height:76px;padding:0 max(24px,5vw);display:flex;position:sticky;top:0}.brand{letter-spacing:.12em;align-items:center;gap:11px;font-weight:800;display:flex}.brand>span{background:var(--orange);color:#fff;clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%);place-items:center;width:36px;height:42px;font-family:serif;font-size:27px;display:grid}.brand small{letter-spacing:.18em;color:var(--muted);margin-top:2px;font-size:8px;display:block}nav{gap:34px;height:100%;display:flex}nav button{color:var(--muted);background:0 0;border:0;font-weight:600;position:relative}nav button.active{color:var(--ink)}nav button.active:after{content:"";background:var(--orange);height:3px;position:absolute;bottom:0;left:0;right:0}.settings-btn{border:1px solid var(--line);background:#fff;border-radius:6px;align-items:center;gap:8px;margin-left:auto;padding:10px 14px;font-weight:600;display:flex}.settings-btn svg,.sessionbar svg{width:16px}.hero{justify-content:space-between;align-items:end;max-width:1180px;margin:auto;padding:70px 24px 48px;display:flex}.eyebrow{letter-spacing:.2em;color:var(--orange);margin:0 0 13px;font-size:11px;font-weight:800}.hero h1{letter-spacing:-.045em;margin:0;font-size:clamp(45px,5.5vw,74px);line-height:.97}.hero h1 i{color:var(--orange);font-family:Playfair Display;font-weight:700}.hero>div>p:last-child{max-width:620px;color:var(--muted);font-size:17px;line-height:1.6}.hero-stats{gap:10px;display:flex}.hero-stats>div{background:var(--paper);border:1px solid var(--line);grid-template-columns:auto 1fr;gap:0 9px;min-width:132px;padding:17px 22px;display:grid}.hero-stats svg{width:18px;color:var(--orange)}.hero-stats b{font-size:22px}.hero-stats span{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);grid-column:1/3;margin-top:5px;font-size:10px}.workspace{max-width:1180px;margin:0 auto 80px;padding:0 24px}.modebar{gap:3px;display:flex;overflow:auto}.modebar button{white-space:nowrap;background:#e5e2d7;border:0;align-items:center;gap:8px;padding:14px 18px;font-size:13px;font-weight:700;display:flex}.modebar button.on{background:var(--ink);color:#fff}.modebar svg{width:16px}.modebar .adjust{margin-left:auto}.sessionbar{color:#fff;letter-spacing:.08em;background:#173a35;justify-content:space-between;padding:12px 18px;font-size:11px;font-weight:700;display:flex}.sessionbar>div,.sessionbar span{align-items:center;gap:8px;display:flex}.sessionbar>div:last-child{gap:22px}.sessionbar button{color:#d1dfdc;background:0 0;border:0;gap:6px;display:flex}.status-dot{background:#64c589;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #64c58922}.drill{background:var(--paper);border:1px solid var(--line);text-align:center;border-top:0;min-height:490px;padding:50px 40px 32px;box-shadow:0 15px 40px #25342d0a}.drill h2{margin:0 0 28px;font-size:28px}.drill h2 em{background:var(--orange);color:#fff;border-radius:50%;place-items:center;width:60px;height:60px;margin-left:8px;font-style:normal;display:inline-grid}.staff{width:min(520px,95%);margin:15px auto 25px;display:block}.staff line{stroke:var(--ink);stroke-width:1.5px}.staff .ledger{stroke-width:2px}.staff ellipse{fill:var(--ink)}.staff .clef{fill:var(--ink);font-family:serif;font-size:78px}.staff .accidental{fill:var(--ink);font-family:serif;font-size:27px}.position-card{border:1px solid var(--line);background:#eef1ea;gap:20px;margin-bottom:12px;padding:9px 18px;display:inline-flex}.neck-wrap{max-width:1040px;margin:12px auto 25px;padding-left:62px;overflow-x:auto}.neck{background:#cda574;border:4px solid #765437;min-width:690px;display:grid}.string-row{grid-template-columns:repeat(var(--cols),minmax(40px,1fr));display:grid;position:relative}.string-name{text-align:right;width:48px;font-weight:800;position:absolute;top:50%;right:calc(100% + 14px);transform:translateY(-50%)}.string-name small{color:var(--muted);white-space:nowrap;font-size:8px;display:block}.fret{background:0 0;border:0;border-right:3px solid #ded7c7;height:46px;position:relative}.fret:before{content:"";height:var(--string,2px);background:#7a604b;position:absolute;top:50%;left:0;right:0;box-shadow:0 1px #e9d1ae}.string-row:nth-child(n+4) .fret:before{height:2.5px}.fret i{z-index:2;border-radius:50%;place-items:center;width:27px;height:27px;margin:auto;font-size:11px;font-style:normal;font-weight:800;display:grid;position:relative}.fret:hover i,.fret.selected i{background:var(--ink);color:#fff}.fret.answer i{color:#fff;background:#4b9a67}.fret.hot i{background:var(--orange);color:#fff}.fret-numbers,.markers{grid-template-columns:repeat(var(--cols),1fr);min-width:690px;color:var(--muted);font-size:9px;display:grid}.fret-numbers span,.markers span{text-align:center}.markers{height:20px;font-size:18px}.note-answers{grid-template-columns:repeat(6,1fr);gap:8px;max-width:720px;margin:18px auto;display:grid}.note-answers button{border:1px solid var(--line);background:#fff;border-radius:4px;padding:15px 5px;font-size:17px;font-weight:700}.note-answers button:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}.feedback{color:var(--muted);height:20px;font-size:12px}.drill.correct .feedback{color:#27804d;font-weight:700}.drill.wrong .feedback{color:#b64d2b;font-weight:700}.guide{background:var(--ink);color:#fff;padding:70px max(24px,50vw - 566px) 80px}.guide h2{margin:0 0 38px;font-size:38px}.guide>div{grid-template-columns:repeat(3,1fr);gap:2px;display:grid}.guide article{border-top:2px solid var(--orange);background:#1a3b36;padding:28px}.guide article b{color:var(--orange);font-size:12px}.guide article h3{font-size:20px}.guide article p{color:#b9cbc7;font-size:14px;line-height:1.6}footer{color:#8ba19d;background:#0a211e;justify-content:space-between;padding:35px 5vw;display:flex}footer span{color:#fff;letter-spacing:.2em;font-weight:800}.scrim{z-index:50;background:#0a211e99;justify-content:flex-end;display:flex;position:fixed;inset:0}.panel{background:var(--paper);width:min(440px,100%);height:100%;padding:30px;overflow:auto;box-shadow:-20px 0 60px #0003}.panel-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:start;margin-bottom:26px;padding-bottom:22px;display:flex}.panel h2{margin:0;font-size:28px}.icon{background:0 0;border:0}.icon svg{width:22px}.label{text-transform:uppercase;letter-spacing:.12em;margin:22px 0 10px;font-size:11px;font-weight:800;display:block}.string-toggles{grid-template-columns:repeat(3,1fr);gap:7px;display:grid}.string-toggles button{border:1px solid var(--line);background:#fff;padding:10px}.string-toggles b,.string-toggles small{display:block}.string-toggles small{color:var(--muted);font-size:9px}.string-toggles button.on,.seg button.on{background:var(--ink);color:#fff}.string-toggles button.on small{color:#bcd0cc}.setting-row{justify-content:space-between;align-items:end;display:flex}.setting-row p{color:var(--muted);margin:0;font-size:12px}.range-pair input{width:100%;accent-color:var(--orange)}.seg{grid-template-columns:1fr 1fr;display:grid}.seg button{border:1px solid var(--line);background:#fff;padding:12px}.check{align-items:center;gap:10px;margin:25px 0;font-size:14px;display:flex}.check input{accent-color:var(--orange)}.primary{background:var(--orange);color:#fff;border:0;padding:14px;font-weight:700}.wide{width:100%}@media (width<=750px){header{gap:15px;padding:0 16px}nav{display:none}.brand div{font-size:12px}.settings-btn{font-size:0}.hero{padding-top:40px;display:block}.hero-stats{margin-top:30px}.hero-stats>div{flex:1}.sessionbar>div:last-child span:last-of-type{display:none}.drill{padding:36px 10px 25px}.guide>div{grid-template-columns:1fr}.modebar button{padding:14px 17px;font-size:0}.modebar svg{margin:0}.note-answers{grid-template-columns:repeat(4,1fr)}.neck-wrap{padding-left:58px}.guide h2{font-size:30px}}.neck-wrap{--open-width:44px}.neck{display:block}.string-row{display:flex}.fretted-row{grid-template-columns:repeat(var(--cols),minmax(40px,1fr));flex:1;display:grid}.open-string{flex:0 0 var(--open-width);background:var(--paper);border:0;border-right:6px solid #eee4ce;height:46px;padding:0;position:relative}.open-string:before{content:"";background:#7a604b;height:2px;position:absolute;top:50%;left:0;right:0;box-shadow:0 1px #e9d1ae}.string-row:nth-child(n+4) .open-string:before{height:2.5px}.open-string i{z-index:2;border-radius:50%;place-items:center;width:27px;height:27px;margin:auto;font-size:11px;font-style:normal;font-weight:800;display:grid;position:relative}.open-string:hover i,.open-string.selected i{background:var(--ink);color:#fff}.open-string.answer i{color:#fff;background:#4b9a67}.open-string.hot i{background:var(--orange);color:#fff}.fret-numbers,.markers{grid-template-columns:repeat(var(--cols),minmax(40px,1fr))}.has-open .fret-numbers,.has-open .markers{padding-left:var(--open-width)}.neck-wrap{scrollbar-width:none;-ms-overflow-style:none}.neck-wrap::-webkit-scrollbar{display:none}.neck{background:linear-gradient(90deg,#b98450,#d0a36d 38%,#bd8954 72%,#d1a36b);position:relative;box-shadow:inset 0 7px 12px #5c321d40,inset 0 -7px 12px #5c321d40}.string-row{z-index:2;position:relative}.fret{border-right:0}.fret:after{content:"";z-index:1;background:linear-gradient(90deg,#686b69 0,#f9fff9 38%,#9c9f9c 62%,#edf1ed 100%);width:4px;position:absolute;top:0;bottom:0;right:-2px;box-shadow:1px 0 2px #3c2b2080,-1px 0 1px #fff8}.fret:before,.open-string:before{z-index:3;height:var(--gauge);background:linear-gradient(#f4f5ef 0,#777d7b 42%,#f8faf6 72%,#555b59 100%);border-radius:3px;box-shadow:0 1px 1px #26170d99,0 -1px #fff8}.fret i,.open-string i{z-index:5}.open-string{background:#f8f6ef;border-right:0}.open-string:after{content:"";z-index:4;background:linear-gradient(90deg,#9c927d,#fffdf0 30%,#ddd3bd 72%,#918672);border-radius:2px;width:10px;position:absolute;top:-4px;bottom:-4px;right:-5px;box-shadow:2px 0 4px #2d211b80,-1px 0 #fff}.inlay-layer{z-index:1;grid-template-columns:repeat(var(--cols),minmax(40px,1fr));pointer-events:none;display:grid;position:absolute;inset:0}.inlay-layer span{position:relative}.inlay-layer span.single:after,.inlay-layer span.double:before,.inlay-layer span.double:after{content:"";background:radial-gradient(circle at 35% 30%,#fffef1,#d8d3c1 58%,#88816f);border-radius:50%;width:14px;height:14px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 2px #fff,0 1px 2px #503822}.inlay-layer span.double:before{top:34%}.inlay-layer span.double:after{top:66%}.neck{box-shadow:none;background:0 0;border:0}.fretted-row{background-color:#171b19;background-image:linear-gradient(90deg,#0d100f18,#ffffff08 35%,#07090822 72%),repeating-linear-gradient(2deg,#0000 0 8px,#ffffff05 9px,#00000012 10px);position:relative}.inlay-layer+.string-row .fretted-row{border-top:4px solid #080b0a}.string-row:last-of-type .fretted-row{border-bottom:4px solid #080b0a}.fretted-row .fret:first-child{border-left:0}.open-string{flex-basis:var(--open-width);background:0 0}.open-string:after{background:linear-gradient(to bottom,transparent calc(50% - var(--gauge)),#706b5f calc(50% - var(--gauge)),#5d594f calc(50% + var(--gauge)),transparent calc(50% + var(--gauge))),linear-gradient(90deg,#a69e8d,#f1ead8 24%,#d0c6b2 67%,#898171);border-radius:2px;width:16px;top:0;bottom:0;right:-8px;box-shadow:2px 0 4px #0008,-1px 0 #fff9}.fret:after{background:linear-gradient(90deg,#646b70 0,#e9f0f3 25%,#9ca5aa 50%,#f7fafb 72%,#626a6e 100%);width:4px;right:-2px;box-shadow:1px 0 2px #000b,-1px 0 1px #fff9}.fret:before,.open-string:before{opacity:.94;background:linear-gradient(#fffdf4 0,#d8d0bb 32%,#a89f89 58%,#eee8d7 82%,#8e8675 100%);box-shadow:0 1px 1px #0009,0 -1px #fff9}.string-row[style*="3.2px"] .fret:before,.string-row[style*="4px"] .fret:before,.string-row[style*="3.2px"] .open-string:before,.string-row[style*="4px"] .open-string:before{background:repeating-linear-gradient(0deg,#eee9db 0 1px,#9f9786 1px 2px)}.inlay-layer span.single:after,.inlay-layer span.double:before,.inlay-layer span.double:after{background:radial-gradient(circle at 35% 30%,#f1efe8,#a8a8a2 58%,#555a57);box-shadow:inset 0 0 2px #fff,0 1px 2px #000}.open-string:before{display:none}.open-string:after{background:linear-gradient(90deg,#b7a783 0,#eadfbe 18%,#fff4d2 48%,#dfcfa8 82%,#9b8967 100%);border-left:1px solid #7e6d4f;border-right:1px solid #6f5e43;border-radius:2px;width:16px;top:0;bottom:0;right:-8px;box-shadow:2px 0 4px #0009,-2px 0 3px #0006,inset 2px 0 #fff8}.fretted-row{background-color:#29170f;background-image:linear-gradient(90deg,#160b0780,#68402a38 35%,#10080670 72%),repeating-linear-gradient(2deg,#0000 0 8px,#b77a4b0d 9px,#00000020 10px)}.inlay-layer{z-index:3}.inlay-layer span.single:after,.inlay-layer span.double:before,.inlay-layer span.double:after{background:radial-gradient(circle at 32% 27%,#fff,#f3eee0 45%,#bfc4c0 72%,#747b78);border:1px solid #f8f3e7;width:17px;height:17px;box-shadow:0 0 0 1px #05030299,0 1px 4px #000}.markers{color:#475550;letter-spacing:2px;padding-top:5px;font-size:10px}.open-string{align-self:stretch;height:auto;min-height:46px}.fret.selected i,.open-string.selected i{color:#20160b;background:#ffd43b;border:1px solid #9c6500;box-shadow:0 0 0 3px #fff,0 0 14px 4px #ffd43b}.string-row.nylon .fret:before{opacity:.96;background:linear-gradient(#fffef8 0,#eee7d5 35%,#aaa28f 56%,#fffdf2 78%,#b4aa94 100%);box-shadow:0 1px 1px #0008,0 -1px #fff}.string-row.wound .fret:before{opacity:1;background:repeating-linear-gradient(90deg,#757d80 0 2px,#eef2ef 2px 4px,#9ca4a5 4px 6px);box-shadow:0 1px 1px #000,0 -1px #fff9}.note-answers.piano{background:0 0;gap:2px;max-width:720px;height:142px;margin:24px auto 18px;padding:0;display:flex;position:relative}.note-answers.piano button{border-radius:0;margin:0;transition:transform .12s,background .12s}.note-answers.piano .white-key{z-index:1;height:142px;color:var(--ink);background:linear-gradient(#fff,#f3f0e7);border:1px solid #9d9a90;flex:1;justify-content:center;align-items:flex-end;padding:0 5px 13px;display:flex;position:relative;box-shadow:0 4px #b7b2a7}.note-answers.piano .black-key{z-index:2;left:calc((var(--key-pos) * 100% / 7) - 4%);color:#fff;background:linear-gradient(90deg,#101716,#30413e 52%,#09100f);border:1px solid #020504;border-bottom:5px solid #050807;justify-content:center;align-items:flex-end;width:8%;height:88px;padding:0 2px 10px;font-size:12px;display:flex;position:absolute;top:0;box-shadow:0 5px 5px #0008}.note-answers.piano button:hover{transform:translateY(2px)}.note-answers.piano .white-key:hover{color:var(--ink);background:#ffe7ae}.note-answers.piano .black-key:hover{background:var(--orange);color:#fff}.vertical-wrap{width:min(430px,88vw);margin:16px auto 28px;padding-right:34px}.vertical-labels,.vertical-open{display:flex}.vertical-labels span,.vertical-open button{text-align:center;flex:1}.vertical-labels span{padding-bottom:5px;font-size:11px;font-weight:800}.vertical-open{height:42px}.vertical-open button{background:0 0;border:0;padding:0;position:relative}.vertical-open i,.vertical-fret i{z-index:5;border-radius:50%;place-items:center;width:27px;height:27px;margin:auto;font-size:11px;font-style:normal;font-weight:800;display:grid;position:relative}.vertical-nut{z-index:8;background:linear-gradient(#b7a783 0,#eadfbe 18%,#fff4d2 48%,#dfcfa8 82%,#9b8967 100%);border-top:1px solid #7e6d4f;border-bottom:1px solid #6f5e43;border-radius:2px;height:16px;position:relative;box-shadow:0 3px 5px #0009,0 -2px 3px #0006,inset 0 2px #fff8}.vertical-neck{background:#29170f;border-left:4px solid #080b0a;border-right:4px solid #080b0a}.vertical-fret{background-color:#29170f;background-image:linear-gradient(90deg,#160b0780,#68402a38 35%,#10080670 72%),repeating-linear-gradient(92deg,#0000 0 8px,#b77a4b0d 9px,#00000020 10px);height:62px;display:flex;position:relative}.vertical-fret:after{content:"";z-index:4;background:linear-gradient(#646b70 0,#e9f0f3 25%,#9ca5aa 50%,#f7fafb 72%,#626a6e 100%);height:4px;position:absolute;bottom:-2px;left:0;right:0;box-shadow:0 1px 2px #000b,0 -1px 1px #fff9}.vertical-fret button{z-index:2;background:0 0;border:0;flex:1;padding:0;position:relative}.vertical-fret button:before{content:"";z-index:3;width:var(--gauge);background:linear-gradient(90deg,#fffef8,#c7bfaa 45%,#fffdf2 75%,#938b79);border-radius:3px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%);box-shadow:1px 0 1px #0008,-1px 0 #fff9}.vertical-fret button.wound:before{background:repeating-linear-gradient(0deg,#757d80 0 2px,#eef2ef 2px 4px,#9ca4a5 4px 6px)}.vertical-fret b{color:var(--muted);font-size:10px;position:absolute;top:50%;left:calc(100% + 13px);transform:translateY(-50%)}.vertical-inlay{z-index:1;color:#e9e7df;letter-spacing:5px;text-shadow:0 1px 3px #000;font-size:13px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.vertical-fret button.selected i,.vertical-open button.selected i{color:#20160b;background:#ffd43b;border:1px solid #9c6500;box-shadow:0 0 0 3px #fff,0 0 14px 4px #ffd43b}.vertical-fret button.answer i,.vertical-open button.answer i{color:#fff;background:#4b9a67}.vertical-fret button.hot i,.vertical-open button.hot i{background:var(--orange);color:#fff}.vertical-inlay{z-index:6;pointer-events:none;color:#0000;text-shadow:none;inset:0;transform:none}.vertical-inlay.single:after,.vertical-inlay.double:before,.vertical-inlay.double:after{content:"";background:radial-gradient(circle at 32% 27%,#fff,#f3eee0 45%,#bfc4c0 72%,#747b78);border:1px solid #f8f3e7;border-radius:50%;width:17px;height:17px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #05030299,0 1px 4px #000}.vertical-inlay.double:before{left:40%}.vertical-inlay.double:after{left:60%}.vertical-side-marker{z-index:7;color:#4c5b56;letter-spacing:2px;text-align:left;pointer-events:none;width:24px;font-size:13px;line-height:1;position:absolute;top:50%;left:calc(100% + 10px);transform:translateY(-50%)}.vertical-side-marker.single:after{content:"●"}.vertical-side-marker.double:after{content:"●●"}.vertical-fret b{left:auto;right:calc(100% + 10px)}.string-row.inactive,.vertical-fret button.inactive{filter:grayscale()}.vertical-open button.inactive,.vertical-labels .inactive{filter:grayscale();opacity:.22}.string-row.inactive,.vertical-fret button.inactive,.vertical-open button.inactive{pointer-events:none}.string-row.inactive{z-index:4}.string-row.inactive .string-name,.string-row.inactive .open-string{opacity:.22}.string-row.inactive:after{content:"";z-index:8;pointer-events:none;background:#d8d8d4cc;position:absolute;inset:0}.has-open .string-row.inactive:after{left:var(--open-width)}.vertical-fret button.inactive{z-index:7}.vertical-fret button.inactive:after{content:"";z-index:6;pointer-events:none;background:#d8d8d4cc;position:absolute;inset:0}.fretted-row,.fret-numbers,.markers{grid-template-columns:var(--fret-columns)}.has-open .inlay-layer{grid-template-columns:var(--open-width) var(--fret-columns)}.neck-wrap:not(.has-open) .inlay-layer{grid-template-columns:var(--fret-columns)}.feedback{text-align:left;border-radius:7px;justify-content:center;align-items:center;gap:13px;max-width:540px;height:auto;min-height:62px;margin:22px auto 0;display:flex}.feedback-icon{border-radius:50%;flex:0 0 38px;place-items:center;width:38px;height:38px;font-size:28px;font-weight:800;line-height:1;display:grid}.feedback strong,.feedback small{display:block}.feedback strong{font-size:17px;line-height:1.1}.feedback small{margin-top:4px;font-size:12px}.feedback-idle{color:var(--muted);font-size:12px}.drill.correct{border-color:#45a568;box-shadow:0 0 0 4px #45a56838,0 15px 40px #25342d0a}.drill.correct .feedback{color:#145d31;background:#dff5e6;border:1px solid #74bf8d;padding:10px 18px}.drill.correct .feedback-icon{color:#fff;background:#279456}.drill.wrong{border-color:#d85a43;box-shadow:0 0 0 4px #d85a4338,0 15px 40px #25342d0a}.drill.wrong .feedback{color:#8e2d1f;background:#ffebe6;border:1px solid #e89180;padding:10px 18px}.drill.wrong .feedback-icon{color:#fff;background:#d64b36}.header-stats{align-items:center;gap:18px;margin-left:auto;font-size:13px;font-weight:700;display:flex}.header-stats span{align-items:center;gap:6px;display:flex}.header-stats svg{width:17px;color:var(--orange)}.header-stats+.settings-btn{margin-left:0}.workspace{padding-top:40px}@media (width<=750px){.header-stats{gap:10px}.workspace{padding-top:24px}}.fret.out-of-range{filter:grayscale();cursor:default;background:#a9adaa}.open-string.out-of-range{cursor:default;background:#d2d3cf}.fret-numbers .out-of-range{color:#a5aaa7}.vertical-open.out-of-range{filter:grayscale();pointer-events:none;background:#d2d3cf}.vertical-fret.out-of-range{filter:grayscale();pointer-events:none;background:#777b78}.vertical-fret.out-of-range b{color:#a5aaa7}html{-webkit-text-size-adjust:100%}body{overflow-x:hidden}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.neck-wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}@media (width<=600px){header{height:64px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));gap:8px}.brand{letter-spacing:.08em;gap:7px;min-width:0}.brand>span{flex:0 0 31px;width:31px;height:37px;font-size:23px}.brand small{display:none}.header-stats{gap:8px;font-size:12px}.header-stats span{gap:3px}.header-stats svg{width:15px}.settings-btn{justify-content:center;min-width:44px;min-height:44px;padding:10px}.workspace{width:100%;padding:18px 10px max(32px,env(safe-area-inset-bottom));margin-bottom:30px}.modebar{width:100%}.modebar button{justify-content:center;min-width:44px;min-height:44px;padding:12px}.modebar .adjust{flex:0 0 44px}.sessionbar{letter-spacing:.04em;padding:10px 11px}.sessionbar>div:last-child{gap:10px}.sessionbar button{justify-content:center;align-items:center;min-width:44px;min-height:32px;padding:0}.drill{min-height:0;padding:28px 7px 22px}.drill h2{margin-bottom:20px;font-size:23px}.drill h2 em{width:50px;height:50px}.position-card{margin-bottom:8px}.neck-wrap{scrollbar-width:thin;width:100%;margin-bottom:18px;padding-left:48px}.neck-wrap::-webkit-scrollbar{height:5px;display:block}.neck-wrap::-webkit-scrollbar-thumb{background:#9caaa6;border-radius:10px}.note-answers.piano{height:132px;margin:20px 4px 14px}.note-answers.piano .white-key{min-width:0;height:128px;padding-bottom:12px;font-size:16px}.note-answers.piano .black-key{left:calc((var(--key-pos) * 100% / 7) - 5%);width:10%;min-width:26px;height:84px;font-size:11px}.feedback{min-height:58px;margin-top:18px;padding-left:9px!important;padding-right:9px!important}.vertical-wrap{width:min(390px,100vw - 42px);margin-top:10px;padding-right:25px}.panel{width:100%;height:100dvh;padding:22px max(18px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}.panel-head .icon,.string-toggles button,.seg button,.primary{min-height:44px}}@media (width<=360px){.brand div{font-size:11px}.header-stats span:last-child{display:none}.sessionbar>div:first-child{font-size:0}.sessionbar>div:first-child:after{content:"SESSION";font-size:10px}.drill h2{font-size:21px}}