:root{font-family:Arial,Helvetica,sans-serif;color:#20242a;background:#eee}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;justify-content:center;background:#e8e8e8}
#app{width:100%;max-width:430px;min-height:100vh;background:#f8f5ee;padding:24px;box-shadow:0 0 24px #bbb}
.screen{min-height:calc(100vh - 48px);display:flex;flex-direction:column}
.center{text-align:center}
.spacer{flex:1}
h1{font-size:30px;margin:50px 0 8px;letter-spacing:.5px}
h2{font-size:24px;margin:18px 0}
.subtitle{font-size:17px;line-height:1.4;margin:0 auto 26px;max-width:300px}
.headphones{font-size:48px;margin:18px 0}
button{border:0;border-radius:14px;padding:15px 18px;font-size:16px;font-weight:700;cursor:pointer}
.primary{background:#222;color:white;width:220px;margin:14px auto}
.secondary{background:#e6e0d5;color:#222}
.footer{text-align:center;font-weight:700;letter-spacing:1px;margin-top:28px}
.copy{text-align:center;font-size:12px;margin-top:4px}
.tagline{text-align:center;margin:26px 0 4px}
.topbar{display:flex;justify-content:space-between;align-items:center;min-height:44px}
.linkbtn{background:transparent;padding:8px 0;font-weight:600}
.steps{display:grid;gap:12px;margin-top:22px}
.step{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:white;border:1px solid #ddd}
.step.locked{opacity:.48;cursor:not-allowed}
.step.current{border:2px solid #555}
.audio-card{background:white;border:1px solid #ddd;border-radius:18px;padding:18px;margin:10px 0}
.audio-title{text-align:center;font-weight:800;margin-bottom:14px}
.audio-actions{display:flex;gap:10px}
.audio-actions button{flex:1}
.slow{background:#dcecff}
.normal{background:#dff4df}
.divider{height:1px;background:#ccc;margin:14px 0}
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;padding:24px}
.modalbox{width:min(360px,100%);background:#fff;border-radius:20px;padding:28px;text-align:center}
.note{font-size:13px;line-height:1.4;color:#666;text-align:center;margin-top:10px}

.install-box{
  margin:22px auto 6px;
  max-width:430px;
  padding:16px;
  border:1px solid #ddd5c8;
  border-radius:14px;
  background:#fffdf8;
}
.install-note{
  margin-bottom:10px;
  font-size:0.96rem;
}
.install-button{
  width:100%;
  padding:13px 16px;
  border:0;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
}
.install-small{
  margin-top:9px;
  font-size:0.86rem;
  line-height:1.35;
  opacity:.78;
}