.ex-page { padding-block:clamp(2rem,4.8vw,5rem) clamp(3rem,7vw,7rem); max-width:1450px; }
.ex-intro { margin-bottom:clamp(1.45rem,3vw,2.8rem); }
.ex-intro h1 { max-width:22ch; font-size:clamp(2.25rem,4.6vw,5rem); line-height:1.04; letter-spacing:-.055em; overflow-wrap:anywhere; }
:lang(ka) .ex-intro h1 { line-height:1.16; }
.ex-intro p,.ex-adjust p,.ex-scale-note { color:#50534e; line-height:1.55; }
.ex-intro p { margin-top:.8rem; max-width:76ch; }
.ex-tabs { display:flex; align-items:stretch; flex-wrap:wrap; gap:.35rem; }
.ex-tabs button { border:1px solid #bcbcb3; background:transparent; color:#292c2a; padding:.55rem .85rem; min-height:40px; font:inherit; font-size:.88rem; }
.ex-tabs button[aria-pressed=true] { background:#292d2c; color:white; border-color:#292d2c; }
.ex-tabs button:hover:not([aria-pressed=true]) { background:#e8e6db; }
.ex-filters { margin-bottom:1.5rem; }
.ex-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.2vw,2.3rem); list-style:none; padding:0; margin:0; }
.ex-cards li { min-width:0; }
.ex-card { display:flex; flex-direction:column; height:100%; border:1px solid #bdbdb3; background:#fbfaf4; }
.ex-card:hover,.ex-card:focus-visible { border-color:#696c63; }
.ex-card-art,.ex-stage { background-color:#252a2b; background-image:linear-gradient(#8e939713 1px,transparent 1px),linear-gradient(90deg,#8e939713 1px,transparent 1px); background-size:28px 28px; }
.ex-card-art { aspect-ratio:16/9; overflow:hidden; }
.ex-card-art svg,.ex-stage>svg { display:block; width:100%; height:100%; }
.ex-card-info { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; column-gap:.75rem; padding:1.05rem 1.1rem 1.2rem; }
.ex-card h2 { font-size:clamp(1.15rem,1.55vw,1.65rem); line-height:1.22; letter-spacing:-.03em; overflow-wrap:anywhere; }
.ex-card-info p { grid-row:2; font-size:.84rem; color:#565950; line-height:1.45; margin-top:.45rem; }
.ex-card-info>span { grid-column:2; grid-row:1; color:#ad2722; }
.ex-back { display:inline-flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:650; margin-bottom:1.15rem; color:#574a44; }
.ex-back .ui-icon { width:15px;height:15px; }
.ex-layout { display:grid; grid-template-columns:minmax(0,1.85fr) minmax(260px,.85fr); gap:clamp(1rem,2vw,2rem); align-items:start; }
.ex-main-column { min-width:0; }
.ex-machine { background:#202425; color:#fff; }
.ex-machine-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:.6rem 1rem; gap:.35rem .8rem; border-bottom:1px solid #424848; }
.ex-machine-head strong,.ex-machine-head label { font-size:.84rem; }
.ex-machine-head label { display:flex; gap:.5rem; align-items:center; color:#d7d9d5; }
.ex-machine-head select { min-height:36px; color-scheme:dark; background:#353a3a; border:1px solid #646a69; color:#fff; font:inherit; padding:.25rem; }
.ex-stage { position:relative; width:100%; max-width:calc(540px * var(--frame-width) / var(--frame-height)); margin-inline:auto; aspect-ratio:var(--frame-width) / var(--frame-height); user-select:none; -webkit-user-select:none; }
.ex-stage>svg { position:absolute; inset:0; }
.ex-stage [data-ex-muscle="delts"] { opacity:var(--show-delts,1); }
.ex-stage [data-ex-muscle="triceps"] { opacity:var(--show-triceps,1); }
.ex-stage [data-ex-muscle="chest"] { opacity:var(--show-chest,1); }
.ex-stage [data-ex-muscle="traps"] { opacity:var(--show-traps,1); }
.ex-stage [data-ex-muscle="core"] { opacity:var(--show-core,1); }
.ex-stage [data-ex-muscle="lats"] { opacity:var(--show-lats,1); }
.ex-stage [data-ex-muscle="biceps"] { opacity:var(--show-biceps,1); }
.ex-stage [data-ex-muscle="midback"] { opacity:var(--show-midback,1); }
.ex-stage [data-ex-muscle="glutes"] { opacity:var(--show-glutes,1); }
.ex-stage [data-ex-muscle="quads"] { opacity:var(--show-quads,1); }
.ex-stage [data-ex-muscle="hamstrings"] { opacity:var(--show-hamstrings,1); }
.ex-stage [data-ex-muscle="calves"] { opacity:var(--show-calves,1); }
.ex-handle { position:absolute; z-index:1; display:grid; place-items:center; transform:translate(-50%,-50%); width:48px; height:48px; border:0; padding:0; border-radius:50%; background:transparent; touch-action:none; cursor:grab; -webkit-tap-highlight-color:transparent; }
.ex-handle:focus-visible { outline:2px solid white; outline-offset:-3px; }
.ex-handle span { display:grid; place-items:center; width:clamp(23px,2.5vw,33px); height:clamp(23px,2.5vw,33px); border-radius:50%; background:#ff925a; color:#1c2422; border:2px solid #1b2021; box-shadow:0 0 0 1px #edd0ae; }
.ex-handle[data-knob=setting] span { background:#55d8c9; box-shadow:0 0 0 1px #a8ebdf; }
.ex-handle svg { width:72%; height:72%; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.ex-handle.ex-dragging { cursor:grabbing; }
.ex-handle.ex-dragging span { outline:2px solid white; }
.ex-transport { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.25rem .9rem; padding:.65rem 1rem .8rem; border-top:1px solid #434848; }
#ex-play { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; font-weight:700; min-height:40px; padding:.45rem .75rem; background:#f2efe5; color:#212625; }
#ex-play svg { width:15px; height:15px; }
.ex-transport label { font-size:.85rem; color:#dddfda; }
.ex-transport output,.ex-adjust output { font-variant-numeric:tabular-nums; font-size:.94rem; font-weight:700; }
.ex-page input[type=range] { width:100%; min-width:0; margin:0; height:35px; cursor:pointer; accent-color:#e56c43; touch-action:none; }
.ex-machine,.ex-anatomy { contain:paint; }
#ex-motion { grid-column:1/-1; }
.ex-adjust,.ex-muscles { border:1px solid #cfcfc4; background:#fbfaf4; padding:clamp(1rem,1.8vw,1.7rem); }
.ex-adjust { margin-top:1rem; }
.ex-adjust>div { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.ex-adjust label { font-size:1.08rem; font-weight:700; }
.ex-adjust output { color:#17625b; white-space:nowrap; }
.ex-page #ex-setting { accent-color:#237e73; }
.ex-endpoints,.ex-adjust p,.ex-scale-note { font-size:.82rem; }
.ex-endpoints { color:#545750; }
.ex-adjust p { margin-top:.85rem; }
.ex-muscles h2 { font-size:clamp(1.4rem,2vw,2.1rem); line-height:1.2; margin-bottom:.8rem; letter-spacing:-.035em; }
.ex-muscles .ex-tabs button { padding:.5rem .62rem; font-size:.8rem; }
.ex-anatomy { margin:.9rem 0 0; background:#efede4; text-align:center; padding:.6rem; border:1px solid #dbd9ce; }
.ex-anatomy svg { height:clamp(160px,15vw,224px); max-width:100%; display:block; margin:auto; }
.ex-anatomy figcaption { display:grid; grid-template-columns:1fr 1fr; max-width:206px; margin:auto; font-size:.77rem; color:#51564e; }
.ex-legend { list-style:none; margin:.5rem 0; padding:0; }
.ex-legend li { display:grid; grid-template-columns:10px minmax(0,1fr); gap:.55rem; align-items:center; padding:.65rem 0; border-bottom:1px solid #d5d5c9; font-size:.91rem; font-weight:650; }
.ex-dot { height:10px; width:10px; border-radius:3px; border:1px solid #0002; }
.ex-live-load { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(118px,100%),1fr)); gap:.7rem 1.15rem; list-style:none; margin:0; padding:.7rem 1rem .8rem; background:#1b1f20; border-top:1px solid #434848; }
.ex-live-load li { display:grid; grid-template-rows:1fr auto; gap:.34rem; min-width:0; color:#e2e2da; font-size:.8rem; line-height:1.28; }
.ex-meter { display:block; height:6px; background:#464c4d; border-radius:4px; overflow:hidden; }
.ex-meter i { display:block; width:100%; height:100%; transform-origin:left; }
.ex-scale-note { margin-top:.7rem; }
.ex-source { display:inline-block; margin-top:.8rem; font-size:.8rem; text-decoration:underline; text-underline-offset:3px; }
html:not(.ex-ready) :is(.ex-handle,.ex-transport,.ex-filters,.ex-machine-head label,.ex-adjust,.ex-muscles .ex-tabs) { display:none; }
@media(max-width:930px){.ex-cards{grid-template-columns:repeat(2,minmax(0,1fr));}.ex-layout{grid-template-columns:minmax(0,1fr) minmax(225px,.63fr);}}
@media(max-width:740px){.ex-layout{grid-template-columns:minmax(0,1fr)}.ex-catalogue .ex-intro{margin-bottom:1.15rem}}
@media(max-width:540px){.ex-cards{grid-template-columns:minmax(0,1fr)}.ex-page{padding-top:1.6rem}.ex-card-info{padding:.8rem 1rem 1rem}.ex-back{margin-bottom:.85rem}.ex-machine-head,.ex-transport{padding-inline:.75rem}.ex-filters{gap:.3rem}.ex-filters button{padding:.45rem .65rem}}