/* The site shell owns web colours and type; the shared projection owns musical colours. */
* { box-sizing:border-box; }
html { scroll-behavior:auto; }
body.secondary-function-tool { margin:0; background:var(--look-parchment); color:var(--look-ink); font:400 17px/1.6 var(--look-sans); color-scheme:light; }
.ct-tool-page { max-width:1120px; margin:0 auto; padding:12px 20px 0; }
.ct-tool-page a { color:var(--look-amber); text-decoration-thickness:1px; text-underline-offset:3px; }
.ct-tool-page a:hover { color:var(--look-ink); }
.secondary-function-tool .skip-link { position:absolute; left:16px; top:-100px; z-index:20; padding:10px 16px; background:var(--look-obsidian); color:var(--look-paper); font:700 15px var(--look-sans); --focus:var(--look-gold); }
.secondary-function-tool .skip-link:focus { top:12px; }
.secondary-function-tool .skip-link:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.ct-breadcrumbs { font-size:13px; color:var(--look-ink-soft); }
.ct-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.ct-tool-intro { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; margin-bottom:12px; }
.ct-tool-subtitle { margin:2px 0 0; font:italic 14px/1.3 var(--look-serif); color:var(--look-ink-soft); }
.ct-tool-intro h1 { font:700 clamp(28px,2.6vw,34px)/1.2 var(--look-serif); margin:0; color:var(--look-ink); }
#ct-secondary-mockup { --ct-paper:var(--look-paper); --ct-ink:var(--look-ink); --ct-muted:var(--look-ink-soft); --ct-line:var(--look-rule); --ct-accent:var(--ct-brand-mahogany); --ct-soft:color-mix(in srgb,var(--ct-brand-mahogany) 8%,var(--look-paper)); --ct-home:color-mix(in srgb,var(--ct-brand-antique-gold) 20%,var(--look-paper)); color:var(--ct-ink); font:400 15px/1.45 var(--look-sans); color-scheme:light; }
#ct-secondary-mockup .ct-sheet { background:var(--ct-paper); border:1px solid var(--ct-line); border-radius:8px; padding:12px; }
#ct-secondary-mockup .ct-heading { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px 28px; margin-bottom:8px; padding-bottom:8px; border-bottom:1px solid var(--ct-line); }
#ct-secondary-mockup .ct-map-title { margin:0; }
#ct-secondary-mockup .ct-chart-selectors { display:flex; gap:14px; align-items:flex-end; }
#ct-secondary-mockup .ct-key-field { display:flex; flex-direction:column; gap:5px; }
#ct-secondary-mockup .ct-key-field > span, #ct-secondary-mockup .ct-transport label { font:700 12px/1.4 var(--look-sans); color:var(--ct-muted); }
#ct-secondary-mockup .ct-key-select { font:500 23px/1.2 var(--look-serif); color:var(--ct-ink); background:var(--look-card); border:1px solid var(--ct-line); border-radius:5px; height:46px; padding:6px 28px 6px 10px; max-width:100%; cursor:pointer; }
#ct-tonic { min-width:86px; }
#ct-mode { width:185px; }
#ct-secondary-mockup .ct-context { display:block; margin-top:7px; color:var(--ct-muted); font-size:12px; }
#ct-secondary-mockup .ct-transport { display:grid; grid-template-columns:auto auto; gap:7px 10px; align-items:end; }
#ct-secondary-mockup .ct-transport label { display:flex; flex-direction:column; gap:5px; }
#ct-secondary-mockup #ct-piano-mode, #ct-secondary-mockup #ct-piano-stop { font:400 15px/1.2 var(--look-sans); color:var(--ct-ink); background:var(--look-card); border:1px solid var(--ct-line); border-radius:5px; padding:10px 12px; min-height:46px; }
#ct-secondary-mockup #ct-piano-stop { cursor:pointer; min-width:70px; }
#ct-secondary-mockup #ct-piano-stop:disabled { opacity:.5; cursor:default; }
#ct-secondary-mockup #ct-piano-stop:not(:disabled) { border-color:var(--ct-accent); color:var(--ct-accent); }
#ct-secondary-mockup #ct-piano-status { grid-column:1/-1; color:var(--ct-muted); font-size:12px; line-height:1.4; height:2.8em; max-width:320px; }
#ct-secondary-mockup :is(button,select,input,summary,[tabindex]):focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.ct-tool-page a:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
#ct-secondary-mockup .ct-scroll-hint { display:none; font-size:12px; color:var(--ct-muted); margin:0 0 8px; }
#ct-secondary-mockup .ct-map-viewport { overflow-x:auto; max-width:100%; padding:4px 0; scrollbar-color:var(--ct-muted) var(--ct-home); }
#ct-secondary-mockup table { width:100%; min-width:790px; table-layout:fixed; border-collapse:collapse; }
#ct-secondary-mockup col.ct-label-col { width:132px; }
#ct-secondary-mockup th, #ct-secondary-mockup td { padding:0; text-align:center; font-weight:400; position:relative; }
#ct-secondary-mockup th.ct-row-label { position:sticky; left:0; z-index:3; background:var(--ct-paper); text-align:left; color:var(--ct-muted); font-size:13px; padding-right:12px; }
#ct-secondary-mockup .ct-sub { display:block; font-size:12px; color:var(--ct-muted); margin-top:3px; }
#ct-secondary-mockup .ct-domain { height:24px; color:var(--ct-muted); font-size:12px; }
#ct-secondary-mockup .ct-approach-row { height:44px; }
#ct-secondary-mockup td.ct-home { background:var(--ct-home); }
#ct-secondary-mockup .ct-chord { appearance:none; font:400 16px/1.3 var(--look-sans); white-space:nowrap; color:var(--ct-muted); background:transparent; border:1px solid transparent; border-radius:5px; min-height:44px; min-width:44px; padding:7px 5px; position:relative; z-index:1; cursor:pointer; }
#ct-secondary-mockup .ct-chord:hover { border-color:var(--ct-muted); }
#ct-secondary-mockup .ct-chord[aria-pressed="true"] { font-weight:600; background:var(--ct-soft); border-color:var(--ct-accent); color:var(--ct-accent); }
#ct-secondary-mockup .ct-stem-cell { height:22px; }
#ct-secondary-mockup .ct-stem { width:1px; height:16px; background:var(--ct-muted); margin:auto; position:relative; }
#ct-secondary-mockup .ct-stem::after { content:""; position:absolute; bottom:0; left:-3px; width:7px; height:7px; border-right:1px solid var(--ct-muted); border-bottom:1px solid var(--ct-muted); transform:rotate(45deg); }
#ct-secondary-mockup .ct-column-active .ct-stem { background:var(--ct-accent); width:2px; }
#ct-secondary-mockup .ct-column-active .ct-stem::after { border-color:var(--ct-accent); }
#ct-secondary-mockup .ct-resolution-row > .ct-row-label { background:var(--look-obsidian); color:var(--look-paper); font-weight:700; border-top:2px solid var(--look-obsidian); border-bottom:2px solid var(--look-obsidian); }
#ct-secondary-mockup .ct-resolution-row > .ct-row-label .ct-sub { color:var(--look-paper); font-weight:400; }
#ct-secondary-mockup td.ct-destination { height:64px; background:var(--look-obsidian); border-top:2px solid var(--look-obsidian); border-bottom:2px solid var(--look-obsidian); vertical-align:middle; }
#ct-secondary-mockup td.ct-destination.ct-home { background:var(--look-obsidian); box-shadow:inset 0 2px var(--look-gold); }
#ct-secondary-mockup td.ct-destination:not(.ct-column-active) { --focus:var(--look-gold); }
#ct-secondary-mockup td.ct-destination.ct-column-active { background:var(--ct-home); border-bottom-color:var(--ct-accent); }
#ct-secondary-mockup .ct-target-option { appearance:none; border:0; background:transparent; color:var(--look-paper); font:600 24px/1.3 var(--look-serif); min-height:44px; min-width:44px; padding:3px; cursor:pointer; }
#ct-secondary-mockup .ct-target-option[aria-pressed="true"] { text-decoration:underline; text-decoration-color:var(--look-gold); text-underline-offset:5px; }
#ct-secondary-mockup .ct-destination.ct-home .ct-target-option { color:var(--look-gold); }
#ct-secondary-mockup .ct-resolution-row .ct-slash { color:var(--look-paper); }
#ct-secondary-mockup .ct-empty { color:var(--ct-muted); }
#ct-secondary-mockup .ct-roman { display:block; color:var(--look-paper); font-size:13px; margin-bottom:5px; }
#ct-secondary-mockup .ct-destination.ct-column-active .ct-target-option, #ct-secondary-mockup .ct-column-active .ct-slash, #ct-secondary-mockup .ct-column-active .ct-roman { color:var(--ct-ink); }
#ct-secondary-mockup .ct-column-active .ct-target-option[aria-pressed="true"] { color:var(--ct-accent); text-decoration-color:currentColor; }
#ct-secondary-mockup .ct-audio-sounding { outline:2px solid var(--ct-accent); outline-offset:-2px; background:var(--ct-soft); }
#ct-secondary-mockup .ct-notation { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; margin-top:8px; padding-top:0; border-top:1px solid var(--ct-line); }
#ct-secondary-mockup .ct-score-workbench { grid-column:1; grid-row:1; display:grid; grid-template-columns:auto minmax(0,max-content); justify-content:center; column-gap:16px; min-width:0; }
#ct-secondary-mockup .ct-voicing { grid-column:1; grid-row:1; align-self:center; display:grid; justify-items:center; gap:3px; }
#ct-secondary-mockup .ct-voicing-label { font-size:12px; color:var(--ct-muted); }
#ct-secondary-mockup .ct-voicing-position { font-size:12px; line-height:16px; min-height:16px; color:var(--ct-muted); font-variant-numeric:tabular-nums; }
#ct-secondary-mockup .ct-voicing button { width:44px; height:44px; padding:0; border:1px solid var(--ct-line); border-radius:5px; background:var(--look-card); color:var(--ct-accent); font:400 24px/1 var(--look-sans); cursor:pointer; }
#ct-secondary-mockup .ct-voicing button[aria-disabled="true"] { color:var(--ct-muted); opacity:.5; cursor:default; }
#ct-secondary-mockup .ct-voicing button[aria-disabled="false"]:hover { border-color:var(--ct-accent); background:var(--ct-soft); }
#ct-secondary-mockup .ct-notation-caption { grid-column:2; grid-row:1; display:flex; flex-direction:column; align-self:center; align-items:flex-start; }
#ct-secondary-mockup :is(.ct-arrow-toggle,.ct-tendency-toggle) { display:inline-flex; align-items:center; gap:7px; font-size:14px; min-height:44px; cursor:pointer; }
#ct-secondary-mockup :is(.ct-arrow-toggle,.ct-tendency-toggle) input { width:16px; height:16px; margin:0; accent-color:var(--ct-accent); }
#ct-secondary-mockup .ct-notation[data-arrows="off"] .ct-voice-arrows { display:none; }
#ct-secondary-mockup .ct-score-scroll { grid-column:2; grid-row:1; overflow-x:auto; max-width:100%; min-width:0; padding:0 0 4px; }
#ct-secondary-mockup .ct-score-analysis { grid-column:2; grid-row:2; margin:0; text-align:center; color:var(--ct-accent); font-size:14px; line-height:1.5; }
#ct-secondary-mockup .ct-score-analysis[data-empty="true"] { line-height:0; }
#ct-secondary-mockup .ct-staff { display:block; margin-inline:auto; overflow:visible; max-width:none; color:var(--ct-ink); }
#ct-secondary-mockup .music-glyph { font-family:Bravura; fill:currentColor; }
#ct-secondary-mockup .ct-score-label { font:700 15px var(--look-sans); fill:currentColor; }
#ct-secondary-mockup .ct-score-wash { fill:transparent; }
#ct-secondary-mockup .ct-score-active { color:var(--ct-accent); }
#ct-secondary-mockup .ct-score-active .ct-score-wash { fill:var(--ct-soft); fill-opacity:.65; }
#ct-secondary-mockup .ct-voice-arrows { color:var(--ct-muted); opacity:.7; pointer-events:none; }
#ct-secondary-mockup .ct-voice-line, #ct-secondary-mockup .ct-voice-tip { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#ct-secondary-mockup .ct-voice-arrows[data-phase="approach"], #ct-secondary-mockup .ct-voice-arrows[data-phase="resolution"] { color:var(--ct-accent); opacity:.9; }
#ct-secondary-mockup .ct-tendency-tags { pointer-events:none; }
#ct-secondary-mockup .ct-tendency-tags rect { fill:var(--look-card); }
#ct-secondary-mockup .ct-tendency-tags text { font:600 11px var(--look-sans); fill:currentColor; }
#ct-secondary-mockup .ct-notation[data-tendencies="off"] .ct-tendency-tags { display:none; }
#ct-secondary-mockup .ct-notation[data-tendencies="on"] .ct-voice-arrows { color:var(--ct-muted); opacity:1; }
#ct-secondary-mockup .ct-voice-arrow:not([data-tendency]) { display:none; }
#ct-secondary-mockup .ct-notation[data-tendencies="on"] [data-tendency="lt"] { color:#0067b1; }
#ct-secondary-mockup .ct-notation[data-tendencies="on"] [data-tendency="seventh"] { color:#b51f68; }
#ct-secondary-mockup .ct-voice-arrows[data-phase="approach"] .ct-voice-line { stroke-dasharray:100; animation:ct-voice-reveal 1.4s linear both; }
@keyframes ct-voice-reveal { from { stroke-dashoffset:100; } to { stroke-dashoffset:0; } }
#ct-secondary-mockup .ct-guide { border-top:1px solid var(--ct-line); margin-top:8px; }
#ct-secondary-mockup .ct-guide summary { min-height:48px; display:list-item; padding:13px 0; cursor:pointer; color:var(--ct-ink); font-weight:700; font-size:14px; }
#ct-secondary-mockup .ct-guide-body { display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; padding:8px 0 10px; font-size:15px; line-height:1.6; }
#ct-secondary-mockup .ct-guide h2 { font:700 20px/1.3 var(--look-serif); margin:0 0 8px; }
#ct-secondary-mockup .ct-guide p { margin:0 0 12px; }
#ct-secondary-mockup .ct-legend { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; margin-bottom:12px; }
#ct-secondary-mockup .ct-home-mark { display:inline-block; width:10px; height:10px; background:var(--look-obsidian); border:1px solid var(--look-gold); margin-right:6px; }
#ct-secondary-mockup .ct-credits { grid-column:1/-1; }
.ct-no-script { padding:20px; border:1px solid var(--look-rule); background:var(--look-paper); }
@media(max-width:900px) { #ct-secondary-mockup .ct-scroll-hint { display:block; } }
@media(max-width:640px) {
  .ct-tool-page { padding:12px 12px 0; }
  .ct-tool-intro { margin-bottom:12px; }
  #ct-secondary-mockup .ct-sheet { padding:12px; }
  #ct-secondary-mockup .ct-heading { gap:14px; }
  #ct-playback-controls { width:100%; }
  #ct-secondary-mockup .ct-transport { grid-template-columns:minmax(0,1fr) auto; }
  #ct-secondary-mockup #ct-piano-status { max-width:none; }
  #ct-secondary-mockup .ct-key-select { font-size:21px; }
  #ct-secondary-mockup #ct-mode { width:174px; }
  #ct-secondary-mockup col.ct-label-col { width:116px; }
  #ct-secondary-mockup th.ct-row-label { padding-right:9px; }
  #ct-secondary-mockup .ct-guide-body { grid-template-columns:minmax(0,1fr); }
  #ct-secondary-mockup .ct-notation { grid-template-columns:minmax(0,1fr); }
  #ct-secondary-mockup .ct-notation-caption { grid-column:1/-1; grid-row:1; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; gap:0 12px; }
  #ct-secondary-mockup :is(.ct-arrow-toggle,.ct-tendency-toggle) { font-size:13px; }
  #ct-secondary-mockup .ct-score-workbench { grid-column:1; grid-row:2; column-gap:8px; }
}
@media(max-width:350px) { #ct-secondary-mockup .ct-chart-selectors { gap:8px; } #ct-secondary-mockup #ct-tonic { min-width:65px; } #ct-secondary-mockup #ct-mode { width:158px; } }
@media(prefers-reduced-motion:reduce) { #ct-secondary-mockup .ct-voice-arrows[data-phase="approach"] .ct-voice-line { animation:none; stroke-dasharray:none; } }