/* Akordni krog – Trzalica.com */
.tzk{--k-ink:#1f140c;--k-ink2:#5b4733;--k-cu:#b8763a;--k-cud:#7c4519;--k-gold:#d8a45a;--k-cream:#f4ead8;--k-cream2:#efe3cc;--k-paper:#fbf6ee;--k-line:#d8c7a7;--k-wood:#2a170d;
	font-family:"Newsreader",Georgia,"Times New Roman",serif;color:var(--k-ink);font-size:17px;line-height:1.45}
.tzk *{box-sizing:border-box}
.tzk button{font:inherit;color:inherit;cursor:pointer}
.tzk-grid{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:40px;align-items:start}
.tzk-left{position:sticky;top:20px}
.tzk-grid>*{min-width:0}
.tzk-h3,.tzk h3{font-size:22px;font-weight:600;margin:0;letter-spacing:-.01em}
.tzk h4{font-size:15px;text-transform:uppercase;letter-spacing:.12em;color:var(--k-ink2);margin:22px 0 10px;font-weight:600}

/* ---------- kvintni krog */
.tzk-circle svg{display:block;width:100%;height:auto;user-select:none;-webkit-tap-highlight-color:transparent}
.kc-rim{fill:var(--k-wood)}
.kc-seg{fill:#f7efe2;stroke:var(--k-wood);stroke-width:2;cursor:pointer;transition:fill .15s}
.kc-seg.kc-in{fill:#eadcc2}
.kc-seg:hover{fill:#fff7e8}
.kc-seg.kc-in:hover{fill:#f2e6cf}
.kc-seg.is-key{fill:#f0cf98}
.kc-seg.kc-in.is-key{fill:#e2b977}
.kc-seg.is-sel,.kc-seg.kc-in.is-sel{fill:var(--k-cu)}
.kc-seg:focus-visible{outline:none;stroke:#fff;stroke-width:3}
.kc-t{font-size:25px;font-weight:600;fill:var(--k-ink);pointer-events:none}
.kc-ti{font-size:18px;font-style:italic;font-weight:500;fill:var(--k-ink2)}
.kc-t.is-sel{fill:#fff}
.kc-acc{font:11px/1 system-ui,sans-serif;fill:#8f7556;pointer-events:none;letter-spacing:.02em}
.kc-mid{fill:var(--k-wood);stroke:var(--k-cu);stroke-width:2}
.kc-big{font-size:34px;font-weight:600;fill:#f6e7cc;font-style:italic}
.kc-small{font-size:15px;fill:var(--k-gold);letter-spacing:.04em}
.tzk-hint{font-size:14.5px;color:var(--k-ink2);text-align:center;margin:10px 4px 22px}

/* ---------- tonaliteta */
.tzk-key{background:var(--k-paper);border:1px solid var(--k-line);border-radius:16px;padding:18px 18px 20px}
.tzk-keyhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.tzk-keyhead h3{font-size:18px;font-weight:500}
.tzk-keyhead b{color:var(--k-cud)}
.tzk-seg{display:inline-flex;background:var(--k-cream2);border-radius:999px;padding:3px}
.tzk-seg button{border:0;background:transparent;border-radius:999px;padding:4px 12px;font-size:14px}
.tzk-seg button[aria-pressed="true"]{background:#fff;box-shadow:0 1px 3px rgba(60,30,10,.15);font-weight:600}
.tzk-deg{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.tzk-dchip{border:1px solid var(--k-line);background:#fff;border-radius:10px;padding:6px 2px 7px;display:flex;flex-direction:column;align-items:center;font-weight:600;font-size:16px;line-height:1.1;transition:background .15s,border-color .15s}
.tzk-dchip small{font:600 11px/1 system-ui,sans-serif;color:#9a7a55;margin-bottom:4px;letter-spacing:.03em}
.tzk-dchip:hover{border-color:var(--k-cu)}
.tzk-dchip.is-on{background:var(--k-cu);border-color:var(--k-cu);color:#fff}
.tzk-dchip.is-on small{color:#ffe6c4}
.tzk-progs{display:grid;gap:8px}
.tzk-prog{display:grid;grid-template-columns:28px auto 1fr;align-items:center;gap:10px;text-align:left;border:1px solid var(--k-line);background:#fff;border-radius:12px;padding:8px 12px}
.tzk-prog:hover{border-color:var(--k-cu)}
.tzk-prog b{font-weight:600;white-space:nowrap}
.tzk-prog span:last-child{color:var(--k-ink2);font-size:15.5px;text-align:right}
.tzk-prog i{font-style:normal;padding:1px 3px;border-radius:5px;transition:background .12s}
.tzk-prog i.is-now{background:var(--k-cu);color:#fff}
.tzk-pplay{width:28px;height:28px;border-radius:50%;background:var(--k-cream2);display:grid;place-items:center;font-size:11px;color:var(--k-cud)}
.tzk-prog.is-playing{border-color:var(--k-cu);box-shadow:0 0 0 3px rgba(184,118,58,.18)}
.tzk-prog.is-playing .tzk-pplay{background:var(--k-cu);color:#fff}

/* ---------- glava */
.tzk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-bottom:1px solid var(--k-line);padding-bottom:16px;margin-bottom:18px}
.tzk-kick{font:600 12px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.18em;color:var(--k-cu)}
.tzk-name{font-size:64px;line-height:1;margin:6px 0 4px;font-weight:600;font-style:italic;letter-spacing:-.02em}
.tzk-long{margin:0;color:var(--k-ink2);font-size:18px}
.tzk-play{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--k-wood);color:#f6e7cc!important;border-radius:999px;padding:11px 20px 11px 14px;font-weight:600;flex:none}
.tzk-play svg{width:22px;height:22px;fill:var(--k-gold)}
.tzk-play:hover{background:#3d2314}
.tzk-roots,.tzk-types{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tzk-roots button,.tzk-types button{border:1px solid var(--k-line);background:#fff;border-radius:999px;padding:5px 12px;font-size:15.5px;line-height:1.2;min-width:42px;transition:background .12s,border-color .12s}
.tzk-roots button{font-weight:600}
.tzk-types button{font-size:14.5px}
.tzk-roots button:hover,.tzk-types button:hover{border-color:var(--k-cu)}
.tzk-roots button[aria-pressed="true"],.tzk-types button[aria-pressed="true"]{background:var(--k-wood);border-color:var(--k-wood);color:#f6e7cc}
.tzk-tones{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 26px}
.tzk-tone{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:baseline;text-align:left;border:1px solid var(--k-line);background:var(--k-paper);border-radius:12px;padding:7px 14px 8px}
.tzk-tone b{font-size:24px;line-height:1;font-weight:600}
.tzk-tone small{font:600 12px/1 system-ui,sans-serif;color:var(--k-cu)}
.tzk-tone span{grid-column:1/-1;font-size:13.5px;color:var(--k-ink2);margin-top:2px}
.tzk-tone.is-root{background:var(--k-wood);border-color:var(--k-wood);color:#f6e7cc}
.tzk-tone.is-root span{color:#cdb08a}
.tzk-tone.is-root small{color:var(--k-gold)}
.tzk-tone:hover{border-color:var(--k-cu)}

/* ---------- prijemi */
.tzk-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.tzk-bar small{font-size:15px;color:var(--k-ink2);font-weight:400;margin-left:6px}
.tzk-opts{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14.5px;color:var(--k-ink2)}
.tzk-opts label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.tzk-opts input{accent-color:var(--k-cu);width:16px;height:16px;margin:0}
.tzk-voicings{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:34px}
.tzk-v{position:relative;border:1px solid var(--k-line);background:#fff;border-radius:14px;padding:16px 8px 12px;display:flex;flex-direction:column;align-items:center;transition:border-color .15s,box-shadow .15s,transform .1s}
.tzk-v:hover{border-color:var(--k-cu);box-shadow:0 6px 18px rgba(60,30,10,.1)}
.tzk-v:active{transform:scale(.98)}
.tzk-v.is-best{border-color:var(--k-cu);background:#fffaf2}
.tzk-v.is-hit svg{animation:tzk-hit .5s}
@keyframes tzk-hit{30%{transform:translateX(1px) rotate(.4deg)}60%{transform:translateX(-1px)}}
.tzk-badge{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--k-cu);color:#fff;font:600 10.5px/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.08em;padding:4px 8px;border-radius:999px;white-space:nowrap}
.tzk-v svg{width:100%;max-width:140px;height:auto;display:block}
.tzk-vl{font-size:14.5px;color:var(--k-ink2);margin-top:2px}
.tzk-tab{font:12.5px/1.2 ui-monospace,Menlo,Consolas,monospace;color:#9a7a55;letter-spacing:.08em;margin-top:3px}
.k-fret{stroke:#bba584;stroke-width:1.2}
.k-str{stroke:#6b5236}
.k-nut{fill:var(--k-wood)}
.k-pos{font:600 13px system-ui,sans-serif;fill:var(--k-ink2)}
.k-inlay{fill:#ece0cb}
.k-dot{fill:var(--k-wood)}
.k-dot.k-root{fill:var(--k-cu)}
.k-fin{font:700 11px system-ui,sans-serif;fill:#fff}
.k-open{fill:#fff;stroke:var(--k-wood);stroke-width:1.6}
.k-mute{font:15px system-ui,sans-serif;fill:#9a7a55}
.k-note{font:600 11.5px system-ui,sans-serif;fill:var(--k-ink)}
.k-sname{font:10.5px system-ui,sans-serif;fill:#a88f6d}
.tzk-empty{color:var(--k-ink2)}

/* ---------- vrat */
.tzk-neck{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 0;padding-bottom:6px}
.tzk-neck svg{display:block;min-width:640px;width:100%;height:auto}
.kn-wood{fill:#4a2c18}
.kn-fret{stroke:#c9b48f;stroke-width:2}
.kn-nut{stroke:#efe3cc;stroke-width:6}
.kn-num{font:11px system-ui,sans-serif;fill:#9a7a55}
.kn-inlay{fill:#6d4a2f}
.kn-str{stroke:#e3cfa9}
.kn-sl{font:600 12px system-ui,sans-serif;fill:var(--k-ink2)}
.kn-n{cursor:pointer}
.kn-n circle{fill:#f6e7cc;stroke:var(--k-wood);stroke-width:1.2;transition:r .12s}
.kn-n text{font:700 9.5px system-ui,sans-serif;fill:var(--k-wood);pointer-events:none}
.kn-n.is-root circle{fill:var(--k-cu);stroke:#fff}
.kn-n.is-root text{fill:#fff}
.kn-n:hover circle,.kn-n.is-flash circle{fill:var(--k-gold)}

@media (max-width:900px){
	.tzk-grid{display:flex;flex-direction:column;gap:0}
	.tzk-left{display:contents}
	.tzk-circle{order:1;width:100%;max-width:440px;margin:0 auto}
	.tzk-hint{order:2;margin-bottom:28px}
	.tzk-right{order:3;width:100%}
	.tzk-key{order:4;margin-top:8px}
	.tzk-name{font-size:48px}
}
@media (max-width:520px){
	.tzk{font-size:16px}
	.tzk-voicings{grid-template-columns:repeat(2,1fr);gap:10px}
	.tzk-head{flex-wrap:wrap}
	.tzk-deg{grid-template-columns:repeat(4,1fr)}
	.tzk-prog{grid-template-columns:28px 1fr}
	.tzk-prog span:last-child{grid-column:1/-1;text-align:left}
}
@media print{.tzk-left,.tzk-play,.tzk-opts,.tzk-roots,.tzk-types{display:none}.tzk-grid{display:block}}