:root{
  --ink:#11131b;
  --ink-2:#171b2b;
  --indigo:#1c2238;
  --indigo-2:#242c48;
  --indigo-3:#2e3858;
  --parchment:#efe6cf;
  --parchment-dim:#bdb398;
  --brass:#c9a15a;
  --brass-bright:#efd38f;
  --teal:#59a69b;
  --teal-dark:#2f655e;
  --crimson:#bc5960;
  --green:#68b58d;
  --line:rgba(201,161,90,.24);
  --line-soft:rgba(239,230,207,.10);
  --shadow:0 12px 35px rgba(0,0,0,.30);
  --display:"Amiri","Noto Naskh Arabic","Times New Roman",serif;
  --body:"Spectral","Palatino Linotype","Book Antiqua",Georgia,serif;
  --mono:"IBM Plex Mono","Cascadia Mono","Consolas",monospace;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink);color:var(--parchment)}
body{
  font-family:var(--body);
  background:
    radial-gradient(900px 520px at 8% -15%,rgba(79,156,146,.13),transparent 62%),
    radial-gradient(800px 500px at 105% 0%,rgba(201,161,90,.10),transparent 58%),
    var(--ink);
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--brass-bright);outline-offset:2px
}
#viewport{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden}
#app{
  width:1280px;height:720px;transform-origin:center center;
  display:grid;grid-template-rows:72px 250px 44px 354px 0px;
  background:
    linear-gradient(160deg,rgba(28,34,56,.28),transparent 38%),
    rgba(17,19,27,.97);
  border:1px solid rgba(239,230,207,.08);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  overflow:hidden;
}
.topbar{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:20px;padding:9px 20px 8px;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand-mark{
  width:86px;height:49px;border:1px solid var(--brass);display:grid;place-items:center;
  color:var(--brass-bright);font:700 17px/1 var(--body);letter-spacing:.08em;
  background:linear-gradient(145deg,var(--indigo-2),var(--indigo));
  box-shadow:inset 0 0 18px rgba(201,161,90,.08);
  text-transform:none
}
.brand-copy{min-width:0}
.eyebrow{display:none}
.title-line{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.title-ar{font:700 29px/1.05 var(--display);color:var(--brass-bright);direction:rtl}
.title-en{font:500 italic 18px/1.1 var(--body);color:var(--parchment)}
.subtitle{
  font:400 11.5px/1.25 var(--body);color:var(--parchment-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:780px
}
.header-actions{display:flex;align-items:center;gap:8px}
.source-chip{display:none}
.icon-btn{
  min-width:36px;height:34px;border:1px solid var(--line);background:var(--indigo);
  color:var(--parchment);font:600 11px/1 var(--mono);padding:0 10px
}
.icon-btn:hover{background:var(--indigo-2);border-color:var(--brass)}
.language-select{
  width:104px;height:34px;border:1px solid var(--line);background:var(--indigo);
  color:var(--parchment);padding:0 8px;font:600 9.5px/1 var(--mono)
}
.language-select:hover{border-color:var(--brass)}
body.rtl-ui .title-en,
body.rtl-ui .subtitle,
body.rtl-ui .card-title,
body.rtl-ui .card-kicker,
body.rtl-ui .concept-copy,
body.rtl-ui .field label,
body.rtl-ui .interval-text,
body.rtl-ui .step-heading,
body.rtl-ui .step-copy,
body.rtl-ui .micro,
body.rtl-ui .quiz-question,
body.rtl-ui .feedback,
body.rtl-ui .pattern-copy,
body.rtl-ui .statusbar,
body.rtl-ui .btn,
body.rtl-ui .tab,
body.rtl-ui .quiz-mode{
  direction:rtl;
}
body.rtl-ui .brand-copy,
body.rtl-ui .concept-copy,
body.rtl-ui .step-main,
body.rtl-ui .quiz-body,
body.rtl-ui .pattern-body{
  text-align:right;
}
body.rtl-ui .mono,
body.rtl-ui .data-val,
body.rtl-ui .formula-box,
body.rtl-ui .step-equation,
body.rtl-ui .big-ratio,
body.rtl-ui .summary-v,
body.rtl-ui .tone-hz,
body.rtl-ui .tone-cents,
body.rtl-ui table,
body.rtl-ui select,
body.rtl-ui input{
  direction:ltr;
}
body.rtl-ui .mono-caption{direction:ltr}
body.rtl-ui .mono-caption span{direction:rtl}
body.rtl-ui .note-sub,
body.rtl-ui .card-kicker,
body.rtl-ui .eyebrow{direction:ltr}

.mono-panel{
  padding:6px 18px 6px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(17,19,27,.78),rgba(28,34,56,.45));
  display:grid;grid-template-rows:16px 104px 116px;gap:4px
}
.instrument-wrap{
  position:relative;border-top:1px solid var(--line-soft);padding-top:0;overflow:visible;margin-top:-22px
}
#instrumentSvg{display:block;width:100%;height:132px;overflow:visible}
.instrument-panel-bg{fill:url(#instrumentPanelFade)}
.instrument-body-main{fill:url(#bodyGrad);stroke:#734c34;stroke-width:2.75;filter:drop-shadow(0 8px 12px rgba(0,0,0,.21))}
.instrument-body-inner{fill:none;stroke:rgba(112,72,46,.22);stroke-width:1.2}
.instrument-rib{stroke:rgba(106,68,44,.18);stroke-width:0.92;fill:none}
.instrument-soundhole{fill:#65462f;opacity:.86}
.instrument-soundhole-ring{fill:none;stroke:#f0e2c0;stroke-width:1.05;opacity:.78}
.instrument-bridge{stroke:#f1e5cb;stroke-width:4;stroke-linecap:round}
.instrument-tail{fill:#9b7854;stroke:#684631;stroke-width:1.3}
.instrument-neck{fill:url(#neckGrad);stroke:#7d563c;stroke-width:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.10))}
.instrument-pegbox{fill:url(#pegGrad);stroke:#684632;stroke-width:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.10))}
.instrument-string{stroke:#f6edde;stroke-width:1.14;opacity:.97}
.instrument-fret-mark{stroke:rgba(250,239,214,.11);stroke-width:1}
.instrument-peg{fill:#84563e;stroke:#684633;stroke-width:1.05}
.instrument-rail{stroke:rgba(89,166,155,.24);stroke-width:1.65}
.instrument-fretline{stroke:rgba(239,230,207,.10);stroke-width:1}
.instrument-hotzone{fill:transparent;cursor:pointer}
.instrument-dot{fill:rgba(89,166,155,.84);stroke:var(--ink);stroke-width:1.0}
.instrument-dot.dim{opacity:.36}
.instrument-dot.gold{fill:var(--brass-bright);stroke:#f4e2b4;stroke-width:1.2}
.instrument-guide{stroke:rgba(239,230,207,.08);stroke-width:1;stroke-dasharray:3 4}
.instrument-focus-line{stroke:#ead8a5;stroke-width:1.75;opacity:.86}
.instrument-focus-label{fill:var(--brass-bright);font:700 10px var(--display)}
.instrument-open-label{fill:rgba(239,230,207,.46);font:600 9px var(--mono)}
.instrument-caption{display:none}
.mono-caption{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  font:500 9.5px/1 var(--mono);color:var(--parchment-dim);letter-spacing:.03em;
  height:18px
}
.mono-caption span:nth-child(2){color:var(--teal);text-align:center}
.mono-caption span:last-child{text-align:right}
#monoSvg{display:block;width:100%;height:126px}
.fret{cursor:pointer}
.fret .dot{fill:var(--teal);stroke:var(--ink);stroke-width:1.5}
.fret.endpoint .dot{fill:var(--brass-bright)}
.fret .label{
  fill:var(--parchment-dim);font-family:var(--display);font-size:15px;font-weight:700;
  pointer-events:none
}
.fret .small-label{
  fill:rgba(239,230,207,.45);font-family:var(--mono);font-size:7.5px;pointer-events:none
}
.fret .stem{stroke:rgba(239,230,207,.22);stroke-width:1}
.fret:hover .dot,.fret.active .dot{fill:var(--brass-bright);stroke:var(--brass-bright)}
.fret.active .label{fill:var(--brass-bright);font-size:18px}
.fret.constructed:not(.active) .dot{fill:var(--teal)}
.interval-limma{fill:rgba(89,166,155,.32)}
.interval-comma{fill:rgba(188,89,96,.42)}
.guide-line{stroke:var(--brass);stroke-width:1.5;stroke-dasharray:4 4}
.guide-text{fill:var(--brass-bright);font:600 10px var(--mono)}

.tabs{
  display:grid;grid-template-columns:repeat(6,1fr);align-items:stretch;
  padding:0 18px;border-bottom:1px solid var(--line);background:rgba(17,19,27,.82)
}
.tab{
  border:0;border-bottom:2px solid transparent;background:transparent;color:var(--parchment-dim);
  font:600 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase
}
.tab:hover{color:var(--parchment)}
.tab.active{color:var(--brass-bright);border-bottom-color:var(--brass);background:rgba(201,161,90,.04)}
.tab-number{color:var(--teal);margin-right:7px}

.workspace{position:relative;padding:10px 18px 8px;overflow:hidden}
.panel{display:none;width:100%;height:100%}
.panel.active{display:block;animation:fade .17s ease}
@keyframes fade{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.card{
  border:1px solid var(--line);background:linear-gradient(155deg,var(--indigo),var(--ink-2));
  box-shadow:var(--shadow);min-width:0;min-height:0;overflow:hidden
}
.card-head{
  height:35px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line-soft);padding:0 12px
}
.card-title{
  font:600 13px/1 var(--body);color:var(--parchment);margin:0
}
.card-kicker{
  font:600 8.5px/1 var(--mono);letter-spacing:.10em;text-transform:uppercase;color:var(--teal)
}
.muted{color:var(--parchment-dim)}
.micro{font:400 9.5px/1.32 var(--body);color:var(--parchment-dim)}
.mono{font-family:var(--mono)}
.arabic{font-family:var(--display);direction:rtl}
.btn{
  height:30px;border:1px solid var(--line);padding:0 11px;
  background:var(--indigo-2);color:var(--parchment);
  font:600 9.5px/1 var(--mono);letter-spacing:.02em
}
.btn:hover{border-color:var(--brass);background:var(--indigo-3)}
.btn.primary{background:var(--teal-dark);border-color:var(--teal);color:#f5eee0}
.btn.brass{background:rgba(201,161,90,.14);border-color:var(--brass);color:var(--brass-bright)}
.btn.danger{background:rgba(188,89,96,.10);border-color:var(--crimson);color:#e99499}
.btn:disabled{opacity:.35;cursor:default}
select,input[type=number]{
  height:28px;border:1px solid var(--line);background:var(--indigo-2);color:var(--parchment);
  padding:0 8px;font:500 10px var(--mono);min-width:0
}
input[type=range]{accent-color:var(--brass);height:18px;width:100%}
.field{display:grid;gap:3px;min-width:0}
.field label{font:600 8px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--parchment-dim)}

/* EXPLORE */
.explore-grid{height:100%;display:grid;grid-template-columns:290px 1fr 285px;gap:10px}
.note-card{display:grid;grid-template-rows:94px 1fr 45px}
.note-hero{
  padding:10px 13px;display:grid;grid-template-columns:66px 1fr;gap:11px;align-items:center;
  border-bottom:1px solid var(--line-soft)
}
.note-orb{
  width:62px;height:62px;border:1px solid var(--brass);border-radius:50%;
  display:grid;place-items:center;background:rgba(201,161,90,.07);
  font:700 34px/1 var(--display);color:var(--brass-bright)
}
.note-name{font:600 17px/1.1 var(--body);color:var(--parchment)}
.note-sub{font:500 9.5px/1.2 var(--mono);color:var(--teal);margin-top:5px}
.data-list{padding:8px 12px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.data-item{border:1px solid var(--line-soft);padding:6px 7px;background:rgba(255,255,255,.018)}
.data-key{display:block;font:600 7.8px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--parchment-dim);margin-bottom:4px}
.data-val{display:block;font:600 11px/1.15 var(--mono);color:var(--parchment);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note-audio{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px 10px;border-top:1px solid var(--line-soft)}
.concept-card{display:grid;grid-template-rows:35px 1fr 74px}
.concept-body{display:grid;grid-template-columns:1.1fr .9fr;gap:10px;padding:9px 11px}
.concept-copy h3{font:600 15px/1.15 var(--body);margin:0 0 6px;color:var(--brass-bright)}
.concept-copy p{font:400 10.5px/1.35 var(--body);margin:0 0 7px;color:var(--parchment-dim)}
.formula-box{
  border-left:2px solid var(--brass);padding:7px 9px;background:rgba(201,161,90,.05);
  font:600 10px/1.45 var(--mono);color:var(--parchment)
}
.control-stack{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-content:start}
.explore-footer{
  border-top:1px solid var(--line-soft);display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:7px 11px
}
.interval-card{display:grid;grid-template-rows:35px 1fr 49px}
.interval-body{padding:9px 11px}
.interval-badge{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--teal);
  color:var(--teal);font:600 9px/1 var(--mono);padding:5px 8px;margin-bottom:8px
}
.interval-badge.comma{border-color:var(--crimson);color:#e58b90}
.big-ratio{font:600 26px/1 var(--mono);color:var(--brass-bright);margin:4px 0 7px}
.interval-text{font:400 10px/1.35 var(--body);color:var(--parchment-dim)}
.step-strip{display:flex;gap:3px;flex-wrap:wrap;margin-top:9px}
.step-chip{
  width:24px;height:21px;display:grid;place-items:center;
  font:700 9px/1 var(--mono);border:1px solid var(--line-soft)
}
.step-chip.L{background:rgba(89,166,155,.18);color:#80c7be}
.step-chip.C{background:rgba(188,89,96,.18);color:#e1858a}
.interval-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 10px;border-top:1px solid var(--line-soft)}

/* CONSTRUCTION */
.construct-grid{height:100%;display:grid;grid-template-columns:330px 1fr 360px;gap:10px}
.step-info{display:grid;grid-template-rows:35px 1fr 51px}
.step-main{padding:10px 13px}
.step-count{font:600 9px/1 var(--mono);color:var(--teal);letter-spacing:.08em;text-transform:uppercase}
.step-symbol{font:700 42px/1 var(--display);color:var(--brass-bright);margin:4px 0}
.step-heading{font:600 15px/1.12 var(--body);margin:0 0 7px}
.step-copy{font:400 10.5px/1.36 var(--body);color:var(--parchment-dim);margin:0 0 8px}
.step-equation{border-left:2px solid var(--brass);padding:7px 8px;background:rgba(201,161,90,.05);font:600 9.5px/1.35 var(--mono)}
.step-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:9px 10px;border-top:1px solid var(--line-soft)}
.guide-card{display:grid;grid-template-rows:35px 1fr 69px}
.guide-visual{position:relative;padding:10px 13px}
.guide-line-large{height:4px;background:var(--brass);position:absolute;left:28px;right:28px;top:76px}
.guide-end{position:absolute;top:56px;width:6px;height:44px;background:var(--parchment-dim)}
.guide-end.left{left:25px}.guide-end.right{right:25px}
.guide-current{
  position:absolute;top:66px;width:18px;height:18px;border-radius:50%;
  background:var(--brass-bright);border:3px solid var(--ink);transform:translateX(-50%);
  box-shadow:0 0 0 2px var(--brass)
}
.guide-label{
  position:absolute;top:103px;transform:translateX(-50%);
  font:700 24px/1 var(--display);color:var(--brass-bright)
}
.guide-division{position:absolute;top:59px;width:1px;height:36px;background:rgba(239,230,207,.20)}
.guide-note{
  position:absolute;left:20px;right:20px;bottom:13px;text-align:center;
  font:500 9px/1.3 var(--mono);color:var(--parchment-dim)
}
.guide-summary{
  border-top:1px solid var(--line-soft);display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 10px
}
.summary-box{border:1px solid var(--line-soft);padding:6px;text-align:center}
.summary-k{font:600 7.5px/1 var(--mono);color:var(--parchment-dim);text-transform:uppercase}
.summary-v{font:600 10.5px/1.2 var(--mono);color:var(--parchment);margin-top:4px}
.steps-card{display:grid;grid-template-rows:35px 1fr}
.step-grid{padding:8px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(6,1fr);gap:5px}
.step-tile{
  border:1px solid var(--line-soft);background:rgba(255,255,255,.015);color:var(--parchment-dim);
  display:grid;grid-template-columns:22px 28px 1fr;align-items:center;gap:4px;padding:0 6px;
  min-width:0;text-align:left
}
.step-tile:hover{border-color:var(--brass)}
.step-tile.done{background:rgba(89,166,155,.09);color:var(--parchment)}
.step-tile.current{border-color:var(--brass);background:rgba(201,161,90,.12);color:var(--brass-bright)}
.tile-num{font:600 8px var(--mono);color:var(--teal)}
.tile-ar{font:700 18px var(--display);text-align:center}
.tile-name{font:500 8px/1.15 var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* LISTEN */
.listen-grid{height:100%;display:grid;grid-template-columns:330px 1fr 330px;gap:10px}
.sound-controls{display:grid;grid-template-rows:35px 1fr 52px}
.sound-body{padding:10px 12px;display:grid;gap:8px;align-content:start}
.range-line{display:grid;grid-template-columns:100px 1fr 58px;gap:8px;align-items:center}
.range-line label{font:600 8.5px var(--mono);color:var(--parchment-dim);text-transform:uppercase}
.range-value{font:600 10px var(--mono);color:var(--brass-bright);text-align:right}
.sound-buttons{padding:9px 10px;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.sound-buttons .btn{padding:0 4px;font-size:8.2px}
.compare-card{display:grid;grid-template-rows:35px 1fr 52px}
.compare-body{padding:10px 12px;display:grid;grid-template-columns:1fr 72px 1fr;gap:10px;align-items:center}
.tone-box{border:1px solid var(--line);background:rgba(201,161,90,.045);padding:12px;text-align:center}
.tone-label{font:700 42px/1 var(--display);color:var(--brass-bright)}
.tone-latin{font:600 8.5px var(--mono);color:var(--teal);margin:4px 0 8px}
.tone-hz{font:600 18px/1 var(--mono);color:var(--parchment)}
.tone-cents{font:500 9px var(--mono);color:var(--parchment-dim);margin-top:5px}
.vs{font:600 11px var(--mono);color:var(--parchment-dim);text-align:center}
.compare-actions{padding:9px 10px;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pattern-card{display:grid;grid-template-rows:35px 1fr 52px}
.pattern-body{padding:10px 12px}
.pattern-equation{font:600 13px/1.4 var(--mono);color:var(--brass-bright);margin:4px 0 8px}
.pattern-copy{font:400 10px/1.35 var(--body);color:var(--parchment-dim)}
.pattern-actions{padding:9px 10px;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:1fr 1fr;gap:6px}

/* TRAIN + DATA */
.train-grid{height:100%;display:grid;grid-template-columns:365px 1fr;gap:10px}
.quiz-card{display:grid;grid-template-rows:35px 38px 1fr 52px}
.quiz-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line-soft)}
.quiz-mode{
  border:0;background:transparent;color:var(--parchment-dim);font:600 9px var(--mono)
}
.quiz-mode.active{color:var(--brass-bright);background:rgba(201,161,90,.06)}
.quiz-body{padding:10px 12px}
.quiz-question{font:600 14px/1.32 var(--body);margin:0 0 10px;color:var(--parchment)}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.quiz-option{
  min-height:40px;border:1px solid var(--line-soft);background:var(--indigo-2);color:var(--parchment);
  font:600 10px/1.2 var(--mono);padding:5px 7px
}
.quiz-option:hover{border-color:var(--brass)}
.quiz-option.correct{border-color:var(--green);color:#99dab8;background:rgba(104,181,141,.10)}
.quiz-option.wrong{border-color:var(--crimson);color:#eb969b;background:rgba(188,89,96,.10)}
.feedback{
  margin-top:9px;border-left:2px solid var(--teal);padding:6px 8px;
  min-height:38px;font:400 9.5px/1.35 var(--body);color:var(--parchment-dim);
  background:rgba(89,166,155,.04)
}
.quiz-footer{padding:9px 10px;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.score{font:600 10px var(--mono);color:var(--teal)}
.data-card{display:grid;grid-template-rows:35px 1fr}
.table-wrap{padding:4px 7px 5px;overflow:hidden}
table{width:100%;height:100%;border-collapse:collapse;table-layout:fixed}
th{
  height:20px;border-bottom:1px solid var(--line);color:var(--teal);
  font:600 7.8px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;text-align:right;padding:1px 5px
}
td{
  height:18px;border-bottom:1px solid rgba(239,230,207,.055);
  color:var(--parchment-dim);font:500 8.6px/1 var(--mono);text-align:right;padding:0 5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
th:first-child,td:first-child{text-align:center;width:28px}
th:nth-child(2),td:nth-child(2){text-align:center;width:43px}
td:nth-child(2){font:700 13px/1 var(--display);color:var(--brass-bright)}
tr.selected-row td{background:rgba(201,161,90,.08);color:var(--parchment)}
tr:hover td{background:rgba(89,166,155,.06)}

.statusbar{display:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== SCHOLARLY ATLAS EXTENSIONS ===== */
.skip-link{position:fixed;left:12px;top:-50px;z-index:9999;background:#f3dfaa;color:#11131b;padding:8px 12px;font:700 11px var(--mono)}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--brass-bright);outline-offset:2px}
.header-actions{gap:5px}.header-actions .icon-btn{padding:0 8px;font-size:9.5px}
.source-btn{border-color:rgba(201,161,90,.55)!important;color:var(--brass-bright)!important}
.instrument-note{position:absolute;right:8px;bottom:2px;z-index:3;padding:3px 7px;border:1px solid rgba(201,161,90,.22);background:rgba(17,19,27,.78);color:rgba(239,230,207,.54);font:500 7.6px/1.2 var(--mono);pointer-events:none}
body.view-theory #instrumentSvg{opacity:.10}body.view-practical #monoSvg{opacity:.16}body.view-practical .mono-caption{opacity:.25}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

.learn-grid{height:100%;display:grid;grid-template-columns:255px 1fr 285px;gap:10px}
.lesson-list{display:grid;grid-template-rows:35px 1fr}.lesson-items{padding:7px;display:grid;gap:5px;align-content:start}
.lesson-btn{display:grid;grid-template-columns:28px 1fr;gap:7px;align-items:center;min-height:39px;border:1px solid var(--line-soft);background:var(--indigo-2);color:var(--parchment-dim);text-align:left;padding:5px 7px;font:600 9px/1.18 var(--body)}
.lesson-btn:hover,.lesson-btn.active{border-color:var(--brass);color:var(--parchment);background:rgba(201,161,90,.08)}
.lesson-num{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;border:1px solid var(--teal);font:700 8px var(--mono);color:var(--teal)}
.lesson-main{display:grid;grid-template-rows:35px 1fr 50px}.lesson-content{padding:12px 15px;overflow:hidden}
.lesson-status{display:inline-block;padding:3px 7px;border:1px solid var(--teal);color:var(--teal);font:700 7.8px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.lesson-title{font:600 21px/1.1 var(--body);color:var(--parchment);margin:9px 0 5px}.lesson-objective{font:500 10px/1.35 var(--body);color:var(--brass-bright);margin-bottom:10px}
.lesson-copy{font:400 11px/1.45 var(--body);color:var(--parchment-dim)}.lesson-formula{margin-top:11px;padding:9px;border:1px solid var(--line);background:rgba(89,166,155,.05);color:var(--parchment);font:600 13px/1.35 var(--mono)}
.lesson-actions{border-top:1px solid var(--line-soft);display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:9px 10px}
.source-card{display:grid;grid-template-rows:35px 1fr}.source-body{padding:10px 12px;display:grid;gap:8px;align-content:start}.source-row{border-left:2px solid var(--teal);padding:6px 8px;background:rgba(89,166,155,.04)}
.source-row strong{display:block;color:var(--parchment);font:600 10px var(--body);margin-bottom:2px}.source-row span{display:block;color:var(--parchment-dim);font:400 8.8px/1.3 var(--body)}
.progress-line{height:5px;background:rgba(239,230,207,.08);overflow:hidden}.progress-line span{display:block;height:100%;background:var(--teal);width:16.6%}

.modes-grid{height:100%;display:grid;grid-template-columns:330px 1fr 300px;gap:10px}.species-card,.mode-builder,.modal-notes{display:grid;grid-template-rows:35px 1fr}
.species-list{padding:9px;display:grid;gap:7px;align-content:start}.species-btn{border:1px solid var(--line-soft);background:var(--indigo-2);color:var(--parchment);padding:9px;text-align:left;font:600 10px var(--body)}.species-btn.active{border-color:var(--brass);background:rgba(201,161,90,.08)}
.species-code{float:right;font:700 10px var(--mono);color:var(--teal)}.builder-body{padding:12px 14px}.builder-title{font:600 18px var(--body);color:var(--parchment);margin-bottom:7px}.builder-copy{font:400 10.5px/1.42 var(--body);color:var(--parchment-dim)}
.interval-chain{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:14px 0}.interval-block{border:1px solid var(--line);padding:10px;text-align:center;background:rgba(255,255,255,.018)}.interval-block b{display:block;font:700 16px var(--mono);color:var(--brass-bright)}.interval-block span{font:500 8px var(--mono);color:var(--parchment-dim)}
.species-result{border:1px solid var(--teal);padding:10px;color:var(--teal);font:600 11px/1.35 var(--mono)}.modal-body{padding:10px 12px;display:grid;gap:8px}.caution-box{border:1px solid rgba(201,161,90,.35);background:rgba(201,161,90,.055);padding:8px;color:var(--parchment-dim);font:400 9.2px/1.35 var(--body)}

.audio-advanced{display:grid;grid-template-columns:1fr 1fr;gap:7px}.audio-mini{display:grid;gap:3px}.audio-mini label{font:600 7.5px var(--mono);color:var(--parchment-dim);text-transform:uppercase}.audio-mini select,.audio-mini input{width:100%}
.validation-summary{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center}.validation-badge{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:2px solid var(--teal);font:700 11px var(--mono);color:var(--teal)}
.validation-list{margin:0;padding-left:17px;color:var(--parchment-dim);font:400 9px/1.35 var(--body)}.validation-list li.pass::marker{color:var(--green)}.validation-list li.fail::marker{color:var(--crimson)}

.dialog-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.72);display:none;place-items:center}.dialog-backdrop.open{display:grid}.scholar-dialog{width:min(850px,92vw);max-height:84vh;overflow:auto;border:1px solid var(--brass);background:#151823;color:var(--parchment);box-shadow:0 30px 90px rgba(0,0,0,.65)}
.dialog-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:#151823}.dialog-head h2{margin:0;font:600 18px var(--body);color:var(--brass-bright)}.dialog-content{padding:14px 16px;display:grid;gap:12px}.dialog-section{border:1px solid var(--line-soft);padding:11px}.dialog-section h3{margin:0 0 6px;font:600 13px var(--body);color:var(--teal)}.dialog-section p,.dialog-section li{font:400 10px/1.45 var(--body);color:var(--parchment-dim)}.dialog-section a{color:var(--brass-bright)}

body.rtl-ui .lesson-btn,body.rtl-ui .species-btn{text-align:right}body.rtl-ui .source-row{border-left:0;border-right:2px solid var(--teal)}

/* ===== COMPREHENSIVE LANGUAGE + VIEW REFINEMENTS ===== */
.mono-panel{position:relative}
.view-state-label{
  position:absolute;right:24px;top:5px;z-index:6;
  padding:3px 8px;border:1px solid rgba(89,166,155,.35);
  background:rgba(17,19,27,.86);color:var(--teal);
  font:700 7.6px/1.15 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  pointer-events:none;opacity:.72
}
#monoSvg,.instrument-wrap{transition:opacity .18s ease,filter .18s ease,transform .18s ease}
#viewModeBtn.view-active{border-color:var(--teal);color:var(--teal);background:rgba(89,166,155,.09);box-shadow:inset 0 -2px 0 rgba(89,166,155,.65)}

/* Theory mode must read as a distinct, prominent state rather than a faint dimming. */
body.view-theory .mono-panel{
  grid-template-rows:18px 1fr;
  gap:5px;padding-top:7px;padding-bottom:8px;
  background:linear-gradient(180deg,rgba(17,19,27,.92),rgba(28,34,56,.67))
}
body.view-theory .instrument-wrap{display:none}
body.view-theory #monoSvg{
  display:block;height:205px;opacity:1;
  border:1px solid rgba(201,161,90,.30);
  background:linear-gradient(180deg,rgba(201,161,90,.025),rgba(89,166,155,.03));
  filter:drop-shadow(0 0 12px rgba(201,161,90,.10))
}
body.view-theory #monoSvg > line{stroke-width:3.8;filter:drop-shadow(0 0 4px rgba(201,161,90,.35))}
body.view-theory .fret .dot{stroke-width:1.8}
body.view-theory .fret .label{font-size:17px;fill:rgba(239,230,207,.90)}
body.view-theory .fret.active .label{font-size:21px}
body.view-theory .fret .small-label{font-size:8.4px;fill:rgba(239,230,207,.63)}
body.view-theory .fret .stem{stroke:rgba(239,230,207,.34);stroke-width:1.2}
body.view-theory .interval-limma{fill:rgba(89,166,155,.50)}
body.view-theory .interval-comma{fill:rgba(188,89,96,.60)}
body.view-theory .view-state-label{opacity:1;border-color:var(--brass);color:var(--brass-bright)}
body.view-theory .mono-caption{font-size:10.2px;color:rgba(239,230,207,.76)}

/* Practical mode retains the theoretical baseline but gives the instrument priority. */
body.view-practical .mono-panel{grid-template-rows:16px 24px 1fr;gap:3px}
body.view-practical #monoSvg{height:24px;opacity:.18;filter:grayscale(.25)}
body.view-practical .instrument-wrap{margin-top:-3px}
body.view-practical #instrumentSvg{height:195px;opacity:1;filter:drop-shadow(0 7px 13px rgba(0,0,0,.18))}
body.view-practical .instrument-note{bottom:6px;opacity:.92}
body.view-practical .view-state-label{opacity:1}

body.rtl-ui .view-state-label{right:auto;left:24px}
body.rtl-ui .lesson-actions .btn,body.rtl-ui .dialog-section,body.rtl-ui .modal-body{text-align:right}
body.rtl-ui .validation-list{padding-left:0;padding-right:17px}
body.rtl-ui .species-code{float:left}

/* Localized long copy should remain readable without breaking the fixed viewport. */
body.rtl-ui .lesson-content,body.rtl-ui .source-body,body.rtl-ui .builder-body{direction:rtl;text-align:right}
body.rtl-ui .lesson-formula,body.rtl-ui .species-result,body.rtl-ui .interval-chain{direction:ltr;text-align:center}
.dialog-section em,.dialog-section a{unicode-bidi:isolate}

/* ========================================================================
   PREMIUM SCHOLARLY ATLAS — PRESENTATION AND VISUALIZATION LAYER
   ======================================================================== */
:root{
  --atlas-gold:#e8c977;
  --atlas-gold-soft:rgba(232,201,119,.16);
  --atlas-teal:#72c7ba;
  --atlas-blue:#263351;
  --atlas-panel:rgba(24,29,45,.94);
  --atlas-glass:rgba(20,24,37,.78);
}
body{
  background:
    radial-gradient(1050px 620px at 8% -18%,rgba(89,166,155,.18),transparent 64%),
    radial-gradient(900px 560px at 101% -4%,rgba(201,161,90,.14),transparent 61%),
    linear-gradient(135deg,#0d1018 0%,#121725 48%,#0e1119 100%);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(circle at center,#000 15%,transparent 86%);
}
#app{
  position:relative;border-radius:16px;
  border:1px solid rgba(232,201,119,.24);
  background:
    linear-gradient(148deg,rgba(39,49,77,.30),transparent 37%),
    linear-gradient(180deg,rgba(16,19,29,.98),rgba(15,18,28,.98));
  box-shadow:
    0 36px 100px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 50px rgba(201,161,90,.055);
}
#app::after{
  content:"";position:absolute;inset:0;z-index:40;pointer-events:none;border-radius:16px;
  box-shadow:inset 0 0 90px rgba(0,0,0,.25);
}
.topbar{
  position:relative;z-index:50;
  grid-template-columns:minmax(0,1fr) auto;
  padding:8px 18px 7px;
  background:
    linear-gradient(90deg,rgba(32,41,66,.95),rgba(20,24,38,.94) 54%,rgba(29,35,55,.94));
  border-bottom:1px solid rgba(232,201,119,.25);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.topbar::after{
  content:"";position:absolute;left:18px;right:18px;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--brass),rgba(89,166,155,.6),transparent);
  opacity:.65;
}
.brand{gap:13px}.brand-mark{
  position:relative;width:74px;height:52px;border-radius:10px;
  border:1px solid rgba(232,201,119,.64);
  background:
    radial-gradient(circle at 30% 18%,rgba(232,201,119,.18),transparent 40%),
    linear-gradient(145deg,#2c3657,#151a2a);
  box-shadow:inset 0 0 22px rgba(232,201,119,.08),0 8px 18px rgba(0,0,0,.18);
  letter-spacing:.12em;text-shadow:0 1px 12px rgba(232,201,119,.22)
}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;border:1px solid rgba(232,201,119,.20);inset:5px;border-radius:7px}
.brand-mark::after{inset:10px;border-color:rgba(89,166,155,.14)}
.brand-copy{display:grid;gap:1px}.title-ar{font-size:27px;text-shadow:0 2px 14px rgba(232,201,119,.16)}
.title-en{font-size:17px}.brand-meta{display:flex;align-items:center;gap:10px;min-width:0}
.subtitle{max-width:520px;font-size:10.5px}.brand-facts{display:flex;gap:5px;align-items:center;white-space:nowrap}
.brand-facts span{
  padding:2px 6px;border-radius:999px;border:1px solid rgba(239,230,207,.10);
  background:rgba(255,255,255,.025);color:rgba(239,230,207,.52);
  font:600 6.9px/1.1 var(--mono);letter-spacing:.03em
}
.brand-facts .edition-badge{border-color:rgba(232,201,119,.28);color:var(--atlas-gold);background:rgba(232,201,119,.055)}
.header-actions{gap:5px;align-items:center}.legacy-view-button{display:none!important}
.icon-btn,.language-select,.view-choice{
  border-radius:7px;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease
}
.icon-btn:hover,.view-choice:hover{transform:translateY(-1px)}
.language-select{width:92px;background:rgba(13,16,25,.72);border-color:rgba(239,230,207,.13)}
.source-btn{height:32px;background:linear-gradient(180deg,rgba(232,201,119,.12),rgba(232,201,119,.04))!important}
.compact-icon{min-width:33px;width:33px;padding:0!important}.fullscreen-compact{font-size:15px!important}
.focus-btn{height:32px;border-color:rgba(114,199,186,.33);color:var(--atlas-teal);background:rgba(114,199,186,.055)}
.focus-btn[aria-pressed="true"]{color:#10151f;background:var(--atlas-teal);border-color:var(--atlas-teal);box-shadow:0 0 18px rgba(114,199,186,.25)}
.view-switch{
  display:grid;grid-template-columns:repeat(3,1fr);padding:2px;gap:2px;height:32px;width:202px;
  border:1px solid rgba(239,230,207,.13);border-radius:8px;background:rgba(10,13,21,.66)
}
.view-choice{
  border:0;background:transparent;color:rgba(239,230,207,.52);padding:0 7px;
  font:700 7.5px/1 var(--mono);letter-spacing:.035em
}
.view-choice.active{
  color:#11151f;background:linear-gradient(180deg,#f0d993,#cda95c);
  box-shadow:0 2px 10px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.30)
}

.mono-panel{
  position:relative;z-index:4;padding:7px 18px 6px;
  border-bottom:1px solid rgba(232,201,119,.20);
  background:
    radial-gradient(700px 190px at 50% 8%,rgba(89,166,155,.07),transparent 70%),
    linear-gradient(180deg,rgba(11,14,22,.92),rgba(26,33,52,.62));
  overflow:hidden;
}
.mono-panel::before{
  content:"";position:absolute;inset:7px 12px 7px;border:1px solid rgba(232,201,119,.08);border-radius:10px;pointer-events:none
}
.mono-panel::after{
  content:"";position:absolute;width:170px;height:170px;right:-70px;top:-85px;border:1px solid rgba(232,201,119,.06);border-radius:50%;pointer-events:none
}
.view-state-label{
  top:7px;right:22px;border-radius:999px;padding:4px 9px;
  background:rgba(12,15,24,.86);border-color:rgba(114,199,186,.25);
  box-shadow:0 5px 16px rgba(0,0,0,.18);font-size:7px
}
.mono-caption{position:relative;z-index:5;padding:0 4px;color:rgba(239,230,207,.55)}
#monoSvg{position:relative;z-index:2;overflow:visible}
.legacy-string-line{stroke:rgba(201,161,90,.16);stroke-width:5}
.theory-base-string{stroke:rgba(239,230,207,.18);stroke-width:5;stroke-linecap:round}
.sounding-segment{
  stroke:var(--atlas-gold);stroke-width:4;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(232,201,119,.25));transition:x2 .24s cubic-bezier(.2,.7,.2,1)
}
.stopped-segment{stroke:rgba(114,199,186,.38);stroke-width:2.2;stroke-dasharray:5 5;transition:x1 .24s cubic-bezier(.2,.7,.2,1)}
.selected-projection{stroke:rgba(232,201,119,.62);stroke-width:1.3;stroke-dasharray:2 3;transition:x1 .24s ease,x2 .24s ease}
.length-bracket{fill:none;stroke:rgba(239,230,207,.27);stroke-width:1;transition:d .24s ease}
.length-bracket-text{fill:rgba(239,230,207,.62);font:700 8px var(--mono)}
.octave-arc{fill:none;stroke:rgba(114,199,186,.30);stroke-width:1.2;stroke-dasharray:4 4}
.octave-arc-label{fill:rgba(114,199,186,.70);font:700 7.2px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ruler-line{stroke:rgba(239,230,207,.10);stroke-width:1}.ruler-tick{stroke:rgba(239,230,207,.18);stroke-width:1}.ruler-label{fill:rgba(239,230,207,.36);font:600 6.4px var(--mono)}
.fret .dot{transition:r .18s ease,fill .18s ease,filter .18s ease}.fret:hover .dot{filter:drop-shadow(0 0 5px rgba(232,201,119,.55))}
.fret.active .dot{filter:drop-shadow(0 0 8px rgba(232,201,119,.72))}.fret.active .label{text-shadow:0 0 8px rgba(232,201,119,.25)}

.theory-hud{
  position:absolute;z-index:8;left:25px;top:31px;width:151px;padding:8px 9px 7px;border-radius:10px;
  border:1px solid rgba(232,201,119,.22);background:linear-gradient(155deg,rgba(25,31,49,.94),rgba(12,15,24,.90));
  box-shadow:0 10px 26px rgba(0,0,0,.28),inset 0 0 18px rgba(232,201,119,.025);
  backdrop-filter:blur(8px)
}
.hud-primary{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:7px;padding-bottom:6px;margin-bottom:5px;border-bottom:1px solid rgba(239,230,207,.08)}
.hud-note{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;background:linear-gradient(145deg,rgba(232,201,119,.18),rgba(232,201,119,.04));border:1px solid rgba(232,201,119,.38);font:700 21px/1 var(--display);color:var(--atlas-gold)}
.hud-primary b{display:block;font:600 9.5px/1.15 var(--body);color:var(--parchment);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-primary small{display:block;margin-top:2px;color:rgba(239,230,207,.42);font:600 6.4px/1 var(--mono);text-transform:uppercase;letter-spacing:.07em}
.hud-metric{display:flex;justify-content:space-between;align-items:baseline;padding:2.5px 0}.hud-metric span{font:600 6.4px/1 var(--mono);color:rgba(239,230,207,.43);text-transform:uppercase}.hud-metric b{font:700 8px/1 var(--mono);color:var(--parchment)}
.hud-model{display:flex;align-items:center;gap:5px;margin-top:5px;padding-top:5px;border-top:1px solid rgba(239,230,207,.07);font:600 6px/1 var(--mono);color:var(--atlas-teal)}.hud-model i{width:5px;height:5px;border-radius:50%;background:var(--atlas-teal);box-shadow:0 0 8px rgba(114,199,186,.55)}
.stage-legend{position:absolute;z-index:7;right:24px;top:31px;display:flex;gap:5px}.stage-legend span{display:flex;align-items:center;gap:5px;padding:4px 7px;border-radius:999px;border:1px solid rgba(239,230,207,.09);background:rgba(12,15,24,.72);font:600 6.4px/1 var(--mono);color:rgba(239,230,207,.52)}.stage-legend i{width:14px;height:4px;border-radius:4px}.legend-limma{background:rgba(89,166,155,.70)}.legend-comma{background:rgba(188,89,96,.80)}
.presentation-hint{display:none;position:absolute;z-index:9;left:50%;bottom:10px;transform:translateX(-50%);padding:5px 9px;border-radius:999px;background:rgba(12,15,24,.78);border:1px solid rgba(239,230,207,.10);color:rgba(239,230,207,.48);font:600 6.8px var(--mono)}
.instrument-note{right:13px;bottom:7px;border-radius:999px;padding:4px 8px;background:rgba(12,15,24,.82);box-shadow:0 4px 14px rgba(0,0,0,.18)}

.tabs{position:relative;z-index:5;padding:0 16px;gap:5px;background:linear-gradient(180deg,rgba(14,17,26,.98),rgba(20,24,38,.94));border-bottom-color:rgba(232,201,119,.18)}
.tab{position:relative;border-radius:8px 8px 0 0;letter-spacing:.065em;transition:background .16s ease,color .16s ease,transform .16s ease}.tab::before{content:"";position:absolute;left:11px;right:11px;top:7px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);opacity:0}.tab:hover{background:rgba(255,255,255,.025);transform:translateY(-1px)}.tab.active{background:linear-gradient(180deg,rgba(232,201,119,.10),rgba(232,201,119,.025));box-shadow:inset 0 -2px var(--atlas-gold)}.tab.active::before{opacity:1}.tab-number{display:inline-grid;place-items:center;width:21px;height:21px;border-radius:6px;background:rgba(89,166,155,.07);border:1px solid rgba(89,166,155,.20);margin-right:7px;font-size:7px}
.workspace{z-index:3;background:radial-gradient(700px 300px at 50% -20%,rgba(89,166,155,.035),transparent 70%)}
.workspace-context{position:absolute;z-index:9;right:28px;top:4px;display:flex;align-items:center;gap:7px;color:rgba(239,230,207,.38);font:600 6.5px/1 var(--mono);pointer-events:none}.workspace-context i{width:3px;height:3px;border-radius:50%;background:var(--atlas-gold)}.workspace-context span:last-child{color:rgba(232,201,119,.68)}
.card{border-radius:10px;border-color:rgba(232,201,119,.17);background:linear-gradient(155deg,rgba(31,39,62,.94),rgba(18,22,34,.95));box-shadow:0 14px 34px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.018)}
.card-head{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);border-bottom-color:rgba(239,230,207,.08)}
.card-title{letter-spacing:.01em}.card-kicker{color:var(--atlas-teal)}
.btn,select,input[type=number]{border-radius:6px}.btn{transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 12px rgba(0,0,0,.18)}.btn.primary{background:linear-gradient(180deg,#39766d,#2d5f58)}.btn.brass{background:linear-gradient(180deg,rgba(232,201,119,.18),rgba(232,201,119,.08))}
.lesson-btn,.species-btn,.quiz-option,.step-tile{border-radius:7px;transition:transform .14s ease,border-color .14s ease,background .14s ease}.lesson-btn:hover,.species-btn:hover,.step-tile:hover{transform:translateX(2px)}body.rtl-ui .lesson-btn:hover,body.rtl-ui .species-btn:hover,body.rtl-ui .step-tile:hover{transform:translateX(-2px)}
.note-orb{border-radius:14px!important;box-shadow:0 9px 24px rgba(0,0,0,.22),inset 0 0 18px rgba(232,201,119,.10)}
.formula-box,.lesson-formula,.species-result{border-radius:7px;background:linear-gradient(135deg,rgba(89,166,155,.06),rgba(232,201,119,.035))}
.panel.active{animation:premiumPanel .24s cubic-bezier(.2,.7,.2,1)}@keyframes premiumPanel{from{opacity:0;transform:translateY(5px) scale(.997)}to{opacity:1;transform:none}}

/* Theory mode: a dedicated analytical stage. */
body.view-theory .mono-panel{
  background:
    radial-gradient(900px 240px at 52% 38%,rgba(89,166,155,.10),transparent 72%),
    linear-gradient(180deg,rgba(10,13,21,.98),rgba(26,33,52,.78));
}
body.view-theory #monoSvg{height:211px;border-radius:10px;border-color:rgba(232,201,119,.28);box-shadow:inset 0 0 35px rgba(232,201,119,.025),0 10px 28px rgba(0,0,0,.16)}
body.view-theory .theory-hud{top:36px;width:164px;background:linear-gradient(155deg,rgba(31,39,62,.97),rgba(13,16,25,.94));border-color:rgba(232,201,119,.35)}
body.view-theory .stage-legend{top:auto;bottom:15px;right:28px}
body.view-theory .sounding-segment{stroke-width:5}.view-theory .selected-projection{stroke-width:1.6}
body.view-theory .view-state-label{box-shadow:0 0 18px rgba(232,201,119,.12)}
/* Practical mode declutters theory HUD while keeping explicit context. */
body.view-practical .theory-hud{opacity:.38;transform:scale(.90);transform-origin:left top}.view-practical .stage-legend{display:none}

/* Focus presentation mode — suitable for projection and live explanation. */
body.stage-focus #app{grid-template-rows:72px 648px 0 0 0}
body.stage-focus .tabs,body.stage-focus .workspace,body.stage-focus .statusbar{display:none!important}
body.stage-focus .mono-panel{grid-template-rows:28px 286px 310px;gap:5px;padding:10px 22px 12px}
body.stage-focus #monoSvg{height:286px;border:1px solid rgba(232,201,119,.18);border-radius:12px;background:rgba(255,255,255,.012)}
body.stage-focus .instrument-wrap{margin-top:-46px}.stage-focus #instrumentSvg{height:320px}.stage-focus .theory-hud{top:48px;left:31px;transform:scale(1.22);transform-origin:left top}.stage-focus .stage-legend{top:47px;right:31px;transform:scale(1.15);transform-origin:right top}.stage-focus .presentation-hint{display:block}.stage-focus .view-state-label{top:14px;right:31px;font-size:8px}.stage-focus .mono-caption{font-size:11px}.stage-focus .fret .label{font-size:19px}.stage-focus .fret.active .label{font-size:24px}.stage-focus .fret .small-label{font-size:9px}
body.stage-focus.view-theory .mono-panel{grid-template-rows:28px 1fr}.stage-focus.view-theory #monoSvg{height:590px}.stage-focus.view-theory .theory-hud{top:65px}.stage-focus.view-theory .stage-legend{top:auto;bottom:32px}.stage-focus.view-practical .mono-panel{grid-template-rows:28px 35px 1fr}.stage-focus.view-practical #monoSvg{height:35px}.stage-focus.view-practical .instrument-wrap{margin-top:-4px}.stage-focus.view-practical #instrumentSvg{height:570px}.stage-focus.view-practical .theory-hud{top:75px;opacity:.88}

body.rtl-ui .theory-hud{left:auto;right:25px}body.rtl-ui .stage-legend{right:auto;left:24px}body.rtl-ui .workspace-context{right:auto;left:28px}body.rtl-ui .brand-meta{direction:rtl}body.rtl-ui .brand-facts{direction:rtl}.rtl-ui .hud-primary,.rtl-ui .hud-metric,.rtl-ui .hud-model{direction:rtl}.rtl-ui .hud-primary{text-align:right}
@media (prefers-reduced-motion:reduce){.sounding-segment,.stopped-segment,.selected-projection,.length-bracket{transition:none!important}}
.mono-panel.selection-flash .sounding-segment{animation:segmentGlow .42s ease-out}
@keyframes segmentGlow{0%{filter:drop-shadow(0 0 2px rgba(232,201,119,.18))}45%{filter:drop-shadow(0 0 11px rgba(232,201,119,.72))}100%{filter:drop-shadow(0 0 5px rgba(232,201,119,.25))}}

/* v4.2 alignment and control corrections */
.brand-mark{width:56px!important;height:56px!important;flex:0 0 56px!important;padding:4px!important;box-sizing:border-box;overflow:hidden;align-self:center}
.brand-mark img{width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;object-position:center!important;border-radius:8px}
.brand-mark::before,.brand-mark::after{display:none!important;pointer-events:none}
.fullscreen-compact{width:40px!important;min-width:40px!important;height:34px!important;padding:0!important;display:grid!important;place-items:center!important;overflow:visible!important}
.fullscreen-compact span{display:block;font-size:18px;line-height:1}

/* v4.3 final stability and alignment */
.brand{align-items:center!important}
.brand-mark{display:grid!important;place-items:center!important;align-self:center!important;margin:0!important;line-height:0!important}
.brand-mark img{width:86%!important;height:86%!important;margin:auto!important;object-fit:contain!important;object-position:center!important}