@import url("notosled-logo.css?v=3");

/* Izbira ključev, glasbeni font in skupne glasbene komponente. */
/* Enoten lokalni font za vse glasbene znake v Notosledu. */
@font-face{font-family:'GJ Noto Music';src:url('noto-music.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}

#gj-note-trainer #gjnt-clef-choice .gjnt-clef-option,
#gj-write-note #gjwn-clef-choice .gjwn-clef-option{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  width:100%!important;
  max-width:none!important;
  min-height:56px!important;
  margin:0!important;
  padding:8px 10px!important;
  color:var(--ink)!important;
  background:#fff!important;
}
#gj-note-trainer #gjnt-clef-choice,
#gj-write-note #gjwn-clef-choice{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
#gj-note-trainer #gjnt-clef-choice .gjnt-clef-option:after,
#gj-write-note #gjwn-clef-choice .gjwn-clef-option:after{
  content:none;
  display:none;
  font:800 14px/1 Arial,sans-serif;
}
#gj-note-trainer #gjnt-clef-choice input:checked+.gjnt-clef-option,
#gj-write-note #gjwn-clef-choice input:checked+.gjwn-clef-option{
  color:#fff!important;
  background:var(--gold)!important;
  border-color:var(--gold)!important;
  box-shadow:none;
}
#gj-note-trainer #gjnt-clef-choice input:checked+.gjnt-clef-option:after,
#gj-write-note #gjwn-clef-choice input:checked+.gjwn-clef-option:after{
  content:none;
  display:none;
}
#gj-note-trainer #gjnt-clef-choice .gjnt-clef-icon,
#gj-write-note #gjwn-clef-choice .gjwn-clef-icon{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  display:none!important;
  width:0!important;
  max-width:0!important;
  height:0!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit;
  overflow:visible;
  object-fit:contain!important;
  justify-self:start!important;
  transform:none!important;
}
#gj-note-trainer #gjnt-clef-choice input:checked+.gjnt-clef-option .gjnt-clef-icon,
#gj-write-note #gjwn-clef-choice input:checked+.gjwn-clef-option .gjwn-clef-icon{filter:none!important}
#gj-note-trainer #gjnt-clef-choice .gjnt-clef-name,
#gj-write-note #gjwn-clef-choice .gjwn-clef-name{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit;
  font-size:15px;
  line-height:1.15;
  font-weight:700;
  text-align:center;
  transform:translate(-50%,-50%)!important;
}

/* Keep each clef name visually close to its music symbol.  The doubled root
   selector intentionally overrides older per-page positioning rules. */
#gj-note-trainer#gj-note-trainer #gjnt-clef-choice .gjnt-clef-name,
#gj-write-note#gj-write-note #gjwn-clef-choice .gjwn-clef-name{
  left:50%!important;
}
.gj-clef-inline-symbol,
.staff:before,
.card .symbol{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  width:24px;
  height:26px;
  margin-right:5px;
  color:inherit;
  font-family:'GJ Noto Music',serif;
  font-size:22px;
  font-style:normal;
  font-weight:400;
  line-height:1;
}
.gj-clef-inline-symbol.gj-clef-treble{font-size:24px;transform:translateY(-2px)}
.gj-clef-inline-symbol.gj-clef-bass{transform:translateY(0)}
.gj-clef-inline-symbol.gj-clef-alto{transform:translateY(0)}


/* Pitch-only notation uses the real whole-note glyph from Noto Music. */
#gj-note-trainer#gj-note-trainer .gjnt-head,
#gj-write-note#gj-write-note .gjwn-head,
#gj-write-note#gj-write-note .gjwn-correct-head{
  fill:none!important;
  stroke:none!important;
}
#gj-note-trainer [data-whole-source],#gj-write-note [data-whole-source]{opacity:0!important}
#gj-note-trainer .gj-static-whole-note,#gj-write-note .gj-static-whole-note{fill:var(--ink);font:88px 'GJ Noto Music',serif;text-anchor:middle;pointer-events:none;transform:translateY(12px)}

/* Optična poravnava violinskega ključa v glavnem notnem črtovju. */
#gj-note-trainer #gjnt-staff .gjnt-clef:not(.bass):not(.alto),
#gj-write-note #gjwn-staff .gjwn-clef:not(.bass):not(.alto){transform:translateY(5px)}
#gj-note-trainer#gj-note-trainer .gjnt-stem,
#gj-write-note#gj-write-note .gjwn-stem,
#gj-write-note#gj-write-note .gjwn-correct-stem{
  display:none!important;
}
#gj-note-trainer .gji-movable .gj-static-whole-note,
#gj-note-trainer .scale-degree.selected .gj-static-whole-note,
#gj-write-note .gjwn-placed-head+.gj-static-whole-note{fill:var(--gold)!important}
#gj-write-note .gjwn-correct-head+.gj-static-whole-note{fill:#2f7d4a!important}
/* Melodic patterns still use quarter notes because they show a sequence. */
#gj-note-trainer#gj-note-trainer #rm-drawing .gjnt-head{
  fill:var(--ink)!important;
  stroke:none!important;
}
#gj-note-trainer#gj-note-trainer #rm-drawing .gjnt-stem{
  display:block!important;
}

/* The treble glyph has a deeper visual bottom than the other clefs. */
#gj-note-trainer #gjnt-range-clef:not(.bass):not(.alto),
#gj-note-trainer #gjnt-clef:not(.bass):not(.alto),
#gj-write-note #gjwn-range-clef:not(.bass):not(.alto),
#gj-write-note #gjwn-clef:not(.bass):not(.alto){
  transform:translateY(-7px);
}

/* One shared, three-row selector for every pitch-selection exercise. */
.gj-tone-picker{display:grid;gap:10px}
.gj-tone-row{display:grid;gap:6px}
.gj-tone-row small{color:var(--muted);font-size:11px;font-weight:800}
.gj-tone-row>div{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.gj-tone-row input{position:absolute;opacity:0;pointer-events:none}
.gj-tone-row label{cursor:pointer}
.gj-tone-row span{display:grid;place-items:center;min-height:42px;padding:5px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13px;font-weight:800}
.gj-tone-row input:checked+span{color:#fff;background:var(--gold);border-color:var(--gold)}
.gj-tone-row input:focus-visible+span{outline:3px solid rgba(177,122,18,.28);outline-offset:2px}


/* Select valid major/minor key pairs on one circle of fifths. */
#gj-note-trainer .scale-fifths-circle{position:relative;width:min(100%,590px);aspect-ratio:1;margin:16px auto 4px;border:1px solid var(--line);border-radius:50%;background:radial-gradient(circle at center,#fff 0 33%,#f7f2e8 34% 63%,#fff 64%)}
#gj-note-trainer .scale-fifths-circle>label{position:absolute;left:var(--circle-x);top:var(--circle-y);width:82px;transform:translate(-50%,-50%);cursor:pointer}
#gj-note-trainer .scale-fifths-circle input{position:absolute;opacity:0;pointer-events:none}
#gj-note-trainer .scale-fifths-circle label>span{display:grid;grid-template-columns:1fr;place-items:center;min-height:48px;padding:4px 5px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(56,43,19,.08);line-height:1}
#gj-note-trainer .scale-fifths-circle label b{font-size:13px}
#gj-note-trainer .scale-fifths-circle label small{margin-top:3px;color:var(--muted);font-size:10px;font-weight:800}
#gj-note-trainer .scale-fifths-circle input:checked+span{border-color:var(--gold);background:var(--gold);color:#fff}
#gj-note-trainer .scale-fifths-circle input:checked+span small{color:#fff}
#gj-note-trainer .scale-fifths-circle input:focus-visible+span{outline:3px solid rgba(177,122,18,.28);outline-offset:2px}
#gj-note-trainer .scale-circle-centre{position:absolute;left:50%;top:50%;display:grid;place-items:center;transform:translate(-50%,-50%);color:var(--gold);font-family:Georgia,serif}
#gj-note-trainer .scale-circle-centre strong{font-size:24px}
#gj-note-trainer .scale-circle-centre span{font-size:16px}


#gj-note-trainer .gji-answer-group{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#gj-note-trainer .gji-answer-group+.gji-answer-group{margin-top:9px}
#gj-note-trainer .gjnt-answer.selected,
#gj-note-trainer [data-gji-alter].selected{color:#fff!important;background:var(--gold)!important;border-color:var(--gold)!important}
#gj-note-trainer #gji-accidentals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:12px 0}
#gj-note-trainer #gji-accidentals{grid-template-columns:repeat(4,minmax(0,1fr))}
#gj-note-trainer #gji-accidentals button{min-height:44px;padding:5px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-weight:800;cursor:pointer}
#gj-note-trainer #gji-accidentals .gji-accidental-symbol{display:grid;place-items:center;padding:0 5px;font-family:'GJ Noto Music',serif;font-size:27px;font-weight:400;line-height:1}
#gj-note-trainer #gji-accidentals .gji-accidental-symbol b{display:block;font:inherit;line-height:1}
#gj-note-trainer #gji-accidentals [data-gji-alter="-2"] b,#gj-note-trainer #gji-accidentals [data-gji-alter="-1"] b{transform:translateY(-3px)}
#gj-note-trainer #gji-accidentals [data-gji-alter="1"] b{transform:translateY(-7px)}
#gj-note-trainer #gji-accidentals [data-gji-alter="3"] b{transform:translateY(-5px)}
#gj-note-trainer #gji-accidentals [data-gji-alter="2"]{font-size:31px}
#gj-note-trainer #gji-accidentals [data-gji-alter="2"] b{transform:translateY(-7px)}
.gj-double-sharp{font-size:58px!important}


/* Kanonična družina pisave za glasbene glife. !important prepreči, da bi
   starejši slogi posamezne vaje na telefonu izbrali sistemski nadomestni font. */
#gj-note-trainer .gjnt-clef,
#gj-write-note .gjwn-clef,
#gj-note-trainer .gjnt-accidental,
#gj-write-note .gjwn-accidental,
#gj-note-trainer .gj-static-whole-note,
#gj-write-note .gj-static-whole-note,
#gj-note-trainer .gji-accidental-symbol,
#gj-note-trainer .scale-accidental-symbol,
#gj-note-trainer .rm-value b,
.gj-clef-inline-symbol{
  font-family:'GJ Noto Music',serif!important;
  font-style:normal!important;
  font-weight:400!important;
}
#gj-note-trainer #gjnt-sharp+span,
#gj-note-trainer #gjnt-flat+span,
#gj-write-note #gjwn-sharp+span,
#gj-write-note #gjwn-flat+span{
  font-family:'GJ Noto Music',serif;
  font-style:normal;
  font-weight:400;
}

/* Skupni slogi vseh vaj Notosleda. */
.notosled-exercise-header{box-sizing:border-box;position:sticky;top:0;z-index:50;width:100%;max-width:100vw;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px clamp(16px,4vw,56px);border-bottom:3px solid #b17a12;background:rgba(251,248,241,.97);box-shadow:0 5px 18px #6f5b3b26;backdrop-filter:blur(12px);font-family:Arial,sans-serif;overflow:hidden}
.notosled-exercise-header a{text-decoration:none}
.notosled-exercise-logo{display:block;width:clamp(178px,16vw,248px);max-width:48vw;height:auto}
.notosled-back{box-sizing:border-box;display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;padding:10px 15px;border:1px solid #d8c9ad;border-radius:999px;background:#fffaf0;color:#315f56;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 3px 9px rgba(56,43,19,.08);transition:transform .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease}
.notosled-back:hover,.notosled-back:focus-visible{color:#b17a12;border-color:#b17a12;box-shadow:0 7px 15px rgba(56,43,19,.14);transform:translateY(-2px);outline:none}
.notosled-back:active{transform:translateY(0);box-shadow:0 3px 8px rgba(56,43,19,.1)}


/* Skupno ogrodje vaj za prepoznavanje in sestavljanje. */
#gj-note-trainer,#gj-note-trainer *{box-sizing:border-box}#gj-note-trainer{--gold:#b17a12;--ink:#25221d;--muted:#6b655c;--soft:#faf8f3;--line:#ded7ca;width:min(800px,100%);margin:24px auto;padding:clamp(20px,5vw,42px);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 16px 45px rgba(56,43,19,.09);text-align:center;font-family:Arial,Helvetica,sans-serif}#gj-note-trainer [hidden]{display:none!important}#gj-note-trainer .gjnt-kicker{margin:0 0 8px;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.16em}#gj-note-trainer h2{margin:0;font:700 clamp(30px,5vw,45px)/1.1 Georgia,serif}#gj-note-trainer .gjnt-heading>p:last-child{margin:10px auto 24px;color:var(--muted);line-height:1.5}#gj-note-trainer .gjnt-settings{display:grid;gap:10px;text-align:left}#gj-note-trainer details{border:1px solid var(--line);border-radius:15px;background:var(--soft);overflow:hidden}#gj-note-trainer summary{display:flex;align-items:center;gap:11px;padding:15px 18px;cursor:pointer;font:700 19px Georgia,serif;list-style:none}#gj-note-trainer summary::-webkit-details-marker{display:none}#gj-note-trainer summary:after{content:'+';margin-left:auto;color:var(--gold);font:700 24px Arial}#gj-note-trainer details[open] summary:after{content:'−'}#gj-note-trainer summary span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#fff;font:700 13px Arial}#gj-note-trainer .gjnt-section-body{display:grid;gap:16px;padding:0 18px 18px}#gj-note-trainer .gjnt-setting{padding-top:15px;border-top:1px solid var(--line)}#gj-note-trainer .gjnt-label{display:block;margin-bottom:10px;font-size:14px;font-weight:800}#gj-note-trainer select{min-height:44px;padding:0 38px 0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:600 15px Arial,sans-serif}#gj-note-trainer .gjnt-wide-select{width:100%}#gj-note-trainer .gjnt-range-row{display:flex;align-items:end;justify-content:center;gap:12px}#gj-note-trainer .gjnt-range-row label{display:grid;gap:6px;flex:1;max-width:240px;color:var(--muted);font-size:13px;font-weight:700}#gj-note-trainer .gjnt-range-row>span{padding-bottom:13px;color:var(--muted)}#gj-note-trainer .gjnt-help{margin:9px 0 0;color:var(--muted);font-size:12px;line-height:1.4}#gj-note-trainer .gjnt-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}#gj-note-trainer .gjnt-choice-grid.gjnt-two{grid-template-columns:repeat(2,1fr)}#gj-note-trainer .gjnt-choice-grid label,#gj-note-trainer .gjnt-note-filter label{cursor:pointer}#gj-note-trainer .gjnt-choice-grid input,#gj-note-trainer .gjnt-note-filter input{position:absolute;opacity:0;pointer-events:none}#gj-note-trainer .gjnt-choice-grid span,#gj-note-trainer .gjnt-note-filter span{display:flex;min-height:45px;align-items:center;justify-content:center;padding:7px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:center;font-size:13px;font-weight:700}#gj-note-trainer .gjnt-choice-grid input:checked+span,#gj-note-trainer .gjnt-note-filter input:checked+span{color:#fff;background:var(--gold);border-color:var(--gold)}#gj-note-trainer .gjnt-choice-grid input:focus-visible+span,#gj-note-trainer .gjnt-note-filter input:focus-visible+span{outline:3px solid rgba(177,122,18,.28);outline-offset:2px}#gj-note-trainer .gjnt-note-filter{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}#gj-note-trainer .gjnt-check-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}#gj-note-trainer .gjnt-check-list label{display:flex;align-items:center;gap:7px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px;font-weight:700}#gj-note-trainer .gjnt-check-list input,#gj-note-trainer .gjnt-switch-row input{width:20px;height:20px;accent-color:var(--gold)}#gj-note-trainer .gjnt-check-list span{font-size:20px}#gj-note-trainer .gjnt-select-row,#gj-note-trainer .gjnt-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:700}#gj-note-trainer .gjnt-switches{display:grid;gap:10px}#gj-note-trainer .gjnt-switch-row{min-height:42px}#gj-note-trainer .gjnt-error{min-height:20px;margin:10px 0 4px;color:#a13934;font-size:13px;font-weight:700}#gj-note-trainer .gjnt-primary,#gj-note-trainer .gjnt-secondary{min-height:52px;padding:0 22px;border:1px solid var(--gold);border-radius:12px;font:700 16px Arial,sans-serif;cursor:pointer}#gj-note-trainer .gjnt-primary{width:100%;color:#fff;background:var(--gold)}#gj-note-trainer .gjnt-secondary{color:var(--gold);background:#fff}#gj-note-trainer .gjnt-primary:hover,#gj-note-trainer .gjnt-secondary:hover{filter:brightness(.96);transform:translateY(-1px)}#gj-note-trainer button:focus-visible,#gj-note-trainer select:focus-visible,#gj-note-trainer summary:focus-visible{outline:3px solid rgba(177,122,18,.28);outline-offset:2px}#gj-note-trainer .gjnt-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}#gj-note-trainer .gjnt-text-btn{padding:5px 0;border:0;background:none;color:var(--gold);font-weight:700;cursor:pointer}#gj-note-trainer .gjnt-progress{margin:0;color:var(--muted);font-size:13px;font-weight:700}#gj-note-trainer .gjnt-heading-small h2{font-size:clamp(28px,4vw,38px)}#gj-note-trainer .gjnt-stats{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:18px 0 16px}#gj-note-trainer .gjnt-stats span{padding:8px 12px;background:var(--soft);border-radius:999px;font-size:13px}#gj-note-trainer #gjnt-lives{color:#a13934;letter-spacing:2px}#gj-note-trainer .gjnt-music{overflow:hidden;margin:0 auto 20px;background:var(--soft);border-radius:16px}#gj-note-trainer svg{display:block;width:100%;height:auto}#gj-note-trainer .gjnt-lines line,#gj-note-trainer .gjnt-ledger-line{stroke:var(--ink);stroke-width:2}#gj-note-trainer .gjnt-clef{fill:var(--ink);font-family:'GJ Noto Music',serif;font-size:105px}#gj-note-trainer .gjnt-clef.bass{font-size:78px}#gj-note-trainer .gjnt-accidental{fill:var(--ink);font:52px 'GJ Noto Music',serif;text-anchor:middle}#gj-note-trainer .gjnt-head{fill:var(--ink)}#gj-note-trainer .gjnt-stem{stroke:var(--ink);stroke-width:4;stroke-linecap:round}#gj-note-trainer .gjnt-answers{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}#gj-note-trainer .gjnt-answer{min-height:50px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:700 16px Arial,sans-serif;cursor:pointer;transition:.15s}#gj-note-trainer .gjnt-answer:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px)}#gj-note-trainer .gjnt-answer.correct{color:#fff;background:#2f7d4a;border-color:#2f7d4a}#gj-note-trainer .gjnt-answer.wrong{color:#fff;background:#b7463f;border-color:#b7463f}#gj-note-trainer .gjnt-feedback{min-height:25px;margin:18px 0 10px;font-weight:700}#gj-note-trainer .gjnt-feedback.ok{color:#267040}#gj-note-trainer .gjnt-feedback.no{color:#a13934}#gj-note-trainer .gjnt-finish{padding:18px 0}#gj-note-trainer .gjnt-medal{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 18px;border-radius:50%;color:#fff;background:var(--gold);font:700 40px Georgia,serif}#gj-note-trainer .gjnt-finish>p:not(.gjnt-kicker){color:var(--muted);line-height:1.5}#gj-note-trainer .gjnt-result-box{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;margin:24px 0;border:1px solid var(--line);border-radius:15px;background:var(--line)}#gj-note-trainer .gjnt-result-box strong,#gj-note-trainer .gjnt-result-box span{padding:12px 5px;background:var(--soft)}#gj-note-trainer .gjnt-result-box strong{padding-bottom:0;color:var(--gold);font:700 26px Georgia,serif}#gj-note-trainer .gjnt-result-box span{padding-top:4px;color:var(--muted);font-size:12px}#gj-note-trainer .gjnt-finish-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}

#gj-note-trainer .gjnt-result-item{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 5px 12px;background:var(--soft);text-align:center}
#gj-note-trainer .gjnt-result-item span{padding:0;background:transparent;color:var(--muted);font-size:12px}
#gj-note-trainer .gjnt-result-item strong{padding:0;background:transparent;color:var(--gold);font:700 26px Georgia,serif}
#gj-note-trainer .gjnt-clef{font-family:'GJ Noto Music',serif;font-size:100px}
#gj-note-trainer .gjnt-clef.bass{font-size:92px}
#gj-note-trainer .gjnt-clef.alto{font-size:94px}
#gj-note-trainer .gjnt-range-selector{display:grid;grid-template-columns:90px minmax(0,1fr) 90px;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff}
#gj-note-trainer .gjnt-range-controls{display:grid;justify-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:800}
#gj-note-trainer .gjnt-range-controls button{display:grid;place-items:center;width:38px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--gold);font-size:13px;cursor:pointer}
#gj-note-trainer .gjnt-range-controls button:hover:not(:disabled){border-color:var(--gold);background:#fff8e8}
#gj-note-trainer .gjnt-range-controls button:disabled{opacity:.3;cursor:not-allowed}
#gj-note-trainer .gjnt-range-controls strong{min-width:55px;padding:7px 8px;border-radius:999px;background:var(--gold);color:#fff;text-align:center;font-size:15px}
#gj-note-trainer #gjnt-range-staff{min-width:0;border-radius:10px;background:var(--soft)}
#gj-note-trainer #gjnt-clef-choice .gjnt-clef-option{position:relative;display:block;min-height:70px;padding:0 12px}
#gj-note-trainer #gjnt-clef-choice .gjnt-clef-icon{position:absolute!important;left:calc(50% - 40px)!important;top:50%!important;display:block;width:32px!important;height:52px;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;overflow:visible;transform:translate(-50%,-50%)!important}
#gj-note-trainer #gjnt-clef-choice .gjnt-clef-icon text{fill:currentColor;font-family:'GJ Noto Music',serif;font-weight:400;text-anchor:middle;dominant-baseline:central}
#gj-note-trainer #gjnt-clef-choice .gjnt-treble-icon text{font-size:27px;transform:translateY(-7px)}
#gj-note-trainer #gjnt-clef-choice .gjnt-bass-icon text{font-size:29px;transform:translateY(-12px)}
#gj-note-trainer #gjnt-clef-choice .gjnt-alto-icon text{font-size:29px;transform:translateY(-12px)}
#gj-note-trainer #gjnt-clef-choice .gjnt-clef-name{position:absolute!important;left:calc(50% + 25px)!important;top:50%!important;display:block;width:96px!important;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font-size:15px;line-height:1;font-weight:700;text-align:center;transform:translate(-50%,-50%)!important}


/* Skupno ogrodje vaje Zapiši noto. */
#gj-write-note,#gj-write-note *{box-sizing:border-box}#gj-write-note{--gold:#b17a12;--ink:#25221d;--muted:#6b655c;--soft:#faf8f3;--line:#ded7ca;width:min(800px,100%);margin:24px auto;padding:clamp(20px,5vw,42px);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 16px 45px rgba(56,43,19,.09);text-align:center;font-family:Arial,Helvetica,sans-serif}#gj-write-note [hidden]{display:none!important}#gj-write-note .gjwn-kicker{margin:0 0 8px;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.16em}#gj-write-note h2{margin:0;font:700 clamp(30px,5vw,45px)/1.1 Georgia,serif}#gj-write-note .gjwn-heading>p:last-child{margin:10px auto 24px;color:var(--muted);line-height:1.5}#gj-write-note .gjwn-settings{display:grid;gap:10px;text-align:left}#gj-write-note details{border:1px solid var(--line);border-radius:15px;background:var(--soft);overflow:hidden}#gj-write-note summary{display:flex;align-items:center;gap:11px;padding:15px 18px;cursor:pointer;font:700 19px Georgia,serif;list-style:none}#gj-write-note summary::-webkit-details-marker{display:none}#gj-write-note summary:after{content:'+';margin-left:auto;color:var(--gold);font:700 24px Arial}#gj-write-note details[open] summary:after{content:'−'}#gj-write-note summary span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#fff;font:700 13px Arial}#gj-write-note .gjwn-section-body{display:grid;gap:16px;padding:0 18px 18px}#gj-write-note .gjwn-setting{padding-top:15px;border-top:1px solid var(--line)}#gj-write-note .gjwn-label{display:block;margin-bottom:10px;font-size:14px;font-weight:800}#gj-write-note select{min-height:44px;padding:0 38px 0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:600 15px Arial,sans-serif}#gj-write-note .gjwn-wide-select{width:100%}#gj-write-note .gjwn-range-row{display:flex;align-items:end;justify-content:center;gap:12px}#gj-write-note .gjwn-range-row label{display:grid;gap:6px;flex:1;max-width:240px;color:var(--muted);font-size:13px;font-weight:700}#gj-write-note .gjwn-range-row>span{padding-bottom:13px;color:var(--muted)}#gj-write-note .gjwn-help{margin:9px 0 0;color:var(--muted);font-size:12px;line-height:1.4}#gj-write-note .gjwn-choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}#gj-write-note .gjwn-choice-grid.gjwn-two{grid-template-columns:repeat(2,1fr)}#gj-write-note .gjwn-choice-grid label,#gj-write-note .gjwn-note-filter label{cursor:pointer}#gj-write-note .gjwn-choice-grid input,#gj-write-note .gjwn-note-filter input{position:absolute;opacity:0;pointer-events:none}#gj-write-note .gjwn-choice-grid span,#gj-write-note .gjwn-note-filter span{display:flex;min-height:45px;align-items:center;justify-content:center;padding:7px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:center;font-size:13px;font-weight:700}#gj-write-note .gjwn-choice-grid input:checked+span,#gj-write-note .gjwn-note-filter input:checked+span{color:#fff;background:var(--gold);border-color:var(--gold)}#gj-write-note .gjwn-choice-grid input:focus-visible+span,#gj-write-note .gjwn-note-filter input:focus-visible+span{outline:3px solid rgba(177,122,18,.28);outline-offset:2px}#gj-write-note .gjwn-note-filter{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}#gj-write-note .gjwn-check-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}#gj-write-note .gjwn-check-list label{display:flex;align-items:center;gap:7px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13px;font-weight:700}#gj-write-note .gjwn-check-list input,#gj-write-note .gjwn-switch-row input{width:20px;height:20px;accent-color:var(--gold)}#gj-write-note .gjwn-check-list span{font-size:20px}#gj-write-note .gjwn-select-row,#gj-write-note .gjwn-switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px;font-weight:700}#gj-write-note .gjwn-switches{display:grid;gap:10px}#gj-write-note .gjwn-switch-row{min-height:42px}#gj-write-note .gjwn-error{min-height:20px;margin:10px 0 4px;color:#a13934;font-size:13px;font-weight:700}#gj-write-note .gjwn-primary,#gj-write-note .gjwn-secondary{min-height:52px;padding:0 22px;border:1px solid var(--gold);border-radius:12px;font:700 16px Arial,sans-serif;cursor:pointer}#gj-write-note .gjwn-primary{width:100%;color:#fff;background:var(--gold)}#gj-write-note .gjwn-secondary{color:var(--gold);background:#fff}#gj-write-note .gjwn-primary:hover,#gj-write-note .gjwn-secondary:hover{filter:brightness(.96);transform:translateY(-1px)}#gj-write-note button:focus-visible,#gj-write-note select:focus-visible,#gj-write-note summary:focus-visible{outline:3px solid rgba(177,122,18,.28);outline-offset:2px}#gj-write-note .gjwn-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}#gj-write-note .gjwn-text-btn{padding:5px 0;border:0;background:none;color:var(--gold);font-weight:700;cursor:pointer}#gj-write-note .gjwn-progress{margin:0;color:var(--muted);font-size:13px;font-weight:700}#gj-write-note .gjwn-heading-small h2{font-size:clamp(28px,4vw,38px)}#gj-write-note .gjwn-stats{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:18px 0 16px}#gj-write-note .gjwn-stats span{padding:8px 12px;background:var(--soft);border-radius:999px;font-size:13px}#gj-write-note #gjwn-lives{color:#a13934;letter-spacing:2px}#gj-write-note .gjwn-music{overflow:hidden;margin:0 auto 20px;background:var(--soft);border-radius:16px}#gj-write-note svg{display:block;width:100%;height:auto}#gj-write-note .gjwn-lines line,#gj-write-note .gjwn-ledger-line{stroke:var(--ink);stroke-width:2}#gj-write-note .gjwn-clef{fill:var(--ink);font-family:'GJ Noto Music',serif;font-size:105px}#gj-write-note .gjwn-clef.bass{font-size:78px}#gj-write-note .gjwn-accidental{fill:var(--ink);font:52px 'GJ Noto Music',serif;text-anchor:middle}#gj-write-note .gjwn-head{fill:var(--ink)}#gj-write-note .gjwn-stem{stroke:var(--ink);stroke-width:4;stroke-linecap:round}#gj-write-note .gjwn-answers{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}#gj-write-note .gjwn-answer{min-height:50px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:700 16px Arial,sans-serif;cursor:pointer;transition:.15s}#gj-write-note .gjwn-answer:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px)}#gj-write-note .gjwn-answer.correct{color:#fff;background:#2f7d4a;border-color:#2f7d4a}#gj-write-note .gjwn-answer.wrong{color:#fff;background:#b7463f;border-color:#b7463f}#gj-write-note .gjwn-feedback{min-height:25px;margin:18px 0 10px;font-weight:700}#gj-write-note .gjwn-feedback.ok{color:#267040}#gj-write-note .gjwn-feedback.no{color:#a13934}#gj-write-note .gjwn-finish{padding:18px 0}#gj-write-note .gjwn-medal{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 18px;border-radius:50%;color:#fff;background:var(--gold);font:700 40px Georgia,serif}#gj-write-note .gjwn-finish>p:not(.gjwn-kicker){color:var(--muted);line-height:1.5}#gj-write-note .gjwn-result-box{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;margin:24px 0;border:1px solid var(--line);border-radius:15px;background:var(--line)}#gj-write-note .gjwn-result-box strong,#gj-write-note .gjwn-result-box span{padding:12px 5px;background:var(--soft)}#gj-write-note .gjwn-result-box strong{padding-bottom:0;color:var(--gold);font:700 26px Georgia,serif}#gj-write-note .gjwn-result-box span{padding-top:4px;color:var(--muted);font-size:12px}#gj-write-note .gjwn-finish-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}

#gj-write-note .gjwn-result-item{display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 5px 12px;background:var(--soft);text-align:center}
#gj-write-note .gjwn-result-item span{padding:0;background:transparent;color:var(--muted);font-size:12px}
#gj-write-note .gjwn-result-item strong{padding:0;background:transparent;color:var(--gold);font:700 26px Georgia,serif}
#gj-write-note .gjwn-clef{font-family:'GJ Noto Music',serif;font-size:100px}
#gj-write-note .gjwn-clef.bass{font-size:92px}
#gj-write-note .gjwn-clef.alto{font-size:94px}
#gj-write-note .gjwn-range-selector{display:grid;grid-template-columns:90px minmax(0,1fr) 90px;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff}
#gj-write-note .gjwn-range-controls{display:grid;justify-items:center;gap:6px;color:var(--muted);font-size:12px;font-weight:800}
#gj-write-note .gjwn-range-controls button{display:grid;place-items:center;width:38px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--gold);font-size:13px;cursor:pointer}
#gj-write-note .gjwn-range-controls button:hover:not(:disabled){border-color:var(--gold);background:#fff8e8}
#gj-write-note .gjwn-range-controls button:disabled{opacity:.3;cursor:not-allowed}
#gj-write-note .gjwn-range-controls strong{min-width:55px;padding:7px 8px;border-radius:999px;background:var(--gold);color:#fff;text-align:center;font-size:15px}
#gj-write-note #gjwn-range-staff{min-width:0;border-radius:10px;background:var(--soft)}
#gj-write-note #gjwn-clef-choice .gjwn-clef-option{position:relative;display:block;min-height:70px;padding:0 12px}
#gj-write-note #gjwn-clef-choice .gjwn-clef-icon{position:absolute!important;left:calc(50% - 40px)!important;top:50%!important;display:block;width:32px!important;height:52px;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;overflow:visible;transform:translate(-50%,-50%)!important}
#gj-write-note #gjwn-clef-choice .gjwn-clef-icon text{fill:currentColor;font-family:'GJ Noto Music',serif;font-weight:400;text-anchor:middle;dominant-baseline:central}
#gj-write-note #gjwn-clef-choice .gjwn-treble-icon text{font-size:27px;transform:translateY(-7px)}
#gj-write-note #gjwn-clef-choice .gjwn-bass-icon text{font-size:29px;transform:translateY(-12px)}
#gj-write-note #gjwn-clef-choice .gjwn-alto-icon text{font-size:29px;transform:translateY(-12px)}
#gj-write-note #gjwn-clef-choice .gjwn-clef-name{position:absolute!important;left:calc(50% + 25px)!important;top:50%!important;display:block;width:96px!important;min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font-size:15px;line-height:1;font-weight:700;text-align:center;transform:translate(-50%,-50%)!important}

#gj-write-note #gjwn-target-label{color:var(--gold);white-space:nowrap}
#gj-write-note .gjwn-clickable-music{touch-action:none}#gj-write-note .gjwn-clickable-music svg{cursor:crosshair}
#gj-write-note #gjwn-hit-area:focus{outline:none}
#gj-write-note .gjwn-placed-head{fill:var(--gold)}#gj-write-note .gjwn-placed-stem{stroke:var(--gold)}#gj-write-note #gjwn-note .gjwn-accidental{fill:var(--gold)}
#gj-write-note .gjwn-click-flash{fill:rgba(177,122,18,.16);stroke:rgba(177,122,18,.38);stroke-width:2;pointer-events:none;transform-box:fill-box;transform-origin:center;animation:gjwn-click-flash .32s ease-out both}@keyframes gjwn-click-flash{from{opacity:1;transform:scale(.55)}to{opacity:0;transform:scale(1.35)}}
#gj-write-note .gjwn-correct-head{fill:#2f7d4a}#gj-write-note .gjwn-correct-stem{stroke:#2f7d4a;stroke-width:4;stroke-linecap:round}
#gj-write-note .gjwn-note-entry{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:stretch;gap:10px;margin:0 auto 20px}
#gj-write-note .gjwn-note-entry .gjwn-music{width:100%;margin:0}
#gj-write-note .gjwn-note-arrows{display:grid;grid-template-rows:1fr 1fr;gap:10px}
#gj-write-note .gjwn-note-arrows button{display:flex;min-width:64px;min-height:76px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--gold);border-radius:14px;background:#fff8e8;color:var(--gold);font-weight:800;cursor:pointer;touch-action:manipulation}
#gj-write-note .gjwn-note-arrows button:hover:not(:disabled){background:var(--gold);color:#fff}
#gj-write-note .gjwn-note-arrows button span{font-size:24px;line-height:1}
#gj-write-note .gjwn-note-arrows button small{font-size:11px}
#gj-write-note .gjwn-place-actions{display:grid;grid-template-columns:1fr;gap:10px}#gj-write-note .gjwn-place-actions .gjwn-primary{width:100%}#gj-write-note button:disabled{opacity:.42;cursor:not-allowed}


/* Skupne mobilne prilagoditve vseh vaj. */
/* Shared mobile layout for every Notosled exercise. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}



/* Posebni slogi: prepoznaj-lestvico.html */
#gj-note-trainer .scale-tonic-groups{display:grid;gap:14px;margin-top:14px}
#gj-note-trainer .scale-tonic-group{display:grid;gap:7px}
#gj-note-trainer .scale-tonic-group-title{color:var(--muted);font-size:12px;font-weight:800}

/* Posebni slogi: zapisi-akord.html */
#gj-note-trainer #gja-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
#gj-note-trainer .gja-tone{padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--soft)}
#gj-note-trainer .gja-tone strong{display:block;margin-bottom:8px}
#gj-note-trainer .gja-adjust{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:6px}
#gj-note-trainer .gja-adjust button{min-height:44px;border:1px solid var(--gold);border-radius:9px;background:#fff;color:var(--gold);font-weight:800;cursor:pointer}
#gj-note-trainer .gja-adjust span{display:grid;place-items:center;min-height:44px;border-radius:9px;background:var(--gold);color:#fff}
#gj-note-trainer .gja-control-symbol{display:block;width:44px!important;height:44px!important;font-family:'GJ Noto Music',serif;font-weight:400;overflow:visible}
#gj-note-trainer .gja-control-symbol text{fill:currentColor;font-family:'GJ Noto Music',serif;font-weight:400}
#gj-note-trainer #gja-check{grid-column:1/-1;min-height:52px;border:0;border-radius:12px;background:var(--gold);color:#fff;font-weight:800;cursor:pointer}
#gj-note-trainer .gja-answer-divider{grid-column:1/-1;height:0;margin:6px 3px;border-top:1px dashed rgba(177,122,18,.32)}
#gj-note-trainer .gja-answer-section{display:grid;gap:8px;text-align:left}#gj-note-trainer .gja-answer-section+.gja-answer-section{margin-top:8px}#gj-note-trainer .gja-answer-section>strong{color:var(--muted);font-size:13px}#gj-note-trainer .gja-answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#gj-note-trainer .gja-inversion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}#gj-note-trainer .gjnt-answer.selected{border-color:var(--gold);background:#fff8e8;color:var(--gold)}


/* Posebni slogi: zapisi-interval.html */
#gj-note-trainer .gji-note-entry{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:stretch;gap:10px;margin:0 auto 20px}
#gj-note-trainer .gji-note-entry .gjnt-music{width:100%;margin:0}
#gj-note-trainer #gji-arrows{display:grid;grid-template-rows:1fr 1fr;gap:10px}
#gj-note-trainer #gji-arrows button{display:flex;min-width:64px;min-height:76px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--gold);border-radius:14px;background:#fff8e8;color:var(--gold);font-weight:800;cursor:pointer;touch-action:manipulation}
#gj-note-trainer #gji-arrows button:hover:not(:disabled){background:var(--gold);color:#fff}
#gj-note-trainer #gji-arrows button b{font-size:24px;line-height:1}
#gj-note-trainer #gji-arrows button small{font-size:11px}
#gj-note-trainer #gji-actions{display:grid;grid-template-columns:1fr;gap:10px}
#gj-note-trainer #gji-upper.gji-movable .gjnt-head{fill:var(--gold)}
#gj-note-trainer #gji-upper.gji-movable .gjnt-stem{stroke:var(--gold)}
#gj-note-trainer #gji-actions button{min-height:52px;border:1px solid var(--gold);border-radius:12px;font:700 16px Arial,sans-serif;cursor:pointer}
#gj-note-trainer #gji-check{background:var(--gold);color:#fff}
#gj-note-trainer #gji-arrows button:disabled,#gj-note-trainer #gji-actions button:disabled{opacity:.42;cursor:not-allowed}


/* Posebni slogi: zapisi-lestvico.html */
#gj-note-trainer .scale-degree:not(.locked){cursor:pointer}
#gj-note-trainer .scale-hit{fill:transparent;stroke:transparent;stroke-width:2}
#gj-note-trainer .scale-degree.selected .scale-hit{fill:rgba(177,122,18,.12);stroke:rgba(177,122,18,.45)}
#gj-note-trainer .scale-degree.selected .gjnt-head{fill:var(--gold)}
#gj-note-trainer .scale-degree.selected .gjnt-stem{stroke:var(--gold)}
#gj-note-trainer .scale-degree.selected .gjnt-accidental{fill:var(--gold)}
#gj-note-trainer .gjnt-accidental,#gj-note-trainer .scale-accidentals .scale-accidental-symbol{font-family:'GJ Noto Music',serif;font-weight:400}
#gj-note-trainer .scale-write-controls{display:grid;grid-template-columns:1fr!important;gap:10px}
#gj-note-trainer .scale-tonic-groups{display:grid;gap:14px;margin-top:14px}
#gj-note-trainer .scale-tonic-group{display:grid;gap:7px}
#gj-note-trainer .scale-tonic-group-title{color:var(--muted);font-size:12px;font-weight:800}
#gj-note-trainer .scale-accidentals{display:grid;grid-template-columns:1fr 1fr 1.7fr 1fr 1fr;gap:9px}
#gj-note-trainer .scale-accidentals button,#gj-note-trainer #scale-check{min-height:54px;border:1px solid var(--gold);border-radius:12px;background:#fff8e8;color:var(--gold);font:700 16px Arial,sans-serif;cursor:pointer}
#gj-note-trainer .scale-accidentals .scale-accidental-symbol{display:grid;place-items:center;padding:0;font-size:29px;line-height:1}
#gj-note-trainer .scale-accidentals .scale-accidental-symbol b{display:block;font:inherit;line-height:1}
#gj-note-trainer .scale-accidentals .scale-accidental-symbol[data-alter="-2"] b,#gj-note-trainer .scale-accidentals .scale-accidental-symbol[data-alter="-1"] b{transform:translateY(-3px)}
#gj-note-trainer .scale-accidentals .scale-accidental-symbol[data-alter="1"] b{transform:translateY(-7px)}
#gj-note-trainer .scale-accidentals .scale-double-sharp{font-size:33px;padding:0}
#gj-note-trainer .scale-accidentals .scale-double-sharp b{transform:translateY(-7px)}
#gj-note-trainer .scale-accidentals button.active{background:var(--gold);color:#fff}
#gj-note-trainer #scale-check{background:var(--gold);color:#fff}
#gj-note-trainer .scale-accidentals button:disabled,#gj-note-trainer #scale-check:disabled{opacity:.42;cursor:not-allowed}

/* Enoten mobilni sistem vseh vaj. */
@media (max-width:600px) {
#gj-note-trainer #gjnt-clef-choice .gjnt-clef-option,
  #gj-write-note #gjwn-clef-choice .gjwn-clef-option{gap:4px!important;padding:6px 3px!important}
  #gj-note-trainer #gjnt-clef-choice .gjnt-clef-name,
  #gj-write-note #gjwn-clef-choice .gjwn-clef-name{font-size:12px!important}
  .gj-clef-inline-symbol{flex-basis:20px;width:20px;height:22px;margin-right:3px;font-size:18px}
  .gj-clef-inline-symbol.gj-clef-treble{font-size:20px}
.gj-tone-row>div{grid-template-columns:repeat(4,minmax(0,1fr))}
#gj-note-trainer .gjnt-section-body:has(.scale-fifths-circle){padding-left:8px;padding-right:8px}#gj-note-trainer .scale-fifths-circle{width:min(100%,360px)}#gj-note-trainer .scale-fifths-circle>label{width:44px}#gj-note-trainer .scale-fifths-circle label>span{min-height:30px;padding:2px 1px;border-radius:7px}#gj-note-trainer .scale-fifths-circle label b{font-size:9px}#gj-note-trainer .scale-fifths-circle label small{margin-top:1px;font-size:7px}#gj-note-trainer .scale-circle-centre strong{font-size:18px}#gj-note-trainer .scale-circle-centre span{font-size:13px}
#gj-note-trainer .gji-answer-group{grid-template-columns:repeat(2,minmax(0,1fr))}#gj-note-trainer #gji-accidentals{grid-template-columns:repeat(3,minmax(0,1fr))}
.notosled-exercise-header{padding:11px 14px}.notosled-exercise-logo{width:155px}.notosled-back{padding:9px 11px;font-size:13px}
#gj-note-trainer{border-radius:16px;padding:20px 12px}#gj-note-trainer .gjnt-choice-grid,#gj-note-trainer .gjnt-choice-grid.gjnt-two,#gj-note-trainer .gjnt-check-list{grid-template-columns:1fr}#gj-note-trainer .gjnt-note-filter{grid-template-columns:repeat(4,1fr)}#gj-note-trainer .gjnt-answers{grid-template-columns:repeat(4,1fr)}#gj-note-trainer .gjnt-finish-actions{grid-template-columns:1fr}
#gj-note-trainer .gjnt-range-selector{grid-template-columns:68px minmax(0,1fr) 68px;gap:4px;padding:8px}#gj-note-trainer .gjnt-range-controls strong{min-width:48px;font-size:13px}#gj-note-trainer .gjnt-range-controls button{width:34px;height:31px}
#gj-write-note{border-radius:16px;padding:20px 12px}#gj-write-note .gjwn-choice-grid,#gj-write-note .gjwn-choice-grid.gjwn-two,#gj-write-note .gjwn-check-list{grid-template-columns:1fr}#gj-write-note .gjwn-note-filter{grid-template-columns:repeat(4,1fr)}#gj-write-note .gjwn-answers{grid-template-columns:repeat(4,1fr)}#gj-write-note .gjwn-finish-actions{grid-template-columns:1fr}
#gj-write-note .gjwn-range-selector{grid-template-columns:68px minmax(0,1fr) 68px;gap:4px;padding:8px}#gj-write-note .gjwn-range-controls strong{min-width:48px;font-size:13px}#gj-write-note .gjwn-range-controls button{width:34px;height:31px}
#gj-write-note .gjwn-note-entry{grid-template-columns:minmax(0,1fr) 58px;gap:6px}#gj-write-note .gjwn-note-arrows{gap:6px}#gj-write-note .gjwn-note-arrows button{min-width:54px;min-height:64px;padding:4px}#gj-write-note .gjwn-note-arrows button span{font-size:21px}#gj-write-note .gjwn-place-actions{grid-template-columns:1fr}
body {
    margin: 0;
    background: #fff;
  }

  #gj-note-trainer,
  #gj-write-note {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 20px 10px 24px !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #gj-note-trainer .gjnt-section-body,
  #gj-write-note .gjwn-section-body {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  #gj-note-trainer .gjnt-music,
  #gj-write-note .gjwn-music,
  #gj-note-trainer svg,
  #gj-write-note svg {
    width: 100% !important;
    max-width: none !important;
  }

  #gj-note-trainer .gjnt-primary,
  #gj-note-trainer .gjnt-secondary,
  #gj-write-note .gjwn-primary,
  #gj-write-note .gjwn-secondary {
    min-height: 54px;
    font-size: 16px;
  }
#gj-note-trainer #gja-controls{grid-template-columns:1fr}
#gj-note-trainer .gji-note-entry{grid-template-columns:minmax(0,1fr) 58px;gap:6px}#gj-note-trainer #gji-arrows{gap:6px}#gj-note-trainer #gji-arrows button{min-width:54px;min-height:64px;padding:4px}#gj-note-trainer #gji-arrows button b{font-size:21px}
#gj-note-trainer .scale-accidentals{grid-template-columns:repeat(5,1fr)}#gj-note-trainer .scale-accidentals button{padding:4px}#gj-note-trainer .scale-accidentals .scale-accidental-symbol{padding-left:0;padding-right:0;font-size:29px}#gj-note-trainer .scale-accidentals .scale-double-sharp{font-size:33px}#gj-note-trainer .scale-accidentals button:nth-child(3){font-size:11px}
}

#gj-write-note #gjwn-key-signature{
  display:block;
  width:min(180px,52vw);
  min-width:150px;
  max-width:100%;
  height:44px;
  min-height:44px;
  margin-left:auto;
  padding:0 42px 0 12px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--ink);
  background-color:#fff;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;
  background-repeat:no-repeat;
  background-size:5px 5px,5px 5px;
  box-shadow:none;
  font:600 15px/1 Arial,sans-serif;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
#gj-write-note #gjwn-key-signature::-ms-expand{display:none}
#gj-write-note .gjwn-select-row[for="gjwn-key-signature"]{flex-wrap:wrap}
#gj-write-note .gjwn-key-accidental{fill:var(--ink);font-family:'GJ Noto Music',serif;font-size:38px;font-weight:400}
#gj-write-note .gjwn-accidental-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 12px}
#gj-write-note .gjwn-accidental-picker button{position:relative;display:grid;min-height:50px;place-items:center;padding:3px;border:1px solid var(--gold);border-radius:11px;background:#fff;color:var(--gold);cursor:pointer}
#gj-write-note .gjwn-accidental-picker button span{position:absolute;left:50%;top:50%;font-family:'GJ Noto Music',serif;font-size:30px;font-weight:400;line-height:1;transform:translate(-50%,-50%)}
#gj-write-note .gjwn-accidental-picker [data-accidental="♭"] span{transform:translate(-50%,-50%) translateY(-4px)}
#gj-write-note .gjwn-accidental-picker [data-accidental="♮"] span{transform:translate(-50%,-50%) translateY(-5px)}
#gj-write-note .gjwn-accidental-picker [data-accidental="♯"] span{transform:translate(-50%,-50%) translateY(-6px)}
#gj-write-note .gjwn-accidental-picker button small{font:700 12px Arial,sans-serif}
#gj-write-note .gjwn-accidental-picker button.active{color:#fff;background:var(--gold)}
#gj-write-note #gjwn-correct-accidental{fill:#2f7d4a}

/* Predznaki tonalitete v vaji Prepoznaj noto. */
#gj-note-trainer #gjnt-key-signature{display:block;width:min(180px,52vw);min-width:150px;max-width:100%;height:44px;min-height:44px;margin-left:auto;padding:0 42px 0 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background-color:#fff;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-repeat:no-repeat;background-size:5px 5px,5px 5px;box-shadow:none;font:600 15px/1 Arial,sans-serif;appearance:none;-webkit-appearance:none;-moz-appearance:none}
#gj-note-trainer #gjnt-key-signature::-ms-expand{display:none}
#gj-note-trainer .gjnt-select-row[for="gjnt-key-signature"]{flex-wrap:wrap}
#gj-note-trainer .gjnt-key-accidental{fill:var(--ink);font-family:'GJ Noto Music',serif;font-size:38px;font-weight:400}
#gj-note-trainer .gjnt-choice-grid.gjnt-four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:600px){#gj-note-trainer .gjnt-choice-grid.gjnt-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
#gj-note-trainer #gjnt-answers{display:grid;grid-template-columns:1fr;gap:6px}
#gj-note-trainer #gjnt-answers .gjnt-answer-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
#gj-note-trainer #gjnt-answers .gjnt-answer{min-width:0}
#gj-note-trainer #gjnt-answers .gjnt-answer-placeholder{display:block;min-height:50px;border:1px solid var(--line);border-radius:12px;background:var(--soft);opacity:.55}
@media(max-width:600px){#gj-note-trainer #gjnt-answers .gjnt-answer-row{gap:4px}#gj-note-trainer #gjnt-answers .gjnt-answer,#gj-note-trainer #gjnt-answers .gjnt-answer-placeholder{min-height:46px;padding:2px;font-size:12px}}

/* Razširjene nastavitve in zvočno prepoznavanje intervalov. */
#gj-note-trainer #gji-key-signature-select{display:block;width:min(180px,52vw);min-width:150px;max-width:100%;height:44px;margin-left:auto;padding:0 42px 0 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background-color:#fff;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-repeat:no-repeat;background-size:5px 5px,5px 5px;box-shadow:none;appearance:none;-webkit-appearance:none}
#gj-note-trainer .gjnt-choice-grid.gji-four{grid-template-columns:repeat(4,minmax(0,1fr))}
#gj-note-trainer .gji-tone-picker{display:grid;gap:7px}#gj-note-trainer .gji-tone-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}#gj-note-trainer .gji-tone-row label{cursor:pointer}#gj-note-trainer .gji-tone-row input{position:absolute;opacity:0;pointer-events:none}#gj-note-trainer .gji-tone-row span{display:grid;min-height:43px;place-items:center;padding:5px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13px;font-weight:700}#gj-note-trainer .gji-tone-row input:checked+span{color:#fff;background:var(--gold);border-color:var(--gold)}
#gj-note-trainer .gji-key-accidental{fill:var(--ink);font-family:'GJ Noto Music',serif;font-size:38px;font-weight:400}
#gj-note-trainer .gji-audio-controls{display:flex;justify-content:center;gap:9px;margin:-10px 0 16px}
#gj-note-trainer .gji-audio-controls button{display:grid;width:46px;height:42px;place-items:center;padding:0;border:1px solid var(--gold);border-radius:10px;background:#fff;color:var(--gold);font-size:21px;cursor:pointer}
#gj-note-trainer .gji-audio-controls button:hover{background:#fff8e8}
#gj-note-trainer .gji-audio-controls button svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#gj-note-trainer .gjnt-music.gji-score-hidden svg{visibility:hidden}
@media(max-width:600px){#gj-note-trainer .gjnt-choice-grid.gji-four{grid-template-columns:repeat(2,minmax(0,1fr))}#gj-note-trainer #gji-key-signature-select{width:100%;margin-top:8px}}
@media(max-width:600px){#gj-note-trainer .gji-tone-row{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){#gj-note-trainer #gji-accidentals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#gj-note-trainer .gja-answer-grid,#gj-note-trainer .gja-inversion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#gj-note-trainer .scale-type-groups{display:grid;gap:15px}
#gj-note-trainer .scale-type-group{display:grid;gap:8px}
#gj-note-trainer .scale-type-group>strong{color:var(--muted);font-size:13px}
#gj-note-trainer .scale-type-group .gjnt-choice-grid{margin:0}
#gj-note-trainer #gjnt-answers:has(.scale-answer-group){display:grid;grid-template-columns:1fr;gap:12px}
#gj-note-trainer .scale-answer-group{display:grid;gap:6px;text-align:left}
#gj-note-trainer .scale-answer-group>strong{color:var(--muted);font-size:12px}
#gj-note-trainer .scale-answer-group>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:600px){#gj-note-trainer .scale-answer-group>div{grid-template-columns:1fr}}
#gj-note-trainer #gjnt-answers .gja-chord-answer.selected{color:#fff!important;background:var(--gold)!important;border-color:var(--gold)!important}
#gj-note-trainer #gja-controls.gja-triad-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){#gj-note-trainer #gja-controls.gja-triad-controls{grid-template-columns:1fr}}
#gj-note-trainer .gja-wrong-note .gjnt-head,
#gj-note-trainer .gja-wrong-note .gj-static-whole-note,
#gj-note-trainer .gja-wrong-note .gjnt-accidental{fill:#b7463f!important}


/* Poravnava vsebine glave z 800 px široko kartico posamezne vaje. */
@media(min-width:581px){
  .notosled-exercise-header{
    padding-left:max(16px,calc((100vw - 800px)/2))!important;
    padding-right:max(16px,calc((100vw - 800px)/2))!important;
  }
}
@media(max-width:580px){
  .notosled-exercise-header{
    padding-left:14px!important;
    padding-right:14px!important;
  }
}
#gj-note-trainer #gjnt-start,#gj-write-note #gjwn-start{display:block;width:auto;min-width:210px;margin-left:auto;margin-right:auto;padding-left:30px;padding-right:30px}#gj-note-trainer #gjnt-start::after,#gj-write-note #gjwn-start::after{content:" →"}@media(max-width:420px){#gj-note-trainer #gjnt-start,#gj-write-note #gjwn-start{min-width:190px}}