:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#0a0a0a;
  --card-bg:#141414;
  --card-border:#2a2a2a;
  --text:#ffffff;
  --gold:#ffd700;
  --gold-hover:#ffea70;
  --sub:#d8b4fe;
}
html{scroll-padding-top:calc(64px + env(safe-area-inset-top,0px));scroll-behavior:smooth;}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;}
body{
  font-family:Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  text-align:center;
  line-height:1.6;
  overflow-x:hidden;
}

#progress{position:fixed;top:0;left:0;height:3px;background:var(--gold);width:0%;z-index:999;transition:width .1s;box-shadow:0 0 8px var(--gold);}

nav{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:900;
  background:rgba(10,10,10,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--card-border);
  display:flex;justify-content:center;gap:22px;flex-wrap:wrap;
  padding:14px 10px;
}
nav a{color:#ccc;text-decoration:none;font-size:13px;letter-spacing:1px;font-weight:bold;transition:.25s}
nav a:hover, nav a.active{color:var(--gold)}

.hero{
  position:relative;
  min-height:95vh;
  padding:90px 20px 60px;
  background:
    linear-gradient(rgba(0,0,0,.6), rgba(10,10,10,.85)),
    url('phil.jpg') center/cover no-repeat,
    radial-gradient(circle at 50% 30%, #2a2110 0%, #0a0a0a 70%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  overflow:hidden;
}
#notes{position:absolute;inset:0;pointer-events:none;}
.note{position:absolute;bottom:-40px;color:var(--gold);opacity:.35;font-size:22px;animation:floatUp linear infinite;}
@keyframes floatUp{
  0%{transform:translateY(0) rotate(0deg);opacity:0;}
  10%{opacity:.4;}
  90%{opacity:.3;}
  100%{transform:translateY(-110vh) rotate(360deg);opacity:0;}
}

.glow{font-size:clamp(34px,8vw,56px);letter-spacing:4px;color:var(--gold);text-shadow:0 0 25px rgba(255,215,0,.7);animation:glowPulse 2.5s infinite;position:relative;z-index:2}
@keyframes glowPulse{0%,100%{text-shadow:0 0 25px rgba(255,215,0,.7)}50%{text-shadow:0 0 45px rgba(255,215,0,1)}}
.sub{color:var(--sub);margin:12px 0 5px;font-size:16px;letter-spacing:2.5px;font-weight:bold;position:relative;z-index:2}
.tag{font-family:cursive;color:var(--gold);font-size:32px;margin:10px 0;min-height:40px;position:relative;z-index:2}
.tag::after{content:"|";animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0}}
.intro{max-width:520px;opacity:.9;margin:15px auto;font-size:15px;position:relative;z-index:2}

.buttons{margin-top:20px;position:relative;z-index:2}
.btn{display:inline-block;margin:8px;padding:14px 28px;border-radius:30px;text-decoration:none;font-weight:bold;transition:.3s;cursor:pointer;border:none;font-size:15px}
.gold-btn{background:var(--gold);color:#000}
.gold-btn:hover{background:var(--gold-hover);transform:scale(1.05)}
.outline{background:transparent;color:#fff;border:2px solid #fff}
.outline:hover{background:#fff;color:#000}

.wrap{max-width:850px;margin:auto;padding:30px 20px}
h2.section-title{color:var(--gold);font-size:22px;letter-spacing:2px;margin:50px 0 20px;text-align:center}

.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:24px;margin:18px 0;text-align:left;transition:.6s;opacity:0;transform:translateY(20px);}
.card.visible{opacity:1;transform:translateY(0);}
.card:hover{border-color:var(--gold);transform:translateY(-3px)}
.card h3{color:var(--gold);margin-bottom:10px}
.card a{color:var(--gold);text-decoration:none}

.kit-hint{font-size:13px;opacity:.6;margin-bottom:18px}
.pads{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:520px;margin:0 auto}
.pad, .wpad{
  aspect-ratio:1;
  background:#0d1420;border:1.5px solid #444;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;transition:.12s;
  font-weight:bold;color:#fff;font-size:19px;letter-spacing:.5px;
}
.pad:hover, .wpad:hover{border-color:#777}
.pad:active, .pad.hit{transform:scale(.94);border-color:var(--gold);box-shadow:0 0 22px rgba(255,215,0,.45);background:#1f1a05;color:var(--gold);}
.wpad:active{transform:scale(.96)}
.wpad.playing{border-color:var(--gold);box-shadow:0 0 22px rgba(255,215,0,.5);background:#1f1a05;color:var(--gold);}

.mode-toggle{
  display:flex;max-width:340px;margin:0 auto 16px;border:1.5px solid #444;border-radius:30px;overflow:hidden;
}
.mode-btn{flex:1;padding:12px 10px;text-align:center;font-weight:bold;font-size:14px;color:#aaa;background:transparent;border:none;cursor:pointer;transition:.2s;}
.mode-btn.active{background:#2a2a2a;color:var(--gold)}

.tone-toggle{
  display:flex;max-width:420px;margin:0 auto 20px;border:1.5px solid #444;border-radius:30px;overflow:hidden;flex-wrap:wrap;
}
.tone-btn{flex:1;min-width:100px;padding:10px 8px;text-align:center;font-weight:bold;font-size:13px;color:#aaa;background:transparent;border:none;cursor:pointer;transition:.2s;}
.tone-btn.active{background:#2a2a2a;color:var(--gold)}

#toTop{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:44px;height:44px;border-radius:50%;background:var(--gold);color:#000;
  border:none;font-size:18px;font-weight:bold;cursor:pointer;opacity:0;pointer-events:none;
  transition:.3s;z-index:800;
}
#toTop.show{opacity:1;pointer-events:auto;}

footer{padding:35px;opacity:.6;font-size:13px;border-top:1px solid #222;margin-top:20px;padding-bottom:calc(35px + env(safe-area-inset-bottom,0px));}