/* ============================================================
   GrowthStory Component — "Living Mini World" (Phase 2)
   ------------------------------------------------------------
   ทำงานคู่กับ growth-story.js (component แยก — ถอด/ย้ายได้อิสระ)
   - โทเคนสีมาจากธีมเว็บ + โทเคนเสริม --gs-* เฉพาะ illustration
   - Ambient loop = โลกมีชีวิตตลอดเวลา (เมฆ นก ใบไม้ รถ คนเดินผ่าน)
   - Timeline 7 บท รอบละ ~24 วิ ใต้คลาส .play (JS วนซ้ำให้)
   - Motion principle: "ขยับน้อย แต่ถูกจังหวะ" — ambient ช้าจนแทบไม่รู้ตัว
     เหตุการณ์หลักมีทีละเรื่อง · ease นุ่ม · ทุกอย่าง transform/opacity เท่านั้น
   ============================================================ */

/* ---------- โทเคนสีเสริมเฉพาะ illustration ---------- */
.gstory{
  --gs-sun:#FFD166;--gs-leaf:#2FBF8F;--gs-leaf2:#1FA57A;--gs-wood:#B08968;
  --gs-warm:#FFE9B8;--gs-cloud:#FFFFFF;--gs-dash:rgba(255,255,255,.85);
  --gs-shade:rgba(15,23,42,.08);--gs-shade2:rgba(15,23,42,.16);
  --gs-board:#FFFFFF;--gs-signink:#0F172A;--gs-signbg:#0F172A;--gs-road:rgba(15,23,42,.10);
  --gs-skin:#F2C9A0;--gs-crate:#E8D5B5;--gs-glass:#D6F2EC;--gs-road2:#3A4A63;
}
:root[data-theme="dark"] .gstory{
  --gs-sun:#F5C24B;--gs-leaf:#2E9E77;--gs-leaf2:#25805F;--gs-wood:#8A6A50;
  --gs-warm:#FFD98A;--gs-cloud:#243350;--gs-dash:rgba(255,255,255,.28);
  --gs-shade:rgba(0,0,0,.30);--gs-shade2:rgba(0,0,0,.45);
  --gs-board:#223252;--gs-signink:#E9EEF8;--gs-signbg:#0B1120;--gs-road:rgba(0,0,0,.28);
  --gs-skin:#E0B48C;--gs-crate:#B49A76;--gs-glass:#1C3B36;--gs-road2:#0E1526;
}

/* ---------- โครง Section ---------- */
.gstory .gstory-wrap{max-width:960px;margin:0 auto}
.gstory-stage{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.gstory-stage svg{display:block;width:100%;height:auto}

/* แถบเส้นทางการเติบโต (ไอคอนจิ๋ว 7 บท) */
.gstory-dots{display:flex;justify-content:center;align-items:center;gap:14px;margin:18px 0 6px}
.gstory-dots .gd{width:30px;height:24px;flex:none;opacity:.28;transition:opacity .3s ease}
.gstory-dots .gd svg{display:block;width:100%;height:100%}

/* คำบรรยายใต้เวที */
.gstory-caption{position:relative;min-height:2.6em;text-align:center}
.gstory-caption .gcap{position:absolute;inset:0;opacity:0;color:var(--slate);
  font-size:1.02rem;font-weight:500}

/* ข้อความจบ + CTA */
.gstory-endtext{text-align:center;margin-top:10px;font-size:1.35rem;font-weight:700;
  color:var(--navy);letter-spacing:-.01em}
.gstory-cta{text-align:center;margin-top:18px}
.gstory .gstory-cta:focus-within{animation:none;opacity:1;transform:none}

/* ---------- ตัวอักษรใน SVG ---------- */
.gstory svg text{font-family:'Prompt',sans-serif}
.gstory svg .t-sign1{fill:var(--gs-signink);font-size:17px;font-weight:700}
.gstory svg .t-sign2{fill:#fff;font-size:20px;font-weight:700;letter-spacing:.02em}
.gstory svg .t-sign2s{fill:var(--teal);font-size:11px;font-weight:600}
.gstory svg .t-mini{fill:var(--gray);font-size:11px;font-weight:600}
.gstory svg .t-chip-l{fill:var(--gray);font-size:10px;font-weight:500}
.gstory svg .t-chip-n{fill:var(--navy);font-size:15px;font-weight:700}
.gstory svg .t-up{fill:var(--teal-ink);font-size:9.5px;font-weight:700}
.gstory svg .t-panel{fill:var(--navy);font-size:14px;font-weight:600}
.gstory svg .t-toast{fill:var(--navy);font-size:12px;font-weight:600}
.gstory svg .t-open{fill:var(--teal-ink);font-size:9px;font-weight:800;letter-spacing:.06em}
.gstory svg .t-sale{fill:var(--teal-ink);font-size:14px;font-weight:800}
.gstory svg .t-cloud{fill:var(--teal-ink);font-size:12px;font-weight:700}
.gstory svg .t-wh{fill:var(--slate);font-size:9.5px;font-weight:500}
.gstory svg .t-wh-n{fill:var(--navy);font-size:9.5px;font-weight:700;text-anchor:end}
.gstory svg .wh-check{stroke:var(--teal);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   AMBIENT — โลกหายใจตลอดเวลา (ช้า นุ่ม แทบไม่รู้ตัว)
   ============================================================ */
.gstory .amb-cloud1{animation:gsDrift1 36s ease-in-out infinite alternate}
.gstory .amb-cloud2{animation:gsDrift2 48s ease-in-out infinite alternate}
.gstory .amb-cloud3{animation:gsDrift1 58s ease-in-out infinite alternate-reverse}
.gstory .amb-halo{animation:gsHalo 5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.gstory .amb-rays{animation:gsSpin 46s linear infinite}
.gstory .amb-tree1{animation:gsSway 5.6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:bottom center}
.gstory .amb-tree2{animation:gsSway 6.8s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:bottom center}
.gstory .amb-bird1{animation:gsBird1 26s linear infinite 3s both}
.gstory .amb-bird2{animation:gsBird2 34s linear infinite 12s both}
.gstory .amb-leaf1{animation:gsLeaf 9s ease-in 6s infinite both}
.gstory .amb-leaf2{animation:gsLeaf 11s ease-in 13s infinite both}
.gstory .amb-car{animation:gsCrossR 15s linear infinite 2.5s both}
.gstory .amb-bike{animation:gsCrossL 18s linear infinite 9s both}
.gstory .amb-bicycle{animation:gsCrossR 21s linear infinite 13s both}
.gstory .amb-stroll{animation:gsCrossR 30s linear infinite 5.5s both}
.gstory .amb-openswing{animation:gsSwing 5.5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:top center}
.gstory .amb-car .wheel,.gstory .amb-bike .wheel,.gstory .amb-bicycle .wheel{animation:gsSpin .8s linear infinite;transform-box:fill-box;transform-origin:center}
.gstory .lamp-glow{animation:gsLamp 3.2s ease-in-out infinite alternate}
.gstory .amb-stroll .bob{animation:gsBob .42s linear infinite alternate}
.gstory .amb-stroll .legA{animation:gsLeg .42s linear infinite alternate}
.gstory .amb-stroll .legB{animation:gsLeg .42s linear infinite alternate-reverse}

/* ============================================================
   TIMELINE 7 บท (รอบ ~24 วิ) — ใต้ .play
   1 วันแรก 0 · 2 POS 3.2 · 3 ของ+ลูกค้า 6.5 · 4 คลัง/สต็อก 10
   · 5 Dashboard 13.5 · 6 Cloud 17 · 7 มืออาชีพ 20 · จบ 24
   ============================================================ */

/* --- คำบรรยาย + แถบเติบโต --- */
.gstory.play .gcap1{animation:gsFade 3.5s 0s both}
.gstory.play .gcap2{animation:gsFade 3.6s 3.2s both}
.gstory.play .gcap3{animation:gsFade 3.8s 6.5s both}
.gstory.play .gcap4{animation:gsFade 3.8s 10s both}
.gstory.play .gcap5{animation:gsFade 3.8s 13.5s both}
.gstory.play .gcap6{animation:gsFade 3.3s 17s both}
.gstory.play .gcap7{animation:gsIn .8s 20s both}
.gstory.play .gd:nth-child(1){animation:gsDot .4s 0s forwards}
.gstory.play .gd:nth-child(2){animation:gsDot .4s 3.2s forwards}
.gstory.play .gd:nth-child(3){animation:gsDot .4s 6.5s forwards}
.gstory.play .gd:nth-child(4){animation:gsDot .4s 10s forwards}
.gstory.play .gd:nth-child(5){animation:gsDot .4s 13.5s forwards}
.gstory.play .gd:nth-child(6){animation:gsDot .4s 17s forwards}
.gstory.play .gd:nth-child(7){animation:gsDot .4s 20s forwards}
.gstory.play .gstory-endtext{animation:gsUp .7s 22.5s both}
.gstory.play .gstory-cta{animation:gsUp .7s 22.8s both}

/* --- คนเดิน (ใช้ทุกบท ผ่านตัวแปร --fx/--tx/--t/--d) --- */
.gstory .walkin,.gstory .walkout{opacity:0}
.gstory.play .walkin{animation:gsWalkIn var(--t,2.4s) var(--d,0s) cubic-bezier(.35,.12,.65,.88) both}
.gstory.play .walkout{animation:gsWalkOut var(--t,2.6s) var(--d,0s) cubic-bezier(.35,.12,.65,.88) both}
.gstory.play .bob{animation:gsBob .42s linear infinite alternate}
.gstory .legA,.gstory .legB{transform-box:fill-box;transform-origin:top center}
.gstory.play .walkin .legA,.gstory.play .walkout .legA{animation:gsLeg .42s linear infinite alternate}
.gstory.play .walkin .legB,.gstory.play .walkout .legB{animation:gsLeg .42s linear infinite alternate-reverse}
.gstory.play .open-sign{animation:gsPopIn .5s .4s both;transform-box:fill-box;transform-origin:center}

/* --- บท 2: Focus Card เคาน์เตอร์ POS --- */
.gstory .pos-wrap{opacity:0}
.gstory.play .pos-wrap{animation:gsHold 3.2s 3.3s both}
.gstory.play .pos-card{animation:gsPopIn .55s 3.3s both;transform-box:fill-box;transform-origin:bottom center}
.gstory.play .pos-scan{animation:gsScan .7s 4s 2 both}
.gstory.play .pos-receipt{animation:gsGrowY .8s 5.15s both;transform-box:fill-box;transform-origin:top center}
.gstory.play .pos-badge{animation:gsPopIn .4s 6.05s both;transform-box:fill-box;transform-origin:center}

/* --- บท 3: รถกระบะส่งของ / ชั้นเต็มขึ้น / กองลัง / รถลูกค้า --- */
.gstory .truck-wrap{opacity:0}
.gstory.play .truck-wrap{animation:gsHold 5.2s 6.5s both}
.gstory.play .truck-in{animation:gsTruckIn 1.25s 6.5s cubic-bezier(.2,.7,.25,1) both}
.gstory.play .truck-out{animation:gsTruckOut 1.1s 11.6s ease-in both}
.gstory.play .truck-wrap .wheel{animation:gsSpin .7s 6.5s 2 linear both;transform-box:fill-box;transform-origin:center}
.gstory .win-extra{opacity:0}
.gstory.play .win-extra{animation:gsPopIn .45s var(--d,8.4s) both;transform-box:fill-box;transform-origin:center}
.gstory .stack-box{opacity:0}
.gstory.play .stack-box{animation:gsDropIn .5s var(--d,8.8s) both;transform-box:fill-box;transform-origin:bottom center}
.gstory .chat-bub{opacity:0}
.gstory.play .chat-bub{animation:gsPopIn .4s 9.75s both;transform-box:fill-box;transform-origin:bottom center}
.gstory .car-cust{opacity:0}
.gstory.play .car-cust{animation:gsCarPark 1.15s 9.55s cubic-bezier(.2,.7,.25,1) both}

/* --- บท 4: Focus Card คลังสินค้า + เช็คสต็อก --- */
.gstory .wh-wrap{opacity:0}
.gstory.play .wh-wrap{animation:gsHold 3.4s 10.1s both}
.gstory.play .wh-card{animation:gsRiseIn .6s 10.2s cubic-bezier(.22,.9,.3,1.08) both}
.gstory .wh-row{opacity:0}
.gstory.play .wh-row{animation:gsRowIn .4s var(--d,11s) both}
.gstory .wh-profit{opacity:0}
.gstory.play .wh-profit{animation:gsPopIn .5s 12.7s cubic-bezier(.2,.9,.25,1.3) both;transform-box:fill-box;transform-origin:center}

/* --- บท 5: Dashboard --- */
.gstory .ovl-out{opacity:1}
.gstory.play .ovl-out{animation:gsFadeOut .5s 16.75s both}
.gstory .dash-wrap{opacity:0}
.gstory.play .dash-wrap{animation:gsRiseIn .6s 13.7s cubic-bezier(.22,.9,.3,1.08) both}
.gstory.play .dash-float{animation:gsFloat 3.4s 14.5s ease-in-out infinite alternate}
.gstory svg .dash-line{stroke:var(--teal);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.gstory.play .dash-line{animation:gsDraw 1.1s 14.35s both}
.gstory svg .dash-donut{stroke-dashoffset:.78}
.gstory.play .dash-donut{animation:gsDonut 1s 14.75s cubic-bezier(.2,.7,.2,1) both}
.gstory .toast{opacity:0}
.gstory.play .toast{animation:gsPopIn .5s 15.9s cubic-bezier(.2,.9,.25,1.3) both;transform-box:fill-box;transform-origin:bottom center}

/* --- บท 6: Cloud + เส้น Sync + จุดข้อมูลวิ่ง --- */
.gstory .cloud-out{opacity:1}
.gstory.play .cloud-out{animation:gsFadeOut .55s 19.8s both}
.gstory .cloud-wrap{opacity:0}
.gstory.play .cloud-wrap{animation:gsRiseIn .6s 17.15s cubic-bezier(.22,.9,.3,1.08) both}
.gstory.play .cloud-breathe{animation:gsBreathe 3s 17.5s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
.gstory svg .sync-line{stroke:var(--teal);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-dasharray:5 7;opacity:.8}
.gstory.play .sync-line{animation:gsDashFlow 1.2s linear infinite}
.gstory .sync-dot{opacity:0}
.gstory.play .sync-dot{animation:gsDotRun 1.7s var(--d,18s) linear infinite}
.gstory.play .dev-pop{animation:gsPopIn .45s var(--d,17.7s) both;transform-box:fill-box;transform-origin:center}

/* --- บท 7: ต่อเติมปีก + ป้ายใหม่ + คลังสินค้า + รถบรรทุก --- */
.gstory .wing{transform:scaleX(0);transform-box:fill-box;transform-origin:right center}
.gstory.play .wing{animation:gsWingX .95s 20.2s cubic-bezier(.2,.7,.2,1.05) both}
.gstory.play .sign1-wrap{animation:gsFadeOut .45s 20.5s both}
.gstory .sign2-wrap{opacity:0}
.gstory.play .sign2-wrap{animation:gsSignDrop .7s 20.8s cubic-bezier(.2,.9,.25,1.2) both}
.gstory.play .glow2{animation:gsGlowPulse 2.6s 21.6s ease-in-out infinite}
.gstory .ch7-add{opacity:0}
.gstory.play .ch7-truck{animation:gsTruck7 1.35s 21.5s cubic-bezier(.2,.7,.25,1) both}
.gstory.play .ch7-truck .wheel{animation:gsSpin .7s 21.5s 2 linear both;transform-box:fill-box;transform-origin:center}
.gstory.play .ch7-add{animation:gsRiseIn .7s 21.15s cubic-bezier(.22,.9,.3,1.08) both}

/* ---------- Keyframes ---------- */
@keyframes gsFade{0%{opacity:0}12%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes gsIn{from{opacity:0}to{opacity:1}}
@keyframes gsUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes gsDot{to{opacity:1}}
@keyframes gsHold{0%{opacity:0}6%{opacity:1}94%{opacity:1}100%{opacity:0}}
@keyframes gsPopIn{0%{opacity:0;transform:scale(.6)}65%{opacity:1;transform:scale(1.07)}100%{opacity:1;transform:scale(1)}}
@keyframes gsDropIn{0%{opacity:0;transform:translateY(-16px)}60%{opacity:1;transform:translateY(2px)}100%{opacity:1;transform:none}}
@keyframes gsRiseIn{0%{opacity:0;transform:translateY(18px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes gsRowIn{0%{opacity:0;transform:translateX(-8px)}100%{opacity:1;transform:none}}
@keyframes gsFadeOut{from{opacity:1}to{opacity:0}}
@keyframes gsWalkIn{0%{opacity:0;transform:translateX(var(--fx,-300px))}7%{opacity:1}86%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes gsWalkOut{0%{opacity:0;transform:none}7%{opacity:1}88%{opacity:1;transform:translateX(var(--tx,320px))}100%{opacity:0;transform:translateX(var(--tx,320px))}}
@keyframes gsBob{from{transform:translateY(0)}to{transform:translateY(-2.6px)}}
@keyframes gsSwing{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
@keyframes gsScan{0%{opacity:0;transform:translateY(0)}15%{opacity:.95}55%{transform:translateY(17px)}90%{opacity:.95}100%{opacity:0;transform:translateY(0)}}
@keyframes gsGrowY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes gsDraw{to{stroke-dashoffset:0}}
@keyframes gsTruckIn{from{transform:translateX(-430px)}to{transform:none}}
@keyframes gsTruck7{from{transform:translateX(-520px)}to{transform:none}}
@keyframes gsTruckOut{from{transform:none;opacity:1}70%{opacity:1}to{transform:translateX(560px);opacity:0}}
@keyframes gsCarPark{from{transform:translateX(330px);opacity:0}12%{opacity:1}to{transform:none;opacity:1}}
@keyframes gsWingX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gsSignDrop{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
@keyframes gsGlowPulse{0%,100%{opacity:.22}50%{opacity:.5}}
@keyframes gsDashFlow{to{stroke-dashoffset:-24}}
@keyframes gsDotRun{0%{offset-distance:0%;opacity:0}10%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes gsHalo{from{transform:scale(1);opacity:.18}to{transform:scale(1.16);opacity:.3}}
@keyframes gsSpin{to{transform:rotate(360deg)}}
/* ก้าวเดินธรรมชาติ: ขาหนึ่งยืนพื้น อีกขายกก้าวไปข้างหน้า (สลับเฟส legA/legB)
   เดิม rotate(-15)->rotate(15) ทำให้ขากางออกข้าง/ไขว้ = ท่าเดินไม่ธรรมชาติ */
@keyframes gsLeg{from{transform:rotate(9deg)}to{transform:rotate(-9deg) translateY(-2.6px)}}
@keyframes gsLamp{from{opacity:.16}to{opacity:.42}}
@keyframes gsFloat{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes gsDonut{from{stroke-dashoffset:.78}to{stroke-dashoffset:0}}
@keyframes gsBreathe{from{transform:scale(1)}to{transform:scale(1.022)}}
@keyframes gsBird1{0%{transform:translate(-60px,150px)}45%{transform:translate(1020px,60px)}100%{transform:translate(1020px,60px)}}
@keyframes gsBird2{0%{transform:translate(1020px,90px)}40%{transform:translate(-60px,170px)}100%{transform:translate(-60px,170px)}}
@keyframes gsLeaf{0%{transform:translate(150px,240px) rotate(0);opacity:0}8%{opacity:.9}55%{transform:translate(196px,320px) rotate(140deg);opacity:.9}70%{transform:translate(214px,336px) rotate(200deg);opacity:0}100%{transform:translate(214px,336px) rotate(200deg);opacity:0}}
@keyframes gsDrift1{from{transform:translateX(-28px)}to{transform:translateX(46px)}}
@keyframes gsDrift2{from{transform:translateX(30px)}to{transform:translateX(-44px)}}
@keyframes gsCrossR{0%{transform:translateX(-260px)}42%{transform:translateX(1220px)}100%{transform:translateX(1220px)}}
@keyframes gsCrossL{0%{transform:translateX(1220px)}38%{transform:translateX(-260px)}100%{transform:translateX(-260px)}}

/* ============================================================
   .shown — จบรอบแรกแล้ว: ข้อความจบ + CTA ค้างโชว์ถาวร
   ============================================================ */
.gstory.shown .gstory-endtext,.gstory.shown .gstory-cta{animation:none;opacity:1;transform:none}

/* ============================================================
   prefers-reduced-motion — ภาพนิ่ง "ร้านโฉมสมบูรณ์" + CTA
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .gstory .gcap,.gstory [class*="amb-"],.gstory .walkin,.gstory .walkout,.gstory .bob,
  .gstory .pos-wrap,.gstory .pos-card,.gstory .pos-scan,.gstory .pos-receipt,.gstory .pos-badge,
  .gstory .truck-wrap,.gstory .truck-in,.gstory .truck-out,.gstory .win-extra,.gstory .stack-box,
  .gstory .chat-bub,.gstory .car-cust,.gstory .wing,.gstory .sign1-wrap,.gstory .sign2-wrap,
  .gstory .glow2,.gstory .ovl-out,.gstory .cloud-out,.gstory .dash-wrap,.gstory .dash-float,
  .gstory .dash-line,.gstory .dash-donut,.gstory .toast,.gstory .cloud-wrap,.gstory .cloud-breathe,
  .gstory .sync-line,.gstory .sync-dot,.gstory .dev-pop,.gstory .wh-wrap,.gstory .wh-card,
  .gstory .wh-row,.gstory .wh-profit,.gstory .ch7-add,.gstory .wheel,.gstory .lamp-glow,
  .gstory .legA,.gstory .legB,.gstory .open-sign,.gstory .gd,
  .gstory .gstory-endtext,.gstory .gstory-cta{animation:none!important}
  /* ร้านโฉมสมบูรณ์ */
  .gstory .wing{transform:scaleX(1)}
  .gstory .sign1-wrap{opacity:0}
  .gstory .sign2-wrap,.gstory .win-extra,.gstory .stack-box,.gstory .car-cust,.gstory .ch7-add{opacity:1}
  /* ซ่อนของชั่วคราว/ของที่ตำแหน่งตั้งต้นอยู่นอกฉาก */
  .gstory .pos-wrap,.gstory .truck-wrap,.gstory .wh-wrap,.gstory .dash-wrap,.gstory .cloud-wrap,
  .gstory .walkin,.gstory .walkout,.gstory .chat-bub,.gstory .sync-dot{opacity:0!important}
  .gstory .amb-bird1,.gstory .amb-bird2,.gstory .amb-car,.gstory .amb-bike,
  .gstory .amb-bicycle,.gstory .amb-stroll,.gstory .amb-leaf1,.gstory .amb-leaf2{opacity:0!important}
  .gstory .crowd-static{opacity:1}
  .gstory .gcap{opacity:0}
  .gstory .gcap7{opacity:1}
  .gstory .gd{opacity:1}
  .gstory .gstory-endtext,.gstory .gstory-cta{opacity:1;transform:none}
}
/* กลุ่มคนยืนนิ่งสำหรับโหมด reduced-motion เท่านั้น */
.gstory .crowd-static{opacity:0}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .gstory-caption .gcap{font-size:.92rem}
  .gstory-endtext{font-size:1.12rem}
  .gstory-dots{gap:9px;margin-top:14px}
  .gstory-dots .gd{width:24px;height:19px}
}