@font-face { font-family:'Poppins'; src:url('/fonts/Poppins-Bold.ttf'); font-weight:700; }
@font-face { font-family:'Poppins'; src:url('/fonts/Poppins-SemiBold.ttf'); font-weight:600; }
@font-face { font-family:'Poppins'; src:url('/fonts/Poppins-Medium.ttf'); font-weight:500; }
@font-face { font-family:'Poppins'; src:url('/fonts/Poppins-Regular.ttf'); font-weight:400; }
:root { --ink:#33291F; --brand:#C05B2E; --brand-b:#E07A3F; --green:#4E7C3F;
  --green-d:#3F6234; --cream:#FBF4E7; --soft:#F6EDDC; --line:#E4D5BC; --mut:#82705C; }
* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
body { font-family:'Poppins',sans-serif; background:var(--cream); color:var(--ink); }
.wrap { max-width:680px; margin:0 auto; padding:24px 20px 48px; }
header.brand { display:flex; align-items:center; gap:10px; padding:20px 0 6px; }
header.brand .dot { width:34px; height:34px; border-radius:50%; background:var(--brand-b);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:17px; }
header.brand b { font-size:15px; letter-spacing:2.5px; text-transform:uppercase; }
header.brand span { font-size:11px; color:var(--mut); display:block; letter-spacing:1px; }
.hero { padding:26px 0 6px; }
.hero h1 { font-size:30px; line-height:1.15; font-weight:700; }
.hero h1 em { font-style:normal; color:var(--brand-b); }
.hero p { color:var(--mut); font-size:14.5px; margin-top:10px; line-height:1.6; font-weight:500; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
a.tcard { background:#fff; border:1.5px solid var(--line); border-radius:16px;
  padding:16px 14px; display:flex; flex-direction:column; gap:8px; text-decoration:none;
  color:var(--ink); }
a.tcard:hover { border-color:var(--brand-b); }
a.tcard .n { font-size:11px; font-weight:700; color:var(--brand); letter-spacing:1.5px; }
a.tcard b { font-size:15.5px; font-weight:600; line-height:1.25; }
a.tcard span.play { font-size:11.5px; color:var(--green-d); font-weight:600; }
footer { margin-top:40px; padding-top:20px; border-top:1.5px solid var(--line);
  font-size:12.5px; color:var(--mut); line-height:1.8; }
footer a { color:var(--green-d); font-weight:600; text-decoration:none; }
/* player page */
.p-hero { background:#fff; border:1.5px solid var(--line); border-radius:20px;
  padding:26px 22px; margin-top:18px; text-align:center; }
.p-hero .n { font-size:11px; font-weight:700; color:var(--brand); letter-spacing:2px;
  text-transform:uppercase; }
.p-hero h1 { font-size:26px; font-weight:700; margin-top:6px; }
.p-hero p.tip { font-size:13px; color:var(--mut); margin-top:8px; font-weight:500; line-height:1.55; }
.bigplay { width:104px; height:104px; border-radius:50%; border:none; background:var(--green);
  color:#fff; font-size:38px; cursor:pointer; margin:22px auto 14px; display:block;
  box-shadow:0 6px 0 var(--green-d); transition:transform .06s; }
.bigplay:active { transform:translateY(4px); box-shadow:0 2px 0 var(--green-d); }
.bigplay.playing { background:var(--brand-b); box-shadow:0 6px 0 var(--brand); }
audio.native { width:100%; margin-top:6px; }
.missing { font-size:13px; color:var(--brand); background:var(--soft); border-radius:12px;
  padding:10px 14px; margin-top:12px; display:none; }
.words { margin-top:20px; }
.words h2 { font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--mut); }
.words h2 .hint { float:right; text-transform:none; letter-spacing:0; font-size:11.5px;
  font-weight:500; color:var(--green-d); }
.chips { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.chips .w { background:#fff; border:1.5px solid var(--line); border-radius:12px;
  padding:9px 6px; font-size:12.5px; font-weight:600; text-align:center; line-height:1.3;
  min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; font-family:inherit; color:var(--ink); transition:border-color .12s, background .12s; }
.chips .w .e { font-size:24px; line-height:1; }
.chips.ready .w { cursor:pointer; }
.chips.ready .w:hover { border-color:var(--brand-b); }
.chips .w.on { background:var(--brand-b); border-color:var(--brand-b); color:#fff; }
@media (max-width:480px){ .chips { grid-template-columns:repeat(3,1fr); } }
.cta { display:flex; gap:10px; margin-top:24px; }
.cta a { flex:1; text-align:center; padding:13px 10px; border-radius:14px; font-size:13.5px;
  font-weight:600; text-decoration:none; }
.cta a.ghost { border:1.5px solid var(--green); color:var(--green-d); }
.cta a.solid { background:var(--brand-b); color:#fff; }
.back { display:inline-block; margin-top:26px; font-size:13px; color:var(--green-d);
  font-weight:600; text-decoration:none; }