/* Animated grammar infographics: arrows, timelines, practice, topic list. Shared band/panel/pill/button/colour rules live in theme.css. */
.g-tools{display:flex;flex-wrap:wrap;gap:10px;padding:16px clamp(14px,3vw,28px) 4px}


.g-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gart{width:84px;height:84px;flex:none}
.g-formula{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1;min-width:150px}
.g-key{margin-top:12px;text-align:center}
.g-key .g-pill{font-size:clamp(1.5rem,3.4vw,2.1rem);padding:4px 26px}
.g-small{display:block;font-size:.98rem;font-weight:600;margin-top:4px}
.g-small b{font-weight:800}
.g-es{margin:10px 0 0;padding:8px 12px;border-radius:14px;background:rgba(255,255,255,.75);font-weight:600;font-size:.98rem;color:#3a4670;border-left:5px solid var(--badge)}

.g-play{font:inherit;flex:none;width:44px;height:44px;border-radius:50%;border:3px solid var(--badge);background:var(--surface);color:var(--badge);font-size:1rem;cursor:pointer;display:grid;place-items:center;padding:0}
.g-play:hover{background:var(--pill)}
.g-play.on{background:var(--badge);color:#fff}
.g-group{padding:8px 0;border-bottom:3px dashed rgba(0,0,0,.14)}
.g-group:last-child{border-bottom:0}
.g-label{display:inline-block;font-weight:800;font-size:.9rem;padding:1px 12px;border-radius:999px;background:var(--pill);color:var(--badge);margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
.g-ex{display:flex;align-items:center;gap:10px;margin-top:4px}
.g-ex .t{flex:1;min-width:0}
.g-en{font-weight:800;font-size:1.12rem;line-height:1.25}
.g-en mark{background:var(--pill);border-radius:8px;padding:0 5px;color:inherit}

/* timeline */
.g-tl{position:relative;height:150px;margin:6px 18px 0}
.g-tl-svg{position:absolute;left:0;top:0;width:100%;height:56px;overflow:visible}
.g-tl-svg path{fill:none;stroke:var(--badge);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.g-tl-head{position:absolute;top:44px;font-size:1.4rem;line-height:1;color:var(--badge);transform:translateX(-50%)}
.g-tl-line{position:absolute;left:-10px;right:-10px;top:78px;height:10px;border-radius:99px;background:var(--bd)}
.g-tl-m{position:absolute;top:66px;transform:translateX(-50%);width:84px;text-align:center}
.g-tl-dot{display:block;margin:0 auto;width:32px;height:32px;border-radius:50%;background:var(--pill);border:4px solid var(--badge)}
.g-tl.dense .g-tl-m{width:58px}.g-tl.dense .g-tl-m span.l{font-size:.74rem}
.g-tl-m.now .g-tl-dot{background:#ff5d7a;border-color:#fff;box-shadow:0 0 0 4px #ff5d7a55}
.g-tl-m span.l{display:block;margin-top:6px;font-weight:800;font-size:.86rem;line-height:1.15}

.g-bad,.g-good{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:14px;font-weight:800;font-size:1.08rem}
.g-bad{background:#ffe1e1;color:#b3202f;border:3px solid #ff9aa5}
.g-bad s{text-decoration-thickness:3px;text-decoration-color:#e0334a}
.g-good{background:#dcf8e2;color:#1b7a36;border:3px solid #82dc9c}
.g-mis{padding:8px 0;border-bottom:3px dashed rgba(0,0,0,.14)}
.g-mis:last-child{border-bottom:0}
.g-mis .g-good{margin-top:6px}
.g-mis .g-good .t{flex:1}

.g-q{padding:8px 0;border-bottom:3px dashed rgba(0,0,0,.14)}
.g-q:last-of-type{border-bottom:0}
.g-qt{font-weight:800;font-size:1.08rem;margin-bottom:6px}
.g-opts{display:flex;flex-wrap:wrap;gap:8px}
.g-opt{font:inherit;font-weight:800;min-height:44px;padding:4px 16px;border-radius:999px;border:3px solid var(--badge);background:var(--surface);color:var(--text);cursor:pointer}
.g-opt:hover:not(:disabled){background:var(--pill)}
.g-opt.ok{background:#35c46a;border-color:#1b7a36;color:#fff}
.g-opt.no{background:#ff5d6e;border-color:#b3202f;color:#fff}
.g-opt:disabled{cursor:default}
.g-fb{min-height:1.3em;margin-top:6px;font-weight:700;font-size:.95rem}
.g-fb.ok{color:#1b7a36}.g-fb.no{color:#b3202f}
.g-score{margin-top:8px;font-weight:800;color:var(--badge)}

/* topic list */
.g-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;padding:16px clamp(12px,3vw,28px) 4px}
.g-card{display:block;text-decoration:none;color:var(--text);border-radius:24px;border:5px solid var(--bd);background:var(--bg);padding:12px 14px 14px;transition:transform .15s}
.g-card:hover,.g-card:focus-visible{transform:translateY(-4px) rotate(-.6deg)}
.g-card .gart{width:72px;height:72px;background:var(--inner);border-radius:20px;padding:6px}
.g-card h3{margin:6px 0 2px;font-size:1.3rem;font-weight:800;color:var(--badge)}
.g-card p{margin:0;font-weight:600;font-size:.95rem}
.g-card .g-esl{margin-top:4px}
.g-cardnum{float:right;width:34px;height:34px;border-radius:50%;background:var(--badge);color:#fff;font-weight:800;display:grid;place-items:center;border:3px solid #fff}
.g-grammar-link{margin-top:12px}

/* ---------- animations (only when JS enables them) ---------- */
.g-wrap.js-anim .g-panel{opacity:0;transform:translateY(26px) scale(.94)}
.g-wrap.js-anim .g-panel.in{animation:g-pop .6s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--i,0)*.12s)}
.g-wrap.js-anim .g-panel .g-pill{opacity:0}
.g-wrap.js-anim .g-panel.in .g-pill{animation:g-bounce .7s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i,0)*.12s + .25s + var(--k,0)*.1s)}
.g-wrap.js-anim .g-panel .g-op{opacity:0}
.g-wrap.js-anim .g-panel.in .g-op{animation:g-fade .4s both;animation-delay:calc(var(--i,0)*.12s + .3s + var(--k,0)*.1s)}
.g-wrap.js-anim .g-panel .draw,.g-wrap.js-anim .g-panel .g-tl-svg path{stroke-dasharray:1;stroke-dashoffset:1}
.g-wrap.js-anim .g-panel.in .draw,.g-wrap.js-anim .g-panel.in .g-tl-svg path{animation:g-draw 1.1s ease-out forwards;animation-delay:calc(var(--i,0)*.12s + .5s)}
.g-wrap.js-anim .g-panel .g-tl-head{opacity:0}
.g-wrap.js-anim .g-panel.in .g-tl-head{animation:g-fade .3s forwards;animation-delay:calc(var(--i,0)*.12s + 1.5s)}
.g-wrap.js-anim .g-panel .g-tl-dot,.g-wrap.js-anim .g-panel .g-tl-m .l{opacity:0}
.g-wrap.js-anim .g-panel.in .g-tl-dot{animation:g-slide .7s cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(var(--i,0)*.12s + .3s + var(--k,0)*.18s)}
.g-wrap.js-anim .g-panel.in .g-tl-m .l{animation:g-fade .5s both;animation-delay:calc(var(--i,0)*.12s + .6s + var(--k,0)*.18s)}
.g-wrap.js-anim .g-panel .g-ex,.g-wrap.js-anim .g-panel .g-mis,.g-wrap.js-anim .g-panel .g-q{opacity:0}
.g-wrap.js-anim .g-panel.in .g-ex,.g-wrap.js-anim .g-panel.in .g-mis,.g-wrap.js-anim .g-panel.in .g-q{animation:g-slideup .5s both;animation-delay:calc(var(--i,0)*.12s + .4s + var(--k,0)*.12s)}
.gart .wobble{animation:g-wobble 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.gart .shake{animation:g-wobble 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 50%}
.gart .float{animation:g-float 2.4s ease-in-out infinite}
.gart .hand{animation:g-spin 6s linear infinite;transform-origin:50px 52px}
.g-wrap.js-anim .g-panel .gart .bar{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom}
.g-wrap.js-anim .g-panel.in .gart .bar{animation:g-grow .8s cubic-bezier(.2,1.3,.4,1) forwards;animation-delay:calc(var(--i,0)*.12s + .4s + var(--d,0)*.2s)}
@keyframes g-pop{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
@keyframes g-bounce{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.18)}80%{transform:scale(.95)}100%{opacity:1;transform:scale(1)}}
@keyframes g-fade{from{opacity:0}to{opacity:1}}
@keyframes g-draw{to{stroke-dashoffset:0}}
@keyframes g-slide{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
@keyframes g-slideup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes g-wobble{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes g-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes g-spin{to{transform:rotate(360deg)}}
@keyframes g-grow{to{transform:scaleY(1)}}

@media (max-width:420px){.g-tl-m{width:64px}.g-tl-m span.l{font-size:.74rem}}
@media (prefers-reduced-motion:reduce){
  .g-wrap *,.g-wrap *::before{animation:none!important;transition:none!important}
}