@import url('/assets/fonts/fonts.css');

:root{
  --forest-950:#0C231E;
  --forest-800:#134339;
  --teal-700:#155347;
  --sage-500:#A0BDB5;
  --sage-200:#DDE1D9;
  --gold-600:#D39A4A;
  --gold-200:#FAE7B7;
  --ivory-50:#FDFAF5;
  --card-50:#FAF7F3;
  --sand-100:#F1EDE6;
  --ink-900:#272623;
  --muted-600:#5F6966;
  --border-300:#DED8CF;
  --white:#FFFFFF;
  --key-octave:#D39A4A;
  --key-normal:#A0BDB5;
  --key-quarter:#C4624F;
  --key-quarter-octave:#76566D;

  /* Maqam keyboard + Keys X-Ray design controls */
  --kb-white-width:64px;
  --kb-white-height:220px;
  --kb-white-gap:2px;
  --kb-white-radius:7px;
  --kb-white-fill:#FFFFFF;
  --kb-white-border:#BFC3BE;
  --kb-white-border-width:1px;

  --kb-black-width:38px;
  --kb-black-height:130px;
  --kb-black-radius:6px;
  --kb-black-fill:#252525;
  --kb-black-border:#161616;
  --kb-black-border-width:1px;

  --kb-xray-width:20px;
  --kb-xray-height:90px;
  --kb-xray-y:0px;
  --kb-xray-radius:4px;
  --kb-xray-fill:rgba(196,176,166,.42);
  --kb-xray-border:rgba(12,35,30,.24);
  --kb-xray-border-width:.8px;
  --kb-xray-hover-fill:rgba(211,154,74,.36);
  --kb-xray-playing-fill:rgba(160,189,181,.62);

  /* Marker sizes */
  --regular-marker-size:20px;
  --x-ray-marker-size:16px;
  --kb-marker-white-y:188px;
  --kb-marker-black-y:105px;
  --kb-marker-xray-y:70px;
  --kb-marker-tonic-radius:3px;
  --radius:15px;
  --radius-lg:20px;
  --shadow:0 10px 30px rgba(12,35,30,.055);
  --heading-color:#0C231E;
  --surface-solid:#FFFFFF;
  --surface-glass:rgba(255,255,255,.88);
  --surface-glass-soft:rgba(255,255,255,.78);
  --page-top:#FFFFFF;
  --header-surface:rgba(253,250,245,.94);
  --control-surface:#FDFAF5;
  --notation-paper:#FFFFFF;
}

html[data-theme="dark"]{
  --ivory-50:#0E1714;
  --card-50:#14201C;
  --sand-100:#1B2824;
  --ink-900:#E7EEEA;
  --muted-600:#9BA9A3;
  --border-300:#31433D;
  --heading-color:#F1F6F3;
  --surface-solid:#15211D;
  --surface-glass:rgba(21,33,29,.93);
  --surface-glass-soft:rgba(21,33,29,.84);
  --page-top:#101B17;
  --header-surface:rgba(14,23,20,.95);
  --control-surface:#111C18;
  --shadow:0 12px 34px rgba(0,0,0,.26);
}


*{box-sizing:border-box}
html{background:var(--control-surface);color:var(--ink-900);font-family:"Montserrat",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 78% 13%,rgba(250,231,183,.24),transparent 24%),linear-gradient(180deg,var(--page-top) 0,var(--ivory-50) 28%,var(--ivory-50) 100%)}
button,select,input{font:inherit}
small{font-size:10px}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

h1,h2,h3,.brand-copy strong,.footer-brand strong{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif}

/* Header */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(222,216,207,.78);background:var(--header-surface);backdrop-filter:blur(18px)}
.header-inner{width:min(1460px,calc(100% - 36px));min-height:70px;margin:0 auto;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;min-width:245px}
.brand-logo-set{display:block;max-width:245px;width:100%;height:54px}
.brand-logo{display:block;max-width:245px;width:100%;height:54px;object-fit:contain;object-position:left center}
.theme-asset-dark{display:none!important}
html[data-theme="dark"] .theme-asset-light{display:none!important}
html[data-theme="dark"] .theme-asset-dark{display:block!important}
.brand-fallback{display:none;align-items:center;gap:10px}
.brand.brand-image-missing .brand-fallback{display:flex}
.brand-fallback-icons{width:50px;height:50px;flex:0 0 50px}
.brand-fallback-icons img{width:50px;height:50px;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;line-height:1.02}
.brand-copy strong{font-size:27px;font-weight:500;color:var(--heading-color)}
.brand-copy span{margin-top:6px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-600)}
.nav{display:flex;align-items:stretch;justify-content:center;gap:10px;flex:1;align-self:stretch}
.nav a{position:relative;display:grid;place-items:center;padding:0 8px;color:#737a77;font-size:13px;font-weight:500}
.nav a::after{content:"";position:absolute;left:5px;right:5px;bottom:13px;height:3px;border-radius:4px;background:transparent}
.nav a:hover,.nav a.active{color:var(--heading-color)}
.nav a.active{font-weight:700}
.nav a.active::after{background:var(--forest-950)}
.header-actions{display:flex;align-items:center;gap:9px;margin-left:auto}
.header-search{height:38px;width:264px;display:flex;align-items:center;border:1px solid var(--border-300);border-radius:9px;background:var(--surface-solid);overflow:hidden}
.header-search input{width:100%;height:100%;border:0;outline:0;padding:0 8px 0 12px;background:transparent;color:var(--ink-900);font-size:12px}
.header-search input::placeholder{color:#8c8f8d}
.search-submit{width:40px;height:100%;border:0;background:transparent;color:var(--heading-color);font-size:22px;line-height:1}
.share-btn{height:38px;border:1px solid var(--forest-950);border-radius:8px;padding:0 16px;background:var(--forest-950);color:#fff;font-size:12px;font-weight:700}
.logout-link{height:38px;display:grid;place-items:center;padding:0 10px;border-radius:8px;color:var(--muted-600);font-size:11px;font-weight:650}
.logout-link:hover{background:var(--sand-100);color:var(--heading-color)}
.theme-toggle{height:38px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border-300);border-radius:8px;padding:0 10px;background:var(--surface-solid);color:var(--heading-color);font-size:10px;font-weight:750}
.theme-toggle:hover{background:var(--sand-100)}
.theme-toggle-icon{width:17px;height:17px;display:grid;place-items:center;font-size:17px;line-height:1}
.theme-toggle-icon::before{content:"☾"}
html[data-theme="dark"] .theme-toggle-icon::before{content:"☼"}
.theme-toggle-text{min-width:26px;text-align:left}

/* Page / hero */
.page{width:min(1430px,calc(100% - 52px));margin:0 auto;padding:20px 0 46px}
.breadcrumb{display:flex;align-items:center;gap:10px;margin:2px 0 10px;color:var(--muted-600);font-size:11px}
.breadcrumb strong{color:var(--heading-color);font-weight:700}
.breadcrumb a:hover{color:var(--forest-800)}

.maqam-hero{position:relative;min-height:226px;display:grid;grid-template-columns:minmax(340px,1fr) minmax(360px,1.15fr) 210px;gap:24px;align-items:center;padding:8px 0 18px}
.hero-copy{position:relative;z-index:2;max-width:560px}
.hero-kicker{margin:0 0 3px;color:var(--teal-700);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.14em}
.hero-copy h1{margin:0;color:var(--heading-color);font-size:clamp(58px,6vw,82px);font-weight:500;line-height:.94;letter-spacing:-.025em}
.hero-subtitle{margin:8px 0 0;color:var(--gold-600);font-family:"Cormorant Garamond",serif;font-size:20px;font-weight:600}
.hero-summary{max-width:510px;margin:12px 0 0;color:var(--ink-900);font-size:13px;line-height:1.62}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.instrument-visual{position:relative;min-height:215px;display:grid;place-items:center;overflow:hidden}
.instrument-pattern{position:absolute;inset:5% 0;background:radial-gradient(circle at 50% 50%,rgba(211,154,74,.14),transparent 58%);opacity:.9}
.instrument-pattern::after{content:"";position:absolute;inset:15% 8%;background-image:linear-gradient(30deg,rgba(211,154,74,.08) 12%,transparent 12.5%,transparent 87%,rgba(211,154,74,.08) 87.5%),linear-gradient(150deg,rgba(211,154,74,.08) 12%,transparent 12.5%,transparent 87%,rgba(211,154,74,.08) 87.5%);background-size:22px 38px;mask-image:radial-gradient(circle,#000 0,transparent 72%)}
.instrument-visual img{position:relative;z-index:2;width:min(100%,560px);max-height:230px;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(12,35,30,.14))}
.instrument-visual img.image-missing{display:none}
.instrument-visual.instrument-emoji-fallback::after{content:attr(data-instrument-emoji);position:relative;z-index:2;display:grid;place-items:center;min-height:150px;font-size:clamp(72px,9vw,118px);line-height:1;filter:drop-shadow(0 12px 18px rgba(12,35,30,.12))}
.hero-side-card{align-self:center;display:grid;gap:5px;padding:16px 17px;border:1px solid var(--border-300);border-radius:12px;background:var(--surface-glass-soft);box-shadow:var(--shadow)}
.side-card-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-600);font-weight:700}
.hero-side-card strong{font-family:"Cormorant Garamond",serif;color:var(--heading-color);font-size:26px;font-weight:600}
.hero-side-card span:not(.side-card-label){font-size:11px;color:var(--muted-600)}

.fact-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border-300);border-radius:12px;background:var(--surface-glass-soft);box-shadow:var(--shadow);overflow:hidden;margin-bottom:13px}
.fact-strip>div{min-width:0;padding:12px 18px;border-right:1px solid var(--sand-100)}
.fact-strip>div:last-child{border-right:0}
.fact-strip span{display:block;margin-bottom:3px;color:var(--muted-600);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.fact-strip strong{display:block;color:var(--heading-color);font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fact-search-cell{padding:8px 12px!important}
.fact-search{height:32px;display:flex;align-items:center;border:1px solid var(--border-300);border-radius:8px;background:var(--control-surface);overflow:hidden}
.fact-search input{width:100%;min-width:0;height:100%;border:0;outline:0;padding:0 8px 0 10px;background:transparent;color:var(--ink-900);font-size:10px}
.fact-search input::placeholder{color:#8c8f8d}
.fact-search .search-submit{width:36px;height:100%;flex:0 0 36px;font-size:18px}
.pattern-display{font-size:14px!important;line-height:1.25;letter-spacing:.01em}

/* Controls */
.control-panel{display:grid;grid-template-columns:1.15fr .8fr .86fr .9fr 1.35fr;gap:12px;padding:14px 16px;border:1px solid var(--border-300);border-radius:12px;background:var(--surface-glass);box-shadow:var(--shadow);margin-bottom:13px}
.controls-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:9px;border-bottom:1px solid var(--sand-100)}
.controls-heading>div{display:flex;align-items:baseline;gap:9px;min-width:0}
.controls-heading strong{font-size:11px;color:var(--heading-color)}
.controls-kicker{color:var(--teal-700);font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.db-count{font-size:10px;color:var(--muted-600);white-space:nowrap}
.control{display:flex;flex-direction:column;gap:5px;min-width:0}
.control>span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:750;color:var(--muted-600)}
select{width:100%;height:36px;border:1px solid var(--border-300);border-radius:8px;background:var(--control-surface);color:var(--ink-900);padding:0 30px 0 9px;outline:none;font-size:11px}
select:focus{border-color:var(--sage-500);box-shadow:0 0 0 3px rgba(160,189,181,.18)}

/* Maqam selector hierarchy — approved Maqam Academy palette */
#maqam-select optgroup{color:#0C231E;font-weight:800}
#maqam-select option{color:var(--ink-900);font-weight:500;background:var(--control-surface)}
#maqam-select option:disabled{color:var(--muted-600);font-style:italic}
.control-inline{display:flex;gap:8px;align-items:center;min-height:36px;flex-wrap:wrap}
.checkbox{display:inline-flex;align-items:center;gap:6px;font-size:10px;color:var(--muted-600);font-weight:600;white-space:nowrap}
.checkbox input{accent-color:var(--forest-800)}
.checkbox.is-disabled{opacity:.4;cursor:not-allowed}
.checkbox.is-disabled input{cursor:not-allowed}
.segmented{display:inline-flex;border:1px solid var(--border-300);border-radius:8px;padding:2px;background:var(--sand-100)}
.segmented button{border:0;background:transparent;padding:6px 9px;border-radius:6px;color:var(--muted-600);font-size:10px;font-weight:750}
.segmented button.active{background:var(--forest-950);color:#fff}
.segmented button:disabled{opacity:.35;cursor:not-allowed}
.name-system-selector{display:flex;width:100%;min-width:0}
.name-system-selector button{flex:1;min-width:0;padding-left:7px;padding-right:7px;white-space:nowrap}
.qtm-row{grid-column:1/-1;padding-top:2px;border-top:1px solid var(--sand-100);display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.qtm-row>span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:750;color:var(--muted-600)}
.radio{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:650;color:var(--heading-color)}
.radio input{accent-color:var(--forest-800)}
.qglyph{font-size:22px;line-height:1;color:var(--key-quarter)}

/* Shared cards */
.content-grid{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(310px,1fr);gap:13px;align-items:start}
.main-column,.side-column{display:grid;gap:13px;min-width:0}
.surface-card{border:1px solid var(--border-300);border-radius:12px;background:var(--surface-glass);box-shadow:var(--shadow)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px}
.section-head>div:first-child{display:flex;align-items:center;gap:10px;min-width:0}
.section-icon{display:grid;place-items:center;width:25px;height:25px;color:var(--teal-700);font-size:18px;font-family:"Bravura Text","Bravura",serif;flex:0 0 auto}
.section-head h2{margin:0;color:var(--heading-color);font-size:20px;line-height:1;font-weight:600}
.section-head p{margin:3px 0 0;color:var(--muted-600);font-size:10px;line-height:1.4}
.section-head.small h2{font-size:19px}
.btn{border:1px solid var(--border-300);border-radius:8px;background:var(--surface-solid);color:var(--heading-color);padding:8px 12px;font-weight:700;font-size:10px;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.btn:hover{background:var(--sand-100);transform:translateY(-1px)}
.btn.primary{background:var(--forest-950);color:#fff;border-color:var(--forest-950)}
.btn.secondary{background:var(--surface-solid);border-color:var(--border-300)}
.btn.gold{background:var(--gold-200);border-color:#ead39d}
.btn.compact{padding:7px 10px}
.btn.wide{width:100%;padding:12px 16px}
.btn.is-on{background:var(--sage-200);border-color:var(--sage-500)}
.hero-play{min-width:140px}
.text-link{color:var(--teal-700);font-size:inherit;font-weight:750;white-space:normal;text-decoration:none}.text-link:hover,.text-link:focus-visible{text-decoration:underline;text-underline-offset:2px}

/* Scale degree strip + keyboard */
.keyboard-panel{overflow:hidden}
.scale-degree-strip{
  --degree-circle-size:42px;
  display:flex;
  align-items:flex-start;
  justify-content:safe center;
  width:100%;
  min-width:0;
  min-height:82px;
  padding:4px 23px 14px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-gutter:stable;
}
.scale-degree{position:relative;z-index:2;display:grid;justify-items:center;gap:6px;flex:0 0 var(--degree-circle-size);width:var(--degree-circle-size);text-align:center}
.scale-degree-note{
  width:var(--degree-circle-size);height:var(--degree-circle-size);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-solid);border:1px solid var(--border-300);color:var(--heading-color);
  font-size:12px;font-weight:750;line-height:1;white-space:nowrap;
  box-shadow:0 2px 8px rgba(12,35,30,.035)
}
.scale-degree-pitch{display:inline-flex;align-items:center;justify-content:center;gap:1px;white-space:nowrap;line-height:1}
.scale-degree-letter{display:inline-block;line-height:1}
.scale-degree-accidental{display:inline-block;font-size:16px;line-height:1;margin-left:1px;transform:translateY(1px);font-weight:400}
.scale-degree-gap{
  position:relative;z-index:1;display:block;flex:0 0 calc(var(--degree-center-gap) - var(--degree-circle-size));
  width:calc(var(--degree-center-gap) - var(--degree-circle-size));height:var(--degree-circle-size);min-width:0
}
.scale-degree-gap::before{content:"";position:absolute;left:0;right:0;top:calc(var(--degree-circle-size) / 2);height:1px;background:var(--sage-500)}
.scale-degree-note.tonic,.scale-degree-note.octave{background:var(--forest-800);border-color:var(--forest-800);color:#fff}
.scale-degree-note.quarter{border-color:var(--key-quarter);box-shadow:inset 0 0 0 2px rgba(196,98,79,.10)}
.scale-degree-note.qtm-tonic{background:var(--key-quarter-octave);border-color:var(--key-quarter-octave);color:#fff}
.scale-degree-label{font-size:10px;color:var(--muted-600);font-weight:700;white-space:nowrap}
.keyboard-wrap{display:flex;justify-content:safe center;overflow-x:auto;padding:0 6px 4px}
#piano-svg{display:block;min-width:720px;width:100%;margin-inline:auto;height:auto;background:var(--notation-paper);border:1px solid rgba(95,105,102,.42);border-radius:8px}
.white-key{fill:var(--kb-white-fill);stroke:var(--kb-white-border);stroke-width:var(--kb-white-border-width);transition:fill .08s ease,transform .08s ease;transform-box:fill-box;transform-origin:center top}
.black-key{fill:var(--kb-black-fill);stroke:var(--kb-black-border);stroke-width:var(--kb-black-border-width);transition:fill .08s ease,transform .08s ease;transform-box:fill-box;transform-origin:center top}
.piano-key{cursor:pointer}
.c4-reference-outline{fill:none;stroke:var(--gold-600);stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:none}
.white-key.is-playing{fill:var(--gold-200);transform:translateY(2px)}
.black-key.is-playing{fill:var(--teal-700);transform:translateY(2px)}
.piano-label{font-size:10px;fill:var(--muted-600);font-family:"Montserrat",system-ui,sans-serif;pointer-events:none}
.key-marker{pointer-events:none}
.xray-tuning-marker{transform-box:fill-box;transform-origin:center;transition:transform .11s cubic-bezier(.2,.8,.2,1)}
.key-marker.quarter-tonic-marker{stroke:#D39A4A;stroke-width:2px}
.keyboard-foot{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:4px 15px 12px;color:var(--muted-600);font-size:10px}
.legend{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;color:var(--muted-600);font-size:10px}
.legend-item{display:inline-flex;align-items:center;gap:5px}
.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.legend-square{width:8px;height:8px;border-radius:2px;display:inline-block}

/* Flip card and staff */
.notation-card{overflow:hidden;scroll-margin-top:86px}
.flip-shell{perspective:1600px;position:relative;min-height:690px}
.flip-inner{position:relative;width:100%;min-height:690px;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .62s cubic-bezier(.2,.75,.2,1);will-change:transform}
.flip-shell.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;overflow:auto;background:var(--surface-solid);backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform}
.flip-front{transform:rotateY(0deg) translateZ(.1px)}
.flip-back{transform:rotateY(180deg) translateZ(.1px);background:linear-gradient(160deg,var(--surface-solid) 0,var(--card-50) 100%)}
.flip-shell:not(.is-flipped) .flip-back{pointer-events:none}
.flip-shell.is-flipped .flip-front{pointer-events:none}
.flip-shell.is-flipping{pointer-events:none}
.flip-head{border-bottom:1px solid var(--sand-100)}
.flip-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-left:auto;min-width:0}
.notation-tools{display:flex;align-items:center;gap:12px;padding-right:14px;border-right:1px solid var(--sand-100);min-height:32px;flex-wrap:wrap}
.notation-tools .checkbox{color:var(--heading-color)}
.staff-analysis-controls{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;padding:13px 18px 4px;background:var(--notation-paper);border-bottom:0}
.staff-analysis-controls .checkbox{font-size:11px;color:var(--heading-color);font-weight:650}
.staff-analysis-controls .checkbox.is-disabled{opacity:.34}
.staff-analysis-controls input:disabled{cursor:not-allowed}
.notation-playback{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.playback-btn{white-space:nowrap}
.stop-btn{white-space:nowrap}
.staff-stage{position:relative;padding:34px 8px 10px;overflow:hidden;min-height:540px;background:var(--notation-paper)}
.staff-loading,.staff-load-error{min-height:260px;display:grid;place-items:center;color:var(--muted-600);font-size:12px;text-align:center;padding:24px}

/* Preserve VexFlow proportions exactly. Width may scale; height always follows SVG viewBox. */
.staff-svg,.vexflow-staff{display:block;width:100%;height:auto!important;max-height:none!important;margin:0 auto;overflow:visible;aspect-ratio:auto!important}
.maqam-vf-note{cursor:pointer;outline:none}
.maqam-vf-note .vf-notehead path,.maqam-vf-note path.vf-notehead{transition:fill .13s ease}
.maqam-vf-note:hover .vf-notehead path,.maqam-vf-note:hover path.vf-notehead,.maqam-vf-note.is-playing .vf-notehead path,.maqam-vf-note.is-playing path.vf-notehead{fill:var(--key-quarter)!important}
.maqam-vf-note:focus-visible{filter:drop-shadow(0 0 3px var(--gold-600))}
.playback-glow-circle{fill:rgba(250,231,183,.38);stroke:var(--gold-600);stroke-width:1.4;opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:center}
.maqam-vf-note.is-scale-glowing .playback-glow-circle{opacity:.88;animation:maqam-note-glow .78s ease-in-out infinite alternate}
@keyframes maqam-note-glow{from{opacity:.36;transform:scale(.82);filter:drop-shadow(0 0 1px var(--gold-600))}to{opacity:.92;transform:scale(1.18);filter:drop-shadow(0 0 6px var(--gold-600))}}
.direction-diff-wave{fill:none;stroke:var(--key-quarter);stroke-width:1.5;opacity:.74;pointer-events:none;transform-box:fill-box;transform-origin:center;animation:maqam-diff-wave 1.55s ease-out infinite}
.direction-diff-wave.wave-2{animation-delay:.72s}
@keyframes maqam-diff-wave{0%{opacity:.7;transform:scale(.65)}70%{opacity:.16;transform:scale(1.7)}100%{opacity:0;transform:scale(2.5)}}
.piano-diff-wave-once{fill:none;stroke:var(--key-quarter);stroke-width:2;opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 3px rgba(196,98,79,.72));animation:piano-diff-wave-once .9s ease-out 1}
@keyframes piano-diff-wave-once{0%{opacity:.9;transform:scale(.92)}55%{opacity:.54;transform:scale(1.08)}100%{opacity:0;transform:scale(1.22)}}
.staff-watermark{display:var(--design-staff-watermark-display);opacity:calc(var(--design-staff-watermark-opacity) / 100);letter-spacing:.03em;fill:var(--design-staff-watermark-color)!important;font-family:var(--design-staff-watermark-font)!important;font-size:var(--design-staff-watermark-size)!important;transform:translate(var(--design-staff-watermark-x),var(--design-staff-watermark-y));transform-box:fill-box}
.flip-shell.is-flipped .staff-watermark{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.smufl-acc{line-height:1;pointer-events:none}

/* Flip information */
.maqam-scale-info-card>.section-head{padding:var(--design-scale-info-header-pad-y,13px) var(--design-scale-info-header-pad-x,16px)}
.maqam-scale-info-card>.section-head h2{font-size:var(--design-scale-info-header-title-size,20px);font-weight:var(--design-scale-info-header-title-weight,600)}
.maqam-scale-info-card>.section-head p{margin-top:var(--design-scale-info-header-subtitle-gap,3px);font-size:var(--design-scale-info-header-subtitle-size,10px)}
#maqam-info{padding:var(--design-scale-info-body-pad-top,18px) var(--design-scale-info-body-pad-x,22px) var(--design-scale-info-body-pad-bottom,28px)}
.maqam-scale-info-card .info-kicker{color:var(--teal-700);font-size:var(--design-scale-info-kicker-size,10px);font-weight:var(--design-scale-info-kicker-weight,800);letter-spacing:var(--design-scale-info-kicker-spacing,.12em);text-transform:uppercase;margin-top:var(--design-scale-info-kicker-top-gap,4px)}
#maqam-info h2{font-weight:var(--design-scale-info-title-weight,600);font-size:var(--design-scale-info-title-size,34px);color:var(--heading-color);margin:var(--design-scale-info-title-top-gap,5px) 0 var(--design-scale-info-title-bottom-gap,8px)}
.info-summary{color:var(--muted-600);line-height:var(--design-scale-info-summary-line-height,1.65);margin:0 0 var(--design-scale-info-summary-bottom-gap,18px);max-width:var(--design-scale-info-summary-max-width,820px);font-size:var(--design-scale-info-summary-size,12px)}
.info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--design-scale-info-fact-gap,9px);margin-bottom:var(--design-scale-info-fact-bottom-gap,18px)}
.info-grid section{padding:var(--design-scale-info-fact-pad-y,12px) var(--design-scale-info-fact-pad-x,12px);border:1px solid var(--border-300);border-radius:var(--design-scale-info-fact-radius,9px);background:var(--surface-solid);min-width:0}
.info-grid span{display:block;color:var(--muted-600);font-size:var(--design-scale-info-fact-label-size,10px);text-transform:uppercase;letter-spacing:var(--design-scale-info-fact-label-spacing,.08em);font-weight:var(--design-scale-info-fact-label-weight,750);margin-bottom:var(--design-scale-info-fact-label-bottom-gap,6px)}
.info-grid strong{font-size:var(--design-scale-info-fact-value-size,11px);font-weight:var(--design-scale-info-fact-value-weight,700);color:var(--heading-color);word-break:break-word}
.theory-block{padding:var(--design-scale-info-theory-pad-y,13px) 0;border-top:1px solid var(--border-300)}
.theory-block h3{margin:0 0 var(--design-scale-info-theory-title-bottom-gap,7px);font-family:"Montserrat",sans-serif;font-size:var(--design-scale-info-theory-title-size,11px);font-weight:var(--design-scale-info-theory-title-weight,700);color:var(--heading-color)}
.theory-block ul{margin:0;padding-left:var(--design-scale-info-list-indent,18px);color:var(--muted-600);line-height:var(--design-scale-info-list-line-height,1.65);font-size:var(--design-scale-info-list-size,10px)}

/* Tuning */
.tuning-card{padding-bottom:13px;overflow:hidden}
.tuning-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 8px}
.tuning-head>div{display:flex;align-items:center;gap:8px}
.tuning-head h2{margin:0;color:var(--heading-color);font-size:20px;font-weight:600}
.tuning-reset{border:1px solid var(--border-300);border-radius:8px;background:var(--control-surface);color:var(--muted-600);padding:6px 8px;font:inherit;font-size:9px;font-weight:750;cursor:pointer}
.tuning-reset:hover{border-color:var(--sage-500);color:var(--heading-color)}
.tuning-modes{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 16px 8px}
.tuning-mode{height:31px;border:1px solid var(--border-300);border-radius:8px;background:var(--control-surface);color:var(--muted-600);font:700 10px/1 "Montserrat",sans-serif;cursor:pointer}
.tuning-mode.active{background:var(--forest-800);border-color:var(--forest-800);color:#fff}
.tuning-help{margin:0;padding:0 16px 9px;color:var(--muted-600);font-size:9px;line-height:1.45}
.tuning-rows{display:grid;padding:0 16px}
.tuning-row{display:grid;grid-template-columns:52px minmax(92px,1fr) 96px;gap:8px;align-items:center;min-height:38px;border-top:1px solid var(--sand-100);font-size:10px;color:var(--muted-600)}
.tuning-note{display:flex;align-items:baseline;gap:4px;min-width:0}.tuning-note strong{color:var(--heading-color);font-size:11px;white-space:nowrap}.tuning-note small{font-size:8px;color:var(--muted-600)}
.tuning-note-accidental{display:inline-block;font-size:15px;line-height:1;margin-left:1px;transform:translateY(2px);font-weight:400}
.tuning-value{font-variant-numeric:tabular-nums;text-align:right;color:var(--heading-color);font-size:9px;font-weight:700;white-space:nowrap}
.tuning-slider-wrap{position:relative;display:block;width:100%;height:18px}
.tuning-slider-wrap::before{content:"";position:absolute;left:6px;right:6px;top:3px;height:12px;pointer-events:none}
.tuning-slider-wrap:not(.comma-grid)::before{background:linear-gradient(90deg,transparent 49.5%,var(--gold-600) 49.5% 50.5%,transparent 50.5%)}
.tuning-slider-wrap.comma-grid::before{background:repeating-linear-gradient(90deg,var(--gold-600) 0,var(--gold-600) 1px,transparent 1px,transparent 11.111111%)}
.tuning-slider-wrap.comma-grid::after{content:"";position:absolute;left:6px;top:3px;width:1px;height:12px;background:var(--gold-600);pointer-events:none}
.tuning-slider{position:relative;z-index:1;width:100%;height:18px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}
.tuning-slider.tempered-slider,.tuning-slider.comma-slider{direction:rtl}
.tuning-slider::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--sage-200);border:1px solid var(--border-300)}
.tuning-slider::-moz-range-track{height:4px;border-radius:999px;background:var(--sage-200);border:1px solid var(--border-300)}
.tuning-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:rgba(19,67,57,.62);border:1px solid rgba(255,255,255,.58);box-shadow:0 0 0 1px rgba(160,189,181,.72);margin-top:-5px}
.tuning-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:rgba(19,67,57,.62);border:1px solid rgba(255,255,255,.58);box-shadow:0 0 0 1px rgba(160,189,181,.72)}
.tuning-slider.is-sounding::-webkit-slider-thumb{background:var(--forest-800);box-shadow:0 0 0 2px rgba(160,189,181,.82),0 0 12px rgba(160,189,181,.52)}
.tuning-slider.is-sounding::-moz-range-thumb{background:var(--forest-800);box-shadow:0 0 0 2px rgba(160,189,181,.82),0 0 12px rgba(160,189,181,.52)}
.tuning-slider.is-tuning-wave::-webkit-slider-thumb{animation:tuning-thumb-wave .62s ease-out 1}
.tuning-slider.is-tuning-wave::-moz-range-thumb{animation:tuning-thumb-wave .62s ease-out 1}
@keyframes tuning-thumb-wave{
  0%{box-shadow:0 0 0 1px rgba(160,189,181,.82),0 0 0 0 rgba(160,189,181,.5)}
  48%{box-shadow:0 0 0 2px rgba(160,189,181,.72),0 0 0 9px rgba(160,189,181,.22)}
  100%{box-shadow:0 0 0 2px rgba(160,189,181,.72),0 0 0 15px rgba(160,189,181,0)}
}
html[data-theme="dark"] .tuning-mode.active{background:#235E50;border-color:#397968}
@media(max-width:1100px){.tuning-row{grid-template-columns:48px minmax(90px,1fr) 90px}}

/* Structure / related */
.structure-card,.related-side-card{padding-bottom:11px}
#structure-summary{padding:0 16px 8px;display:grid;gap:8px}
.structure-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--sand-100)}
.structure-row span{color:var(--muted-600);font-size:10px}
.structure-row strong{max-width:62%;text-align:right;color:var(--heading-color);font-size:10px;line-height:1.45}
.related-empty{margin:0 16px 4px;padding:11px;border:1px dashed var(--border-300);border-radius:8px;color:var(--muted-600);font-size:10px;line-height:1.5;background:var(--card-50)}
.related-section{margin-top:13px;padding:0 0 14px}
.related-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;padding:0 16px}
.related-placeholder{grid-column:1/-1;min-height:48px;display:grid;place-items:center;border:1px dashed var(--border-300);border-radius:8px;background:var(--card-50);color:var(--muted-600);font-size:10px;text-align:center;padding:10px}

/* Footer */
.footer{display:grid;grid-template-columns:1fr auto auto;gap:28px;align-items:center;margin-top:22px;padding:20px 0 0;border-top:1px solid var(--border-300);color:var(--muted-600);font-size:10px}
.footer-brand{display:flex;align-items:center;gap:8px}
.footer-brand img{width:34px;height:34px;object-fit:contain}
.footer-brand>div{display:flex;flex-direction:column}
.footer-brand strong{color:var(--heading-color);font-size:17px;font-weight:600}
.footer-brand span{font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.footer-links{display:flex;align-items:center;gap:15px;flex-wrap:wrap;justify-content:center}
.footer-links a:hover{color:var(--heading-color)}
.footer-copy{text-align:right;white-space:nowrap}
.future-section{display:none}

/* Legal pages */

/* Login */
.login-page{display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 30% 20%,#f7efd9 0,transparent 32%),var(--ivory-50)}
.login-shell{width:min(430px,100%)}
.login-theme-toggle{position:fixed;top:18px;right:18px;z-index:10}
.login-card{background:var(--surface-solid);border:1px solid var(--border-300);border-radius:24px;box-shadow:var(--shadow);padding:28px}
.login-brand{display:flex;align-items:center;gap:11px;margin-bottom:28px}.login-brand-icon{display:block;width:56px;height:56px;flex:0 0 56px}.login-brand-icon img{width:56px;height:56px;object-fit:contain}.login-brand>div{display:flex;flex-direction:column}.login-brand strong{color:var(--heading-color);font-size:24px}.login-brand span{font-size:10px;color:var(--muted-600);margin-top:3px}
.login-card h1{color:var(--heading-color);font-weight:600;margin:0 0 8px;font-size:36px}.login-card p{color:var(--muted-600);line-height:1.55;font-size:11px;margin:0 0 22px}.login-card form{display:grid;gap:14px}.login-card label{display:grid;gap:6px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted-600)}.login-card input{height:44px;border:1px solid var(--border-300);border-radius:10px;padding:0 11px;background:var(--control-surface);color:var(--ink-900);outline:none}.login-card input:focus{border-color:var(--sage-500);box-shadow:0 0 0 3px rgba(160,189,181,.18)}.form-error{margin-bottom:14px;padding:10px 12px;border-radius:10px;background:#f8e4df;color:#8d3f31;font-size:10px;font-weight:700}


/* Dark mode */
html[data-theme="dark"] body{background:radial-gradient(circle at 78% 13%,rgba(211,154,74,.08),transparent 25%),linear-gradient(180deg,var(--page-top) 0,var(--ivory-50) 30%,var(--ivory-50) 100%)}
html[data-theme="dark"] .instrument-pattern{opacity:.42}
html[data-theme="dark"] .header-search input::placeholder{color:#7F8E88}
html[data-theme="dark"] .nav a{color:#99A8A2}
html[data-theme="dark"] .nav a:hover,html[data-theme="dark"] .nav a.active{color:var(--heading-color)}
html[data-theme="dark"] .site-header{border-bottom-color:var(--border-300)}
html[data-theme="dark"] .share-btn,html[data-theme="dark"] .btn.primary{background:#174B3F;border-color:#246655;color:#fff}
html[data-theme="dark"] .segmented button.active{background:#235E50;color:#fff}
html[data-theme="dark"] .btn.gold{background:#5A472B;border-color:#7C6035;color:#FBE9BE}
html[data-theme="dark"] .qglyph{color:#E27C68}
html[data-theme="dark"] .scale-degree-note.tonic,html[data-theme="dark"] .scale-degree-note.octave{background:#245E50;border-color:#397968;color:#fff}
html[data-theme="dark"] .related-empty,html[data-theme="dark"] .related-placeholder{background:#111B18}
html[data-theme="dark"] .form-error{background:#482823;color:#F2B3A6}
html[data-theme="dark"] .staff-stage,html[data-theme="dark"] #piano-svg{box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}

/* Legal / FAQ documents */
.legal-page{background:var(--ivory-50)}
.legal-page .site-header{position:sticky}
.legal-shell{width:min(1080px,calc(100% - 36px));margin:0 auto;padding:34px 0 52px}
.legal-hero{padding:18px 2px 22px;border-bottom:1px solid var(--border-300);margin-bottom:18px}
.legal-eyebrow{margin:0 0 6px;color:var(--teal-700);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.legal-hero h1{margin:0;color:var(--heading-color);font-size:clamp(42px,6vw,68px);font-weight:550;line-height:1}
.legal-updated{margin:10px 0 0;color:var(--muted-600);font-size:10px}
.legal-card{padding:30px 34px;border:1px solid var(--border-300);border-radius:18px;background:var(--surface-solid);box-shadow:var(--shadow)}
.legal-card h1{display:none}
.legal-card h2{margin:30px 0 10px;color:var(--heading-color);font-size:25px;font-weight:600;line-height:1.15}
.legal-card h2:first-child{margin-top:0}
.legal-card h3{margin:20px 0 7px;color:var(--heading-color);font-family:"Montserrat",sans-serif;font-size:13px;font-weight:750;line-height:1.35}
.legal-card p{margin:0 0 12px;color:var(--ink-900);font-size:12px;line-height:1.75}
.legal-card ul{margin:4px 0 16px;padding-left:22px;color:var(--ink-900);font-size:12px;line-height:1.7}
.legal-card li+li{margin-top:4px}
.legal-card .legal-intro{color:var(--muted-600)}
.legal-placeholder{display:inline;padding:1px 5px;border-radius:5px;background:var(--gold-200);color:#5D4521;font-weight:750}
html[data-theme="dark"] .legal-placeholder{background:#5A472B;color:#FBE9BE}
.legal-back{display:inline-flex;align-items:center;gap:5px;margin:18px 0 0;color:var(--teal-700);font-size:11px;font-weight:750}
.legal-page-footer{margin-top:22px}
.legal-draft-status{margin:0 0 14px;padding:10px 12px;border:1px solid var(--border-300);border-radius:9px;background:var(--card-50);color:var(--muted-600);font-size:10px;line-height:1.55}

@media(max-width:1180px){
  .nav{display:none}
  .header-actions{flex:1;justify-content:flex-end}
  .maqam-hero{grid-template-columns:1.1fr 1fr 190px}
  .content-grid{grid-template-columns:minmax(0,1.8fr) minmax(285px,1fr)}
  .control-panel{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:920px){
  .page{width:min(100% - 28px,1430px)}
  .header-search{width:min(260px,32vw)}
  .maqam-hero{grid-template-columns:1fr 1fr}.hero-side-card{display:none}
  .fact-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.fact-strip>div:nth-child(2){border-right:0}.fact-strip>div:nth-child(-n+2){border-bottom:1px solid var(--sand-100)}
  .content-grid{grid-template-columns:1fr}.side-column{grid-template-columns:repeat(2,minmax(0,1fr))}.related-side-card{grid-column:1/-1}
  .flip-shell,.flip-inner{min-height:720px}
  .footer{grid-template-columns:1fr 1fr}.footer-copy{grid-column:1/-1;text-align:left}
}
@media(max-width:680px){
  .header-inner{width:min(100% - 20px,1460px);min-height:62px;gap:10px}.brand{min-width:0;flex:1}.brand-logo-set{height:44px;max-width:210px}.brand-logo{height:44px;max-width:210px}.header-search{display:none}.share-btn{display:none}.theme-toggle-text{display:none}.theme-toggle{width:38px;padding:0;justify-content:center}.logout-link{padding:0 5px}
  .page{width:min(100% - 18px,1430px);padding-top:12px}
  .breadcrumb{font-size:10px}
  .maqam-hero{grid-template-columns:1fr;min-height:0;padding-top:3px}.hero-copy h1{font-size:58px}.instrument-visual{min-height:150px}.instrument-visual img{max-height:155px}.hero-actions{margin-top:12px}
  .fact-strip{grid-template-columns:1fr 1fr}.fact-strip>div{padding:10px 11px}
  .control-panel{grid-template-columns:1fr 1fr;padding:11px}.controls-heading{grid-column:1/-1}.controls-heading strong{display:none}.name-system-control{grid-column:1/-1}.qtm-row{grid-column:1/-1}
  .content-grid{gap:10px}.main-column,.side-column{gap:10px}.side-column{grid-template-columns:1fr}
  .section-head{padding:12px}.section-head p{display:none}.scale-degree-strip{min-width:0;padding-left:15px;padding-right:15px}.keyboard-panel{overflow:hidden}.keyboard-foot{align-items:flex-start;flex-direction:column}.legend{justify-content:flex-start}
  .flip-head{align-items:flex-start;flex-wrap:wrap}.flip-head-actions{width:100%;justify-content:space-between;margin-left:0}.notation-tools{padding-right:10px}
  .flip-shell,.flip-inner{min-height:760px}.staff-analysis-controls{justify-content:flex-start;gap:14px;padding:12px 12px 5px}.staff-analysis-controls .checkbox{font-size:10px}.staff-stage{overflow-x:auto;padding:34px 4px 4px}.vexflow-staff,.staff-svg{min-width:780px;width:780px!important;height:auto!important}
  .info-grid{grid-template-columns:1fr 1fr}
  .related-list{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr;gap:14px}.legal-card{padding:22px 18px}.footer-links{justify-content:flex-start}.footer-copy{text-align:left}.footer-brand{display:none}
}
@media(max-width:430px){
  .control-panel{grid-template-columns:1fr}.name-system-control{grid-column:auto}.fact-strip{grid-template-columns:1fr}.fact-strip>div{border-right:0!important;border-bottom:1px solid var(--sand-100)}.fact-strip>div:last-child{border-bottom:0}.info-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.flip-inner{transition:none!important}.xray-tuning-marker{transition:none!important}.tuning-slider.is-tuning-wave::-webkit-slider-thumb,.tuning-slider.is-tuning-wave::-moz-range-thumb{animation:none!important}}

/* v2.1 — About, story, plans and contact */
.content-page{background:var(--ivory-50)}
.content-shell{width:min(1180px,calc(100% - 36px));margin:0 auto;padding:34px 0 52px}
.narrow-content-shell{width:min(920px,calc(100% - 36px))}
.content-hero{padding:18px 2px 26px;border-bottom:1px solid var(--border-300);margin-bottom:18px}
.content-hero.compact-hero{padding-bottom:20px}
.content-hero h1{max-width:900px;margin:0;color:var(--heading-color);font-size:clamp(44px,6vw,72px);font-weight:550;line-height:.98}
.content-hero p:not(.legal-eyebrow){max-width:760px;margin:12px 0 0;color:var(--muted-600);font-size:12px;line-height:1.65}
.prose-copy h2{margin:0 0 18px;color:var(--heading-color);font-size:38px;font-weight:600}
.prose-copy p{margin:0 0 15px;color:var(--ink-900);font-size:13px;line-height:1.82}
.prose-copy strong{color:var(--heading-color)}

.about-founder{display:grid;grid-template-columns:320px minmax(0,1fr);gap:42px;padding:28px}
.founder-portrait-column{align-self:start}
.founder-portrait-frame{aspect-ratio:4/5;border:1px solid var(--border-300);border-radius:18px;overflow:hidden;background:linear-gradient(145deg,var(--sage-200),var(--card-50));box-shadow:var(--shadow)}
.founder-portrait-frame img{display:block;width:100%;height:100%;object-fit:cover}
.founder-portrait-placeholder{width:100%;height:100%;display:grid;place-items:center;font-family:"Cormorant Garamond",serif;font-size:76px;color:var(--forest-800);background:radial-gradient(circle at 50% 35%,rgba(211,154,74,.2),transparent 34%),var(--card-50)}
.story-link{display:inline-block;margin:12px 2px 0;color:var(--teal-700);font-size:11px;font-weight:750;line-height:1.45}
.story-link:hover{text-decoration:underline;text-underline-offset:3px}
.founder-copy{padding:8px 4px 4px}
.story-card{padding:34px 38px}
.story-prose>p:first-child{font-size:15px;color:var(--heading-color)}
.story-emphasis{margin:26px 0!important;padding:18px 20px;border-left:4px solid var(--gold-600);background:var(--card-50);font-family:"Cormorant Garamond",serif;font-size:24px!important;line-height:1.35!important;color:var(--heading-color)!important}
.dedication-callout{margin-top:28px;padding:22px;border:1px solid rgba(211,154,74,.5);border-radius:14px;background:linear-gradient(135deg,rgba(250,231,183,.52),var(--surface-solid));color:var(--ink-900);font-size:13px;line-height:1.75}
html[data-theme="dark"] .dedication-callout{background:linear-gradient(135deg,rgba(90,71,43,.58),var(--surface-solid))}

.plans-shell{width:min(1320px,calc(100% - 36px))}
.plans-hero{text-align:center}
.plans-hero h1{margin-left:auto;margin-right:auto}
.plans-hero p:not(.legal-eyebrow){margin-left:auto;margin-right:auto}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.pricing-card{position:relative;display:flex;flex-direction:column;padding:24px 23px;overflow:hidden}
.pricing-card h2{margin:5px 0 5px;color:var(--heading-color);font-size:30px;font-weight:600}
.plan-label{color:var(--teal-700);font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase}
.plan-tagline{min-height:54px;margin:0 0 14px;color:var(--muted-600);font-size:11px;line-height:1.55}
.plan-price{display:flex;align-items:baseline;gap:7px;margin-bottom:6px;color:var(--heading-color)}
.plan-price strong{font-family:"Cormorant Garamond",serif;font-size:46px;font-weight:650;letter-spacing:-.02em}
.plan-price span{color:var(--muted-600);font-size:10px}
.annual-price{min-height:28px;color:var(--forest-800);font-size:11px;font-weight:800}
.annual-price span{display:block;margin-top:2px;color:var(--gold-600);font-size:10px}
.pricing-card ul{flex:1;margin:16px 0 20px;padding:17px 0 0 18px;border-top:1px solid var(--sand-100);color:var(--ink-900);font-size:13px;line-height:1.65}
.pricing-card li+li{margin-top:6px}
.plan-cta{display:grid;place-items:center;width:100%;min-height:44px;padding:10px 14px;text-align:center;line-height:1.25}
.featured-plan{border-color:rgba(211,154,74,.75);box-shadow:0 16px 38px rgba(12,35,30,.10)}
.best-value{position:absolute;right:15px;top:15px;padding:5px 8px;border-radius:999px;background:var(--gold-200);color:#5D4521;font-size:10px;font-weight:900;letter-spacing:.08em}
html[data-theme="dark"] .best-value{background:#5A472B;color:#FBE9BE}
.institutional-card{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:16px;padding:24px 26px}
.institutional-card h2{margin:4px 0 7px;color:var(--heading-color);font-size:29px;font-weight:600}
.institutional-card p:not(.legal-eyebrow){max-width:780px;margin:0;color:var(--muted-600);font-size:11px;line-height:1.65}
.comparison-card{margin-top:16px;padding-bottom:16px}
.comparison-scroll{overflow-x:auto;padding:0 16px}
.pricing-table{width:100%;min-width:680px;border-collapse:collapse;background:var(--surface-solid);font-size:13px}
.pricing-table th,.pricing-table td{padding:10px 12px;border-bottom:1px solid var(--sand-100);text-align:center;color:var(--ink-900)}
.pricing-table th:first-child,.pricing-table td:first-child{text-align:left}
.pricing-table th{color:var(--heading-color);font-size:12px;text-transform:uppercase;letter-spacing:.08em;background:var(--card-50)}
.pricing-table td:not(:first-child){font-weight:800;color:var(--forest-800)}
.plan-flex-note{margin:12px 4px 0;color:var(--muted-600);font-size:12px;line-height:1.55}
.plan-pricing-zone{display:flex;flex-direction:column;justify-content:flex-end;min-height:94px}
.plan-action-zone{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.plan-action-zone>.plan-flex-note{order:-1;min-height:38px;margin:0 4px}
.plan-action-zone .sandbox-checkout-box{margin-top:0}
.plan-action-zone>.btn,.plan-action-zone>form,.plan-action-zone .plan-cta{width:100%}

/* Architect v2.7 — commercial plan alignment */
.price-stack{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:end;margin-bottom:4px}
.price-stack .plan-price{margin:0}
.price-stack .plan-price strong{font-size:38px}
.price-stack-separator{padding-bottom:9px;color:var(--muted-600);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.plan-price-secondary{padding:8px 10px;border:1px solid rgba(211,154,74,.42);border-radius:12px;background:rgba(250,231,183,.28)}
html[data-theme="dark"] .plan-price-secondary{background:rgba(90,71,43,.28);border-color:rgba(211,154,74,.35)}
.edu-plan-card{border-color:rgba(160,189,181,.72)}
.trial-badge{position:absolute;right:15px;top:15px;padding:5px 8px;border-radius:999px;background:var(--sage-200);color:var(--forest-800);font-size:10px;font-weight:900;letter-spacing:.08em}
html[data-theme="dark"] .trial-badge{background:#29483f;color:#d9eee8}
.comparison-card{margin-top:26px;padding:0 0 18px;overflow:hidden}
.comparison-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;padding:24px 26px 18px;border-bottom:1px solid var(--sand-100)}
.comparison-card-head h2{margin:3px 0 6px;color:var(--heading-color);font-size:32px;font-weight:600}
.comparison-card-head p:not(.legal-eyebrow){max-width:820px;margin:0;color:var(--muted-600);font-size:12px;line-height:1.65}
.comparison-scroll{overflow-x:auto;padding:0;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
.pricing-table{width:100%;min-width:790px;border-collapse:separate;border-spacing:0;background:var(--surface-solid);font-size:12px}
.pricing-table th,.pricing-table td{padding:13px 15px;border-bottom:1px solid var(--sand-100);border-right:1px solid var(--sand-100);text-align:center;color:var(--ink-900);vertical-align:middle}
.pricing-table th:last-child,.pricing-table td:last-child{border-right:0}
.pricing-table tbody tr:last-child th,.pricing-table tbody tr:last-child td{border-bottom:0}
.pricing-table th:first-child,.pricing-table td:first-child{text-align:left}
.pricing-table thead th{position:sticky;top:0;z-index:2;color:var(--heading-color);font-size:11px;text-transform:uppercase;letter-spacing:.08em;background:var(--card-50)}
.pricing-table thead th:first-child{left:0;z-index:4}
.pricing-table tbody th{position:sticky;left:0;z-index:1;min-width:230px;background:var(--surface-solid);color:var(--heading-color);font-weight:750}
.pricing-table td:not(:first-child){font-weight:750;color:var(--forest-800)}
.pricing-table .compare-plus-head{background:linear-gradient(180deg,rgba(250,231,183,.58),var(--card-50))}
.pricing-table .compare-edu-head{background:linear-gradient(180deg,rgba(221,225,217,.82),var(--card-50))}
html[data-theme="dark"] .pricing-table .compare-plus-head{background:linear-gradient(180deg,rgba(90,71,43,.48),var(--card-50))}
html[data-theme="dark"] .pricing-table .compare-edu-head{background:linear-gradient(180deg,rgba(41,72,63,.54),var(--card-50))}
.compare-yes{color:var(--forest-800);font-weight:900}
.compare-no{color:var(--muted-600);font-weight:650}
.compare-subtext{display:inline-block;margin-top:3px;color:var(--muted-600);font-size:10px;font-weight:650;line-height:1.35}
.pricing-notes{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:16px;overflow:hidden}
.pricing-notes>div{display:grid;grid-template-columns:86px 1fr;gap:12px;padding:18px 20px;align-items:start}
.pricing-notes>div+div{border-left:1px solid var(--sand-100)}
.pricing-notes strong{color:var(--heading-color);font-size:12px}
.pricing-notes span{color:var(--muted-600);font-size:11px;line-height:1.6}

.contact-shell{width:min(1080px,calc(100% - 36px))}
.contact-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:16px;align-items:start}
.contact-card,.contact-form-card{padding:24px}
.contact-card h2,.contact-form-card h2{margin:0 0 12px;color:var(--heading-color);font-size:28px;font-weight:600}
.contact-card p{margin:0 0 14px;color:var(--ink-900);font-size:11px;line-height:1.72}
.contact-email{display:inline-block;color:var(--teal-700);font-size:12px;font-weight:800;word-break:break-all}
.contact-note{margin-top:20px!important;padding-top:16px;border-top:1px solid var(--sand-100);color:var(--muted-600)!important;font-size:10px!important}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-form label{display:grid;gap:6px;min-width:0}
.contact-form label>span{color:var(--muted-600);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--border-300);border-radius:9px;background:var(--control-surface);color:var(--ink-900);padding:10px 11px;outline:none;font:inherit;font-size:11px}
.contact-form input{height:42px}
.contact-form input[readonly]{background:rgba(160,189,181,.14);color:var(--muted-600);cursor:not-allowed}
.contact-form textarea{min-height:190px;resize:vertical;line-height:1.6}
.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:var(--sage-500);box-shadow:0 0 0 3px rgba(160,189,181,.18)}
.contact-form label:nth-of-type(4){grid-column:1/-1}
.contact-submit-row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:2px}
.contact-submit-row span{max-width:520px;color:var(--muted-600);font-size:10px;line-height:1.45;text-align:right}
.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-success{margin-bottom:14px;padding:11px 13px;border:1px solid rgba(19,67,57,.25);border-radius:10px;background:rgba(160,189,181,.22);color:var(--forest-800);font-size:10px;font-weight:750}
html[data-theme="dark"] .form-success{background:rgba(35,94,80,.35);color:#C8E0D8;border-color:#315E51}
.contact-errors ul{margin:7px 0 0;padding-left:18px}

@media(max-width:900px){
  .about-founder{grid-template-columns:240px minmax(0,1fr);gap:28px}
  .pricing-grid{grid-template-columns:1fr}.pricing-card{max-width:680px;width:100%;margin:0 auto}
  .pricing-notes{grid-template-columns:1fr}.pricing-notes>div+div{border-left:0;border-top:1px solid var(--sand-100)}
  .institutional-card{align-items:flex-start;flex-direction:column}
  .contact-layout{grid-template-columns:1fr}
}
@media(max-width:650px){
  .content-shell,.plans-shell,.contact-shell,.narrow-content-shell{width:min(100% - 18px,1180px);padding-top:18px}
  .content-hero h1{font-size:44px}
  .about-founder{grid-template-columns:1fr;padding:18px}.founder-portrait-column{width:min(320px,100%);margin:0 auto}.founder-copy{padding:4px 0}
  .story-card{padding:22px 18px}
  .pricing-card,.institutional-card{padding:20px 18px}
  .price-stack{grid-template-columns:1fr;gap:5px}.price-stack-separator{padding:0}.price-stack .plan-price strong{font-size:36px}.plan-price-secondary{padding:7px 9px}
  .comparison-card-head{padding:20px 18px 15px}.comparison-card-head h2{font-size:27px}.pricing-table tbody th{min-width:190px}.pricing-notes>div{grid-template-columns:1fr;gap:5px}
  .contact-form{grid-template-columns:1fr}.contact-form label:nth-of-type(4),.contact-submit-row{grid-column:auto}.contact-submit-row{align-items:flex-start;flex-direction:column}.contact-submit-row span{text-align:left}
}

/* v2.3 — Ajnas library */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.ajnas-shell{width:min(1320px,calc(100% - 36px))}
.ajnas-hero{position:relative;display:grid;grid-template-columns:minmax(380px,.85fr) minmax(420px,1.15fr);gap:34px;align-items:center;min-height:300px;padding:24px 0 28px}
.ajnas-hero-copy{padding-left:2px}
.ajnas-hero-copy h1{margin:0;color:var(--heading-color);font-size:clamp(62px,7vw,92px);font-weight:520;line-height:.88;letter-spacing:-.025em}
.ajnas-hero-copy h2{margin:12px 0 10px;color:var(--gold-600);font-size:27px;font-weight:600;line-height:1.05}
.ajnas-hero-copy>p:not(.legal-eyebrow){max-width:560px;margin:0;color:var(--ink-900);font-size:13px;line-height:1.72}
.ajnas-hero-instrument{position:relative;min-height:260px;display:grid;place-items:center;padding-bottom:52px;overflow:hidden}
.ajnas-hero-instrument .instrument-pattern{inset:0 3% 34px}
.ajnas-hero-instrument>img{position:relative;z-index:2;width:min(100%,560px);max-height:225px;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(12,35,30,.14))}
.ajnas-hero-instrument>img.image-missing{display:none}
.ajnas-hero-instrument.instrument-emoji-fallback::after{content:attr(data-instrument-emoji);position:relative;z-index:2;display:grid;place-items:center;min-height:170px;font-size:clamp(72px,9vw,112px);line-height:1;filter:drop-shadow(0 12px 18px rgba(12,35,30,.12))}
.ajnas-instrument-control{position:absolute;z-index:3;left:50%;bottom:6px;transform:translateX(-50%);width:min(220px,80%);display:grid;gap:4px;padding:8px 10px;border:1px solid var(--border-300);border-radius:9px;background:var(--surface-glass);box-shadow:var(--shadow)}
.ajnas-instrument-control>span,.ajnas-key-control>span,.ajnas-name-system>span{color:var(--muted-600);font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.ajnas-instrument-control select,.ajnas-key-control select,.ajnas-sort-control select{width:100%;height:34px;border:1px solid var(--border-300);border-radius:7px;background:var(--control-surface);color:var(--ink-900);padding:0 9px;outline:0;font-size:11px}
.control select option:disabled,.ajnas-instrument-control select option:disabled{color:var(--muted-600);font-style:italic}

.ajnas-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:4px 0 12px}
.ajnas-stat{display:flex;align-items:center;gap:14px;min-height:86px;padding:16px 18px}
.ajnas-stat-icon{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;padding:3px;border-radius:50%;font-size:22px;font-weight:700}
.ajnas-stat-icon.stat-total{background:transparent;color:var(--forest-950)}
.ajnas-stat-icon.stat-tetra{background:transparent;color:var(--forest-800)}
.ajnas-stat-icon.stat-penta{background:transparent;color:#8A5B19}
.ajnas-stat-icon.stat-quarter{background:transparent;color:var(--teal-700)}
html[data-theme="dark"] .ajnas-stat-icon.stat-quarter{background:transparent;color:#A9D2CC}
.ajnas-stat>div{display:grid;min-width:0}
.ajnas-stat strong{font-family:"Cormorant Garamond",serif;color:var(--heading-color);font-size:28px;line-height:.85}
.ajnas-stat span:not(.ajnas-stat-icon){margin-top:4px;color:var(--forest-800);font-size:14px;font-weight:700}
.ajnas-stat small{margin-top:3px;color:var(--muted-600);font-size:12px;line-height:1.35}

.ajnas-toolbar{display:grid;grid-template-columns:minmax(160px,1.3fr) 125px auto 150px minmax(260px,auto);gap:10px;align-items:end;padding:10px 12px;margin-bottom:8px}
.ajnas-search-control input{width:100%;height:38px;border:1px solid var(--border-300);border-radius:8px;background:var(--control-surface);color:var(--ink-900);padding:0 12px;font-size:11px;outline:0}
.ajnas-search-control input:focus,.ajnas-key-control select:focus,.ajnas-sort-control select:focus,.ajnas-instrument-control select:focus{border-color:var(--sage-500);box-shadow:0 0 0 3px rgba(160,189,181,.18)}
.ajnas-key-control{display:grid;gap:4px}
.ajnas-filter-group{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ajnas-filter-group button{height:34px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border-300);border-radius:8px;padding:0 10px;background:var(--surface-solid);color:var(--ink-900);font-size:10px;font-weight:750;white-space:nowrap}
.ajnas-filter-group button:hover{background:var(--sand-100)}
.ajnas-filter-group button.active{background:var(--forest-950);border-color:var(--forest-950);color:#fff}
html[data-theme="dark"] .ajnas-filter-group button.active{background:#235E50;border-color:#397968}
.filter-dot{width:8px;height:8px;border-radius:50%}
.filter-dot.tetra{background:var(--sage-500)}.filter-dot.penta{background:var(--gold-600)}.filter-dot.quarter{background:#5D9EA0}
.ajnas-sort-control{display:block}
.ajnas-sort-control select{height:38px}
.ajnas-name-system{display:grid;gap:4px;justify-self:end;min-width:260px}
.ajnas-name-system .segmented{width:100%}
.ajnas-name-system .segmented button{flex:1;font-size:10px;padding:0 9px}
.ajnas-results-meta{display:flex;justify-content:flex-end;margin:0 2px 7px;color:var(--muted-600);font-size:10px;font-weight:700}

.ajnas-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.jins-card{min-width:0;padding:0;overflow:visible;perspective:1200px;cursor:pointer}
.jins-card-inner{display:grid;border-radius:inherit;transform-style:preserve-3d;transition:transform .52s cubic-bezier(.2,.72,.2,1);will-change:transform}
.jins-card.is-flipped .jins-card-inner{transform:rotateY(180deg)}
.jins-card-face{grid-area:1/1;min-width:0;padding:12px 13px 13px;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--surface-solid)}
.jins-card-front{position:relative}
.jins-card-back{position:relative;transform:rotateY(180deg);display:flex;flex-direction:column;min-height:190px}
.jins-card:not(.is-flipped) .jins-card-back{pointer-events:none}
.jins-card.is-flipped .jins-card-front{pointer-events:none}
.jins-card:hover{border-color:var(--sage-500);box-shadow:0 12px 30px rgba(12,35,30,.09)}
html[data-theme="dark"] .jins-card:hover{box-shadow:0 12px 30px rgba(0,0,0,.28)}
.jins-card:focus-visible{outline:3px solid rgba(160,189,181,.65);outline-offset:3px}
.jins-card-head{display:grid;grid-template-columns:23px minmax(0,1fr) auto;gap:7px;align-items:center}
.jins-number{width:21px;height:21px;display:grid;place-items:center;border-radius:50%;background:var(--forest-800);color:#fff;font-size:10px;font-weight:850}
.jins-card h2{min-width:0;margin:0;color:var(--heading-color);font-size:21px;font-weight:650;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jins-type-badge{display:inline-flex;align-items:center;min-height:22px;border-radius:999px;padding:0 8px;font-size:10px;font-weight:850;white-space:nowrap}
.jins-type-badge.tetra{background:var(--sage-200);color:var(--forest-800)}
.jins-type-badge.penta{background:var(--gold-200);color:#8A5B19}
.jins-type-badge.quarter{background:#D5E7E5;color:#28696A}
html[data-theme="dark"] .jins-type-badge.quarter{background:#1E3B38;color:#A9D2CC}
.jins-pattern{margin:7px 0 5px 30px;color:var(--ink-900);font-size:11px;font-weight:700;letter-spacing:.02em}
.jins-mini-keyboard{height:82px;border-top:1px solid var(--sand-100);border-bottom:1px solid var(--sand-100);padding:6px 0 7px;overflow:hidden}
.jins-keyboard-svg{display:block;width:100%;height:100%;touch-action:none;overflow:visible}
.jins-key-c4-label{font-family:Montserrat,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:5.2px;font-weight:500;fill:var(--muted-600,#5F6966);opacity:.72;pointer-events:none;user-select:none}
.jins-key-white{fill:var(--kb-white-fill);stroke:var(--kb-white-border);stroke-width:.8;transition:fill .08s ease,transform .05s ease;transform-box:fill-box;transform-origin:center}
.jins-key-black{fill:var(--kb-black-fill);stroke:var(--kb-black-border);stroke-width:.7;transition:fill .08s ease,transform .05s ease;transform-box:fill-box;transform-origin:center}
.jins-key-white.pressed{fill:#E4ECE8;transform:translateY(1px)}
.jins-key-black.pressed{fill:#0F1513;transform:translateY(1px)}
html[data-theme="dark"] .jins-mini-keyboard{background:#F8F8F6;border-radius:5px;border-color:#354640}
html[data-theme="dark"] .jins-key-white{fill:#FDFCF9;stroke:#AAB0AD}
html[data-theme="dark"] .jins-key-black{fill:#242927;stroke:#121715}
.jins-marker{pointer-events:auto;stroke:none;stroke-width:0}
.jins-marker.tonic{fill:var(--key-octave)}
.jins-marker.normal{fill:var(--key-normal)}
.jins-marker.quarter{fill:var(--key-quarter)}
.jins-marker.quarter-tonic{fill:var(--key-quarter-octave);stroke:#D39A4A;stroke-width:1.4}
/* White-key Jins markers stay readable without covering the quiet C4 orientation label. */
.jins-marker.on-white{opacity:.6}
.jins-marker.on-white.pressed{opacity:.9}
.jins-marker.pressed{filter:brightness(.92)}
.jins-marker.quarter-tonic.pressed{stroke:var(--forest-950);stroke-width:2.2}
.jins-flip-hint{display:flex;justify-content:flex-end;margin-top:5px;color:var(--muted-600);font-size:10px;font-weight:700}
.jins-card-back-head{display:grid;grid-template-columns:23px minmax(0,1fr) auto;gap:7px;align-items:center;margin-bottom:7px}
.jins-card-back-head h2{min-width:0;margin:0;color:var(--heading-color);font-size:21px;font-weight:650;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jins-back-label{color:var(--teal-700);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.jins-staff-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 5px 30px}
.jins-staff-toolbar .jins-pattern{margin:0}
.jins-interval-toggle{display:inline-flex;align-items:center;gap:6px;color:var(--muted-600);font-size:10px;font-weight:700;cursor:pointer}
.jins-interval-toggle input{accent-color:var(--forest-800)}
.jins-staff-mount{position:relative;min-height:137px;margin-top:auto;border-top:1px solid var(--sand-100);border-bottom:1px solid var(--sand-100);background:var(--notation-paper);border-radius:6px;overflow:hidden;cursor:pointer}
html[data-theme="dark"] .jins-staff-mount{background:#F8F8F6;border-color:#354640}
.jins-staff-svg{display:block;width:100%;height:auto;min-height:137px}
.jins-staff-loading,.jins-staff-error{min-height:137px;display:grid;place-items:center;padding:12px;text-align:center;color:var(--muted-600);font-size:10px;background:var(--notation-paper)}
.jins-staff-interval{font-family:"Montserrat",system-ui,sans-serif;font-size:12px;font-weight:800;fill:#415E72;pointer-events:none}
.jins-staff-acc{font-family:"Bravura","Bravura Text",serif;pointer-events:none}
.jins-back-return{display:flex;justify-content:flex-end;margin-top:5px;color:var(--muted-600);font-size:10px;font-weight:700}
.jins-note-row{min-height:29px;display:flex;align-items:center;justify-content:center;gap:5px;padding-top:7px;color:var(--heading-color);font-size:11px;font-weight:750;white-space:nowrap;overflow-x:auto;scrollbar-width:thin}
.jins-note-name{display:inline-flex;align-items:center;gap:2px}
.jins-note-acc{font-size:14px;line-height:1}.jins-note-acc.smufl{font-family:"Bravura","Bravura Text",serif;font-size:18px;transform:translateY(1px)}
.jins-note-sep{color:var(--border-300);font-weight:500}
.ajnas-empty{grid-column:1/-1;padding:28px;text-align:center;color:var(--muted-600);font-size:12px}

.ajnas-bottom-callout{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;margin-top:12px;padding:16px 18px;background:linear-gradient(90deg,var(--surface-solid),var(--card-50))}
.ajnas-callout-icon{width:46px;height:46px;display:grid;place-items:center;padding:3px;border-radius:50%;background:transparent;color:#fff;font-size:18px}
.ajnas-bottom-callout>div:nth-child(2){display:grid;gap:2px}
.ajnas-bottom-callout strong{color:var(--heading-color);font-family:"Cormorant Garamond",serif;font-size:19px;font-weight:650}
.ajnas-bottom-callout span{color:var(--muted-600);font-size:10px;line-height:1.45}

@media(max-width:1120px){
  .ajnas-toolbar{grid-template-columns:1fr 130px 1fr}.ajnas-filter-group{grid-column:1/-1;grid-row:2}.ajnas-name-system{justify-self:stretch;min-width:0}.ajnas-sort-control{min-width:0}
  .ajnas-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .ajnas-hero{grid-template-columns:1fr;min-height:0;padding-top:8px}.ajnas-hero-instrument{min-height:210px}.ajnas-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .ajnas-shell{width:min(100% - 18px,1320px)}.ajnas-hero-copy h1{font-size:62px}.ajnas-hero-copy h2{font-size:23px}.ajnas-hero-copy>p:not(.legal-eyebrow){font-size:12px}
  .ajnas-toolbar{grid-template-columns:1fr 110px}.ajnas-filter-group,.ajnas-name-system{grid-column:1/-1}.ajnas-sort-control{grid-column:1/-1}.ajnas-name-system{justify-self:stretch}
  .ajnas-grid{grid-template-columns:1fr}.ajnas-bottom-callout{grid-template-columns:auto 1fr}.ajnas-bottom-callout .btn{grid-column:1/-1;width:100%}
}
@media(max-width:440px){
  .ajnas-stats{grid-template-columns:1fr}.ajnas-stat{min-height:76px}.ajnas-toolbar{grid-template-columns:1fr}.ajnas-filter-group,.ajnas-name-system,.ajnas-sort-control{grid-column:auto}.ajnas-filter-group button{flex:1;justify-content:center}.jins-card-head{grid-template-columns:23px 1fr}.jins-type-badge{grid-column:2;justify-self:start}.jins-pattern{margin-left:30px}
}

/* v2.5 — stable navigation, image icons, Ajnas refinements */
@media (min-width:1181px){
  .header-inner{position:relative}
  .nav{position:absolute;left:50%;top:0;bottom:0;transform:translateX(-50%);flex:none;align-self:auto;z-index:2}
}

.section-icon-image{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;padding:3px;font-family:inherit}
.section-icon-image img{display:block;width:40px;height:40px;object-fit:contain}

.ajnas-stat-icon img{display:block;width:40px;height:40px;object-fit:contain}
.ajnas-stat-icon.stat-total img{filter:none}

.ajnas-toolbar{grid-template-columns:minmax(180px,1.35fr) 125px auto 155px minmax(290px,auto)}

.jins-badges{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0;flex-wrap:wrap}
.jins-card-back-head .jins-badges{justify-self:end}
.jins-staff-options{display:inline-flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.jins-prefer-flats-toggle.is-disabled{opacity:.42;cursor:not-allowed}
.jins-prefer-flats-toggle input:disabled{cursor:not-allowed}

.jins-mini-keyboard{height:84px;padding:6px 0 7px}
.jins-playable-staff-note{cursor:pointer;outline:none}
.jins-playable-staff-note:focus-visible{outline:2px solid #A0BDB5;outline-offset:2px}
.jins-playable-staff-note.jins-staff-note-hit .vf-notehead path,
.jins-playable-staff-note.jins-staff-note-hit path.vf-notehead,
.jins-playable-staff-note.jins-staff-note-hit .vf-noteheads path{fill:#C4624F!important}

@media(max-width:1120px){
  .ajnas-toolbar{grid-template-columns:1fr 130px 150px minmax(260px,1fr)}
  .ajnas-filter-group{grid-column:1/-1;grid-row:2}
}
@media(max-width:680px){
  .ajnas-toolbar{grid-template-columns:1fr 110px}
  .jins-staff-toolbar{align-items:flex-start;flex-wrap:wrap}
  .jins-staff-options{width:100%;justify-content:flex-start}
}
@media(max-width:440px){
  .jins-card-head,.jins-card-back-head{grid-template-columns:23px minmax(0,1fr)}
  .jins-badges{grid-column:2;justify-self:start;justify-content:flex-start}
}

@media(max-width:1120px) and (min-width:681px){
  .ajnas-toolbar{grid-template-columns:minmax(170px,1fr) 120px 150px minmax(270px,1fr)}
  .ajnas-search-control{grid-column:1;grid-row:1}
  .ajnas-key-control{grid-column:2;grid-row:1}
  .ajnas-sort-control{grid-column:3;grid-row:1}
  .ajnas-name-system{grid-column:4;grid-row:1;justify-self:stretch;min-width:0}
  .ajnas-filter-group{grid-column:1/-1;grid-row:2}
}


/* v2.9 — relocated maqam search + screenshot-resilient ownership watermark */
.maqam-page::after,.ajnas-page::after{
  content:"© 2026 Maqam Academy";
  position:fixed;right:18px;bottom:12px;z-index:45;pointer-events:none;user-select:none;
  font-size:10px;font-weight:650;letter-spacing:.025em;white-space:nowrap;
  color:rgba(12,35,30,.14);
}
html[data-theme="dark"] .maqam-page::after,html[data-theme="dark"] .ajnas-page::after{color:rgba(231,238,234,.15)}
.staff-stage::after{
  content:"© 2026 Maqam Academy";
  display:var(--design-staff-rotated-watermark-display);
  position:absolute;left:50%;top:50%;z-index:8;pointer-events:none;user-select:none;white-space:nowrap;
  transform:translate(-50%,-50%) translate(var(--design-staff-rotated-watermark-x),var(--design-staff-rotated-watermark-y)) rotate(var(--design-staff-rotated-watermark-rotation));
  color:var(--design-staff-rotated-watermark-color);
  opacity:calc(var(--design-staff-rotated-watermark-opacity) / 100);
  font-family:var(--design-staff-rotated-watermark-font);font-size:var(--design-staff-rotated-watermark-size);font-weight:750;letter-spacing:.04em;
}
.jins-staff-mount::after{
  content:"© 2026 Maqam Academy";
  position:absolute;left:50%;top:50%;z-index:8;pointer-events:none;user-select:none;
  transform:translate(-50%,-50%) rotate(-12deg);white-space:nowrap;
  color:rgba(12,35,30,.11);font-family:"Montserrat",system-ui,sans-serif;font-size:10px;font-weight:750;letter-spacing:.04em;
}
/* Hide all notation-side watermarks while the flip card back is visible */
.flip-shell.is-flipped .staff-stage::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
}

@media(max-width:680px){
  .maqam-page::after,.ajnas-page::after{right:10px;bottom:8px}
}

/* v3.9 — Ajnas toolbar alignment */
.ajnas-hero-instrument{padding-bottom:0}
.ajnas-toolbar{
  display:grid;
  grid-template-columns:minmax(150px,.9fr) 105px minmax(470px,2.5fr) minmax(145px,.9fr) minmax(280px,1.45fr);
  gap:12px;
  align-items:end;
  padding:12px 14px;
}
.ajnas-toolbar-control{
  min-width:0;
  display:grid;
  grid-template-rows:12px 38px;
  gap:5px;
  align-items:end;
}
.ajnas-toolbar-control>span{
  display:flex;
  align-items:center;
  min-height:12px;
  margin:0;
  color:var(--muted-600);
  font-size:10px;
  font-weight:850;
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.ajnas-toolbar .ajnas-instrument-control{
  position:static;
  z-index:auto;
  left:auto;
  bottom:auto;
  transform:none;
  width:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.ajnas-toolbar .ajnas-instrument-control select,
.ajnas-toolbar .ajnas-key-control select,
.ajnas-toolbar .ajnas-sort-control select{
  width:100%;
  height:38px;
  min-height:38px;
  border-radius:8px;
}
.ajnas-filter-control{min-width:0}
.ajnas-filter-group{
  display:flex;
  align-items:stretch;
  gap:6px;
  flex-wrap:nowrap;
  min-width:0;
  height:38px;
}
.ajnas-filter-group button{
  height:38px;
  min-height:38px;
  justify-content:center;
  padding:0 10px;
}
.ajnas-name-system{
  justify-self:stretch;
  min-width:0;
}
.ajnas-name-system .segmented{
  width:100%;
  height:38px;
  min-height:38px;
  padding:2px;
  align-items:stretch;
}
.ajnas-name-system .segmented button{
  height:32px;
  min-height:32px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.jins-number{font-weight:500}

@media(max-width:1180px){
  .ajnas-toolbar{
    grid-template-columns:minmax(150px,1fr) 110px minmax(145px,1fr) minmax(280px,1.6fr);
  }
  .ajnas-filter-control{grid-column:1/-1;grid-row:2}
  .ajnas-filter-group{justify-content:flex-start}
}
@media(max-width:760px){
  .ajnas-toolbar{grid-template-columns:1fr 110px}
  .ajnas-instrument-control{grid-column:1}
  .ajnas-key-control{grid-column:2}
  .ajnas-filter-control,.ajnas-sort-control,.ajnas-name-system{grid-column:1/-1}
  .ajnas-filter-group{height:auto;flex-wrap:wrap}
  .ajnas-filter-group button{flex:1 1 calc(50% - 3px)}
}
@media(max-width:440px){
  .ajnas-toolbar{grid-template-columns:1fr}
  .ajnas-instrument-control,.ajnas-key-control,.ajnas-filter-control,.ajnas-sort-control,.ajnas-name-system{grid-column:1}
  .ajnas-filter-group button{flex:1 1 100%}
}

/* Architect v1.10.1 — staff display controls */
.staff-analysis-controls{
  min-height:46px;
  padding:14px 20px 10px;
  gap:20px;
  border-bottom:1px solid var(--sand-100);
}
.staff-analysis-controls .checkbox{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.staff-analysis-controls .checkbox.is-disabled{
  opacity:.38;
  cursor:not-allowed;
}
.staff-analysis-controls .checkbox.is-disabled input{
  cursor:not-allowed;
}
@media(max-width:760px){
  .staff-analysis-controls{padding:12px 12px 9px;gap:12px 16px;justify-content:flex-start}
}


/* Architect v1.10.2 — tempo control and staff-toolbar refinements */
.tempo-control{display:grid;grid-template-columns:auto minmax(110px,150px) auto;align-items:center;gap:8px;min-width:250px}
.tempo-label{font-size:10px;font-weight:700;color:var(--heading-color);white-space:nowrap}
.tempo-slider-wrap{min-width:110px}
.tempo-slider-wrap::before{background:none!important}
.tempo-value{min-width:58px;text-align:right;font-size:9px;font-weight:700;color:var(--heading-color);font-variant-numeric:tabular-nums;white-space:nowrap}
.staff-analysis-controls #prefer-flats-wrap{margin-left:2px}
@media(max-width:760px){
  .tempo-control{grid-template-columns:auto minmax(100px,1fr) auto;width:100%;min-width:0}
  .notation-tools{width:100%}
}

/* Architect v2.7 — Edu public pricing detail */
.edu-public-price-card>div{display:grid;gap:5px}
.edu-public-price-card>div>strong{font-size:clamp(30px,4vw,42px);line-height:1.05}
.edu-public-tax-note{color:var(--muted-600);font-size:11px;font-weight:700}
@media (max-width:720px){
  .plan-tagline,.plan-pricing-zone,.plan-action-zone>.plan-flex-note{min-height:0}
  .plan-action-zone{margin-top:0}
}


/* FAQ accordion — v3.1 */
.faq-card{
  display:grid;
  gap:10px;
  padding:20px;
  background:var(--surface-solid);
}
.faq-accordion{
  margin:0;
  overflow:hidden;
  border:1px solid var(--border-300);
  border-radius:14px;
  background:var(--card-50);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.faq-accordion:hover{
  border-color:var(--sage-500);
}
.faq-accordion[open]{
  border-color:var(--sage-500);
  background:var(--surface-solid);
  box-shadow:0 8px 24px rgba(12,35,30,.06);
}
.faq-accordion-summary{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:58px;
  padding:16px 18px;
  color:var(--heading-color);
  font-family:"Montserrat",sans-serif;
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.055em;
  cursor:pointer;
  user-select:none;
  list-style:none;
}
.faq-accordion-summary::-webkit-details-marker{display:none}
.faq-accordion-summary::marker{content:""}
.faq-accordion-summary:focus-visible{
  outline:2px solid var(--teal-700);
  outline-offset:-3px;
  border-radius:12px;
}
.faq-accordion-icon{
  position:relative;
  width:26px;
  height:26px;
  flex:0 0 26px;
  border:1px solid var(--border-300);
  border-radius:999px;
  background:var(--surface-solid);
}
.faq-accordion-icon::before,
.faq-accordion-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:1.5px;
  border-radius:2px;
  background:var(--teal-700);
  transform:translate(-50%,-50%);
  transition:transform .18s ease,opacity .18s ease;
}
.faq-accordion-icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
}
.faq-accordion[open] .faq-accordion-icon::after{
  opacity:0;
  transform:translate(-50%,-50%) rotate(0deg);
}
.faq-accordion-body{
  padding:2px 20px 18px;
  border-top:1px solid var(--border-300);
}
.faq-accordion-body h3{
  margin-top:20px;
}
.faq-accordion-body h3:first-child{
  margin-top:17px;
}
.faq-accordion-body p:last-child,
.faq-accordion-body ul:last-child{
  margin-bottom:0;
}
.legal-card .legal-email{
  color:var(--teal-700);
  font-weight:750;
  text-decoration:none;
  text-underline-offset:2px;
}
.legal-card .legal-email:hover{
  text-decoration:underline;
}
html[data-theme="dark"] .faq-accordion[open]{
  box-shadow:none;
}
@media (max-width:560px){
  .faq-card{padding:12px;gap:8px}
  .faq-accordion-summary{min-height:54px;padding:14px 14px;font-size:12px;letter-spacing:.04em}
  .faq-accordion-body{padding:1px 14px 16px}
}

/* v3.2 — FAQ navigation and About page refinement */
.faq-hero{
  position:relative;
  overflow:hidden;
  padding:28px 30px 26px;
  border:1px solid var(--border-300);
  border-radius:20px;
  background:
    radial-gradient(circle at 92% 10%,rgba(211,154,74,.15),transparent 28%),
    radial-gradient(circle at 78% 90%,rgba(160,189,181,.20),transparent 34%),
    var(--surface-solid);
  box-shadow:var(--shadow);
}
.faq-hero::after{
  content:"?";
  position:absolute;
  right:28px;
  top:4px;
  font-family:"Cormorant Garamond",serif;
  font-size:132px;
  font-weight:650;
  line-height:1;
  color:rgba(19,67,57,.055);
  pointer-events:none;
}
.faq-hero h1,.faq-hero>p,.faq-hero-topics{position:relative;z-index:1}
.faq-hero-copy{max-width:720px!important;margin:12px 0 0!important;color:var(--muted-600);font-size:13px!important;line-height:1.7!important}
.faq-hero-topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.faq-hero-topics span,.about-focus-row span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 10px;
  border:1px solid var(--border-300);
  border-radius:999px;
  background:var(--card-50);
  color:var(--forest-800);
  font-size:10px;
  font-weight:800;
  letter-spacing:.025em;
}
.faq-card{
  counter-reset:faq-section;
  position:relative;
  gap:12px;
  padding:22px;
  background:linear-gradient(180deg,var(--surface-solid),var(--card-50));
}
.faq-card::before{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  top:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--gold-600),var(--sage-500),transparent);
}
.faq-accordion{counter-increment:faq-section}
.faq-accordion-summary{scroll-margin-top:90px}
.faq-accordion-summary::before{
  content:counter(faq-section,decimal-leading-zero);
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:10px;
  background:var(--sage-200);
  color:var(--forest-800);
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
}
.faq-accordion[open] .faq-accordion-summary::before{
  background:var(--forest-800);
  color:var(--white);
}
.faq-accordion-summary>span:first-of-type{flex:1}
.faq-accordion-body{padding-left:70px;padding-right:22px}

.about-hero{
  position:relative;
  overflow:hidden;
  padding:26px 28px 24px!important;
  border:1px solid var(--border-300);
  border-radius:20px;
  background:
    radial-gradient(circle at 88% 15%,rgba(211,154,74,.14),transparent 26%),
    linear-gradient(135deg,var(--surface-solid),var(--card-50));
  box-shadow:var(--shadow);
}
.about-hero::after{
  content:"";
  position:absolute;
  right:-52px;
  bottom:-80px;
  width:220px;
  height:220px;
  border:1px solid rgba(160,189,181,.36);
  border-radius:50%;
  box-shadow:0 0 0 28px rgba(160,189,181,.08),0 0 0 56px rgba(211,154,74,.045);
  pointer-events:none;
}
.about-hero>*{position:relative;z-index:1}
.about-focus-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.about-founder{position:relative;overflow:hidden;border-top:2px solid rgba(211,154,74,.58)}
.founder-framework-card{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:18px;
  margin:24px 0 22px;
  padding:20px;
  border:1px solid rgba(160,189,181,.62);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(221,225,217,.44),var(--surface-solid));
}
.founder-framework-mark{
  display:grid;
  place-items:center;
  width:82px;
  height:82px;
  border-radius:18px;
  background:var(--forest-950);
  color:var(--gold-200);
  font-family:"Cormorant Garamond",serif;
  font-size:25px;
  font-weight:700;
  letter-spacing:.02em;
}
.founder-framework-kicker{margin:0 0 3px!important;color:var(--teal-700)!important;font-size:9px!important;font-weight:850!important;letter-spacing:.12em;text-transform:uppercase}
.founder-framework-card h3{margin:0 0 7px;color:var(--heading-color);font-family:"Cormorant Garamond",serif;font-size:27px;font-weight:650;line-height:1.05}
.founder-framework-card p:last-child{margin-bottom:0}
html[data-theme="dark"] .founder-framework-card{background:linear-gradient(135deg,rgba(41,72,63,.38),var(--surface-solid))}
html[data-theme="dark"] .faq-hero::after{color:rgba(250,231,183,.045)}

@media(max-width:700px){
  .faq-hero{padding:22px 18px 20px}.faq-hero::after{right:8px;top:18px;font-size:100px}
  .faq-card{padding:12px}.faq-card::before{left:12px;right:12px}
  .faq-accordion-summary{gap:11px;padding:13px 13px}.faq-accordion-summary::before{width:28px;height:28px;flex-basis:28px;border-radius:9px}
  .faq-accordion-body{padding:1px 14px 16px 54px}
  .about-hero{padding:22px 18px 20px!important}
  .founder-framework-card{grid-template-columns:1fr;gap:13px;padding:17px}
  .founder-framework-mark{width:66px;height:66px;border-radius:15px;font-size:21px}
}

/* v3.4 protected on-demand Ajnas delivery */
.jins-card-loading{cursor:default}
.jins-protected-placeholder{color:var(--muted-color);font-weight:700;letter-spacing:.01em}
.jins-protected-keyboard{display:grid;place-items:center;color:var(--muted-color);font-size:11px;font-weight:700;background:linear-gradient(90deg,rgba(160,189,181,.08),rgba(221,225,217,.28),rgba(160,189,181,.08));background-size:200% 100%;animation:jinsProtectedPulse 1.6s ease-in-out infinite}
.jins-protected-note-row{color:var(--muted-color);font-weight:650}
@keyframes jinsProtectedPulse{0%,100%{background-position:0 0}50%{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){.jins-protected-keyboard{animation:none}}

/* ================================================================
   Global dropdown system — Sage Group Cards
   Replaces the OS-rendered open <select> menu while preserving the
   native select for form values, validation and existing JS logic.
   ================================================================ */
.ma-native-select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  min-height:1px!important;
  margin:-1px!important;
  padding:0!important;
  border:0!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* =========================================================
   KEY DROPDOWN — SIZE CONTROLS
   =========================================================
   These variables affect only the Key dropdowns on the
   Maqamat and Ajnas pages. They do not affect Instrument,
   Sort, Admin, Contact, or any other dropdown.
   ========================================================= */
:root{
  /* Maqamat Key — normal key text */
  --maqamat-key-size-closed:14px;
  --maqamat-key-size-menu:12px;

  /* Ajnas Key — normal key text */
  --ajnas-key-size-closed:14px;
  --ajnas-key-size-menu:12px;

  /* -----------------------------------------------------
     QUARTER-TONIC NOTE LETTER — closed Maqamat Key field
     ----------------------------------------------------- */
  --maqam-key-letter-size-closed:14px;
  --maqam-key-letter-x-closed:0px;
  --maqam-key-letter-y-closed:-5px;

  /* -----------------------------------------------------
     QUARTER-TONIC NOTE LETTER — open Maqamat Key menu
     ----------------------------------------------------- */
  --maqam-key-letter-size-menu:14px;
  --maqam-key-letter-x-menu:0px;
  --maqam-key-letter-y-menu:0px;

  /* -----------------------------------------------------
     QUARTER-TONIC ACCIDENTAL — closed Maqamat Key field
     ----------------------------------------------------- */
  --maqam-key-accidental-size-closed:26px;
  --maqam-key-accidental-gap-closed:2px;
  --maqam-key-accidental-x-closed:0px;
  --maqam-key-accidental-y-closed:2px;

  /* -----------------------------------------------------
     QUARTER-TONIC ACCIDENTAL — open Key menu
     Quarter-flat and quarter-sharp are fully independent.
     These values affect both Maqamat and Ajnas QTT menus.
     ----------------------------------------------------- */

  /* Quarter-flat — open menu */
  --maqam-key-qflat-size-menu:24px;
  --maqam-key-qflat-gap-menu:2px;
  --maqam-key-qflat-x-menu:0px;
  --maqam-key-qflat-y-menu:2px;

  /* Quarter-sharp — open menu */
  --maqam-key-qsharp-size-menu:24px;
  --maqam-key-qsharp-gap-menu:2px;
  --maqam-key-qsharp-x-menu:0px;
  --maqam-key-qsharp-y-menu:-2px;

  /* -----------------------------------------------------
     GLYPH-SPECIFIC CLOSED-FIELD FINE TUNING
     These remain additive to the shared closed accidental
     X/Y controls above.
     ----------------------------------------------------- */
  --maqam-key-qflat-x:0px;
  --maqam-key-qflat-y:0px;
  --maqam-key-qsharp-x:0px;
  --maqam-key-qsharp-y:-4px;
}

/* Shared Key/Tonic Traditional marker.
   Applies only to Maqamat + Ajnas Key/Tonic dropdowns. The underlying native
   option remains unchanged; this is the Academy component presentation. */
.ma-select--key-tonic .maqam-key-dropdown-traditional,
.ma-select-menu--key-tonic .maqam-key-dropdown-traditional{
  display:inline-block;
  margin-left:4px;
  color:var(--muted-600);
  font-size:calc(1em - 2px);
  font-weight:500;
  line-height:1;
  vertical-align:baseline;
}

.ma-select{
  --ma-select-height:42px;
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  font-family:"Montserrat","Bravura Text","Bravura",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.ma-select-trigger{
  width:100%;
  height:var(--ma-select-height);
  min-height:var(--ma-select-height);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--border-300);
  border-radius:10px;
  background:var(--card-50);
  padding:0 12px;
  color:var(--ink-900);
  font:inherit;
  font-size:inherit;
  font-weight:600;
  line-height:1.2;
  text-align:left;
  cursor:pointer;
  outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
}
.ma-select-trigger:hover{border-color:var(--sage-500);background:var(--surface-solid)}
.ma-select-trigger:focus-visible,
.ma-select.is-open .ma-select-trigger{
  border-color:var(--teal-700);
  box-shadow:0 0 0 3px rgba(21,83,71,.11);
}
.ma-select.is-disabled .ma-select-trigger,
.ma-select-trigger:disabled{opacity:.52;cursor:not-allowed;background:var(--sand-100)}
.ma-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ma-select-value .maqam-key-dropdown-letter,
.ma-select-option-label .maqam-key-dropdown-letter{
  display:inline-block;
  font-family:inherit;
  line-height:1;
  transform-origin:center;
}
.ma-select-menu .ma-select-option-label .maqam-key-dropdown-letter{
  font-size:var(--maqam-key-letter-size-menu);
  transform:translate(var(--maqam-key-letter-x-menu),var(--maqam-key-letter-y-menu));
}
.ma-select-value .maqam-key-dropdown-accidental,
.ma-select-option-label .maqam-key-dropdown-accidental{
  display:inline-block;
  font-family:"Bravura Text","Bravura",serif;
  font-weight:400;
  line-height:1;
  transform-origin:center;
}
.ma-select-menu .ma-select-option-label .maqam-key-dropdown-accidental{
  /* Base only. Open-menu glyph sizing/spacing/position is set
     independently below for quarter-flat and quarter-sharp. */
  font-size:24px;
  margin-left:2px;
}
.ma-select-menu .maqam-key-dropdown-accidental[data-accidental="quarter-flat"]{
  font-size:var(--maqam-key-qflat-size-menu);
  margin-left:var(--maqam-key-qflat-gap-menu);
  transform:translate(
    var(--maqam-key-qflat-x-menu),
    var(--maqam-key-qflat-y-menu)
  );
}
.ma-select-menu .maqam-key-dropdown-accidental[data-accidental="quarter-sharp"]{
  font-size:var(--maqam-key-qsharp-size-menu);
  margin-left:var(--maqam-key-qsharp-gap-menu);
  transform:translate(
    var(--maqam-key-qsharp-x-menu),
    var(--maqam-key-qsharp-y-menu)
  );
}


/* =========================================================
   SHARED KEY/TONIC COMPONENT — DESIGN-DATABASE OWNED
   =========================================================
   Maqamat and Ajnas use the same component geometry. Pages may
   change the selected tonic/state but may not restyle internals.
   ========================================================= */
.ma-select--key-tonic{
  --ma-select-height:var(--design-key-tonic-height,42px)!important;
}
.ma-select--key-tonic .ma-select-trigger{
  height:var(--design-key-tonic-height,42px)!important;
  min-height:var(--design-key-tonic-height,42px)!important;
  border-radius:var(--design-key-tonic-radius,10px)!important;
  padding-left:var(--design-key-tonic-pad-x,12px)!important;
  padding-right:var(--design-key-tonic-pad-x,12px)!important;
  font-size:var(--design-key-tonic-letter-size-closed,14px)!important;
}
.ma-select-menu.ma-select-menu--key-tonic{
  border-radius:var(--design-key-tonic-menu-radius,10px)!important;
}
.ma-select-menu--key-tonic .ma-select-option{
  min-height:var(--design-key-tonic-option-height,35px)!important;
  padding-left:var(--design-key-tonic-option-pad-x,9px)!important;
  padding-right:var(--design-key-tonic-option-pad-x,9px)!important;
  font-size:var(--design-key-tonic-letter-size-menu,12px)!important;
}
.ma-select--key-tonic .ma-select-chevron svg{
  width:var(--design-key-tonic-chevron-size,12px)!important;
  height:auto!important;
  transform:translateY(var(--design-key-tonic-chevron-y,0px))!important;
}

.ma-select--key-tonic .ma-select-value .maqam-key-dropdown-letter{
  color:var(--design-key-tonic-letter-color,var(--ink-900))!important;
  font-size:var(--design-key-tonic-letter-size-closed,14px)!important;
  font-weight:var(--design-key-tonic-letter-weight,600)!important;
  transform:translate(var(--design-key-tonic-letter-x-closed,0px),var(--design-key-tonic-letter-y-closed,0px))!important;
}
.ma-select-menu--key-tonic .ma-select-option-label .maqam-key-dropdown-letter{
  color:var(--design-key-tonic-letter-color,var(--ink-900))!important;
  font-size:var(--design-key-tonic-letter-size-menu,12px)!important;
  font-weight:var(--design-key-tonic-letter-weight,600)!important;
  transform:translate(var(--design-key-tonic-letter-x-menu,0px),var(--design-key-tonic-letter-y-menu,0px))!important;
}
.ma-select--key-tonic .ma-select-value .maqam-key-dropdown-letter.is-quarter-letter{
  transform:translate(var(--design-key-tonic-letter-x-closed,0px),var(--design-key-tonic-quarter-letter-y-closed,-5px))!important;
}
.ma-select-menu--key-tonic .ma-select-option-label .maqam-key-dropdown-letter.is-quarter-letter{
  transform:translate(var(--design-key-tonic-letter-x-menu,0px),var(--design-key-tonic-quarter-letter-y-menu,0px))!important;
}

.ma-select--key-tonic .ma-select-value .maqam-key-dropdown-accidental[data-accidental="sharp"]{
  margin-left:var(--design-key-tonic-sharp-gap-closed,0px)!important;
  color:var(--design-key-tonic-sharp-color,var(--ink-900))!important;
  font-family:inherit;
  font-size:var(--design-key-tonic-sharp-size-closed,14px)!important;
  font-weight:var(--design-key-tonic-sharp-weight,400)!important;
  transform:translate(var(--design-key-tonic-sharp-x-closed,0px),var(--design-key-tonic-sharp-y-closed,0px))!important;
}
.ma-select-menu--key-tonic .ma-select-option-label .maqam-key-dropdown-accidental[data-accidental="sharp"]{
  margin-left:var(--design-key-tonic-sharp-gap-menu,0px)!important;
  color:var(--design-key-tonic-sharp-color,var(--ink-900))!important;
  font-family:inherit;
  font-size:var(--design-key-tonic-sharp-size-menu,12px)!important;
  font-weight:var(--design-key-tonic-sharp-weight,400)!important;
  transform:translate(var(--design-key-tonic-sharp-x-menu,0px),var(--design-key-tonic-sharp-y-menu,0px))!important;
}
.ma-select--key-tonic .ma-select-value .maqam-key-dropdown-accidental[data-accidental="flat"]{
  margin-left:var(--design-key-tonic-flat-gap-closed,0px)!important;
  color:var(--design-key-tonic-flat-color,var(--ink-900))!important;
  font-family:inherit;
  font-size:var(--design-key-tonic-flat-size-closed,14px)!important;
  font-weight:var(--design-key-tonic-flat-weight,400)!important;
  transform:translate(var(--design-key-tonic-flat-x-closed,0px),var(--design-key-tonic-flat-y-closed,0px))!important;
}
.ma-select-menu--key-tonic .ma-select-option-label .maqam-key-dropdown-accidental[data-accidental="flat"]{
  margin-left:var(--design-key-tonic-flat-gap-menu,0px)!important;
  color:var(--design-key-tonic-flat-color,var(--ink-900))!important;
  font-family:inherit;
  font-size:var(--design-key-tonic-flat-size-menu,12px)!important;
  font-weight:var(--design-key-tonic-flat-weight,400)!important;
  transform:translate(var(--design-key-tonic-flat-x-menu,0px),var(--design-key-tonic-flat-y-menu,0px))!important;
}

.ma-select--key-tonic .ma-select-value .maqam-key-dropdown-accidental[data-accidental="quarter-flat"]{
  margin-left:var(--design-key-tonic-qflat-gap-closed,2px)!important;
  color:var(--design-key-tonic-quarter-color,var(--ink-900))!important;
  font-size:var(--design-key-tonic-qflat-size-closed,26px)!important;
  transform:translate(var(--design-key-tonic-qflat-x-closed,0px),var(--design-key-tonic-qflat-y-closed,2px))!important;
}
.ma-select-menu--key-tonic .ma-select-option-label .maqam-key-dropdown-accidental[data-accidental="quarter-flat"]{
  margin-left:var(--design-key-tonic-qflat-gap-menu,2px)!important;
  color:var(--design-key-tonic-quarter-color,var(--ink-900))!important;
  font-size:var(--design-key-tonic-qflat-size-menu,24px)!important;
  transform:translate(var(--design-key-tonic-qflat-x-menu,0px),var(--design-key-tonic-qflat-y-menu,2px))!important;
}
.ma-select--key-tonic .ma-select-value .maqam-key-dropdown-accidental[data-accidental="quarter-sharp"]{
  margin-left:var(--design-key-tonic-qsharp-gap-closed,2px)!important;
  color:var(--design-key-tonic-quarter-color,var(--ink-900))!important;
  font-size:var(--design-key-tonic-qsharp-size-closed,26px)!important;
  transform:translate(var(--design-key-tonic-qsharp-x-closed,0px),var(--design-key-tonic-qsharp-y-closed,-2px))!important;
}
.ma-select-menu--key-tonic .ma-select-option-label .maqam-key-dropdown-accidental[data-accidental="quarter-sharp"]{
  margin-left:var(--design-key-tonic-qsharp-gap-menu,2px)!important;
  color:var(--design-key-tonic-quarter-color,var(--ink-900))!important;
  font-size:var(--design-key-tonic-qsharp-size-menu,24px)!important;
  transform:translate(var(--design-key-tonic-qsharp-x-menu,0px),var(--design-key-tonic-qsharp-y-menu,-2px))!important;
}

.ma-select--key-tonic .ma-select-value .maqam-key-dropdown-traditional{
  margin-left:var(--design-key-tonic-traditional-gap,4px)!important;
  color:var(--design-key-tonic-traditional-color,var(--muted-600))!important;
  font-size:var(--design-key-tonic-traditional-size-closed,12px)!important;
  font-weight:var(--design-key-tonic-traditional-weight,500)!important;
  opacity:var(--design-key-tonic-traditional-opacity,1)!important;
  transform:translateY(var(--design-key-tonic-traditional-y-closed,0px))!important;
}
.ma-select--key-tonic .ma-select-value.is-quarter-tonic-value .maqam-key-dropdown-traditional{
  transform:translateY(var(--design-key-tonic-traditional-y-quarter-closed,-4px))!important;
}
.ma-select-menu--key-tonic .ma-select-option-label .maqam-key-dropdown-traditional{
  margin-left:var(--design-key-tonic-traditional-gap,4px)!important;
  color:var(--design-key-tonic-traditional-color,var(--muted-600))!important;
  font-size:var(--design-key-tonic-traditional-size-menu,10px)!important;
  font-weight:var(--design-key-tonic-traditional-weight,500)!important;
  opacity:var(--design-key-tonic-traditional-opacity,1)!important;
  transform:translateY(var(--design-key-tonic-traditional-y-menu,0px))!important;
}
.ma-select-chevron{width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px;color:var(--forest-800);transition:transform .17s ease}
.ma-select-chevron svg{display:block;width:12px;height:8px}
.ma-select.is-open .ma-select-chevron{transform:rotate(180deg)}

.ma-select-menu{
  position:fixed;
  z-index:10050;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--sage-500) transparent;
  border:1px solid var(--border-300);
  border-radius:13px;
  background:var(--card-50);
  padding:10px;
  box-shadow:0 18px 46px rgba(12,35,30,.14);
  color:var(--ink-900);
  font-family:"Montserrat","Bravura Text","Bravura",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.ma-select-menu[hidden]{display:none!important}
.ma-select-menu::-webkit-scrollbar{width:8px}
.ma-select-menu::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background:var(--sage-500);background-clip:padding-box}

.ma-select-group{
  border:1px solid var(--border-300);
  border-radius:10px;
  background:var(--surface-solid);
  padding:5px;
}
.ma-select-group + .ma-select-group{margin-top:7px}
.ma-select-group-title{
  min-height:29px;
  display:flex;
  align-items:center;
  margin:0 0 4px;
  border-radius:7px;
  background:rgba(160,189,181,.18);
  padding:6px 9px;
  color:#0C231E;
  font-size:11px;
  font-weight:850;
  line-height:1.25;
  letter-spacing:.025em;
}
.ma-select-group.is-plain{padding:5px}
.ma-select-group-options{display:grid;gap:2px}

.ma-select-option{
  width:100%;
  min-height:35px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:0;
  border-radius:8px;
  background:transparent;
  padding:7px 9px;
  color:var(--ink-900);
  font:inherit;
  font-size:12px;
  font-weight:550;
  line-height:1.3;
  text-align:left;
  cursor:pointer;
  outline:none;
  transition:background .12s ease,color .12s ease,box-shadow .12s ease;
}
.ma-select-option:hover,
.ma-select-option:focus-visible,
.ma-select-option.is-focused{background:var(--sand-100);color:var(--heading-color)}
.ma-select-option.is-selected{background:var(--sage-200);color:var(--forest-950);font-weight:800}
.ma-select-option:disabled{cursor:not-allowed;color:#969A97;background:transparent;box-shadow:none}
.ma-select-option-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:normal}
.ma-select-check{min-width:18px;color:var(--teal-700);font-size:13px;font-weight:900;text-align:center;opacity:0}
.ma-select-option.is-selected .ma-select-check{opacity:1}
.ma-select-coming-soon{
  flex:0 0 auto;
  border:1px solid var(--border-300);
  border-radius:999px;
  background:var(--sand-100);
  padding:4px 7px;
  color:#828681;
  font-size:9px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

html[data-theme="dark"] .ma-select-trigger{background:var(--control-surface);color:var(--ink-900)}
html[data-theme="dark"] .ma-select-trigger:hover{background:var(--surface-solid)}
html[data-theme="dark"] .ma-select-menu{background:var(--card-50);box-shadow:0 20px 50px rgba(0,0,0,.38)}
html[data-theme="dark"] .ma-select-group{background:var(--surface-solid);border-color:var(--border-300)}
html[data-theme="dark"] .ma-select-group-title{background:#A0BDB5;color:#0C231E}
html[data-theme="dark"] .ma-select-option.is-selected{background:#29483F;color:#F1F6F3}
html[data-theme="dark"] .ma-select-option:hover,
html[data-theme="dark"] .ma-select-option:focus-visible,
html[data-theme="dark"] .ma-select-option.is-focused{background:var(--sand-100);color:var(--heading-color)}
html[data-theme="dark"] .ma-select-option:disabled{color:#6F7B76}
html[data-theme="dark"] .ma-select-coming-soon{background:#1B2824;color:#82918B;border-color:#31433D}

@media(max-width:640px){
  .ma-select-menu{padding:8px;border-radius:12px}
  .ma-select-group-title{font-size:10.5px}
  .ma-select-option{min-height:38px;font-size:12px}
}

/* v4.12 — Ajnas dropdown geometry cleanup
   The toolbar predates the global Sage Group Cards component. Instrument and
   Sort retain this legacy grid geometry. Key/Tonic is owned by the shared
   Design component below and is intentionally excluded. */
.ajnas-toolbar .ajnas-instrument-control .ma-select,
.ajnas-toolbar .ajnas-sort-control .ma-select{
  width:100%;
  height:38px;
  min-height:38px;
  margin:0!important;
  align-self:end;
}
.ajnas-toolbar .ajnas-instrument-control .ma-select-trigger,
.ajnas-toolbar .ajnas-sort-control .ma-select-trigger{
  height:38px;
  min-height:38px;
  border-radius:8px;
  background:var(--control-surface);
  padding:0 10px;
  font-size:11px;
  font-weight:650;
  box-shadow:none;
}
.ajnas-toolbar .ajnas-instrument-control .ma-select-trigger:hover,
.ajnas-toolbar .ajnas-sort-control .ma-select-trigger:hover{
  background:var(--control-surface);
}
.ajnas-toolbar .ajnas-instrument-control .ma-select.is-open .ma-select-trigger,
.ajnas-toolbar .ajnas-sort-control .ma-select.is-open .ma-select-trigger{
  border-color:var(--teal-700);
  box-shadow:0 0 0 3px rgba(21,83,71,.10);
}

/* v4.12.1 — one shared Instrument dropdown for Maqamat + Ajnas
   Ajnas previously carried legacy geometry overrides from its old toolbar.
   Both instrument selectors now use the same Sage Group Cards presentation. */
.ma-select--instrument{
  --ma-select-height:36px!important;
  height:36px!important;
  min-height:36px!important;
}
.ma-select--instrument .ma-select-trigger{
  height:36px!important;
  min-height:36px!important;
  border-radius:10px!important;
  background:var(--card-50)!important;
  padding:0 12px!important;
  font-size:11px!important;
  font-weight:600!important;
  box-shadow:none;
}
.ma-select--instrument .ma-select-trigger:hover{
  border-color:var(--sage-500)!important;
  background:var(--surface-solid)!important;
}
.ma-select--instrument.is-open .ma-select-trigger,
.ma-select--instrument .ma-select-trigger:focus-visible{
  border-color:var(--teal-700)!important;
  box-shadow:0 0 0 3px rgba(21,83,71,.11)!important;
}

/* Plain instrument lists do not need a second card inside the popup.
   Keeping one outer Sage card prevents the nested-border / overflow effect. */
.ma-select-menu--instrument{
  overflow-x:hidden;
}
.ma-select-menu--instrument .ma-select-group.is-plain{
  width:100%;
  max-width:100%;
  min-width:0;
  border:0;
  border-radius:0;
  background:transparent;
  padding:0;
}
.ma-select-menu--instrument .ma-select-group-options,
.ma-select-menu--instrument .ma-select-option{
  width:100%;
  max-width:100%;
  min-width:0;
}
.ma-select-menu--instrument .ma-select-option{
  box-sizing:border-box;
}
.ma-select-menu--instrument .ma-select-option-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Remove the old Ajnas-only visual treatment from Instrument.
   Key and Sort keep their 38px toolbar geometry. */
.ajnas-toolbar .ajnas-instrument-control .ma-select{
  height:36px!important;
  min-height:36px!important;
  align-self:end;
}
.ajnas-toolbar .ajnas-instrument-control .ma-select-trigger{
  height:36px!important;
  min-height:36px!important;
  border-radius:10px!important;
  background:var(--card-50)!important;
  padding:0 12px!important;
  font-size:11px!important;
  font-weight:600!important;
  box-shadow:none;
}
.ajnas-toolbar .ajnas-instrument-control .ma-select-trigger:hover{
  border-color:var(--sage-500)!important;
  background:var(--surface-solid)!important;
}
.ajnas-toolbar .ajnas-instrument-control .ma-select.is-open .ma-select-trigger,
.ajnas-toolbar .ajnas-instrument-control .ma-select-trigger:focus-visible{
  border-color:var(--teal-700)!important;
  box-shadow:0 0 0 3px rgba(21,83,71,.11)!important;
}



/* v4.13 — Ajnas control-strip order + Maqamat-style Instrument popup
   Reference layout: Key → Filter → Instrument → Sort → Naming System. */
.ajnas-toolbar{
  grid-template-columns:105px minmax(430px,1.8fr) minmax(155px,.72fr) minmax(155px,.72fr) minmax(280px,1.15fr)!important;
  gap:12px!important;
  align-items:end!important;
}
.ajnas-toolbar .ajnas-key-control{grid-column:1;grid-row:1}
.ajnas-toolbar .ajnas-filter-control{grid-column:2;grid-row:1}
.ajnas-toolbar .ajnas-instrument-control{grid-column:3;grid-row:1}
.ajnas-toolbar .ajnas-sort-control{grid-column:4;grid-row:1}
.ajnas-toolbar .ajnas-name-system{grid-column:5;grid-row:1}

/* Keep Instrument and Sort on the legacy 38px baseline. Key/Tonic reads its
   height, padding, radius and typography from Super Admin Design. */
.ajnas-toolbar .ajnas-instrument-control .ma-select,
.ajnas-toolbar .ajnas-sort-control .ma-select{
  height:38px!important;
  min-height:38px!important;
  margin:0!important;
  align-self:end;
}
.ajnas-toolbar .ajnas-instrument-control .ma-select-trigger,
.ajnas-toolbar .ajnas-sort-control .ma-select-trigger{
  height:38px!important;
  min-height:38px!important;
  border-radius:8px!important;
  background:var(--control-surface)!important;
  padding:0 10px!important;
  font-size:11px!important;
  font-weight:650!important;
}

/* Instrument menus now use the same Sage Group Card anatomy as the Maqamat menu. */
.ma-select-menu--instrument{padding:10px!important;overflow-x:hidden}
.ma-select-menu--instrument .ma-select-group{
  width:100%;
  max-width:100%;
  min-width:0;
  border:1px solid var(--border-300)!important;
  border-radius:10px!important;
  background:var(--surface-solid)!important;
  padding:5px!important;
}
.ma-select-menu--instrument .ma-select-group-title{
  min-height:29px;
  margin:0 0 4px;
  border-radius:7px;
  background:rgba(160,189,181,.18)!important;
  padding:6px 9px;
  color:#0C231E!important;
  font-size:11px;
  font-weight:850;
  letter-spacing:.025em;
}
html[data-theme="dark"] .ma-select-menu--instrument .ma-select-group-title{
  background:#A0BDB5!important;
  color:#0C231E!important;
}

@media(max-width:1180px){
  .ajnas-toolbar{
    grid-template-columns:105px minmax(360px,1fr) minmax(150px,.55fr) minmax(150px,.55fr)!important;
  }
  .ajnas-toolbar .ajnas-key-control{grid-column:1;grid-row:1}
  .ajnas-toolbar .ajnas-filter-control{grid-column:2;grid-row:1}
  .ajnas-toolbar .ajnas-instrument-control{grid-column:3;grid-row:1}
  .ajnas-toolbar .ajnas-sort-control{grid-column:4;grid-row:1}
  .ajnas-toolbar .ajnas-name-system{grid-column:1/-1;grid-row:2;justify-self:stretch}
}
@media(max-width:900px){
  .ajnas-toolbar{grid-template-columns:1fr!important}
  .ajnas-toolbar .ajnas-key-control,
  .ajnas-toolbar .ajnas-filter-control,
  .ajnas-toolbar .ajnas-instrument-control,
  .ajnas-toolbar .ajnas-sort-control,
  .ajnas-toolbar .ajnas-name-system{grid-column:1!important;grid-row:auto!important}
  .ajnas-filter-group{height:auto;flex-wrap:wrap}
}


/* v5.6 — Ajnas Quarter-Tone-Tonic filter controls
   The dedicated filter mirrors the Maqamat Quarter-Tonic placement logic.
   Outside this filter the original Ajnas key/transposition behavior is unchanged. */
.ajnas-qtm-row{
  grid-column:1/3;
  grid-row:2;
  align-self:start;
  justify-self:stretch;
  min-height:34px;
  margin-top:2px;
  padding:8px 2px 0;
  border-top:1px solid var(--sand-100);
}
.ajnas-qtm-row[hidden]{display:none!important}
.ajnas-qtm-row .radio{white-space:nowrap}
.ajnas-qtm-row .qglyph.smufl{font-family:"Bravura Text","Bravura",serif}

@media(max-width:1180px){
  .ajnas-toolbar.is-quarter-tonic-mode .ajnas-qtm-row{grid-column:1/3;grid-row:2}
  .ajnas-toolbar.is-quarter-tonic-mode .ajnas-name-system{grid-column:1/-1;grid-row:3}
}
@media(max-width:900px){
  .ajnas-toolbar .ajnas-qtm-row,
  .ajnas-toolbar.is-quarter-tonic-mode .ajnas-qtm-row{grid-column:1!important;grid-row:auto!important}
  .ajnas-toolbar.is-quarter-tonic-mode .ajnas-name-system{grid-column:1!important;grid-row:auto!important}
}

/* v5.7 — Keys X-Ray
   Canonical Maqam/Jins data decides whether the control is available.
   The current pitch model decides only where the X-Ray keys and markers sit. */
.keyboard-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.keys-xray-button{white-space:nowrap}
.keys-xray-button.is-on{background:var(--sage-200);border-color:var(--sage-500);color:var(--forest-950);box-shadow:inset 0 0 0 1px rgba(19,67,57,.05)}
.keys-xray-button:disabled{cursor:not-allowed;opacity:.38;background:var(--sand-100);border-color:var(--border-300);color:var(--muted-600);transform:none}
.keys-xray-button:disabled:hover{background:var(--sand-100);transform:none}

.piano-xray-key{
  fill:var(--kb-xray-fill);
  stroke:var(--kb-xray-border);
  stroke-width:var(--kb-xray-border-width);
  cursor:pointer;
  transition:fill .08s ease,stroke .08s ease,transform .06s ease;
  transform-box:fill-box;
  transform-origin:center top;
}
.piano-xray-key:hover{fill:var(--kb-xray-hover-fill);stroke:rgba(19,67,57,.48)}
.piano-xray-key.is-playing{fill:var(--kb-xray-playing-fill);stroke:var(--forest-800);transform:translateY(1px)}
html[data-theme="dark"] .piano-xray-key{fill:rgba(250,231,183,.24);stroke:rgba(253,250,245,.28)}
html[data-theme="dark"] .piano-xray-key.is-playing{fill:rgba(160,189,181,.56);stroke:#A0BDB5}

.jins-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;min-height:28px}
.jins-card-foot .jins-flip-hint{margin-top:0;margin-left:auto}
.jins-card-foot-spacer{display:block;min-width:1px;min-height:1px}
.jins-xray-button{flex:0 0 auto;padding:6px 9px;font-size:9px}
.jins-key-xray{
  fill:var(--kb-xray-fill);
  stroke:var(--kb-xray-border);
  stroke-width:.65;
  cursor:pointer;
  transition:fill .08s ease,stroke .08s ease,transform .05s ease;
  transform-box:fill-box;
  transform-origin:center top;
}
.jins-key-xray:hover{fill:var(--kb-xray-hover-fill);stroke:rgba(19,67,57,.44)}
.jins-key-xray.pressed{fill:var(--kb-xray-playing-fill);stroke:var(--forest-800);transform:translateY(1px)}
html[data-theme="dark"] .jins-key-xray{fill:rgba(250,231,183,.24);stroke:rgba(12,35,30,.35)}

@media(max-width:680px){
  .keyboard-head-actions{gap:5px}
  .jins-card-foot{align-items:flex-end}
}

/* =========================================================
   RoRM — RELATED MAQAMAT
   Priority: Primary → Secondary → Root Jins
   ========================================================= */
.related-empty{display:grid;gap:10px}
.related-preview-summary{display:grid;gap:3px}
.related-preview-title{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-800)}
.related-preview-summary strong{font-size:14px;color:var(--heading-color)}
.related-preview-summary>span:last-child{font-size:12px;color:var(--muted-600)}
.related-preview-cards{display:grid;gap:6px}
.related-list{display:block;padding:0 16px}
.related-section>.section-head p{display:block;color:var(--teal-700);font-size:13px;line-height:1.5;font-weight:400}
.related-rule-group+.related-rule-group{margin-top:16px;padding-top:16px;border-top:1px solid var(--sand-100)}
.related-group-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 9px}
.related-group-head>div{display:grid;gap:2px}
.related-group-head span{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-600)}
.related-group-head h3{margin:0;color:var(--heading-color);font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;line-height:1}
.related-group-head p{margin:0;max-width:620px;color:var(--teal-700);font-size:12px;line-height:1.5;font-weight:400;text-align:right}
.related-group-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.related-maqam-card{appearance:none;width:100%;min-width:0;display:grid;gap:8px;text-align:left;padding:11px 12px;border:1px solid var(--border-300);border-radius:10px;background:var(--card-50);color:var(--ink-900);font:inherit;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease,box-shadow .12s ease}
.related-maqam-card:hover:not(:disabled){transform:translateY(-1px);border-color:var(--sage-500);background:var(--white);box-shadow:0 5px 15px rgba(12,35,30,.06)}
.related-maqam-card:focus-visible{outline:2px solid var(--gold-600);outline-offset:2px}
.related-maqam-card.is-disabled{opacity:.48;cursor:not-allowed}
.related-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.related-priority,.related-coming-soon{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.related-primary .related-priority{background:rgba(19,67,57,.10);color:var(--forest-800);border:1px solid rgba(19,67,57,.18)}
.related-secondary .related-priority{background:rgba(211,154,74,.13);color:#815717;border:1px solid rgba(211,154,74,.28)}
.related-root-jins .related-priority{background:rgba(160,189,181,.18);color:var(--teal-700);border:1px solid rgba(160,189,181,.42)}
.related-coming-soon{background:var(--sand-100);color:var(--muted-600);border:1px solid var(--border-300)}
.related-maqam-name{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;line-height:1.05;color:var(--heading-color)}
.related-card-detail{display:grid;gap:5px;min-width:0;font-size:12px;line-height:1.45;color:var(--muted-600)}
.related-card-detail>strong{color:var(--forest-800);font-size:12px}
.related-rule-detail{font-size:11px;color:var(--muted-600)}
.related-match-lines{display:grid;gap:2px}
.related-match-lines span{display:block;white-space:normal}
.related-match-lines strong{color:var(--forest-800)}
.related-maqam-card.compact{padding:8px 9px;gap:5px;background:var(--white)}
.related-maqam-card.compact .related-maqam-name{font-size:17px}
.related-maqam-card.compact .related-card-detail{font-size:11px}
.related-maqam-card.compact .related-rule-detail{display:none}
.related-maqam-card.compact .related-card-top{display:none}
html[data-theme="dark"] .related-maqam-card{background:#111B18;border-color:#2B3A35;color:#E8E5DF}
html[data-theme="dark"] .related-maqam-card:hover:not(:disabled){background:#15221E;border-color:#466A60;box-shadow:none}
html[data-theme="dark"] .related-primary .related-priority{background:rgba(73,136,118,.18);color:#B7D2CA;border-color:rgba(73,136,118,.34)}
html[data-theme="dark"] .related-secondary .related-priority{background:rgba(211,154,74,.14);color:#F0C784;border-color:rgba(211,154,74,.30)}
html[data-theme="dark"] .related-root-jins .related-priority{background:rgba(160,189,181,.13);color:#C9DDD7;border-color:rgba(160,189,181,.28)}
html[data-theme="dark"] .related-section>.section-head p,html[data-theme="dark"] .related-group-head p{color:var(--sage-500)}
@media(max-width:1100px){.related-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.related-group-head{align-items:flex-start;flex-direction:column;gap:6px}.related-group-head p{text-align:left}.related-group-grid{grid-template-columns:1fr}}

/* ========================================================================== 
   Maqam Academy Guide
   ========================================================================== */
.guide-page{scroll-padding-top:92px}
.guide-shell{width:min(1320px,calc(100% - 36px));padding-top:28px}
.guide-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(380px,.75fr);gap:30px;align-items:center;padding:28px 0 34px;border-bottom:1px solid var(--border-300)}
.guide-hero-copy h1{max-width:820px;margin:0;color:var(--heading-color);font-size:clamp(52px,6.8vw,86px);font-weight:540;line-height:.9;letter-spacing:-.035em}
.guide-hero-lead{max-width:760px;margin:20px 0 0;color:var(--ink-900);font-size:15px;line-height:1.78}
.guide-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:23px}
.guide-theory-ownership{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}
.guide-theory-ownership span{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid var(--border-300);border-radius:999px;background:var(--surface-glass-soft);color:var(--muted-600);font-size:10px}
.guide-theory-ownership strong{color:var(--forest-800);font-weight:800}
.guide-hero-visual{padding:10px;overflow:hidden;border-radius:24px;background:linear-gradient(145deg,var(--surface-glass),rgba(250,231,183,.25))}
.guide-hero-svg{display:block;width:100%;height:auto}

.guide-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}
.guide-principle{position:relative;overflow:hidden;padding:22px 22px 24px}
.guide-principle::after{content:"";position:absolute;right:-28px;top:-38px;width:110px;height:110px;border-radius:50%;background:rgba(160,189,181,.15)}
.guide-principle-number{display:inline-flex;margin-bottom:22px;color:var(--gold-600);font-size:10px;font-weight:800;letter-spacing:.16em}
.guide-principle h2{margin:0 0 8px;color:var(--heading-color);font-size:25px;font-weight:600;line-height:1.05}
.guide-principle p{margin:0;color:var(--muted-600);font-size:12px;line-height:1.72}

.guide-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start;margin-top:26px}
.guide-nav{position:sticky;top:88px;padding:16px 14px}
.guide-nav-kicker{margin:0 0 9px;padding:0 8px;color:var(--gold-600);font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.guide-nav nav{display:grid;gap:2px}
.guide-nav a{padding:8px;border-radius:8px;color:var(--muted-600);font-size:11px;font-weight:600;line-height:1.3}
.guide-nav a:hover{background:rgba(160,189,181,.18);color:var(--forest-800)}
.guide-nav a.is-active{position:relative;background:rgba(160,189,181,.20);color:var(--forest-950);font-weight:800}
.guide-nav a.is-active::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:999px;background:var(--gold-600)}
.guide-content{display:grid;gap:18px;min-width:0}
.guide-section{scroll-margin-top:92px;padding:28px 30px}
.guide-section-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.guide-section-index{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:var(--forest-950);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em}
.guide-section-kicker{margin:1px 0 2px;color:var(--gold-600);font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.guide-section-head h2{margin:0;color:var(--heading-color);font-size:36px;font-weight:600;line-height:1.02}
.guide-section>p{max-width:930px;margin:0 0 14px;color:var(--ink-900);font-size:13px;line-height:1.83}
.guide-large-copy{font-size:15px!important;line-height:1.8!important;color:var(--ink-900)!important}
.guide-subheading{margin:26px 0 10px;color:var(--heading-color);font-family:"Cormorant Garamond",Georgia,serif;font-size:27px;font-weight:600}
.guide-note{margin-top:18px;padding:15px 17px;border-left:4px solid var(--gold-600);border-radius:0 10px 10px 0;background:rgba(250,231,183,.2);color:var(--ink-900);font-size:12px;line-height:1.72}
.guide-note strong{color:var(--forest-800)}
.guide-alrajab-naming{margin-top:20px;padding:18px 19px;border:1px solid rgba(211,154,74,.42);border-radius:14px;background:linear-gradient(135deg,rgba(250,231,183,.18),rgba(160,189,181,.10))}
.guide-alrajab-naming h3{margin:0 0 9px;color:var(--heading-color);font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;font-weight:600;line-height:1.16}
.guide-alrajab-naming p{margin:7px 0!important;color:var(--muted-600)!important;font-size:11px!important;line-height:1.72!important}
.guide-alrajab-book{margin-top:12px!important;padding-top:10px;border-top:1px solid rgba(211,154,74,.28);color:var(--forest-800)!important;font-size:10px!important;font-weight:650!important}
.guide-flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:20px}
.guide-flow span{padding:8px 11px;border:1px solid var(--border-300);border-radius:999px;background:var(--control-surface);font-size:10px;font-weight:700;color:var(--forest-800)}
.guide-flow b{color:var(--gold-600);font-weight:500}

.guide-definition-grid,.guide-three-column{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:20px}
.guide-definition-grid article,.guide-three-column article{padding:17px;border:1px solid var(--border-300);border-radius:12px;background:var(--control-surface)}
.guide-definition-grid article>span{display:inline-flex;margin-bottom:8px;color:var(--gold-600);font-size:10px;font-weight:800;letter-spacing:.08em}
.guide-definition-grid h3,.guide-three-column h3{margin:0 0 7px;color:var(--heading-color);font-size:19px;font-weight:600}
.guide-definition-grid p,.guide-three-column p{margin:0;color:var(--muted-600);font-size:11px;line-height:1.67}
.guide-mini-label{display:block;margin-bottom:9px;color:var(--teal-700);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.guide-direction-card{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-top:18px;padding:18px 20px;border-radius:14px;background:linear-gradient(120deg,rgba(160,189,181,.17),rgba(250,231,183,.14));border:1px solid var(--border-300)}
.guide-direction-card strong{color:var(--forest-800);font-size:13px}
.guide-direction-card p{margin:6px 0 0;max-width:780px;color:var(--muted-600);font-size:11px;line-height:1.67}
.guide-direction-symbols{display:flex;gap:6px;flex:0 0 auto}
.guide-direction-symbols span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--surface-solid);color:var(--forest-800);font-size:21px;border:1px solid var(--border-300)}

.guide-jins-visual,.guide-quarter-visual,.guide-brom-diagram{margin-top:20px;padding:8px;border:1px solid var(--border-300);border-radius:14px;background:linear-gradient(180deg,var(--surface-solid),var(--control-surface));overflow:hidden}
.guide-jins-visual svg,.guide-quarter-visual svg,.guide-brom-diagram svg{display:block;width:100%;height:auto}
.guide-quarter-interactive{padding:24px 34px 20px;overflow:visible}
.guide-quarter-note-labels,.guide-quarter-cent-labels{position:relative;height:24px;--guide-quarter-middle-left:50%}
.guide-quarter-note-labels>*,.guide-quarter-cent-labels>*{position:absolute;top:0;white-space:nowrap}
.guide-quarter-note-labels>*:first-child,.guide-quarter-cent-labels>*:first-child{left:0;text-align:left}
.guide-quarter-note-labels>*:nth-child(2),.guide-quarter-cent-labels>*:nth-child(2){left:var(--guide-quarter-middle-left);transform:translateX(-50%);text-align:center}
.guide-quarter-note-labels>*:last-child,.guide-quarter-cent-labels>*:last-child{right:0;text-align:right}
.guide-quarter-note-labels strong{color:var(--heading-color);font-size:20px;line-height:1.2}
.guide-quarter-note-labels strong:nth-child(2){color:var(--key-quarter)}
.guide-quarter-cent-labels{margin-top:5px;color:var(--muted-600);font-size:11px}
.guide-quarter-slider-wrap{position:relative;margin:24px 0 8px;height:34px}
.guide-quarter-comma-grid{position:absolute;z-index:4;left:12px;right:12px;top:5px;height:25px;display:flex;justify-content:space-between;align-items:center;opacity:0;pointer-events:none;transition:opacity .15s ease}
.guide-quarter-comma-grid.is-visible{opacity:1}
.guide-quarter-comma-grid i{position:relative;flex:0 0 3px;width:3px;height:18px;border-radius:999px;background:var(--gold-600);box-shadow:0 0 0 1px rgba(255,255,255,.78),0 1px 2px rgba(12,35,30,.24)}
.guide-quarter-comma-grid i::after{content:attr(data-comma);position:absolute;left:50%;top:-13px;transform:translateX(-50%);color:var(--forest-800);font:700 8px/1 "Montserrat",sans-serif}
html[data-theme="dark"] .guide-quarter-comma-grid i::after{color:#FAE7B7}
.guide-quarter-center-tick{position:absolute;z-index:1;left:50%;top:-7px;width:3px;height:42px;border-radius:3px;background:var(--key-quarter);transform:translateX(-50%);pointer-events:none}
.guide-quarter-slider{position:relative;z-index:3;width:100%;height:34px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:ew-resize;touch-action:none}
.guide-quarter-slider:focus-visible{outline:2px solid var(--gold-600);outline-offset:6px;border-radius:6px}
.guide-quarter-slider::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:var(--forest-950)}
.guide-quarter-slider::-webkit-slider-thumb{-webkit-appearance:none;position:relative;z-index:6;width:24px;height:24px;margin-top:-9.5px;border:2px solid #fff;border-radius:50%;background:var(--key-quarter);box-shadow:0 1px 0 rgba(12,35,30,.20),0 0 0 1px rgba(196,98,79,.22);transition:transform .08s ease,box-shadow .08s ease}
.guide-quarter-slider::-moz-range-track{height:5px;border:0;border-radius:999px;background:var(--forest-950)}
.guide-quarter-slider::-moz-range-thumb{position:relative;z-index:6;width:20px;height:20px;border:2px solid #fff;border-radius:50%;background:var(--key-quarter);box-shadow:0 1px 0 rgba(12,35,30,.20),0 0 0 1px rgba(196,98,79,.22)}
.guide-quarter-slider.is-sounding::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 0 0 5px rgba(196,98,79,.12)}
.guide-quarter-slider.is-sounding::-moz-range-thumb{box-shadow:0 0 0 5px rgba(196,98,79,.12)}
.guide-quarter-live{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0!important;color:var(--forest-800)!important;font-size:11px!important;line-height:1.5!important}
.guide-quarter-live-dot{width:9px;height:9px;border-radius:50%;background:var(--key-quarter);flex:0 0 auto}
.guide-quarter-live output{font-weight:700}.guide-quarter-live small{color:var(--muted-600);font-size:9.5px;font-weight:500}
.guide-quarter-modes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;max-width:440px;margin:16px auto 0}
.guide-quarter-mode,.guide-quarter-reset{height:34px;border:1px solid var(--border-300);border-radius:9px;background:var(--control-surface);color:var(--muted-600);font:700 10px/1 "Montserrat",sans-serif;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .08s ease}
.guide-quarter-mode:hover,.guide-quarter-reset:hover{border-color:rgba(21,83,71,.45);color:var(--forest-800)}
.guide-quarter-mode:active,.guide-quarter-reset:active{transform:translateY(1px)}
.guide-quarter-mode.is-active{background:var(--forest-800);border-color:var(--forest-800);color:#fff}
.guide-quarter-reset{background:rgba(250,231,183,.24);border-color:rgba(211,154,74,.58);color:var(--forest-800)}
.guide-quarter-mode-help{margin:8px auto 0!important;max-width:660px;text-align:center;color:var(--muted-600)!important;font-size:9.5px!important;line-height:1.55!important}
.guide-xray-credit{display:inline-flex;margin-top:9px;padding:5px 8px;border:1px solid rgba(211,154,74,.45);border-radius:999px;background:rgba(250,231,183,.18);color:var(--forest-800);font-size:8.5px;font-weight:700;letter-spacing:.02em}
.guide-xray-mark{display:block;margin-top:7px;color:var(--design-guide-muted,var(--muted-600));font-size:8.5px;font-weight:750;letter-spacing:.035em}
.guide-symbol-table{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:16px}
.guide-symbol-table>div{display:grid;justify-items:center;gap:4px;padding:13px 8px;border:1px solid var(--border-300);border-radius:11px;background:var(--control-surface);text-align:center}
.guide-symbol{height:36px;color:var(--heading-color);font-size:30px;line-height:1}
.guide-smufl{font-family:"Bravura Text","Bravura",serif;font-size:37px;transform:translateY(-2px)}
.guide-symbol-table strong{color:var(--heading-color);font-size:10px}
.guide-symbol-table small{color:var(--muted-600);font-size:9px;line-height:1.35}
.guide-xray-card{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;align-items:center;margin-top:22px;padding:19px;border:1px solid var(--border-300);border-radius:14px;background:var(--control-surface)}
.guide-xray-card h3{margin:0 0 6px;color:var(--heading-color);font-size:23px;font-weight:600}
.guide-xray-card p{margin:0;color:var(--muted-600);font-size:11px;line-height:1.7}
.guide-xray-mini{position:relative;height:105px;border:1px solid var(--border-300);border-radius:10px;background:#fff;overflow:hidden}
.guide-xray-mini .white{position:absolute;left:10px;top:8px;width:80px;height:88px;border:1px solid #BFC3BE;border-radius:6px;background:#fff}
.guide-xray-mini .white.second{left:98px}
.guide-xray-mini .black{position:absolute;z-index:2;left:70px;top:8px;width:42px;height:55px;border-radius:5px;background:#252525}
.guide-xray-mini .xray{position:absolute;z-index:3;left:99px;top:8px;width:18px;height:42px;border-radius:4px;background:rgba(196,176,166,.65);border:1px solid rgba(12,35,30,.3)}

.guide-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.guide-steps article{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:14px;border:1px solid var(--border-300);border-radius:12px;background:var(--control-surface)}
.guide-steps article>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(160,189,181,.25);color:var(--forest-800);font-size:10px;font-weight:800}
.guide-steps h3{margin:1px 0 4px;color:var(--heading-color);font-size:17px;font-weight:650}
.guide-steps p{margin:0;color:var(--muted-600);font-size:10.5px;line-height:1.62}

.guide-interval-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:18px 0}
.guide-interval-grid div{display:grid;gap:3px;justify-items:center;padding:15px 8px;border-radius:12px;background:var(--control-surface);border:1px solid var(--border-300)}
.guide-interval-grid strong{color:var(--forest-800);font-family:"Cormorant Garamond",serif;font-size:30px;font-weight:600}
.guide-interval-grid span{color:var(--ink-900);font-size:10px;font-weight:700}
.guide-interval-grid small{color:var(--muted-600);font-size:9px}
.guide-marker-legend{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.guide-marker-legend article{display:flex;gap:13px;align-items:center;padding:14px;border:1px solid var(--border-300);border-radius:12px;background:var(--control-surface)}
.guide-marker{display:block;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--key-normal)}
.guide-marker.square{border-radius:4px}
.guide-marker.octave{background:var(--key-octave)}
.guide-marker.quarter{background:var(--key-quarter)}
.guide-marker.qtonic{background:var(--key-quarter-octave);border:2px solid #D39A4A}
.guide-marker-legend strong{display:block;color:var(--heading-color);font-size:11px}
.guide-marker-legend p{margin:3px 0 0;color:var(--muted-600);font-size:10px;line-height:1.5}

.guide-framework-section{border-color:rgba(211,154,74,.45)}
.guide-framework-section .guide-section-head{align-items:center}
.guide-copyright-badge{margin-left:auto;flex:0 0 auto;padding:7px 10px;border:1px solid rgba(211,154,74,.55);border-radius:999px;background:rgba(250,231,183,.22);color:var(--forest-800);font-size:9px;font-weight:800;letter-spacing:.05em}
.guide-framework-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}
.guide-framework-rules article{padding:16px;border:1px solid var(--border-300);border-radius:12px;background:var(--control-surface)}
.guide-framework-rules article:last-child{grid-column:1/-1}
.guide-framework-rules article>span,.guide-rorm-priority article>span,.guide-study-levels article>span{display:inline-flex;margin-bottom:7px;color:var(--gold-600);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.guide-framework-rules h3,.guide-rorm-priority h3,.guide-study-levels h3{margin:0 0 6px;color:var(--heading-color);font-size:19px;font-weight:650}
.guide-framework-rules p,.guide-rorm-priority p,.guide-study-levels p{margin:0;color:var(--muted-600);font-size:10.5px;line-height:1.67}
.guide-framework-notice{max-width:none!important;margin:20px 0 0!important;padding:13px 15px;border:1px dashed rgba(211,154,74,.6);border-radius:11px;background:rgba(250,231,183,.14);font-size:10px!important;line-height:1.65!important;color:var(--muted-600)!important}
.guide-framework-notice strong{color:var(--forest-800)}
.guide-rorm-priority{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}
.guide-rorm-priority article{padding:17px;border:1px solid var(--border-300);border-radius:13px;background:var(--control-surface)}
.guide-rorm-priority .primary{border-top:4px solid var(--forest-800)}
.guide-rorm-priority .secondary{border-top:4px solid var(--gold-600)}
.guide-rorm-priority .root{border-top:4px solid var(--sage-500)}
.guide-code-example{margin-top:18px;padding:16px 18px;border-radius:12px;background:var(--forest-950);color:#fff}
.guide-code-example .guide-mini-label{color:var(--gold-200)}
.guide-code-example p{margin:4px 0;color:rgba(255,255,255,.82);font-size:11px;line-height:1.6}
.guide-code-example p strong{color:#fff;font-size:14px}

.guide-ajnas-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.guide-ajnas-grid article{padding:15px;border:1px solid var(--border-300);border-radius:12px;background:var(--control-surface)}
.guide-ajnas-grid h3{margin:0 0 6px;color:var(--heading-color);font-size:18px;font-weight:650}
.guide-ajnas-grid p{margin:0;color:var(--muted-600);font-size:10.5px;line-height:1.64}
.guide-study-levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.guide-study-levels article{padding:16px;border:1px solid var(--border-300);border-radius:12px;background:var(--control-surface)}
.guide-study-prompt{margin-top:18px;padding:19px 20px;border-radius:14px;background:linear-gradient(120deg,var(--forest-950),var(--forest-800));color:#fff}
.guide-study-prompt strong{font-size:11px;letter-spacing:.03em}
.guide-study-prompt p{margin:7px 0 0;font-family:"Cormorant Garamond",serif;font-size:23px;line-height:1.18;color:#fff}

.guide-glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:0}
.guide-glossary div{display:grid;grid-template-columns:140px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-300)}
.guide-glossary dt{color:var(--forest-800);font-size:10.5px;font-weight:800}
.guide-glossary dd{margin:0;color:var(--muted-600);font-size:10.5px;line-height:1.55}
.guide-references{display:grid;gap:8px;margin-top:20px}
.guide-references article{display:grid;grid-template-columns:74px 1fr;gap:14px;padding:12px 14px;border:1px solid var(--border-300);border-radius:11px;background:var(--control-surface)}
.guide-references article>span{color:var(--gold-600);font-size:10px;font-weight:800;letter-spacing:.06em}
.guide-references strong{display:block;color:var(--heading-color);font-size:11px}
.guide-references p{margin:3px 0 0;color:var(--muted-600);font-size:10px;line-height:1.55}
.guide-references a{display:inline-flex;margin-top:5px;color:var(--teal-700);font-size:9px;font-weight:700;text-decoration:underline;text-decoration-color:rgba(21,83,71,.25);text-underline-offset:3px}
.guide-references a:hover{color:var(--gold-600)}
.guide-final-card{padding:28px;border-radius:18px;background:linear-gradient(130deg,var(--forest-950),#17483E);color:#fff;box-shadow:var(--shadow)}
.guide-final-card .legal-eyebrow{color:var(--gold-200)}
.guide-final-card h2{margin:0 0 12px;color:#fff;font-size:34px;font-weight:600}
.guide-final-card p{max-width:880px;margin:6px 0;color:rgba(255,255,255,.78);font-size:11px;line-height:1.7}
.guide-final-card p strong{color:#fff}

html[data-theme="dark"] .guide-principle::after{background:rgba(160,189,181,.08)}
html[data-theme="dark"] .guide-hero-visual{background:linear-gradient(145deg,var(--surface-glass),rgba(211,154,74,.09))}
html[data-theme="dark"] .guide-nav a.is-active{background:rgba(160,189,181,.12);color:var(--heading-color)}
html[data-theme="dark"] .guide-quarter-slider::-webkit-slider-runnable-track{background:#E8E5DF}
html[data-theme="dark"] .guide-quarter-slider::-moz-range-track{background:#E8E5DF}
html[data-theme="dark"] .guide-quarter-mode.is-active{background:#235E50;border-color:#397968}
html[data-theme="dark"] .guide-alrajab-naming{background:linear-gradient(135deg,rgba(211,154,74,.08),rgba(160,189,181,.06))}
html[data-theme="dark"] .guide-direction-card{background:linear-gradient(120deg,rgba(160,189,181,.09),rgba(211,154,74,.08))}
html[data-theme="dark"] .guide-xray-mini{border-color:#42514c}
html[data-theme="dark"] .guide-definition-grid article,
html[data-theme="dark"] .guide-three-column article,
html[data-theme="dark"] .guide-symbol-table>div,
html[data-theme="dark"] .guide-xray-card,
html[data-theme="dark"] .guide-steps article,
html[data-theme="dark"] .guide-interval-grid div,
html[data-theme="dark"] .guide-marker-legend article,
html[data-theme="dark"] .guide-framework-rules article,
html[data-theme="dark"] .guide-rorm-priority article,
html[data-theme="dark"] .guide-ajnas-grid article,
html[data-theme="dark"] .guide-study-levels article,
html[data-theme="dark"] .guide-references article{background:rgba(17,28,24,.78)}


html[data-theme="dark"] .guide-theory-ownership strong,
html[data-theme="dark"] .guide-note strong,
html[data-theme="dark"] .guide-flow span,
html[data-theme="dark"] .guide-direction-card strong,
html[data-theme="dark"] .guide-interval-grid strong,
html[data-theme="dark"] .guide-glossary dt,
html[data-theme="dark"] .guide-framework-notice strong,
html[data-theme="dark"] .guide-copyright-badge{color:var(--heading-color)}
html[data-theme="dark"] .guide-references a{color:var(--sage-500)}

@media(max-width:1100px){
  .guide-hero{grid-template-columns:1fr}.guide-hero-visual{max-width:650px}
  .guide-principles{grid-template-columns:1fr}
  .guide-layout{grid-template-columns:1fr}.guide-nav{position:static;top:auto}.guide-nav nav{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:800px){
  .guide-shell{width:min(100% - 18px,1320px);padding-top:18px}
  .guide-hero-copy h1{font-size:56px}
  .guide-section{padding:22px 18px}.guide-section-head h2{font-size:31px}
  .guide-nav nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-definition-grid,.guide-three-column,.guide-rorm-priority{grid-template-columns:1fr}
  .guide-symbol-table{grid-template-columns:repeat(3,minmax(0,1fr))}
  .guide-xray-card{grid-template-columns:1fr}.guide-xray-mini{max-width:240px}
  .guide-steps,.guide-marker-legend,.guide-framework-rules,.guide-ajnas-grid,.guide-study-levels,.guide-glossary{grid-template-columns:1fr}
  .guide-framework-rules article:last-child{grid-column:auto}
  .guide-interval-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:520px){
  .guide-hero-copy h1{font-size:46px}.guide-hero-lead{font-size:13px}.guide-hero-actions .btn{width:100%;justify-content:center}
  .guide-nav nav{grid-template-columns:1fr 1fr}.guide-nav a{font-size:10px}
  .guide-section-head{gap:10px}.guide-section-index{width:32px;height:32px;flex-basis:32px}.guide-section-head h2{font-size:27px}
  .guide-copyright-badge{margin-left:46px;margin-top:-8px}.guide-framework-section .guide-section-head{flex-wrap:wrap}
  .guide-symbol-table{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-interval-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-glossary div{grid-template-columns:105px 1fr}.guide-references article{grid-template-columns:58px 1fr}
}

/* =========================================================
   v16.9 — Current Structure / Live Tuner / Metronome tool card
   Tuner: Chromatic (12-TET) + Micro-tone (24-TET)
   Metronome: Academy Dial, 20–220 BPM
   ========================================================= */
.structure-card.structure-tuner-card{
  padding-bottom:0;
  overflow:hidden;
  background:transparent;
}
.structure-tuner-flip-shell{
  position:relative;
  min-height:170px;
  perspective:1400px;
  -webkit-perspective:1400px;
  perspective-origin:50% 50%;
  -webkit-perspective-origin:50% 50%;
  transition:height .58s cubic-bezier(.2,.72,.2,1);
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.structure-tuner-flip-inner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}
.structure-tuner-face{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:0;
  width:100%;
  height:auto;
  min-height:0;
  border-radius:11px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
  visibility:hidden;
  pointer-events:none;
  transform:rotateY(180deg) translateZ(1px);
  -webkit-transform:rotateY(180deg) translateZ(1px);
  transform-origin:50% 50%;
  -webkit-transform-origin:50% 50%;
  transition:transform .58s cubic-bezier(.2,.72,.2,1);
  -webkit-transition:-webkit-transform .58s cubic-bezier(.2,.72,.2,1);
  will-change:transform;
}
.structure-tuner-face.is-active{
  z-index:2;
  visibility:visible;
  pointer-events:auto;
  transform:rotateY(0deg) translateZ(1px);
  -webkit-transform:rotateY(0deg) translateZ(1px);
}
.structure-tuner-face.is-leaving{
  z-index:1;
  visibility:visible;
  pointer-events:none;
  transform:rotateY(-180deg) translateZ(1px);
  -webkit-transform:rotateY(-180deg) translateZ(1px);
}
.structure-tuner-flip-shell.is-flipping .structure-tuner-toggle{pointer-events:none}
.structure-tuner-front{background:var(--surface-glass)}
.structure-tuner-back,
.structure-tuner-metronome{
  background:#DDE1D9;
  color:#272623;
}
.structure-tuner-head{border-bottom:1px solid rgba(12,35,30,.09)}
.structure-tuner-toggle{flex:0 0 auto;white-space:nowrap}
.structure-tuner-back .section-head h2{color:#0C231E}
.structure-tuner-back .section-head p{color:#5F6966}
.tuner-head-icon{font-family:"Bravura Text","Bravura",serif;color:#155347;font-size:20px}

.maqam-tuner{
  --tuner-position:50%;
  --tuner-signal:#134339;
  padding:13px 16px 16px;
  color:#272623;
}
.maqam-tuner-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.maqam-tuner-grid-toggle{
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  min-width:188px;
  padding:3px;
  border:1px solid rgba(12,35,30,.14);
  border-radius:10px;
  background:rgba(255,255,255,.48);
}
.maqam-tuner-grid-toggle button{
  min-height:31px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#5F6966;
  font:750 10px/1 "Montserrat",sans-serif;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.maqam-tuner-grid-toggle button.active{
  background:#0C231E;
  color:#fff;
  box-shadow:0 3px 10px rgba(12,35,30,.12);
}
.maqam-tuner-grid-toggle button:focus-visible,
.maqam-tuner-listen:focus-visible,
.maqam-tuner-reference-control input:focus-visible{
  outline:2px solid #D39A4A;
  outline-offset:2px;
}
.maqam-tuner-listen{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:37px;
  padding:0 12px;
  border:1px solid #0C231E;
  border-radius:9px;
  background:#0C231E;
  color:#fff;
  font:750 10px/1 "Montserrat",sans-serif;
  cursor:pointer;
  transition:background .15s ease,transform .15s ease,border-color .15s ease;
}
.maqam-tuner-listen:hover{background:#134339;border-color:#134339;transform:translateY(-1px)}
.maqam-tuner-listen.is-live{background:#155347;border-color:#155347}
.maqam-tuner-listen svg{width:15px;height:15px;flex:0 0 auto}

.maqam-tuner-readout{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"note state" "frequency state";
  align-items:end;
  gap:2px 14px;
  min-height:84px;
}
.maqam-tuner-note{
  grid-area:note;
  display:flex;
  align-items:flex-start;
  min-width:0;
  color:#0C231E;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:62px;
  font-weight:600;
  line-height:.82;
  letter-spacing:-.035em;
  white-space:nowrap;
}
.maqam-tuner-note-letter{display:inline-block}
.maqam-tuner-note-accidental{
  display:inline-block;
  margin-left:3px;
  font-family:"Bravura Text","Bravura",serif;
  font-size:.58em;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
}
.maqam-tuner-note-accidental.regular-sharp{transform:translateY(7px)}
.maqam-tuner-note-accidental.qsharp{font-size:.62em;transform:translateY(4px)}
.maqam-tuner-note-accidental.qflat{font-size:.64em;transform:translateY(8px)}
.maqam-tuner-note-octave{
  display:inline-block;
  margin-left:3px;
  padding-top:4px;
  color:#5F6966;
  font-family:"Montserrat",sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
}
.maqam-tuner-frequency{
  grid-area:frequency;
  color:#5F6966;
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.maqam-tuner-state{
  grid-area:state;
  align-self:center;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:68px;
  justify-content:center;
  padding:7px 9px;
  border:1px solid rgba(12,35,30,.12);
  border-radius:999px;
  background:rgba(255,255,255,.52);
  color:#134339;
  font-size:9px;
  font-weight:800;
}
.maqam-tuner-state::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tuner-signal)}
.maqam-tuner.is-low{--tuner-signal:#76566D}
.maqam-tuner.is-high{--tuner-signal:#C4624F}
.maqam-tuner.is-exact{--tuner-signal:#134339}

.maqam-tuner-meter-wrap{margin-top:12px}
.maqam-tuner-meter{
  position:relative;
  width:100%;
  height:58px;
}
.maqam-tuner-meter::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:28px;
  height:2px;
  border-radius:999px;
  background:rgba(12,35,30,.25);
}
.maqam-tuner-quarter-tick{
  position:absolute;
  top:22px;
  width:1px;
  height:14px;
  background:rgba(12,35,30,.18);
}
.maqam-tuner-quarter-tick.left{left:25%}
.maqam-tuner-quarter-tick.right{left:75%}
.maqam-tuner-center-zone{
  position:absolute;
  left:46%;
  top:22px;
  width:8%;
  height:14px;
  border-radius:999px;
  background:rgba(255,255,255,.62);
}
.maqam-tuner-center-mark{
  position:absolute;
  left:50%;
  top:14px;
  width:2px;
  height:30px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#D39A4A;
}
.maqam-tuner-marker{
  position:absolute;
  left:var(--tuner-position);
  top:10px;
  width:16px;
  height:38px;
  transform:translateX(-50%);
  border:3px solid rgba(255,255,255,.92);
  border-radius:999px;
  background:var(--tuner-signal);
  box-shadow:0 0 0 1px rgba(12,35,30,.08),0 5px 15px rgba(12,35,30,.18);
  transition:left 78ms linear,background-color 120ms ease;
  will-change:left;
}
.maqam-tuner-meter-labels{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  margin-top:-1px;
  color:#5F6966;
  font-size:8px;
  font-variant-numeric:tabular-nums;
}
.maqam-tuner-meter-labels span:last-child{text-align:right}
.maqam-tuner-meter-labels strong{color:#0C231E;font-size:8px}
.maqam-tuner-deviation{
  margin-top:10px;
  color:#0C231E;
  font-size:29px;
  font-weight:780;
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;
}
.maqam-tuner-deviation small{color:#5F6966;font-size:9px;font-weight:700;letter-spacing:0}

.maqam-tuner-reference-row{
  display:grid;
  grid-template-columns:auto minmax(100px,1fr) auto;
  align-items:center;
  gap:8px;
  margin-top:15px;
  padding-top:12px;
  border-top:1px solid rgba(12,35,30,.10);
}
.maqam-tuner-reference-row>label{
  color:#5F6966;
  font-size:8px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.maqam-tuner-reference-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  height:34px;
  overflow:hidden;
  border:1px solid rgba(12,35,30,.16);
  border-radius:8px;
  background:rgba(255,255,255,.64);
}
.maqam-tuner-reference-control input{
  width:100%;
  height:32px;
  min-width:0;
  padding:0 7px;
  border:0;
  outline:0;
  background:transparent;
  color:#0C231E;
  font:700 10px/1 "Montserrat",sans-serif;
  font-variant-numeric:tabular-nums;
}
.maqam-tuner-reference-control span{padding:0 8px 0 2px;color:#5F6966;font-size:9px;font-weight:700}
.maqam-tuner-reference-row .btn{height:34px;background:rgba(255,255,255,.66);color:#0C231E;border-color:rgba(12,35,30,.14)}

.maqam-tuner-status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:11px;
  color:#5F6966;
  font-size:8px;
}
.maqam-tuner-status{display:inline-flex;align-items:center;gap:6px;min-width:0}
.maqam-tuner-live-dot{width:7px;height:7px;border-radius:50%;background:#A0BDB5;box-shadow:0 0 0 3px rgba(160,189,181,.22);flex:0 0 auto}
.maqam-tuner.is-listening .maqam-tuner-live-dot{background:#D39A4A;box-shadow:0 0 0 3px rgba(211,154,74,.18);animation:maqam-tuner-breathe 1.25s ease-in-out infinite}
@keyframes maqam-tuner-breathe{50%{transform:scale(1.24)}}
.maqam-tuner-help{margin:6px 0 0;color:#5F6966;font-size:8px;line-height:1.45}

/* v16.9 — Academy Dial metronome inside the Structure / Tuner tool card. */
.structure-tuner-metronome .section-head h2{color:#0C231E}
.structure-tuner-metronome .section-head p{color:#5F6966}
.maqam-metronome-head-icon{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  background:rgba(255,255,255,.56);
  color:#155347;
  border:1px solid rgba(12,35,30,.10);
}
.maqam-metronome-head-icon svg{width:18px;height:18px}
.maqam-metronome{
  padding:14px 16px 16px;
  color:#272623;
}
.maqam-metronome-visual{
  min-height:190px;
  display:grid;
  place-items:center;
  padding:4px 0 12px;
}
.maqam-metronome-dial{
  width:176px;
  aspect-ratio:1;
  position:relative;
  display:grid;
  place-items:center;
  border:1px solid rgba(12,35,30,.15);
  border-radius:50%;
  background:
    radial-gradient(circle at center,#fff 0 57%,transparent 58%),
    conic-gradient(from -90deg,#DDE1D9,#F1EDE6 48%,#FAE7B7);
  box-shadow:inset 0 0 0 11px rgba(250,247,243,.92),0 9px 26px rgba(12,35,30,.07);
}
.maqam-metronome-dial::before{
  content:"";
  position:absolute;
  inset:11px;
  border:1px dashed #A0BDB5;
  border-radius:50%;
  opacity:.72;
}
.maqam-metronome-hand{
  position:absolute;
  left:50%;
  top:50%;
  width:3px;
  height:62px;
  border-radius:999px;
  background:#134339;
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(-41.4deg);
  transition:transform .16s cubic-bezier(.2,.8,.3,1);
}
.maqam-metronome-hand::after{
  content:"";
  position:absolute;
  top:-5px;
  left:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#D39A4A;
  transform:translateX(-50%);
}
.maqam-metronome-center{
  position:relative;
  z-index:2;
  width:90px;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:50%;
  background:#0C231E;
  color:#fff;
}
.maqam-metronome-center.is-beat{animation:maqam-metronome-beat .16s ease-out}
@keyframes maqam-metronome-beat{50%{transform:scale(1.045)}}
.maqam-metronome-bpm{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:36px;
  font-weight:600;
  line-height:.9;
  font-variant-numeric:tabular-nums;
}
.maqam-metronome-unit{
  margin-top:4px;
  color:#FAE7B7;
  font-size:8px;
  font-weight:850;
  letter-spacing:.16em;
}
.maqam-metronome-controls{
  padding-top:13px;
  border-top:1px solid rgba(12,35,30,.10);
}
.maqam-metronome-tempo-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 82px;
  align-items:end;
  gap:10px;
}
.maqam-metronome-field{display:block;min-width:0}
.maqam-metronome-field>span{
  display:block;
  margin-bottom:5px;
  color:#5F6966;
  font-size:8px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.maqam-metronome-range-field input{
  width:100%;
  height:28px;
  margin:0;
  accent-color:#134339;
  cursor:pointer;
}
.maqam-metronome-number,
.maqam-metronome-field select{
  width:100%;
  height:35px;
  border:1px solid rgba(12,35,30,.16);
  border-radius:8px;
  outline:0;
  background:rgba(255,255,255,.68);
  color:#0C231E;
  font:700 10px/1 "Montserrat",sans-serif;
}
.maqam-metronome-number{
  padding:0 7px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.maqam-metronome-field select{padding:0 7px}
.maqam-metronome-number:focus-visible,
.maqam-metronome-field select:focus-visible{
  border-color:#A0BDB5;
  box-shadow:0 0 0 3px rgba(160,189,181,.28);
}
.maqam-metronome-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:11px;
}
.maqam-metronome-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}
.maqam-metronome-actions .btn{width:100%;min-height:38px}
.maqam-metronome.is-running [data-metronome-start]{background:#C4624F;border-color:#C4624F}
.maqam-metronome-footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}
.maqam-metronome-footer-row .checkbox{font-size:9px;color:#5F6966}
.maqam-metronome-tempo-name{color:#155347;font-size:9px;font-weight:850}

@media(max-width:760px){
  .maqam-tuner-toolbar{align-items:stretch;flex-direction:column}
  .maqam-tuner-grid-toggle{width:100%;min-width:0}
  .maqam-tuner-listen{width:100%}
  .maqam-tuner-reference-row{grid-template-columns:1fr 1fr}
  .maqam-tuner-reference-row>label{grid-column:1/-1}
  .maqam-tuner-readout{grid-template-columns:1fr auto}
  .maqam-metronome-visual{min-height:176px}
  .maqam-metronome-dial{width:164px}
  .maqam-metronome-options{grid-template-columns:1fr}
  .maqam-metronome-actions{grid-template-columns:1fr}
  .maqam-metronome-footer-row{align-items:flex-start;flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  .structure-tuner-face,.structure-tuner-flip-shell,.maqam-tuner-marker,.maqam-metronome-hand{transition-duration:.001ms!important}
}

/* Dark-mode contrast for Academy eyebrow/kicker labels and Ajnas stat labels. */
html[data-theme="dark"] .hero-kicker,
html[data-theme="dark"] .controls-kicker,
html[data-theme="dark"] .info-kicker,
html[data-theme="dark"] .legal-eyebrow,
html[data-theme="dark"] .guide-mini-label{
  color:var(--sage-500);
}
html[data-theme="dark"] .founder-framework-kicker{
  color:var(--sage-500)!important;
}
html[data-theme="dark"] .ajnas-stat span:not(.ajnas-stat-icon){
  color:var(--heading-color);
}

/* Dark-mode dropdown contrast — same Sage Group Cards structure, brighter controls. */
html[data-theme="dark"] .ma-select-chevron,
html[data-theme="dark"] .ma-select-check{
  color:var(--sage-500);
}
html[data-theme="dark"] .ma-select-trigger:focus-visible,
html[data-theme="dark"] .ma-select.is-open .ma-select-trigger{
  border-color:var(--sage-500);
  box-shadow:0 0 0 3px rgba(160,189,181,.16);
}
html[data-theme="dark"] .ma-select-option:disabled{
  color:#88968F;
}
html[data-theme="dark"] .ma-select-coming-soon{
  background:var(--sand-100);
  color:#A5B0AB;
  border-color:var(--border-300);
}
html[data-theme="dark"] select{
  color-scheme:dark;
}

/* Shared icon library — /assets/icons */
.ajnas-callout-icon img{display:block;width:40px;height:40px;object-fit:contain}

/* Shared transparent icons — dark mode only.
   Main site logo/web icon and favicon are intentionally excluded. */
html[data-theme="dark"] .section-icon-image,
html[data-theme="dark"] .ajnas-stat-icon,
html[data-theme="dark"] .ajnas-callout-icon{
  background:#DDE1D9;
  border-radius:6px;
}
html[data-theme="dark"] .section-icon-image img,
html[data-theme="dark"] .ajnas-stat-icon img,
html[data-theme="dark"] .ajnas-callout-icon img{
  background:transparent;
  border-radius:0;
}

/* ========================================================================== 
   Practice module — consolidated into the global app stylesheet in v7.7.
   ========================================================================== */
.practice-page{background:var(--ivory-50);--practice-structure-note-ring-radius-extra:11px}
.practice-shell{width:min(1180px,calc(100% - 36px));margin:0 auto;padding:34px 0 60px}
.practice-hero{display:grid;grid-template-columns:minmax(0,1fr) 98px;gap:24px;align-items:center;padding:30px 34px;background:linear-gradient(135deg,var(--surface-solid),var(--surface-glass));overflow:hidden}
.practice-hero h1{margin:0;color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(42px,6vw,68px);font-weight:600;line-height:.95}
.practice-hero p:last-child{max-width:760px;margin:12px 0 0;color:var(--muted-600);font-size:13px;line-height:1.75}
.practice-hero-mark{width:98px;height:98px;display:grid;place-items:center;padding:3px;background:transparent;border:0;border-radius:0;overflow:visible;clip-path:none;transform:rotate(3deg)}
.practice-view{margin-top:28px}
.practice-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:14px}
.practice-section-head h2,.practice-section-head h3{margin:0;color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;font-weight:650}
.practice-section-head h3{font-size:23px}
.practice-section-head>p{max-width:470px;margin:0;color:var(--muted-600);font-size:11px;line-height:1.65;text-align:right}
.practice-section-head.compact{align-items:center;margin:0 0 12px}.practice-section-head.compact h3{font-size:22px}
.practice-kicker{margin:0 0 4px;color:var(--teal-700);font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.practice-settings{display:grid;grid-template-columns:1fr 1.25fr 1.35fr;gap:18px;padding:18px}
.practice-setting-group{min-width:0}.practice-setting-label{display:block;margin:0 0 8px;color:var(--muted-600);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.practice-segmented{width:100%}.practice-segmented button{flex:1;min-height:34px;font-size:9.5px;cursor:pointer}
.practice-exercise-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.practice-exercise-card{min-height:270px;display:flex;flex-direction:column;padding:20px;position:relative;overflow:hidden}
.practice-exercise-card.is-ready{border-color:rgba(19,67,57,.28);box-shadow:0 14px 34px rgba(12,35,30,.08)}
.practice-card-icon{position:absolute;top:20px;right:20px;width:56px;height:56px;display:grid;place-items:center;padding:3px;margin:0;border-radius:14px;background:transparent;color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;font-weight:700}
.practice-exercise-card.is-ready .practice-card-icon{background:transparent;color:var(--gold-200)}
.practice-card-copy{flex:1;padding-right:68px}.practice-card-status{display:inline-flex;margin-bottom:8px;color:var(--teal-700);font-size:8px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.is-future .practice-card-status{color:var(--muted-600)}
.practice-card-copy h3{margin:0 0 8px;color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;font-weight:650}.practice-card-copy p{margin:0 0 18px;color:var(--muted-600);font-size:11px;line-height:1.65}
.practice-card-unavailable{margin:9px 0 0;color:var(--muted-600);font-size:9px;line-height:1.5}
.practice-exercise-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:10px}.practice-back-button{border:0;background:transparent;color:var(--forest-800);font:800 10px/1 "Montserrat",sans-serif;cursor:pointer;padding:8px 0}.practice-back-button:hover{text-decoration:underline}.practice-progress-copy{display:flex;align-items:center;gap:14px;color:var(--muted-600);font-size:10px}.practice-progress-copy strong{padding:6px 9px;border-radius:999px;background:var(--sage-200);color:var(--forest-950);font-size:9px}
.practice-question-card{padding:0;overflow:hidden}.practice-question-head{display:flex;justify-content:space-between;align-items:start;gap:20px;padding:22px 24px;border-bottom:1px solid var(--border-300)}.practice-question-head h2{margin:0;color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:34px;font-weight:650}.practice-question-head>div>p:last-child{margin:5px 0 0;color:var(--muted-600);font-size:12px}.practice-direction-pill{display:inline-flex;align-items:center;min-height:30px;padding:0 11px;border:1px solid var(--border-300);border-radius:999px;background:var(--sand-100);color:var(--forest-800);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.practice-stimulus{padding:20px 24px;border-bottom:1px solid var(--border-300)}.practice-staff-wrap{max-width:940px;margin:0 auto}.practice-staff-mount{min-height:250px}.practice-staff-mount .staff-svg{display:block;margin:0 auto}.practice-audio-row{display:flex;align-items:end;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:12px}.practice-play-controls{display:flex;gap:8px}.practice-play-button{min-width:104px}.practice-instrument-control{display:grid;gap:5px;min-width:190px}.practice-instrument-control span{color:var(--muted-600);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.practice-instrument-control select{height:34px;border:1px solid var(--border-300);border-radius:8px;background:var(--surface-solid);color:var(--heading-color);padding:0 10px;font:700 10px "Montserrat",sans-serif}
.practice-answer-area{margin:22px 0 0;padding:22px 24px 24px;border:0}.practice-answer-area legend{padding:0;margin:0 0 12px;color:var(--forest-950);font:700 24px/1.1 "Cormorant Garamond",Georgia,serif}.practice-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.practice-choice{position:relative;display:block}.practice-choice input{position:absolute;opacity:0;pointer-events:none}.practice-choice span{min-height:54px;display:flex;align-items:center;padding:12px 14px;border:1px solid var(--border-300);border-radius:10px;background:var(--surface-solid);color:var(--heading-color);font-size:14px;font-weight:750;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}.practice-choice span::before{content:"";width:14px;height:14px;flex:0 0 auto;margin-right:10px;border:1px solid var(--sage-500);border-radius:50%;box-shadow:inset 0 0 0 3px var(--surface-solid)}.practice-choice:hover span{border-color:var(--sage-500);background:var(--sage-200);transform:translateY(-1px)}.practice-choice input:focus-visible+span{outline:3px solid rgba(160,189,181,.28);outline-offset:2px}.practice-choice input:checked+span{border-color:var(--forest-800);background:rgba(160,189,181,.22);color:var(--forest-950)}.practice-choice input:checked+span::before{background:var(--forest-800);border-color:var(--forest-800)}/* Evaluated Practice answers must override the generic checked state. */
.practice-choice.is-correct span,
.practice-choice.is-correct input:checked+span{
  border-color:var(--forest-800);
  background:rgba(160,189,181,.27);
  color:var(--heading-color);
}
.practice-choice.is-correct span::before,
.practice-choice.is-correct input:checked+span::before{
  background:var(--forest-800);
  border-color:var(--forest-800);
}
.practice-choice.is-wrong span,
.practice-choice.is-wrong input:checked+span{
  border-color:#C4624F;
  background:rgba(196,98,79,.18);
  color:var(--heading-color);
}
.practice-choice.is-wrong span::before,
.practice-choice.is-wrong input:checked+span::before{
  background:#C4624F;
  border-color:#C4624F;
}.practice-choice input:disabled+span{cursor:default;transform:none}.practice-check-button{display:block;min-width:150px;margin:18px auto 0;padding:11px 20px}
.practice-loading{min-height:280px;display:grid;place-items:center;align-content:center;gap:12px;color:var(--muted-600);font-size:11px}.practice-loading p{margin:0}.practice-spinner{width:30px;height:30px;border:3px solid var(--sage-200);border-top-color:var(--forest-800);border-radius:50%;animation:practiceSpin .75s linear infinite}@keyframes practiceSpin{to{transform:rotate(360deg)}}.practice-error{margin:20px 24px;padding:14px 16px;border:1px solid rgba(196,98,79,.38);border-radius:10px;background:rgba(196,98,79,.08);color:var(--heading-color);font-size:11px;line-height:1.6}
.practice-feedback{margin-top:16px;padding:0;overflow:hidden}.practice-result-banner{display:flex;align-items:center;gap:16px;padding:20px 24px;background:rgba(160,189,181,.14);border-bottom:1px solid var(--border-300)}.practice-result-banner.is-wrong{background:rgba(196,98,79,.08)}.practice-result-icon{width:56px;height:56px;display:grid;place-items:center;flex:0 0 56px;padding:3px;border-radius:50%;background:transparent;color:#fff;font-size:21px;font-weight:800}.practice-result-banner.is-wrong .practice-result-icon{background:transparent}.practice-result-banner h2{margin:0;color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;font-weight:650}.practice-result-banner p:last-child{margin:4px 0 0;color:var(--muted-600);font-size:10.5px;line-height:1.6}
.practice-explanation-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:12px;padding:18px 20px}.practice-explanation-card{padding:16px;border:1px solid var(--border-300);border-radius:11px;background:var(--card-50)}.practice-explanation-card>span,.practice-brom-heading>span{display:block;margin-bottom:8px;color:var(--muted-600);font-size:8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.practice-explanation-card>strong{color:var(--forest-950);font-size:15px;line-height:1.7}.practice-brom-heading{display:flex;align-items:start;justify-content:space-between;gap:12px}.practice-brom-heading small{padding:5px 7px;border:1px solid rgba(211,154,74,.45);border-radius:999px;background:rgba(250,231,183,.22);color:var(--forest-800);font-size:8px;font-weight:800;white-space:nowrap}.practice-brom-list{display:grid;gap:8px}
/* Shared BRoM Structure-card layout. All Practice apps render their Structure result into #practice-brom-card. */
#practice-brom-card>.practice-brom-heading{padding-bottom:16px}
#practice-brom-card>.practice-brom-heading,#practice-brom-card>#practice-brom{zoom:var(--design-practice-structure-card-scale,100%)}.practice-brom-row{display:grid;grid-template-columns:125px 1fr;gap:10px;font-size:10px;line-height:1.55}.practice-brom-row span{color:var(--muted-600);font-weight:700}.practice-brom-row strong{color:var(--forest-950);font-weight:750}
.practice-keyboard-section{padding:4px 20px 18px}.practice-keyboard-mount{max-width:980px;margin:0 auto;overflow:hidden}.practice-keyboard-mount svg{width:100%;height:auto;display:block}.practice-next-row{display:flex;justify-content:flex-end;padding:16px 20px;border-top:1px solid var(--border-300)}
.practice-complete-card{max-width:620px;margin:0 auto;padding:34px;text-align:center}.practice-complete-card h2{margin:0;color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:40px;font-weight:650}.practice-complete-card>p:not(.legal-eyebrow){color:var(--muted-600);font-size:11px}.practice-final-score{display:grid;gap:4px;margin:24px 0}.practice-final-score strong{color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:58px;line-height:1}.practice-final-score span{color:var(--teal-700);font-size:15px;font-weight:850}.practice-complete-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.practice-view[hidden],.practice-feedback[hidden],.practice-loading[hidden],.practice-error[hidden],[hidden]{display:none!important}
.practice-page .staff-watermark{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.practice-staff-mount{position:relative}
.practice-staff-mount::after{
  content:"© 2026 Maqam Academy";
  display:var(--design-practice-rotated-watermark-display);
  position:absolute;left:50%;top:50%;z-index:8;pointer-events:none;user-select:none;white-space:nowrap;
  transform:translate(-50%,-50%) translate(var(--design-practice-rotated-watermark-x),var(--design-practice-rotated-watermark-y)) rotate(var(--design-practice-rotated-watermark-rotation));
  color:var(--design-practice-rotated-watermark-color);
  opacity:calc(var(--design-practice-rotated-watermark-opacity) / 100);
  font-family:var(--design-practice-rotated-watermark-font);font-size:var(--design-practice-rotated-watermark-size);font-weight:750;letter-spacing:.04em;
}
@media(max-width:900px){.practice-settings{grid-template-columns:1fr 1fr}.practice-setting-wide{grid-column:1/-1}.practice-exercise-grid{grid-template-columns:1fr 1fr}.practice-explanation-grid{grid-template-columns:1fr}.practice-staff-mount{overflow-x:auto}.practice-staff-mount svg{min-width:620px}}
@media(max-width:640px){.practice-shell{width:min(100% - 18px,1180px);padding-top:18px}.practice-hero{grid-template-columns:1fr;padding:24px}.practice-hero-mark{display:none}.practice-section-head{display:block}.practice-section-head>p{margin-top:7px;text-align:left}.practice-settings,.practice-exercise-grid,.practice-choice-grid{grid-template-columns:1fr}.practice-setting-wide{grid-column:auto}.practice-question-head{padding:18px;align-items:center}.practice-question-head h2{font-size:29px}.practice-stimulus,.practice-answer-area{padding-left:14px;padding-right:14px}.practice-audio-row{align-items:stretch}.practice-play-controls,.practice-instrument-control{width:100%}.practice-play-controls .btn{flex:1}.practice-result-banner{align-items:flex-start;padding:18px}.practice-explanation-grid{padding:12px}.practice-brom-heading{display:block}.practice-brom-heading small{display:inline-flex;margin-bottom:10px}.practice-brom-row{grid-template-columns:1fr;gap:2px}.practice-next-row .btn{width:100%}.practice-progress-copy{gap:7px}.practice-complete-card{padding:26px 18px}}
@media(prefers-reduced-motion:reduce){.practice-spinner{animation-duration:1.5s}.practice-choice span{transition:none}}

/* Practice completion feedback */
.practice-complete-card{
  position:relative;
  overflow:hidden;
}
.practice-complete-verdict{
  margin:4px 0 8px;
  color:var(--forest-950);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:28px;
  font-weight:650;
  line-height:1.05;
}
.practice-complete-card[data-result-band="mastered"] .practice-final-percent,
.practice-complete-card[data-result-band="strong"] .practice-final-percent{
  color:var(--forest-800);
}
.practice-complete-card[data-result-band="retry"] .practice-final-percent{
  color:var(--quarter-tone,#C4624F);
}
.practice-wiggle{
  animation:practiceCardWiggle .52s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes practiceCardWiggle{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  18%{transform:translate3d(-4px,0,0) rotate(-.35deg)}
  36%{transform:translate3d(4px,0,0) rotate(.35deg)}
  54%{transform:translate3d(-3px,0,0) rotate(-.22deg)}
  72%{transform:translate3d(3px,0,0) rotate(.22deg)}
  88%{transform:translate3d(-1px,0,0) rotate(-.08deg)}
}
.practice-confetti-layer{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  pointer-events:none;
}
.practice-confetti-piece{
  --confetti-left:50%;
  --confetti-drift:0px;
  --confetti-delay:0s;
  --confetti-duration:1.7s;
  --confetti-rotate:540deg;
  --confetti-size:9px;
  position:absolute;
  top:-18px;
  left:var(--confetti-left);
  width:var(--confetti-size);
  height:calc(var(--confetti-size) * .55);
  border-radius:1px;
  background:var(--gold-600);
  opacity:0;
  animation:practiceConfettiFall var(--confetti-duration) cubic-bezier(.2,.7,.3,1) var(--confetti-delay) forwards;
}
.practice-confetti-piece:nth-child(5n+1){background:var(--gold-600)}
.practice-confetti-piece:nth-child(5n+2){background:var(--forest-800)}
.practice-confetti-piece:nth-child(5n+3){background:var(--sage-500)}
.practice-confetti-piece:nth-child(5n+4){background:var(--quarter-tone,#C4624F)}
.practice-confetti-piece:nth-child(5n){background:var(--quarter-tonic,#76566D)}
@keyframes practiceConfettiFall{
  0%{opacity:0;transform:translate3d(0,-10px,0) rotate(0)}
  8%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--confetti-drift),105vh,0) rotate(var(--confetti-rotate))}
}
@media(prefers-reduced-motion:reduce){
  .practice-wiggle{animation:none!important}
  .practice-confetti-layer{display:none!important}
}

/* Practice v7.3 — tempo, session-leave dialog */
.practice-audio-settings{display:flex;align-items:end;justify-content:center;gap:18px;flex-wrap:wrap}
.practice-tempo-control{min-width:250px;margin:0}
.practice-tempo-control .tempo-label{font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-600)}
.practice-tempo-control .tempo-value{font-size:9px}

.practice-exit-modal{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:20px}
.practice-exit-backdrop{position:absolute;inset:0;background:rgba(12,35,30,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.practice-exit-dialog{position:relative;z-index:1;width:min(460px,100%);padding:28px;border-color:rgba(19,67,57,.28);box-shadow:0 24px 70px rgba(12,35,30,.22)}
.practice-exit-dialog h2{margin:0;color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:34px;font-weight:650;line-height:1.02}
.practice-exit-dialog>p:not(.practice-kicker){margin:12px 0 0;color:var(--muted-600);font-size:11px;line-height:1.7}
.practice-exit-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px;flex-wrap:wrap}
.practice-modal-open{overflow:hidden}

@media(max-width:640px){
  .practice-audio-settings{width:100%;align-items:stretch}
  .practice-tempo-control{width:100%;min-width:0;grid-template-columns:auto minmax(100px,1fr) auto}
  .practice-exit-dialog{padding:24px 20px}
  .practice-exit-actions{display:grid;grid-template-columns:1fr}
  .practice-exit-actions .btn{width:100%}
}

/* Shared icon library — /assets/icons */
.practice-hero-mark img{display:block;width:92px;height:92px;max-width:none;aspect-ratio:1/1;object-fit:cover;padding:0;margin:0;background:transparent;border:0;border-radius:0;clip-path:none;mask:none;-webkit-mask:none}
.practice-card-icon img{display:block;width:50px;height:50px;object-fit:contain}
.practice-result-icon img{display:block;width:50px;height:50px;object-fit:contain}

/* Shared transparent Practice icons — dark mode only. */
html[data-theme="dark"] .practice-hero-mark,
html[data-theme="dark"] .practice-card-icon,
html[data-theme="dark"] .practice-result-icon{
  background:#DDE1D9;
  border-radius:6px;
}
html[data-theme="dark"] .practice-hero-mark img,
html[data-theme="dark"] .practice-card-icon img,
html[data-theme="dark"] .practice-result-icon img{
  background:transparent;
  border-radius:0;
}


/* Practice dark mode — mirrors the Maqamat contrast strategy. */
html[data-theme="dark"] .practice-hero h1,
html[data-theme="dark"] .practice-section-head h2,
html[data-theme="dark"] .practice-section-head h3,
html[data-theme="dark"] .practice-card-copy h3,
html[data-theme="dark"] .practice-question-head h2,
html[data-theme="dark"] .practice-answer-area legend,
html[data-theme="dark"] .practice-result-banner h2,
html[data-theme="dark"] .practice-explanation-card>strong,
html[data-theme="dark"] .practice-brom-row strong,
html[data-theme="dark"] .practice-complete-card h2,
html[data-theme="dark"] .practice-complete-verdict,
html[data-theme="dark"] .practice-final-score strong,
html[data-theme="dark"] .practice-exit-dialog h2{
  color:var(--heading-color);
}

html[data-theme="dark"] .practice-kicker,
html[data-theme="dark"] .practice-card-status,
html[data-theme="dark"] .practice-back-button,
html[data-theme="dark"] .practice-direction-pill,
html[data-theme="dark"] .practice-final-score span{
  color:var(--sage-500);
}

html[data-theme="dark"] .practice-choice:hover span{
  background:var(--sand-100);
  color:var(--heading-color);
}

html[data-theme="dark"] .practice-choice input:checked+span{
  background:rgba(160,189,181,.14);
  color:var(--heading-color);
}
html[data-theme="dark"] .practice-choice.is-correct span,
html[data-theme="dark"] .practice-choice.is-correct input:checked+span{
  border-color:var(--sage-500);
  background:rgba(160,189,181,.18);
  color:var(--heading-color);
}
html[data-theme="dark"] .practice-choice.is-correct span::before,
html[data-theme="dark"] .practice-choice.is-correct input:checked+span::before{
  background:var(--sage-500);
  border-color:var(--sage-500);
}
html[data-theme="dark"] .practice-choice.is-wrong span,
html[data-theme="dark"] .practice-choice.is-wrong input:checked+span{
  border-color:#C4624F;
  background:rgba(196,98,79,.24);
  color:var(--heading-color);
}
html[data-theme="dark"] .practice-choice.is-wrong span::before,
html[data-theme="dark"] .practice-choice.is-wrong input:checked+span::before{
  background:#C4624F;
  border-color:#C4624F;
}

html[data-theme="dark"] .practice-brom-heading small{
  background:rgba(211,154,74,.12);
  color:var(--gold-200);
}

html[data-theme="dark"] .practice-complete-card[data-result-band="mastered"] .practice-final-percent,
html[data-theme="dark"] .practice-complete-card[data-result-band="strong"] .practice-final-percent{
  color:var(--sage-500);
}

/* Practice result feedback — Muted Slate surface in dark mode. */
html[data-theme="dark"] .practice-result-banner,
html[data-theme="dark"] .practice-result-banner.is-wrong{
  background:#5F6966;
  border-bottom-color:#73807C;
}
html[data-theme="dark"] .practice-result-banner h2{
  color:#F1F6F3;
}
html[data-theme="dark"] .practice-result-banner p:last-child{
  color:#E7EEEA;
}

/* Keep notation on a light paper surface in dark mode, exactly like Maqamat. */
.practice-staff-mount{
  background:var(--notation-paper);
  border-radius:8px;
}

html[data-theme="dark"] .practice-staff-mount{
  background:var(--notation-paper);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

/* ========================================================================== 
   Super Admin Design System bindings
   These are the only late-stage visual overrides. Values come from
   /assets/css/design-tokens.css and the validated published design settings.
   ========================================================================== */
html{
  font-family:var(--design-body-font);
  font-size:var(--design-base-font-size);
}
h1,h2,h3,.brand-copy strong,.footer-brand strong{
  font-family:var(--design-heading-font);
}
.page{
  width:min(1430px,calc(100% - var(--design-page-side-gap) - var(--design-page-side-gap)));
}
.main-column,.side-column{gap:var(--design-section-gap)}
.surface-card{
  border-width:var(--design-card-border-width);
  border-radius:var(--design-card-radius);
  box-shadow:var(--design-card-shadow);
  background:var(--surface-glass);
  background:color-mix(in srgb,var(--surface-solid) var(--design-card-surface-mix),transparent);
}
.section-head{
  padding:var(--design-card-padding-y) var(--design-card-padding-x);
}
.section-head h2{font-size:var(--design-section-title-size)}
.hero-kicker,.controls-kicker,.info-kicker,.legal-eyebrow,.guide-mini-label,
.founder-framework-kicker,.practice-kicker,.practice-card-status{
  color:var(--design-kicker-color)!important;
}
.hero-kicker,.controls-kicker,.info-kicker,.legal-eyebrow,.guide-mini-label,
.founder-framework-kicker,.practice-kicker{
  font-size:var(--design-small-label-size);
}
.btn{
  border-radius:var(--design-button-radius);
  padding:var(--design-button-pad-y) var(--design-button-pad-x);
  font-size:var(--design-button-font-size);
}
select{
  height:var(--design-compact-dropdown-height);
  min-height:var(--design-compact-dropdown-height);
  border-radius:var(--design-compact-dropdown-radius);
}
.ma-select{--ma-select-height:var(--design-dropdown-height)}
.ma-select-trigger{border-radius:var(--design-dropdown-radius)}
.ma-select:not(.ma-select--maqamat-key):not(.ma-select--ajnas-key) .ma-select-trigger{
  font-size:var(--design-dropdown-font-size);
}
.ajnas-toolbar .ajnas-instrument-control .ma-select,
.ajnas-toolbar .ajnas-sort-control .ma-select{
  --ma-select-height:var(--design-compact-dropdown-height)!important;
}
.ajnas-toolbar .ajnas-instrument-control .ma-select-trigger,
.ajnas-toolbar .ajnas-sort-control .ma-select-trigger{
  border-radius:var(--design-compact-dropdown-radius);
}

/* Content icon system. Main website logo and favicon are intentionally not
   included in these selectors. */
.section-icon-image{
  width:calc(var(--design-maqamat-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  height:calc(var(--design-maqamat-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  flex-basis:calc(var(--design-maqamat-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  padding:var(--design-icon-padding);
}
.section-icon-image img{
  width:var(--design-maqamat-icon-size);
  height:var(--design-maqamat-icon-size);
  transform:translate(var(--design-maqamat-icon-x),var(--design-maqamat-icon-y));
}
.ajnas-stat-icon,.ajnas-callout-icon{
  width:calc(var(--design-ajnas-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  height:calc(var(--design-ajnas-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  padding:var(--design-icon-padding);
}
.ajnas-stat-icon{flex-basis:calc(var(--design-ajnas-icon-size) + var(--design-icon-padding) + var(--design-icon-padding))}
.ajnas-stat-icon img,.ajnas-callout-icon img{
  width:var(--design-ajnas-icon-size);
  height:var(--design-ajnas-icon-size);
  transform:translate(var(--design-ajnas-icon-x),var(--design-ajnas-icon-y));
}
html[data-theme="dark"] .section-icon-image,
html[data-theme="dark"] .ajnas-stat-icon,
html[data-theme="dark"] .ajnas-callout-icon,
html[data-theme="dark"] .practice-hero-mark,
html[data-theme="dark"] .practice-card-icon,
html[data-theme="dark"] .practice-result-icon{
  background:var(--design-icon-dark-bg);
  border-radius:var(--design-icon-radius);
}

/* Ajnas statistics. */
.ajnas-stat span:not(.ajnas-stat-icon){
  font-size:var(--design-ajnas-stat-label-size);
  font-weight:var(--design-ajnas-stat-label-weight);
}
.ajnas-stat small{font-size:var(--design-ajnas-stat-small-size)}

/* Practice icon dimensions reserve the image plus its configurable padding. */
.practice-hero{
  grid-template-columns:minmax(0,1fr) calc(var(--design-practice-hero-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
}
.practice-hero-mark{
  width:calc(var(--design-practice-hero-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  height:calc(var(--design-practice-hero-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  padding:var(--design-icon-padding);
}
.practice-hero-mark img{
  width:var(--design-practice-hero-icon-size);
  height:var(--design-practice-hero-icon-size);
}
.practice-card-icon{
  top:var(--design-practice-card-icon-top);
  right:var(--design-practice-card-icon-right);
  width:calc(var(--design-practice-card-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  height:calc(var(--design-practice-card-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  padding:var(--design-icon-padding);
}
.practice-card-icon img{
  width:var(--design-practice-card-icon-size);
  height:var(--design-practice-card-icon-size);
}
.practice-card-copy{
  padding-right:calc(var(--design-practice-card-icon-size) + var(--design-icon-padding) + var(--design-icon-padding) + var(--design-practice-card-icon-right) + 12px);
}
.practice-card-copy h3{font-size:var(--design-practice-card-title-size);margin-bottom:var(--design-practice-card-title-description-gap)}
.practice-card-copy p{font-size:var(--design-practice-card-copy-size)}
/* Practice session typography and exercise-card action positioning. */
.practice-setting-label{font-size:var(--design-practice-session-label-size)}
.practice-segmented button{font-size:var(--design-practice-session-option-size)}
.practice-exercise-card > .btn.wide{
  margin-top:var(--design-practice-start-button-gap);
  position:relative;
  left:var(--design-practice-start-button-x);
  top:var(--design-practice-start-button-y);
}
.practice-result-icon{
  width:calc(var(--design-practice-result-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  height:calc(var(--design-practice-result-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  flex-basis:calc(var(--design-practice-result-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  padding:var(--design-icon-padding);
}
.practice-result-icon img{
  width:var(--design-practice-result-icon-size);
  height:var(--design-practice-result-icon-size);
}
.practice-answer-area{margin-top:var(--design-practice-answer-top-gap)}
.practice-choice span{font-size:var(--design-practice-choice-font-size)}
html[data-theme="dark"] .practice-result-banner,
html[data-theme="dark"] .practice-result-banner.is-wrong{
  background:var(--design-practice-result-dark-bg);
}

@media(max-width:640px){
  .page{width:min(100% - 18px,1430px)}
}

/* Future shared content icons should opt into this class. The website logo,
   brand icon and favicon intentionally do not use it. */
.academy-icon-container{
  display:grid;
  place-items:center;
  padding:var(--design-icon-padding);
  background:transparent;
}
html[data-theme="dark"] .academy-icon-container{
  background:var(--design-icon-dark-bg);
  border-radius:var(--design-icon-radius);
}
.academy-icon-container>img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

/* ================================================================
   Design System responsive guard — v7.8.1
   The editable global tokens must not erase the Academy's established
   responsive Maqamat/Ajnas/Practice geometry. These rules intentionally
   mirror the original responsive breakpoints after the token bridge.
   ================================================================ */
@media(max-width:920px){
  .page{width:min(100% - 28px,1430px)}
}
@media(max-width:680px){
  .page{width:min(100% - 18px,1430px);padding-top:12px}
  .section-head{padding:12px}
}
@media(max-width:640px){
  .practice-hero{grid-template-columns:1fr;padding:24px}
  .practice-hero-mark{display:none}
}

/* ================================================================
   Design System — Dropdown color bridge (v7.8)
   All visible dropdown colors are controlled by Super Admin > Design.
   The same semantic variables receive separate light/dark values.
   ================================================================ */
select:not(.ma-native-select){
  border-color:var(--design-dropdown-trigger-border);
  background:var(--design-dropdown-trigger-bg);
  color:var(--design-dropdown-trigger-text);
}
select:not(.ma-native-select):focus{
  border-color:var(--design-dropdown-focus-border);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--design-dropdown-focus-border) 18%,transparent);
}
#maqam-select optgroup{
  color:var(--design-dropdown-group-title-text);
  background:var(--design-dropdown-group-bg);
}
#maqam-select option{
  color:var(--design-dropdown-option-text);
  background:var(--design-dropdown-menu-bg);
}
#maqam-select option:disabled{color:var(--design-dropdown-option-disabled-text)}

.ma-select-trigger{
  border-color:var(--design-dropdown-trigger-border);
  background:var(--design-dropdown-trigger-bg);
  color:var(--design-dropdown-trigger-text);
}
.ma-select-trigger:hover{
  border-color:var(--design-dropdown-trigger-hover-border);
  background:var(--design-dropdown-trigger-hover-bg);
}
.ma-select-trigger:focus-visible,
.ma-select.is-open .ma-select-trigger{
  border-color:var(--design-dropdown-focus-border);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--design-dropdown-focus-border) 16%,transparent);
}
.ma-select-chevron,.ma-select-check{color:var(--design-dropdown-icon-color)}

.ma-select-menu{
  border-color:var(--design-dropdown-menu-border);
  background:var(--design-dropdown-menu-bg);
  color:var(--design-dropdown-option-text);
  scrollbar-color:var(--design-dropdown-icon-color) transparent;
}
.ma-select-menu::-webkit-scrollbar-thumb{background:var(--design-dropdown-icon-color);background-clip:padding-box}
.ma-select-group{
  border-color:var(--design-dropdown-group-border);
  background:var(--design-dropdown-group-bg);
}
.ma-select-group-title{
  background:var(--design-dropdown-group-title-bg);
  color:var(--design-dropdown-group-title-text);
}
.ma-select-option{color:var(--design-dropdown-option-text)}
.ma-select-option:hover,
.ma-select-option:focus-visible,
.ma-select-option.is-focused{
  background:var(--design-dropdown-option-hover-bg);
  color:var(--design-dropdown-option-hover-text);
}
.ma-select-option.is-selected{
  background:var(--design-dropdown-option-selected-bg);
  color:var(--design-dropdown-option-selected-text);
}
.ma-select-option:disabled{color:var(--design-dropdown-option-disabled-text)}
.ma-select-coming-soon{
  border-color:var(--design-dropdown-soon-border);
  background:var(--design-dropdown-soon-bg);
  color:var(--design-dropdown-soon-text);
}

/* Legacy Instrument/Ajnas geometry carries !important declarations. These
   selectors intentionally override colors only; sizes and layout stay intact. */
.ma-select--instrument .ma-select-trigger,
.ajnas-toolbar .ajnas-instrument-control .ma-select-trigger,
.ajnas-toolbar .ajnas-sort-control .ma-select-trigger{
  border-color:var(--design-dropdown-trigger-border)!important;
  background:var(--design-dropdown-trigger-bg)!important;
  color:var(--design-dropdown-trigger-text)!important;
}
.ma-select--instrument .ma-select-trigger:hover,
.ajnas-toolbar .ajnas-key-control .ma-select-trigger:hover,
.ajnas-toolbar .ajnas-instrument-control .ma-select-trigger:hover,
.ajnas-toolbar .ajnas-sort-control .ma-select-trigger:hover{
  border-color:var(--design-dropdown-trigger-hover-border)!important;
  background:var(--design-dropdown-trigger-hover-bg)!important;
}
.ma-select--instrument.is-open .ma-select-trigger,
.ma-select--instrument .ma-select-trigger:focus-visible,
.ajnas-toolbar .ajnas-key-control .ma-select.is-open .ma-select-trigger,
.ajnas-toolbar .ajnas-key-control .ma-select-trigger:focus-visible,
.ajnas-toolbar .ajnas-instrument-control .ma-select.is-open .ma-select-trigger,
.ajnas-toolbar .ajnas-instrument-control .ma-select-trigger:focus-visible,
.ajnas-toolbar .ajnas-sort-control .ma-select.is-open .ma-select-trigger,
.ajnas-toolbar .ajnas-sort-control .ma-select-trigger:focus-visible{
  border-color:var(--design-dropdown-focus-border)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--design-dropdown-focus-border) 16%,transparent)!important;
}
.ma-select-menu--instrument .ma-select-group{
  border-color:var(--design-dropdown-group-border)!important;
  background:var(--design-dropdown-group-bg)!important;
}
.ma-select-menu--instrument .ma-select-group-title,
html[data-theme="dark"] .ma-select-menu--instrument .ma-select-group-title{
  background:var(--design-dropdown-group-title-bg)!important;
  color:var(--design-dropdown-group-title-text)!important;
}

/* Match the specificity of earlier dark-mode rules so the Design System stays
   authoritative in dark mode as well. */
html[data-theme="dark"] .ma-select-trigger{
  border-color:var(--design-dropdown-trigger-border);
  background:var(--design-dropdown-trigger-bg);
  color:var(--design-dropdown-trigger-text);
}
html[data-theme="dark"] .ma-select-trigger:hover{
  border-color:var(--design-dropdown-trigger-hover-border);
  background:var(--design-dropdown-trigger-hover-bg);
}
html[data-theme="dark"] .ma-select-trigger:focus-visible,
html[data-theme="dark"] .ma-select.is-open .ma-select-trigger{
  border-color:var(--design-dropdown-focus-border);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--design-dropdown-focus-border) 16%,transparent);
}
html[data-theme="dark"] .ma-select-chevron,
html[data-theme="dark"] .ma-select-check{color:var(--design-dropdown-icon-color)}
html[data-theme="dark"] .ma-select-menu{
  border-color:var(--design-dropdown-menu-border);
  background:var(--design-dropdown-menu-bg);
  color:var(--design-dropdown-option-text);
}
html[data-theme="dark"] .ma-select-group{
  border-color:var(--design-dropdown-group-border);
  background:var(--design-dropdown-group-bg);
}
html[data-theme="dark"] .ma-select-group-title{
  background:var(--design-dropdown-group-title-bg);
  color:var(--design-dropdown-group-title-text);
}
html[data-theme="dark"] .ma-select-option{color:var(--design-dropdown-option-text)}
html[data-theme="dark"] .ma-select-option:hover,
html[data-theme="dark"] .ma-select-option:focus-visible,
html[data-theme="dark"] .ma-select-option.is-focused{
  background:var(--design-dropdown-option-hover-bg);
  color:var(--design-dropdown-option-hover-text);
}
html[data-theme="dark"] .ma-select-option.is-selected{
  background:var(--design-dropdown-option-selected-bg);
  color:var(--design-dropdown-option-selected-text);
}
html[data-theme="dark"] .ma-select-option:disabled{color:var(--design-dropdown-option-disabled-text)}
html[data-theme="dark"] .ma-select-coming-soon{
  border-color:var(--design-dropdown-soon-border);
  background:var(--design-dropdown-soon-bg);
  color:var(--design-dropdown-soon-text);
}
.ma-select.is-disabled .ma-select-trigger,
.ma-select-trigger:disabled,
html[data-theme="dark"] .ma-select.is-disabled .ma-select-trigger,
html[data-theme="dark"] .ma-select-trigger:disabled{
  background:var(--design-dropdown-trigger-disabled-bg);
}
.ma-select--instrument.is-disabled .ma-select-trigger,
.ma-select--instrument .ma-select-trigger:disabled,
.ajnas-toolbar .ajnas-key-control .ma-select.is-disabled .ma-select-trigger,
.ajnas-toolbar .ajnas-key-control .ma-select-trigger:disabled,
.ajnas-toolbar .ajnas-instrument-control .ma-select.is-disabled .ma-select-trigger,
.ajnas-toolbar .ajnas-instrument-control .ma-select-trigger:disabled,
.ajnas-toolbar .ajnas-sort-control .ma-select.is-disabled .ma-select-trigger,
.ajnas-toolbar .ajnas-sort-control .ma-select-trigger:disabled{
  background:var(--design-dropdown-trigger-disabled-bg)!important;
}

/* ========================================================================== 
   Guide Design System — v8.4
   Guide-specific variables are scoped to .guide-shell so header/footer and the
   rest of the Academy remain governed by the global design system.
   ========================================================================== */
.guide-shell{
  width:min(var(--design-guide-page-max-width),calc(100% - var(--design-guide-page-side-gap) - var(--design-guide-page-side-gap)));
  --heading-color:var(--design-guide-heading);
  --ink-900:var(--design-guide-text);
  --muted-600:var(--design-guide-muted);
  --border-300:var(--design-guide-border);
  --control-surface:var(--design-guide-inner-bg);
  --teal-700:var(--design-guide-accent);
}
.guide-hero{gap:var(--design-guide-hero-gap);padding-top:var(--design-guide-hero-pad-top);padding-bottom:var(--design-guide-hero-pad-bottom);border-color:var(--design-guide-border)}
.guide-hero-copy{transform:translate(var(--design-guide-hero-copy-x),var(--design-guide-hero-copy-y))}
.guide-hero-copy h1{color:var(--design-guide-heading);font-size:clamp(46px,6.8vw,var(--design-guide-hero-title-size))}
.guide-hero-lead{color:var(--design-guide-text);font-size:var(--design-guide-hero-lead-size)}
.guide-shell .legal-eyebrow,.guide-section-kicker,.guide-nav-kicker{color:var(--design-guide-kicker)!important}
.guide-theory-ownership{color:var(--design-guide-muted)}
.guide-theory-ownership strong{color:var(--design-guide-accent)}
.guide-hero-visual{padding:var(--design-guide-hero-visual-padding);border-color:var(--design-guide-visual-border);border-radius:var(--design-guide-hero-visual-radius);background:linear-gradient(145deg,var(--design-guide-visual-bg-top),var(--design-guide-visual-bg-bottom));transform:translate(var(--design-guide-hero-visual-x),var(--design-guide-hero-visual-y))}
.guide-hero-note-icon{transform-box:fill-box;transform-origin:center;transform:translate(var(--design-guide-hero-note-x),var(--design-guide-hero-note-y)) scale(var(--design-guide-hero-note-scale))}

.guide-principles{gap:var(--design-guide-inner-gap)}
.guide-principle,.guide-nav,.guide-section{border-color:var(--design-guide-border);background:var(--design-guide-section-bg)}
.guide-principle{border-radius:var(--design-guide-section-radius)}
.guide-principle h2{color:var(--design-guide-heading)}
.guide-principle p{color:var(--design-guide-muted)}
.guide-principle-number{color:var(--design-guide-kicker)}

.guide-layout{grid-template-columns:var(--design-guide-nav-width) minmax(0,1fr)}
.guide-nav{padding:var(--design-guide-nav-pad-y) var(--design-guide-nav-pad-x);border-radius:var(--design-guide-section-radius);transform:translate(var(--design-guide-nav-x),var(--design-guide-nav-y))}
.guide-nav a{padding:var(--design-guide-nav-link-padding);border-radius:var(--design-guide-nav-link-radius);color:var(--design-guide-muted);font-size:var(--design-guide-nav-link-size)}
.guide-nav a:hover{background:var(--design-guide-inner-bg);color:var(--design-guide-accent)}
.guide-nav a.is-active,html[data-theme="dark"] .guide-nav a.is-active{background:var(--design-guide-nav-active-bg);color:var(--design-guide-nav-active-text)}
.guide-nav a.is-active::before{background:var(--design-guide-kicker)}

.guide-content{gap:var(--design-guide-section-gap)}
.guide-section{padding:var(--design-guide-section-pad-y) var(--design-guide-section-pad-x);border-radius:var(--design-guide-section-radius)}
.guide-section-head{transform:translate(var(--design-guide-section-head-x),var(--design-guide-section-head-y))}
.guide-section-index{width:var(--design-guide-index-size);height:var(--design-guide-index-size);flex-basis:var(--design-guide-index-size);border-radius:var(--design-guide-index-radius);background:var(--design-guide-index-bg);color:var(--design-guide-index-text);font-size:var(--design-guide-index-font-size);transform:translate(var(--design-guide-index-x),var(--design-guide-index-y))}
.guide-section-head h2{color:var(--design-guide-heading);font-size:var(--design-guide-section-title-size)}
.guide-section>p{color:var(--design-guide-text);font-size:var(--design-guide-body-size)}
.guide-large-copy{color:var(--design-guide-text)!important;font-size:var(--design-guide-large-copy-size)!important}
.guide-subheading{color:var(--design-guide-heading);font-size:var(--design-guide-subheading-size)}
.guide-note{background:var(--design-guide-note-bg);color:var(--design-guide-text);font-size:var(--design-guide-inner-body-size);border-left-color:var(--design-guide-kicker)}
.guide-note strong{color:var(--design-guide-accent)}

.guide-definition-grid,.guide-three-column,.guide-steps,.guide-framework-rules,.guide-ajnas-grid,.guide-study-levels,.guide-marker-legend{gap:var(--design-guide-inner-gap)}
.guide-definition-grid article,.guide-three-column article,.guide-symbol-table>div,.guide-xray-card,.guide-steps article,.guide-interval-grid div,.guide-marker-legend article,.guide-framework-rules article,.guide-rorm-priority article,.guide-ajnas-grid article,.guide-study-levels article,.guide-references article{padding:var(--design-guide-inner-padding);border-color:var(--design-guide-border);border-radius:var(--design-guide-inner-radius);background:var(--design-guide-inner-bg)}
html[data-theme="dark"] .guide-definition-grid article,html[data-theme="dark"] .guide-three-column article,html[data-theme="dark"] .guide-symbol-table>div,html[data-theme="dark"] .guide-xray-card,html[data-theme="dark"] .guide-steps article,html[data-theme="dark"] .guide-interval-grid div,html[data-theme="dark"] .guide-marker-legend article,html[data-theme="dark"] .guide-framework-rules article,html[data-theme="dark"] .guide-rorm-priority article,html[data-theme="dark"] .guide-ajnas-grid article,html[data-theme="dark"] .guide-study-levels article,html[data-theme="dark"] .guide-references article{border-color:var(--design-guide-border);background:var(--design-guide-inner-bg)}
.guide-definition-grid h3,.guide-three-column h3,.guide-steps h3,.guide-framework-rules h3,.guide-rorm-priority h3,.guide-study-levels h3,.guide-ajnas-grid h3,.guide-xray-card h3{color:var(--design-guide-heading);font-size:var(--design-guide-inner-title-size)}
.guide-definition-grid p,.guide-three-column p,.guide-steps p,.guide-framework-rules p,.guide-rorm-priority p,.guide-study-levels p,.guide-ajnas-grid p,.guide-xray-card p{color:var(--design-guide-muted);font-size:var(--design-guide-inner-body-size)}
.guide-mini-label,.guide-definition-grid article>span{color:var(--design-guide-accent)!important}
.guide-glossary dt{color:var(--design-guide-accent)}.guide-glossary dd{color:var(--design-guide-muted)}
.guide-references a,html[data-theme="dark"] .guide-references a{color:var(--design-guide-accent)}

/* Teaching diagrams intentionally use one fixed palette in both themes. */
.guide-hero-visual,.guide-jins-visual,.guide-quarter-visual,.guide-brom-diagram,
html[data-theme="dark"] .guide-hero-visual,html[data-theme="dark"] .guide-jins-visual,html[data-theme="dark"] .guide-quarter-visual,html[data-theme="dark"] .guide-brom-diagram{
  --surface-solid:var(--design-guide-visual-bg-top);
  --control-surface:var(--design-guide-visual-bg-bottom);
  --heading-color:var(--design-guide-visual-ink);
  --ink-900:var(--design-guide-visual-ink);
  --muted-600:var(--design-guide-visual-muted);
  --forest-950:var(--design-guide-visual-ink);
  --forest-800:var(--design-guide-visual-teal);
  --teal-700:var(--design-guide-visual-teal);
  --gold-600:var(--design-guide-visual-gold);
  --sage-500:var(--design-guide-visual-sage);
  --key-quarter:var(--design-guide-visual-quarter);
  border-color:var(--design-guide-visual-border);
  background:linear-gradient(180deg,var(--design-guide-visual-bg-top),var(--design-guide-visual-bg-bottom));
}
.guide-jins-visual,.guide-brom-diagram{padding:var(--design-guide-visual-padding);border-radius:var(--design-guide-visual-radius)}
.guide-jins-visual,.guide-quarter-visual,.guide-brom-diagram{margin-top:var(--design-guide-visual-top-gap)}
.guide-quarter-interactive{padding:var(--design-guide-quarter-pad-top) var(--design-guide-quarter-pad-x) var(--design-guide-quarter-pad-bottom)}
.guide-quarter-mode,.guide-quarter-reset{height:var(--design-guide-quarter-button-height);border-radius:var(--design-guide-quarter-button-radius);font-size:var(--design-guide-quarter-button-font-size)}
.guide-quarter-visual{border-radius:var(--design-guide-visual-radius)}
html[data-theme="dark"] .guide-quarter-visual .guide-quarter-comma-grid i::after{color:var(--design-guide-visual-teal)}
html[data-theme="dark"] .guide-quarter-visual .guide-quarter-mode.is-active{background:var(--design-guide-visual-teal);border-color:var(--design-guide-visual-teal);color:#FFFFFF}

.guide-final-card{border-radius:var(--design-guide-final-radius);background:linear-gradient(130deg,var(--design-guide-final-bg-start),var(--design-guide-final-bg-end))}
.guide-final-card h2{color:var(--design-guide-final-heading)}
.guide-final-card p{color:var(--design-guide-final-text)}
.guide-final-card p strong{color:var(--design-guide-final-heading)}

@media(max-width:1100px){
  .guide-layout{grid-template-columns:1fr}
}
@media(max-width:800px){
  .guide-shell{width:min(100% - 18px,var(--design-guide-page-max-width))}
  .guide-hero-copy h1{font-size:min(56px,var(--design-guide-hero-title-size))}
  .guide-section{padding:22px 18px}
  .guide-section-head h2{font-size:min(31px,var(--design-guide-section-title-size))}
}
@media(max-width:520px){
  .guide-hero-copy h1{font-size:min(46px,var(--design-guide-hero-title-size))}
  .guide-hero-lead{font-size:min(13px,var(--design-guide-hero-lead-size))}
  .guide-section-head h2{font-size:min(27px,var(--design-guide-section-title-size))}
}


/* ========================================================================== 
   v8.7 — Guide Research & Sources
   ========================================================================== */
.guide-research-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:20px;padding:var(--design-guide-inner-padding,17px);border:1px solid var(--design-guide-border,var(--border-300));border-radius:var(--design-guide-inner-radius,12px);background:var(--design-guide-inner-bg,var(--control-surface))}
.guide-research-cta h3{margin:0;color:var(--design-guide-heading,var(--heading-color));font-family:var(--design-font-heading,"Cormorant Garamond",Georgia,serif);font-size:var(--design-guide-inner-title-size,19px);font-weight:600}
.guide-research-cta p{max-width:760px;margin:6px 0 0;color:var(--design-guide-muted,var(--muted-600));font-size:var(--design-guide-inner-body-size,11px);line-height:1.7}
.guide-research-cta .btn{flex:0 0 auto}

.research-sources-page{scroll-padding-top:92px}
.research-sources-shell{width:min(var(--design-guide-page-max-width,1320px),calc(100% - var(--design-guide-page-side-gap,18px) - var(--design-guide-page-side-gap,18px)));padding-top:24px}
.research-breadcrumb{display:flex;align-items:center;gap:8px;margin:0 0 18px;color:var(--design-guide-muted,var(--muted-600));font-size:10px;font-weight:700}
.research-breadcrumb a{color:var(--design-guide-accent,var(--teal-700));text-decoration:none}
.research-breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px}
.research-sources-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:var(--design-guide-hero-gap,30px);align-items:end;padding:var(--design-guide-hero-pad-top,28px) 0 var(--design-guide-hero-pad-bottom,34px);border-bottom:1px solid var(--design-guide-border,var(--border-300))}
.research-sources-hero h1{max-width:900px;margin:0;color:var(--design-guide-heading,var(--heading-color));font-family:var(--design-font-heading,"Cormorant Garamond",Georgia,serif);font-size:clamp(52px,6.5vw,82px);font-weight:540;line-height:.92;letter-spacing:-.035em}
.research-sources-lead{max-width:800px;margin:18px 0 0;color:var(--design-guide-text,var(--ink-900));font-size:var(--design-guide-hero-lead-size,15px);line-height:1.8}
.research-sources-principle{padding:22px;border-color:var(--design-guide-border,var(--border-300));background:var(--design-guide-section-bg,var(--surface-glass))}
.research-sources-principle strong{display:block;color:var(--design-guide-heading,var(--heading-color));font-family:var(--design-font-heading,"Cormorant Garamond",Georgia,serif);font-size:24px;font-weight:600}
.research-sources-principle p{margin:8px 0 0;color:var(--design-guide-muted,var(--muted-600));font-size:11px;line-height:1.72}

.research-attribution-banner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:20px 0;padding:0;overflow:hidden;border-color:var(--design-guide-border,var(--border-300));background:var(--design-guide-border,var(--border-300))}
.research-attribution-banner>div{min-width:0;padding:16px 18px;background:var(--design-guide-section-bg,var(--surface-solid))}
.research-attribution-banner span{display:block;margin-bottom:5px;color:var(--design-guide-kicker,var(--gold-600));font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.research-attribution-banner strong{display:block;color:var(--design-guide-heading,var(--heading-color));font-size:11px;line-height:1.55}

.research-category-nav{position:sticky;z-index:12;top:76px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:20px 0;padding:7px;border-color:var(--design-guide-border,var(--border-300));background:color-mix(in srgb,var(--design-guide-section-bg,var(--surface-solid)) 94%,transparent)}
.research-category-nav a{display:flex;align-items:center;justify-content:center;min-height:38px;padding:8px 10px;border-radius:var(--design-guide-nav-link-radius,8px);color:var(--design-guide-muted,var(--muted-600));font-size:10px;font-weight:750;text-align:center;text-decoration:none}
.research-category-nav a:hover{background:var(--design-guide-nav-active-bg,rgba(160,189,181,.2));color:var(--design-guide-nav-active-text,var(--heading-color))}

.research-source-category{scroll-margin-top:142px;margin-top:18px;padding:var(--design-guide-section-pad-y,28px) var(--design-guide-section-pad-x,30px);border-color:var(--design-guide-border,var(--border-300));border-radius:var(--design-guide-section-radius,16px);background:var(--design-guide-section-bg,var(--surface-glass))}
.research-category-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
.research-category-head>div{min-width:0}
.research-category-index{display:grid;place-items:center;flex:0 0 var(--design-guide-index-size,36px);width:var(--design-guide-index-size,36px);height:var(--design-guide-index-size,36px);border-radius:var(--design-guide-index-radius,10px);background:var(--design-guide-index-bg,var(--forest-950));color:var(--design-guide-index-text,#fff);font-size:var(--design-guide-index-font-size,10px);font-weight:800;letter-spacing:.06em}
.research-category-head h2{margin:0;color:var(--design-guide-heading,var(--heading-color));font-family:var(--design-font-heading,"Cormorant Garamond",Georgia,serif);font-size:var(--design-guide-section-title-size,36px);font-weight:600;line-height:1.02}
.research-category-head p:last-child{max-width:920px;margin:8px 0 0;color:var(--design-guide-muted,var(--muted-600));font-size:11px;line-height:1.7}
.research-source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--design-guide-inner-gap,11px)}
.research-source-card{position:relative;min-width:0;padding:var(--design-guide-inner-padding,17px);border:1px solid var(--design-guide-border,var(--border-300));border-radius:var(--design-guide-inner-radius,12px);background:var(--design-guide-inner-bg,var(--control-surface))}
.research-source-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.research-source-meta span{display:inline-flex;align-items:center;min-height:22px;padding:4px 8px;border:1px solid var(--design-guide-border,var(--border-300));border-radius:999px;color:var(--design-guide-muted,var(--muted-600));font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.research-source-meta .research-category-pill{border-color:color-mix(in srgb,var(--design-guide-accent,var(--teal-700)) 32%,transparent);background:color-mix(in srgb,var(--design-guide-accent,var(--teal-700)) 9%,transparent);color:var(--design-guide-accent,var(--teal-700))}
.research-category-original .research-category-pill{border-color:rgba(211,154,74,.35);background:rgba(250,231,183,.20);color:var(--gold-600)}
.research-source-author{margin:0 0 5px;color:var(--design-guide-accent,var(--teal-700));font-size:10px;font-weight:800;letter-spacing:.025em}
.research-source-card h3{margin:0;color:var(--design-guide-heading,var(--heading-color));font-family:var(--design-font-heading,"Cormorant Garamond",Georgia,serif);font-size:var(--design-guide-inner-title-size,19px);font-weight:600;line-height:1.2}
.research-source-details{margin:9px 0 0;color:var(--design-guide-muted,var(--muted-600));font-size:var(--design-guide-inner-body-size,11px);line-height:1.65}
.research-source-relationship{margin:13px 0 0;padding:10px 12px;border-left:3px solid var(--design-guide-accent,var(--teal-700));border-radius:0 8px 8px 0;background:var(--design-guide-note-bg,rgba(250,231,183,.2));color:var(--design-guide-text,var(--ink-900));font-size:10px;font-weight:650;line-height:1.62}
.research-category-original .research-source-relationship{border-left-color:var(--gold-600)}
.research-source-link{display:inline-flex;margin-top:13px;color:var(--design-guide-accent,var(--teal-700));font-size:9px;font-weight:800;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--design-guide-accent,var(--teal-700)) 28%,transparent);text-underline-offset:3px}
.research-public-empty{padding:24px;border:1px dashed var(--design-guide-border,var(--border-300));border-radius:var(--design-guide-inner-radius,12px);color:var(--design-guide-muted,var(--muted-600));font-size:11px;text-align:center}
.research-sources-footer-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:26px;align-items:center;margin:18px 0 30px;padding:28px 30px;border-radius:var(--design-guide-final-radius,18px);background:linear-gradient(135deg,var(--design-guide-final-bg-start,var(--forest-950)),var(--design-guide-final-bg-end,#17483E));color:var(--design-guide-final-text,#D7E0DC)}
.research-sources-footer-card h2{margin:0;color:var(--design-guide-final-heading,#fff);font-family:var(--design-font-heading,"Cormorant Garamond",Georgia,serif);font-size:31px;font-weight:600;line-height:1.06}
.research-sources-footer-card>p{margin:0;font-size:11px;line-height:1.72}
.research-sources-footer-card .btn{justify-self:end;background:#FDFAF5;color:#0C231E;border-color:rgba(255,255,255,.32)}

@media(max-width:980px){.research-sources-hero{grid-template-columns:1fr}.research-sources-principle{max-width:680px}.research-source-grid{grid-template-columns:1fr}.research-attribution-banner{grid-template-columns:1fr}.research-category-nav{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.research-sources-footer-card{grid-template-columns:1fr}.research-sources-footer-card .btn{justify-self:start}}
@media(max-width:640px){.research-sources-shell{width:min(100% - 18px,var(--design-guide-page-max-width,1320px));padding-top:16px}.research-sources-hero h1{font-size:48px}.research-source-category{padding:22px 18px}.research-category-head h2{font-size:29px}.research-category-nav{grid-template-columns:1fr}.research-sources-footer-card{padding:24px 20px}.guide-research-cta{align-items:flex-start;flex-direction:column}}

/* =========================================================
   Al-Rajab Micro-Tonal Interval System · Guide
   ========================================================= */
.guide-interval-system-section{overflow:visible}
.guide-interval-principle{
  display:grid;gap:7px;margin:18px 0 22px;padding:17px 19px;border:1px solid var(--sage-500);border-radius:14px;background:color-mix(in srgb,var(--sage-200) 46%,var(--control-surface));
}
.guide-interval-principle strong{color:var(--heading-color);font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;font-weight:650;line-height:1.25}
.guide-interval-grid-block{display:grid;gap:14px;margin:0 0 22px}
.guide-interval-grid-block>div:first-child p{max-width:900px;margin:6px 0 0;color:var(--muted-600);font-size:11px;line-height:1.72}
.guide-interval-value-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.guide-interval-value-row>div{display:grid;gap:3px;justify-items:center;padding:14px 8px;border:1px solid var(--border-300);border-radius:12px;background:var(--control-surface)}
.guide-interval-value-row strong{color:var(--forest-800);font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;font-weight:650}
.guide-interval-value-row span{color:var(--ink-900);font-size:9px;font-weight:750;text-align:center}
.guide-interval-value-row small{color:var(--muted-600);font-size:9px}
.guide-interval-family-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0}
.guide-interval-family-card{min-width:0;padding:18px;border:1px solid var(--border-300);border-radius:15px;background:var(--control-surface)}
.guide-interval-family-head{margin-bottom:12px}
.guide-interval-family-head h3{margin:5px 0 0;color:var(--heading-color);font-family:"Cormorant Garamond",Georgia,serif;font-size:25px;font-weight:650;line-height:1.1}
.guide-interval-ladder{display:grid;gap:5px}
.guide-interval-ladder>div{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px;min-height:32px;padding:5px 8px;border-radius:8px}
.guide-interval-ladder>div:nth-child(odd){background:color-mix(in srgb,var(--sand-100) 58%,transparent)}
.guide-interval-ladder>div.is-reference{background:color-mix(in srgb,var(--sage-200) 70%,var(--control-surface));outline:1px solid color-mix(in srgb,var(--sage-500) 68%,transparent)}
.guide-interval-ladder span{color:var(--muted-600);font-size:9px;font-weight:800;font-variant-numeric:tabular-nums}
.guide-interval-ladder strong{min-width:0;color:var(--ink-900);font-size:11px;font-weight:750}
.guide-interval-direction-card{margin:22px 0}
.guide-interval-algorithm{margin-top:24px}
.guide-interval-algorithm-head h3{margin:5px 0 12px;color:var(--heading-color);font-family:"Cormorant Garamond",Georgia,serif;font-size:27px;font-weight:650}
.guide-interval-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.guide-interval-calculator{margin-top:26px;padding:20px;border:1px solid var(--border-300);border-radius:16px;background:color-mix(in srgb,var(--control-surface) 94%,var(--sage-200))}
.guide-interval-calculator>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.guide-interval-calculator>header h3{margin:5px 0 4px;color:var(--heading-color);font-family:"Cormorant Garamond",Georgia,serif;font-size:29px;font-weight:650;line-height:1.05}
.guide-interval-calculator>header p{max-width:690px;margin:0;color:var(--muted-600);font-size:11px;line-height:1.65}
.guide-interval-engine-badge{flex:0 0 auto;padding:6px 9px;border:1px solid var(--sage-500);border-radius:999px;background:var(--sage-200);color:var(--forest-800);font-size:9px;font-weight:850;letter-spacing:.04em;white-space:nowrap}
.guide-interval-control-grid{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:12px;align-items:end}
.guide-interval-note-control{display:grid;grid-template-columns:.72fr 1.45fr .72fr;gap:8px;min-width:0;margin:0;padding:12px;border:1px solid var(--border-300);border-radius:12px;background:var(--surface-solid)}
.guide-interval-note-control legend{padding:0 5px;color:var(--forest-800);font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.guide-interval-note-control label,.guide-interval-direction-control{display:grid;gap:5px;min-width:0;color:var(--muted-600);font-size:8px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.guide-interval-note-control select,.guide-interval-direction-control select{width:100%;height:38px;min-width:0;padding:0 28px 0 9px;border:1px solid var(--border-300);border-radius:8px;background:var(--control-surface);color:var(--ink-900);font:700 11px/1 "Montserrat",system-ui,sans-serif}
.guide-interval-direction-control{padding-bottom:12px}
.guide-interval-result{display:grid;gap:14px;margin-top:16px;padding:18px;border:1px solid color-mix(in srgb,var(--sage-500) 70%,var(--border-300));border-radius:14px;background:var(--surface-solid)}
.guide-interval-result-main{display:grid;gap:3px}
.guide-interval-result-main>span{color:var(--teal-700);font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.guide-interval-result-main>strong{color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:34px;font-weight:650;line-height:1}
.guide-interval-result-main>small{color:var(--muted-600);font-size:10px;font-weight:650}
.guide-interval-result-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.guide-interval-result-stats>div{display:grid;gap:3px;padding:10px;border-radius:10px;background:var(--sand-100)}
.guide-interval-result-stats span{color:var(--muted-600);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.guide-interval-result-stats strong{color:var(--ink-900);font-size:13px;font-weight:800}
.guide-interval-result>p{margin:0;padding-top:10px;border-top:1px solid var(--border-300);color:var(--muted-600);font-size:10px;line-height:1.55}
.guide-interval-result.is-unsupported{border-color:var(--gold-600)}
.guide-interval-result.has-error{opacity:.58}
.guide-interval-error{margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--key-quarter);border-radius:8px;background:color-mix(in srgb,var(--key-quarter) 8%,var(--surface-solid));color:var(--ink-900);font-size:10px;font-weight:650;line-height:1.55}
.guide-interval-examples{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}
.guide-interval-examples>span{margin-right:2px;color:var(--muted-600);font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.guide-interval-examples button{min-height:32px;padding:5px 9px;border:1px solid var(--border-300);border-radius:999px;background:var(--control-surface);color:var(--forest-800);font:750 9px/1.2 "Montserrat",system-ui,sans-serif;cursor:pointer}
.guide-interval-examples button:hover{border-color:var(--sage-500);background:var(--sage-200)}
.guide-interval-acknowledgement{margin-top:22px}
.guide-interval-guardrail{margin-top:14px}
html[data-theme="dark"] .guide-interval-principle{background:color-mix(in srgb,var(--sage-200) 10%,var(--control-surface))}
html[data-theme="dark"] .guide-interval-value-row>div,html[data-theme="dark"] .guide-interval-family-card,html[data-theme="dark"] .guide-interval-note-control,html[data-theme="dark"] .guide-interval-result{background:var(--control-surface)}
html[data-theme="dark"] .guide-interval-ladder>div:nth-child(odd),html[data-theme="dark"] .guide-interval-result-stats>div{background:color-mix(in srgb,var(--sand-100) 9%,var(--control-surface))}
html[data-theme="dark"] .guide-interval-ladder>div.is-reference{background:color-mix(in srgb,var(--sage-200) 14%,var(--control-surface))}

@media(max-width:900px){
  .guide-interval-family-grid{grid-template-columns:1fr}
  .guide-interval-control-grid{grid-template-columns:1fr}
  .guide-interval-direction-control{padding:0}
  .guide-interval-result-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .guide-interval-value-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-interval-steps{grid-template-columns:1fr}
  .guide-interval-calculator{padding:15px}
  .guide-interval-calculator>header{display:grid}
  .guide-interval-engine-badge{justify-self:start}
  .guide-interval-note-control{grid-template-columns:1fr}
  .guide-interval-note-control select,.guide-interval-direction-control select{min-height:44px;font-size:16px}
  .guide-interval-result-main>strong{font-size:29px}
  .guide-interval-result-stats{grid-template-columns:1fr 1fr}
  .guide-interval-examples button{min-height:40px}
}

/* v11.2 Interval Training */
.practice-interval-analysis-card{grid-column:1/-1}

/* =========================================================
   Practice Construction System · v11.3
   ========================================================= */
.practice-construction-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.practice-construction-task{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:14px;padding:18px 24px;border-bottom:1px solid var(--border-300)}
.practice-construction-brief,.practice-construction-guide{padding:16px;border:1px solid var(--border-300);border-radius:12px;background:var(--card-50)}
.practice-construction-brief h3,.practice-construction-guide h3,.practice-construction-name-area h3{margin:0;color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;font-weight:650}
.practice-construction-task-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:12px}
.practice-construction-task-grid>div{min-width:0;padding:8px 0;border-bottom:1px solid var(--border-300)}
.practice-construction-task-grid span,.practice-construction-task-grid strong,.practice-construction-task-grid small{display:block}
.practice-construction-task-grid span{color:var(--muted-600);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.practice-construction-task-grid strong{margin-top:4px;color:var(--forest-950);font-size:11px;line-height:1.45}
.practice-construction-task-grid small{margin-top:3px;color:var(--muted-600);font-size:8px;line-height:1.45}
.practice-construction-guide{border-color:rgba(160,189,181,.72);background:rgba(221,225,217,.34)}
.practice-construction-guide.is-challenge{background:var(--card-50);border-color:var(--border-300)}
.practice-construction-guide-copy>p:last-child{margin:7px 0 0;color:var(--muted-600);font-size:9.5px;line-height:1.6}
.practice-construction-steps{display:grid;grid-template-columns:repeat(var(--construction-step-count,4),minmax(0,1fr));gap:7px;margin-top:14px}
.practice-construction-steps span{min-height:48px;display:flex;align-items:center;padding:9px;border:1px solid var(--border-300);border-radius:9px;background:var(--surface-solid);color:var(--muted-600);font-size:8.5px;font-weight:750;line-height:1.35}
.practice-construction-steps span.is-current{border-color:var(--forest-800);background:var(--sage-200);color:var(--forest-950)}
.practice-construction-board{padding:18px 24px 2px;border-bottom:1px solid var(--border-300)}
.practice-construction-actions{display:flex;gap:7px}
.practice-construction-degree-grid{display:grid;grid-template-columns:repeat(var(--construction-degree-count,8),minmax(0,1fr));gap:7px}
.practice-construction-degree{min-width:0;min-height:78px;padding:8px 5px;border:1px solid var(--border-300);border-radius:11px;background:var(--surface-solid);color:var(--forest-950);text-align:center;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.practice-construction-degree:hover:not(:disabled){border-color:var(--sage-500);background:var(--sage-200)}
.practice-construction-degree.is-active{border-color:var(--forest-800);box-shadow:0 0 0 3px rgba(160,189,181,.24)}
.practice-construction-degree.is-locked{background:var(--sand-100);cursor:default}
.practice-construction-degree>span,.practice-construction-degree>strong,.practice-construction-degree>small{display:block}
.practice-construction-degree>span{color:var(--teal-700);font-size:8px;font-weight:850;letter-spacing:.08em}
.practice-construction-degree>strong{margin-top:8px;font-family:"Cormorant Garamond",Georgia,serif;font-size:25px;font-weight:700;line-height:1;color:var(--forest-950)}
.practice-construction-degree>small{margin-top:7px;color:var(--muted-600);font-size:8px}
.practice-construction-entry{display:grid;grid-template-columns:minmax(110px,.52fr) minmax(0,1.9fr) minmax(100px,.48fr);gap:14px;align-items:center;margin-top:12px;padding:12px;border:1px solid var(--border-300);border-radius:11px;background:var(--card-50)}
.practice-construction-entry>div:first-child strong,.practice-construction-preview strong{display:block;color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:700}
.practice-construction-accidentals{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.practice-construction-accidentals button{min-height:32px;padding:0 9px;border:1px solid var(--border-300);border-radius:8px;background:var(--surface-solid);color:var(--heading-color);font-size:8.5px;font-weight:750;cursor:pointer}
.practice-construction-accidentals button:hover:not(:disabled),.practice-construction-accidentals button.is-active{border-color:var(--forest-800);background:var(--sage-200);color:var(--forest-950)}
.practice-construction-preview{text-align:right}
.practice-construction-keyboard{padding:18px 0 2px;margin-top:16px;border-top:1px solid var(--border-300)}
.practice-construction-name-area{padding:18px 0 20px;margin-top:16px;border-top:1px solid var(--border-300)}
.practice-construction-name-area h3{margin-bottom:10px}
.practice-construction-analysis-card{grid-column:1/-1}

html[data-theme="dark"] .practice-construction-brief,
html[data-theme="dark"] .practice-construction-guide,
html[data-theme="dark"] .practice-construction-entry,
html[data-theme="dark"] .practice-construction-degree{
  background:var(--surface-solid);
}
html[data-theme="dark"] .practice-construction-guide{border-color:var(--sage-500)}
html[data-theme="dark"] .practice-construction-degree.is-locked{background:var(--sand-100)}
html[data-theme="dark"] .practice-construction-brief h3,
html[data-theme="dark"] .practice-construction-guide h3,
html[data-theme="dark"] .practice-construction-name-area h3,
html[data-theme="dark"] .practice-construction-degree>strong,
html[data-theme="dark"] .practice-construction-entry>div:first-child strong,
html[data-theme="dark"] .practice-construction-preview strong{color:var(--heading-color)}

@media(max-width:900px){
  .practice-construction-task{grid-template-columns:1fr}
  .practice-construction-degree-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .practice-construction-entry{grid-template-columns:1fr}
  .practice-construction-preview{text-align:left}
}
@media(max-width:760px){
  .practice-construction-grid{grid-template-columns:1fr}
  .practice-construction-task,.practice-construction-board{padding-left:14px;padding-right:14px}
  .practice-construction-task-grid{grid-template-columns:1fr}
  .practice-construction-steps{grid-template-columns:1fr 1fr}
  .practice-construction-degree-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .practice-construction-actions{width:100%;margin-top:8px}
  .practice-construction-actions .btn{flex:1}
}

/* =========================================================
   Practice readability + Construction feedback · v11.3.1
   ========================================================= */
/* Back navigation is intentionally larger throughout Practice. */
.practice-back-button{
  font-size:14px;
}

/* Practice-card actions are primary entry points and must remain readable. */
#start-recognize-maqam,
#start-recognize-jins,
#start-interval-training,
#open-construction,
#start-build-maqam,
#start-build-jins{
  font-size:calc(var(--design-button-font-size) + 4px);
}

/* Feedback / analysis text is raised by about 4px for practical readability. */
.practice-explanation-card>span,
.practice-brom-heading>span{
  font-size:12px;
}
.practice-explanation-card>strong{
  font-size:19px;
}
.practice-brom-heading small{
  font-size:11.5px;
}
.practice-brom-row{
  grid-template-columns:170px 1fr;
  font-size:14px;
}

/* Guided steps are progress/navigation controls, not decorative blocks. */
.practice-construction-steps button{
  min-height:48px;
  display:flex;
  align-items:center;
  width:100%;
  padding:9px;
  border:1px solid var(--border-300);
  border-radius:9px;
  background:var(--surface-solid);
  color:var(--muted-600);
  font:750 8.5px/1.35 "Montserrat",system-ui,sans-serif;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;
}
.practice-construction-steps button:hover{
  border-color:var(--sage-500);
}
.practice-construction-steps button.is-current{
  border-color:var(--forest-800);
  background:var(--sage-200);
  color:var(--forest-950);
  box-shadow:inset 0 0 0 1px var(--forest-800);
}
.practice-construction-steps button.is-done{
  border-color:var(--sage-500);
  background:color-mix(in srgb,var(--sage-200) 58%,var(--surface-solid));
  color:var(--forest-800);
}
.practice-construction-steps button.is-done::after{
  content:"✓";
  margin-left:auto;
  font-size:12px;
  font-weight:900;
}

/* Use the project's Bravura/SMuFL quarter-flat and quarter-sharp glyphs. */
.practice-construction-accidentals button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.practice-construction-accidental-symbol{
  min-width:14px;
  font-size:16px;
  line-height:1;
}
.practice-construction-accidental-symbol.is-smufl{
  font-family:"Bravura Text","Bravura",serif;
  font-size:22px;
}
.practice-construction-degree>strong,
.practice-construction-preview strong{
  font-family:"Cormorant Garamond","Bravura Text","Bravura",Georgia,serif;
}
.practice-construction-analysis-card .practice-brom-row strong{
  font-family:"Montserrat","Bravura Text","Bravura",system-ui,sans-serif;
}

/* Component-level validation: only the wrong construction degree turns red. */
.practice-construction-degree.is-wrong,
.practice-construction-degree.is-wrong:disabled{
  border-color:var(--quarter-terracotta,#C4624F);
  background:color-mix(in srgb,#C4624F 10%,var(--surface-solid));
  box-shadow:0 0 0 2px color-mix(in srgb,#C4624F 24%,transparent);
  opacity:1;
}
.practice-construction-degree.is-wrong>span,
.practice-construction-degree.is-wrong>strong,
.practice-construction-degree.is-wrong>small{
  color:#C4624F;
}

html[data-theme="dark"] .practice-construction-steps button.is-done{
  background:color-mix(in srgb,var(--sage-200) 18%,var(--surface-solid));
}
html[data-theme="dark"] .practice-construction-degree.is-wrong,
html[data-theme="dark"] .practice-construction-degree.is-wrong:disabled{
  background:color-mix(in srgb,#C4624F 16%,var(--surface-solid));
}

@media(max-width:640px){
  .practice-brom-row{grid-template-columns:1fr;gap:3px}
  .practice-construction-steps button{min-height:52px;font-size:10px}
}

/* =========================================================
   Construction UX refinements · v11.4
   ========================================================= */
/* Construction Brief: +2px over the v11.3.1 values. */
.practice-construction-brief .practice-kicker{font-size:11px}
.practice-construction-brief h3{font-size:25px}
.practice-construction-task-grid span{font-size:10px}
.practice-construction-task-grid strong{font-size:13px}
.practice-construction-task-grid small{font-size:10px}

/* Guided copy and step cards: +2px for practical readability. */
.practice-construction-guide .practice-kicker{font-size:11px}
.practice-construction-guide h3{font-size:25px}
.practice-construction-guide-copy>p:last-child{font-size:11.5px}
.practice-construction-steps button{font-size:10.5px}

/* Wrong construction notes use the same pulse language as changed descending notes on Maqamat.
   The note stays terracotta while two soft rings pulse outward around only that wrong degree. */
#practice-staff-mount .vf-stavenote.is-construction-wrong-note .vf-notehead path,
#practice-staff-mount .vf-stavenote.is-construction-wrong-note path.vf-notehead,
#practice-staff-mount g[class*="stavenote"].is-construction-wrong-note .vf-notehead path,
#practice-staff-mount g[class*="stavenote"].is-construction-wrong-note path.vf-notehead,
#practice-staff-mount .vf-stavenote.is-construction-wrong-note [class*="notehead"] path,
#practice-staff-mount g[class*="stavenote"].is-construction-wrong-note [class*="notehead"] path{
  fill:#C4624F!important;
}

/* Keep the construction feedback as the original bare notehead.
   Never colour or stroke VexFlow stem/flag geometry for a wrong scale degree. */
#practice-staff-mount .vf-stavenote.is-construction-wrong-note .vf-stem path,
#practice-staff-mount .vf-stavenote.is-construction-wrong-note [class*="stem"] path,
#practice-staff-mount g[class*="stavenote"].is-construction-wrong-note .vf-stem path,
#practice-staff-mount g[class*="stavenote"].is-construction-wrong-note [class*="stem"] path,
#practice-staff-mount .vf-stavenote.is-construction-wrong-note .vf-flag path,
#practice-staff-mount g[class*="stavenote"].is-construction-wrong-note .vf-flag path{
  stroke:inherit!important;
}
#practice-staff-mount .practice-construction-staff-ripple{
  fill:none;
  stroke:var(--key-quarter,#C4624F);
  stroke-width:1.5;
  opacity:.74;
  vector-effect:non-scaling-stroke;
  pointer-events:none;
  transform-box:fill-box;
  transform-origin:center;
  animation:maqam-diff-wave 1.55s ease-out infinite;
}
#practice-staff-mount .practice-construction-staff-ripple.wave-2{
  animation-delay:.72s;
}
@media (prefers-reduced-motion:reduce){
  #practice-staff-mount .vf-stavenote.is-construction-wrong-note path,
  #practice-staff-mount g[class*="stavenote"].is-construction-wrong-note path,
  #practice-staff-mount .vf-stavenote.is-construction-wrong-note text,
  #practice-staff-mount g[class*="stavenote"].is-construction-wrong-note text,
  #practice-staff-mount .practice-construction-staff-ripple{animation:none}
  #practice-staff-mount .practice-construction-staff-ripple{display:none}
}
@media(max-width:640px){
  .practice-construction-steps button{font-size:12px}
}
/* =========================================================
   Practice typography + Maqamat-style wrong-note pulse · v11.4.1
   ========================================================= */
/* Requested value weights: labels remain unchanged. */
#practice-pattern-card>strong{font-weight:600}
#practice-brom-card .practice-brom-row strong{font-weight:600}
.practice-construction-analysis-card .practice-brom-row strong{font-weight:650}

/* Result explanation sentence, e.g. "You selected Maqam ...", +2px. */
#practice-result-copy{font-size:12.5px}


/* v12.4 — BRoM Structure Visualization */
.white-key.is-structure-selected{fill:var(--sage-200)}
.black-key.is-structure-selected{fill:var(--kb-black-fill);stroke:#C4624F;stroke-width:2.4px}
.white-key.is-structure-selected.is-playing{fill:var(--gold-200)}
.black-key.is-structure-selected.is-playing{fill:var(--teal-700)}
.piano-xray-key.is-structure-selected{fill:rgba(160,189,181,.72);stroke:var(--forest-800);stroke-width:1.4}
.piano-xray-key.is-structure-selected.is-playing{fill:var(--kb-xray-playing-fill)}
.maqam-vf-note.is-structure-selected .playback-glow-circle{opacity:.58;fill:rgba(160,189,181,.26);stroke:var(--teal-700);stroke-width:1.6}
.maqam-vf-note.is-structure-selected .vf-notehead path,.maqam-vf-note.is-structure-selected path.vf-notehead{fill:var(--teal-700)!important}
.maqam-vf-note.is-structure-selected.is-playing .vf-notehead path,.maqam-vf-note.is-structure-selected.is-playing path.vf-notehead{fill:var(--key-quarter)!important}
#structure-summary{gap:0}
.structure-row-selectable{width:100%;margin:0;border-right:0;border-bottom:0;border-left:0;background:transparent;font:inherit;text-align:inherit;cursor:pointer;transition:background .14s ease,border-color .14s ease,box-shadow .14s ease}
.structure-row-selectable:hover{background:rgba(160,189,181,.12)}
.structure-row-selectable:focus-visible{outline:2px solid var(--teal-700);outline-offset:-2px;border-radius:7px}
.structure-row-selectable.is-selected{background:var(--sage-200);box-shadow:inset 3px 0 0 var(--teal-700)}
.structure-row-selectable.is-selected span,.structure-row-selectable.is-selected strong{color:var(--forest-950)}
.structure-scope-note{display:grid;gap:4px;margin:5px 0 2px;padding:10px 11px;border:1px solid var(--border-300);border-radius:8px;background:var(--card-50)}
.structure-scope-note strong{color:var(--heading-color);font-size:10px}
.structure-scope-note span{color:var(--muted-600);font-size:9px;line-height:1.5}
.structure-explanation{margin:8px 0 0;padding:10px 0 0;border-top:1px solid var(--sand-100);color:var(--muted-600);font-size:9px;line-height:1.6}
.structure-actions{display:flex;gap:7px;flex-wrap:wrap;padding:10px 0 2px}
.structure-actions .btn{flex:1 1 110px;min-width:0}
.structure-actions .btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.structure-attribution{margin-top:7px;padding-top:8px;border-top:1px solid var(--sand-100);color:var(--muted-600);font-size:8px;font-weight:700;line-height:1.45}
.brom-description p{margin:0 0 var(--design-scale-info-explanation-bottom-gap,8px);color:var(--muted-600);font-size:var(--design-scale-info-explanation-size,10px);line-height:var(--design-scale-info-explanation-line-height,1.65)}
.brom-description small{color:var(--muted-600);font-size:var(--design-scale-info-attribution-size,8px);font-weight:var(--design-scale-info-attribution-weight,700)}
html[data-theme="dark"] .structure-row-selectable.is-selected{background:#29483F;box-shadow:inset 3px 0 0 #A0BDB5}
html[data-theme="dark"] .structure-row-selectable.is-selected span,html[data-theme="dark"] .structure-row-selectable.is-selected strong{color:#F1F6F3}
html[data-theme="dark"] .structure-scope-note{background:var(--surface-solid)}
html[data-theme="dark"] .white-key.is-structure-selected{fill:#DDE1D9}
html[data-theme="dark"] .black-key.is-structure-selected{fill:var(--kb-black-fill);stroke:#C4624F;stroke-width:2.4px}
@media(max-width:640px){.structure-actions{display:grid;grid-template-columns:1fr 1fr}.structure-row strong{max-width:58%}.structure-explanation{font-size:9.5px}}

/* Maqam Academy v12.6 — BRoM Structure Training */
.practice-structure-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.practice-structure-mode-settings{grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);align-items:center}
.practice-structure-mode-copy{display:grid;gap:3px;align-content:center}
.practice-structure-mode-copy strong{color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;line-height:1}
.practice-structure-mode-copy span{color:var(--muted-600);font-size:11.5px;line-height:1.55}
.practice-structure-attribution{margin:16px 0 0;color:var(--muted-600);font-size:10px;font-weight:700;letter-spacing:.02em;text-align:right}
.practice-structure-task{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:15px 24px;border-bottom:1px solid var(--border-300);background:rgba(221,225,217,.18)}
.practice-structure-context-main{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.practice-structure-context-main>div{padding:10px 12px;border:1px solid var(--border-300);border-radius:10px;background:var(--surface-solid)}
.practice-structure-context-main span,.practice-structure-context-main strong{display:block}
.practice-structure-context-main strong{margin-top:3px;color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;line-height:1.12}
.practice-structure-source{display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--teal-700);font-size:10px;font-weight:750}
.practice-structure-source small{color:var(--muted-600);font-size:9px;font-weight:650;text-align:right}
.practice-structure-keyboard-section{padding:16px 24px 4px;border-bottom:1px solid var(--border-300)}
.practice-structure-guided-head,.practice-structure-challenge-intro{display:grid;gap:4px;grid-column:1/-1;margin-bottom:12px;padding:12px 14px;border:1px solid var(--border-300);border-radius:10px;background:var(--card-50)}
.practice-structure-guided-head strong,.practice-structure-challenge-intro strong{color:var(--forest-950);font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;line-height:1.2}
.practice-structure-guided-head span,.practice-structure-challenge-intro span{color:var(--muted-600);font-size:10.5px;line-height:1.5}
.practice-structure-choice-grid{grid-column:1/-1}
.practice-structure-choice-grid.is-compact{grid-template-columns:repeat(2,minmax(0,1fr))}
.practice-structure-check span::before{border-radius:3px}
.practice-structure-check input:checked+span::before{content:"✓";display:flex;align-items:center;justify-content:center;color:var(--surface-solid);font-size:10px;font-weight:900;box-shadow:none}
.practice-structure-step-feedback{grid-column:1/-1;margin-top:10px;padding:10px 12px;border:1px solid var(--sage-500);border-radius:9px;background:rgba(160,189,181,.2);color:var(--forest-950);font-size:11px;font-weight:700;line-height:1.45}
.practice-structure-step-feedback.is-wrong{border-color:#C4624F;background:rgba(196,98,79,.1);color:var(--heading-color)}
.practice-structure-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;grid-column:1/-1}
.practice-structure-field{min-width:0;display:grid;gap:6px;padding:12px;border:1px solid var(--border-300);border-radius:10px;background:var(--card-50)}
.practice-structure-field>span,.practice-structure-field>legend{color:var(--muted-600);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.practice-structure-field select{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--border-300);border-radius:8px;background:var(--surface-solid);color:var(--heading-color);font:700 12px/1.25 Montserrat,Arial,sans-serif}
.practice-structure-field select:focus-visible{outline:3px solid rgba(160,189,181,.28);outline-offset:2px;border-color:var(--forest-800)}
.practice-structure-field-wide{grid-column:1/-1;margin:0}
.practice-structure-field-wide>legend{padding:0 4px}
.practice-structure-field .practice-choice-grid{margin-top:2px}
.practice-structure-field.is-wrong{border-color:#C4624F;background:rgba(196,98,79,.07)}
.practice-structure-field.is-wrong>span,.practice-structure-field.is-wrong>legend{color:#C4624F}
.practice-structure-field.is-wrong select{border-color:#C4624F;box-shadow:0 0 0 2px rgba(196,98,79,.08)}
.practice-structure-field-feedback{display:block;grid-column:1/-1;margin-top:5px;color:#C4624F;font-size:9.5px;font-weight:750;line-height:1.5;text-transform:none;letter-spacing:0}
.practice-structure-choice-grid.has-error{padding:5px;border:1px solid rgba(196,98,79,.42);border-radius:11px;background:rgba(196,98,79,.04)}
html[data-theme="dark"] .practice-structure-task{background:rgba(221,225,217,.06)}
html[data-theme="dark"] .practice-structure-context-main>div,
html[data-theme="dark"] .practice-structure-guided-head,
html[data-theme="dark"] .practice-structure-challenge-intro,
html[data-theme="dark"] .practice-structure-field{background:var(--card-50)}
html[data-theme="dark"] .practice-structure-context-main strong,
html[data-theme="dark"] .practice-structure-mode-copy strong,
html[data-theme="dark"] .practice-structure-guided-head strong,
html[data-theme="dark"] .practice-structure-challenge-intro strong{color:var(--heading-color)}
@media(max-width:900px){
  .practice-structure-mode-settings{grid-template-columns:1fr}
  .practice-structure-form{grid-template-columns:1fr}
  .practice-structure-field-wide{grid-column:auto}
}
@media(max-width:640px){
  .practice-structure-grid{grid-template-columns:1fr}
  .practice-structure-task,.practice-structure-keyboard-section{padding-left:14px;padding-right:14px}
  .practice-structure-context-main{grid-template-columns:1fr}
  .practice-structure-source{display:grid;gap:4px}
  .practice-structure-source small{text-align:left}
  .practice-structure-choice-grid.is-compact{grid-template-columns:1fr}
  .practice-structure-attribution{text-align:left}
}

/* v13.7 — paid catalog states: published entitlement vs Coming Soon */
.jins-card-coming-soon,.jins-card-entitlement-locked{cursor:default;overflow:hidden}
.jins-card-coming-soon .jins-card-front,.jins-card-entitlement-locked .jins-card-front{min-height:240px;display:flex;flex-direction:column}
.jins-access-state-card{justify-content:flex-start}
.jins-access-state-badge{display:inline-flex;align-items:center;align-self:flex-start;margin:24px 0 10px;padding:7px 10px;border-radius:999px;font:800 10px/1 Montserrat,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.jins-access-state-badge.is-coming-soon{background:rgba(95,105,102,.10);color:#5F6966;border:1px solid rgba(95,105,102,.16)}
.jins-access-state-badge.is-locked{background:rgba(196,98,79,.08);color:#8d493d;border:1px solid rgba(196,98,79,.34)}
.jins-access-state-copy{max-width:36rem;margin:0;color:var(--muted,#5F6966);font-size:13px;line-height:1.55}
.jins-card-entitlement-locked{border-color:rgba(196,98,79,.22)}
.jins-card-coming-soon{opacity:.82}
html[data-theme="dark"] .jins-access-state-badge.is-coming-soon{background:rgba(221,225,217,.08);color:#cbd3ce;border-color:rgba(221,225,217,.14)}
html[data-theme="dark"] .jins-access-state-badge.is-locked{background:rgba(196,98,79,.12);color:#e0a69b;border-color:rgba(196,98,79,.38)}


/* Practice v14.3 — grouped training-area architecture. */
.practice-module-stack{
  display:grid;
  gap:24px;
  margin-top:24px;
}
.practice-module{
  padding:24px;
  overflow:hidden;
}
.practice-module--basic{border-top:3px solid var(--sage-500)}
.practice-module--advanced{border-top:3px solid var(--gold-600)}
.practice-module--building{border-top:3px solid var(--quarter-terracotta,#C4624F)}
.practice-module--structure{border-top:3px solid var(--teal-700)}
.practice-module-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
}
.practice-module-heading{min-width:0;max-width:760px}
.practice-module-heading h3{
  margin:0;
  color:var(--forest-950);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:32px;
  font-weight:650;
  line-height:1.05;
}
.practice-module-description{
  max-width:690px;
  margin:8px 0 0;
  color:var(--muted-600);
  font-size:11.5px;
  line-height:1.65;
}
.practice-module-meta{
  margin:9px 0 0;
  color:var(--teal-700);
  font-size:10.925px;
  font-weight:800;
  letter-spacing:.04em;
}
.practice-module-attribution{
  margin:9px 0 0;
  color:var(--forest-800);
  font-size:9.5px;
  font-weight:800;
  line-height:1.5;
}
.practice-module-access{
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  flex-direction:column;
  gap:9px;
  flex:0 0 auto;
}
.practice-module-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border:1px solid var(--border-300);
  border-radius:999px;
  background:var(--sand-100);
  color:var(--forest-800);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.practice-module .practice-exercise-grid{margin-top:18px}
.practice-module .practice-structure-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.practice-building-subhead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  padding-bottom:9px;
  border-bottom:1px solid var(--border-300);
}
.practice-building-subhead strong{
  color:var(--forest-800);
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.practice-building-subhead span{
  color:var(--muted-600);
  font-size:10px;
}
.practice-building-explore{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:18px;
  padding:15px 16px;
  border:1px dashed var(--border-300);
  border-radius:12px;
  background:var(--card-50);
}
.practice-building-explore-copy{min-width:0}
.practice-building-explore-copy>span{
  display:block;
  color:var(--teal-700);
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.practice-building-explore-copy>strong{
  display:block;
  margin-top:3px;
  color:var(--forest-950);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:20px;
  line-height:1.05;
}
.practice-building-explore-copy>small{
  display:block;
  margin-top:4px;
  color:var(--muted-600);
  font-size:10px;
  line-height:1.45;
}
.practice-building-explore-badge{
  flex:0 0 auto;
  color:var(--forest-800);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}
html[data-theme="dark"] .practice-building-explore-copy>strong{color:var(--heading-color)}
.practice-module-settings{
  margin-top:18px;
  border:1px solid var(--border-300);
  border-radius:12px;
  background:var(--card-50);
  box-shadow:none;
}
.practice-module .practice-exercise-card{
  min-height:260px;
  background:var(--surface-solid);
}
html[data-theme="dark"] .practice-module-heading h3{color:var(--heading-color)}
html[data-theme="dark"] .practice-module-attribution{color:var(--sage-500)}
html[data-theme="dark"] .practice-module-badge{background:var(--sand-100);color:var(--heading-color)}

@media(max-width:1099px){
  .practice-module .practice-exercise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:699px){
  .practice-module-stack{gap:18px;margin-top:18px}
  .practice-module{padding:18px}
  .practice-module-head{display:grid;grid-template-columns:1fr;gap:14px}
  .practice-module-access{align-items:flex-start;width:100%}
  .practice-module-access .compact-btn{width:100%}
  .practice-module-badge{white-space:normal}
  .practice-module-heading h3{font-size:29px}
  .practice-module .practice-exercise-grid{grid-template-columns:1fr}
  .practice-building-subhead{align-items:flex-start;flex-direction:column;gap:4px}
  .practice-building-explore{align-items:flex-start;flex-direction:column}
  .practice-settings{grid-template-columns:1fr}
  .practice-setting-wide{grid-column:auto}
  .practice-module-settings{padding:14px}
}

/* Practice v14.4 — persistent completed-session progress summaries. */
.practice-card-progress{
  margin-top:auto;
  padding-top:12px;
  /* Reserve the upward button offset so Super Admin Y-position tuning cannot cover progress text. */
  margin-bottom:max(0px, calc(0px - var(--design-practice-start-button-y)));
  border-top:1px solid var(--border-300);
  color:var(--muted-600);
  font-size:9px;
  font-weight:750;
  line-height:1.5;
}
.practice-card-progress + .btn.wide{margin-top:calc(12px + var(--design-practice-start-button-gap))}
.practice-module-meta [data-practice-section-progress]{display:inline}
html[data-theme="dark"] .practice-card-progress{border-top-color:var(--border-300);color:var(--muted-600)}
@media(max-width:699px){
  .practice-card-progress{padding-top:10px;font-size:9.5px}
}

/* Practice v14.6 — multi-session checkpoints + access-aware Practice Progress. */
.practice-progress-card{
  margin-top:18px;
  padding:22px;
  border-color:var(--sage-500);
  background:linear-gradient(135deg,var(--surface-solid),var(--card-50));
}
.practice-progress-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:start;
}
.practice-progress-head h3{
  margin:2px 0 0;
  color:var(--forest-950);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:28px;
  font-weight:650;
  line-height:1.05;
}
.practice-progress-intro{
  max-width:760px;
  margin:7px 0 0;
  color:var(--muted-600);
  font-size:10px;
  font-weight:600;
  line-height:1.55;
}
.practice-progress-overall{
  min-width:92px;
  display:grid;
  justify-items:end;
  gap:2px;
}
.practice-progress-overall strong{
  color:var(--forest-950);
  font:750 28px/1 "Cormorant Garamond",Georgia,serif;
}
.practice-progress-overall span{
  color:var(--muted-600);
  font:800 8.5px/1.2 "Montserrat",sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.practice-progress-overall-track,
.practice-progress-section-track,
.practice-active-session-track{
  overflow:hidden;
  border-radius:999px;
  background:var(--sand-100);
}
.practice-progress-overall-track{
  height:8px;
  margin-top:14px;
}
.practice-progress-overall-track>span,
.practice-progress-section-track>span,
.practice-active-session-track>span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:var(--teal-700);
  transition:width .18s ease;
}
.practice-progress-sections{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.practice-progress-section-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 10px;
  align-items:center;
  padding:12px;
  border:1px solid var(--border-300);
  border-radius:11px;
  background:var(--surface-solid);
}
.practice-progress-section-copy{min-width:0;display:grid;gap:2px}
.practice-progress-section-copy strong{
  color:var(--heading-color);
  font-size:10px;
  font-weight:850;
}
.practice-progress-section-copy span{
  color:var(--muted-600);
  font-size:8.5px;
  font-weight:650;
  line-height:1.35;
}
.practice-progress-section-row>b{
  color:var(--forest-800);
  font-size:10px;
  font-weight:850;
}
.practice-progress-section-track{
  grid-column:1/-1;
  height:5px;
}
.practice-active-sessions{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border-300);
}
.practice-active-sessions-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
}
.practice-active-sessions-head strong{
  color:var(--forest-950);
  font:800 10.5px/1.3 "Montserrat",sans-serif;
}
.practice-active-sessions-head span{
  color:var(--muted-600);
  font-size:8.5px;
  font-weight:750;
}
.practice-active-session-list{display:grid;gap:8px}
.practice-active-session-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:11px 12px;
  border:1px solid var(--border-300);
  border-radius:10px;
  background:var(--surface-solid);
}
.practice-active-session-copy{min-width:0;display:grid;gap:3px}
.practice-active-session-copy>strong{
  color:var(--heading-color);
  font:800 11px/1.3 "Montserrat",sans-serif;
}
.practice-active-session-copy>span,
.practice-active-session-copy>small{
  color:var(--muted-600);
  font-size:8.5px;
  font-weight:650;
  line-height:1.4;
}
.practice-active-session-copy>small{color:var(--forest-800);font-weight:800}
.practice-active-session-track{height:5px;margin:4px 0 1px}
.practice-active-session-actions{
  display:grid;
  grid-template-columns:112px;
  gap:5px;
}
.practice-active-session-actions .btn{width:100%;min-height:34px;padding:7px 10px;font-size:9px}
.practice-active-session-discard{
  border:0;
  background:transparent;
  color:var(--muted-600);
  font:750 8.5px/1.2 "Montserrat",sans-serif;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.practice-active-session-discard:hover{color:var(--forest-950)}
.practice-active-session-empty{
  margin:0;
  color:var(--muted-600);
  font-size:9px;
  font-weight:650;
}
.practice-active-session-empty[hidden]{display:none!important}
.practice-exercise-card .btn.is-resume{box-shadow:0 0 0 2px rgba(21,83,71,.08)}
/* Reserve a secondary-action slot on every active exercise card. This keeps the
   primary Start/Resume button at the exact same Y-position whether a checkpoint exists or not. */
.practice-card-secondary-action{
  min-height:25px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  position:relative;
  top:var(--design-practice-start-button-y);
}
.practice-card-new-session{
  display:block;
  margin:6px auto 0;
  padding:3px 6px;
  border:0;
  background:transparent;
  color:var(--forest-800);
  font:800 9px/1.3 "Montserrat",sans-serif;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.practice-card-new-session:hover{color:var(--forest-950)}
html[data-theme="dark"] .practice-progress-head h3,
html[data-theme="dark"] .practice-progress-overall strong,
html[data-theme="dark"] .practice-active-sessions-head strong{color:var(--heading-color)}
html[data-theme="dark"] .practice-progress-overall-track,
html[data-theme="dark"] .practice-progress-section-track,
html[data-theme="dark"] .practice-active-session-track{background:var(--sand-100)}
@media(max-width:899px){
  .practice-progress-sections{grid-template-columns:1fr}
}
@media(max-width:699px){
  .practice-progress-card{padding:18px}
  .practice-progress-head{grid-template-columns:1fr;gap:10px}
  .practice-progress-overall{justify-items:start}
  .practice-progress-head h3{font-size:25px}
  .practice-progress-intro{font-size:10.5px}
  .practice-active-session-row{grid-template-columns:1fr;gap:10px}
  .practice-active-session-actions{grid-template-columns:1fr;width:100%}
  .practice-active-session-actions .btn{width:100%}
}

/* Practice v14.7 — full Super Admin Design → Practice bindings. */
.practice-shell{
  width:min(var(--design-practice-page-max-width),calc(100% - (var(--design-practice-page-side-gap) * 2)));
  padding:var(--design-practice-page-pad-top) 0 var(--design-practice-page-pad-bottom);
}
.practice-view{margin-top:var(--design-practice-view-top-gap)}
.practice-hero{
  gap:var(--design-practice-hero-gap);
  padding:var(--design-practice-hero-pad-y) var(--design-practice-hero-pad-x);
}
.practice-hero h1{font-size:clamp(42px,6vw,var(--design-practice-hero-title-size))}
.practice-hero p:last-child{
  margin-top:var(--design-practice-hero-copy-gap);
  font-size:var(--design-practice-hero-copy-size);
}
.practice-hero-mark{
  transform:translate(var(--design-practice-hero-icon-x),var(--design-practice-hero-icon-y)) rotate(var(--design-practice-hero-icon-rotation));
}
.practice-kicker{font-size:var(--design-practice-kicker-size)}
.practice-section-head{
  gap:var(--design-practice-home-head-gap);
  margin-bottom:var(--design-practice-home-head-bottom-gap);
}
.practice-section-head h2{font-size:var(--design-practice-home-title-size)}
.practice-section-head>p{font-size:var(--design-practice-home-copy-size)}

/* Session settings and the Structure Training mode selector. */
.practice-settings{
  gap:var(--design-practice-settings-gap);
  padding:var(--design-practice-settings-padding);
}
.practice-setting-label{
  margin-bottom:var(--design-practice-session-label-gap);
  font-size:var(--design-practice-session-label-size);
}
.practice-segmented{
  border-radius:var(--design-practice-segment-radius);
  padding:var(--design-practice-segment-padding);
}
.practice-segmented button{
  min-height:var(--design-practice-session-option-height);
  border-radius:var(--design-practice-segment-button-radius);
  font-size:var(--design-practice-session-option-size);
}

/* Practice Progress parent dashboard. */
.practice-progress-card{
  margin-top:var(--design-practice-progress-top-gap);
  padding:var(--design-practice-progress-padding);
}
.practice-progress-head{gap:var(--design-practice-progress-head-gap)}
.practice-progress-head h3{font-size:var(--design-practice-progress-title-size)}
.practice-progress-intro{
  margin-top:var(--design-practice-progress-intro-gap);
  font-size:var(--design-practice-progress-intro-size);
}
.practice-progress-overall strong{font-size:var(--design-practice-progress-overall-size)}
.practice-progress-overall span{font-size:var(--design-practice-progress-overall-label-size)}
.practice-progress-overall-track{
  height:var(--design-practice-progress-track-height);
  margin-top:var(--design-practice-progress-track-gap);
}
.practice-progress-sections{
  gap:var(--design-practice-progress-sections-gap);
  margin-top:var(--design-practice-progress-sections-top-gap);
}
.practice-progress-section-row{
  padding:var(--design-practice-progress-section-padding);
  border-radius:var(--design-practice-progress-section-radius);
}
.practice-progress-section-copy strong{font-size:var(--design-practice-progress-section-title-size)}
.practice-progress-section-copy span{font-size:var(--design-practice-progress-section-copy-size)}
.practice-progress-section-row>b{font-size:var(--design-practice-progress-section-percent-size)}
.practice-progress-section-track{height:var(--design-practice-progress-section-track-height)}

/* Active unfinished sessions. */
.practice-active-sessions{
  margin-top:var(--design-practice-active-top-gap);
  padding-top:var(--design-practice-active-pad-top);
}
.practice-active-sessions-head strong{font-size:var(--design-practice-active-header-size)}
.practice-active-sessions-head span{font-size:var(--design-practice-active-count-size)}
.practice-active-session-list{gap:var(--design-practice-active-list-gap)}
.practice-active-session-row{
  gap:var(--design-practice-active-row-gap);
  padding:var(--design-practice-active-row-pad-y) var(--design-practice-active-row-pad-x);
  border-radius:var(--design-practice-active-row-radius);
}
.practice-active-session-copy>strong{font-size:var(--design-practice-active-title-size)}
.practice-active-session-copy>span,
.practice-active-session-copy>small{font-size:var(--design-practice-active-meta-size)}
.practice-active-session-track{height:var(--design-practice-active-track-height)}
.practice-active-session-actions .btn{font-size:var(--design-practice-active-resume-size)}
.practice-active-session-discard{font-size:var(--design-practice-active-discard-size)}

/* Basic Practice, Advanced Practice and Structure Training parent modules. */
.practice-module-stack{
  gap:var(--design-practice-module-stack-gap);
  margin-top:var(--design-practice-module-stack-top-gap);
}
.practice-module{padding:var(--design-practice-module-padding)}
.practice-module--basic{border-top-width:var(--design-practice-module-accent-width)}
.practice-module--advanced{border-top-width:var(--design-practice-module-accent-width)}
.practice-module--building{border-top-width:var(--design-practice-module-accent-width)}
.practice-module--structure{border-top-width:var(--design-practice-module-accent-width)}
.practice-module-head{gap:var(--design-practice-module-head-gap)}
.practice-module-heading h3{font-size:var(--design-practice-module-title-size)}
.practice-module-description{
  margin-top:var(--design-practice-module-description-gap);
  font-size:var(--design-practice-module-description-size);
}
.practice-module-meta{
  margin-top:var(--design-practice-module-meta-gap);
  font-size:var(--design-practice-module-meta-size);
}
.practice-module-attribution{
  margin-top:var(--design-practice-module-attribution-gap);
  font-size:var(--design-practice-module-attribution-size);
}
.practice-module-access{gap:var(--design-practice-module-access-gap)}
.practice-module-badge{
  min-height:var(--design-practice-module-badge-height);
  padding:var(--design-practice-module-badge-pad-y) var(--design-practice-module-badge-pad-x);
  font-size:var(--design-practice-module-badge-size);
}
.practice-module .practice-exercise-grid{margin-top:var(--design-practice-module-exercise-top-gap)}
.practice-module-settings{
  margin-top:var(--design-practice-module-settings-top-gap);
  border-radius:var(--design-practice-module-settings-radius);
}

/* Exercise cards. */
.practice-exercise-grid{gap:var(--design-practice-card-grid-gap)}
.practice-module .practice-exercise-card{
  min-height:var(--design-practice-card-min-height);
  padding:var(--design-practice-card-padding);
}
.practice-card-status{
  margin-bottom:var(--design-practice-card-status-gap);
  font-size:var(--design-practice-card-status-size);
}
.practice-card-copy h3{
  font-size:var(--design-practice-card-title-size);
  margin-bottom:var(--design-practice-card-title-description-gap);
}
.practice-card-copy p{
  margin-bottom:var(--design-practice-card-copy-bottom-gap);
  font-size:var(--design-practice-card-copy-size);
}
.practice-card-progress{
  padding-top:var(--design-practice-card-progress-pad-top);
  font-size:var(--design-practice-card-progress-size);
}
.practice-card-progress + .btn.wide{
  margin-top:calc(var(--design-practice-card-progress-button-gap) + var(--design-practice-start-button-gap));
}
.practice-exercise-card > .btn.wide{
  padding-top:var(--design-practice-card-button-pad-y);
  padding-bottom:var(--design-practice-card-button-pad-y);
  font-size:var(--design-practice-card-button-size);
}
.practice-card-secondary-action{min-height:var(--design-practice-card-secondary-height)}
.practice-card-new-session{
  margin-top:var(--design-practice-card-secondary-gap);
  font-size:var(--design-practice-card-secondary-size);
}

/* Exercise question screen. */
.practice-exercise-toolbar{
  gap:var(--design-practice-toolbar-gap);
  margin-bottom:var(--design-practice-toolbar-bottom-gap);
}
.practice-back-button{font-size:var(--design-practice-back-size)}
.practice-progress-copy{font-size:var(--design-practice-toolbar-progress-size)}
.practice-progress-copy strong{font-size:var(--design-practice-toolbar-score-size)}
.practice-question-head{
  gap:var(--design-practice-question-head-gap);
  padding:var(--design-practice-question-head-pad-y) var(--design-practice-question-head-pad-x);
}
.practice-question-head h2{font-size:var(--design-practice-question-title-size)}
.practice-question-head>div>p:last-child{
  margin-top:var(--design-practice-question-prompt-gap);
  font-size:var(--design-practice-question-prompt-size);
}
.practice-direction-pill{
  min-height:var(--design-practice-direction-height);
  padding-left:var(--design-practice-direction-pad-x);
  padding-right:var(--design-practice-direction-pad-x);
  font-size:var(--design-practice-direction-size);
}
.practice-stimulus{padding:var(--design-practice-stimulus-pad-y) var(--design-practice-stimulus-pad-x)}
.practice-staff-mount{min-height:var(--design-practice-staff-min-height)}
.practice-audio-row{
  gap:var(--design-practice-audio-gap);
  margin-top:var(--design-practice-audio-top-gap);
}
.practice-instrument-control span{font-size:var(--design-practice-instrument-label-size)}
.practice-instrument-control select{
  height:var(--design-practice-instrument-height);
  font-size:var(--design-practice-instrument-size);
}

/* Answer area. */
.practice-answer-area{
  margin-top:var(--design-practice-answer-top-gap);
  padding:var(--design-practice-answer-pad-top) var(--design-practice-answer-pad-x) var(--design-practice-answer-pad-bottom);
}
.practice-answer-area legend{
  margin-bottom:var(--design-practice-answer-legend-gap);
  font-size:var(--design-practice-answer-legend-size);
}
.practice-choice-grid{gap:var(--design-practice-choice-grid-gap)}
.practice-choice span{
  min-height:var(--design-practice-choice-min-height);
  padding:var(--design-practice-choice-pad-y) var(--design-practice-choice-pad-x);
  border-radius:var(--design-practice-choice-radius);
  font-size:var(--design-practice-choice-font-size);
}
.practice-check-button{
  margin-top:var(--design-practice-check-button-gap);
  padding:var(--design-practice-check-button-pad-y) var(--design-practice-check-button-pad-x);
}

/* Correct / incorrect feedback and explanations. */
.practice-feedback{margin-top:var(--design-practice-feedback-top-gap)}
.practice-result-banner{
  gap:var(--design-practice-result-gap);
  padding:var(--design-practice-result-pad-y) var(--design-practice-result-pad-x);
}
.practice-result-banner h2{font-size:var(--design-practice-result-title-size)}
.practice-result-banner p:last-child{
  margin-top:var(--design-practice-result-copy-gap);
  font-size:var(--design-practice-result-copy-size);
}
.practice-explanation-grid{
  gap:var(--design-practice-explanation-gap);
  padding:var(--design-practice-explanation-pad-y) var(--design-practice-explanation-pad-x);
}
.practice-explanation-card{
  padding:var(--design-practice-explanation-card-padding);
  border-radius:var(--design-practice-explanation-card-radius);
}
.practice-explanation-card>span,
.practice-brom-heading>span{font-size:var(--design-practice-explanation-label-size)}
.practice-explanation-card>strong{font-size:var(--design-practice-explanation-value-size)}
.practice-brom-heading small{font-size:var(--design-practice-brom-badge-size)}
.practice-brom-row{
  grid-template-columns:var(--design-practice-brom-label-width) 1fr;
  font-size:var(--design-practice-brom-row-size);
}
.practice-keyboard-section{padding:4px var(--design-practice-keyboard-pad-x) var(--design-practice-keyboard-pad-bottom)}
.practice-next-row{padding:var(--design-practice-next-pad-y) var(--design-practice-next-pad-x)}

/* Completion screen. */
.practice-complete-card{
  max-width:var(--design-practice-complete-max-width);
  padding:var(--design-practice-complete-padding);
}
.practice-complete-card h2{font-size:var(--design-practice-complete-title-size)}
.practice-complete-card>p:not(.legal-eyebrow){font-size:var(--design-practice-complete-copy-size)}
.practice-final-score{margin:var(--design-practice-final-score-gap) 0}
.practice-final-score strong{font-size:var(--design-practice-final-percent-size)}
.practice-final-score span{font-size:var(--design-practice-final-label-size)}
.practice-complete-actions{gap:var(--design-practice-complete-actions-gap)}

@media(max-width:699px){
  .practice-shell{
    width:min(100% - 18px,var(--design-practice-page-max-width));
    padding-top:min(var(--design-practice-page-pad-top),18px);
  }
  .practice-hero{padding:min(var(--design-practice-hero-pad-y),24px) min(var(--design-practice-hero-pad-x),24px)}
  .practice-module-stack{
    gap:min(var(--design-practice-module-stack-gap),18px);
    margin-top:min(var(--design-practice-module-stack-top-gap),18px);
  }
  .practice-module{padding:min(var(--design-practice-module-padding),18px)}
  .practice-module-heading h3{font-size:min(var(--design-practice-module-title-size),29px)}
  .practice-module-settings{padding:min(var(--design-practice-settings-padding),14px)}
  .practice-progress-card{padding:min(var(--design-practice-progress-padding),18px)}
  .practice-progress-head h3{font-size:min(var(--design-practice-progress-title-size),25px)}
  .practice-question-head{
    padding:min(var(--design-practice-question-head-pad-y),18px) min(var(--design-practice-question-head-pad-x),18px);
  }
  .practice-question-head h2{font-size:min(var(--design-practice-question-title-size),29px)}
  .practice-stimulus{
    padding-left:min(var(--design-practice-stimulus-pad-x),14px);
    padding-right:min(var(--design-practice-stimulus-pad-x),14px);
  }
  .practice-answer-area{
    padding-left:min(var(--design-practice-answer-pad-x),14px);
    padding-right:min(var(--design-practice-answer-pad-x),14px);
  }
  .practice-result-banner{padding:min(var(--design-practice-result-pad-y),18px) min(var(--design-practice-result-pad-x),18px)}
  .practice-explanation-grid{padding:min(var(--design-practice-explanation-pad-y),12px) min(var(--design-practice-explanation-pad-x),12px)}
  .practice-complete-card{padding:min(var(--design-practice-complete-padding),26px) 18px}
}

/* v14.7 Structure Training mode text bindings. */
.practice-structure-mode-copy{gap:var(--design-practice-structure-mode-gap)}
.practice-structure-mode-copy strong{font-size:var(--design-practice-structure-mode-title-size)}
.practice-structure-mode-copy span{font-size:var(--design-practice-structure-mode-copy-size)}

/* =========================================================
   Design System · Practice complete controller coverage · v14.10
   Every distinct visible Practice state now has a Practice-tab binding.
   ========================================================= */
.practice-hero .legal-eyebrow{font-size:var(--design-practice-hero-eyebrow-size)}

.practice-assignment-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--design-practice-assignment-gap);
  padding:var(--design-practice-assignment-padding);
}
.practice-assignment-banner h2{font-size:var(--design-practice-assignment-title-size)}
.practice-assignment-banner>div>p:last-child{font-size:var(--design-practice-assignment-copy-size)}
.practice-assignment-banner>.btn{font-size:var(--design-practice-assignment-button-size)}

.practice-active-session-copy>.practice-active-session-status{font-size:var(--design-practice-active-status-size)}
.practice-active-session-empty{font-size:var(--design-practice-active-empty-size)}
.practice-active-session-actions .btn{padding-top:var(--design-practice-active-resume-pad-y);padding-bottom:var(--design-practice-active-resume-pad-y)}

.practice-module-access .compact-btn{
  padding-top:var(--design-practice-module-addon-button-pad-y);
  padding-bottom:var(--design-practice-module-addon-button-pad-y);
  font-size:var(--design-practice-module-addon-button-size);
}
[data-practice-section-progress].is-not-started{font-size:var(--design-practice-module-not-started-size)}
.practice-card-progress.is-not-started{font-size:var(--design-practice-card-not-started-size)}
.practice-card-unavailable{margin-top:var(--design-practice-card-unavailable-gap);font-size:var(--design-practice-card-unavailable-size)}
.practice-exercise-card.is-future>.btn.wide:disabled{
  padding-top:var(--design-practice-locked-button-pad-y);
  padding-bottom:var(--design-practice-locked-button-pad-y);
  border-color:var(--design-practice-locked-button-border);
  background:var(--design-practice-locked-button-bg);
  color:var(--design-practice-locked-button-text);
  font-size:var(--design-practice-locked-button-size);
  opacity:var(--design-practice-locked-button-opacity);
}

.practice-loading{font-size:var(--design-practice-loading-text-size)}
.practice-spinner{width:var(--design-practice-spinner-size);height:var(--design-practice-spinner-size)}
.practice-error{padding:var(--design-practice-error-padding);font-size:var(--design-practice-error-text-size)}
.practice-play-controls .btn,.practice-play-button{
  padding-top:var(--design-practice-play-button-pad-y);
  padding-bottom:var(--design-practice-play-button-pad-y);
  font-size:var(--design-practice-play-button-size);
}
.practice-section-head.compact h3{font-size:var(--design-practice-compact-heading-size)}
.practice-section-head.compact .compact-btn{font-size:var(--design-practice-midi-button-size)}
.practice-tempo-control .tempo-label{font-size:var(--design-practice-tempo-label-size)}
.practice-tempo-control .tempo-value{font-size:var(--design-practice-tempo-value-size)}
.practice-check-button{font-size:var(--design-practice-check-button-size)}

/* Construction Practice */
.practice-construction-task{
  gap:var(--design-practice-construction-task-gap);
  padding:var(--design-practice-construction-task-pad-y) var(--design-practice-construction-task-pad-x);
}
.practice-construction-brief,.practice-construction-guide{
  padding:var(--design-practice-construction-panel-padding);
  border-radius:var(--design-practice-construction-panel-radius);
}
.practice-construction-brief h3,.practice-construction-guide h3{font-size:var(--design-practice-construction-heading-size)}
.practice-construction-brief .practice-kicker,.practice-construction-guide .practice-kicker{font-size:var(--design-practice-construction-kicker-size)}
.practice-construction-task-grid span{font-size:var(--design-practice-construction-label-size)}
.practice-construction-task-grid strong{font-size:var(--design-practice-construction-value-size)}
.practice-construction-task-grid small{font-size:var(--design-practice-construction-help-size)}
.practice-construction-guide-copy>p:last-child{font-size:var(--design-practice-construction-guide-copy-size)}
.practice-construction-steps{gap:var(--design-practice-construction-steps-gap)}
.practice-construction-steps button{
  min-height:var(--design-practice-construction-step-height);
  border-radius:var(--design-practice-construction-step-radius);
  font-size:var(--design-practice-construction-step-size);
}
.practice-construction-board{padding:var(--design-practice-construction-board-pad-y) var(--design-practice-construction-board-pad-x) 2px}
.practice-construction-actions .btn{font-size:var(--design-practice-construction-action-size)}
.practice-construction-degree-grid{gap:var(--design-practice-construction-degree-gap)}
.practice-construction-degree{min-height:var(--design-practice-construction-degree-height);border-radius:var(--design-practice-construction-degree-radius)}
.practice-construction-degree>span{font-size:var(--design-practice-construction-degree-label-size)}
.practice-construction-degree>strong{font-size:var(--design-practice-construction-degree-note-size)}
.practice-construction-degree>small{font-size:var(--design-practice-construction-degree-help-size)}
.practice-construction-entry{
  gap:var(--design-practice-construction-entry-gap);
  padding:var(--design-practice-construction-entry-padding);
  border-radius:var(--design-practice-construction-entry-radius);
}
.practice-construction-entry>div:first-child strong,.practice-construction-preview strong{font-size:var(--design-practice-construction-current-note-size)}
.practice-construction-accidentals button{
  min-height:var(--design-practice-construction-accidental-height);
  border-radius:var(--design-practice-construction-accidental-radius);
  font-size:var(--design-practice-construction-accidental-size);
}
.practice-construction-accidental-symbol{font-size:var(--design-practice-construction-symbol-size)}
.practice-construction-accidental-symbol.is-smufl{font-size:var(--design-practice-construction-smufl-size)}
.practice-construction-name-area h3{font-size:var(--design-practice-construction-name-heading-size)}

/* Structure Training question internals */
.practice-structure-task{
  gap:var(--design-practice-structure-task-gap);
  padding:var(--design-practice-structure-task-pad-y) var(--design-practice-structure-task-pad-x);
}
.practice-structure-context-main{gap:var(--design-practice-structure-context-gap)}
.practice-structure-context-main>div{
  padding:var(--design-practice-structure-context-padding);
  border-radius:var(--design-practice-structure-context-radius);
}
.practice-structure-context-main span{font-size:var(--design-practice-structure-context-label-size)}
.practice-structure-context-main strong{font-size:var(--design-practice-structure-context-value-size)}
.practice-structure-source{font-size:var(--design-practice-structure-source-size)}
.practice-structure-source small{font-size:var(--design-practice-structure-source-note-size)}
.practice-structure-guided-head,.practice-structure-challenge-intro{
  padding:var(--design-practice-structure-intro-padding);
  border-radius:var(--design-practice-structure-intro-radius);
}
.practice-structure-guided-head strong,.practice-structure-challenge-intro strong{font-size:var(--design-practice-structure-intro-title-size)}
.practice-structure-guided-head span,.practice-structure-challenge-intro span{font-size:var(--design-practice-structure-intro-copy-size)}
.practice-structure-step-feedback{
  padding:var(--design-practice-structure-feedback-padding);
  font-size:var(--design-practice-structure-feedback-size);
}
.practice-structure-field{
  gap:var(--design-practice-structure-field-gap);
  padding:var(--design-practice-structure-field-padding);
  border-radius:var(--design-practice-structure-field-radius);
}
.practice-structure-field>span,.practice-structure-field>legend{font-size:var(--design-practice-structure-field-label-size)}
.practice-structure-field select{
  min-height:var(--design-practice-structure-select-height);
  border-radius:var(--design-practice-structure-select-radius);
  font-size:var(--design-practice-structure-select-size);
}
.practice-structure-field-feedback{font-size:var(--design-practice-structure-field-feedback-size)}
.practice-structure-keyboard-section{padding:var(--design-practice-structure-keyboard-pad-y) var(--design-practice-structure-keyboard-pad-x) 4px}

.practice-next-row .btn{font-size:var(--design-practice-next-button-size)}

/* Completion and leave-session states */
.practice-complete-card .legal-eyebrow{font-size:var(--design-practice-complete-eyebrow-size)}
.practice-complete-verdict{font-size:var(--design-practice-complete-verdict-size)}
.practice-complete-actions .btn{
  padding-top:var(--design-practice-complete-button-pad-y);
  padding-bottom:var(--design-practice-complete-button-pad-y);
  font-size:var(--design-practice-complete-button-size);
}
.practice-exit-dialog{
  width:min(var(--design-practice-exit-dialog-width),100%);
  padding:var(--design-practice-exit-dialog-padding);
}
.practice-exit-dialog h2{font-size:var(--design-practice-exit-title-size)}
.practice-exit-dialog>p:not(.practice-kicker){font-size:var(--design-practice-exit-copy-size)}
.practice-exit-actions{gap:var(--design-practice-exit-actions-gap)}
.practice-exit-actions .btn{font-size:var(--design-practice-exit-button-size)}

@media(max-width:640px){
  .practice-assignment-banner{align-items:stretch;flex-direction:column}
  .practice-exit-dialog{padding:var(--design-practice-exit-dialog-padding)}
  .practice-construction-task,.practice-construction-board{padding-left:min(var(--design-practice-construction-task-pad-x),14px);padding-right:min(var(--design-practice-construction-task-pad-x),14px)}
  .practice-structure-task,.practice-structure-keyboard-section{padding-left:min(var(--design-practice-structure-task-pad-x),14px);padding-right:min(var(--design-practice-structure-task-pad-x),14px)}
}

/* Practice v14.11 — mastery/coverage dashboard and checkpoints embedded in exercise cards. */
.practice-progress-metrics{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:var(--design-practice-progress-metrics-gap);
  flex-wrap:wrap;
}
.practice-progress-coverage strong{font-size:var(--design-practice-progress-coverage-size)}
.practice-progress-coverage span{font-size:var(--design-practice-progress-coverage-label-size)}
.practice-progress-track-group{margin-top:var(--design-practice-progress-track-gap)}
.practice-progress-track-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 5px;
  color:var(--muted-600);
  font-size:var(--design-practice-progress-track-label-size);
  font-weight:800;
}
.practice-progress-track-label strong{
  color:var(--forest-800);
  font-size:var(--design-practice-active-count-size);
  font-weight:850;
}
.practice-progress-track-group .practice-progress-overall-track{margin-top:0}
.practice-progress-coverage-track{
  height:var(--design-practice-progress-coverage-track-height);
  margin-top:0!important;
  margin-bottom:0;
}
.practice-progress-track-group .practice-progress-track-label:not(:first-child){margin-top:var(--design-practice-progress-coverage-gap)}
.practice-progress-coverage-track>span,
.practice-progress-section-track.is-coverage>span{background:var(--gold-600)}
.practice-progress-section-row{
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 12px;
}
.practice-progress-section-metrics{
  display:flex;
  align-items:flex-start;
  gap:12px;
  justify-content:flex-end;
}
.practice-progress-section-metrics>b{
  display:grid;
  justify-items:end;
  gap:1px;
  color:var(--forest-800);
  font-size:var(--design-practice-progress-section-percent-size);
  font-weight:850;
}
.practice-progress-section-metrics i{
  color:var(--muted-600);
  font-size:var(--design-practice-progress-section-metric-label-size);
  font-style:normal;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.practice-progress-section-track{grid-column:1/-1}
.practice-progress-section-track.is-coverage{margin-top:-3px}

.practice-card-checkpoint[hidden]{display:none!important}
.practice-card-checkpoint{
  display:grid;
  gap:var(--design-practice-active-row-gap);
  margin-top:auto;
  margin-bottom:var(--design-practice-active-pad-top);
  padding:var(--design-practice-active-row-pad-y) 0 0;
}
.practice-exercise-card.has-checkpoint .practice-card-copy p{display:none}
.practice-exercise-card.has-checkpoint .practice-card-copy{margin-bottom:0}
.practice-card-checkpoint-meta{
  color:var(--muted-600);
  font-size:var(--design-practice-active-meta-size);
  font-weight:750;
  line-height:1.4;
}
.practice-card-checkpoint-track{
  height:var(--design-practice-active-track-height);
  overflow:hidden;
  border-radius:999px;
  background:var(--sand-100);
}
.practice-card-checkpoint-track>span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:var(--teal-700);
  transition:width .18s ease;
}
.practice-card-checkpoint-status{
  color:var(--forest-800);
  font-size:var(--design-practice-active-status-size);
  font-weight:850;
  line-height:1.4;
}
.practice-exercise-card.has-checkpoint .practice-card-progress{margin-top:0}
.practice-exercise-card .btn.is-resume{
  padding-top:var(--design-practice-active-resume-pad-y);
  padding-bottom:var(--design-practice-active-resume-pad-y);
  font-size:var(--design-practice-active-resume-size);
}
.practice-exercise-card.has-checkpoint .practice-card-secondary-action{
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.practice-card-discard{
  display:block;
  margin:var(--design-practice-card-secondary-gap) 0 0;
  padding:3px 6px;
  border:0;
  background:transparent;
  color:var(--muted-600);
  font:750 var(--design-practice-active-discard-size)/1.3 "Montserrat",sans-serif;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.practice-card-discard:hover{color:var(--forest-950)}
html[data-theme="dark"] .practice-progress-track-label strong,
html[data-theme="dark"] .practice-card-checkpoint-status{color:var(--sage-500)}
html[data-theme="dark"] .practice-card-checkpoint-track{background:var(--sand-100)}
@media(max-width:699px){
  .practice-progress-metrics{justify-content:flex-start}
  .practice-progress-track-label{align-items:flex-start;flex-direction:column;gap:3px}
  .practice-progress-section-metrics{justify-content:flex-start}
  .practice-progress-section-row{grid-template-columns:1fr}
  .practice-progress-section-metrics{grid-column:1/-1}
}

/* v17.3 — Building Lab · Maqam Block Builder */
.practice-ajnas-builder{display:grid;gap:18px;margin:18px 0 6px}
.practice-ajnas-builder-brief,
.practice-ajnas-builder-workbench,
.practice-ajnas-builder-bank-wrap{
  border:1px solid var(--border-300);
  border-radius:var(--design-practice-maqam-card-radius,20px);
  background:var(--surface-solid);
  padding:20px;
  box-shadow:0 8px 24px rgba(12,35,30,.035)
}
.practice-ajnas-builder-brief{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:22px;align-items:center}
.practice-ajnas-builder-brief h3{margin:2px 0 5px;font-size:30px;color:var(--heading-color)}
.practice-ajnas-builder-brief>div>p:last-child{margin:0;color:var(--muted-600);font-size:13px;line-height:1.55}
.practice-ajnas-builder-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.practice-ajnas-builder-facts>span{min-height:74px;padding:11px 12px;border:1px solid var(--border-300);border-radius:12px;background:var(--card-50);display:flex;flex-direction:column;justify-content:center;gap:2px}
.practice-ajnas-builder-facts small{color:var(--muted-600);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.practice-ajnas-builder-facts strong{color:var(--forest-800);font-size:13px}
.practice-ajnas-builder-facts em{font-style:normal;color:var(--muted-600);font-size:10px}

.practice-ajnas-builder-workbench{background:linear-gradient(180deg,var(--card-50),var(--surface-solid));transition:border-color .18s ease,box-shadow .18s ease}
.practice-ajnas-builder-workbench.is-correct{border-color:var(--teal-700);box-shadow:0 0 0 3px rgba(21,83,71,.10)}
.practice-ajnas-builder-workbench.is-wrong{border-color:#C4624F;box-shadow:0 0 0 3px rgba(196,98,79,.11)}
.practice-ajnas-builder-slots{display:grid;grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr);gap:14px;align-items:stretch;margin-top:10px}
.practice-ajnas-builder-slot{min-height:145px;border:2px dashed var(--sage-500);border-radius:16px;background:rgba(221,225,217,.22);padding:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;outline:none;transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease}
.practice-ajnas-builder-slot:hover,.practice-ajnas-builder-slot:focus-visible,.practice-ajnas-builder-slot.is-drag-over{border-color:var(--teal-700);background:rgba(160,189,181,.16);box-shadow:0 0 0 3px rgba(160,189,181,.18)}
.practice-ajnas-builder-slot.is-drag-over{transform:translateY(-3px)}
.practice-ajnas-builder-slot.is-filled{border-style:solid;border-color:var(--forest-800);background:linear-gradient(180deg,rgba(160,189,181,.24),rgba(221,225,217,.18))}
.practice-ajnas-builder-slot-label{font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-700)}
.practice-ajnas-builder-slot strong{font-family:"Cormorant Garamond",Georgia,serif;font-size:25px;line-height:1.05;color:var(--heading-color)}
.practice-ajnas-builder-slot small{font-size:10px;line-height:1.4;color:var(--muted-600)}
.practice-ajnas-builder-slot em{font-size:9px;font-style:normal;color:var(--teal-700);font-weight:750;margin-top:4px}
.practice-ajnas-builder-join{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--forest-800);gap:4px}
.practice-ajnas-builder-join span{width:38px;height:38px;border-radius:999px;background:var(--sage-200);display:grid;place-items:center;font-size:25px;font-weight:500}
.practice-ajnas-builder-join small{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-600)}
.practice-ajnas-builder-help{margin:12px 0 0;text-align:center;font-size:11px;color:var(--muted-600)}

.practice-ajnas-builder-bank-wrap .practice-section-head{margin-bottom:12px}
.practice-ajnas-builder-bank{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.practice-ajnas-block{
  --ajnas-block-bg:#DDE1D9;
  --ajnas-block-edge:#A0BDB5;
  position:relative;min-height:116px;padding:22px 12px 12px;border:1px solid var(--ajnas-block-edge);border-radius:10px;background:var(--ajnas-block-bg);color:var(--forest-950);text-align:left;display:flex;flex-direction:column;gap:2px;box-shadow:inset 0 -4px 0 rgba(12,35,30,.08),0 6px 15px rgba(12,35,30,.055);transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease
}
.practice-ajnas-block:nth-child(6n+1){--ajnas-block-bg:#DDE1D9;--ajnas-block-edge:#A0BDB5}
.practice-ajnas-block:nth-child(6n+2){--ajnas-block-bg:#FAE7B7;--ajnas-block-edge:#D39A4A}
.practice-ajnas-block:nth-child(6n+3){--ajnas-block-bg:#F1DDD6;--ajnas-block-edge:#C4624F}
.practice-ajnas-block:nth-child(6n+4){--ajnas-block-bg:#D9E8E3;--ajnas-block-edge:#155347}
.practice-ajnas-block:nth-child(6n+5){--ajnas-block-bg:#E7DDE4;--ajnas-block-edge:#76566D}
.practice-ajnas-block:nth-child(6n+6){--ajnas-block-bg:#F1EDE6;--ajnas-block-edge:#B9A98E}
.practice-ajnas-block::before,.practice-ajnas-block::after{content:"";position:absolute;top:-7px;width:28px;height:12px;border:1px solid var(--ajnas-block-edge);border-bottom:0;border-radius:7px 7px 2px 2px;background:var(--ajnas-block-bg)}
.practice-ajnas-block::before{left:18px}.practice-ajnas-block::after{right:18px}
.practice-ajnas-block:hover:not(:disabled),.practice-ajnas-block:focus-visible:not(:disabled){transform:translateY(-4px);box-shadow:inset 0 -4px 0 rgba(12,35,30,.08),0 12px 22px rgba(12,35,30,.12);outline:none}
.practice-ajnas-block.is-dragging{opacity:.42;transform:scale(.97)}
.practice-ajnas-block.is-used{opacity:.34;box-shadow:none}
.practice-ajnas-block>span{font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.practice-ajnas-block>strong{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;line-height:1;color:inherit}
.practice-ajnas-block>small{font-size:9px;font-weight:750;opacity:.72}
.practice-ajnas-block>em{margin-top:auto;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.02em}
html[data-theme="dark"] .practice-ajnas-block{color:#0C231E}
html[data-theme="dark"] .practice-ajnas-builder-slot.is-filled{background:rgba(160,189,181,.13)}

@media(max-width:920px){
  .practice-ajnas-builder-brief{grid-template-columns:1fr}
  .practice-ajnas-builder-bank{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:680px){
  .practice-ajnas-builder-brief,.practice-ajnas-builder-workbench,.practice-ajnas-builder-bank-wrap{padding:15px}
  .practice-ajnas-builder-facts{grid-template-columns:1fr 1fr}
  .practice-ajnas-builder-slots{grid-template-columns:1fr;gap:9px}
  .practice-ajnas-builder-join{min-height:42px;flex-direction:row}.practice-ajnas-builder-join span{width:32px;height:32px;font-size:20px}.practice-ajnas-builder-join small{font-size:8px}
  .practice-ajnas-builder-slot{min-height:118px}
  .practice-ajnas-builder-bank{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:420px){
  .practice-ajnas-builder-facts{grid-template-columns:1fr}
  .practice-ajnas-builder-bank{grid-template-columns:1fr}
  .practice-ajnas-block{min-height:104px}
}
@media(prefers-reduced-motion:reduce){
  .practice-ajnas-builder-slot,.practice-ajnas-block{transition:none}
}
.practice-ajnas-block-ghost{position:fixed!important;z-index:1000!important;width:min(220px,44vw)!important;transform:translate(-50%,-55%) rotate(-2deg)!important;pointer-events:none!important;opacity:.92!important;box-shadow:0 18px 42px rgba(12,35,30,.22)!important}

/* v17.4 — Building Lab · Free Building Lab */
.practice-building-explore.is-ready{border-color:var(--sage-500);background:linear-gradient(180deg,var(--card-50),var(--surface-solid))}
.practice-building-explore.is-locked{opacity:.72}
.free-lab-toolbar{align-items:center}
.free-lab-toolbar-copy{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:2px}
.free-lab-toolbar-copy span{font-size:9px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-700)}
.free-lab-toolbar-copy strong{font-size:12px;color:var(--muted-600)}
.free-lab-shell{display:grid;gap:20px;padding:24px}
.free-lab-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
.free-lab-head h2{margin:2px 0 7px;color:var(--heading-color);font-size:38px}
.free-lab-head p:last-child{margin:0;max-width:820px;color:var(--muted-600);font-size:13px;line-height:1.65}
.free-lab-live-status{display:inline-flex;align-items:center;min-height:34px;padding:7px 11px;border:1px solid var(--border-300);border-radius:999px;background:var(--sand-100);color:var(--muted-600);font-size:10px;font-weight:850;letter-spacing:.04em;white-space:nowrap}
.free-lab-live-status[data-state="ready"],.free-lab-live-status[data-state="existing"]{background:rgba(160,189,181,.22);border-color:var(--sage-500);color:var(--forest-800)}
.free-lab-live-status[data-state="invalid"]{background:rgba(196,98,79,.10);border-color:rgba(196,98,79,.45);color:#8E4A3D}
.free-lab-live-status[data-state="no_match"]{background:rgba(211,154,74,.13);border-color:rgba(211,154,74,.45);color:#805D27}
.free-lab-controls{display:grid;grid-template-columns:minmax(150px,.55fr) minmax(300px,1fr) auto;gap:14px;align-items:end;padding:16px;border:1px solid var(--border-300);border-radius:16px;background:var(--card-50)}
.free-lab-controls label,.free-lab-count-control{display:flex;flex-direction:column;gap:7px}
.free-lab-controls label>span,.free-lab-count-control>span{font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-600)}
.free-lab-controls select{height:38px;border:1px solid var(--border-300);border-radius:10px;background:var(--surface-solid);color:var(--ink-900);padding:0 10px;font:750 13px/1 "Montserrat",sans-serif}
.free-lab-count-control>div,.free-lab-utility-actions,.free-lab-play-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.free-lab-count-control strong{min-width:74px;text-align:center;color:var(--forest-800);font-size:12px}
.free-lab-workbench{display:grid;gap:15px;padding:18px;border:1px solid var(--border-300);border-radius:18px;background:linear-gradient(180deg,var(--card-50),var(--surface-solid))}
.free-lab-degree-grid{display:grid;grid-template-columns:repeat(var(--free-lab-degree-count,8),minmax(76px,1fr));gap:8px;overflow-x:auto;padding:2px 0 6px}
.free-lab-degree{min-width:76px;min-height:90px;border:1px solid var(--border-300);border-radius:12px;background:var(--surface-solid);color:var(--ink-900);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease,background .15s ease}
.free-lab-degree:hover,.free-lab-degree:focus-visible{border-color:var(--sage-500);outline:none;transform:translateY(-2px)}
.free-lab-degree.is-active{border-color:var(--teal-700);box-shadow:0 0 0 3px rgba(21,83,71,.10);background:rgba(160,189,181,.13)}
.free-lab-degree.is-set strong{color:var(--forest-800)}
.free-lab-degree>span{font-size:9px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-600)}
.free-lab-degree>strong{font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;line-height:1;white-space:nowrap;display:inline-flex;align-items:baseline;justify-content:center}
.free-lab-degree>strong>span,.free-lab-current-note strong>span{display:inline-block;line-height:1;vertical-align:baseline}
.free-lab-degree>strong>span:not(.is-smufl),.free-lab-current-note strong>span:not(.is-smufl){font-family:"Montserrat","Segoe UI Symbol","Apple Symbols","Noto Music",sans-serif;font-size:1em}
.free-lab-degree>strong .is-smufl,.free-lab-current-note .is-smufl{font-family:"Bravura Text","Bravura",serif;font-size:calc(1.12em + 2px);line-height:1}
.free-lab-degree>small{font-size:8px;color:var(--muted-600)}
.free-lab-entry-panel{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.8fr) minmax(140px,.55fr);gap:14px;align-items:center;padding-top:14px;border-top:1px solid var(--border-300)}
.free-lab-active-note,.free-lab-current-note{display:flex;flex-direction:column;gap:4px}
.free-lab-active-note strong,.free-lab-current-note strong{color:var(--forest-800);font-size:14px}
.free-lab-active-note small{color:var(--muted-600);font-size:9px;line-height:1.45}
.free-lab-accidentals{display:grid;grid-template-columns:repeat(9,minmax(48px,1fr));gap:6px}
.free-lab-accidentals button{min-height:62px;border:1px solid var(--border-300);border-radius:10px;background:var(--surface-solid);color:var(--ink-900);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.free-lab-accidentals button:hover,.free-lab-accidentals button:focus-visible,.free-lab-accidentals button.is-active{border-color:var(--teal-700);background:rgba(160,189,181,.15);outline:none}
.free-lab-accidental-symbol{font-size:22px;line-height:1;height:32px;display:flex;align-items:center;justify-content:center}
.free-lab-accidental-symbol.is-smufl{font-family:"Bravura Text","Bravura",serif;font-size:28px}
.free-lab-accidentals small{font-size:8px;line-height:1.15;color:var(--muted-600);text-align:center}
.free-lab-staff-section,.free-lab-keyboard-section{padding:18px;border:1px solid var(--border-300);border-radius:18px;background:var(--surface-solid)}
.free-lab-staff-mount{min-height:190px}
.free-lab-analysis-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.free-lab-analysis-card{padding:18px;border:1px solid var(--border-300);border-radius:16px;background:var(--card-50);display:flex;flex-direction:column;gap:8px}
.free-lab-analysis-card>span{font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-700)}
.free-lab-analysis-card>strong{font-size:13px;line-height:1.6;color:var(--forest-800)}
.free-lab-analysis-card>small,.free-lab-analysis-card>p{margin:0;color:var(--muted-600);font-size:10px;line-height:1.55}
.free-lab-database-card .btn{align-self:flex-start;margin-top:auto}
.free-lab-result{padding:20px;border:1px solid var(--border-300);border-radius:18px;background:var(--surface-solid)}
.free-lab-result[data-state="existing"]{border-color:var(--sage-500);background:rgba(160,189,181,.10)}
.free-lab-result[data-state="no_match"]{border-color:rgba(211,154,74,.55);background:rgba(250,231,183,.18)}
.free-lab-result[data-state="invalid"]{border-color:rgba(196,98,79,.48);background:rgba(196,98,79,.07)}
.free-lab-result-head>span{font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-700)}
.free-lab-result-head h3{margin:3px 0 6px;color:var(--heading-color);font-size:25px}
.free-lab-result-head p{margin:0;color:var(--muted-600);font-size:12px;line-height:1.6}
.free-lab-result-body{display:grid;gap:9px;margin-top:14px}
.free-lab-match{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid var(--border-300);border-radius:12px;background:var(--surface-solid)}
.free-lab-match>div{display:flex;flex-direction:column;gap:2px}
.free-lab-match span{font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-600)}
.free-lab-match strong{color:var(--forest-800);font-size:14px}
.free-lab-match small,.free-lab-result-foot{color:var(--muted-600);font-size:9px;line-height:1.45}
.free-lab-result-foot{margin:0}
html[data-theme="dark"] .free-lab-live-status[data-state="ready"],html[data-theme="dark"] .free-lab-live-status[data-state="existing"]{color:var(--sage-500)}
html[data-theme="dark"] .free-lab-count-control strong,html[data-theme="dark"] .free-lab-degree.is-set strong,html[data-theme="dark"] .free-lab-active-note strong,html[data-theme="dark"] .free-lab-current-note strong,html[data-theme="dark"] .free-lab-analysis-card>strong,html[data-theme="dark"] .free-lab-match strong{color:var(--sage-500)}
@media(max-width:980px){
  .free-lab-controls{grid-template-columns:1fr 1fr}.free-lab-utility-actions{grid-column:1/-1}
  .free-lab-entry-panel{grid-template-columns:1fr}.free-lab-accidentals{grid-template-columns:repeat(5,minmax(54px,1fr))}
}
@media(max-width:700px){
  .free-lab-shell{padding:16px}.free-lab-head{grid-template-columns:1fr}.free-lab-live-status{justify-self:start}
  .free-lab-controls{grid-template-columns:1fr}.free-lab-utility-actions{grid-column:auto}
  .free-lab-analysis-grid{grid-template-columns:1fr}.free-lab-toolbar-copy{text-align:left;margin-left:0}
  .free-lab-accidentals{grid-template-columns:repeat(3,minmax(64px,1fr))}
  .free-lab-match{align-items:flex-start;flex-direction:column}
}

.free-lab-head h2[tabindex="-1"]:focus{outline:none}
.free-lab-keyboard-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#free-lab-xray.is-on{background:var(--forest-950);border-color:var(--forest-950);color:#fff}
html[data-theme="dark"] #free-lab-xray.is-on{background:var(--sage-200);border-color:var(--sage-200);color:var(--forest-950)}
.free-lab-structure-result{padding:20px;border:1px solid var(--sage-500);border-radius:18px;background:rgba(160,189,181,.08)}
.free-lab-structure-head>span{display:block;color:var(--teal-700);font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.free-lab-structure-head h3{margin:3px 0 6px;color:var(--heading-color);font-size:25px}
.free-lab-structure-head p{margin:0;color:var(--muted-600);font-size:11px;line-height:1.6}
.free-lab-structure-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.free-lab-structure-grid>div{display:flex;flex-direction:column;gap:3px;padding:12px;border:1px solid var(--border-300);border-radius:12px;background:var(--surface-solid)}
.free-lab-structure-grid>div.is-wide{grid-column:1/-1}
.free-lab-structure-grid span{color:var(--muted-600);font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.free-lab-structure-grid strong{color:var(--forest-800);font-size:12px;line-height:1.55}
.free-lab-structure-grid small{color:var(--muted-600);font-size:9px;line-height:1.45}
html[data-theme="dark"] .free-lab-structure-grid strong{color:var(--sage-500)}
@media(max-width:760px){.free-lab-structure-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.free-lab-degree{transition:none}}

/* ===== v17.5 — Free Building Lab independent card + Discovery Candidate ===== */
.practice-free-lab-home-card{
  display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:24px;align-items:center;
  margin-top:28px;padding:26px 28px;border-color:rgba(211,154,74,.42);
  background:linear-gradient(135deg,rgba(250,231,183,.20),var(--surface-solid) 44%,rgba(160,189,181,.10));
  position:relative;overflow:hidden
}
.practice-free-lab-home-card::after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(211,154,74,.18);border-radius:50%;right:-76px;top:-92px;pointer-events:none}
.practice-free-lab-home-card.is-locked{opacity:.72}
.practice-free-lab-home-art{width:84px;height:84px;border-radius:24px;display:grid;place-items:center;background:rgba(160,189,181,.18);border:1px solid var(--border-300)}
.practice-free-lab-home-art img{width:58px;height:58px;object-fit:contain}
.practice-free-lab-home-copy{min-width:0}
.practice-free-lab-home-copy h3{margin:3px 0 7px;color:var(--heading-color);font-size:32px}
.practice-free-lab-home-copy>p:not(.practice-kicker){margin:0;max-width:860px;color:var(--muted-600);font-size:13px;line-height:1.65}
.practice-free-lab-access-note{display:inline-flex;margin-top:12px;padding:6px 10px;border:1px solid rgba(211,154,74,.42);border-radius:999px;background:rgba(250,231,183,.26);color:var(--forest-800);font-size:9px;font-weight:850;letter-spacing:.04em}
.practice-free-lab-home-action{display:flex;flex-direction:column;align-items:flex-end;gap:7px;min-width:190px}
.practice-free-lab-home-action small{max-width:220px;color:var(--muted-600);font-size:9px;line-height:1.4;text-align:right}
.free-lab-discovery-panel{display:grid;grid-template-columns:74px minmax(0,1fr);gap:18px;padding:22px;border:1px solid rgba(211,154,74,.58);border-radius:18px;background:linear-gradient(135deg,rgba(250,231,183,.34),var(--surface-solid));overflow:hidden;position:relative}
.free-lab-discovery-panel::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--gold-600)}
.free-lab-discovery-trophy{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;background:rgba(211,154,74,.16);color:var(--gold-600);transform-origin:center}
.free-lab-discovery-trophy svg{width:42px;height:42px;overflow:visible}
.free-lab-discovery-panel:not([hidden]) .free-lab-discovery-trophy{animation:freeLabTrophyPop .78s cubic-bezier(.2,.8,.2,1)}
@keyframes freeLabTrophyPop{0%{opacity:0;transform:scale(.5) rotate(-10deg)}60%{opacity:1;transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.free-lab-discovery-copy h3{margin:3px 0 7px;color:var(--heading-color);font-size:27px}
.free-lab-discovery-copy>p:last-child{margin:0;color:var(--muted-600);font-size:12px;line-height:1.62}
.free-lab-discovery-form{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:12px;padding-top:16px;border-top:1px solid rgba(211,154,74,.34)}
.free-lab-discovery-form label{display:flex;flex-direction:column;gap:7px;color:var(--forest-800);font-size:10px;font-weight:800}
.free-lab-discovery-form label>span{display:flex;gap:6px;align-items:baseline}
.free-lab-discovery-form label>span small{color:var(--muted-600);font-size:8px;font-weight:700}
.free-lab-discovery-form label:nth-child(2),.free-lab-discovery-form label:nth-child(3){grid-column:2}
.free-lab-discovery-form input,.free-lab-discovery-form textarea{width:100%;border:1px solid var(--border-300);border-radius:11px;background:var(--surface-solid);color:var(--ink-900);padding:10px 11px;font:650 12px/1.5 "Montserrat",sans-serif;resize:vertical}
.free-lab-discovery-form input:focus,.free-lab-discovery-form textarea:focus{outline:2px solid rgba(21,83,71,.16);border-color:var(--teal-700)}
.free-lab-discovery-actions{grid-column:1/-1;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.free-lab-discovery-actions small{color:var(--muted-600);font-size:9px;line-height:1.45}
.free-lab-discovery-submitted{grid-column:1/-1;padding:14px 16px;border-radius:12px;border:1px solid var(--sage-500);background:rgba(160,189,181,.13)}
.free-lab-discovery-submitted[data-state="error"]{border-color:rgba(196,98,79,.48);background:rgba(196,98,79,.07)}
.free-lab-discovery-submitted strong{display:block;color:var(--forest-800);font-size:12px}
.free-lab-discovery-submitted p{margin:5px 0 7px;color:var(--muted-600);font-size:10px;line-height:1.55}
.account-discovery-card{margin-top:24px}
.account-discovery-table td small{display:block;margin-top:3px}
.discovery-status{white-space:nowrap}
.discovery-status--submitted{background:rgba(211,154,74,.17);color:#805D27}
.discovery-status--under_review{background:rgba(160,189,181,.20);color:var(--forest-800)}
.discovery-status--needs_information{background:rgba(250,231,183,.38);color:#805D27}
.discovery-status--duplicate,.discovery-status--rejected{background:rgba(196,98,79,.10);color:#8E4A3D}
.discovery-status--approved{background:rgba(160,189,181,.28);color:var(--forest-800)}
html[data-theme="dark"] .practice-free-lab-access-note,html[data-theme="dark"] .free-lab-discovery-form label,html[data-theme="dark"] .free-lab-discovery-submitted strong{color:var(--sage-500)}
@media(max-width:900px){.practice-free-lab-home-card{grid-template-columns:74px minmax(0,1fr)}.practice-free-lab-home-action{grid-column:1/-1;align-items:flex-start}.practice-free-lab-home-action small{text-align:left}.free-lab-discovery-form{grid-template-columns:1fr}.free-lab-discovery-form label:nth-child(2),.free-lab-discovery-form label:nth-child(3){grid-column:auto}}
@media(max-width:620px){.practice-free-lab-home-card{grid-template-columns:1fr;padding:22px 18px}.practice-free-lab-home-art{width:70px;height:70px}.practice-free-lab-home-copy h3{font-size:28px}.free-lab-discovery-panel{grid-template-columns:1fr;padding:19px}.free-lab-discovery-trophy{width:60px;height:60px}}
@media(prefers-reduced-motion:reduce){.free-lab-discovery-panel:not([hidden]) .free-lab-discovery-trophy{animation:none}}

/* ===== v17.6 — independent Maqam Lab ===== */
.maqam-lab-shell-page{display:grid;gap:18px}
.maqam-lab-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:28px 30px;background:linear-gradient(135deg,var(--surface-solid),var(--surface-glass));overflow:hidden;position:relative}
.maqam-lab-hero::after{content:"";position:absolute;width:240px;height:240px;border:1px solid rgba(211,154,74,.16);border-radius:50%;right:-110px;top:-130px;pointer-events:none}
.maqam-lab-hero h1{margin:3px 0 8px;color:var(--heading-color);font-size:clamp(42px,6vw,66px);line-height:.96}
.maqam-lab-hero>div:first-child>p:last-child{max-width:820px;margin:0;color:var(--muted-600);font-size:13px;line-height:1.7}
.maqam-lab-hero-mark{position:relative;z-index:1}
.maqam-lab-tool-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:4px 2px}
.maqam-lab-tool-intro h2{margin:3px 0 5px;color:var(--heading-color);font-size:30px}
.maqam-lab-tool-intro>div:first-child>p:last-child{margin:0;max-width:820px;color:var(--muted-600);font-size:12px;line-height:1.6}
.maqam-lab-tool-status{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.maqam-lab-tool-status span{font-size:9px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--teal-700)}
.maqam-lab-tool-status strong{font-size:11px;color:var(--muted-600)}
.maqam-lab-tool-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:0 0 auto}
@media(max-width:760px){.maqam-lab-hero{grid-template-columns:1fr;padding:24px 20px}.maqam-lab-hero-mark{display:none}.maqam-lab-tool-intro{align-items:flex-start;flex-direction:column}.maqam-lab-tool-status{align-items:flex-start}.maqam-lab-tool-actions{justify-content:flex-start;width:100%;flex-wrap:wrap}}
.maqam-lab-unavailable-tool{padding:26px 28px}
.maqam-lab-unavailable-tool h2{margin:3px 0 8px;color:var(--heading-color);font-size:30px}
.maqam-lab-unavailable-tool>p:last-child{margin:0;color:var(--muted-600);font-size:12px;line-height:1.65}
/* ===== Maqam Lab v17.6.1 — feature-card landing ===== */
.maqam-lab-catalog{margin-top:4px}
.maqam-lab-catalog-head{margin-bottom:0}
.maqam-lab-feature-grid{max-width:1180px}
.maqam-lab-feature-grid .practice-exercise-card{min-height:300px}
.maqam-lab-start-link{display:flex;align-items:center;justify-content:center;text-decoration:none}
.maqam-lab-coming-card{background:color-mix(in srgb,var(--surface-solid) 84%,var(--sand-100));border-color:var(--border-300);box-shadow:none;opacity:.62;filter:grayscale(.28)}
.maqam-lab-coming-card .practice-card-copy h3,.maqam-lab-coming-card .practice-card-copy p,.maqam-lab-coming-card .practice-card-icon{color:var(--muted-600)}
.maqam-lab-coming-card .practice-card-icon img{opacity:.58;filter:grayscale(1)}
.maqam-lab-coming-card .btn[disabled]{cursor:not-allowed;opacity:.72}
html[data-theme="dark"] .maqam-lab-coming-card{background:rgba(255,255,255,.025);opacity:.68}
@media(max-width:900px){.maqam-lab-feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.maqam-lab-feature-grid{grid-template-columns:1fr}}



/* v17.9 — Maqam Lab visual cleanup */
/* The Lab control stripe is a light workspace surface. Its controls use the
   Academy Soft Sand token so the strip reads as one clear unit. */
.maqam-lab-page .free-lab-controls{background:var(--surface-solid)}
.maqam-lab-page .free-lab-controls select,
.maqam-lab-page .free-lab-controls .btn{background:#F1EDE6}
.maqam-lab-page .free-lab-count-control strong{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 13px;border:1px solid var(--border-300);border-radius:10px;background:#F1EDE6}
html[data-theme="dark"] .maqam-lab-page .free-lab-controls select,
html[data-theme="dark"] .maqam-lab-page .free-lab-controls .btn,
html[data-theme="dark"] .maqam-lab-page .free-lab-count-control strong{background:color-mix(in srgb,var(--sand-100) 18%,var(--surface-solid));color:var(--ink-900)}

/* Lab-specific copy must remain comfortably readable. The global Academy
   safeguard is 8px, but explanatory Lab text uses a higher local floor. */
.maqam-lab-page .free-lab-toolbar-copy span,
.maqam-lab-page .free-lab-controls label>span,
.maqam-lab-page .free-lab-count-control>span,
.maqam-lab-page .free-lab-degree>span,
.maqam-lab-page .free-lab-analysis-card>span,
.maqam-lab-page .free-lab-result-head>span,
.maqam-lab-page .free-lab-structure-head>span,
.maqam-lab-page .free-lab-structure-grid span,
.maqam-lab-page .free-lab-match span,
.maqam-lab-page .maqam-lab-tool-status span{font-size:11px}
.maqam-lab-page .free-lab-degree>small,
.maqam-lab-page .free-lab-active-note small,
.maqam-lab-page .free-lab-accidentals small,
.maqam-lab-page .free-lab-analysis-card>small,
.maqam-lab-page .free-lab-analysis-card>p,
.maqam-lab-page .free-lab-result-foot,
.maqam-lab-page .free-lab-match small,
.maqam-lab-page .free-lab-structure-head p,
.maqam-lab-page .free-lab-structure-grid small,
.maqam-lab-page .free-lab-discovery-copy>p:last-child,
.maqam-lab-page .free-lab-discovery-actions small,
.maqam-lab-page .free-lab-discovery-form label>span small,
.maqam-lab-page .free-lab-discovery-submitted p,
.maqam-lab-page .free-lab-discovery-access{font-size:12px;line-height:1.55}
.maqam-lab-page .free-lab-structure-grid strong{font-size:13px}
.maqam-lab-page .free-lab-discovery-form label{font-size:12px}
.maqam-lab-page .free-lab-discovery-history{display:inline-flex;margin-top:10px;font-size:12px;font-weight:800}
.maqam-lab-page .free-lab-discovery-access{grid-column:1/-1;padding:13px 15px;border-top:1px solid rgba(211,154,74,.34);color:var(--muted-600)}

/* v19.0 — Derivation & Scale Tree: What Can This Jins Generate? */
.practice-derivation-task{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  padding:10px 14px;
  border:1px solid var(--border-300);
  border-radius:12px;
  background:var(--sand-100);
  color:var(--forest-950);
}
.practice-derivation-task span{
  font-size:max(var(--design-small-caption-size,10px),10px);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-600);
}
.practice-derivation-task strong{font-size:max(var(--design-secondary-text-size,12px),13px);line-height:1.35;text-align:right}
.practice-derivation-choice span.practice-derivation-choice-main{
  min-height:76px;
  display:grid;
  grid-template-columns:1fr;
  align-content:center;
  gap:3px;
  padding:12px 14px 12px 38px;
}
.practice-derivation-choice span.practice-derivation-choice-main::before{position:absolute;left:14px;top:50%;transform:translateY(-50%)}
.practice-derivation-choice-main strong{font-size:max(var(--design-secondary-text-size,12px),14px);font-style:normal;line-height:1.2}
.practice-derivation-choice-main em{font-size:max(var(--design-secondary-text-size,12px),13px);font-style:normal;font-weight:700;color:var(--teal-700)}
.practice-derivation-choice-main small{font-size:max(var(--design-small-caption-size,10px),10px);font-weight:750;color:var(--muted-600)}
html[data-theme="dark"] .practice-derivation-task{background:rgba(255,255,255,.045)}
@media(max-width:640px){
  .practice-derivation-task{align-items:flex-start;flex-direction:column}
  .practice-derivation-task strong{text-align:left}
}

/* v19.1 — W5-E02 + W8-E01 interactive derivation block builder */
.practice-derivation-builder{
  display:grid;
  gap:24px;
  width:100%;
}
.practice-derivation-workbench{
  display:grid;
  grid-template-columns:minmax(620px,1.3fr) minmax(320px,.7fr);
  gap:34px;
  align-items:start;
  width:100%;
  padding:22px 24px 24px;
  border:1px solid var(--border-300);
  border-radius:22px;
  background:var(--white);
  overflow:hidden;
}
.practice-derivation-root-pane{
  min-width:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:8px;
}
.practice-derivation-root-staff{
  width:100%;
  max-height:235px;
  overflow:hidden;
}
.practice-derivation-root-staff .staff-watermark{display:none!important}
.practice-derivation-branch-pane{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:0;
  min-height:235px;
  padding:10px 0;
}
.practice-derivation-branch-rail{
  position:relative;
  min-height:100%;
}
.practice-derivation-branch-rail::before{
  content:"";
  position:absolute;
  left:16px;
  top:16px;
  bottom:16px;
  border-left:2px dashed #CBB5AF;
}
.practice-derivation-slots{
  display:grid;
  gap:16px;
  align-content:center;
}
.practice-derivation-slot{
  position:relative;
  min-height:102px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  border:2px dashed #CBB5AF;
  border-radius:18px;
  background:rgba(253,250,245,.55);
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.practice-derivation-slot::before{
  content:"";
  position:absolute;
  left:-35px;
  top:50%;
  width:34px;
  border-top:2px dashed #CBB5AF;
  transform:translateY(-50%);
}
.practice-derivation-slot:hover,
.practice-derivation-slot.is-drag-over{
  border-color:var(--teal-700);
  background:var(--sage-200);
  box-shadow:0 0 0 3px rgba(21,83,71,.08);
}
.practice-derivation-slot.is-filled{border-style:solid;background:var(--white)}
.practice-derivation-slot.is-correct{border-color:var(--forest-800);box-shadow:0 0 0 3px rgba(19,67,57,.10)}
.practice-derivation-slot.is-wrong{border-color:#B45C4B;box-shadow:0 0 0 3px rgba(180,92,75,.10)}
.practice-derivation-slot-placeholder{
  color:var(--muted-600);
  font-size:max(var(--design-secondary-text-size,12px),13px);
  font-weight:800;
  text-align:center;
}
.practice-derivation-slot-block{
  width:min(100%,260px);
  margin:auto;
  display:grid;
  justify-items:center;
  text-align:center;
}
.practice-derivation-slot-block>span,
.practice-derivation-block-kicker{
  color:var(--muted-600);
  font-size:max(var(--design-small-caption-size,10px),10px);
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.practice-derivation-slot-block>strong{
  color:var(--forest-950);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:24px;
  line-height:1;
}
.practice-derivation-slot-block>small{color:var(--muted-600);font-size:max(var(--design-small-caption-size,10px),10px);font-weight:750}
.practice-derivation-taskline{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  min-height:38px;
  color:var(--muted-600);
  font-size:max(var(--design-secondary-text-size,12px),12px);
}
.practice-derivation-taskline strong{
  color:var(--forest-800);
  padding:6px 11px;
  border-radius:999px;
  background:var(--sand-100);
  font-size:max(var(--design-small-caption-size,10px),10px);
}
.practice-derivation-bank-wrap{
  padding:20px;
  border:1px solid var(--border-300);
  border-radius:22px;
  background:var(--white);
}
.practice-derivation-bank-head{margin-bottom:14px}
.practice-derivation-bank{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,255px));
  justify-content:center;
  gap:14px;
  width:100%;
}
.practice-derivation-block{
  --derivation-block-bg:#DDE1D9;
  position:relative;
  width:100%;
  min-height:164px;
  display:grid;
  grid-template-rows:auto auto auto 58px auto;
  align-items:center;
  justify-items:center;
  gap:3px;
  padding:20px 18px 12px;
  border:1px solid var(--sage-500);
  border-radius:12px;
  background:var(--derivation-block-bg);
  color:var(--forest-950);
  text-align:center;
  cursor:grab;
  box-shadow:0 8px 20px rgba(12,35,30,.06);
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease,border-color .15s ease;
}
.practice-derivation-block::before{
  content:"";
  position:absolute;
  width:42px;
  height:12px;
  top:-8px;
  left:50%;
  transform:translateX(-50%);
  border:1px solid inherit;
  border-bottom:0;
  border-radius:8px 8px 0 0;
  background:var(--derivation-block-bg);
}
.practice-derivation-block:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 26px rgba(12,35,30,.10);border-color:var(--forest-800)}
.practice-derivation-block:active:not(:disabled){cursor:grabbing}
.practice-derivation-block.is-dragging{opacity:.5}
.practice-derivation-block.is-used{opacity:.42;cursor:default}
.practice-derivation-block.is-correct-answer{opacity:1;border-color:var(--forest-800);box-shadow:0 0 0 3px rgba(19,67,57,.10)}
.practice-derivation-block>strong{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:25px;
  line-height:1;
  font-weight:650;
}
.practice-derivation-block>small{
  color:var(--muted-600);
  font-size:max(var(--design-small-caption-size,10px),10px);
  font-weight:800;
}
.practice-derivation-block>em{
  color:var(--forest-800);
  font-size:max(var(--design-small-caption-size,10px),10px);
  font-style:normal;
  font-weight:850;
}
.practice-derivation-block.tone-0{--derivation-block-bg:#DDE1D9}
.practice-derivation-block.tone-1{--derivation-block-bg:#FAE7B7}
.practice-derivation-block.tone-2{--derivation-block-bg:#F0DDD7}
.practice-derivation-block.tone-3{--derivation-block-bg:#E8DEE8}
.practice-derivation-block.tone-4{--derivation-block-bg:#F1EDE6}
.practice-derivation-block.tone-5{--derivation-block-bg:#DCE8E1}
.practice-derivation-block.tone-6{--derivation-block-bg:#EFE4D5}
.practice-derivation-block.tone-7{--derivation-block-bg:#E1E9E7}
.practice-derivation-mini-staff{
  width:100%;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.practice-derivation-mini-staff svg{
  display:block;
  width:100%;
  height:56px;
  overflow:visible;
}
.practice-derivation-block-ghost{
  position:fixed!important;
  z-index:99999!important;
  width:220px!important;
  pointer-events:none!important;
  transform:translate(-50%,-50%) rotate(1.5deg)!important;
  opacity:.92!important;
}
html[data-theme="dark"] .practice-derivation-workbench,
html[data-theme="dark"] .practice-derivation-bank-wrap,
html[data-theme="dark"] .practice-derivation-slot.is-filled{background:var(--dark-card,#152720)}
html[data-theme="dark"] .practice-derivation-slot{background:rgba(255,255,255,.025)}
html[data-theme="dark"] .practice-derivation-block{color:var(--forest-950)}
@media(max-width:1120px){
  .practice-derivation-workbench{grid-template-columns:1fr;gap:12px}
  .practice-derivation-root-pane{padding-top:0}
  .practice-derivation-branch-pane{grid-template-columns:26px 1fr;min-height:0}
  .practice-derivation-slot::before{left:-27px;width:26px}
  .practice-derivation-branch-rail::before{left:12px}
}
@media(max-width:700px){
  .practice-derivation-workbench{padding:14px}
  .practice-derivation-root-staff{max-height:215px}
  .practice-derivation-slot{min-height:92px}
  .practice-derivation-bank-wrap{padding:14px}
  .practice-derivation-bank{grid-template-columns:minmax(0,1fr)}
  .practice-derivation-block{width:min(100%,300px);justify-self:center}
}
.practice-choice-grid>.practice-derivation-builder{grid-column:1/-1}

/* v19.2 — Derivation block polish and result readability */
.practice-derivation-slot{
  min-height:136px;
  padding:14px 16px;
}
.practice-derivation-slot-block{
  width:min(100%,280px);
}
.practice-derivation-block{
  min-height:176px;
  grid-template-rows:auto auto auto 66px auto;
}
.practice-derivation-mini-staff{
  height:66px;
  padding:0 14px;
  box-sizing:border-box;
  overflow:hidden;
}
.practice-derivation-mini-staff svg{
  height:66px;
}
#practice-brom-card .practice-derivation-structure-list{
  gap:16px;
  margin-top:0;
}
#practice-brom-card .practice-derivation-structure-list .practice-brom-row{
  grid-template-columns:140px minmax(0,1fr);
  gap:16px;
  padding:3px 0;
  font-size:calc(var(--design-practice-brom-row-size, 10px) + 2px);
  line-height:1.65;
  align-items:start;
}
#practice-brom-card .practice-derivation-structure-list .practice-brom-row span,
#practice-brom-card .practice-derivation-structure-list .practice-brom-row strong{
  font-size:inherit;
}
@media(max-width:640px){
  #practice-brom-card .practice-derivation-structure-list .practice-brom-row{
    grid-template-columns:1fr;
    gap:4px;
  }
}

/* v19.3 — W5-E01 Derive Related Maqamat */
.practice-choice-grid>.practice-related-map{grid-column:1/-1}
.practice-related-map{display:grid;gap:24px;width:100%;min-width:0}
.practice-related-map-panel,.practice-related-bank-wrap{border:1px solid var(--border-300);border-radius:24px;background:var(--surface-solid);padding:22px;min-width:0}
.practice-related-map-panel{background:linear-gradient(180deg,color-mix(in srgb,var(--sage-200) 24%,var(--surface-solid)) 0%,var(--surface-solid) 52%)}
.practice-related-map-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid var(--border-300)}
.practice-related-map-head h3,.practice-related-bank-head h3{margin:3px 0 0;font-family:'Cormorant Garamond',serif;color:var(--heading-color);font-size:30px;line-height:1.02}
.practice-related-map-basis{display:inline-flex;align-items:center;min-height:34px;padding:7px 12px;border:1px solid color-mix(in srgb,var(--gold-600) 42%,var(--border-300));border-radius:999px;background:color-mix(in srgb,var(--gold-200) 28%,var(--surface-solid));color:var(--forest-800);font-size:11px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.practice-related-branches{display:grid;grid-template-columns:repeat(var(--branch-count),minmax(0,1fr));gap:16px;align-items:start;padding-top:22px}
.practice-related-branch{position:relative;display:grid;grid-template-rows:auto 42px minmax(176px,auto) auto auto;align-items:start;min-width:0}
.practice-related-branch-origin{justify-self:center;display:grid;place-items:center;min-width:76px;padding:8px 14px;border:1px solid var(--sage-500);border-radius:999px;background:var(--surface-solid);color:var(--forest-800);text-align:center;box-shadow:0 5px 14px rgba(12,35,30,.045)}
.practice-related-branch-origin span{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:900;line-height:1}
.practice-related-branch-origin small{margin-top:3px;color:var(--muted-600);font-size:10px;font-weight:700}
.practice-related-branch-line{position:relative;width:100%;height:42px}
.practice-related-branch-line::before{content:'';position:absolute;left:50%;top:0;bottom:8px;border-left:2px solid color-mix(in srgb,var(--sage-500) 72%,var(--border-300));transform:translateX(-1px)}
.practice-related-branch-line::after{content:'';position:absolute;left:50%;bottom:4px;width:9px;height:9px;border-right:2px solid var(--sage-500);border-bottom:2px solid var(--sage-500);transform:translateX(-50%) rotate(45deg)}
.practice-related-dropzone{display:grid;place-items:center;min-height:176px;border:2px dashed color-mix(in srgb,var(--sage-500) 72%,var(--border-300));border-radius:22px;background:color-mix(in srgb,var(--card-50) 58%,var(--surface-solid));padding:14px;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease}
.practice-related-dropzone:hover,.practice-related-dropzone:focus-visible,.practice-related-dropzone.is-drag-over{border-color:var(--forest-800);background:color-mix(in srgb,var(--sage-200) 42%,var(--surface-solid));box-shadow:0 0 0 3px color-mix(in srgb,var(--sage-500) 22%,transparent);outline:none}
.practice-related-dropzone.is-drag-over{transform:translateY(-2px)}
.practice-related-empty-slot{display:grid;place-items:center;gap:5px;text-align:center;color:var(--muted-600)}
.practice-related-empty-slot span{font-size:13px;font-weight:850;color:var(--forest-800)}
.practice-related-empty-slot small{font-size:10px}
.practice-related-slot-card{display:grid;grid-template-rows:auto auto minmax(72px,1fr);align-items:center;width:100%;height:100%;min-width:0;text-align:center}
.practice-related-card-kicker{color:var(--muted-600);font-size:var(--design-practice-maqam-card-label-size,10px);font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.practice-related-slot-card>strong,.practice-related-block>strong{margin-top:var(--design-practice-maqam-card-name-gap,3px);font-family:'Cormorant Garamond',serif;color:var(--heading-color);font-size:var(--design-practice-maqam-card-name-size,27px);line-height:1}
.practice-related-slot-card.is-pending{grid-template-rows:auto auto minmax(72px,1fr)}
.practice-related-slot-intervals{align-self:center;margin:0;padding:8px 4px 2px;font-style:normal;color:var(--forest-800);font-size:var(--design-practice-maqam-card-interval-size,14px);font-weight:var(--design-practice-maqam-card-interval-weight,500);line-height:1.25;text-align:center;transform:translateY(var(--design-practice-maqam-card-interval-y,-4px))}
.practice-related-mini-staff{display:grid;place-items:center;width:100%;min-width:0;height:var(--design-practice-maqam-card-staff-height,120px);overflow:hidden;margin-top:var(--design-practice-music-staff-margin-top,6px);padding:0 var(--design-practice-music-staff-padding-x,2px);box-sizing:border-box}
.practice-related-mini-staff svg{display:block;width:100%;height:100%;overflow:visible}
.practice-related-alteration{display:grid;gap:6px;margin-top:10px}
.practice-related-alteration>span{color:var(--muted-600);font-size:10px;font-weight:850;text-align:center;text-transform:uppercase;letter-spacing:.05em}
.practice-related-alteration select{width:100%;min-height:42px;border:1px solid var(--border-300);border-radius:12px;background:var(--control-surface);color:var(--ink-900);padding:8px 12px;font:inherit;font-size:12px;font-weight:700}
.practice-related-slot-result{display:grid;gap:3px;margin-top:10px;padding:10px 12px;border-radius:13px;text-align:center;border:1px solid var(--border-300);background:var(--card-50)}
.practice-related-slot-result.is-correct{border-color:var(--sage-500);background:color-mix(in srgb,var(--sage-200) 46%,var(--surface-solid))}
.practice-related-slot-result.is-wrong{border-color:color-mix(in srgb,#C4624F 58%,var(--border-300));background:color-mix(in srgb,#C4624F 8%,var(--surface-solid))}
.practice-related-slot-result strong{font-size:11px;color:var(--forest-800)}
.practice-related-slot-result span{font-size:12px;font-weight:800;color:var(--ink-900)}
.practice-related-slot-result small{font-size:10px;color:var(--muted-600);line-height:1.35}
.practice-related-branch.is-correct .practice-related-dropzone{border-style:solid;border-color:var(--forest-800);background:color-mix(in srgb,var(--sage-200) 38%,var(--surface-solid))}
.practice-related-branch.is-wrong .practice-related-dropzone{border-style:solid;border-color:#C4624F;background:color-mix(in srgb,#C4624F 6%,var(--surface-solid))}
.practice-related-bank-head{align-items:center;margin-bottom:14px}
.practice-related-bank{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
.practice-related-block{position:relative;display:grid;grid-template-rows:auto auto minmax(var(--design-practice-maqam-card-staff-height,120px),auto) auto;align-items:center;min-width:0;min-height:var(--design-practice-maqam-card-min-height,236px);padding:var(--design-practice-maqam-card-pad-top,22px) var(--design-practice-maqam-card-pad-x,2px) var(--design-practice-maqam-card-pad-bottom,18px);border:1px solid color-mix(in srgb,var(--sage-500) 78%,var(--border-300));border-radius:var(--design-practice-maqam-card-radius,20px);background:var(--surface-solid);color:var(--ink-900);cursor:grab;box-shadow:0 7px 20px rgba(12,35,30,.045);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,opacity .16s ease}
.practice-related-block::before{content:'';position:absolute;top:-9px;left:50%;width:70px;height:18px;border-radius:12px 12px 0 0;background:inherit;border:1px solid color-mix(in srgb,var(--sage-500) 55%,var(--border-300));border-bottom:0;transform:translateX(-50%)}
.practice-related-block.tone-0{background:color-mix(in srgb,var(--sage-200) 58%,var(--surface-solid))}
.practice-related-block.tone-1{background:color-mix(in srgb,var(--gold-200) 58%,var(--surface-solid))}
.practice-related-block.tone-2{background:color-mix(in srgb,#E9D4CE 62%,var(--surface-solid))}
.practice-related-block.tone-3{background:color-mix(in srgb,#E3D9E6 62%,var(--surface-solid))}
.practice-related-block.tone-4{background:color-mix(in srgb,#DCE9E5 62%,var(--surface-solid))}
.practice-related-block.tone-5{background:color-mix(in srgb,#EFE7D8 62%,var(--surface-solid))}
.practice-related-block.tone-6{background:color-mix(in srgb,#E1E6D7 62%,var(--surface-solid))}
.practice-related-block.tone-7{background:color-mix(in srgb,#E7DEE0 62%,var(--surface-solid))}
.practice-related-block:hover:not(:disabled),.practice-related-block:focus-visible{transform:translateY(-3px);border-color:var(--forest-800);box-shadow:0 12px 26px rgba(12,35,30,.09);outline:none}
.practice-related-block.is-dragging{opacity:.42;transform:scale(.98)}
.practice-related-block.is-used{opacity:.33;cursor:default;box-shadow:none}
.practice-related-block>em{font-style:normal;color:var(--forest-800);font-size:var(--design-practice-maqam-card-interval-size,14px);font-weight:var(--design-practice-maqam-card-interval-weight,500);line-height:1.2;transform:translateY(var(--design-practice-maqam-card-interval-y,-4px))}
.practice-related-block-ghost{position:fixed!important;z-index:99999!important;width:240px!important;pointer-events:none!important;transform:translate(-50%,-50%) rotate(-2deg)!important;opacity:.92!important}
.practice-related-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.practice-related-result-card{display:grid;gap:7px;padding:16px 18px;border:1px solid var(--border-300);border-radius:16px;background:var(--card-50)}
.practice-related-result-card>span{color:var(--forest-800);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.practice-related-result-card h4{margin:0;font-family:'Cormorant Garamond',serif;color:var(--heading-color);font-size:24px;line-height:1}
.practice-related-result-card p{margin:0;color:var(--ink-900);font-size:12px;font-weight:750}
.practice-related-result-card small{color:var(--muted-600);font-size:11px;line-height:1.45}
@media(max-width:1180px){.practice-related-bank{grid-template-columns:repeat(3,minmax(0,1fr))}.practice-related-branches{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.practice-related-map-panel,.practice-related-bank-wrap{padding:15px;border-radius:18px}.practice-related-map-head{align-items:flex-start;flex-direction:column}.practice-related-branches,.practice-related-bank,.practice-related-result-grid{grid-template-columns:1fr}.practice-related-branch{grid-template-rows:auto 34px minmax(150px,auto) auto auto}.practice-related-dropzone{min-height:150px}.practice-related-block{width:min(100%,330px);justify-self:center}.practice-related-map-basis{white-space:normal}}

/* =========================================================
   Maqam Academy v19.5 — Practice design cleanup
   Dedicated Structure Training mode controls + one shared
   Structure result-card controller used across Practice apps.
   ========================================================= */

/* Structure Training mode no longer inherits Session-settings sizing. */
.practice-structure-mode-settings{
  margin-top:var(--design-practice-structure-mode-top-gap,18px);
  padding:var(--design-practice-structure-mode-padding,18px);
  gap:var(--design-practice-structure-mode-column-gap,18px);
  border-radius:var(--design-practice-structure-mode-radius,12px);
}
.practice-structure-mode-settings .practice-setting-label{
  margin-bottom:var(--design-practice-structure-mode-label-gap,8px);
  font-size:var(--design-practice-structure-mode-label-size,9px);
}
.practice-structure-mode-settings .practice-segmented{
  border-radius:var(--design-practice-structure-mode-segment-radius,8px);
  padding:var(--design-practice-structure-mode-segment-padding,2px);
}
.practice-structure-mode-settings .practice-segmented button{
  min-height:var(--design-practice-structure-mode-option-height,34px);
  border-radius:var(--design-practice-structure-mode-button-radius,6px);
  font-size:var(--design-practice-structure-mode-option-size,9.5px);
}
.practice-structure-mode-copy{
  gap:var(--design-practice-structure-mode-gap,3px);
}
.practice-structure-mode-copy strong{
  font-size:var(--design-practice-structure-mode-title-size,22px);
}
.practice-structure-mode-copy span{
  font-size:var(--design-practice-structure-mode-copy-size,11.5px);
}

/* Shared Structure result card. */
#practice-brom-card{
  padding:var(--design-practice-structure-card-padding,16px);
  border-radius:var(--design-practice-structure-card-radius,11px);
}
#practice-brom-card>.practice-brom-heading,
#practice-brom-card>#practice-brom{
  zoom:var(--design-practice-structure-card-scale,100%);
}
#practice-brom-card>.practice-brom-heading{
  gap:var(--design-practice-structure-heading-gap,12px);
  padding-bottom:var(--design-practice-structure-heading-bottom-gap,16px);
}
#practice-brom-card>.practice-brom-heading>span{
  margin-bottom:0;
  font-size:var(--design-practice-structure-label-size,12px);
}
#practice-brom-card>.practice-brom-heading small{
  padding:var(--design-practice-structure-pill-pad-y,5px) var(--design-practice-structure-pill-pad-x,7px);
  border-radius:var(--design-practice-structure-pill-radius,999px);
  font-size:var(--design-practice-brom-badge-size,11.5px);
}

/* Tile layout used by Derive Related Maqamat and compatible result views. */
#practice-brom-card .practice-related-result-grid{
  gap:var(--design-practice-structure-result-grid-gap,14px);
}
#practice-brom-card .practice-related-result-card{
  gap:var(--design-practice-structure-result-card-gap,7px);
  padding:var(--design-practice-structure-result-card-pad-y,16px) var(--design-practice-structure-result-card-pad-x,18px);
  border-radius:var(--design-practice-structure-result-card-radius,16px);
}
#practice-brom-card .practice-related-result-card>span{
  font-size:var(--design-practice-structure-degree-size,11px);
}
#practice-brom-card .practice-related-result-card h4{
  font-size:var(--design-practice-structure-maqam-size,24px);
}
#practice-brom-card .practice-related-result-card p{
  font-size:var(--design-practice-structure-rule-size,12px);
}
#practice-brom-card .practice-related-result-card small{
  font-size:var(--design-practice-structure-detail-size,11px);
}

/* Row layout used by BRoM and other shared Structure-result renderers. */
#practice-brom-card .practice-brom-list{
  gap:var(--design-practice-structure-list-gap,8px);
}
#practice-brom-card .practice-brom-row,
#practice-brom-card .practice-derivation-structure-list .practice-brom-row{
  grid-template-columns:var(--design-practice-brom-label-width,125px) minmax(0,1fr);
  gap:var(--design-practice-structure-row-gap,10px);
  font-size:var(--design-practice-brom-row-size,10px);
}
#practice-brom-card .practice-brom-row span,
#practice-brom-card .practice-derivation-structure-list .practice-brom-row span{
  font-size:var(--design-practice-structure-row-label-size,10px);
}
#practice-brom-card .practice-brom-row strong,
#practice-brom-card .practice-derivation-structure-list .practice-brom-row strong{
  font-size:var(--design-practice-structure-row-value-size,10px);
}

@media(max-width:640px){
  .practice-structure-mode-settings{
    padding:min(var(--design-practice-structure-mode-padding,18px),14px);
  }
  #practice-brom-card .practice-brom-row,
  #practice-brom-card .practice-derivation-structure-list .practice-brom-row{
    grid-template-columns:1fr;
  }
}


/* Shared Practice component contracts. New exercises should reuse these classes
   and Design tokens rather than restyling their internal elements. */
.practice-shared-music-staff{min-width:0;overflow:hidden;padding-left:var(--design-practice-music-staff-padding-x,2px);padding-right:var(--design-practice-music-staff-padding-x,2px)}
.maqam-scale-card-component{min-height:var(--design-practice-maqam-card-min-height,236px);border-radius:var(--design-practice-maqam-card-radius,20px)}
.maqam-scale-card-component .maqam-scale-card-label{font-size:var(--design-practice-maqam-card-label-size,10px)}
.maqam-scale-card-component .maqam-scale-card-name{font-size:var(--design-practice-maqam-card-name-size,27px)}
.maqam-scale-card-component .maqam-scale-card-intervals{font-size:var(--design-practice-maqam-card-interval-size,14px);font-weight:var(--design-practice-maqam-card-interval-weight,500);transform:translateY(var(--design-practice-maqam-card-interval-y,-4px))}

/* =========================================================
   Maqam Academy v19.7 — Find the Derivation
   Source-degree discovery + post-answer RoRM proof.
   ========================================================= */
.practice-finder-shell{
  display:grid;
  grid-column:1/-1;
  gap:16px;
  min-width:0;
}
.practice-finder-stage{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) 58px minmax(250px,.72fr);
  gap:14px;
  align-items:stretch;
  padding:18px;
  border:1px solid var(--border-300);
  border-radius:22px;
  background:color-mix(in srgb,var(--card-50) 78%,var(--surface-solid));
}
.practice-finder-source-card,
.practice-finder-target-card{
  min-width:0;
  border:1px solid var(--border-300);
  border-radius:18px;
  background:var(--surface-solid);
  box-shadow:0 7px 22px rgba(12,35,30,.045);
}
.practice-finder-source-card{
  display:grid;
  gap:12px;
  padding:18px 18px 16px;
  border-color:color-mix(in srgb,var(--sage-500) 72%,var(--border-300));
  background:color-mix(in srgb,var(--sage-200) 20%,var(--surface-solid));
}
.practice-finder-target-card{
  display:grid;
  grid-template-rows:auto auto auto auto;
  align-content:center;
  justify-items:center;
  gap:var(--design-practice-maqam-card-target-content-gap,10px);
  border-radius:var(--design-practice-maqam-card-radius,20px);
  padding:var(--design-practice-maqam-card-pad-top,22px) var(--design-practice-maqam-card-pad-x,2px) var(--design-practice-maqam-card-pad-bottom,18px);
  border-color:color-mix(in srgb,var(--gold-600) 42%,var(--border-300));
  background:color-mix(in srgb,var(--gold-200) 17%,var(--surface-solid));
  text-align:center;
  transition:border-color .16s ease,background .16s ease;
}
.practice-finder-target-card.is-revealed{
  border-color:color-mix(in srgb,var(--sage-500) 70%,var(--border-300));
  background:color-mix(in srgb,var(--sage-200) 18%,var(--surface-solid));
}
.practice-finder-target-card.is-revealed>p{display:none}
.practice-finder-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  min-width:0;
}
.practice-finder-card-head>div{min-width:0}
.practice-finder-eyebrow{
  display:block;
  margin-bottom:var(--design-practice-maqam-card-name-gap,3px);
  color:var(--muted-600);
  font-size:var(--design-practice-maqam-card-label-size,10px);
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.practice-finder-source-card h3,
.practice-finder-target-card h3{
  margin:0;
  overflow-wrap:anywhere;
  color:var(--heading-color);
  font-family:'Cormorant Garamond',serif;
  font-size:var(--design-practice-maqam-card-name-size,27px);
  font-weight:650;
  line-height:1;
}
.practice-finder-basis{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border:1px solid color-mix(in srgb,var(--sage-500) 56%,var(--border-300));
  border-radius:999px;
  background:var(--surface-solid);
  color:var(--forest-800);
  font-size:8.5px;
  font-weight:850;
  white-space:nowrap;
}
.practice-finder-source-staff{
  display:grid;
  place-items:center;
  width:100%;
  min-width:0;
  height:var(--design-practice-music-staff-source-height,116px);
  overflow:hidden;
  margin-top:var(--design-practice-music-staff-margin-top,6px);
  padding:0 var(--design-practice-music-staff-padding-x,2px);
}
.practice-finder-source-staff svg,
.practice-finder-target-staff svg{display:block;max-width:100%}
.practice-finder-target-staff[hidden]{display:none!important}
.practice-finder-degree-zone{
  display:grid;
  gap:7px;
  padding-top:3px;
}
.practice-finder-degree-label{
  color:var(--muted-600);
  font-size:9px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.practice-finder-degree-rail{
  --finder-degree-left:72px;
  --finder-degree-right:28px;
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:start;
  min-height:55px;
  padding:0 var(--finder-degree-right) 0 var(--finder-degree-left);
}
.practice-finder-degree-rail::before{
  content:"";
  position:absolute;
  top:12px;
  left:var(--finder-degree-left);
  right:var(--finder-degree-right);
  height:1px;
  background:color-mix(in srgb,var(--sage-500) 54%,var(--border-300));
}
.practice-finder-degree{
  position:relative;
  z-index:1;
  grid-column:var(--finder-degree-column);
  justify-self:center;
  display:grid;
  justify-items:center;
  gap:4px;
  min-width:42px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted-600);
  font:inherit;
  cursor:pointer;
}
.practice-finder-degree>span{
  width:25px;
  height:25px;
  border:2px solid var(--sage-500);
  border-radius:999px;
  background:var(--surface-solid);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--surface-solid) 82%,transparent);
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.practice-finder-degree>b{
  font-size:10px;
  font-weight:900;
  line-height:1;
}
.practice-finder-degree:hover>span,
.practice-finder-degree.is-selected>span{
  transform:scale(1.08);
  border-color:var(--forest-800);
  background:color-mix(in srgb,var(--sage-200) 62%,var(--surface-solid));
  box-shadow:0 0 0 4px color-mix(in srgb,var(--sage-200) 30%,transparent);
}
.practice-finder-degree.is-selected{color:var(--forest-800)}
.practice-finder-degree.is-correct>span{
  border-color:var(--forest-800);
  background:var(--forest-800);
  box-shadow:inset 0 0 0 6px var(--sage-200),0 0 0 4px color-mix(in srgb,var(--sage-500) 24%,transparent);
}
.practice-finder-degree.is-correct{color:var(--forest-800)}
.practice-finder-degree.is-wrong>span{
  border-color:#B75B50;
  background:color-mix(in srgb,#F3DDD8 72%,var(--surface-solid));
}
.practice-finder-degree.is-wrong{color:#81473F}
.practice-finder-route{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  align-self:center;
  min-width:0;
}
.practice-finder-route-line{
  display:block;
  height:1px;
  background:linear-gradient(to right,color-mix(in srgb,var(--sage-500) 20%,transparent),var(--forest-800));
}
.practice-finder-route-arrow{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  margin-left:-1px;
  border:1px solid color-mix(in srgb,var(--forest-800) 34%,var(--border-300));
  border-radius:999px;
  background:var(--surface-solid);
  color:var(--forest-800);
  font-size:19px;
  font-weight:750;
  box-shadow:0 5px 14px rgba(12,35,30,.055);
}
.practice-finder-target-symbol{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  align-self:center;
  border:1px solid color-mix(in srgb,var(--gold-600) 52%,var(--border-300));
  border-radius:16px;
  background:color-mix(in srgb,var(--gold-200) 56%,var(--surface-solid));
  color:var(--forest-800);
  font-family:'Cormorant Garamond',serif;
  font-size:34px;
  font-weight:750;
}
.practice-finder-target-card>p{
  margin:0;
  color:var(--muted-600);
  font-size:10.5px;
  line-height:1.48;
}
.practice-finder-target-staff{
  display:grid;
  place-items:center;
  width:100%;
  min-width:0;
  height:var(--design-practice-maqam-card-target-staff-height,92px);
  overflow:hidden;
  margin-top:var(--design-practice-music-staff-margin-top,6px);
  padding:0 var(--design-practice-music-staff-padding-x,2px);
}
.practice-finder-target-intervals{
  margin-top:-2px;
  color:var(--forest-800);
  font-size:var(--design-practice-maqam-card-interval-size,14px);
  font-weight:var(--design-practice-maqam-card-interval-weight,500);
  line-height:1.25;
  text-align:center;
  white-space:normal;
  transform:translateY(var(--design-practice-maqam-card-interval-y,-4px));
}
.practice-finder-target-intervals[hidden]{display:none!important}
.practice-finder-target-overlay{
  fill:transparent;
  vector-effect:non-scaling-stroke;
  opacity:var(--design-practice-keyboard-phantom-opacity,58%);
}
.practice-finder-target-overlay.is-degree{
  stroke:var(--key-quarter,#C4624F);
  stroke-width:2;
}
.practice-finder-target-overlay.is-tonic{
  stroke:var(--gold-600);
  stroke-width:2;
}
.practice-finder-rule-step{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 14px;
  border:1px solid var(--border-300);
  border-radius:15px;
  background:var(--surface-solid);
}
.practice-finder-rule-step>div:first-child{display:grid;gap:3px}
.practice-finder-rule-step>div:first-child span{
  color:var(--muted-600);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.practice-finder-rule-step>div:first-child strong{color:var(--forest-950);font-size:12px}
.practice-finder-rule-buttons{display:flex;gap:8px;flex-wrap:wrap}
.practice-finder-rule-buttons button{
  display:grid;
  gap:2px;
  min-width:128px;
  min-height:48px;
  padding:8px 12px;
  border:1px solid var(--border-300);
  border-radius:12px;
  background:var(--card-50);
  color:var(--forest-950);
  cursor:pointer;
  text-align:left;
}
.practice-finder-rule-buttons button b{font-size:11px}
.practice-finder-rule-buttons button small{color:var(--muted-600);font-size:8.5px;font-weight:750}
.practice-finder-rule-buttons button.is-selected{
  border-color:var(--forest-800);
  background:color-mix(in srgb,var(--sage-200) 42%,var(--surface-solid));
}
.practice-finder-rule-buttons button.is-correct{border-color:var(--forest-800);background:color-mix(in srgb,var(--sage-200) 56%,var(--surface-solid))}
.practice-finder-rule-buttons button.is-wrong{border-color:#B75B50;background:color-mix(in srgb,#F3DDD8 42%,var(--surface-solid))}
.practice-finder-theory-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 13px;
  border:1px solid color-mix(in srgb,var(--gold-600) 34%,var(--border-300));
  border-radius:13px;
  background:color-mix(in srgb,var(--gold-200) 18%,var(--surface-solid));
}
.practice-finder-theory-strip span{
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid color-mix(in srgb,var(--gold-600) 44%,var(--border-300));
  border-radius:999px;
  color:var(--forest-800);
  font-size:8.5px;
  font-weight:850;
  white-space:nowrap;
}
.practice-finder-theory-strip strong{
  color:var(--muted-600);
  font-size:10px;
  font-weight:700;
  line-height:1.4;
  text-align:right;
}

/* The answer fieldset contains the complete bespoke finder. No duplicate radio UI. */
#practice-answer-area:has(.practice-finder-shell)>.practice-choice-grid{grid-template-columns:1fr}
#practice-answer-area:has(.practice-finder-shell)>legend{margin-bottom:10px}
#practice-answer-area:has(.practice-finder-shell)>.practice-check-button{margin-top:16px}

/* Dedicated post-answer RoRM proof. */
.practice-derivation-proof-card{grid-column:1/-1}
.practice-validator-proof{display:grid;gap:14px}
.practice-derivation-proof-card>.practice-brom-heading{
  gap:var(--design-practice-derivation-proof-heading-gap,12px);
  padding-bottom:var(--design-practice-derivation-proof-heading-bottom-gap,16px);
}
.practice-derivation-proof-card>.practice-brom-heading>span{
  margin-bottom:0;
  font-size:var(--design-practice-derivation-proof-label-size,12px);
}
.practice-derivation-proof-card>.practice-brom-heading small{
  padding:var(--design-practice-derivation-proof-pill-pad-y,5px) var(--design-practice-derivation-proof-pill-pad-x,7px);
  border-radius:var(--design-practice-derivation-proof-pill-radius,999px);
  font-size:var(--design-practice-derivation-proof-pill-size,11.5px);
}
.practice-validator-proof-verdict{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--design-practice-derivation-verdict-row-gap,3px) var(--design-practice-derivation-verdict-col-gap,12px);
  align-items:center;
  padding:var(--design-practice-derivation-verdict-pad-y,13px) var(--design-practice-derivation-verdict-pad-x,14px);
  border:1px solid color-mix(in srgb,var(--sage-500) 58%,var(--border-300));
  border-radius:var(--design-practice-derivation-verdict-radius,14px);
  background:color-mix(in srgb,var(--sage-200) 32%,var(--surface-solid));
}
.practice-validator-proof-verdict>span{
  grid-row:1/3;
  padding:var(--design-practice-derivation-verdict-badge-pad-y,7px) var(--design-practice-derivation-verdict-badge-pad-x,9px);
  border-radius:var(--design-practice-derivation-verdict-badge-radius,9px);
  background:var(--surface-solid);
  color:var(--forest-800);
  font-size:var(--design-practice-derivation-verdict-badge-size,8px);
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
}
.practice-validator-proof-verdict strong{color:var(--forest-950);font-size:var(--design-practice-derivation-verdict-title-size,12px);line-height:1.3}
.practice-validator-proof-verdict small{color:var(--muted-600);font-size:var(--design-practice-derivation-verdict-detail-size,9.5px);line-height:1.4}
.practice-validator-proof-route{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:11px 13px;
  border:1px solid var(--border-300);
  border-radius:13px;
  background:var(--card-50);
}
.practice-validator-proof-route span{
  color:var(--forest-950);
  font-family:'Cormorant Garamond',serif;
  font-size:19px;
  font-weight:650;
  line-height:1;
}
.practice-validator-proof-route span:last-child{text-align:right}
.practice-validator-proof-route b{
  padding:4px 7px;
  border-radius:999px;
  background:color-mix(in srgb,var(--sage-200) 56%,var(--surface-solid));
  color:var(--forest-800);
  font-size:9px;
  font-weight:900;
}
.practice-validator-proof-route i{color:var(--forest-800);font-size:15px;font-style:normal}
.practice-validator-proof-patterns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--design-practice-derivation-strip-gap,10px)}
.practice-validator-proof-pattern{
  display:grid;
  align-content:start;
  gap:var(--design-practice-derivation-strip-inner-gap,7px);
  min-width:0;
  padding:var(--design-practice-derivation-strip-pad-y,12px) var(--design-practice-derivation-strip-pad-x,13px);
  border:1px solid var(--border-300);
  border-radius:var(--design-practice-derivation-strip-radius,13px);
  background:var(--card-50);
}
.practice-validator-proof-pattern.is-emphasized{
  border-color:color-mix(in srgb,var(--sage-500) 62%,var(--border-300));
  background:color-mix(in srgb,var(--sage-200) 24%,var(--surface-solid));
}
.practice-validator-proof-pattern span,
.practice-validator-proof-section-head span{
  color:var(--muted-600);
  font-size:var(--design-practice-derivation-strip-label-size,8px);
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.practice-validator-proof-pattern strong{color:var(--forest-950);font-size:var(--design-practice-derivation-strip-value-size,11px);font-weight:var(--design-practice-derivation-strip-value-weight,700);line-height:var(--design-practice-derivation-strip-line-height,1.55);overflow-wrap:anywhere}
.practice-validator-proof-differences{display:grid;gap:var(--design-practice-derivation-compare-gap,9px)}
.practice-validator-proof-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.practice-validator-proof-section-head span{font-size:var(--design-practice-derivation-compare-heading-size,8px);font-weight:var(--design-practice-derivation-compare-heading-weight,850)}
.practice-validator-proof-section-head strong{color:var(--forest-800);font-size:var(--design-practice-derivation-compare-status-size,9px);font-weight:var(--design-practice-derivation-compare-status-weight,850)}
.practice-validator-diff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.practice-validator-diff{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
  padding:9px 10px;
  border:1px solid color-mix(in srgb,#B75B50 35%,var(--border-300));
  border-radius:10px;
  background:color-mix(in srgb,#F3DDD8 24%,var(--surface-solid));
}
.practice-validator-diff span{color:#81473F;font-size:9px;font-weight:900}
.practice-validator-diff strong{color:var(--forest-950);font-size:10px;font-weight:750}
.practice-validator-diff small{color:#81473F;font-size:9px;font-weight:850}
.practice-validator-exact-match{
  display:flex;
  align-items:center;
  gap:var(--design-practice-derivation-compare-banner-gap,9px);
  padding:var(--design-practice-derivation-compare-banner-pad-y,10px) var(--design-practice-derivation-compare-banner-pad-x,11px);
  border:1px solid color-mix(in srgb,var(--sage-500) 50%,var(--border-300));
  border-radius:var(--design-practice-derivation-compare-banner-radius,10px);
  background:color-mix(in srgb,var(--sage-200) 28%,var(--surface-solid));
}
.practice-validator-exact-match span{
  display:grid;
  place-items:center;
  width:var(--design-practice-derivation-compare-icon-size,24px);
  height:var(--design-practice-derivation-compare-icon-size,24px);
  border-radius:999px;
  background:var(--forest-800);
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.practice-validator-exact-match strong{color:var(--forest-950);font-size:var(--design-practice-derivation-compare-message-size,10px);font-weight:var(--design-practice-derivation-compare-message-weight,750)}
.practice-validator-proof-message{margin:0;color:var(--muted-600);font-size:var(--design-practice-derivation-compare-note-size,10px);line-height:var(--design-practice-derivation-compare-note-line-height,1.55)}

@media(max-width:980px){
  .practice-finder-stage{grid-template-columns:1fr;gap:12px}
  .practice-finder-route{grid-template-columns:1fr auto;padding:0 30px}
  .practice-validator-proof-patterns{grid-template-columns:1fr}
}
@media(max-width:640px){
  .practice-finder-stage{padding:12px;border-radius:18px}
  .practice-finder-source-card{padding:15px 11px 13px;border-radius:15px}
  .practice-finder-source-card h3{font-size:25px}
  .practice-finder-degree-rail{--finder-degree-left:54px;--finder-degree-right:16px}
  .practice-finder-degree{min-width:34px}
  .practice-finder-degree>span{width:23px;height:23px}
  .practice-finder-rule-step{align-items:flex-start;flex-direction:column}
  .practice-finder-rule-buttons{width:100%}
  .practice-finder-rule-buttons button{flex:1 1 120px}
  .practice-finder-theory-strip{align-items:flex-start;flex-direction:column}
  .practice-finder-theory-strip strong{text-align:left}
  .practice-validator-proof-verdict{grid-template-columns:1fr}
  .practice-validator-proof-verdict>span{grid-row:auto;justify-self:start}
  .practice-validator-proof-route{grid-template-columns:1fr auto auto 1fr}
  .practice-validator-proof-route span{font-size:16px}
  .practice-validator-diff{grid-template-columns:auto 1fr}.practice-validator-diff small{grid-column:2}
}

html[data-theme="dark"] .practice-finder-stage,
html[data-theme="dark"] .practice-finder-source-card,
html[data-theme="dark"] .practice-finder-target-card,
html[data-theme="dark"] .practice-finder-basis,
html[data-theme="dark"] .practice-finder-route-arrow,
html[data-theme="dark"] .practice-finder-rule-step,
html[data-theme="dark"] .practice-finder-rule-buttons button,
html[data-theme="dark"] .practice-finder-theory-strip,
html[data-theme="dark"] .practice-validator-proof-route,
html[data-theme="dark"] .practice-validator-proof-pattern{
  background:var(--surface-solid);
}

/* =========================================================
   Maqam Academy v19.8 — Find the Derivation notation + keyboard
   ========================================================= */
.practice-finder-keyboard-panel{
  grid-column:1/-1;
  margin:0;
  padding:14px 18px 16px;
  border:1px solid var(--border-300);
  border-radius:18px;
  background:var(--surface-solid);
}
.practice-finder-keyboard-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.practice-finder-target-legend{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  color:var(--muted-600);
  font-size:10px;
  font-weight:750;
}
.practice-finder-target-legend[hidden]{display:none!important}
.practice-finder-target-legend span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}
.practice-finder-target-legend i{
  display:inline-block;
  width:22px;
  height:22px;
  background:transparent;
  opacity:var(--design-practice-keyboard-phantom-opacity,58%);
}
.practice-finder-target-legend i.is-tonic{
  border:2px solid var(--gold-600);
  border-radius:4px;
}
.practice-finder-target-legend i.is-degree{
  border:2px solid var(--key-quarter,#C4624F);
  border-radius:50%;
}

.practice-finder-keyboard-switch{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px;
  border:1px solid var(--border-300);
  border-radius:999px;
  background:var(--card-50);
}
.practice-finder-keyboard-switch[hidden]{display:none!important}
.practice-finder-keyboard-switch button{
  min-height:32px;
  padding:0 12px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--muted-600);
  font:inherit;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.practice-finder-keyboard-switch button.is-selected{
  background:var(--forest-950);
  color:#fff;
}
.practice-finder-keyboard-panel .practice-keyboard-mount{
  margin-top:8px;
}
#practice-feedback>.practice-finder-keyboard-panel{
  margin:0 20px 18px;
}
@media(max-width:720px){
  .practice-finder-keyboard-panel{padding:12px 12px 14px}
  .practice-finder-keyboard-actions{width:100%;justify-content:flex-start}
  .practice-finder-target-legend{width:100%;gap:12px}
  #practice-feedback>.practice-finder-keyboard-panel{margin:0 12px 14px}
}
html[data-theme="dark"] .practice-finder-keyboard-panel,
html[data-theme="dark"] .practice-finder-keyboard-switch{
  background:var(--surface-solid);
}

/* v20.4 — one global Practice instrument choice.
   The selected sound is chosen once in Session settings and then consumed by
   every Practice exercise through the shared MaqamAudio service. */
.practice-settings{
  grid-template-columns:.8fr 1.25fr 1.35fr 1fr;
}
.practice-session-instrument-select{
  width:100%;
  min-height:var(--design-practice-session-option-height);
  border:1px solid var(--border-300);
  border-radius:var(--design-practice-segment-radius);
  background:var(--sand-100);
  color:var(--heading-color);
  padding:0 12px;
  font:800 var(--design-practice-session-option-size) "Montserrat",sans-serif;
  cursor:pointer;
  outline:none;
}
.practice-session-instrument-select:hover:not(:disabled){
  border-color:var(--sage-500);
}
.practice-session-instrument-select:focus-visible{
  border-color:var(--forest-800);
  box-shadow:0 0 0 3px rgba(160,189,181,.18);
}
.practice-session-instrument-select:disabled{
  opacity:.55;
  cursor:not-allowed;
}
html[data-theme="dark"] .practice-session-instrument-select{
  background:var(--sand-100);
  color:var(--heading-color);
  color-scheme:dark;
}
@media(max-width:1000px){
  .practice-settings{grid-template-columns:1fr 1fr}
}
@media(max-width:699px){
  .practice-settings{grid-template-columns:1fr}
}

/* v20.9 — Maqam Lab · Scale Tree Explorer */
.scale-tree-shell{
  display:grid;
  gap:22px;
  padding:24px;
  border:1px solid var(--border-300);
  border-radius:18px;
  background:var(--white);
}
.scale-tree-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.scale-tree-head h2{margin:3px 0 7px;color:var(--heading-color);font-size:clamp(25px,3vw,34px);font-weight:650}
.scale-tree-head p:last-child{max-width:780px;margin:0;color:var(--muted-600);font-size:13px;line-height:1.65}
.scale-tree-rorm-pill{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:34px;padding:6px 11px;border:1px solid var(--border-300);border-radius:999px;
  background:var(--sage-100);color:var(--forest-950);font-size:11px;font-weight:800;white-space:nowrap
}
.scale-tree-controls{
  display:grid;grid-template-columns:minmax(220px,1.15fr) minmax(330px,1.65fr) minmax(120px,.55fr);
  gap:14px;align-items:end;padding:16px;border:1px solid var(--border-300);border-radius:14px;background:var(--control-surface)
}
.scale-tree-source-control,.scale-tree-filter-control{display:grid;gap:7px;min-width:0}
.scale-tree-source-control>span,.scale-tree-filter-control>span,.scale-tree-visible-metric>span{
  color:var(--muted-600);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase
}
.scale-tree-source-control select{width:100%;height:43px}
.scale-tree-filter-buttons{display:flex;min-height:43px;border:1px solid var(--border-300);border-radius:11px;overflow:hidden;background:var(--white)}
.scale-tree-filter-buttons button{
  flex:1;min-width:0;border:0;border-right:1px solid var(--border-300);background:transparent;color:var(--muted-600);
  padding:0 12px;font:inherit;font-size:11px;font-weight:750;cursor:pointer;transition:background .16s ease,color .16s ease
}
.scale-tree-filter-buttons button:last-child{border-right:0}
.scale-tree-filter-buttons button:hover{background:var(--sage-100);color:var(--forest-950)}
.scale-tree-filter-buttons button.is-selected{background:var(--forest-950);color:var(--white)}
.scale-tree-visible-metric{
  display:grid;align-content:center;justify-items:center;gap:3px;min-height:67px;padding:9px;border:1px solid var(--border-300);border-radius:11px;background:var(--white)
}
.scale-tree-visible-metric strong{color:var(--forest-950);font-size:25px;font-weight:700;line-height:1}
.scale-tree-loading{
  display:grid;justify-items:center;gap:7px;padding:36px 18px;border:1px dashed var(--border-300);border-radius:14px;color:var(--muted-600);text-align:center
}
.scale-tree-loading>span{width:24px;height:24px;border:3px solid var(--sage-300);border-top-color:var(--forest-800);border-radius:50%;animation:scale-tree-spin .8s linear infinite}
.scale-tree-loading strong{color:var(--heading-color);font-size:14px}
.scale-tree-loading small{font-size:11px}
@keyframes scale-tree-spin{to{transform:rotate(360deg)}}
.scale-tree-error{padding:13px 15px;border:1px solid #C98376;border-radius:12px;background:#FFF3F0;color:#7E3328;font-size:12px;line-height:1.55}

.scale-tree-source-zone{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);padding-bottom:42px}
.scale-tree-source-card{
  position:relative;grid-column:2;width:min(760px,100%);padding:22px 24px 20px;border:1px solid var(--forest-800);border-radius:16px;background:var(--white);
  box-shadow:0 12px 34px rgba(12,35,30,.07)
}
.scale-tree-source-card::before{content:"";position:absolute;left:-43px;top:50%;width:43px;height:1px;background:var(--forest-800)}
.scale-tree-source-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.scale-tree-source-head h3{margin:3px 0 0}
.scale-tree-source-tonic{display:grid;justify-items:end;gap:3px;text-align:right}
.scale-tree-source-tonic span{color:var(--muted-600);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.scale-tree-source-tonic strong{color:var(--forest-950);font-size:16px;font-weight:750}
.scale-tree-source-staff{height:124px;margin:6px 0 2px;padding:0 4px}
.scale-tree-source-pattern{margin-top:2px;text-align:center}
.scale-tree-source-caption{display:block;margin-top:8px;color:var(--muted-600);font-size:10px;text-align:center}
.scale-tree-source-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}
.scale-tree-source-stats>div{display:grid;gap:3px;padding:9px 10px;border:1px solid var(--border-300);border-radius:10px;background:var(--control-surface);text-align:center}
.scale-tree-source-stats span{color:var(--muted-600);font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.scale-tree-source-stats strong{color:var(--forest-950);font-size:18px}
.scale-tree-root-line{position:absolute;left:41px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--forest-800),var(--sage-400))}
.scale-tree-root-line>span{position:absolute;left:50%;top:calc(50% - 5px);width:12px;height:12px;transform:translate(-50%,-50%);border:3px solid var(--white);border-radius:50%;background:var(--forest-800);box-shadow:0 0 0 1px var(--forest-800)}

.scale-tree-map{position:relative}
#scale-tree-rows{position:relative;display:grid;gap:24px}
#scale-tree-rows::before{content:"";position:absolute;left:41px;top:-42px;bottom:26px;width:2px;background:var(--sage-400)}
.scale-tree-degree-row{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);align-items:start;min-width:0}
.scale-tree-degree-row::after{content:"";position:absolute;left:42px;top:34px;width:42px;height:1px;background:var(--sage-500)}
.scale-tree-degree-node{
  position:relative;z-index:2;display:grid;justify-items:center;align-content:center;gap:2px;width:68px;min-height:68px;margin-left:8px;
  padding:7px;border:1px solid var(--forest-800);border-radius:14px;background:var(--white);box-shadow:0 8px 22px rgba(12,35,30,.07);text-align:center
}
.scale-tree-degree-node span{color:var(--gold-700);font-size:11px;font-weight:850;letter-spacing:.06em}
.scale-tree-degree-node strong{color:var(--forest-950);font-size:11px;line-height:1.25}
.scale-tree-degree-node small{color:var(--muted-600);font-size:8.5px}
.scale-tree-degree-branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:13px;padding-left:18px;min-width:0}
.scale-tree-branch-card{
  display:grid;grid-template-rows:auto auto minmax(90px,auto) auto auto;gap:9px;min-width:0;padding:15px 14px 14px;
  border:1px solid var(--border-300);border-radius:14px;background:var(--white);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease
}
.scale-tree-branch-card:hover{transform:translateY(-2px);border-color:var(--sage-500);box-shadow:0 10px 25px rgba(12,35,30,.07)}
.scale-tree-branch-card.is-selected{border-color:var(--forest-800);box-shadow:0 0 0 3px rgba(19,67,57,.11),0 12px 28px rgba(12,35,30,.08)}
.scale-tree-branch-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.scale-tree-rule-pill{display:inline-flex;align-items:center;min-height:25px;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:850;white-space:nowrap}
.scale-tree-rule-pill.primary{background:var(--sage-200);color:var(--forest-950)}
.scale-tree-rule-pill.secondary{background:var(--gold-200);color:#6B4A14}
.scale-tree-start-note{color:var(--muted-600);font-size:9.5px;font-weight:750;text-align:right}
.scale-tree-branch-copy{display:grid;gap:3px;min-width:0}
.scale-tree-branch-copy h3{margin:0;font-size:18px;line-height:1.12}
.scale-tree-branch-copy small{min-height:26px;color:var(--muted-600);font-size:9.5px;line-height:1.35}
.scale-tree-branch-staff{height:94px;padding:0 2px;overflow:hidden}
.scale-tree-branch-pattern{min-height:25px;text-align:center;font-size:10px}
.scale-tree-proof-button{justify-self:stretch;width:100%}
.scale-tree-empty{display:grid;gap:5px;margin-left:84px;padding:28px;border:1px dashed var(--border-300);border-radius:14px;text-align:center;color:var(--muted-600)}
.scale-tree-empty strong{color:var(--heading-color);font-size:16px}
.scale-tree-empty span{font-size:11px;line-height:1.5}

.scale-tree-proof-panel{scroll-margin-top:96px;padding:20px;border:1px solid var(--forest-800);border-radius:16px;background:var(--white)}
.scale-tree-proof-heading{position:relative;padding-right:46px}
.scale-tree-proof-close{
  position:absolute;right:0;top:0;width:34px;height:34px;border:1px solid var(--border-300);border-radius:10px;background:var(--control-surface);color:var(--forest-950);
  font:inherit;font-size:20px;line-height:1;cursor:pointer
}
.scale-tree-proof-close:hover{border-color:var(--forest-800);background:var(--sage-100)}

html[data-theme="dark"] .scale-tree-shell,
html[data-theme="dark"] .scale-tree-source-card,
html[data-theme="dark"] .scale-tree-degree-node,
html[data-theme="dark"] .scale-tree-branch-card,
html[data-theme="dark"] .scale-tree-proof-panel{background:var(--dark-card,#152720)}
html[data-theme="dark"] .scale-tree-controls,
html[data-theme="dark"] .scale-tree-source-stats>div{background:rgba(255,255,255,.035)}
html[data-theme="dark"] .scale-tree-filter-buttons,
html[data-theme="dark"] .scale-tree-visible-metric{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .scale-tree-filter-buttons button.is-selected{background:var(--sage-200);color:var(--forest-950)}
html[data-theme="dark"] .scale-tree-root-line>span{border-color:var(--dark-card,#152720)}
html[data-theme="dark"] .scale-tree-error{background:rgba(180,92,75,.12);color:#F1C1B8}

@media(max-width:980px){
  .scale-tree-controls{grid-template-columns:1fr 1fr}
  .scale-tree-visible-metric{grid-column:1/-1;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:12px;min-height:48px}
  .scale-tree-visible-metric strong{font-size:20px}
  .scale-tree-degree-branches{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}
@media(max-width:720px){
  .scale-tree-shell{padding:17px;gap:17px}
  .scale-tree-head{flex-direction:column;gap:10px}
  .scale-tree-controls{grid-template-columns:1fr}
  .scale-tree-visible-metric{grid-column:auto}
  .scale-tree-filter-buttons{display:grid;grid-template-columns:1fr}
  .scale-tree-filter-buttons button{min-height:39px;border-right:0;border-bottom:1px solid var(--border-300)}
  .scale-tree-filter-buttons button:last-child{border-bottom:0}
  .scale-tree-source-zone{grid-template-columns:58px minmax(0,1fr);padding-bottom:32px}
  .scale-tree-source-card{padding:17px 14px 15px}
  .scale-tree-source-card::before{left:-30px;width:30px}
  .scale-tree-source-head{flex-direction:column;gap:7px}
  .scale-tree-source-tonic{justify-items:start;text-align:left}
  .scale-tree-source-stats{grid-template-columns:1fr 1fr 1fr}
  .scale-tree-root-line,#scale-tree-rows::before{left:28px}
  .scale-tree-root-line>span{top:calc(50% - 3px)}
  .scale-tree-degree-row{grid-template-columns:58px minmax(0,1fr)}
  .scale-tree-degree-row::after{left:29px;width:29px}
  .scale-tree-degree-node{width:52px;min-height:62px;margin-left:2px;padding:5px;border-radius:12px}
  .scale-tree-degree-node strong{font-size:9px}
  .scale-tree-degree-node small{font-size:7.5px}
  .scale-tree-degree-branches{grid-template-columns:1fr;padding-left:11px}
  .scale-tree-empty{margin-left:58px}
}
@media(max-width:460px){
  .scale-tree-source-stats{grid-template-columns:1fr}
  .scale-tree-source-staff{height:108px}
  .scale-tree-degree-row{grid-template-columns:48px minmax(0,1fr)}
  .scale-tree-root-line,#scale-tree-rows::before{left:23px}
  .scale-tree-degree-row::after{left:24px;width:24px}
  .scale-tree-degree-node{width:46px;min-height:58px;margin-left:0}
  .scale-tree-degree-branches{padding-left:8px}
  .scale-tree-empty{margin-left:48px}
}

/* v21.0 — Maqam Lab shared settings + Scale Tree interaction/layout polish. */
.maqam-lab-global-settings{
  grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);
  margin:18px 0 28px;
}

.scale-tree-shell{--scale-tree-trunk-x:42px}
.scale-tree-source-zone{
  position:relative;
  display:flex;
  justify-content:center;
  padding:0 84px 56px;
}
.scale-tree-source-card{
  width:min(760px,100%);
  justify-self:auto;
}
.scale-tree-source-card::before{display:none}
.scale-tree-source-connector{
  position:absolute;
  left:var(--scale-tree-trunk-x);
  right:50%;
  bottom:0;
  height:2px;
  background:var(--sage-400);
  pointer-events:none;
}
.scale-tree-source-connector::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:2px;
  height:56px;
  background:var(--sage-400);
}
#scale-tree-rows{gap:26px}
#scale-tree-rows::before{
  left:var(--scale-tree-trunk-x);
  top:0;
  bottom:30px;
  background:var(--sage-400);
}
.scale-tree-degree-row{
  grid-template-columns:84px minmax(0,1fr);
}
.scale-tree-degree-row::after{
  left:var(--scale-tree-trunk-x);
  top:34px;
  width:42px;
  background:var(--sage-500);
}
.scale-tree-degree-main{display:grid;gap:0;min-width:0}
.scale-tree-degree-branches{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
  padding-left:18px;
}
.scale-tree-proof-slot{min-width:0;padding-left:18px}
.scale-tree-proof-slot:empty{display:none}
.scale-tree-proof-panel{
  width:100%;
  margin-top:14px;
  scroll-margin-top:96px;
}
.scale-tree-branch-card{cursor:pointer}
.scale-tree-branch-card:focus-visible{
  outline:3px solid rgba(160,189,181,.28);
  outline-offset:3px;
}
.scale-tree-branch-card .scale-tree-proof-button{cursor:pointer}
.scale-tree-source-staff .maqam-vf-note,
.scale-tree-branch-staff .maqam-vf-note{cursor:pointer}

html.scale-tree-modal-open{overflow:hidden}
.scale-tree-maqam-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:28px;
}
.scale-tree-maqam-modal[hidden]{display:none!important}
.scale-tree-maqam-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:rgba(6,24,20,.62);
  backdrop-filter:blur(4px);
  cursor:pointer;
}
.scale-tree-maqam-dialog{
  position:relative;
  z-index:1;
  width:min(1080px,100%);
  max-height:min(88vh,900px);
  overflow:auto;
  padding:24px;
  border:1px solid var(--forest-800);
  border-radius:20px;
  background:var(--surface-solid);
  box-shadow:0 28px 80px rgba(6,24,20,.24);
}
.scale-tree-maqam-dialog-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 42px;
  align-items:start;
  gap:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border-300);
}
.scale-tree-maqam-dialog-head h2{
  margin:2px 0 5px;
  color:var(--heading-color);
  font:650 clamp(32px,4vw,46px)/1 "Cormorant Garamond",Georgia,serif;
}
.scale-tree-maqam-dialog-head p:last-child{
  margin:0;
  color:var(--muted-600);
  font-size:11px;
  line-height:1.5;
}
.scale-tree-popup-tonic{
  display:grid;
  justify-items:end;
  gap:3px;
  padding-top:3px;
  text-align:right;
}
.scale-tree-popup-tonic span{
  color:var(--muted-600);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.scale-tree-popup-tonic strong{color:var(--forest-950);font-size:18px;font-weight:800}
.scale-tree-maqam-close{
  width:38px;
  height:38px;
  border:1px solid var(--border-300);
  border-radius:11px;
  background:var(--control-surface);
  color:var(--forest-950);
  font:500 24px/1 "Montserrat",sans-serif;
  cursor:pointer;
}
.scale-tree-maqam-close:hover{border-color:var(--forest-800);background:var(--sage-100)}
.scale-tree-popup-loading{
  min-height:260px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  color:var(--muted-600);
  text-align:center;
}
.scale-tree-popup-loading>span{
  width:26px;
  height:26px;
  border:3px solid var(--sage-300);
  border-top-color:var(--forest-800);
  border-radius:50%;
  animation:scale-tree-spin .8s linear infinite;
}
.scale-tree-popup-loading strong{color:var(--heading-color);font-size:12px}
.scale-tree-popup-error{
  margin-top:18px;
  padding:16px;
  border:1px solid #C98376;
  border-radius:12px;
  background:#FFF3F0;
  color:#7E3328;
  font-size:11px;
  line-height:1.55;
}
.scale-tree-popup-content{display:grid;gap:16px;padding-top:14px}
.scale-tree-popup-staff{
  width:100%;
  min-height:330px;
  overflow:hidden;
}
.scale-tree-popup-staff .staff-svg{display:block;margin:0 auto;max-width:100%}
.scale-tree-popup-interval-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:11px 14px;
  border:1px solid var(--border-300);
  border-radius:11px;
  background:var(--control-surface);
}
.scale-tree-popup-interval-strip span,
.scale-tree-popup-section-head span{
  color:var(--muted-600);
  font-size:9px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.scale-tree-popup-interval-strip strong{color:var(--heading-color);font-size:13px;font-weight:700;text-align:right}
.scale-tree-popup-analysis{
  display:grid;
  gap:10px;
  padding:14px;
  border:1px solid var(--border-300);
  border-radius:13px;
  background:var(--surface-solid);
}
.scale-tree-popup-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.scale-tree-popup-section-head strong{color:var(--forest-950);font-size:11px;font-weight:800}
.scale-tree-popup-analysis-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.scale-tree-popup-analysis-grid>div{
  display:grid;
  gap:3px;
  padding:11px 12px;
  border:1px solid var(--border-300);
  border-radius:10px;
  background:var(--control-surface);
}
.scale-tree-popup-analysis-grid span{color:var(--muted-600);font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.scale-tree-popup-analysis-grid strong{color:var(--heading-color);font-size:12px;font-weight:800}
.scale-tree-popup-analysis-grid small{color:var(--muted-600);font-size:9px}
.scale-tree-popup-analysis-empty{grid-column:1/-1;color:var(--muted-600);font-size:10px;line-height:1.55}

html[data-theme="dark"] .scale-tree-maqam-dialog,
html[data-theme="dark"] .scale-tree-popup-analysis{background:var(--dark-card,#152720)}
html[data-theme="dark"] .scale-tree-popup-analysis-grid>div,
html[data-theme="dark"] .scale-tree-popup-interval-strip{background:rgba(255,255,255,.035)}
html[data-theme="dark"] .scale-tree-popup-error{background:rgba(180,92,75,.12);color:#F1C1B8}

@media(max-width:1100px){
  .scale-tree-degree-branches{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .maqam-lab-global-settings{grid-template-columns:1fr}
  .scale-tree-shell{--scale-tree-trunk-x:28px}
  .scale-tree-source-zone{padding:0 0 44px}
  .scale-tree-source-connector::after{height:44px}
  .scale-tree-degree-row{grid-template-columns:58px minmax(0,1fr)}
  .scale-tree-degree-row::after{left:var(--scale-tree-trunk-x);width:30px}
  .scale-tree-degree-main{min-width:0}
  .scale-tree-degree-branches{grid-template-columns:1fr;padding-left:11px}
  .scale-tree-proof-slot{padding-left:11px}
  .scale-tree-maqam-modal{padding:12px}
  .scale-tree-maqam-dialog{padding:17px;border-radius:16px}
  .scale-tree-maqam-dialog-head{grid-template-columns:minmax(0,1fr) 38px;gap:12px}
  .scale-tree-popup-tonic{grid-column:1/2;grid-row:2;justify-items:start;text-align:left}
  .scale-tree-maqam-close{grid-column:2;grid-row:1}
  .scale-tree-popup-staff{min-height:280px}
  .scale-tree-popup-analysis-grid{grid-template-columns:1fr}
  .scale-tree-popup-interval-strip{align-items:flex-start;flex-direction:column}
  .scale-tree-popup-interval-strip strong{text-align:left}
}
@media(max-width:460px){
  .scale-tree-shell{--scale-tree-trunk-x:23px}
  .scale-tree-degree-row{grid-template-columns:48px minmax(0,1fr)}
  .scale-tree-degree-row::after{width:25px}
  .scale-tree-degree-branches,.scale-tree-proof-slot{padding-left:8px}
}
.scale-tree-popup-loading[hidden],
.scale-tree-popup-content[hidden],
.scale-tree-popup-error[hidden]{display:none!important}

/* v24.9 — Maqam Lab page-owned Design controls.
   Shared cards, buttons, dropdowns, icons and Help remain governed by their
   existing Academy-wide component tokens. */
.maqam-lab-shell-page{
  width:min(var(--design-lab-page-max-width),calc(100% - (var(--design-lab-page-side-gap) * 2)));
  padding-top:var(--design-lab-page-pad-top);
  padding-bottom:var(--design-lab-page-pad-bottom);
  gap:var(--design-lab-page-gap);
}
.maqam-lab-hero{
  gap:var(--design-lab-hero-gap);
  padding:var(--design-lab-hero-pad-y) var(--design-lab-hero-pad-x);
}
.maqam-lab-hero h1{font-size:clamp(34px,6vw,var(--design-lab-hero-title-size))}
.maqam-lab-hero>div:first-child>p:last-child{font-size:var(--design-lab-hero-copy-size)}
.maqam-lab-hero-mark{
  width:calc(var(--design-lab-hero-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  height:calc(var(--design-lab-hero-icon-size) + var(--design-icon-padding) + var(--design-icon-padding));
  padding:var(--design-icon-padding);
  transform:translate(var(--design-lab-hero-icon-x),var(--design-lab-hero-icon-y)) rotate(var(--design-lab-hero-icon-rotation));
}
.maqam-lab-hero-mark img{width:var(--design-lab-hero-icon-size);height:var(--design-lab-hero-icon-size);object-fit:contain}
.maqam-lab-global-settings{
  grid-template-columns:minmax(0,var(--design-lab-settings-first-column)) minmax(240px,var(--design-lab-settings-second-column));
  margin-top:var(--design-lab-settings-margin-top);
  margin-bottom:var(--design-lab-settings-margin-bottom);
}
.maqam-lab-catalog{margin-top:var(--design-lab-catalog-top-gap)}
.maqam-lab-feature-grid{
  grid-template-columns:repeat(var(--design-lab-catalog-columns),minmax(0,1fr));
  max-width:var(--design-lab-catalog-max-width);
}
.maqam-lab-feature-grid .practice-exercise-card{min-height:var(--design-lab-catalog-card-min-height)}
.maqam-lab-card--build .practice-card-icon img{transform:translate(var(--design-lab-build-icon-x),var(--design-lab-build-icon-y)) rotate(var(--design-lab-build-icon-rotation)) scale(var(--design-lab-build-icon-scale))}
.maqam-lab-card--tree .practice-card-icon img{transform:translate(var(--design-lab-tree-icon-x),var(--design-lab-tree-icon-y)) rotate(var(--design-lab-tree-icon-rotation)) scale(var(--design-lab-tree-icon-scale))}
.maqam-lab-card--chess .practice-card-icon img{transform:translate(var(--design-lab-chess-icon-x),var(--design-lab-chess-icon-y)) rotate(var(--design-lab-chess-icon-rotation)) scale(var(--design-lab-chess-icon-scale))}
.maqam-lab-card--harmony{opacity:var(--design-lab-harmony-opacity)}
.maqam-lab-card--harmony .practice-card-icon img{transform:translate(var(--design-lab-harmony-icon-x),var(--design-lab-harmony-icon-y)) rotate(var(--design-lab-harmony-icon-rotation)) scale(var(--design-lab-harmony-icon-scale))}
.maqam-lab-tool-intro{gap:var(--design-lab-tool-intro-gap)}
.maqam-lab-tool-actions{gap:var(--design-lab-tool-action-gap)}
.maqam-lab-tool-intro h2{font-size:var(--design-lab-tool-title-size)}
.maqam-lab-tool-intro>div:first-child>p:last-child{font-size:var(--design-lab-tool-copy-size)}
.maqam-lab-tool-status strong{font-size:var(--design-lab-tool-status-size)}

@media(max-width:900px){
  .maqam-lab-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .maqam-lab-global-settings{grid-template-columns:1fr}
}
@media(max-width:640px){
  .maqam-lab-feature-grid{grid-template-columns:1fr}
}

/* v21.1 — shared Academy abbreviation system */
.academy-abbr{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:4px;
  vertical-align:middle;
  white-space:nowrap;
}
.academy-abbr-token{font:inherit;color:inherit}
.academy-abbr-info{
  display:inline-grid;
  place-items:center;
  width:15px;
  height:15px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--muted-600);
  font:700 12px/1 "Montserrat",sans-serif;
  cursor:help;
  opacity:.78;
  transition:opacity .16s ease,color .16s ease,background .16s ease;
}
.academy-abbr-info:hover,
.academy-abbr-info:focus-visible,
.academy-abbr.is-open .academy-abbr-info{
  color:var(--forest-950);
  opacity:1;
}
.academy-abbr-info:focus-visible{
  outline:2px solid color-mix(in srgb,var(--forest-800) 38%,transparent);
  outline-offset:2px;
}
.academy-abbr>.academy-abbr-bubble{
  position:absolute;
  z-index:80;
  left:50%;
  bottom:calc(100% + 9px);
  width:max-content;
  max-width:min(290px,75vw);
  padding:8px 10px;
  border:1px solid var(--border-300);
  border-radius:9px;
  background:var(--forest-950);
  box-shadow:0 10px 28px rgba(6,24,20,.18);
  color:#fff;
  font:650 10px/1.45 "Montserrat",sans-serif;
  letter-spacing:0;
  text-align:left;
  text-transform:none;
  white-space:normal;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,4px);
  transition:opacity .14s ease,transform .14s ease;
}
.academy-abbr>.academy-abbr-bubble::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  width:8px;
  height:8px;
  background:var(--forest-950);
  transform:translate(-50%,-4px) rotate(45deg);
}
.academy-abbr:hover .academy-abbr-bubble,
.academy-abbr:focus-within .academy-abbr-bubble,
.academy-abbr.is-open .academy-abbr-bubble{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0);
}
.academy-abbr [hidden]{display:none!important}

.scale-tree-degree-node>span{overflow:visible}
.scale-tree-degree-abbr{justify-content:center;color:inherit}
.scale-tree-degree-abbr .academy-abbr-info{color:currentColor;font-size:10px;width:13px;height:13px}
.scale-tree-degree-abbr .academy-abbr-bubble{font-size:9.5px}
.scale-tree-abbreviation-link{
  display:inline-flex;
  margin-top:8px;
  color:var(--muted-600);
  font-size:9.5px;
  font-weight:700;
  text-decoration:none;
}
.scale-tree-abbreviation-link:hover{color:var(--forest-800);text-decoration:underline}

.guide-abbreviations>p{max-width:930px}
.guide-abbreviation-note{
  display:flex;
  align-items:center;
  gap:14px;
  margin:17px 0 20px;
  padding:12px 14px;
  border:1px solid var(--border-300);
  border-radius:12px;
  background:var(--control-surface);
}
.academy-abbr-static{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  color:var(--forest-950);
}
.academy-abbr-static strong{font-size:13px;font-weight:850}
.academy-abbr-static b{color:var(--muted-600);font:700 12px/1 "Montserrat",sans-serif}
.guide-abbreviation-note p{margin:0;color:var(--muted-600);font-size:10.5px;line-height:1.55}
.guide-abbreviation-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;
}
.guide-abbreviation-item{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:14px;
  align-items:start;
  min-width:0;
  padding:13px 14px;
  border:1px solid var(--border-300);
  border-radius:11px;
  background:var(--control-surface);
}
.guide-abbreviation-short{
  color:var(--forest-800);
  font-size:11px;
  font-weight:850;
  line-height:1.35;
}
.guide-abbreviation-item h3{
  margin:0 0 4px;
  color:var(--heading-color);
  font-size:11.5px;
  font-weight:800;
}
.guide-abbreviation-item p{
  margin:0;
  color:var(--muted-600);
  font-size:10px;
  line-height:1.55;
}
html[data-theme="dark"] .guide-abbreviation-note,
html[data-theme="dark"] .guide-abbreviation-item{background:rgba(255,255,255,.035)}
html[data-theme="dark"] .academy-abbr-bubble{background:#e9efe9;color:#102821;border-color:rgba(255,255,255,.16)}
html[data-theme="dark"] .academy-abbr-bubble::after{background:#e9efe9}

@media(max-width:720px){
  .guide-abbreviation-list{grid-template-columns:1fr}
  .guide-abbreviation-item{grid-template-columns:96px minmax(0,1fr)}
  .academy-abbr-bubble{max-width:min(250px,72vw)}
}
@media(max-width:460px){
  .guide-abbreviation-note{align-items:flex-start}
  .guide-abbreviation-item{grid-template-columns:1fr;gap:5px}
}

/* v21.6.2 — Scale Tree Practice must span the complete answer grid.
   #practice-choices is normally a two-column multiple-choice grid; without
   this override the entire Scale Tree app is confined to its first column. */
#practice-choices:has(> .practice-scale-tree-shell){
  grid-template-columns:minmax(0,1fr);
}
#practice-choices>.practice-scale-tree-shell{
  grid-column:1/-1;
  min-width:0;
}

/* v21.6.1 — Scale Tree Practice centered branch layout.
   The Practice app uses the approved centered layout study while the
   Scale Tree Explorer keeps its own shared tree rules above. */
.practice-scale-tree-shell{
  display:grid;
  gap:0;
  width:100%;
  padding:34px clamp(20px,4vw,58px) 28px;
  border-radius:24px;
  background:color-mix(in srgb,var(--white) 72%,transparent);
  overflow:visible;
}
.practice-scale-tree-source-zone{
  position:relative;
  display:flex;
  justify-content:center;
  width:100%;
  padding:0 0 0;
}
.practice-scale-tree-source-zone::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-64px;
  width:1px;
  height:64px;
  transform:translateX(-50%);
  background:var(--sage-500);
  pointer-events:none;
}
.practice-scale-tree-source-card{
  position:relative;
  grid-column:auto;
  width:min(100%,640px);
  margin:0 auto;
  padding:29px 36px 26px;
  border:1.5px solid var(--teal-700);
  border-radius:19px;
  background:var(--white);
  box-shadow:0 14px 34px rgba(12,35,30,.07);
}
.practice-scale-tree-source-card::before{display:none}
.practice-scale-tree-source-card .scale-tree-source-head h3{
  margin:3px 0 0;
  font-size:31px;
  line-height:1.08;
}
.practice-scale-tree-source-card .scale-tree-source-tonic strong{font-size:23px}
.practice-scale-tree-source-staff{
  height:132px;
  margin:10px 0 4px;
  padding:0 6px;
  overflow:hidden;
}
.practice-scale-tree-source-pattern{
  margin-top:4px;
  text-align:center;
  font-size:13px;
}
.practice-scale-tree-source-caption{
  display:block;
  margin-top:9px;
  color:var(--muted-600);
  font-size:11px;
  text-align:center;
}
.practice-scale-tree-map{
  position:relative;
  width:100%;
  max-width:1120px;
  margin:0 auto;
  min-width:0;
}
.practice-scale-tree-rows{
  position:relative;
  display:grid;
  gap:54px;
  width:100%;
  padding-top:64px;
}
.practice-scale-tree-rows::before{display:none}
.practice-scale-tree-branch-cluster{
  position:relative;
  display:grid;
  width:100%;
  min-width:0;
  padding-top:56px;
}
.practice-scale-tree-branch-cluster+.practice-scale-tree-branch-cluster{
  margin-top:8px;
  padding-top:72px;
  border-top:1px solid color-mix(in srgb,var(--border-300) 58%,transparent);
}
.practice-scale-tree-branch-trunk{
  position:absolute;
  top:0;
  left:50%;
  width:1px;
  height:49px;
  transform:translateX(-50%);
  background:var(--sage-500);
  pointer-events:none;
}
.practice-scale-tree-branch-cluster+.practice-scale-tree-branch-cluster .practice-scale-tree-branch-trunk{
  top:16px;
  height:49px;
}
.practice-scale-tree-branch-node{
  position:absolute;
  top:38px;
  left:50%;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:42px;
  padding:9px 15px;
  transform:translateX(-50%);
  border:1.5px solid var(--teal-700);
  border-radius:14px;
  background:var(--white);
  box-shadow:0 8px 18px rgba(12,35,30,.05);
  white-space:nowrap;
}
.practice-scale-tree-branch-cluster+.practice-scale-tree-branch-cluster .practice-scale-tree-branch-node{top:54px}
.practice-scale-tree-branch-node strong{
  display:inline-flex;
  align-items:center;
  color:var(--forest-950);
  font-size:14px;
  font-weight:800;
}
.practice-scale-tree-branch-node>span{
  color:var(--muted-600);
  font-size:11px;
  font-weight:700;
}
.practice-scale-tree-branch-lines{
  position:relative;
  height:62px;
  margin-top:24px;
  pointer-events:none;
}
.practice-scale-tree-branch-rail{
  position:absolute;
  top:21px;
  left:16.666%;
  right:16.666%;
  height:1px;
  background:var(--sage-500);
}
.practice-scale-tree-branch-drop{
  position:absolute;
  top:21px;
  width:1px;
  height:41px;
  background:var(--sage-500);
}
.practice-scale-tree-branch-drop.d1{left:16.666%}
.practice-scale-tree-branch-drop.d2{left:50%}
.practice-scale-tree-branch-drop.d3{left:83.333%}
.practice-scale-tree-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  align-items:stretch;
  width:100%;
  min-width:0;
  padding:0;
}
.practice-scale-tree-option{
  position:relative;
  display:flex;
  flex-direction:column;
  grid-template-rows:none;
  gap:0;
  min-width:0;
  min-height:398px;
  padding:22px 20px 18px;
  border:1.5px solid #a9c5bd;
  border-radius:18px;
  background:var(--white);
  box-shadow:0 10px 24px rgba(12,35,30,.045);
  cursor:pointer;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.practice-scale-tree-option:hover{
  transform:translateY(-3px);
  border-color:var(--teal-700);
  box-shadow:0 14px 30px rgba(12,35,30,.08);
}
.practice-scale-tree-option:focus-visible{
  outline:3px solid color-mix(in srgb,var(--teal-700) 24%,transparent);
  outline-offset:3px;
}
.practice-scale-tree-option.is-selected{
  border-color:var(--forest-800);
  box-shadow:0 0 0 4px rgba(160,189,181,.23),0 14px 30px rgba(12,35,30,.08);
}
.practice-scale-tree-option[aria-disabled="true"]{cursor:default}
.practice-scale-tree-option[aria-disabled="true"]:hover{transform:none}
.practice-scale-tree-option .scale-tree-branch-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:15px;
}
.practice-scale-tree-option-pill{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  min-height:26px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--sand-100);
  color:var(--muted-600);
  font-size:9px;
  font-weight:850;
  white-space:nowrap;
}
.practice-scale-tree-option-pill.primary{background:var(--sage-200);color:var(--forest-950)}
.practice-scale-tree-option-pill.secondary{background:var(--gold-200);color:#6B4A14}
.practice-scale-tree-option .scale-tree-start-note{font-size:10px}
.practice-scale-tree-option .scale-tree-branch-copy{
  display:grid;
  gap:4px;
  min-width:0;
}
.practice-scale-tree-option .scale-tree-branch-copy h3{
  margin:0;
  font-size:clamp(25px,2vw,32px);
  line-height:1.05;
  overflow-wrap:anywhere;
}
.practice-scale-tree-option .scale-tree-branch-copy small{
  min-height:40px;
  margin-top:7px;
  color:var(--muted-600);
  font-size:11px;
  line-height:1.45;
}
.practice-scale-tree-option-staff{
  height:100px;
  margin:10px 0 8px;
  padding:0 2px;
  overflow:hidden;
}
.practice-scale-tree-option-staff[hidden]{display:none!important}
.practice-scale-tree-option:has(.practice-scale-tree-option-staff[hidden]){min-height:300px}
.practice-scale-tree-option-pattern{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-height:52px;
  margin-top:auto;
  text-align:center;
  font-size:12px;
  line-height:1.45;
}
.practice-scale-tree-proof-button{
  width:100%;
  min-height:40px;
  margin-top:16px;
  justify-content:center;
}
.practice-scale-tree-option.is-correct{
  border-color:var(--forest-800);
  background:linear-gradient(180deg,color-mix(in srgb,var(--sage-200) 42%,var(--white)),var(--white) 38%);
  box-shadow:0 0 0 3px rgba(19,67,57,.11),0 12px 28px rgba(12,35,30,.08);
}
.practice-scale-tree-option.is-wrong{
  border-color:#B75B50;
  background:linear-gradient(180deg,color-mix(in srgb,#F3DDD8 30%,var(--white)),var(--white) 40%);
}
.practice-scale-tree-rule-step{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:min(100%,760px);
  margin:20px auto 0;
  padding:11px 12px;
  border:1px solid var(--border-300);
  border-radius:11px;
  background:var(--control-surface);
}
.practice-scale-tree-rule-step>div:first-child{display:grid;gap:3px}
.practice-scale-tree-rule-step>div:first-child span{
  color:var(--muted-600);
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.practice-scale-tree-rule-step>div:first-child strong{color:var(--forest-950);font-size:10px}
.practice-scale-tree-proof-slot{
  width:100%;
  min-width:0;
  padding:0;
}
.practice-scale-tree-proof-slot:empty{display:none}
.practice-scale-tree-proof-slot .practice-derivation-proof-card{
  width:100%;
  margin:18px 0 0;
}
.practice-scale-tree-proof-button.is-selected{border-color:var(--forest-800);background:var(--sage-100)}
.practice-scale-tree-theory-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:28px;
  padding:10px 12px;
  border:1px solid var(--border-300);
  border-radius:11px;
  background:var(--control-surface);
}
.practice-scale-tree-theory-strip span{color:var(--forest-800);font-size:9px;font-weight:850}
.practice-scale-tree-theory-strip strong{color:var(--muted-600);font-size:9px;font-weight:700;text-align:right}
.scale-tree-degree-abbr{justify-content:center;color:inherit}
.scale-tree-degree-abbr .academy-abbr-info{color:currentColor;font-size:10px;width:13px;height:13px}
.scale-tree-degree-abbr .academy-abbr-bubble{font-size:9.5px}

html[data-theme="dark"] .practice-scale-tree-shell{background:rgba(255,255,255,.025)}
html[data-theme="dark"] .practice-scale-tree-source-card,
html[data-theme="dark"] .practice-scale-tree-branch-node,
html[data-theme="dark"] .practice-scale-tree-option{background:var(--dark-card,#152720)}
html[data-theme="dark"] .practice-scale-tree-option.is-correct{
  background:linear-gradient(180deg,rgba(160,189,181,.12),var(--dark-card,#152720) 38%)
}
html[data-theme="dark"] .practice-scale-tree-option.is-wrong{
  background:linear-gradient(180deg,rgba(183,91,80,.13),var(--dark-card,#152720) 40%)
}

@media(max-width:900px){
  .practice-scale-tree-shell{padding:28px 20px}
  .practice-scale-tree-branch-lines{display:none}
  .practice-scale-tree-branch-cluster{padding-top:62px}
  .practice-scale-tree-branch-cluster+.practice-scale-tree-branch-cluster{padding-top:78px}
  .practice-scale-tree-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .practice-scale-tree-option:last-child{grid-column:1/-1;width:min(100%,420px);justify-self:center}
}
@media(max-width:620px){
  .practice-scale-tree-shell{padding:22px 14px 26px;border-radius:18px}
  .practice-scale-tree-source-card{width:100%;padding:20px 18px}
  .practice-scale-tree-source-card .scale-tree-source-head{flex-direction:row;gap:12px}
  .practice-scale-tree-source-card .scale-tree-source-head h3{font-size:23px}
  .practice-scale-tree-source-card .scale-tree-source-tonic{justify-items:end;text-align:right}
  .practice-scale-tree-source-staff{height:104px}
  .practice-scale-tree-rows{gap:38px;padding-top:56px}
  .practice-scale-tree-branch-cluster{padding-top:58px}
  .practice-scale-tree-branch-node{gap:8px;padding:8px 11px}
  .practice-scale-tree-options{grid-template-columns:1fr;gap:16px}
  .practice-scale-tree-option:last-child{grid-column:auto;width:100%}
  .practice-scale-tree-option{min-height:360px;padding:18px 16px 16px}
  .practice-scale-tree-option .scale-tree-branch-copy h3{font-size:26px}
  .practice-scale-tree-rule-step{align-items:flex-start;flex-direction:column}
  .practice-scale-tree-rule-step .practice-finder-rule-buttons{width:100%}
  .practice-scale-tree-theory-strip{align-items:flex-start;flex-direction:column}
  .practice-scale-tree-theory-strip strong{text-align:left}
}