
:root{--wine:#52171c;--rose:#934e57;--blush:#e6b5bc;--sand:#f2ebe0;--paper:#f8f4ee;--ink:#332426;--line:#e7ddce}*{box-sizing:border-box}body{margin:0;background:var(--sand);color:var(--ink);font:15px/1.55 system-ui,sans-serif}button,select,input{font:inherit}button,select{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #a64c5a;outline-offset:3px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Georgia,serif;font-weight:500;line-height:1.1}h2{font-size:30px}.wrap{width:min(1120px,calc(100% - 36px));margin:auto}.mast{background:var(--paper);border-bottom:1px solid var(--line)}.mast .wrap{display:flex;justify-content:space-between;align-items:center;min-height:58px;gap:10px}.brand{font:17px Georgia,serif;color:var(--wine)}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.22em;font-weight:800}.hero{background:linear-gradient(107deg,#351014 8%,#52171c 55%,#a15b64);color:var(--paper);position:relative;overflow:hidden}.hero .wrap{position:relative;z-index:1;padding:44px 0 51px}.hero h1{font-size:clamp(48px,8vw,88px);letter-spacing:-.055em;margin:5px 0 7px}.hero em{color:#f2c4ca}.hero p{max-width:400px;color:#f8e4e4}.hero .eyebrow{color:#f1c6cd}.art{position:absolute;bottom:0;right:0;width:min(62%,760px);height:100%;opacity:.83}.section{margin:20px 0}.card{padding:21px 24px;background:var(--paper);border:1px solid var(--line);border-radius:15px}.section-title{display:flex;align-items:end;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:13px}.section-title .eyebrow,.sub{color:#78565b}.setup{display:grid;grid-template-columns:1fr 1.5fr auto;gap:12px;align-items:end}.field{display:grid;gap:4px;min-width:0}.field label{color:var(--wine)}select{border:1px solid #d8c6b8;background:#fffaf4;color:var(--ink);padding:9px 12px;border-radius:8px;width:100%}.btn{padding:9px 14px;border:1px solid #d9c2c2;border-radius:999px;background:transparent;color:var(--wine);font-weight:650;white-space:nowrap}.btn:hover,.btn[aria-pressed=true]{background:#efdadb}.primary,.primary:hover,.primary[aria-pressed=true]{background:var(--wine);color:#fff;border-color:var(--wine)}.notes,.choices,.actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.notes{margin-top:13px}.chip{padding:2px 10px;border-radius:999px;background:#efe2db;font-weight:650}.chip[data-degree],.dot span[data-degree]{background:#e6b5bc;color:#52171c}.chip[data-degree="0"],.dot span[data-degree="0"]{background:#52171c;color:#fff}.dot.context span[data-degree]{background:#edd8da;color:#78565b;box-shadow:inset 0 0 0 1px #c57d85}.dot.context span[data-degree="0"]{box-shadow:inset 0 0 0 2px #934e57}.map-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:10px 0}.map-controls .field{max-width:220px}.map-controls [hidden]{display:none}.map-route{margin:8px 0;color:#52171c}.map-route[hidden]{display:none}.fret.in-position{background:#edd8da;border-radius:6px}.string-selected{color:#52171c;background:#edd8da;border-radius:6px}.board-scroll{overflow:auto;padding:4px 4px 9px}.board{display:grid;grid-template-columns:45px repeat(13,minmax(43px,1fr));min-width:610px;align-items:center;text-align:center;gap:2px}.fret{font-size:11px;color:#795a5d}.marked{font-weight:800;color:var(--wine)}.lane{display:contents}.dot{border:0;border-radius:0;background:linear-gradient(transparent 48%,#cbb3a8 48%,#cbb3a8 53%,transparent 53%);color:#604a4b;padding:5px 0;min-width:0}.dot span{display:inline-grid;place-items:center;border-radius:999px;min-width:32px;height:29px;background:#f1e8de;font-size:12px;font-weight:600}.dot:hover span,.dot.active span{outline:2px solid #aa5c67;outline-offset:2px}.dot[data-fret="0"]{border-right:2px solid #a7887c}.legend{font-size:12px;margin-top:8px;color:#694e50}.panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}.panels .card{min-width:0}.sub{font-size:13px;margin:8px 0 12px}.actions{margin:12px 0}.beats{display:flex;gap:8px;margin:12px 0}.beat{width:28px;height:6px;background:#e7d3cd;border-radius:999px}.beat.on{background:var(--wine)}input[type=range]{accent-color:var(--wine);width:min(100%,260px)}.tab{background:#eee2d7;padding:10px 12px;border-radius:9px;overflow:auto;white-space:pre;font-size:13px}.hint{font-size:12px;color:#70575b}.footer{padding:8px 0 25px;color:#78565b}.toggle{display:flex;gap:7px;align-items:center;font-size:13px}.toggle input{accent-color:var(--wine)}@media(max-width:720px){.panels{grid-template-columns:1fr}.card{padding:16px}.art{opacity:.44;width:85%}.setup{grid-template-columns:1fr 1.5fr}.setup button{justify-self:start}.hero .wrap{padding:35px 0}.mast .eyebrow{font-size:9px;letter-spacing:.1em}}@media(prefers-reduced-motion:no-preference){.dot span,.btn{transition:background-color .14s}}
