studwright/studwright.css

.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.play{background:var(--ink);color:#fff;border-color:var(--ink)}
.play .hint{color:#aeb3c2}
.play .chip{background:#1d2130;color:#dfe2ea;border-color:#333a4f}
.play .chip.on{background:var(--acc);color:var(--ink);border-color:var(--acc);font-weight:700}
#code{display:block;width:100%;margin:12px 0 10px;background:#0b0e15;color:#e9ecf3;border:1px solid #333a4f;border-radius:12px;padding:12px;font:13.5px/1.5 ui-monospace,Menlo,Consolas,monospace;resize:vertical;min-height:220px;tab-size:4}
.run-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.out{background:#0b0e15;color:#9ef0b8;border-radius:12px;padding:12px;min-height:84px;margin:12px 0 0;white-space:pre-wrap;word-break:break-word;font:13.5px/1.5 ui-monospace,Menlo,Consolas,monospace;overflow:auto}
.mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;align-items:start}
.mod{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff}
.mod.free{border-color:#bfe5d4}
.mod summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.mod summary::-webkit-details-marker{display:none}
.mod .nm{font-weight:800;font-size:16px}
.mod .sm{flex-basis:100%;font-size:14px;color:var(--muted)}
.side{font-size:11px;font-weight:800;letter-spacing:.04em;border-radius:6px;padding:2px 6px;text-transform:uppercase}
.side.server{background:#e8eefe;color:#1F4FCC}
.side.shared{background:#fdeee6;color:#a5431a}
.mod pre{background:var(--ink);color:#e9ecf3;border-radius:10px;padding:10px;overflow:auto;font:12.5px/1.45 ui-monospace,Menlo,Consolas,monospace;margin:10px 0 4px}
.tests{list-style:none;padding:0;margin:10px 0;columns:2;column-gap:24px;font-size:14px}
.tests li{break-inside:avoid;margin:3px 0}
.tests li.ok{color:#0f6b49}
.tests li.bad{color:#b42318}
.linkish{background:none;border:0;padding:0;color:var(--acc2d);text-decoration:underline;font:inherit;cursor:pointer}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em}
@media (max-width:760px){
  .tests{columns:1}
  .mods{grid-template-columns:1fr}
}
@media (max-width:760px){
  .lede{font-size:16px}
  .facts{gap:6px}
  .facts li{font-size:13px;padding:4px 10px}
}