:root{--bg:#111111;--panel:#181818;--line:#2A2A2A;--red:#CC2929;--orange:#E8894A;--text:#F8F7F6;--white:#FFFFFF;--glow:rgba(232,137,74,.35);--teal:#58B0C4;--glow-note:0 0 14px rgba(232,137,74,.1);--glow-note-hover:0 0 22px rgba(232,137,74,.2),0 0 8px rgba(232,137,74,.07);--glow-note-active:0 0 34px rgba(232,137,74,.28),0 0 12px rgba(232,137,74,.12),inset 0 0 0 1px rgba(232,137,74,.16);--glow-panel:0 0 24px rgba(232,137,74,.05);--glow-roman-focus:0 0 10px rgba(232,137,74,.08);}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:radial-gradient(circle at top,rgba(232,137,74,.08),transparent 40%),#111111;color:var(--text);font-family:Inter,system-ui,sans-serif;min-height:100vh;}
.app-shell{display:flex;flex-direction:column;gap:28px;padding:40px;max-width:1600px;margin:auto;}
.app-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;}
.app-body{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;}
.title-block h1{font-size:48px;font-weight:800;letter-spacing:-2px;color:var(--red);margin-bottom:6px;}
.title-block p{color:#888;font-size:16px;}
.key-selector{display:flex;flex-direction:column;align-items:center;gap:6px;}
.key-selector-label{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#777;}
.key-select{display:block;width:100%;max-width:200px;padding:8px 32px 8px 12px;font-family:inherit;font-size:13px;font-weight:500;color:rgba(248,247,246,.82);background-color:rgba(255,255,255,.03);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;border:1px solid rgba(255,255,255,.07);border-left:2px solid rgba(232,137,74,.55);border-radius:10px;appearance:none;-webkit-appearance:none;cursor:default;}
.key-select:focus{outline:none;}
.learning-toggles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:2px;}
.learning-toggle{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgba(255,255,255,.07);border-radius:999px;background:rgba(255,255,255,.025);cursor:default;font-size:12px;font-weight:500;color:#888;letter-spacing:.02em;}
.learning-toggle input{width:13px;height:13px;margin:0;accent-color:var(--orange);cursor:default;}
.learning-toggle:has(input:checked){border-color:rgba(232,137,74,.22);color:rgba(248,247,246,.82);background:rgba(232,137,74,.05);}
.wheel-container{display:flex;justify-content:center;align-items:center;}
.wheel-section{display:flex;justify-content:center;}
.wheel-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.overlay-triads,.overlay-intervals{opacity:0;transition:opacity .4s ease;}
.overlay-triads.is-visible,.overlay-intervals.is-visible{opacity:1;}
.triad-triangle{fill-opacity:1;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:fill .4s ease,stroke .4s ease;}
.triad-triangle-major{fill:rgba(204,41,41,.036);stroke:rgba(232,137,74,.27);stroke-width:1;}
.triad-triangle-major.triad-family-focus{fill:rgba(204,41,41,.07);stroke:rgba(232,137,74,.44);stroke-width:1.25;}
.interval-guide{stroke:rgba(255,255,255,.09);stroke-width:1;fill:none;stroke-linecap:round;}
.interval-label{font-family:inherit;font-size:11px;font-weight:600;fill:rgba(248,247,246,.46);letter-spacing:.06em;text-anchor:middle;dominant-baseline:middle;}
.interval-label.interval-edge-focus{fill:rgba(248,247,246,.72);}
.interval-label.interval-edge-dim{opacity:.32;}
.interval-guide.interval-edge-focus{stroke:rgba(232,137,74,.28);stroke-width:1.15;}
.panel-relative.panel-degree-focus p{color:rgba(248,247,246,.88);}
.outer-wheel{width:700px;height:700px;border-radius:50%;border:2px solid rgba(255,255,255,.08);position:relative;isolation:isolate;background:radial-gradient(circle at 50% 48%,rgba(232,137,74,.14),transparent 38%),radial-gradient(circle at 50% 50%,rgba(255,255,255,.045),transparent 52%),radial-gradient(circle,rgba(255,255,255,.02),transparent 72%);box-shadow:inset 0 0 100px rgba(0,0,0,.58),inset 0 12px 48px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.04);}
.outer-wheel::before,.outer-wheel::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;}
.outer-wheel::before{inset:12.5%;border:1px solid rgba(255,255,255,.05);}
.outer-wheel::after{inset:24%;border:1px solid rgba(255,255,255,.03);}
.note{width:82px;height:82px;border-radius:50%;position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:var(--white);background:#1B1B1B;border:2px solid rgba(232,137,74,.4);box-shadow:var(--glow-note);cursor:pointer;transition:box-shadow .38s ease,border-color .38s ease,background-color .38s ease,transform .38s ease;}
.note:hover:not(.note-active){border-color:rgba(232,137,74,.55);box-shadow:var(--glow-note-hover);transform:scale(1.03);}
.note.note-active{border-color:rgba(232,137,74,.8);box-shadow:var(--glow-note-active);background:#242424;transform:scale(1.04);}
.note-1{left:44.143%;top:-1.286%;}
.note-2{left:82.286%;top:16.857%;}
.note-3{left:89.286%;top:49.714%;}
.note-4{left:66.857%;top:83.429%;}
.note-5{left:26.714%;top:86.143%;}
.note-6{left:-0.857%;top:50.143%;}
.note-7{left:12%;top:12%;}
.roman{position:absolute;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;padding:5px 12px;font-size:20px;line-height:1;color:rgba(248,247,246,.66);font-weight:600;text-align:center;white-space:nowrap;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.065);transform:translate(-50%,-50%);transition:opacity .4s ease,border-color .38s ease,color .38s ease;}
.romans-hidden .roman{opacity:0;}
.roman.roman-focus{border-color:rgba(232,137,74,.3);background:rgba(232,137,74,.08);color:rgba(248,247,246,.9);}
.panel-degree-focus{border-color:rgba(232,137,74,.14);background:rgba(232,137,74,.028);box-shadow:var(--glow-panel);}
.panel-modes #panel-modes{font-size:17px;line-height:1.95;color:rgba(248,247,246,.78);}
.panel-modes .mode-entry{color:rgba(248,247,246,.7);}
.panel-modes .mode-entry-focus{color:rgba(248,247,246,.96);font-weight:500;background:rgba(232,137,74,.07);padding:1px 5px;border-radius:4px;}
.panel-modes .mode-sep{color:rgba(248,247,246,.28);}
.panel-function .function-name{font-size:19px;font-weight:600;color:rgba(248,247,246,.9);margin-bottom:8px;}
.panel-function .function-explain{font-size:15px;line-height:1.6;color:rgba(248,247,246,.68);}
.modes-panel-active .panel-modes{border-color:rgba(232,137,74,.12);background:rgba(232,137,74,.025);}
.roman-1{left:50%;top:15.714%;}
.roman-2{left:77.857%;top:30%;}
.roman-3{left:84.286%;top:52.143%;}
.roman-4{left:67.143%;top:79.571%;}
.roman-5{left:36.857%;top:81.571%;}
.roman-6{left:16%;top:54.429%;}
.roman-7{left:25.714%;top:25.714%;}
.info-panel{display:flex;flex-direction:column;gap:24px;}
.panel{background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.055);border-radius:20px;padding:22px 24px;backdrop-filter:blur(10px);}
.panel h3{color:var(--orange);margin-bottom:12px;letter-spacing:1.8px;text-transform:uppercase;font-size:13px;font-weight:600;}
.panel p{font-size:19px;line-height:1.55;color:rgba(248,247,246,.86);}
.panel-chord table{width:100%;border-collapse:collapse;margin-top:6px;}
.panel-chord th{color:var(--orange);text-align:left;padding:0 12px 10px 0;font-size:12px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;}
.panel-chord td{padding:11px 12px 11px 0;border-top:1px solid rgba(255,255,255,.07);font-size:17px;color:rgba(248,247,246,.84);}
.panel-chord.panel-degree-focus td{color:rgba(248,247,246,.94);}
@media(max-width:1200px){.app-body{grid-template-columns:1fr;}.outer-wheel{width:560px;height:560px;}}
@media(max-width:650px){.outer-wheel{width:min(88vw,400px);height:min(88vw,400px);}.note{width:48px;height:48px;font-size:18px;}.roman{font-size:12px;padding:3px 8px;min-width:2em;}}