.instrument-hint:has(.wind-photo-fingering) { width:min(410px,100%); max-width:100%; flex-direction:column; padding:10px; }
.wind-photo-fingering { display:grid; grid-template-columns:minmax(0,1fr) minmax(95px,140px); width:min(380px,100%); gap:10px; align-items:start; box-sizing:border-box; }
.wind-photo-main { display:block; min-width:0; position:relative; border:1px solid #b2c7bf; border-radius:10px; overflow:hidden; background:#fff; }
.wind-photo-stage { display:block; width:100%; max-height:360px; }
.wind-photo-hands { display:flex; justify-content:space-around; gap:5px; padding:5px; background:#e9f2ee; color:#254e45; font-size:10px; }
.wind-photo-control rect { fill:#fff; stroke:#b5c4c0; stroke-width:1; }
.wind-photo-control text { fill:#244c42; text-anchor:middle; font:700 17px system-ui,sans-serif; }
.wind-photo-control.closed rect,.wind-photo-control.half rect { fill:#147a6c; }
.wind-photo-control.closed text,.wind-photo-control.half text { fill:white; }
.wind-contact { stroke:#dae6e1; stroke-width:2; }
.wind-contact.open { fill:transparent; }
.wind-contact.closed { fill:#138a77; fill-opacity:.9; stroke:#e7fff5; }
.wind-contact.half { stroke:#e7fff5; }
.wind-contact-motion { transform-box:fill-box; transform-origin:center; }
.wind-photo-control.closed .wind-contact-motion { animation:wind-key-press .18s ease-out both; }
@keyframes wind-key-press { from { transform:translateY(-3px); } to { transform:translateY(0); } }
.wind-photo-extra { display:grid; gap:6px; }
.wind-photo-extra > strong { font-size:10px; color:#34554b; line-height:1.3; }
.wind-photo-aux { display:grid; grid-template-columns:32px 1fr 12px; gap:5px; align-items:center; padding:5px; border:1px solid #cad7d2; border-radius:7px; background:#f7faf8; font-size:10px; color:#34554b; text-align:left; }
.wind-photo-aux i { width:30px; height:30px; display:grid; place-items:center; border:2px solid #91a29b; border-radius:50%; font:700 10px system-ui; color:#344c43; background:radial-gradient(ellipse at 35% 20%,#fff,#d5ded9 55%,#83978b); }
.wind-photo-aux .wind-aux-hole { background:#19251e; color:#fff; }
.wind-photo-aux.closed i { background:radial-gradient(ellipse at 35% 20%,#7bd5b6,#148572 65%,#0c5147); color:#fff; border-color:#0d6f61; }
.wind-photo-aux.half i { background:linear-gradient(90deg,#158579 50%,#19251e 50%); color:white; }
.wind-photo-aux.closed { border-color:#5ba891; }
.wind-photo-legend { grid-column:1/-1; color:#49665b; text-align:center; font-size:9px; line-height:1.4; }
.wind-photo-fingering.is-flute { width:min(620px,100%); grid-template-columns:1fr; }
.is-flute .wind-photo-extra { grid-template-columns:repeat(3,minmax(0,1fr)); }
.is-flute .wind-photo-extra > strong { grid-column:1/-1; }
.instrument-hint:has(.wind-photo-fingering.is-flute) { width:min(620px,100%); }
.fingering-answer:has(.wind-photo-fingering) > .fingering-text { display:none; }
@media(max-width:520px) { .wind-photo-fingering { grid-template-columns:minmax(0,1fr) 112px; gap:7px; } .wind-photo-stage { max-height:290px; } .is-flute .wind-photo-extra { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .wind-photo-control.closed .wind-contact-motion { animation:none; } }
.instrument-hint .wind-photo-stage { max-height:240px; }
@media(min-width:700px) {
  #quiz .music-panel:has(.wind-photo-fingering) { display:grid; grid-template-columns:minmax(160px,1fr) minmax(0,390px); width:min(760px,100%); align-items:center; gap:12px; }
  #quiz .music-panel:has(.wind-photo-fingering) > .instrument-hint { margin:0; box-sizing:border-box; }
}
.is-flute .wind-photo-extra{display:none}
.flute-real-content{display:grid;gap:12px;min-width:0}
.flute-real-panel{display:block;overflow:hidden;border:1px solid #b2c7bf;border-radius:10px;background:white;min-width:0;text-align:center}
.flute-real-panel>strong{display:block;background:#e9f2ee;color:#254e45;font-size:12px;padding:8px}
.flute-real-panel>small{display:block;padding:8px;font-size:10px;color:#49665b}
.flute-real-panel svg{display:block;width:100%;height:auto}
.flute-real-details{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.flute-real-contact{fill:transparent;stroke:white;stroke-width:2;stroke-opacity:.8}
.flute-real-mark.closed .flute-real-contact{fill:#138a77;fill-opacity:.75;stroke:#e7fff5}
.flute-real-leader{fill:none;stroke:#42675e;stroke-width:1.5}
.flute-real-mark text{font:700 14px system-ui;text-anchor:middle;fill:#214c43;stroke:white;stroke-width:5;paint-order:stroke;stroke-linejoin:round}
.flute-real-back .flute-real-mark text,.flute-real-foot .flute-real-mark text{font-size:34px;stroke-width:10}
.flute-real-back .flute-real-contact,.flute-real-foot .flute-real-contact{stroke-width:5}
.flute-real-back .flute-real-leader,.flute-real-foot .flute-real-leader{stroke-width:4;stroke:white}
.flute-photo-credits{font-size:10px;color:#49665b;text-align:left;grid-column:1/-1}
.flute-photo-credits summary{cursor:pointer}
@media(max-width:520px){.flute-real-details{grid-template-columns:1fr}}

.flute-real-front-wrap{display:block;overflow-x:auto;scrollbar-width:thin}
.flute-real-front-wrap .flute-real-front{min-width:620px}
.flute-real-front .flute-real-mark text{font-size:18px}
.flute-real-thumb-panel{width:min(400px,100%);justify-self:center}
.flute-real-back .flute-real-leader{stroke:#42675e}
.flute-real-pan-hint{display:none!important}
@media(max-width:650px){.flute-real-pan-hint{display:block!important}}

.flute-real-front .flute-real-back{width:220px;height:98px}
.flute-real-front .flute-real-back .flute-real-mark text{font-size:34px}
.flute-thumb-location{stroke:#78948c;stroke-width:1.5;stroke-dasharray:5 4;fill:none}
.flute-thumb-caption{font:600 18px system-ui;fill:#34554b;text-anchor:middle}

/* The exercise's compact note card is too narrow for the flute photograph.
   Match the module selectors, including its important sizing/landscape rules. */
body.nl-harmony-module.nl-module-lecture-notes #quiz:has(#hint:not([hidden]) .is-real-flute) {
  display:flex !important; flex-direction:column; align-items:center; gap:8px;
}
body.nl-harmony-module.nl-module-lecture-notes #quiz #music-panel:has(#hint:not([hidden]) .is-real-flute) {
  display:contents;
  width:min(760px,100%) !important; max-width:100% !important;
  height:auto !important; min-height:0 !important;
  margin:10px auto !important; padding:8px !important;
}
body.nl-harmony-module.nl-module-lecture-notes #quiz #music-panel:has(#hint:not([hidden]) .is-real-flute) .instrument-note {
  flex:none; width:210px !important; height:150px !important; margin:0 auto; order:0;
}
body.nl-harmony-module.nl-module-lecture-notes #quiz #hint:has(.is-real-flute) {
  position:static; transform:none; width:min(680px,100%); max-width:100%; min-width:0;
  margin:0 auto; padding:0; border:0; background:transparent; box-shadow:none; order:2;
}
body.nl-harmony-module.nl-module-lecture-notes #quiz:has(#hint:not([hidden]) .is-real-flute) > * { order:3; }
body.nl-harmony-module.nl-module-lecture-notes #quiz:has(#hint:not([hidden]) .is-real-flute) #answers {
  order:1; display:flex !important; flex-wrap:wrap; justify-content:center;
  width:min(520px,100%) !important; margin:0 auto 6px !important; gap:6px !important;
}
body.nl-harmony-module.nl-module-lecture-notes #quiz:has(#hint:not([hidden]) .is-real-flute) #answers button {
  flex:1 1 60px !important; min-width:0; max-width:132px;
}
.wind-photo-fingering.is-real-flute { width:100%; min-width:0; }
.flute-real-front-wrap .flute-real-front { min-width:0; }
.flute-real-front-wrap { overflow:hidden; }
.flute-real-compact { display:none; }
@media(max-width:600px) {
  .flute-real-front-wrap { position:absolute; width:0; height:0; overflow:hidden; }
  .flute-real-compact { display:grid; gap:4px; }
  .flute-real-compact > span { display:block; min-width:0; }
  .flute-real-compact strong { display:block; padding:8px 4px; color:#254e45; font-size:12px; }
  .flute-real-compact svg { display:block; width:100%; height:auto; }
  .flute-real-compact .flute-real-back { width:220px; height:98px; }
  .flute-real-panel > strong { display:none; }
  .is-real-flute .wind-photo-legend { font-size:11px; }
}

.is-cc0-flute .flute-real-front .flute-real-mark text { font-size:20px; }
.flute-cc0-thumb { display:block; padding:8px; border:1px solid #b2c7bf; border-radius:8px; font-size:12px; text-align:center; color:#254e45; background:white; }
.flute-cc0-thumb.closed { border-color:#138a77; }
.flute-cc0-thumb.closed b { color:#08705f; }

@media(max-width:600px) {
  .is-cc0-flute .flute-real-compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .is-cc0-flute .flute-real-compact > span:last-child { grid-column:1 / -1; }
}