
.sg-btn{all:unset;cursor:pointer;padding:9px 16px;border-radius:999px;background:#fff;font-weight:700;font-size:14.5px;color:var(--u-navy);
  box-shadow:inset 0 0 0 1.5px var(--u-edge);transition:background .2s,transform .2s,color .2s}
.sg-btn:hover{transform:translateY(-2px)}
.sg-btn.on{background:var(--u-navy);color:#fff;box-shadow:none}
.sg-btn:focus-visible{outline:3px solid var(--sg-amber);outline-offset:2px}
.sg-btn[disabled]{cursor:default;transform:none}
.sg-play[class*="tm-"] .sg-read b{white-space:nowrap}
.tm-ctl{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px;align-items:center}

.tm-face{fill:#fff;stroke:var(--u-ink);stroke-width:4}
.tm-tk{stroke:var(--u-ink);stroke-width:2.4;stroke-linecap:round}
.tm-tk2{stroke:#9AA7B2;stroke-width:1.2}
.tm-num{font:800 16px var(--u-font);fill:var(--u-ink);text-anchor:middle}
.tm-h{stroke:var(--u-ink);stroke-linecap:round}
.tm-m line{stroke:var(--u-ink);stroke-linecap:round}
.tm-knob{fill:var(--sg-blue);stroke:#fff;stroke-width:3}

.tm-hero{border-radius:18px;background:#fff;box-shadow:var(--u-sh);padding:14px 10px 6px;text-align:center}
.tm-hq{margin:0!important;font-size:14.5px;color:var(--u-soft)}
.tm-hq b{color:var(--u-ink)}
.tm-hero svg{width:100%;height:auto;display:block}
.tm-hero .tm-face{stroke-width:3.5}
.tm-hk line{stroke:var(--u-ink);stroke-width:2.4;stroke-linecap:round}
.tm-hn text{font:800 14px var(--u-font);fill:var(--u-ink);text-anchor:middle}
.tm-hh,.tm-hm{stroke:var(--u-ink);stroke-linecap:round;transform-box:view-box;transform-origin:170px 86px}
.tm-hh{stroke-width:6;transform:rotate(277.5deg);animation:tm-hh 9s ease-in-out infinite}
.tm-hm{stroke-width:3.5;transform:rotate(450deg);animation:tm-hm 9s ease-in-out infinite}
.tm-tl{stroke:var(--u-ink);stroke-width:2.2;stroke-linecap:round}
.tm-arc{fill:none;stroke:var(--sg-blue);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.tm-a1{animation:tm-a1 9s ease-in-out infinite}.tm-a2{animation:tm-a2 9s ease-in-out infinite}
.tm-hl rect{fill:var(--sg-blue-bg)}.tm-hl text{font:800 13px var(--u-font);fill:var(--sg-blue);text-anchor:middle}
.tm-l1{animation:tm-l1 9s ease infinite}.tm-l2{animation:tm-l2 9s ease infinite}
.tm-tt{font:800 15px var(--u-font);fill:var(--u-ink);text-anchor:middle}
.tm-hero .tm-t2{animation:tm-t2 9s ease infinite}.tm-hero .tm-t3{animation:tm-t3 9s ease infinite}
.tm-hero .tm-end{fill:var(--sg-blue);font-size:17px}
@keyframes tm-hm{0%,12%{transform:rotate(300deg)}34%,44%{transform:rotate(360deg)}66%,90%{transform:rotate(450deg)}100%{transform:rotate(300deg)}}
@keyframes tm-hh{0%,12%{transform:rotate(265deg)}34%,44%{transform:rotate(270deg)}66%,90%{transform:rotate(277.5deg)}100%{transform:rotate(265deg)}}
@keyframes tm-a1{0%,12%{stroke-dashoffset:1;opacity:1}34%,90%{stroke-dashoffset:0;opacity:1}96%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes tm-a2{0%,44%{stroke-dashoffset:1;opacity:1}66%,90%{stroke-dashoffset:0;opacity:1}96%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes tm-l1{0%,28%{opacity:0}34%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes tm-l2{0%,60%{opacity:0}66%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes tm-t2{0%,30%{opacity:0}34%,90%{opacity:1}96%,100%{opacity:0}}
@keyframes tm-t3{0%,63%{opacity:0}68%,90%{opacity:1}96%,100%{opacity:0}}

.tm-sw-in{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:center;max-width:620px;margin:0 auto}
.tm-sw-svg{width:220px;height:auto;display:block}
.tm-trk{fill:none;stroke:#E8ECF0;stroke-width:12}
.tm-lapc{fill:none;stroke:var(--sg-blue-lt);stroke-width:12}
.tm-swh{stroke:var(--sg-blue);stroke-width:3;stroke-linecap:round}
.tm-swt{font:800 15px var(--u-font);fill:var(--u-ink);text-anchor:middle}
.tm-sw-big{font:800 34px/1.1 var(--u-font);color:var(--u-ink);min-height:38px}
.tm-sw-big b{color:var(--sg-blue)}
.tm-sw-lab{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--u-soft);margin:14px 0 8px}
.tm-laps{display:flex;flex-wrap:wrap;gap:8px;min-height:62px;align-items:center}
.tm-lap{width:66px;height:66px;border-radius:50%;box-shadow:inset 0 0 0 6px var(--sg-blue-lt);display:grid;place-items:center;align-content:center;background:#fff}
.tm-lap b{font-size:12.5px;line-height:1;color:var(--u-soft)}
.tm-lap i{font-style:normal;font-weight:800;font-size:14px;line-height:1.1;color:var(--sg-blue)}
.tm-lap.tm-pop{animation:tm-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes tm-pop{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
.tm-none{font-size:14.5px;color:var(--u-soft)}
.tm-sw-facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tm-sw-facts span{font-size:13.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:#fff;color:var(--u-navy);box-shadow:inset 0 0 0 1.5px var(--u-hair)}
.tm-sw-range{display:block;width:100%;max-width:620px;margin:16px auto 0;accent-color:var(--sg-blue)}

.tm-ck-in{display:grid;grid-template-columns:280px minmax(0,1fr);gap:30px;align-items:center;max-width:680px;margin:0 auto}
.tm-ck-svg{width:280px;height:auto;display:block;touch-action:none;cursor:grab;border-radius:50%}
.tm-ck-svg.tm-grab{cursor:grabbing}
.tm-ck-svg:focus-visible{outline:3px solid var(--sg-amber);outline-offset:4px}
.tm-ring{fill:none;stroke:var(--sg-blue-bg);stroke-width:30}
.tm-ol circle{fill:transparent;transition:fill .25s}
.tm-ol text{font:800 13px var(--u-font);fill:var(--sg-blue);text-anchor:middle;transition:fill .25s}
.tm-ol.on circle{fill:var(--sg-blue)}.tm-ol.on text{fill:#fff}
.tm-o.tm-flip{animation:tm-flip .5s ease}
@keyframes tm-flip{0%{opacity:.15}100%{opacity:1}}
.tm-rd{display:grid;gap:2px;padding:12px 16px;border-radius:14px;background:#fff;box-shadow:var(--u-sh);margin-bottom:10px}
.tm-rd .k{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--u-soft)}
.tm-rd .v{font:800 30px/1.15 var(--u-font);color:var(--u-ink);font-variant-numeric:tabular-nums}
.tm-rd24 .v{color:var(--sg-blue);letter-spacing:.03em}
.tm-day{margin-top:14px}
.tm-day-bar{position:relative;height:14px;border-radius:999px;background:linear-gradient(90deg,#CFD8E3 0%,#E9EEF3 22%,#FFF4DE 50%,#E9EEF3 78%,#CFD8E3 100%);box-shadow:inset 0 0 0 1px rgba(32,48,61,.08)}
.tm-day-bar::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:var(--u-ink);opacity:.35}
.tm-day-dot{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--sg-blue);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:left .4s ease}
.tm-day-lab{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;line-height:1.25;color:var(--u-soft)}
.tm-day-lab span{text-align:center}.tm-day-lab span:first-child{text-align:left}.tm-day-lab span:last-child{text-align:right}
.tm-ring-key{display:flex;gap:8px;align-items:center;margin:12px 0 0;font-size:13.5px;color:var(--u-soft)}
.tm-ring-key i{width:16px;height:16px;border-radius:50%;background:var(--sg-blue-bg);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px var(--sg-blue-lt);flex:none}

.tm-pick{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.tm-q{margin:0 0 6px;font-size:16.5px;line-height:1.5;text-align:center}
.tm-tl-in,.tm-jy-in{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:16px;align-items:center}
.tm-tl-svg,.tm-jy-svg{width:100%;height:auto;display:block;overflow:visible}
.tm-mc{width:120px;height:auto;display:block}
.tm-mc .tm-face{stroke-width:3.5}
.tm-line{stroke:var(--u-ink);stroke-width:2.4;stroke-linecap:round}
.tm-tick{stroke:var(--u-ink);stroke-width:2.4;stroke-linecap:round}
.tm-tl3 .tm-tt,.tm-jy .tm-tt{font-size:16px}
.tm-ts{font:600 12.5px var(--u-font);fill:var(--u-soft);text-anchor:middle}
.tm-pt{opacity:0;transition:opacity .4s ease}
.tm-pt.on{opacity:1}
.tm-pt.tm-find{opacity:1}
.tm-qm{fill:var(--sg-blue);font-size:20px}
.tm-ans{display:none}
.tm-find.got .tm-qm{display:none}.tm-find.got .tm-ans{display:inline;fill:var(--sg-blue)}
.tm-ghosta{fill:none;stroke:#B9C3CC;stroke-width:2;stroke-dasharray:4 6;stroke-linecap:round}
.tm-hop path{fill:none;stroke:var(--sg-blue);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s ease}
.tm-hop polygon{fill:var(--sg-blue);opacity:0;transition:opacity .2s ease .6s}
.tm-hop .tm-pill{opacity:0;transition:opacity .3s ease .45s}
.tm-hop.in path{stroke-dashoffset:0}.tm-hop.in polygon,.tm-hop.in .tm-pill{opacity:1}
.tm-hop.tm-draw path{animation:tm-draw .7s ease}
@keyframes tm-draw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
.tm-pill rect{fill:var(--sg-blue-bg);stroke:#fff;stroke-width:2}
.tm-pill text{font:800 13.5px var(--u-font);fill:var(--sg-blue);text-anchor:middle}
.tm-brace{fill:none;stroke:var(--u-navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.tm-bl{font:800 14px var(--u-font);fill:var(--u-navy);text-anchor:middle}
.tm-bl.tm-unk{fill:var(--sg-blue);font-size:17px}
.tm-bl.got{fill:var(--sg-blue);animation:tm-yes .5s ease}
@keyframes tm-yes{40%{font-size:17px}}
.tm-sum{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:34px;margin-top:4px;align-items:center}
.tm-chip{font-weight:800;font-size:14px;padding:5px 12px;border-radius:999px;background:var(--sg-blue-bg);color:var(--sg-blue);animation:tm-pop .4s ease}
.tm-chip+.tm-chip::before{content:"";}
.tm-eq{font:800 18px/1.3 var(--u-font);color:var(--u-ink);animation:tm-pop .4s ease;text-align:center}
.tm-eq b{color:var(--sg-blue)}

.tm-jy .tm-q{max-width:700px;margin:0 auto 8px}
.tm-gap rect{fill:var(--sg-amber)}
.tm-gap path{stroke:#9D630C;stroke-width:2.4;fill:none}
.tm-gap polygon{fill:#9D630C}
.tm-gap text{font:800 13.5px var(--u-font);fill:#9D630C;text-anchor:middle}
.tm-ghost .tm-tick{stroke:#9AA7B2;stroke-dasharray:3 3}
.tm-ghost .tm-tt{fill:#7A8691}
.tm-real .tm-tt{fill:var(--sg-blue)}
.tm-dim{opacity:.85}
.tm-ride{fill:var(--sg-blue-lt);stroke:var(--sg-blue);stroke-width:1.5}
.tm-rest{stroke:#9AA7B2;stroke-width:1.5}
.tm-st{font:800 13.5px var(--u-font);fill:var(--u-navy);text-anchor:middle}
.tm-st2{fill:var(--u-ink);paint-order:stroke;stroke:#F1F3F5;stroke-width:5px;stroke-linejoin:round}
.tm-strip.tm-grow{animation:tm-pop .5s ease;transform-box:fill-box;transform-origin:center}
.tm-jcap{font:700 12px var(--u-font);fill:var(--u-soft);text-anchor:middle}
.tm-stages{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.tm-stages .sg-btn{display:inline-flex;gap:8px;align-items:center}
.tm-stages .sg-btn i{font-style:normal;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;background:var(--u-ground);color:var(--u-navy)}
.tm-stages .sg-btn.on i{background:#fff}
.tm-stages .sg-btn.past i{background:var(--sg-green);color:#fff}
.tm-fsw{font-size:14px;color:var(--u-soft)}
.tm-fsw .sg-btn{padding:6px 13px;font-size:13.5px}

.sg-card .mini{gap:4px;align-content:center}
.sg-card .mini .tm-mini{width:70px;height:70px}
.sg-card .mini .tm-mini-t{font:800 18px/1 var(--u-font);color:#1F2933;letter-spacing:.04em}

@media (max-width:900px){
  .tm-sw-in{grid-template-columns:1fr;justify-items:center;gap:14px;text-align:center}
  .tm-sw-svg{width:200px}
  .tm-laps,.tm-sw-facts{justify-content:center}
  .tm-ck-in{grid-template-columns:1fr;justify-items:center;gap:16px}
  .tm-ck-svg{width:260px;max-width:100%}
  .tm-ck-side{width:100%;max-width:360px}
  .tm-rd{grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:10px 14px}
  .tm-rd .v{font-size:26px;text-align:right}
  .tm-tl-in,.tm-jy-in{grid-template-columns:1fr;gap:6px}
  .tm-mc{width:96px;justify-self:center;order:-1}
  .tm-q{font-size:15.5px}
}
@media (max-width:600px){
  .tm-tl3 .tm-tt{font-size:17.5px}.tm-jy .tm-tt{font-size:16.5px}
  .tm-ts{font-size:15px}
  .tm-pill text{font-size:15px}
  .tm-ck .tm-ctl .sg-btn{padding:8px 12px}
  .tm-fsw span{flex-basis:100%;text-align:center}
  .tm-bl{font-size:15.5px}.tm-bl.tm-unk{font-size:19px}
  .tm-gap text,.tm-st{font-size:15px}
  .tm-mc{width:110px}
}
@media (max-width:480px){
  .tm-pick .sg-btn,.tm-stages .sg-btn{padding:8px 12px;font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .tm-hh,.tm-hm,.tm-arc,.tm-hl,.tm-hero .tm-tt,.tm-hero .tm-t2,.tm-hero .tm-t3{animation:none!important}
  .tm-hop path,.tm-hop polygon,.tm-hop .tm-pill,.tm-pt,.tm-day-dot{transition:none}
  .tm-lap.tm-pop,.tm-chip,.tm-eq,.tm-strip.tm-grow,.tm-o.tm-flip,.tm-hop.tm-draw path{animation:none}
}
