:root{--void: #0b0a10;--panel: #14121c;--panel-2: #1a1725;--wire: #2b2739;--ink: #ece9f4;--muted: #8d8899;--pink: #f472b6;--purple: #a78bfa;--pink-dim: rgba(244, 114, 182, .14);--serif: "DM Serif Display", "Georgia", serif;--mono: "Fragment Mono", "SFMono-Regular", Menlo, monospace}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(1100px 500px at 78% -10%,rgba(167,139,250,.07),transparent 60%),radial-gradient(900px 420px at 12% 110%,rgba(244,114,182,.05),transparent 60%),var(--void);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.55}.app{max-width:1280px;margin:0 auto;padding:28px 28px 12px}.masthead{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--wire)}.wordmark h1{font-family:var(--serif);font-weight:400;font-size:46px;margin:0;letter-spacing:.01em}.wordmark .accent{color:var(--pink);font-style:italic}.tagline{margin:2px 0 0;color:var(--muted);font-size:11.5px;letter-spacing:.06em}.settings{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:flex-end}.setting-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:5px}.segmented{display:inline-flex;border:1px solid var(--wire);border-radius:8px;overflow:hidden;background:var(--panel)}.segmented button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:var(--muted);font-family:var(--mono);font-size:11px;padding:7px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;border-right:1px solid var(--wire);transition:color .15s,background .15s}.segmented button:last-child{border-right:none}.segmented button:hover{color:var(--ink)}.segmented button.on{color:var(--pink);background:var(--pink-dim)}.swatch{width:12px;height:12px;border-radius:3px;border:1px solid rgba(0,0,0,.5);display:inline-block}.swatch-rosewood{background:linear-gradient(135deg,#6d4229,#4e2c1b)}.swatch-maple{background:linear-gradient(135deg,#e6c288,#cfa663)}.swatch-ebony{background:linear-gradient(135deg,#241d17,#120e0b)}.modes{display:flex;gap:6px;padding:16px 0 20px}.modes button{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:var(--serif);font-size:19px;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:10px;padding:8px 16px;cursor:pointer;transition:color .15s,border-color .15s,background .15s}.modes button:hover{color:var(--ink)}.modes button.on{color:var(--ink);border-color:var(--wire);background:var(--panel);box-shadow:inset 0 0 0 1px #f472b640}.workbench{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start}.panel{background:var(--panel);border:1px solid var(--wire);border-radius:14px;padding:20px;position:sticky;top:18px}.panel-title{font-family:var(--serif);font-weight:400;font-size:27px;margin:0 0 16px;line-height:1.2}.panel-title em{color:var(--purple)}.field{margin-bottom:12px}.field label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:5px}.field select{width:100%;font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--panel-2);border:1px solid var(--wire);border-radius:8px;padding:9px 10px;cursor:pointer}.note-row{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}.pill{display:inline-flex;flex-direction:column;align-items:center;min-width:34px;padding:5px 8px 4px;border-radius:8px;background:var(--panel-2);border:1px solid var(--wire);color:var(--ink);font-size:13px;line-height:1.1}.pill small{color:var(--muted);font-size:9px;margin-top:2px}.pill-root{border-color:var(--pink);color:var(--pink)}.pill-empty{color:var(--muted);font-style:italic}.action{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--void);background:linear-gradient(120deg,var(--pink),var(--purple));border:none;border-radius:9px;padding:11px 12px;cursor:pointer;margin:6px 0 10px;transition:filter .15s,transform .1s}.action:hover{filter:brightness(1.1)}.action:active{transform:translateY(1px)}.hint{color:var(--muted);font-size:11.5px;margin:8px 0 0}.voicing-nav{display:grid;grid-template-columns:40px 1fr 40px;gap:8px;align-items:stretch;margin:14px 0 4px}.voicing-nav>button{-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:var(--serif);font-size:24px;color:var(--pink);background:var(--panel-2);border:1px solid var(--wire);border-radius:9px;cursor:pointer;transition:border-color .15s}.voicing-nav>button:hover{border-color:var(--pink)}.voicing-meta{text-align:center;background:var(--panel-2);border:1px solid var(--wire);border-radius:9px;padding:7px 6px}.voicing-meta strong{display:block;font-size:16px;letter-spacing:.12em;color:var(--ink);font-weight:400}.voicing-meta span{font-size:10px;color:var(--muted)}.results{margin-top:16px}.results h3{font-family:var(--serif);font-weight:400;font-size:17px;margin:0 0 8px;color:var(--purple)}.results ul{list-style:none;margin:0;padding:0}.results li{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--wire);font-size:12px}.results li strong{color:var(--pink);font-weight:400;min-width:58px}.results li span{color:var(--muted)}.stage-wrap{min-width:0;display:flex;justify-content:center}.stage{position:relative;--cell: 30px}.stage-horizontal{width:100%;max-width:1020px;padding:42px 70px 48px}.stage-horizontal .board{position:relative;height:212px;width:100%}.stage-vertical{padding:70px 56px;--cell: 27px}.stage-vertical .board{position:relative;width:212px;height:min(74vh,760px);min-height:620px}.stage-horizontal .board{--grain-angle: 0deg;--shade-angle: 180deg;--wind-angle: 90deg}.stage-vertical .board{--grain-angle: 90deg;--shade-angle: 90deg;--wind-angle: 0deg}.board{border-radius:7px;box-shadow:0 22px 44px #0000008c,0 4px 10px #00000080,inset 0 0 0 1px #0000008c}.board-sheen{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;z-index:3;background:linear-gradient(var(--shade-angle),rgba(255,255,255,.13),rgba(255,255,255,.02) 22%,rgba(255,255,255,0) 45%,rgba(0,0,0,.14) 82%,rgba(0,0,0,.26))}.wood-rosewood{background:radial-gradient(140% 90% at 50% 40%,#ffd6aa0f,#0000004d 95%),repeating-linear-gradient(var(--grain-angle),rgba(0,0,0,0) 0 6px,rgba(22,9,4,.32) 6px 8px,rgba(0,0,0,0) 8px 15px,rgba(96,52,27,.22) 15px 17px,rgba(0,0,0,0) 17px 26px),repeating-linear-gradient(calc(var(--grain-angle) + 1.5deg),#0000 0,#0000 21px,#0e060340 21px,#0e060340 23px),linear-gradient(var(--shade-angle),#63391f,#6f4429 26%,#52301c 52%,#683d22 78%,#472818)}.wood-maple{background:radial-gradient(140% 90% at 50% 40%,#fffff024,#603e1229 95%),repeating-linear-gradient(var(--grain-angle),rgba(0,0,0,0) 0 9px,rgba(148,100,38,.14) 9px 10px,rgba(0,0,0,0) 10px 22px,rgba(120,78,26,.1) 22px 24px,rgba(0,0,0,0) 24px 31px),repeating-linear-gradient(calc(var(--grain-angle) - 1.2deg),#0000 0,#0000 34px,#9e6c2c1a 34px,#9e6c2c1a 36px),linear-gradient(var(--shade-angle),#ecca92,#e2ba79 30%,#d3a75f 55%,#e3bd80 80%,#c99e58)}.wood-ebony{background:radial-gradient(140% 90% at 50% 40%,#b4a0c80d,#00000073 95%),repeating-linear-gradient(var(--grain-angle),rgba(0,0,0,0) 0 8px,rgba(0,0,0,.4) 8px 10px,rgba(0,0,0,0) 10px 19px,rgba(84,70,58,.12) 19px 21px,rgba(0,0,0,0) 21px 30px),linear-gradient(var(--shade-angle),#221b16,#191411 35%,#100d0a 60%,#1c1613 85%,#0c0a08)}.nut{position:absolute;z-index:4;background:linear-gradient(var(--wind-angle),#b6ab8e,#efe6ce 30%,#fbf5e4 50%,#cdc2a4 75%,#a2977c);box-shadow:0 0 5px #0000008c,inset 0 0 2px #fff9}.nut-h{top:0;bottom:0;width:10px;border-radius:3px}.nut-v{left:0;right:0;height:10px;border-radius:3px}.fret{position:absolute;z-index:4}.fret-h{top:2px;bottom:2px;width:4.5px;margin-left:-2.25px;border-radius:2.5px;background:linear-gradient(90deg,#5e5e66,#d9d9e2 32%,#fff,#9c9ca6 68%,#4c4c54);box-shadow:2.5px 0 3.5px #00000073,-1px 0 1px #ffffff2e}.fret-v{left:2px;right:2px;height:4.5px;margin-top:-2.25px;border-radius:2.5px;background:linear-gradient(180deg,#5e5e66,#d9d9e2 32%,#fff,#9c9ca6 68%,#4c4c54);box-shadow:0 2.5px 3.5px #00000073,0 -1px 1px #ffffff2e}.inlay{position:absolute;z-index:4;width:15px;height:15px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 34% 28%,#fff,#ece7f1 38%,#c4bbd2 68%,#9a90ab);box-shadow:inset 0 -1px 2px #00000059,0 0 3px #00000080}.string{position:absolute;z-index:5;pointer-events:none;border-radius:99px}.string-h{left:-38px;right:4px;box-shadow:0 2.5px 3px #0000008c}.string-v{top:-38px;bottom:4px;box-shadow:2.5px 0 3px #0000008c}.stage-flipped .string-h{left:4px;right:-38px}.stage-flipped .string-v{top:4px;bottom:-38px}.string-plain{background:linear-gradient(var(--shade-angle),#fafafc,#ffffff 22%,#a0a0aa 58%,#e2e2e8 82%,#77777f)}.string-wound{background:repeating-linear-gradient(var(--wind-angle),rgba(0,0,0,.38) 0 1px,rgba(255,246,220,.34) 1px 2px,rgba(0,0,0,0) 2px 3px),linear-gradient(var(--shade-angle),#efc98a,#d4a75f 42%,#86622f 72%,#b98d4e)}.string-h.vibrating{animation:vib-h .65s ease-out}.string-v.vibrating{animation:vib-v .65s ease-out}@keyframes vib-h{0%{transform:translateY(0)}8%{transform:translateY(2.6px);filter:blur(.7px)}18%{transform:translateY(-2.4px);filter:blur(.7px)}30%{transform:translateY(1.7px);filter:blur(.5px)}44%{transform:translateY(-1.1px);filter:blur(.35px)}60%{transform:translateY(.6px);filter:blur(.2px)}78%{transform:translateY(-.3px)}to{transform:translateY(0);filter:blur(0)}}@keyframes vib-v{0%{transform:translate(0)}8%{transform:translate(2.6px);filter:blur(.7px)}18%{transform:translate(-2.4px);filter:blur(.7px)}30%{transform:translate(1.7px);filter:blur(.5px)}44%{transform:translate(-1.1px);filter:blur(.35px)}60%{transform:translate(.6px);filter:blur(.2px)}78%{transform:translate(-.3px)}to{transform:translate(0);filter:blur(0)}}.cell{position:absolute;z-index:6;width:var(--cell);height:var(--cell);transform:translate(-50%,-50%);border-radius:50%;border:none;background:transparent;color:transparent;font-family:var(--mono);font-size:10.5px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .12s,box-shadow .12s;padding:0}.cell:hover{background:#f472b638;box-shadow:0 0 0 1.5px #f472b6bf;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9)}.cell:focus-visible{outline:2px solid var(--pink);outline-offset:2px;color:#fff}.cell-ghost{color:#ffffffb8;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 6px rgba(0,0,0,.7)}.cell-root,.cell-tone,.cell-selected{color:#16121e;font-weight:700;box-shadow:0 2px 6px #0000008c,inset 0 1px 1px #ffffff73}.cell-root{background:radial-gradient(circle at 35% 30%,#ffc7e2,var(--pink) 60%,#d24a92)}.cell-tone{background:radial-gradient(circle at 35% 30%,#dccfff,var(--purple) 60%,#7d63d6)}.cell-selected{background:radial-gradient(circle at 35% 30%,#fff,#f6e3ee 55%,#edc2da);box-shadow:0 0 0 2.5px var(--pink),0 0 14px #f472b6cc,0 2px 6px #0000008c}.cell-root:hover,.cell-tone:hover,.cell-selected:hover{color:#16121e;filter:brightness(1.08)}.rail-label{position:absolute;z-index:6;transform:translate(-50%,-50%);font-size:12px;color:var(--muted);letter-spacing:.05em}.rail-muted{color:var(--pink);font-size:15px}.rail-num{position:absolute;z-index:6;transform:translate(-50%,-50%);font-size:10.5px;color:var(--muted);opacity:.85}.colophon{padding:26px 2px 10px;color:var(--muted);font-size:10.5px;letter-spacing:.05em;text-align:right}@media (max-width: 980px){.workbench{grid-template-columns:1fr}.panel{position:static;order:2}.stage-wrap{order:1;overflow-x:auto}.stage-horizontal{min-width:760px}.wordmark h1{font-size:36px}}@media (prefers-reduced-motion: reduce){.string-h.vibrating,.string-v.vibrating{animation:none}*{transition:none!important}}