#appHeader,#wrap,.links{display:flex}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#222;background:#faf9f5}
.btnlink,button{background:#fcfbe3;cursor:pointer;font-weight:600;cursor:pointer;}
#wrap{flex-direction:column;height:auto}
#controls{max-width:1000px;margin:10px auto;align-items:center;gap:10px}
.meta{font-size:.8em;color:#666}.links{text-align:center;margin-top:10px;flex-wrap:wrap;gap:10px;justify-content:center}
.btnlink{display:inline-block;border:1px solid #ddd;border-radius:999px;padding:8px 14px;font-size:.9em;text-decoration:none;color:#222;transition:box-shadow .2s}
.btnlink:hover{text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.08)}
#appHeader{align-items:center;gap:10px;padding:10px 14px;background:#323326}#brand{font-size:18px;font-weight:700;color:#fff;letter-spacing:.2px}
#brand .sub{font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#d8d7af}#brand .sub2{color:#8a7571}#brand .text{color:#ddd;font-weight:300;padding-left:10px}#brand a{color:#fff;text-decoration:none}
.card{
  width: clamp(320px, 92vw, 980px);  /* fixed-ish: <=980px, responsive down */
  max-width: 100%;
  margin: 10px auto 0;
  background:#fff;border:1px solid #eee;border-radius:16px;
  box-shadow:0 2px 5px rgba(0,0,0,.08);padding:16px;
  /* stop long unbroken strings from stretching the card */
  overflow-wrap: anywhere;           /* modern */
  word-break: break-word;            /* fallback */
}
/* Let flex children shrink instead of forcing the card to grow */
.card *, .section { min-width: 0; }

.sep{opacity:.5}

.section{
  width: 100%;
  max-width: 100%;
  margin:0 auto;
  border-top:1px dashed #eee;
  padding:14px 4px;
}
.section h3{color:#6f5e5b;font-size:1em}
#lessonTitle {font-size: 1.5em;line-height:1.55;font-weight:800;margin:0 0 7px;}
.info{font-size: 1.1em;line-height:1.55}.muted{color:#727272;opacity:.85}.hidden{display:none}
#continueLinks {display: block;}
#nextLessonBtn {background:#fcfbe3;display: inline-block;margin-bottom: 20px;}
#setPicker {display: block;}
#goBackBtn,#nextSetBtn {background-color: #eee;color: #333;margin:0 2px;border:1px solid #bbb;}
footer{text-align:center;padding:10px;font-size:.9em;color:#6f5e5b}
footer a{color:#6f5e5b;text-decoration:none}
#divTitle {margin:0px 0;padding:5px 0 0}
#pianoholder{text-align:center;}
#piano{margin:0 auto;display:block;max-width:100%;filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1));}  
#legend {display: flex;gap: 14px;margin:12px 0 10px;justify-content: center;align-items: center;font-size: .8em;}
.dot {width: .9em;height: .9em;border-radius: 50%;display: inline-block;vertical-align: middle;margin: 0 8px 4px 0;}
.dot.left,.dot.neutral  {background: #cb443d;}
.dot.right {background: #cb8d3d;}
.white-key {fill: url(#grad-white);stroke: #d4d4d4;stroke-width: 1;transition: fill .15s;}
.black-key {fill: url(#grad-black);stroke: #222;stroke-width: 1;transition: fill .15s;}
/* Highlightade tangenter */
#piano .key.hl-left  {fill: url(#grad-left)  !important; stroke: #fff !important; }
#piano .key.hl-right {fill: url(#grad-right) !important; stroke: #fff !important; }
#piano .key.selected {fill: url(#grad-left);stroke: #fff;}
#piano .key.selected-left {fill: url(#grad-left);stroke: #fff;}
#piano .key.selected-right {fill: url(#grad-right);stroke: #fff;}  
.key-label {font-size: 15px;opacity: 0;transition: opacity .15s;}

#pianoholder{
  position: relative;
}

#fingerRow{
  position: relative;
  height: 26px;
  margin-top: 6px;
  user-select: none;
}

.fnum{
  position: absolute;
  transform: translateX(-50%);
  font-family: Nunito, sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #666;
  background: rgba(255,255,255,0.75);
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
}

/* Optional: tint by hand if you want */
.fnum.left  { color: #8a2f2b; }
.fnum.right { color: #7a4d12; }