:root{
  --bg:#0b1020;
  --bg-soft:#111933;
  --panel:#121a31cc;
  --panel-strong:#16203d;
  --panel-elev:#1a274a;
  --text:#eef2ff;
  --muted:#a9b4d0;
  --dim:#7884a8;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.16);
  --brand:#6ee7d8;
  --brand-2:#8ab4ff;
  --brand-3:#f6c86f;
  --success:#72e6a6;
  --danger:#ff8e8e;
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --shadow-soft:0 10px 28px rgba(0,0,0,.22);
  --radius:24px;
  --radius-sm:16px;
  --radius-xs:12px;
  --wrap:min(1180px, calc(100vw - 40px));
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 10% 0%, rgba(138,180,255,.16), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(110,231,216,.15), transparent 30%),
    linear-gradient(180deg,#08101f 0%, #0a1123 34%, #0b1020 100%) !important;
  color:var(--text) !important;
  font-family:"Inter","Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
  line-height:1.65 !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.45), transparent 80%);
}
a{color:var(--brand) !important}
a:hover{color:#b6fff6 !important}
*:focus-visible{outline:3px solid rgba(110,231,216,.55)!important; outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;background:#fff;color:#000;padding:12px 16px;z-index:999}
.skip-link:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;border-radius:12px}
.site-nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(18px) saturate(140%);
  background:rgba(8,16,31,.72);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{width:var(--wrap)!important; max-width:none!important; margin:0 auto!important; min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:0 !important}
.brand{display:flex; align-items:center; gap:14px; color:var(--text)!important; text-decoration:none!important}
.brand-mark{width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#09101f; display:grid; place-items:center; font-weight:900; box-shadow:0 8px 24px rgba(110,231,216,.28)}
.brand-text{display:flex; flex-direction:column; line-height:1.05}
.brand-kicker{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); font-weight:700}
.brand-name{font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--text)}
.nav-links{display:flex!important; flex-wrap:wrap; gap:10px}
.nav-link{padding:10px 14px!important; border-radius:999px!important; color:var(--muted)!important; font-weight:600!important; font-size:14px!important; background:transparent!important; border:none!important}
.nav-link:hover,.nav-link.active{color:var(--text)!important; background:rgba(255,255,255,.06)!important}
.page, main.page{width:var(--wrap)!important; max-width:none!important; margin:0 auto!important; padding:0!important}
.hero{padding:64px 0 26px}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:stretch}
.hero-card,.glass-card,.app-shell,.content-panel,.stat-card,.faq-item,.tip-card,.gear-card,.doc-card,.feature-card,.promo-card,.support-card,.section,.content-card,.seo-content,.card,.tool-link,.tool-card,.note-pill,.stat,.link-box,.modal-diagram{
  background:linear-gradient(180deg, rgba(19,28,53,.9), rgba(12,19,37,.9)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:var(--shadow);
  border-radius:var(--radius)!important;
}
.hero-card{padding:42px}
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.05); color:var(--muted); font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.hero h1, header h1{font-family:"Fraunces",Georgia,serif!important; font-size:clamp(2.6rem,5vw,4.8rem)!important; line-height:.98!important; letter-spacing:-.045em!important; margin:18px 0 14px!important; color:var(--text)!important}
.hero h1 .accent, header h1 span, .accent-gradient{background:linear-gradient(135deg,#dffef7,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent!important}
.hero p, header p{font-size:1.08rem!important; color:var(--muted)!important; max-width:60ch; margin:0}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.btn-primary,.btn-secondary,.start-btn,.cta-btn,.play-btn,.tap-btn{
  border:none; cursor:pointer; border-radius:16px; padding:15px 22px; font-weight:800; letter-spacing:-.01em; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary,.start-btn,.cta-btn{
  background:linear-gradient(135deg,var(--brand),#9af7eb)!important; color:#09101f!important; box-shadow:0 14px 34px rgba(110,231,216,.28)
}
.btn-secondary{background:rgba(255,255,255,.06)!important; color:var(--text)!important; border:1px solid rgba(255,255,255,.09)!important}
.btn-primary:hover,.btn-secondary:hover,.start-btn:hover,.play-btn:hover,.tap-btn:hover,.tool-link:hover,.gear-card:hover{transform:translateY(-2px)}
.hero-meta{display:grid; gap:14px; padding:24px}
.meta-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.stat-card,.stat{padding:18px 18px 16px; border-radius:20px!important; box-shadow:var(--shadow-soft)}
.stat-label{font-size:11px!important; letter-spacing:.16em; text-transform:uppercase; color:var(--dim)!important; font-weight:800!important; margin-bottom:10px}
.stat-value,.stat-val{font-size:1.1rem!important; font-weight:800!important; color:var(--text)!important}
.stat-copy{font-size:.92rem; color:var(--muted)}
.hero-note{padding:16px 18px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); color:var(--muted)}
.hero-note strong{color:var(--text)}
.section{padding:26px!important; margin:0 0 24px!important}
.section-title{display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px}
.section-title h2,.content-panel h2,.doc-card h1,.content-card h2,.seo-content h2,.card h2,.section h2{font-family:"Fraunces",Georgia,serif!important; font-weight:500!important; letter-spacing:-.035em!important; margin:0 0 10px!important; font-size:clamp(1.8rem,3vw,2.6rem)!important; color:var(--text)!important}
.section-title p,.subtitle,.content-card p,.seo-content p,.card p,.section p,.tip-card p,.tool-desc,.tl-desc,.content-panel p,.doc-card p,.doc-card li,.content-card li,.seo-content li,.card li,.section li{margin:0 0 12px; color:var(--muted)!important; font-size:1rem!important; line-height:1.72!important}
.content-card h3,.seo-content h3,.card h3,.section h3,.content-panel h3,.doc-card h2,.doc-card h3{margin:22px 0 10px!important; font-size:1.12rem!important; color:var(--text)!important}
.app-shell{padding:24px}
.tool-band,.support-grid,.tool-grid,.gear-grid,.tips-grid{display:grid; gap:14px}
.tool-band{grid-template-columns:repeat(3,1fr)}
.support-grid{grid-template-columns:1fr 1fr}
.tool-grid,.gear-grid{grid-template-columns:repeat(3,1fr)}
.tool-link,.gear-card{padding:24px!important; text-align:left; transition:transform .18s ease, border-color .18s ease; box-shadow:var(--shadow-soft)}
.tool-link:hover,.gear-card:hover{border-color:rgba(110,231,216,.28)!important}
.tl-emoji,.gc-icon{font-size:1.6rem; margin-bottom:10px}
.tl-name,.gc-name{font-size:1rem!important; font-weight:800!important; color:var(--text)!important; margin-bottom:8px}
.tl-desc,.gc-desc{color:var(--muted)!important; font-size:.94rem!important; min-height:72px}
.gc-cta{margin-top:14px; color:var(--brand)!important; font-weight:800; font-size:.92rem}
.tool-link::after{content:"Open resource →"; display:block; margin-top:14px; color:var(--brand); font-weight:800; font-size:.92rem}
.kicker-link-row,.cross-links,.link-box .links,.filter-group,.tuning-select,.controls-grid,.bpm-buttons,.presets{display:flex; flex-wrap:wrap; gap:10px}
.kicker-link,.cross-link,.link-box .links a,.filter-group button,.tuning-opt,.bpm-btn,.preset-btn,.controls-grid button{
  display:inline-flex; align-items:center; justify-content:center; padding:10px 14px!important; border-radius:999px!important; background:rgba(255,255,255,.05)!important; color:var(--text)!important; border:1px solid rgba(255,255,255,.10)!important; font-weight:700!important; font-size:.92rem!important;
}
.filter-group button.active,.tuning-opt.active,.controls-grid button.active,.preset-btn.active,.nav-link.active,.link-box .links a:hover,.cross-link:hover,.kicker-link:hover{background:linear-gradient(135deg, rgba(110,231,216,.16), rgba(138,180,255,.12))!important; border-color:rgba(110,231,216,.35)!important}
.chord-grid{display:grid!important; grid-template-columns:repeat(auto-fit,minmax(110px,1fr))!important; gap:10px!important}
.chord-card{padding:14px 10px!important; border-radius:16px!important; font-size:.92rem!important; font-weight:800!important; color:var(--text)!important; background:rgba(255,255,255,.04)!important; border:1px solid rgba(255,255,255,.1)!important}
.chord-card:hover{background:linear-gradient(180deg, rgba(110,231,216,.14), rgba(138,180,255,.08))!important; border-color:rgba(110,231,216,.35)!important}
.interval-table,.ref-table{background:rgba(255,255,255,.03)!important; border:1px solid rgba(255,255,255,.08)!important}
.interval-table th,.ref-table th{background:rgba(255,255,255,.06)!important; color:var(--text)!important}
.interval-table td,.ref-table td{color:var(--muted)!important; border-bottom:1px solid rgba(255,255,255,.06)!important}
.note-pill.root{background:linear-gradient(135deg, rgba(110,231,216,.16), rgba(138,180,255,.12))!important; border-color:rgba(110,231,216,.35)!important}
.ad-slot{min-height:110px; display:grid; place-items:center; color:var(--dim)!important; font-size:12px!important; letter-spacing:.18em; text-transform:uppercase; border:1px dashed rgba(255,255,255,.12)!important; border-radius:20px!important; background:rgba(255,255,255,.025)!important}
.link-box h3,.panel-kicker,.strings-label,.cb-label,.meter-labels,.bpm-label,.gear-disclosure{color:var(--dim)!important}
.footer-card{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:24px; border-radius:24px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
footer{padding:42px 0 60px; color:var(--dim)}
.footer-links{display:flex; flex-wrap:wrap; gap:14px 18px}
.footer-links a{color:var(--muted)!important; font-weight:600}
.jmt-home .page{padding-bottom:40px!important}
.doc-hero{padding:56px 0 18px}
.doc-card{padding:34px; max-width:860px; margin:0 auto}
.legal-content{max-width:860px; margin:36px auto 0}
.legal-content .content-card{padding:34px}
@media (max-width: 980px){
  .hero-grid,.support-grid,.tool-band,.tool-grid,.gear-grid{grid-template-columns:1fr!important}
  .nav-inner{padding:0 2px!important}
}
@media (max-width: 720px){
  .hero{padding-top:36px}
  .hero-card,.hero-meta,.feature-card,.tip-card,.promo-card,.support-card,.content-panel,.app-shell,.doc-card,.section,.content-card,.seo-content,.card{padding:22px!important}
  .nav-inner{min-height:72px; align-items:flex-start; padding:14px 0!important}
  .nav-links{width:100%}
  .page,.nav-inner{width:min(1180px, calc(100vw - 28px))!important}
  .meta-grid{grid-template-columns:1fr!important}
}