@font-face{font-family:Kalam;font-style:normal;font-display:swap;font-weight:700;src:url(/assets/kalam-latin-700-normal-D2H-9ISU.woff2) format("woff2"),url(/assets/kalam-latin-700-normal-7TSuSrjP.woff) format("woff")}@font-face{font-family:Oswald;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/oswald-latin-500-normal-B-eyT0Dw.woff2) format("woff2"),url(/assets/oswald-latin-500-normal-DM85Di4w.woff) format("woff")}@font-face{font-family:Oswald;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/oswald-latin-600-normal-plFmSr5g.woff2) format("woff2"),url(/assets/oswald-latin-600-normal-DRToI_2E.woff) format("woff")}:root{--bg:#F1E8DA;--surface:#FFFAF2;--fill:rgba(122,84,40,.12);--fill-2:rgba(122,84,40,.07);--ink:#2A1E15;--muted:#76604B;--line:#E0D1BB;--sep:rgba(122,84,40,.18);--tint:#A85F12;--tint-text:#94520C;--tint-soft:rgba(176,108,30,.14);--on-tint:#FFFFFF;--lh:#1D6C78;--lh-soft:rgba(29,108,120,.12);--rh:#A3263C;--rh-soft:rgba(163,38,60,.1);--good:#4F7A2A;--lock:#B7A58E;--sc-w:#E6EBD3;--sc-b:#7D8F55;--ct-w:#C3D3A0;--ct-b:#4F7A2A;--key-white:#FFFCF5;--key-black:#231811;--key-edge:#D3C2AA;--side:#21170F;--side-ink:#F1E3CC;--side-muted:#A88D6C;--side-sel:#C27A22;--paper:#FFFBF1;--paper-line:#C9B79C;--hero:#21170F;--thumb:#FFFFFF;--f-body:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;--f-display:"Oswald", "Avenir Next Condensed", "Helvetica Neue", sans-serif;--f-chord:"Kalam", "Chalkboard SE", "Marker Felt", cursive;--f-mono:ui-monospace, "SF Mono", Menlo, monospace;--r:22px;--r-s:12px}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#15100C;--surface:#211913;--fill:rgba(232,190,130,.14);--fill-2:rgba(232,190,130,.08);--ink:#F5EADB;--muted:#BBA68D;--line:#3D3027;--sep:rgba(232,190,130,.16);--tint:#D9902E;--tint-text:#F0B45C;--tint-soft:rgba(240,180,92,.16);--on-tint:#1A120C;--lh:#6CC4CC;--lh-soft:rgba(108,196,204,.17);--rh:#F2828F;--rh-soft:rgba(242,130,143,.16);--good:#9CC46B;--lock:#5A4A3D;--sc-w:#2D3320;--sc-b:#56663A;--ct-w:#55693A;--ct-b:#9CC46B;--key-white:#EFE4D2;--key-black:#0E0A07;--key-edge:#4A3C30;--side:#0F0B08;--side-ink:#EADBC5;--side-muted:#9C8669;--side-sel:#D9902E;--paper:#2A2018;--paper-line:#5A4A3C;--hero:#0F0B08;--thumb:#5C4A3A;color-scheme:dark}}:root[data-theme=dark]{--bg:#15100C;--surface:#211913;--fill:rgba(232,190,130,.14);--fill-2:rgba(232,190,130,.08);--ink:#F5EADB;--muted:#BBA68D;--line:#3D3027;--sep:rgba(232,190,130,.16);--tint:#D9902E;--tint-text:#F0B45C;--tint-soft:rgba(240,180,92,.16);--on-tint:#1A120C;--lh:#6CC4CC;--lh-soft:rgba(108,196,204,.17);--rh:#F2828F;--rh-soft:rgba(242,130,143,.16);--good:#9CC46B;--lock:#5A4A3D;--sc-w:#2D3320;--sc-b:#56663A;--ct-w:#55693A;--ct-b:#9CC46B;--key-white:#EFE4D2;--key-black:#0E0A07;--key-edge:#4A3C30;--side:#0F0B08;--side-ink:#EADBC5;--side-muted:#9C8669;--side-sel:#D9902E;--paper:#2A2018;--paper-line:#5A4A3C;--hero:#0F0B08;--thumb:#5C4A3A;color-scheme:dark}[hidden]{display:none!important}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.35;letter-spacing:-.01em;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible,.chord:focus-visible{outline:3px solid var(--tint);outline-offset:2px}h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance}.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}.eyebrow{font-size:12px;color:var(--tint-text);font-weight:700;letter-spacing:.12em;text-transform:uppercase}.app{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100%;padding-left:max(0px,env(safe-area-inset-left,0px));padding-right:max(0px,env(safe-area-inset-right,0px))}.nav{position:sticky;top:0;height:100vh;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;padding:20px 12px;margin:10px 0 10px 10px;height:calc(100vh - 20px);background:var(--side);color:var(--side-ink);border-radius:26px;box-shadow:inset 0 0 0 1px var(--sep),0 10px 30px #2816082e}.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 14px}.brand-mark{width:32px;height:32px;border-radius:8px;background:var(--side-sel);display:grid;place-items:center}.brand-mark svg{width:20px;height:20px}.brand b{font-family:var(--f-display);font-size:22px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.nav .sec{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--side-muted);padding:14px 12px 4px}.nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;color:var(--side-ink);text-decoration:none;font-size:17px}.nav a svg{width:22px;height:22px;flex:none;color:var(--side-sel)}.nav a[aria-current=page]{background:var(--side-sel);color:#1a120c;font-weight:600}.nav a[aria-current=page] svg{color:#1a120c}.nav .spacer{flex:1}.streak{padding:12px 14px;border-radius:16px;background:#e8be821a;font-size:13px;color:var(--side-muted)}.streak b{display:block;font-family:var(--f-display);font-size:24px;font-weight:600;color:var(--side-ink)}main{min-width:0;padding-block:24px 36px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}@media(min-width:821px){main{padding-left:28px;padding-right:28px}}.view{display:flex;flex-direction:column;gap:18px}.card{background:var(--surface);border-radius:var(--r)}.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}.top h1{font-size:40px;line-height:46px;font-weight:600;letter-spacing:.01em;text-transform:uppercase}.top p{margin:4px 0 0;color:var(--muted);font-size:17px;max-width:62ch}.badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--fill);color:var(--muted)}.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;border-radius:99px;border:0;background:var(--fill);color:var(--tint-text);font-weight:600;font-size:17px;min-height:44px}a.btn{color:var(--tint-text)}.btn.primary{background:var(--tint);color:var(--on-tint)}.btn svg{width:18px;height:18px}.lesson-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:16px 16px 12px}.seg{display:inline-flex;flex-wrap:wrap;background:var(--fill);border-radius:12px;padding:2px;gap:0}.seg button{border:0;background:none;padding:0 14px;border-radius:10px;font-weight:500;font-size:15px;color:var(--ink);min-height:36px;white-space:nowrap}.seg button[aria-pressed=true]{background:var(--surface);font-weight:600;box-shadow:0 3px 8px #0000001f,0 0 0 .5px #0000000a}.seg button[aria-pressed=true]{background:var(--thumb)}.tempo{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink);min-height:44px}.tempo input[type=range]{width:130px;accent-color:var(--tint)}.tempo .mono{color:var(--muted)}.sw{appearance:none;-webkit-appearance:none;position:relative;width:51px;height:31px;border-radius:99px;background:var(--fill);margin:0;flex:none;cursor:pointer;transition:background .2s}.sw:after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px #00000026,0 1px 1px #00000029;transition:transform .2s}.sw:checked{background:var(--tint)}.sw:checked:after{transform:translate(20px)}.chords{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 16px 12px}.chord{cursor:pointer;padding:10px 12px;border-radius:14px;background:var(--fill-2);transition:background .15s,box-shadow .15s}.chord b{font-family:var(--f-chord);font-size:23px;font-weight:700;display:block;letter-spacing:0;line-height:1.2}.chord span{font-size:13px;color:var(--muted)}.chord.on{background:var(--tint-soft);box-shadow:inset 0 0 0 2px var(--tint)}.staff-wrap{overflow-x:auto;padding:6px 10px 10px;margin:0 16px 16px;background:var(--paper);border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}.staff{cursor:pointer}.transport{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:2px 16px 8px}.transport .btn{padding:0 18px}.transport .btn.ico{width:44px;padding:0;color:var(--ink)}.transport .btn.ico svg{width:20px;height:20px}.transport #btn-play{min-width:128px;min-height:50px;font-size:17px}.transport .hint{font-size:13px;color:var(--muted);flex-basis:100%}.staff{display:block;width:100%;min-width:560px;height:auto;color:var(--ink)}.staff .ln{stroke:var(--paper-line);stroke-width:1.1}.staff .bar{stroke:var(--muted);stroke-width:1.2}.staff .clef{font-size:46px;fill:var(--ink)}.staff .sym{font-family:var(--f-chord);font-weight:700;font-size:21px;fill:var(--ink)}.staff .nh{fill:none;stroke-width:2}.staff .nh.l{stroke:var(--lh)}.staff .nh.r{stroke:var(--rh)}.staff .nh.f.l{fill:var(--lh)}.staff .nh.f.r{fill:var(--rh)}.staff .stem.l{stroke:var(--lh)}.staff .beam{stroke-width:4.5}.staff .beam.r{stroke:var(--rh)}.staff .beam.l{stroke:var(--lh)}.staff .flag{fill:none;stroke-width:1.8}.staff .flag.r{stroke:var(--rh)}.staff .flag.l{stroke:var(--lh)}.staff .acc{font-size:15px;font-weight:600}.staff .acc.r{fill:var(--rh)}.staff .acc.l{fill:var(--lh)}.staff .stem{stroke-width:1.6}.staff .stem.r{stroke:var(--rh)}.staff .led{stroke:var(--muted);stroke-width:1.2}.staff .nname{font-family:var(--f-mono);font-size:10px;font-weight:500;fill:var(--lh)}.staff .cursor{fill:var(--tint-soft);transition:x .12s linear}.staff .rest{font-size:24px;fill:var(--ink)}.staff .nh.gh{opacity:.4}.staff .tie{fill:none;stroke-width:1.5}.staff .tie.r{stroke:var(--rh)}.staff .tie.l{stroke:var(--lh)}.staff .accent{font-size:15px;font-weight:700}.staff .accent.r{fill:var(--rh)}.staff .accent.l{fill:var(--lh)}.staff .tup{font-size:12px;font-style:italic;font-weight:600}.staff .tup.r{fill:var(--rh)}.staff .tup.l{fill:var(--lh)}.why{padding:18px;display:flex;flex-direction:column;gap:12px}.why h2{font-family:var(--f-chord);font-size:27px;font-weight:700;letter-spacing:0}.why p{margin:0;font-size:16px;line-height:1.4}.why .whead{font-weight:600;font-size:17px}.why .wh{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:16px;background:var(--fill-2)}.why .why-is{background:var(--tint-soft)}.why .wlab{font-size:13px;font-weight:600;color:var(--muted)}.why .why-is .wlab{color:var(--tint-text)}.why .step{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}.why .notes{display:flex;flex-wrap:wrap;gap:6px}.pill{font-size:13px;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--fill)}.pill.l{background:var(--lh-soft);color:var(--lh)}.pill.r{background:var(--rh-soft);color:var(--rh)}.tip{border-top:.5px solid var(--sep);padding-top:12px;font-size:15px;color:var(--muted)}.tip b{color:var(--ink)}.kb-card{padding:14px 14px 16px}.kb-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:0 4px 12px}.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--muted)}.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:0}.kb-wrap{overflow-x:auto}.kb{display:block;width:100%;min-width:700px;height:auto;touch-action:manipulation}.kb .w{fill:var(--key-white);stroke:var(--key-edge);stroke-width:1}.kb .b{fill:var(--key-black)}.kb .w.sc{fill:var(--sc-w)}.kb .b.sc{fill:var(--sc-b)}.kb .w.ct{fill:var(--ct-w)}.kb .b.ct{fill:var(--ct-b)}.kb .lab.dk{fill:var(--ink)}.staff .pg{font-size:12px;fill:var(--muted)}.scale-line{font-size:15px;padding:10px 14px;border-radius:16px;background:var(--sc-w);color:var(--ink)}.scale-line span{font-size:13px;color:var(--muted)}.kb .w.l,.kb .b.l{fill:var(--lh)}.kb .w.r,.kb .b.r{fill:var(--rh)}.kb text{font-family:var(--f-body);font-size:11px;pointer-events:none}.kb .lab{fill:#fff;font-weight:700}.kb-wrap{border-top:6px solid var(--rh);border-radius:4px 4px 0 0}.kb .cname{fill:var(--muted)}.credit{font-size:12px;color:var(--muted);padding:10px 4px 0}.path-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}.levels{display:flex;flex-direction:column;padding:4px 0}.lvl{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 18px;position:relative}.lvl+.lvl:before{content:"";position:absolute;top:0;left:76px;right:0;border-top:.5px solid var(--sep)}.lvl-n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:19px;background:var(--fill);color:var(--muted)}.lvl.done .lvl-n{background:var(--good);color:var(--surface)}.lvl.now .lvl-n{background:var(--tint);color:var(--on-tint)}.lvl.goal .lvl-n{background:var(--hero);color:var(--side-sel);box-shadow:inset 0 0 0 2px var(--side-sel)}.lvl h3{font-size:19px;font-weight:600}.lvl p{margin:2px 0 10px;color:var(--muted);font-size:15px}.strand{display:grid;grid-template-columns:104px minmax(0,1fr);gap:6px 10px;align-items:start;margin-top:6px}.strand>span{font-size:13px;font-weight:600;color:var(--muted);padding-top:7px}.strand>span.imp{color:var(--rh)}.lessons{display:flex;flex-wrap:wrap;gap:6px}.ls{display:inline-flex;align-items:center;gap:5px;font-size:15px;min-height:34px;padding:0 12px;border-radius:99px;background:var(--fill-2);color:var(--ink);text-decoration:none}.ls.done{color:var(--good)}.ls.done:before{content:"✓";font-weight:700}.ls.now{background:var(--tint);color:var(--on-tint);font-weight:600}.ls.lock{color:var(--muted)}.ls.imp{background:var(--rh-soft);color:var(--rh)}.ls.imp.lock{background:var(--fill-2);color:var(--muted)}a.ls:after{content:"›";font-weight:600;margin-left:2px;opacity:.6}.ls.goal{background:var(--hero);color:var(--side-sel);font-weight:600;box-shadow:inset 0 0 0 1.5px var(--side-sel)}.lvl h3{font-family:var(--f-display);font-weight:500;letter-spacing:.02em;text-transform:uppercase;font-size:20px}.hero{position:relative;overflow:hidden;background:var(--hero);color:var(--side-ink);border-radius:var(--r);padding:26px 28px;box-shadow:inset 0 0 0 1px var(--sep);display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}.hero .eyebrow{color:var(--side-sel)}.hero h1{font-family:var(--f-display);font-size:46px;line-height:1.05;font-weight:600;text-transform:uppercase;letter-spacing:.01em;margin-top:6px}.hero p{margin:8px 0 0;color:var(--side-muted);max-width:56ch}.hero p b{color:var(--side-ink)}.hero>*{position:relative}.hero .vinyl{position:absolute;right:-70px;top:-70px;width:260px;height:260px;border-radius:50%;opacity:.5;background:radial-gradient(circle,var(--side-sel) 0 13%,#000 13.5% 15%,transparent 15.5%),repeating-radial-gradient(circle,rgba(255,255,255,.05) 0 1px,transparent 1px 4px),#0a0705}.today{padding:18px;display:flex;flex-direction:column;gap:12px}.task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--fill-2);color:var(--ink);text-decoration:none}.task b{font-weight:600}.task .min{font-size:13px;color:var(--muted)}.task .dot{width:10px;height:10px;border-radius:50%}.meter{height:8px;border-radius:99px;background:var(--fill);overflow:hidden}.meter i{display:block;height:100%;background:var(--good);border-radius:99px}.note-sample{font-size:12px;color:var(--muted)}.imp-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}.drop{border:2px dashed var(--line);border-radius:var(--r);padding:18px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--surface)}.drop .file{display:flex;align-items:center;gap:12px;min-width:0;flex:1}.wave{width:100%;height:56px;display:block}.pipeline{display:flex;flex-direction:column;gap:12px;padding:18px}.pstep{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:15px}.pstep .st{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700}.pstep.ok .st{background:var(--good);color:var(--surface)}.pstep.run .st{border:2px solid var(--tint);color:var(--tint-text)}.pstep.wait .st{border:2px solid var(--line);color:var(--muted)}.pstep small{display:block;color:var(--muted);font-size:13px}.roll-wrap{padding:12px 16px}.roll{display:block;width:100%;height:220px;border-radius:14px;background:var(--fill-2)}.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 16px 12px}.fact{padding:12px;border-radius:16px;background:var(--fill-2)}.fact b{display:block;font-family:var(--f-display);font-size:19px;font-weight:600}.fact span{font-size:13px;color:var(--muted)}.toggle{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:16px;min-height:44px;border-top:.5px solid var(--sep)}.warn{font-size:14px;color:var(--ink);background:var(--rh-soft);border-radius:14px;padding:12px 14px}.tricks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.trick{padding:18px;display:flex;flex-direction:column;gap:10px}.trick h3{font-size:22px;font-weight:700}.trick p{margin:0;color:var(--muted);font-size:16px}.trick svg{width:100%;height:auto;display:block}.trick .t-ink{fill:var(--ink)}.trick .t-mut{fill:var(--muted)}.trick .t-lh{fill:var(--lh)}.trick .t-rh{fill:var(--rh)}.trick .t-line{stroke:var(--line)}.trick footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto}@media(max-width:1366px){.lesson-grid{display:contents}#v-lezione>.top{order:0}.lesson-grid>.card:first-child{order:1}.kb-card{order:2}.why{order:3}}@media(max-width:1080px){.lesson-grid,.path-grid,.imp-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:820px){.app{grid-template-columns:minmax(0,1fr)}.nav{position:sticky;top:0;z-index:5;height:auto;margin:0;border-radius:0;flex-direction:row;align-items:center;overflow-x:auto;box-shadow:0 .5px 0 var(--sep);padding:6px max(16px,env(safe-area-inset-left,0px));gap:2px}.brand{padding:0 8px 0 0}.brand b,.nav .spacer,.streak,.nav .sec{display:none}.nav a{padding:0 12px;white-space:nowrap;font-size:15px;min-height:40px;border-radius:99px}.tricks{grid-template-columns:minmax(0,1fr)}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.chords{grid-template-columns:repeat(2,1fr)}.top h1{font-size:30px;line-height:36px}.hero h1{font-size:34px}.strand{grid-template-columns:minmax(0,1fr)}.strand>span{padding-top:0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
