: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));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  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%);
  line-height:1.65;
  -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); text-decoration:none}
a:hover{color:#b6fff6}
img{max-width:100%; display:block}
button,input,select{font:inherit}
*:focus-visible{outline:3px solid rgba(110,231,216,.55); 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); margin:0 auto; min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:14px; color:var(--text)}
.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}
.nav-links{display:flex; flex-wrap:wrap; gap:10px}
.nav-link{padding:10px 14px; border-radius:999px; color:var(--muted); font-weight:600; font-size:14px}
.nav-link:hover,.nav-link.active{color:var(--text); background:rgba(255,255,255,.06)}
.page{width:var(--wrap); margin:0 auto}
.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{
  background:linear-gradient(180deg, rgba(19,28,53,.9), rgba(12,19,37,.9));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}
.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{font-family:"Fraunces",Georgia,serif; font-size:clamp(2.6rem,5vw,4.8rem); line-height:.98; letter-spacing:-.045em; margin:18px 0 14px}
.hero h1 .accent{background:linear-gradient(135deg,#dffef7,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{font-size:1.08rem; color:var(--muted); max-width:60ch; margin:0}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.btn-primary,.btn-secondary,.start-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{
  background:linear-gradient(135deg,var(--brand),#9af7eb); color:#09101f; box-shadow:0 14px 34px rgba(110,231,216,.28)
}
.btn-secondary{
  background:rgba(255,255,255,.06); color:var(--text); border:1px solid rgba(255,255,255,.09)
}
.btn-primary:hover,.btn-secondary:hover,.start-btn:hover,.play-btn:hover,.tap-btn:hover{transform:translateY(-1px)}
.hero-meta{display:grid; gap:14px; padding:24px}
.meta-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.stat-card{padding:18px 18px 16px; border-radius:20px; box-shadow:var(--shadow-soft)}
.stat-label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); font-weight:800; margin-bottom:10px}
.stat-value{font-size:1.1rem; font-weight:800}
.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 0}
.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{font-family:"Fraunces",Georgia,serif; font-weight:500; letter-spacing:-.035em; margin:0; font-size:clamp(1.8rem,3vw,2.6rem)}
.section-title p{margin:0; color:var(--muted)}
.app-shell{padding:24px}
.app-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:22px}
.app-panel{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:24px}
.panel-kicker{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); font-weight:800; margin-bottom:12px}
.display-hero{padding:12px 0 18px}
.detected-note,.bpm-number{font-family:"Fraunces",Georgia,serif; font-size:clamp(4rem,9vw,6.6rem); line-height:.95; letter-spacing:-.05em; font-weight:500}
.detected-octave{font-size:1.6rem; color:var(--dim); vertical-align:super}
.detected-freq,.bpm-label,.tempo-name{color:var(--muted); font-weight:700}
.tuning-status{margin-top:10px; color:var(--text); font-weight:700}
.meter-wrap{margin-top:18px}
.meter-labels,.tool-row-label,.strings-label,.cb-label{display:flex; justify-content:space-between; gap:12px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); font-weight:800; margin-bottom:12px}
.meter-track{height:12px; border-radius:999px; background:rgba(255,255,255,.05); position:relative; overflow:hidden}
.meter-zones{display:flex; height:100%}
.flat-zone,.sharp-zone{flex:1; background:linear-gradient(90deg, rgba(255,142,142,.22), rgba(255,142,142,.10))}
.center-zone{width:20%; background:linear-gradient(90deg, rgba(114,230,166,.22), rgba(114,230,166,.34))}
.meter-center{position:absolute; left:50%; top:-5px; width:3px; height:22px; background:var(--success); border-radius:999px; transform:translateX(-50%); box-shadow:0 0 18px rgba(114,230,166,.55)}
.meter-needle{position:absolute; left:50%; top:-6px; width:4px; height:24px; border-radius:999px; background:linear-gradient(180deg,#d9fffa,var(--brand)); box-shadow:0 0 18px rgba(110,231,216,.65); transform:translateX(-50%); transition:left .08s linear}
.cents-display{margin-top:12px; color:var(--muted); font-weight:700; text-align:center}
.tuning-select,.pill-group,.presets,.bpm-buttons,.controls-grid{display:flex; flex-wrap:wrap; gap:10px}
.tuning-opt,.bpm-btn,.preset-btn,.controls-grid button{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); color:var(--text); padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:700}
.tuning-opt.active,.controls-grid button.active,.preset-btn.active,.pill-group button.active,.nav-link.active{background:linear-gradient(135deg, rgba(110,231,216,.16), rgba(138,180,255,.12)); border-color:rgba(110,231,216,.35)}
.strings-row{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px}
.string-btn{min-height:82px; border-radius:20px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; display:flex; flex-direction:column; justify-content:center; gap:4px; font-weight:800; transition:.18s}
.string-btn:hover,.string-btn.active,.string-btn.in-tune{background:linear-gradient(180deg, rgba(110,231,216,.14), rgba(138,180,255,.08)); border-color:rgba(110,231,216,.35)}
.string-label{font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.1em}
.helper-list{display:grid; gap:12px}
.helper-item{padding:16px 16px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
.helper-item h3{margin:0 0 6px; font-size:1rem}
.helper-item p{margin:0; color:var(--muted); font-size:.95rem}
.ad-slot{min-height:110px; display:grid; place-items:center; color:var(--dim); font-size:12px; letter-spacing:.18em; text-transform:uppercase; border:1px dashed rgba(255,255,255,.12); border-radius:20px; background:rgba(255,255,255,.025)}
.tool-band{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.feature-card,.tip-card,.promo-card,.support-card,.content-panel,.doc-card{padding:24px}
.feature-card h3,.tip-card h3,.promo-card h3,.support-card h3{margin:0 0 8px; font-size:1.05rem}
.feature-card p,.tip-card p,.promo-card p,.support-card p,.content-panel p,.doc-card p,.doc-card li{color:var(--muted)}
.support-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.content-panel{padding:30px}
.content-panel h3,.doc-card h2,.doc-card h3{margin:20px 0 8px; font-size:1.1rem}
.content-panel ul,.doc-card ul{padding-left:18px}
.gear-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.gear-card{padding:24px; text-align:left; transition:transform .18s ease, border-color .18s ease; box-shadow:var(--shadow-soft)}
.gear-card:hover{transform:translateY(-3px); border-color:rgba(110,231,216,.28)}
.gc-icon{font-size:1.6rem; margin-bottom:10px}
.gc-name{font-size:1rem; font-weight:800; color:var(--text); margin-bottom:8px}
.gc-desc{color:var(--muted); font-size:.94rem; min-height:72px}
.gc-cta{margin-top:14px; color:var(--brand); font-weight:800; font-size:.92rem}
.gear-disclosure{color:var(--dim); font-size:.85rem; margin-top:14px}
.kicker-link-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.kicker-link{display:inline-flex; padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.1); color:var(--text); background:rgba(255,255,255,.04); font-weight:700}
.doc-hero{padding:56px 0 18px}
.doc-card{padding:34px; max-width:860px; margin:0 auto}
.doc-meta{color:var(--dim); font-size:.95rem; margin-top:10px}
footer{padding:42px 0 60px; color:var(--dim)}
.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-links{display:flex; flex-wrap:wrap; gap:14px 18px}
.footer-links a{color:var(--muted); font-weight:600}
kbd{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-bottom-width:2px; border-radius:8px; padding:2px 7px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--text)}
.play-btn{width:84px; height:84px; display:grid; place-items:center; border-radius:999px; background:linear-gradient(135deg,var(--brand),#a5fff4); color:#09101f; box-shadow:0 16px 34px rgba(110,231,216,.28); margin:20px auto 14px}
.play-btn svg{width:30px; height:30px; fill:currentColor}
.tap-btn{background:rgba(255,255,255,.08); color:var(--text); min-width:120px}
.bpm-slider,.vol-slider{width:100%; accent-color:var(--brand)}
.beats-row{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:18px}
.beat-dot{height:14px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08)}
.beat-dot.active{background:var(--brand); box-shadow:0 0 18px rgba(110,231,216,.45)}
.shortcut-hint{color:var(--muted); text-align:center; font-size:.92rem}
.slider-wrap{margin-bottom:18px}
.tempo-name{font-size:.95rem; margin-top:6px}
@media (max-width: 980px){
  .hero-grid,.app-grid,.support-grid,.tool-band,.gear-grid{grid-template-columns:1fr}
  .strings-row{grid-template-columns:repeat(3,1fr)}
  .nav-inner{padding:0 2px}
}
@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{padding:22px}
  .nav-inner{min-height:72px; align-items:flex-start; padding:14px 0}
  .nav-links{width:100%}
  .page,.nav-inner{width:min(1180px, calc(100vw - 28px))}
  .strings-row{grid-template-columns:repeat(2,1fr)}
  .meta-grid{grid-template-columns:1fr}
}