.an-hero,.an-s1 svg,.an-cmp svg,.an-cnt svg{--an-ink:#20303D}
.an-arm{stroke:var(--an-ink);stroke-width:4;stroke-linecap:round;fill:none}
.an-op{fill:#93B8F2;fill-opacity:.55}
.an-gap{fill:#EFA02A;fill-opacity:.8}
.an-sq{fill:#fff;fill-opacity:.5;stroke:#0E2A47;stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:7 5}
.an-sq.fit{stroke:#4A7A1E;stroke-dasharray:none;stroke-width:3.5}
.an-mk{fill:none;stroke:var(--u-ink);stroke-width:1.6;stroke-linecap:round}
.an-lt{font:700 15px var(--u-font);fill:var(--u-ink);text-anchor:middle}
.an-dot{fill:var(--u-ink)}

.an-hero{position:relative;border-radius:18px;background:#fff;box-shadow:var(--u-sh);padding:12px 14px 14px}
.an-hero svg{display:block;width:100%;height:auto}
.an-hcap{text-align:center;min-height:52px}
.an-hcap b{display:block;font-size:19px;color:var(--u-navy);line-height:1.25}
.an-hcap span{display:block;font-size:13.5px;color:var(--u-soft);line-height:1.35;margin-top:2px}
.an-hero .an-turn{fill:none;stroke:#2F6FEB;stroke-width:2.2;stroke-linecap:round}
.an-hero .an-head{fill:#2F6FEB}
.an-hero .an-chip{font:800 13px var(--u-font);text-anchor:middle}

.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,opacity .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}
.an-ctl{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:12px}
.an-s1 svg,.an-cmp svg,.an-cnt svg{display:block;width:100%;max-width:640px;margin:0 auto;height:auto;overflow:visible;background:#fff;border-radius:14px;box-shadow:var(--u-sh)}

.an-s1 .an-turn{fill:none;stroke:#2F6FEB;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:2 7}
.an-s1 .an-head{fill:#2F6FEB}
.an-s1 .an-hit{fill:transparent;cursor:grab;touch-action:none}
.an-s1 .an-hit:active{cursor:grabbing}
.an-s1 .an-knob{fill:#2F6FEB;stroke:#fff;stroke-width:4;pointer-events:none}
.an-s1 .an-knob-ring{fill:none;stroke:#2F6FEB;stroke-width:2;opacity:.35;pointer-events:none;transform-box:fill-box;transform-origin:center;animation:an-pulse 1.8s ease-out infinite}
.an-s1.used .an-knob-ring{animation:none;opacity:0}
@keyframes an-pulse{0%{transform:scale(.7);opacity:.5}100%{transform:scale(1.6);opacity:0}}
.an-rng{display:flex;align-items:center;gap:12px;margin:14px auto 0;max-width:520px;font-size:13.5px;color:var(--u-soft);font-weight:700}
.an-rng input{flex:1;accent-color:#2F6FEB;min-width:0}

.an-paper{position:relative;width:min(100%,330px);aspect-ratio:240/200;margin:6px auto 0;cursor:pointer}
.an-sheet{position:absolute;inset:0;transition:transform .8s cubic-bezier(.5,0,.3,1) .1s}
.an-paper.f2 .an-sheet{transform:translate(-24%,-26%) scale(1.25)}
.an-half{position:absolute;top:0;height:100%;transition:transform .8s cubic-bezier(.5,0,.3,1)}
.an-half.l{left:0;width:49.1667%;transform-origin:100% 50%}
.an-half.r{left:49.1667%;width:50.8333%}
.an-paper .q{position:absolute;left:0;width:100%;overflow:hidden;transition:transform .8s cubic-bezier(.5,0,.3,1)}
.an-paper .q path{fill:#FFFDF8;stroke:var(--u-ink);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill .5s}
.an-paper .tl,.an-paper .tr{top:0;height:49%;transform-origin:50% 100%}
.an-paper .bl,.an-paper .br{top:49%;height:51%}
.an-paper.f1 .tl,.an-paper.f1 .tr{transform:scaleY(-1)}
.an-paper.f1 .tl path,.an-paper.f1 .tr path{fill:#F4EAD6}
.an-paper.f2 .an-half.l{transform:scaleX(-1)}
.an-paper.f2 .bl path{fill:#F4EAD6}.an-paper.f2 .tl path{fill:#EADDC2}
.an-paper .an-over{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.an-over .cr{stroke:#8D98A2;stroke-width:1.4;stroke-dasharray:4 4;fill:none;vector-effect:non-scaling-stroke}
.an-over .ed{fill:none;stroke:var(--u-ink);stroke-width:1.6;vector-effect:non-scaling-stroke}
.an-paper.f1:not(.f2) .an-over .s1{opacity:1;transition-delay:.75s}
.an-over .fitL{fill:none;stroke:#4A7A1E;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.an-over .ra{fill:#93B8F2;fill-opacity:.6}
.an-over text{font:800 11px var(--u-font);fill:#2F6B1A}
.an-over > *{opacity:0;transition:opacity .4s}
.an-paper.f2 .an-over .s2,.an-paper.f3 .an-over .s3{opacity:1;transition-delay:.85s}
.an-dots{display:inline-flex;gap:6px;margin-left:4px}
.an-dots i{width:9px;height:9px;border-radius:50%;background:var(--u-edge);transition:background .3s,transform .3s}
.an-dots i.on{background:var(--u-navy);transform:scale(1.15)}

.an-pick{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.an-cnt svg{max-width:400px}
.an-cmp svg{max-width:560px}
.an-chk{background:var(--u-navy);color:#fff;box-shadow:none}
.an-chk[disabled]{opacity:.45;cursor:default;transform:none}
.an-bins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.an-bins > div{border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--u-edge);padding:10px 12px;min-height:74px}
.an-bins .t{display:block;font-size:12.5px;font-weight:700;color:var(--u-soft);line-height:1.25}
.an-bins .v{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.an-bins .v i{font:800 15px/1 var(--u-font);font-style:normal;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--sg-blue-bg);color:var(--u-navy);animation:an-drop .5s cubic-bezier(.3,1.6,.5,1)}
.an-bins > div:nth-child(2) .v i{background:var(--sg-green-bg);color:var(--sg-green)}
@keyframes an-drop{0%{transform:translateY(-14px) scale(.6);opacity:0}100%{transform:none;opacity:1}}

.an-cnt .an-fg{fill:#FFFDF8;stroke:var(--u-ink);stroke-width:2.4;stroke-linejoin:round}
.an-cnt .an-ln{stroke:var(--u-ink);stroke-width:2.4;stroke-linecap:round}
.an-cnt .an-hitc{fill:transparent;cursor:pointer}
.an-cnt .an-lt{font-size:17px;transition:fill .3s}
.an-cnt .an-lt.on{fill:#0E2A47}
.an-cnt .an-ring{fill:none;stroke:#2F6FEB;stroke-width:2;opacity:0;transition:opacity .3s}
.an-cnt .an-ring.cur{opacity:1}
.an-cnt .an-op{transition:opacity .35s}
.an-cnt .an-sq{stroke-width:2;stroke-dasharray:5 4}
.an-keys{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.an-keys button{all:unset;cursor:pointer;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#fff;
  font:800 17px/1 var(--u-font);color:var(--u-navy);box-shadow:inset 0 0 0 1.5px var(--u-edge);transition:background .25s,color .25s,transform .25s}
.an-keys button:hover{transform:translateY(-2px)}
.an-keys button:focus-visible{outline:3px solid var(--sg-amber);outline-offset:2px}
.an-keys button.done{background:var(--sg-blue-bg);color:var(--u-navy);box-shadow:inset 0 0 0 1.5px var(--sg-blue-lt)}
.an-keys button.cur{background:var(--u-navy);color:#fff}
.an-tally{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.an-tally > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:center;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:var(--u-sh)}
.an-tally b{grid-row:span 2;font:800 30px/1 var(--u-font);color:var(--u-navy);min-width:24px;text-align:center}
.an-tally b.bump{animation:sg-yes .45s ease}
.an-tally span{font-size:12.5px;font-weight:700;color:var(--u-soft);line-height:1.2}
.an-tally i{font-style:normal;font-weight:800;font-size:14px;color:var(--u-ink);min-height:18px;letter-spacing:.04em}
.an-tally > div:nth-child(2) b{color:var(--sg-green)}

.an-exfig{margin:0 0 14px;display:flex;justify-content:center;padding:14px;border-radius:14px;background:var(--u-ground)}
.an-fig{width:100%;max-width:470px;height:auto;display:block}
.an-exfig.sm .an-fig{max-width:230px}
.an-exfig.xs{margin:0 0 12px;justify-content:flex-start;background:none;padding:0}
.an-exfig.xs .an-fig{max-width:300px}
.an-fig .an-fg{fill:#FFFDF8;stroke:var(--u-ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.an-fig .an-clk{fill:#fff;stroke:var(--u-ink);stroke-width:2.4}
.an-fig .an-tick{stroke:var(--u-ink);stroke-width:2}
.an-fig .an-num{font:700 14px var(--u-font);fill:var(--u-ink);text-anchor:middle}
.an-fig .an-hand,.an-fig .an-hand-m{stroke:var(--u-ink);stroke-width:5.5;stroke-linecap:round}
.an-fig .an-hand.an-hand-m{stroke-width:3.5}

.sg-card .mini .an-mini{width:120px;height:90px;overflow:visible}
.an-mini path{fill:none;stroke:#1F2933;stroke-width:4;stroke-linecap:round}
.an-mini .sq{stroke:#1F2933;stroke-width:2;stroke-dasharray:4 3}
.an-mini circle{fill:#1F2933}
.an-mini .arm{transform-origin:30px 72px;animation:an-mini 4.8s cubic-bezier(.5,0,.3,1) infinite}
@keyframes an-mini{0%,12%{transform:rotate(-35deg)}30%,50%{transform:rotate(-90deg)}68%,88%{transform:rotate(-135deg)}100%{transform:rotate(-35deg)}}

@media (max-width:600px){
  .an-s1 .an-arm,.an-cmp .an-arm{stroke-width:5.5}
  .an-s1 .an-lt,.an-cmp .an-lt{font-size:24px!important}
  .an-s1 .an-mk,.an-cmp .an-mk{stroke-width:2.4}
  .an-cmp .an-lt+.an-dot+.an-lt{font-size:20px!important}
  .an-fig .an-lt{font-size:19px!important}
  .an-exfig{padding:10px 6px}
}
@media (max-width:900px){
  .an-bins,.an-tally{grid-template-columns:1fr;gap:8px}
  .an-bins > div{min-height:0;display:flex;align-items:center;gap:10px;padding:8px 12px}
  .an-bins .t{flex:1}.an-bins .v{margin-top:0}
  .an-tally b{font-size:24px}
  .an-keys button{width:36px;height:36px}
}
@media (prefers-reduced-motion:reduce){
  .an-half,.an-paper .q,.an-sheet,.an-over > *{transition:none!important}
  .an-s1 .an-knob-ring,.an-mini .arm{animation:none}
  .an-mini .arm{transform:rotate(-90deg)}
  .an-bins .v i,.an-tally b.bump{animation:none}
}