.croom-bar span{display:block;height:100%;border-radius:99px;transition:width .4s ease}

@media(max-width:1080px){ .classrooms{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:680px){ .classrooms{grid-template-columns:1fr} }

/* ---------- inside one classroom ---------- */
.backlink{display:inline-block;margin:0 0 14px}
.beltpage{display:flex;gap:24px;align-items:stretch;padding:0;overflow:hidden}
.beltpage .croom-art{flex:0 0 260px;width:260px;aspect-ratio:auto}
.bpbody{flex:1;min-width:0;padding:22px 24px 24px}
.beltline{font-size:14px;color:var(--ink-2);line-height:1.55;margin:9px 0 18px;max-width:62ch}
@media(max-width:760px){
  .beltpage{flex-direction:column}
  .beltpage .croom-art{flex:none;width:100%;aspect-ratio:16/7}
  .bpbody{padding:18px 20px 20px}
}

/* ---------- roadmap header ---------- */
.rmhead{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;flex-wrap:wrap}
.rmcopy{flex:1;min-width:240px}

/* belt chip on a step header */
.beltchip{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.bcdot{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(17,27,22,.35)}
@media(max-width:700px){ .beltchip{display:none} }

/* finished tasks read as finished */
.task.done .tasktitle{text-decoration:line-through;text-decoration-thickness:1px;color:var(--ink-3)}

/* ---------- the Submit button in the topbar ---------- */
.submitwrap{position:relative}
.btn.sm{padding:8px 14px;font-size:13.5px}
.submitmenu{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow);
  padding:6px;min-width:208px;z-index:40}
.submitmenu button{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;
  font-size:14px;color:var(--ink);padding:9px 12px;border-radius:7px;cursor:pointer}
.submitmenu button:hover{background:var(--green-50);color:var(--green-700)}

/* ---------- the Arsenal ---------- */
.grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:760px){ .grid.two{grid-template-columns:1fr} }
.card.arsenal.soon{background:transparent;box-shadow:none;border-style:dashed}
.card.arsenal.soon h2{color:var(--ink-3)}


/* the tied belt (3 Nov 2026) */
.croom-art.knot-art{background:radial-gradient(closest-side at 50% 46%,rgba(212,168,90,.20),rgba(212,168,90,.05) 62%,transparent 100%),
  radial-gradient(115% 95% at 28% 8%,var(--g) 0%,rgba(0,0,0,0) 62%),linear-gradient(165deg,#13241C 0%,#0A140F 100%)}
.croom-art.knot-art svg.bk{inset:9% 0;height:82%}
.classroom:hover .knot-art svg.bk{transform:translateY(-2px);transition:transform .25s ease}
@media (prefers-reduced-motion:reduce){.classroom:hover .knot-art svg.bk{transform:none}}
.croom-art.start-art{--g:rgba(212,168,90,.16)}
.croom-art.knot-art svg.bk.full{inset:0;height:100%}