:root{--paper: #eee8dc;--paper-2: #e7e0d2;--paper-3: #ded6c6;--ink: #1f1b16;--ink-2: #5b5247;--ink-3: #8c8274;--rule: rgba(31, 27, 22, .13);--rule-2: rgba(31, 27, 22, .24);--accent: #b5462b;--accent-soft: #efd8cb;--serif: "Newsreader", "Iowan Old Style", Georgia, serif;--sans: "Geist", -apple-system, system-ui, sans-serif;--mono: "Geist Mono", ui-monospace, "SF Mono", monospace;--panel-w: 410px;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:50}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}input{font:inherit;color:inherit}#app{display:grid;grid-template-columns:minmax(0,1fr) var(--panel-w);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top panel" "stage panel";height:100svh}.top{grid-area:top;display:flex;align-items:center;gap:18px;padding:max(14px,env(safe-area-inset-top)) 22px 6px max(22px,env(safe-area-inset-left));z-index:3}.mark{display:flex;flex-direction:column;line-height:1.1;margin-right:auto}.mark-name{font:italic 400 26px/1 var(--serif);letter-spacing:-.01em}.mark-sub{font:400 11px/1.6 var(--mono);color:var(--ink-3);letter-spacing:.02em}.views{display:flex;border:1px solid var(--rule-2);border-radius:999px;padding:2px}.views button{padding:5px 12px;border-radius:999px;font-size:13px;color:var(--ink-2);transition:background .2s,color .2s}.views button.on{background:var(--ink);color:var(--paper)}.mic{display:flex;align-items:center;gap:7px;padding:6px 13px 6px 10px;border:1px solid var(--rule-2);border-radius:999px;font-size:13px}.mic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.mic[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff7f1}.mic[aria-pressed=true] svg{animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.45}}.stage{grid-area:stage;position:relative;min-height:0;touch-action:none}.stage canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;outline:none}.reading{position:absolute;left:max(22px,env(safe-area-inset-left));top:8px;z-index:2;pointer-events:none;max-width:min(560px,70%)}.chord{font:400 clamp(58px,8.2vw,108px)/.92 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.025em;margin:0}.chord .q{font-style:italic;font-size:.62em;letter-spacing:-.01em;margin-left:.04em}.chord .b{font-size:.5em;color:var(--ink-2)}.chord.small{font-size:clamp(30px,4.2vw,46px);line-height:1.05}.sub{margin:10px 0 0;font:400 12px/1.5 var(--mono);color:var(--ink-2);letter-spacing:.02em}.sub em{font:italic 400 15px var(--serif);color:var(--ink);letter-spacing:0}.strings{display:grid;grid-template-columns:repeat(6,50px);margin-top:14px}.strings span{font:400 10.5px/1.5 var(--mono);color:var(--ink-3)}.strings b{display:block;font:500 14px/1.4 var(--sans);color:var(--ink)}.strings b.root{color:var(--accent)}.strings b.off{color:var(--ink-3);font-weight:400}.listening{display:flex;align-items:center;gap:10px;font:400 12px var(--mono);color:var(--accent);margin-bottom:6px}.meter{width:70px;height:3px;background:var(--rule);border-radius:2px;overflow:hidden}.meter i{display:block;height:100%;background:var(--accent);transition:width .08s}.stage-hint{position:absolute;left:50%;bottom:14px;transform:translate(-50%);margin:0;font:400 12px var(--mono);color:var(--ink-3);pointer-events:none;white-space:nowrap;z-index:2}.capo{position:absolute;left:max(22px,env(safe-area-inset-left));bottom:12px;z-index:2;display:flex;align-items:center;gap:2px;padding:3px 4px 3px 12px;border:1px solid var(--rule-2);border-radius:999px;background:var(--paper);font-size:13px}.capo-label{color:var(--ink-3);font:400 11px var(--mono);margin-right:4px}.capo b{font-weight:500;min-width:52px;text-align:center}.capo button{width:28px;height:28px;border-radius:999px;font-size:17px;line-height:1;color:var(--ink-2)}.capo button:hover{background:var(--paper-3)}.capo.on{border-color:var(--ink)}.panel{grid-area:panel;display:flex;flex-direction:column;border-left:1px solid var(--rule);background:var(--paper-2);min-height:0;z-index:3}.tabs{display:flex;gap:18px;padding:max(18px,env(safe-area-inset-top)) 24px 0;border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none}.tabs button{padding:10px 0 11px;font-size:13.5px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}.tabs button.on{color:var(--ink);border-color:var(--ink)}.panel-body{flex:1;overflow-y:auto;padding:22px 24px calc(28px + env(safe-area-inset-bottom))}h2{font:italic 400 30px/1.1 var(--serif);margin:0 0 6px;letter-spacing:-.01em}h3{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:26px 0 10px}h3:first-child{margin-top:0}p{margin:0 0 10px}.muted{color:var(--ink-2)}.small{font-size:13px}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--rule-2);border-radius:999px;font-size:13.5px;transition:background .15s}.btn:hover{background:var(--paper-3)}.btn.ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}.btn.ink:hover{background:#3a332b}.btn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.btn.star.on svg{fill:currentColor}.link{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-2);font-size:13.5px}.seg{display:inline-flex;border:1px solid var(--rule-2);border-radius:999px;padding:2px}.seg button{padding:4px 11px;border-radius:999px;font-size:12.5px;color:var(--ink-2)}.seg button.on{background:var(--ink);color:var(--paper)}.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px}.facts dt{color:var(--ink-3);font:400 12px/1.7 var(--mono)}.facts dd{margin:0}.pill{display:inline-block;padding:1px 9px;border-radius:999px;font:500 12px/1.6 var(--sans);background:var(--paper-3)}.pill.facile{background:#dfe4cf;color:#3d4a1f}.pill.moyen{background:#ece0c2;color:#6a4e12}.pill.exigeant{background:var(--accent-soft);color:#7c2c18}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}.card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 10px 9px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);text-align:left;transition:border-color .15s,transform .15s;position:relative}.card:hover{border-color:var(--rule-2)}.card:active{transform:scale(.98)}.card.now{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.card .nm{font:400 22px/1.05 var(--serif);letter-spacing:-.01em}.card .nm i{font-size:.7em}.card .en{font:400 10.5px var(--mono);color:var(--ink-3)}.card .why{font-size:12px;color:var(--ink-2);line-height:1.35}.card .deg{position:absolute;top:9px;right:10px;font:italic 400 13px var(--serif);color:var(--ink-3)}.card svg.dg{width:64px;height:76px;color:var(--ink);margin:2px 0 2px -4px}.list{display:flex;flex-direction:column;gap:10px}.list .card{flex-direction:row;align-items:center;gap:14px}.list .card svg.dg{margin:0;flex:none}.strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.strip .card{flex:none;width:96px}.suite-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 4px;position:relative}.flow .card{padding:8px 6px 7px;align-items:center;text-align:center}.flow .card svg.dg{margin:2px 0}.flow .card .nm{font-size:19px}.pattern{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:6px 0 2px}.pattern div{border:1px solid var(--rule);border-radius:7px;padding:7px 0 6px;text-align:center;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:background .08s,color .08s}.pattern div.beat{border-color:var(--rule-2)}.pattern div.now{background:var(--ink);color:var(--paper);border-color:var(--ink)}.pattern .ar{font:400 20px/1 var(--sans)}.pattern .ar.x{font-size:15px}.pattern .lb{font:400 10px/1.25 var(--mono)}.pattern .ct{font:400 9.5px var(--mono);color:var(--ink-3)}.pattern div.now .ct{color:var(--paper-3)}.tempo{display:flex;align-items:center;gap:12px;margin:14px 0 6px;font:400 12px var(--mono);color:var(--ink-2)}.tempo input{flex:1;accent-color:var(--ink)}.tempo b{font:500 14px var(--sans);color:var(--ink);min-width:56px}.code{font:500 17px var(--mono);letter-spacing:.02em}.field{display:flex;gap:8px}.field input{flex:1;min-width:0;padding:8px 12px;border:1px solid var(--rule-2);border-radius:999px;background:var(--paper);font:400 14px var(--mono)}.field input:focus{outline:2px solid var(--ink);outline-offset:1px}.err{color:var(--accent);font-size:13px;margin-top:6px}.rule{border:0;border-top:1px solid var(--rule);margin:22px 0}.empty{padding:26px 0 8px}.empty p{font:italic 400 20px/1.35 var(--serif);color:var(--ink-2);margin-bottom:8px}.back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);margin-bottom:14px}.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:9px 16px;border-radius:999px;font-size:13.5px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:60}.toast.show{opacity:1;transform:translate(-50%)}@media (max-width: 900px){:root{--panel-w: 360px}}@media (max-width: 760px){#app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,56svh) minmax(0,1fr);grid-template-areas:"top" "stage" "panel"}.top{padding:max(10px,env(safe-area-inset-top)) 14px 4px;gap:8px}.stage-hint{white-space:normal;width:88%;text-align:center;bottom:52px;font-size:11px}.capo{left:14px;bottom:10px}.mark-sub{display:none}.mark-name{font-size:22px}.views button{padding:5px 9px;font-size:12px}.mic span{display:none}.mic{padding:6px 9px}.panel{border-left:0;border-top:1px solid var(--rule)}.tabs{padding:4px 16px 0;gap:16px}.panel-body{padding:18px 16px calc(24px + env(safe-area-inset-bottom))}.reading{left:14px;top:2px;max-width:64%}.chord{font-size:50px}.strings{display:none}.sub{margin-top:6px;font-size:11px}}@media (max-height: 520px) and (orientation: landscape){#app{grid-template-columns:minmax(0,1fr) 330px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top panel" "stage panel"}.chord{font-size:44px}.strings,.mark-sub{display:none}}