:root{--ink:#102537;--accent:#b95a20}*{box-sizing:border-box}body{margin:0;background:#f8fafb;color:var(--ink);font:16px/1.6 system-ui}header,main{max-width:1100px;margin:auto;padding:2rem 1.2rem}header{max-width:none;background:linear-gradient(120deg,#e8f0eb,#fff)}.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-weight:600}.brand img,footer img{width:42px;height:42px;object-fit:contain}h1{font-size:clamp(2rem,5vw,4rem);line-height:1.05;margin:2rem 0 .5rem}a{color:var(--accent)}button{border:1px solid #cad6d7;background:white;padding:.55rem 1rem;border-radius:999px;margin:.25rem;cursor:pointer;color:var(--ink)}button.active{background:var(--ink);color:#fff}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:1.5rem 0}.card{background:#fff;border:1px solid #dae3e3;border-radius:16px;padding:1rem}.card button{border:0;text-align:left;width:100%;border-radius:0}.badge{color:var(--accent);font-size:.75rem;font-weight:800;text-transform:uppercase}.card h3{margin:.3rem 0}.workspace{background:#fff;border:1px solid #d5dfdf;border-radius:18px;padding:1.5rem;scroll-margin-top:1rem}#workspace{padding-bottom:3rem}article{max-width:850px;padding:1rem 0}pre{background:#102537;color:#fff;padding:1rem;border-radius:8px;overflow:auto}.question{border-top:1px solid #ddd;padding:1rem 0}.question label{display:block;border:1px solid #ddd;padding:.4rem;margin:.3rem 0;border-radius:8px}.result{color:var(--accent);font-weight:700}footer{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:2rem;background:#102537;color:#fff}footer a{color:#fff}