/* ═══════════════════════════════════════════════════════════════════
   toolkit.css — Whyasmek Toolkit Framework
   Shared design system for every tabbed guide/toolkit page.
   Pairs with toolkit.js. Self-contained (does NOT load whyasmek-brand.css
   to avoid .section/.container/.nav collisions). Brand tokens are defined
   here so the look matches the main site.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Brand palette ── */
  --gold:#e8c420; --gold-bright:#f5d832; --gold-dim:#b89a10;
  --crimson:#9b1a2a; --crimson-bright:#c42038; --crimson-dim:#6b1020;
  --void:#0d0a09; --bone:#e8e0d0; --bone-dim:#b8b0a0;
  --bg:#0d0a09; --bg2:#130e0c; --bg3:#1c1410; --bg4:#261c16;
  --edge:#2e2018; --edge2:#3e2e20; --edge3:#52402e;
  --text:#e8e0d0; --text2:#8a7a6a; --text3:#4a3a2e;

  /* ── Functional palette (categorical coding — always with a legend) ──
     Muted, warm, brand-harmonised. Never use raw neon. */
  --fn-1:#e8c420; /* gold   — primary / major   */
  --fn-2:#d96d82; /* rose   — minor             */
  --fn-3:#5fc9b0; /* teal   — borrowed / sus    */
  --fn-4:#b69cdc; /* violet — diminished        */
  --fn-5:#f0b454; /* amber  — dominant / aug    */

  /* ── Type ── */
  --disp:'Bebas Neue',sans-serif;   /* big display headings   */
  --ui:'Syne',sans-serif;           /* body / UI              */
  --mono:'Space Mono',monospace;    /* labels / data          */

  /* ── Metrics ── */
  --header-h:64px; --tabs-h:96px; /* header + 2-row tab bar (desktop) */
  --r:10px; --r-sm:6px; --r-lg:16px;
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --dur:.25s;
  --maxw:1280px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--ui);
  font-size:15px; line-height:1.65; min-height:100vh; overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 82% 10%, rgba(232,196,32,.07) 0%, transparent 55%),
    radial-gradient(ellipse 55% 60% at 8% 92%, rgba(155,26,42,.10) 0%, transparent 55%);
}
img{max-width:100%}
a{color:inherit}
::selection{background:rgba(232,196,32,.25);color:var(--bone)}
.tk-container{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2.5rem); position:relative; z-index:1}

/* ═══ GLOBAL HEADER ═══ */
.tk-header{
  position:sticky; top:0; z-index:500; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-inline:clamp(1rem,4vw,2.5rem);
  background:rgba(13,10,9,.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--edge);
}
.tk-logo{display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--disp); font-size:1.7rem; letter-spacing:.06em; color:var(--bone); line-height:1}
.tk-logo img{width:38px; height:38px; border-radius:6px; object-fit:cover}
.tk-globalnav{display:flex; gap:2px; flex-wrap:wrap}
.tk-globalnav a{font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text2); text-decoration:none; padding:6px 13px; border-radius:2px; position:relative; transition:color .2s}
.tk-globalnav a::after{content:''; position:absolute; bottom:-1px; left:13px; right:13px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease)}
.tk-globalnav a:hover{color:var(--gold)} .tk-globalnav a:hover::after{transform:scaleX(1)}
.tk-globalnav a.is-current{color:var(--gold)} .tk-globalnav a.is-current::after{transform:scaleX(1)}
@media(max-width:560px){ .tk-globalnav a{padding:6px 9px; font-size:.6rem} }

/* ═══ HERO ═══ */
.tk-hero{position:relative; overflow:hidden; background:var(--void);
  padding:clamp(3rem,8vw,6rem) clamp(1.5rem,6vw,4rem) clamp(2.2rem,5vw,3.4rem)}
.tk-hero__mesh{position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 60% 60% at 82% 18%, rgba(232,196,32,.13) 0%, transparent 60%),
             radial-gradient(ellipse 55% 65% at 8% 95%, rgba(155,26,42,.18) 0%, transparent 58%)}
.tk-hero__scan{position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.05) 3px,rgba(0,0,0,.05) 4px)}
.tk-hero__inner{position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto}
.tk-kicker{font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:12px}
.tk-kicker::before{content:''; width:34px; height:1px; background:var(--gold)}
.tk-hero__title{font-family:var(--disp); line-height:.86; letter-spacing:.02em; color:var(--bone);
  font-size:clamp(3rem,11vw,8rem); margin:.6rem 0 1.2rem}
.tk-hero__title .hl{color:var(--gold)} .tk-hero__title .hl-red{color:var(--crimson-bright)}
.tk-hero__lead{font-family:var(--ui); font-size:clamp(.95rem,1.4vw,1.15rem); color:var(--text2); line-height:1.8; max-width:62ch}
.tk-hero__lead strong{color:var(--bone)}
.tk-hero__meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:1.6rem}
.tk-chip-meta{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:.58rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text2); border:1px solid var(--edge2); border-radius:2px; padding:6px 12px}
.tk-chip-meta ion-icon{font-size:1rem; color:var(--gold)}

/* ═══ TWO-ROW TAB NAV (categories + section pills) ═══ */
.tk-tabs{position:sticky; top:var(--header-h); z-index:400;
  background:rgba(13,10,9,.96); backdrop-filter:blur(20px); border-bottom:1px solid var(--edge2)}
.tk-tabs__inner{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2.5rem)}
.tk-tabs__cats{display:flex; gap:6px; padding:9px 0 0; flex-wrap:wrap}
.tk-cat{font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text2);
  background:var(--bg3); border:1px solid transparent; border-radius:30px; padding:8px 16px; cursor:pointer; transition:all .18s var(--ease);
  -webkit-tap-highlight-color:transparent; white-space:nowrap}
.tk-cat:hover{color:var(--text); border-color:var(--edge3)}
.tk-cat.is-active{color:var(--void); background:var(--gold); border-color:var(--gold); font-weight:700}
.tk-tabs__secs{display:flex; gap:4px; padding:8px 0 9px; overflow-x:auto; scrollbar-width:none}
.tk-tabs__secs::-webkit-scrollbar{display:none}
.tk-sec-pill{flex:0 0 auto; font-family:var(--ui); font-weight:600; font-size:.8rem; color:var(--text2);
  background:transparent; border:1px solid transparent; border-radius:7px; padding:9px 14px; cursor:pointer; transition:all .15s var(--ease);
  -webkit-tap-highlight-color:transparent; white-space:nowrap}
.tk-sec-pill:hover{color:var(--bone); background:var(--bg3)}
.tk-sec-pill.is-active{color:var(--gold); border-color:var(--gold); background:rgba(232,196,32,.1)}

/* ═══ PANELS (one visible) ═══ */
.tk-panel{display:none; padding:clamp(2.4rem,5vw,4rem) 0 clamp(3rem,6vw,5rem)}
.tk-panel.is-active{display:block; animation:tkFade .35s var(--ease)}
@keyframes tkFade{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.tk-panel__inner{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1rem,4vw,2.5rem)}

/* ═══ SECTION HEADER ═══ */
.tk-sec-head{display:flex; align-items:flex-start; gap:clamp(1rem,3vw,1.8rem); margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.tk-sec-num{font-family:var(--disp); font-size:clamp(2.4rem,6vw,4.2rem); line-height:.8; color:transparent;
  -webkit-text-stroke:1px var(--gold-dim); flex-shrink:0; user-select:none}
.tk-sec-title{font-family:var(--disp); font-size:clamp(1.9rem,4.5vw,3.1rem); color:var(--bone); letter-spacing:.03em; line-height:1}
.tk-sec-intro{font-family:var(--ui); font-size:1rem; color:var(--text2); line-height:1.75; margin-top:.7rem; max-width:72ch}
.tk-sec-intro strong{color:var(--bone)} .tk-sec-intro em{color:var(--bone); font-style:italic}

/* ═══ PROSE ═══ */
.tk-prose{display:flex; flex-direction:column; gap:1.2rem; max-width:74ch}
.tk-prose p{font-family:var(--ui); font-size:1rem; color:var(--text2); line-height:1.85}
.tk-prose strong{color:var(--bone)} .tk-prose em{color:var(--bone); font-style:italic}
.tk-prose h3{font-family:var(--disp); font-size:1.6rem; color:var(--bone); letter-spacing:.03em; margin-top:.6rem}

/* ═══ CARDS ═══ */
.tk-grid{display:grid; gap:2px; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.tk-card{background:var(--bg2); border:1px solid var(--edge); padding:clamp(1.4rem,3vw,2rem);
  display:flex; flex-direction:column; gap:.7rem; position:relative; overflow:hidden;
  transition:background .25s var(--ease), border-color .25s, transform .25s var(--ease)}
.tk-card::before{content:''; position:absolute; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg,var(--crimson),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
.tk-card:hover{background:var(--bg3); border-color:var(--edge2); transform:translateY(-3px)}
.tk-card:hover::before{transform:scaleX(1)}
.tk-card__icon{font-size:1.7rem; color:var(--gold-dim); transition:color .25s} .tk-card:hover .tk-card__icon{color:var(--gold)}
.tk-card__title{font-family:var(--disp); font-size:1.35rem; color:var(--bone); letter-spacing:.03em; line-height:1.05}
.tk-card__body{font-family:var(--ui); font-size:.9rem; color:var(--text2); line-height:1.7}

/* ═══ REFERENCE TABLE (+ notes-below + mobile card) ═══ */
.tk-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--edge); border-radius:var(--r)}
.tk-table{width:100%; border-collapse:collapse; font-size:.9rem}
.tk-table thead th{font-family:var(--mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  text-align:left; padding:.9rem 1.1rem; background:var(--bg3); border-bottom:1px solid var(--edge2); white-space:nowrap}
.tk-table tbody td{font-family:var(--ui); color:var(--text2); line-height:1.55; padding:.85rem 1.1rem; border-bottom:1px solid var(--edge); vertical-align:top}
.tk-table tbody tr:last-child td{border-bottom:none}
.tk-table tbody tr:hover td{background:rgba(232,196,32,.04)}
.tk-table td strong{color:var(--bone)}
.tk-table .num{font-family:var(--mono); color:var(--gold); white-space:nowrap}
/* notes moved into a full-width row beneath (toolkit.js) */
.tk-note-row td{border-top:none !important; padding-top:0; padding-bottom:14px}
.tk-note-lbl{font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-right:7px}

/* ═══ NUMBERED STEPS ═══ */
.tk-steps{display:flex; flex-direction:column; gap:2px}
.tk-step{display:flex; gap:1.3rem; background:var(--bg2); border:1px solid var(--edge); padding:clamp(1.2rem,2.5vw,1.7rem)}
.tk-step__n{font-family:var(--disp); font-size:2rem; line-height:1; color:var(--gold); flex-shrink:0; width:2.4rem}
.tk-step__body{flex:1}
.tk-step__title{font-family:var(--disp); font-size:1.3rem; color:var(--bone); letter-spacing:.02em; line-height:1.1; margin-bottom:.5rem}
.tk-step__title small{font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; color:var(--gold); margin-left:.6rem; vertical-align:middle}
.tk-step__body p{font-family:var(--ui); font-size:.94rem; color:var(--text2); line-height:1.8}
.tk-step__body strong{color:var(--bone)}

/* ═══ SIGNAL CHAIN ═══ */
.tk-chain{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem}
.tk-chain__node{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone); background:var(--bg3); border:1px solid var(--edge2); border-radius:2px; padding:9px 14px}
.tk-chain__node b{color:var(--gold)}
.tk-chain__arrow{color:var(--gold-dim); font-size:1.1rem}

/* ═══ CALLOUTS ═══ */
.tk-callout{display:flex; gap:1rem; padding:1.2rem 1.4rem; background:var(--bg2); border:1px solid var(--edge); border-left:3px solid var(--gold)}
.tk-callout ion-icon{font-size:1.4rem; color:var(--gold); flex-shrink:0; margin-top:2px}
.tk-callout--warn{border-left-color:var(--crimson-bright)} .tk-callout--warn ion-icon{color:var(--crimson-bright)}
.tk-callout__title{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); margin-bottom:.35rem}
.tk-callout p{font-family:var(--ui); font-size:.92rem; color:var(--text2); line-height:1.75}

/* ═══ INTERACTIVE LAB CHROME ═══ */
.tk-lab{background:linear-gradient(180deg,var(--bg3),var(--bg2)); border:1px solid var(--edge2); position:relative; overflow:hidden;
  padding:clamp(1.4rem,4vw,2.6rem)}
.tk-lab::before{content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--crimson),var(--gold),var(--crimson))}
.tk-lab__bar{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; flex-wrap:wrap}
.tk-lab__label{font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:8px}
.tk-lab__label .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); animation:tkPulse 2s ease-in-out infinite}
@keyframes tkPulse{0%,100%{opacity:1} 50%{opacity:.35}}
.tk-lab__reset{font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text2);
  background:var(--bg3); border:1px solid var(--edge2); border-radius:20px; padding:6px 12px; cursor:pointer; transition:all .15s}
.tk-lab__reset:hover{color:var(--gold); border-color:var(--gold-dim)}

/* ═══ OPTION / SELECTOR BUTTONS ═══ */
.tk-opts{display:flex; flex-wrap:wrap; gap:6px}
.tk-opt{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text2);
  background:var(--bg3); border:1px solid var(--edge2); border-radius:var(--r-sm); padding:9px 13px; min-height:38px; cursor:pointer; transition:all .18s var(--ease);
  -webkit-tap-highlight-color:transparent}
.tk-opt:hover{color:var(--bone); border-color:var(--gold-dim)}
.tk-opt.is-on{color:var(--void); background:var(--gold); border-color:var(--gold); font-weight:700}
.tk-field{display:flex; flex-direction:column; gap:.55rem}
.tk-field__label{font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}

/* ═══ PLAY CHIP (unified, large tap target) ═══ */
.tk-play{display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  font-family:var(--mono); font-size:12px; color:var(--gold-bright); background:rgba(232,196,32,.1);
  border:1px solid var(--gold-dim); border-radius:var(--r-sm); padding:9px 14px; min-height:40px; transition:all .15s var(--ease);
  -webkit-tap-highlight-color:transparent; white-space:nowrap}
.tk-play:hover{background:rgba(232,196,32,.2); border-color:var(--gold); transform:translateY(-2px)}
.tk-play:active{transform:scale(.95)} .tk-play.is-playing{background:var(--gold); color:var(--void); border-color:var(--gold)}
.tk-play ion-icon{font-size:13px}

/* ═══ CHORD/NOTE CHIP (consistent across wheels & key views) ═══ */
.tk-chord{display:inline-flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; min-width:64px; min-height:48px;
  justify-content:center; padding:9px 12px; border-radius:var(--r-sm); border:1px solid var(--edge); background:var(--bg3);
  transition:transform .12s, border-color .15s, box-shadow .15s; -webkit-tap-highlight-color:transparent}
.tk-chord:hover{transform:translateY(-2px); border-color:var(--edge3); box-shadow:0 4px 14px rgba(0,0,0,.3)}
.tk-chord:active{transform:scale(.97)}
.tk-chord .deg{font-family:var(--mono); font-size:9px; color:var(--text2); letter-spacing:.5px}
.tk-chord .name{font-family:var(--mono); font-weight:700; font-size:15px; line-height:1}
.tk-chord .notes{font-family:var(--mono); font-size:9px; color:var(--text2)}
.tk-chord.is-active{outline:2px solid var(--gold); outline-offset:1px; box-shadow:0 0 16px rgba(232,196,32,.35)}
/* functional quality colours */
.q1 .name{color:var(--fn-1)} .q2 .name{color:var(--fn-2)} .q3 .name{color:var(--fn-3)}
.q4 .name{color:var(--fn-4)} .q5 .name{color:var(--fn-5)}
.q1{border-color:rgba(232,196,32,.35)} .q2{border-color:rgba(217,109,130,.35)} .q3{border-color:rgba(95,201,176,.35)}
.q4{border-color:rgba(182,156,220,.35)} .q5{border-color:rgba(240,180,84,.35)}

/* legend (mandatory wherever functional colours are used) */
.tk-legend{display:flex; flex-wrap:wrap; gap:14px; margin:14px 0; font-family:var(--mono); font-size:11px; color:var(--text2)}
.tk-legend span{display:inline-flex; align-items:center; gap:6px}
.tk-legend i{width:12px; height:12px; border-radius:3px; display:inline-block}

/* ═══ BADGES ═══ */
.tk-badge{font-family:var(--mono); font-size:.5rem; letter-spacing:.16em; text-transform:uppercase; padding:4px 9px; border-radius:2px; display:inline-flex; align-items:center; gap:6px}
.tk-badge--gold{color:var(--gold); border:1px solid var(--gold-dim); background:rgba(232,196,32,.1)}
.tk-badge--red{color:var(--crimson-bright); border:1px solid var(--crimson-dim); background:rgba(155,26,42,.12)}

/* ═══ PREV / NEXT PAGER ═══ */
.tk-pager{display:flex; justify-content:space-between; gap:12px; margin-top:clamp(2.4rem,5vw,3.5rem); padding-top:1.6rem; border-top:1px solid var(--edge)}
.tk-pager a, .tk-pager button{flex:1; max-width:48%; text-align:left; cursor:pointer; text-decoration:none;
  background:var(--bg2); border:1px solid var(--edge); border-radius:var(--r); padding:1rem 1.2rem; transition:all .2s var(--ease); -webkit-tap-highlight-color:transparent}
.tk-pager a:hover, .tk-pager button:hover{border-color:var(--gold-dim); background:var(--bg3); transform:translateY(-2px)}
.tk-pager .dir{font-family:var(--mono); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:.3rem}
.tk-pager .lbl{font-family:var(--disp); font-size:1.2rem; color:var(--bone); letter-spacing:.02em; line-height:1}
.tk-pager .next{text-align:right}
.tk-pager .ghost{visibility:hidden}

/* ═══ BOTTOM TOOL DOCK (e.g. live keyboard) ═══ */
.tk-dock{position:fixed; left:0; right:0; bottom:0; z-index:300; background:rgba(13,10,9,.97); backdrop-filter:blur(18px);
  border-top:1px solid var(--edge2); box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.tk-dock__bar{display:flex; align-items:center; gap:12px; padding:7px clamp(.8rem,3vw,1.4rem); border-bottom:1px solid var(--edge)}
.tk-dock__title{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); white-space:nowrap}
.tk-dock__label{font-family:var(--mono); font-size:12px; color:var(--gold-bright); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tk-dock__btn{font-family:var(--mono); font-size:10px; padding:5px 11px; min-height:30px; border-radius:20px; border:1px solid var(--edge2); background:var(--bg3); color:var(--text2); cursor:pointer; transition:all .15s; white-space:nowrap}
.tk-dock__btn:hover{color:var(--gold); border-color:var(--gold-dim)}
.tk-dock__btn.is-on{color:var(--gold); border-color:var(--gold-dim); background:rgba(232,196,32,.12)}
.tk-dock__body{padding:10px clamp(.8rem,3vw,1.4rem) 9px; text-align:center}
.tk-dock.is-min .tk-dock__body{display:none}
@media(min-width:680px){ body.tk-has-dock{padding-bottom:200px} body.tk-dock-min{padding-bottom:48px} }
@media(max-width:680px){ body.tk-has-dock{padding-bottom:230px} body.tk-dock-min{padding-bottom:48px} .tk-dock__title{display:none} }
.tk-dock__scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; text-align:center}
.tk-kb{position:relative; display:inline-flex; height:96px; user-select:none; min-width:min-content; vertical-align:top}
.tk-key{position:relative; cursor:pointer; transition:background .1s, box-shadow .1s}
.tk-key.w{width:30px; height:96px; background:linear-gradient(180deg,#f1ece0,#d8d0c0); border:1px solid #0d0a09; border-radius:0 0 5px 5px; z-index:1; margin-right:-1px}
.tk-key.b{width:19px; height:60px; background:linear-gradient(180deg,#2a2018,#0d0a09); border:1px solid #000; border-radius:0 0 4px 4px; z-index:2; margin-left:-9.5px; margin-right:-9.5px}
.tk-key.w:hover{background:linear-gradient(180deg,#fff,#eadfce)}
.tk-key.b:hover{background:linear-gradient(180deg,#3a2c1e,#1a120c)}
.tk-key.lit-root{background:linear-gradient(180deg,var(--gold-bright),var(--gold)) !important; box-shadow:0 0 14px rgba(232,196,32,.7) !important}
.tk-key.lit.w{background:linear-gradient(180deg,#d8455f,#c42038) !important; box-shadow:0 0 10px rgba(196,32,56,.5) !important}
.tk-key.lit.b{background:linear-gradient(180deg,#9a1828,#6b1020) !important}
.tk-key.down.w{background:linear-gradient(180deg,#f5d832,#e8c420) !important}
.tk-key.down.b{background:linear-gradient(180deg,#b8923a,#8a6f12) !important}
.tk-key .lbl{position:absolute; bottom:5px; left:0; right:0; text-align:center; font-family:var(--mono); font-size:8.5px; pointer-events:none; color:#55483a}
.tk-key.b .lbl{color:#bbb}
.tk-key.lit-root .lbl{color:#0d0a09; font-weight:700}
.tk-key.lit .lbl{color:#fbf3e6; font-weight:700}
.tk-dock.nolabels .lbl{display:none}

/* ═══ SCROLL-TOP ═══ */
.tk-top{position:fixed; bottom:20px; right:20px; width:46px; height:46px; border-radius:50%; background:var(--gold); color:var(--void);
  border:none; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .15s; z-index:350; box-shadow:0 4px 16px rgba(0,0,0,.4)}
.tk-top.show{opacity:1; pointer-events:auto} .tk-top:hover{transform:translateY(-3px)}

/* ═══ FOOTER ═══ */
.tk-footer{border-top:1px solid var(--edge); padding:2.4rem clamp(1.5rem,6vw,4rem); text-align:center}
.tk-footer p{font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text3)}
.tk-footer a{color:var(--gold); text-decoration:none}

/* ═══ REVEAL ═══ */
.tk-reveal{opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.tk-reveal.is-in{opacity:1; transform:none}

/* ═══ FOCUS / A11Y ═══ */
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.tk-skip{position:fixed; top:-60px; left:8px; z-index:600; background:var(--gold); color:var(--void); padding:8px 14px; border-radius:4px; font-family:var(--mono); font-size:.7rem; transition:top .2s}
.tk-skip:focus{top:8px}

/* ═══ RESPONSIVE ═══ */
@media(max-width:760px){
  .tk-sec-head{gap:.9rem}
  .tk-cat{font-size:.62rem; padding:7px 13px}
  /* reference tables → stacked cards on phones */
  .tk-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .tk-table, .tk-table tbody, .tk-table tr, .tk-table td{display:block; width:100%}
  .tk-table tbody tr{border:1px solid var(--edge); border-radius:var(--r-sm); margin-bottom:10px; padding:4px 2px}
  .tk-table tbody td{border-bottom:none !important; padding:7px 12px}
  .tk-table tbody td[data-label]::before{content:attr(data-label); font-family:var(--mono); font-size:9px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--gold); display:block; margin-bottom:2px}
  .tk-note-row td{padding-top:7px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .tk-reveal{opacity:1; transform:none}
}


/* ── Custom cursor (created by toolkit.js / music-theory) ── */
@media (hover:hover) and (pointer:fine){
  body.tk-has-cursor{cursor:none}
  body.tk-has-cursor a, body.tk-has-cursor button, body.tk-has-cursor [role=tab],
  body.tk-has-cursor .tk-key, body.tk-has-cursor select, body.tk-has-cursor .clickable{cursor:none}
  .ui-cur-dot,.ui-cur-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:100000;translate:-50% -50%}
  .ui-cur-dot{width:6px;height:6px;background:var(--gold,#e8c420)}
  .ui-cur-ring{width:34px;height:34px;border:1.5px solid var(--crimson-bright,#c42038);transition:width .18s,height .18s,border-color .18s}
  .ui-cur-ring.is-hover{width:52px;height:52px;border-color:var(--gold,#e8c420)}
}
@media (prefers-reduced-motion:reduce){ .ui-cur-dot,.ui-cur-ring{display:none!important} body.tk-has-cursor{cursor:auto} }