:root{
  --cream:#fff8ed;
  --cream-2:#fff2df;
  --ink:#0e2a47;
  --ink-soft:#234766;
  --orange:#ff8a3d;
  --orange-soft:#ffd1a6;
  --purple:#9d7cf6;
  --purple-soft:#ece4ff;
  --blue-soft:#dcecff;
  --card:#ffffff;
  --line:rgba(14,42,71,.12);
  --shadow:0 20px 50px rgba(14,42,71,.12);
  --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255,138,61,.18), transparent 28rem),
    radial-gradient(circle at 85% 10%, rgba(157,124,246,.20), transparent 22rem),
    var(--cream);
  line-height:1.7;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,textarea,select{font:inherit}
.top-strip{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem clamp(1rem,4vw,3.5rem);
  background:var(--ink);
  color:#fff8ed;
  font-size:.92rem;
}
.main-nav{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  padding:1rem clamp(1rem,4vw,3.5rem);
  background:rgba(255,248,237,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);
}
.brand-link{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-weight:900;
  font-size:1.45rem;
  letter-spacing:.03em;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:.3rem;
  flex-wrap:wrap;
}
.nav-links a{
  padding:.68rem .9rem;
  border-radius:999px;
  font-weight:700;
  color:var(--ink-soft);
}
.nav-links a:hover,.nav-links a.active{
  background:var(--ink);
  color:white;
}
.nav-toggle{display:none}
.hero,.sub-hero,.section-block,.join-band,.contact-strip,.notice-card{
  width:min(1180px,calc(100% - 2rem));
  margin-inline:auto;
}
.hero{
  display:grid;
  grid-template-columns:1fr minmax(340px,.9fr);
  gap:3rem;
  align-items:center;
  padding:4.8rem 0 2.5rem;
}
.hero-copy h1,.sub-hero h1{
  margin:.4rem 0 1rem;
  font-size:clamp(2.3rem,5vw,4.9rem);
  line-height:1.08;
  letter-spacing:-.05em;
}
.hero-lead,.sub-hero p{
  font-size:1.12rem;
  color:var(--ink-soft);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin:0;
  color:var(--orange);
  font-weight:900;
  letter-spacing:.06em;
}
.eyebrow::before{
  content:"";
  width:.75rem;
  height:.75rem;
  border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--purple));
}
.hero-actions,.contact-strip,.join-band{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:3rem;
  padding:.8rem 1.2rem;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:900;
  cursor:pointer;
  transition:.2s ease;
}
.btn.primary{background:var(--ink);color:white;box-shadow:0 10px 24px rgba(14,42,71,.2)}
.btn.secondary{background:white;color:var(--ink)}
.btn:hover{transform:translateY(-2px)}
.hero-note{
  margin-top:1.2rem;
  padding:.85rem 1rem;
  background:rgba(255,255,255,.68);
  border:1px solid var(--line);
  border-radius:18px;
  color:var(--ink-soft);
}
.hero-visual,.sub-hero img,.section-block > img,.split > img{
  filter:drop-shadow(0 24px 36px rgba(14,42,71,.12));
}
.notice-card{
  margin-top:1.5rem;
  padding:1.4rem;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.76);
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  align-items:center;
  box-shadow:var(--shadow);
}
.notice-card h2{margin:.1rem 0 .35rem}
.notice-card p{margin:0;color:var(--ink-soft)}
.pill,.tag{
  display:inline-flex;
  align-items:center;
  width:max-content;
  border-radius:999px;
  padding:.35rem .72rem;
  background:var(--purple-soft);
  color:var(--ink);
  font-weight:800;
  white-space:nowrap;
}
.section-block{
  padding:4.2rem 0;
}
.section-heading{
  max-width:760px;
  margin-bottom:1.6rem;
}
.section-heading h2,.join-band h2,.contact-strip h2,.split h2{
  margin:.35rem 0 .65rem;
  font-size:clamp(1.75rem,3vw,3rem);
  line-height:1.18;
  letter-spacing:-.03em;
}
.section-heading p,.split p,.join-band p,.contact-strip p{color:var(--ink-soft)}
.card-grid,.rating-grid,.feature-grid,.circle-grid,.comment-grid,.rule-list{
  display:grid;
  gap:1.15rem;
}
.card-grid.three,.rating-grid,.feature-grid,.comment-grid{grid-template-columns:repeat(3,1fr)}
.circle-grid,.rule-list{grid-template-columns:repeat(4,1fr)}
.playlist-card,.video-card,.comment-card,.rating-grid article,.feature-grid article,.circle-grid article,.rule-list article,.topic-list article,.table-card,.feedback-form,.contact-panels article{
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(14,42,71,.08);
}
.playlist-card,.video-card{overflow:hidden}
.card-body,.video-card{padding:1.2rem}
.playlist-card h3,.video-card h3,.topic-list h3,.circle-grid h3,.feature-grid h3,.rule-list h3{
  margin:.6rem 0 .4rem;
  line-height:1.25;
}
.playlist-card p,.video-card p,.feature-grid p,.circle-grid p,.rule-list p,.comment-card p,.topic-list p{color:var(--ink-soft);margin:.4rem 0}
.mini-action{
  border:0;
  border-radius:999px;
  background:var(--cream-2);
  color:var(--ink);
  font-weight:900;
  padding:.65rem .9rem;
  margin-top:.8rem;
  cursor:pointer;
}
.split,.sub-hero{
  display:grid;
  grid-template-columns:1fr .85fr;
  align-items:center;
  gap:3rem;
}
.sub-hero{
  padding:4.4rem 0 2rem;
}
.split.reverse{grid-template-columns:.85fr 1fr}
.topic-list{
  display:grid;
  gap:.9rem;
  margin-top:1.2rem;
}
.topic-list article{padding:1rem}
.topic-list span{
  color:var(--orange);
  font-weight:900;
}
.topic-list.compact{max-width:760px}
.accent{
  padding:2.2rem;
  background:linear-gradient(135deg,rgba(255,209,166,.8),rgba(236,228,255,.85));
  border-radius:calc(var(--radius) + 8px);
  border:1px solid var(--line);
}
.rating-grid article,.feature-grid article,.circle-grid article,.rule-list article{
  padding:1.15rem;
}
.score{
  color:var(--orange);
  font-size:2rem;
  font-weight:900;
  margin:.2rem 0;
}
.circle-grid span{
  display:inline-grid;
  place-items:center;
  width:3rem;
  height:3rem;
  border-radius:20px;
  background:var(--blue-soft);
  font-size:1.4rem;
}
.check-list,.step-list{
  padding-left:1.2rem;
  color:var(--ink-soft);
}
.check-list li,.step-list li{margin:.45rem 0}
.comment-card{padding:1.15rem}
.comment-head{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin-bottom:.7rem;
}
.comment-head span{
  margin-left:auto;
  color:var(--orange);
  font-weight:900;
}
.reaction-row{
  margin-top:.8rem;
  color:var(--ink-soft);
  font-weight:800;
}
.activity-feed{
  display:grid;
  gap:.75rem;
}
.activity-feed p{
  margin:0;
  padding:.9rem 1rem;
  border-radius:18px;
  background:white;
  border:1px solid var(--line);
}
.join-band,.contact-strip{
  margin-top:2rem;
  margin-bottom:3.5rem;
  justify-content:space-between;
  background:var(--ink);
  color:white;
  padding:2rem;
  border-radius:calc(var(--radius) + 8px);
  box-shadow:var(--shadow);
}
.join-band p,.contact-strip p{color:#dbe8f5}
.contact-strip .btn.secondary,.join-band .btn.primary{background:white;color:var(--ink)}
.faq-block details{
  background:white;
  border:1px solid var(--line);
  border-radius:20px;
  padding:1rem 1.15rem;
  margin:.8rem 0;
}
.faq-block summary{
  cursor:pointer;
  font-weight:900;
}
.faq-block p{color:var(--ink-soft)}
.narrow{max-width:900px}
.rating-scale{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
.rating-scale article{
  padding:1.15rem;
  border-radius:var(--radius);
  background:white;
  border:1px solid var(--line);
}
.rating-scale span{
  display:inline-grid;
  place-items:center;
  width:2.8rem;
  height:2.8rem;
  border-radius:16px;
  background:var(--orange);
  color:white;
  font-weight:900;
  font-size:1.25rem;
}
.table-card{overflow:hidden}
.list-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid var(--line);
}
.list-row:last-child{border-bottom:0}
.list-row.head{
  background:var(--ink);
  color:white;
  font-weight:900;
}
.contact-panels{
  display:grid;
  gap:.75rem;
  margin-top:1rem;
}
.contact-panels article{padding:1rem}
.feedback-form{
  padding:1.4rem;
  display:grid;
  gap:1rem;
}
.feedback-form label{
  display:grid;
  gap:.35rem;
  font-weight:900;
}
.feedback-form input,.feedback-form textarea,.feedback-form select{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:.85rem 1rem;
  background:#fffdfa;
  color:var(--ink);
}
.form-note{
  margin:0;
  color:var(--ink-soft);
  font-size:.92rem;
}
.site-footer{
  margin-top:3rem;
  padding:2.2rem clamp(1rem,4vw,3.5rem);
  background:#081d33;
  color:#f7efe4;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  width:min(1180px,100%);
  margin-inline:auto;
}
.site-footer h2{
  font-size:1.05rem;
  margin:0 0 .45rem;
}
.site-footer p{
  margin:0;
  color:#d5e4f4;
}
@media (max-width:980px){
  .hero,.sub-hero,.split,.split.reverse{grid-template-columns:1fr}
  .card-grid.three,.rating-grid,.feature-grid,.comment-grid,.rating-scale{grid-template-columns:1fr 1fr}
  .circle-grid,.rule-list{grid-template-columns:1fr 1fr}
  .desktop-only{display:none}
}
@media (max-width:760px){
  .top-strip{display:none}
  .main-nav{align-items:flex-start}
  .nav-toggle{
    display:inline-flex;
    border:1px solid var(--line);
    background:white;
    border-radius:999px;
    padding:.6rem .8rem;
    font-weight:900;
  }
  .nav-links{
    display:none;
    position:absolute;
    left:1rem;
    right:1rem;
    top:4.8rem;
    padding:1rem;
    background:white;
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:var(--shadow);
  }
  .nav-links.open{display:grid}
  .nav-links a{width:100%}
  .hero{padding-top:2.8rem}
  .notice-card,.join-band,.contact-strip{align-items:flex-start;flex-direction:column}
  .card-grid.three,.rating-grid,.feature-grid,.comment-grid,.rating-scale,.circle-grid,.rule-list,.footer-grid{grid-template-columns:1fr}
  .accent{padding:1.2rem}
  .list-row{grid-template-columns:1fr}
}