.viz-shell{margin:18px 0;padding:16px;border:1px solid var(--tone-53656b,#53656b);border-radius:12px;background:var(--tone-111d22,#111d22)}.viz-shell>summary{cursor:pointer;color:var(--tone-edbd82,#edbd82)}.viz-open{margin:12px 0}.viz-header h2{margin:16px 0 6px;color:var(--tone-edbd82,#edbd82)}.viz-header p{color:var(--tone-a5bbc1,#a5bbc1);font-size:11px}.viz-families{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:14px 0}.viz-family{padding:10px;border:1px solid var(--tone-34454e,#34454e);border-radius:6px;font-size:11px;color:var(--tone-81959e,#81959e)}.viz-family.home{border-bottom:3px solid var(--tone-8acbd9,#8acbd9)}.viz-family.source{color:var(--tone-edbd82,#edbd82);background:var(--tone-edbd8220,#edbd8220);border-color:var(--tone-edbd82,#edbd82)}.viz-body{display:grid;grid-template-columns:minmax(180px,330px) 1fr;gap:24px;align-items:center}.viz-wheel{position:relative;aspect-ratio:1;border:1px solid var(--tone-8acbd925,#8acbd925);border-radius:50%;background:radial-gradient(circle,var(--tone-213d3a88,#213d3a88),transparent 65%);margin:14px}.viz-tone{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--tone-53656b,#53656b);background:var(--tone-111d22,#111d22);color:var(--tone-677b86,#677b86);font-size:11px}.viz-tone.in-scale{color:var(--tone-c5d5d8,#c5d5d8)}.viz-tone.chord{background:var(--tone-edbd82,#edbd82);color:var(--tone-191d23,#191d23);box-shadow:0 0 20px var(--tone-edbd8255,#edbd8255)}.viz-tone.bass{outline:3px solid var(--tone-8acbd9,#8acbd9);outline-offset:3px}.viz-tone.root{border:2px solid white}.viz-links{position:absolute;inset:0}.viz-links i{position:absolute;height:1px;background:var(--tone-edbd8277,#edbd8277);transform-origin:0 0}.viz-tones h3{color:var(--tone-edbd82,#edbd82)}.viz-tone-label{display:inline-block;padding:8px;margin:4px;border:1px solid var(--tone-edbd8244,#edbd8244);border-radius:5px;font-size:12px}.viz-tones>p{font-size:11px}.viz-keyboard{display:flex;min-height:54px;overflow:auto;margin:14px 0}.viz-key{flex:1;min-width:12px;font-size:7px;padding-top:36px;text-align:center;background:var(--tone-cbd1d0,#cbd1d0);color:var(--tone-30353b,#30353b);border-right:1px solid var(--tone-15242d,#15242d)}.viz-key.black{background:var(--tone-172831,#172831);color:var(--tone-8796a2,#8796a2)}.viz-key.chord{background:var(--tone-edbd82,#edbd82);color:var(--tone-14242d,#14242d)}.viz-key.bass{box-shadow:inset 0 -12px var(--tone-8acbd9,#8acbd9)}.viz-timeline{position:relative;margin:14px 0}.viz-stages{display:flex;margin-left:80px;font-size:9px}.viz-stages>span{padding:7px 2px;overflow:hidden;border-left:1px solid var(--tone-677b86,#677b86);background:var(--tone-25363d,#25363d)}.viz-lane{display:grid;grid-template-columns:80px 1fr;position:relative;border-bottom:1px solid var(--tone-36474f,#36474f);min-height:62px}.viz-lane>strong{grid-row:1/3;font-size:10px;padding-top:12px;color:var(--tone-edbd82,#edbd82)}.viz-lane:nth-child(2)>strong{color:var(--tone-8acbd9,#8acbd9)}.viz-lane:nth-child(n+3)>strong{color:var(--tone-ef967f,#ef967f)}.viz-roll{position:relative;height:40px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(6.25% - 1px),var(--tone-ffffff09,#ffffff09) calc(6.25% - 1px),var(--tone-ffffff09,#ffffff09) 6.25%)}.viz-note{position:absolute;min-width:2px;height:5px;background:var(--tone-edbd82,#edbd82);border-radius:2px}.viz-lane:nth-child(2) .viz-note{background:var(--tone-8acbd9,#8acbd9)}.viz-lane:nth-child(n+3) .viz-note{background:var(--tone-ef967f,#ef967f)}.viz-lane>span{font-size:9px;color:var(--tone-718b95,#718b95)}.viz-lane.active>span{color:var(--tone-e5eddf,#e5eddf)}.viz-lane.silent{opacity:.45}.viz-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--tone-fff,#fff);pointer-events:none;transform:translateX(80px);left:0;max-width:calc(100% - 80px)}.viz-timeline{padding-right:80px}.viz-stages,.viz-lanes{margin-right:-80px}.viz-popup{max-width:1200px}.viz-popup>section{padding:12px;border:1px solid var(--tone-34454e,#34454e);border-radius:12px}@media(max-width:650px){.viz-body{grid-template-columns:1fr;gap:0}.viz-wheel{width:220px;margin:12px auto}.viz-families{grid-template-columns:repeat(2,1fr)}.viz-family{font-size:10px}.viz-tone-label{padding:5px}.viz-shell{padding:10px}}
.viz-head-track{position:absolute;inset:0 0 0 80px;pointer-events:none}.viz-head-track .viz-playhead{transform:none;max-width:none}.viz-keyboard{scrollbar-width:thin}.viz-key{min-width:14px}.viz-family.home:after{content:' · HOME';font-size:8px;color:var(--tone-8acbd9,#8acbd9)}.viz-family.source:before{content:'● ';color:var(--tone-edbd82,#edbd82)}
.viz-phase{height:150px;border:1px solid var(--tone-8acbd933,#8acbd933);border-radius:8px;background-color:var(--tone-14242b,#14242b);background-size:contain;background-position:center;background-repeat:no-repeat}.viz-phase+p{font-size:11px;line-height:1.8;color:var(--tone-8acbd9,#8acbd9)}