:root { --text:#243238; --muted:#66757c; --border:#d8e0e3; --primary:#3f7f82; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:#fff; }
.gallery { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:42px 0 64px; }
h1 { margin:0 0 42px; text-align:center; font-size:30px; font-weight:700; }
.exercise-section { margin-top:34px; }
.exercise-section h2 { margin:0 0 16px; font-size:19px; font-weight:650; }
.exercise-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:16px; }
.exercise { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px 14px; color:var(--text); background:#fff; border:1px solid var(--border); border-radius:8px; box-shadow:0 3px 12px rgba(31,63,65,.07); cursor:pointer; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.exercise:hover, .exercise:focus-visible { transform:translateY(-2px); border-color:var(--primary); box-shadow:0 7px 18px rgba(31,63,65,.12); outline:none; }
.exercise-icon { width:42px; height:42px; display:grid; place-items:center; color:var(--primary); background:#edf5f5; border-radius:50%; font-size:25px; }
.exercise_name { max-width:100%; overflow-wrap:anywhere; text-align:center; font-size:14px; font-weight:650; }
.gallery-error { margin:36px 0; color:#a83b31; text-align:center; }
@media (max-width:600px) { .gallery { width:min(calc(100% - 28px),420px); padding-top:30px; } h1 { margin-bottom:32px; font-size:25px; } .exercise-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .exercise { min-height:132px; padding:14px 8px; } }