/* /ai-system: the four scenes after the system map (scripts/aisystem/scenes.mjs renders them, js/ai-system.js animates
   them). Every selector sits under .ais, every colour is a site token (css/site.css) or mixed from tokens. The markup is
   the end state; the script adds the in-between states (.ais-wait, .ais-pre) only while something plays, so without it,
   and under reduced motion, everything simply shows. */
.ais{
  --ais-blue-soft:color-mix(in srgb,var(--blue) 52%,var(--paper));
  --ais-terra-soft:color-mix(in srgb,var(--terra) 72%,var(--paper));
  --ais-sun-soft:color-mix(in srgb,var(--sun) 80%,var(--paper));
  --ais-terra-ink:color-mix(in srgb,var(--terra) 70%,var(--ink));
  --ais-lime-ink:color-mix(in srgb,var(--lime) 45%,var(--ink));
  --ais-lime-tint:color-mix(in srgb,var(--lime) 28%,var(--paper));
  --ais-glass:color-mix(in srgb,var(--chalk) 6%,transparent);
  --ais-shadow:0 34px 70px -40px color-mix(in srgb,var(--ink) 65%,transparent);
  --ais-spring:cubic-bezier(.2,.9,.3,1.25);
  padding-top:clamp(84px,11vh,128px);padding-bottom:clamp(84px,11vh,128px)
}
.ais [data-tone="sun"]{--c:var(--sun);--t:var(--sun-tint);--ci:color-mix(in srgb,var(--sun) 55%,var(--ink))}
.ais [data-tone="blue"]{--c:var(--blue);--t:var(--blue-tint);--ci:var(--blue-ink)}
.ais [data-tone="terra"]{--c:var(--terra);--t:var(--terra-tint);--ci:var(--ais-terra-ink)}
.ais [data-tone="lime"]{--c:var(--ais-lime-ink);--t:var(--ais-lime-tint);--ci:var(--ais-lime-ink)}
.ais [data-tone="soft"]{--c:var(--ais-blue-soft)}
.ais [data-tone="ink"]{--c:var(--ink)}
.ais.cream>.wrap{position:relative;z-index:1}
.ais p{max-width:none}

/* ---------- the controls: one pill, the site's mono; hidden until the script wires the sheet ---------- */
.ais .ais-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-l);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:11.5px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.ais .ais-btn:hover{border-color:var(--ink)}
.ais .ais-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.ais.dark .ais-btn,.ais .ais-cbox .ais-btn{border-color:var(--line-d);background:var(--ais-glass);color:var(--chalk)}
.ais.dark .ais-btn:hover,.ais .ais-cbox .ais-btn:hover{border-color:var(--chalk)}
.ais.dark .ais-btn:focus-visible,.ais .ais-cbox .ais-btn:focus-visible{outline-color:var(--sun)}
.ais .ais-btn .ais-ic{width:13px;height:13px;flex:none}
.ais .ais-ip,.ais .ais-ia{fill:currentColor}
.ais .ais-ir{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ais .ais-btn.ais-off .ais-ia,.ais .ais-btn:not(.ais-off) .ais-ia+.ais-ip{display:none}
.ais:not([data-wired]) .ais-ctl{visibility:hidden}

/* ---------- #call: the call on a dark card, the buckets beside it ---------- */
.ais .ais-call{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(16px,2.2vw,28px);align-items:stretch}
.ais .ais-cbox{position:relative;z-index:1;min-width:0;padding:clamp(18px,2.2vw,26px);border-radius:28px;background:var(--dark);color:var(--chalk);box-shadow:var(--ais-shadow)}
.ais .ais-ctop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-bottom:16px}
.ais .ais-rec{display:flex;align-items:center;gap:9px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ais-terra-soft)}
.ais .ais-rec i{width:8px;height:8px;border-radius:50%;background:var(--ais-terra-soft);flex:none}
.ais .ais-cbox.ais-play .ais-rec i{animation:ais-blink 1.4s ease-in-out infinite}
@keyframes ais-blink{50%{opacity:.25}}
.ais .ais-wave{display:flex;align-items:center;gap:3px;height:64px;margin:0 0 18px}
.ais .ais-wave i{flex:1 1 0;min-width:0;height:var(--h);border-radius:2px;background:var(--ais-blue-soft);opacity:.85;transition:height .12s linear}
.ais .ais-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.ais .ais-ln{font-size:15.5px;line-height:1.45;color:var(--chalk);transition:opacity .5s var(--ease),translate .5s var(--ease)}
.ais .ais-ln b{display:block;margin-bottom:2px;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ais-blue-soft)}
.ais .ais-ln mark{padding:0 3px;border-radius:4px;background:color-mix(in srgb,var(--sun) 18%,transparent);color:var(--sun);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ais .ais-ln.ais-wait{opacity:0;translate:0 8px}
.ais .ais-bins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:12px;min-width:0}
.ais .ais-bin{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:156px;padding:14px;border-radius:22px;background:var(--paper);border:1px solid var(--line-l)}
.ais .ais-bh{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ais .ais-bh i{width:12px;height:12px;flex:none;background:var(--c);-webkit-mask:var(--panot) center/contain no-repeat;mask:var(--panot) center/contain no-repeat}
.ais .ais-bin ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ais .ais-chip{position:relative;padding:9px 11px 10px 14px;border-radius:12px;background:var(--t);color:var(--ink);font-size:14px;line-height:1.35;overflow-wrap:anywhere;transition:opacity .45s var(--ease),transform .9s var(--ais-spring),box-shadow .6s}
.ais .ais-chip::before{content:"";position:absolute;left:6px;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--c)}
.ais .ais-chip small{display:block;margin-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-2)}
.ais .ais-chip.ais-wait{opacity:0}
.ais .ais-chip.ais-fly{z-index:3;box-shadow:0 18px 34px -18px color-mix(in srgb,var(--ink) 70%,transparent)}
.ais .ais-nt,.ais .ais-nt *{transition:none!important}
.ais .ais-note{margin-top:28px}

/* ---------- #scenario: the track, the open step, and who does what ---------- */
.ais .ais-trackw{position:relative}
.ais .ais-track{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.ais .ais-track::before{content:"";position:absolute;left:5%;right:5%;top:38px;height:2px;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px);opacity:.22}
.ais .ais-st{min-width:0;display:flex}
.ais .ais-stb{all:unset;box-sizing:border-box;cursor:pointer;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 2px 8px;border-radius:22px;text-align:center}
.ais .ais-stb:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ais .ais-b{position:relative;z-index:2;width:68px;height:68px;flex:none;display:grid;place-items:center;border-radius:20px;background:var(--paper);border:1px solid var(--line-l);color:var(--ink);font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:transform .45s var(--ais-spring),background .35s,color .35s,border-color .35s,box-shadow .35s}
.ais .ais-bi{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ais .ais-st[data-kind="human"] .ais-b{border-radius:50%}
.ais .ais-st[data-kind="skeptic"] .ais-b{border-color:var(--terra);color:var(--terra)}
.ais .ais-stb:hover .ais-b{border-color:var(--ink)}
.ais .ais-st.done .ais-b{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.ais .ais-st.on .ais-b{background:var(--ink);border-color:var(--ink);color:var(--sun);transform:scale(1.12) rotate(-4deg);box-shadow:0 14px 30px -12px color-mix(in srgb,var(--ink) 55%,transparent)}
.ais .ais-st.on[data-kind="skeptic"] .ais-b{background:var(--terra);border-color:var(--terra);color:var(--paper)}
.ais .ais-t{font-weight:600;font-size:14.5px;line-height:1.2;overflow-wrap:break-word;hyphens:manual}
.ais .ais-wl{font-family:var(--mono);font-size:10.5px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);overflow-wrap:break-word}
.ais .ais-pk{position:absolute;left:0;top:29px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 6px color-mix(in srgb,var(--sun) 25%,transparent),0 0 24px color-mix(in srgb,var(--sun) 80%,transparent);z-index:1;pointer-events:none;transition:transform .9s cubic-bezier(.6,0,.3,1)}
.ais:not([data-wired]) .ais-pk{display:none}
.ais .ais-detail{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px 26px;margin-top:30px;padding:24px clamp(18px,2.4vw,28px);border-radius:26px;background:var(--ground);border:1px solid var(--line-l)}
.ais .ais-sds{display:grid;gap:20px;min-width:0}
.ais[data-wired] .ais-sds{gap:0}
.ais[data-wired] .ais-sd{grid-area:1/1;visibility:hidden;align-content:start}
.ais[data-wired] .ais-sd.on{visibility:visible}
.ais .ais-sd{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 24px;min-width:0}
.ais .ais-num{margin:0;min-width:1.25em;font-family:var(--display);font-weight:800;font-size:clamp(48px,5vw,64px);line-height:.8;letter-spacing:-.05em;color:var(--blue);font-variant-numeric:tabular-nums}
.ais .ais-sd[data-kind="skeptic"] .ais-num{color:var(--terra)}
.ais .ais-sdt{margin:0;min-width:0}
.ais .ais-sdt b{display:block;margin-bottom:4px;font-family:var(--display);font-weight:800;font-size:clamp(19px,1.7vw,22px);line-height:1.15;letter-spacing:-.02em}
.ais .ais-sdt span{display:block;font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.ais.ais-anim .ais-sd.on .ais-sdt{animation:ais-in .5s var(--ease)}
@keyframes ais-in{from{opacity:0;translate:0 6px}}
.ais .ais-chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:20px}
.ais .ais-cs{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;background:var(--ground);border:1px solid var(--line-l)}
.ais .ais-cs p{margin:0;min-width:0}
.ais .ais-cs b{display:block;font-size:15px;line-height:1.3}
.ais .ais-cs span:not(.ais-ci){display:block;font-size:13px;line-height:1.4;color:var(--ink-2)}
.ais .ais-ci{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--blue-tint);color:var(--blue)}
.ais .ais-ci .ais-ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ais .ais-cs[data-kind="skeptic"] .ais-ci{background:var(--terra-tint);color:var(--terra)}
.ais .ais-cs[data-kind="human"] .ais-ci{background:var(--ais-lime-tint);color:var(--ais-lime-ink)}
.ais .ais-ca{align-self:center;font-family:var(--mono);color:var(--ink-2)}

/* ---------- #day: the dial and the list of the day ---------- */
.ais .ais-clock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.ais .ais-dialw{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.ais .ais-dial{display:block;width:100%;max-width:500px;height:auto;overflow:visible}
.ais .ais-dface{fill:var(--dark-2);stroke:var(--line-d);stroke-width:1}
.ais .ais-night{fill:color-mix(in srgb,var(--blue) 15%,transparent)}
.ais .ais-dring{fill:none;stroke:var(--ais-blue-soft);stroke-opacity:.3;stroke-dasharray:2 6}
.ais .ais-tk{stroke:color-mix(in srgb,var(--chalk) 35%,transparent);stroke-width:1}
.ais .ais-tkm{stroke-width:2}
.ais .ais-hl{fill:var(--chalk-2);font-family:var(--mono);font-size:14px}
.ais .ais-eg{fill:var(--ais-sun-soft);fill-opacity:.15;transition:fill-opacity .4s}
.ais .ais-ec{fill:var(--ais-sun-soft);stroke:var(--dark);stroke-width:3;transform-box:fill-box;transform-origin:center;transition:transform .35s var(--ais-spring)}
.ais .ais-ed.on .ais-ec{transform:scale(1.45)}
.ais .ais-ed.on .ais-eg{fill-opacity:.4}
.ais .ais-hand line{stroke:var(--chalk);stroke-width:3;stroke-linecap:round}
.ais .ais-hand circle{fill:var(--chalk)}
.ais .ais-hub{fill:var(--blue)}
.ais .ais-ct{fill:var(--paper);font-family:var(--display);font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.ais .ais-nl{fill:var(--chalk-2);font-family:var(--mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;transition:opacity .5s}
.ais .ais-dial.ais-sunlit .ais-nl{opacity:0}
.ais .ais-ev{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;min-width:0}
.ais .ais-e{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:8px 14px;border-radius:14px;border:1px solid transparent;transition:background .4s,border-color .4s,translate .4s var(--ease)}
.ais .ais-et{font-family:var(--mono);font-weight:500;font-size:14.5px;line-height:1.5;color:var(--sun);font-variant-numeric:tabular-nums}
.ais .ais-e p{margin:0;min-width:0;font-size:15px;line-height:1.4;color:var(--chalk);transition:color .4s}
.ais .ais-e small{display:block;margin-bottom:2px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ais-blue-soft)}
/* once the clock has run, the moment it stands on is lit and the rest step back */
.ais.ais-ticked .ais-e:not(.on) p{color:var(--chalk-2)}
.ais .ais-e.on{background:var(--dark-2);border-color:var(--line-d);translate:6px 0}

/* ---------- #dashboard: a window with six tiles and the agents' inbox ---------- */
.ais .ais-dash{overflow:hidden;border-radius:28px;background:var(--paper);border:1px solid var(--line-l);box-shadow:0 40px 80px -42px color-mix(in srgb,var(--ink) 40%,transparent)}
.ais .ais-dbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 16px;border-bottom:1px solid var(--line-l);background:var(--ground-2)}
.ais .ais-dbar>i{width:11px;height:11px;border-radius:50%;background:var(--line-l);flex:none}
.ais .ais-dlogo{display:block;height:20px;width:auto;margin-left:8px}
.ais .ais-dwhen{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.ais .ais-tag{margin-left:auto;padding:4px 9px;border-radius:999px;border:1px solid currentColor;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ais-terra-ink);white-space:nowrap}
.ais .ais-dgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.ais .ais-tiles{list-style:none;margin:0;padding:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-content:stretch;min-width:0}
.ais .ais-tile{min-width:0;padding:14px;border-radius:16px;background:var(--paper);border:1px solid var(--line-l);display:flex;flex-direction:column}
.ais .ais-th{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;margin:0;font-size:13px;line-height:1.3;font-weight:500;color:var(--ink-2)}
.ais .ais-th span{min-width:0;overflow-wrap:anywhere}
.ais .ais-th em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--blue-ink);white-space:nowrap}
.ais .ais-spark{display:block;width:100%;height:96px;margin-top:8px;overflow:visible}
.ais .ais-ar{fill:var(--c);opacity:.14;transition:opacity 1s var(--ease) .6s}
.ais .ais-l2{fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.8s ease}
.ais .ais-bars{display:flex;align-items:flex-end;gap:4px;height:96px;margin-top:8px}
/* the charts fill their tile and sit on one baseline per row, however the tile names wrap */
.ais .ais-spark,.ais .ais-bars{flex:1 1 96px;height:auto;min-height:96px;max-height:160px;margin-top:auto}
.ais .ais-bars i{flex:1 1 0;min-width:0;height:var(--h);border-radius:4px 4px 0 0;background:var(--c);transition:height 1.2s var(--ease) calc(var(--k,0) * 45ms)}
.ais .ais-pre .ais-l2{stroke-dashoffset:1}
.ais [data-tone="ink"] .ais-ar{opacity:.07}
.ais .ais-pre .ais-ar{opacity:0}
.ais .ais-pre .ais-bars i{height:4%}
.ais .ais-ins{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;border-left:1px solid var(--line-l);background:var(--ground)}
.ais .ais-ih{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ais .ais-mk{width:12px;height:12px;flex:none;background:var(--blue);-webkit-mask:var(--panot) center/contain no-repeat;mask:var(--panot) center/contain no-repeat}
.ais .ais-msgs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ais .ais-msg{padding:11px 13px;border-radius:14px 14px 14px 4px;background:var(--paper);border:1px solid var(--line-l);font-size:14px;line-height:1.45;transition:opacity .5s var(--ease),translate .5s var(--ease)}
.ais .ais-msg>b{display:block;margin-bottom:3px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink)}
.ais .ais-msg>span{display:block}
.ais .ais-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.ais .ais-act span{padding:4px 9px;border-radius:999px;background:var(--ink);color:var(--chalk);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em}
.ais .ais-act span+span{background:transparent;color:var(--ink);border:1px solid var(--line-l)}
.ais .ais-msg.ais-wait{opacity:0;translate:0 10px}
.ais .ais-ifoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-top:auto}
.ais .ais-ex{margin:0;font-family:var(--mono);font-size:10.5px;line-height:1.45;letter-spacing:.05em;color:var(--ink-2)}

/* ---------- motion holds still: off screen, the page paused, reduced motion ---------- */
html.stilled .ais *,html.stilled .ais *::before,html.stilled .ais *::after{animation-play-state:paused}
html.stilled .ais .ais-ctl{opacity:.45;cursor:default}
@media (prefers-reduced-motion:reduce){
  .ais *,.ais *::before,.ais *::after{animation:none!important;transition:none!important}
  .ais .ais-ctl,.ais .ais-pk{display:none}
  .ais .ais-wait{opacity:1;translate:none}
  .ais .ais-pre .ais-l2{stroke-dashoffset:0}
  .ais .ais-pre .ais-ar{opacity:.14}
  .ais .ais-pre .ais-bars i{height:var(--h)}
  .ais .ais-chip{transform:none!important}
  .ais .ais-st.on .ais-b{transform:none}
  .ais .ais-e.on{translate:none}
}

/* ---------- forced colours: the system palette, with the shapes that carry meaning kept visible ---------- */
@media (forced-colors:active){
  .ais .ais-cbox,.ais .ais-bin,.ais .ais-chip,.ais .ais-detail,.ais .ais-cs,.ais .ais-dash,.ais .ais-tile,.ais .ais-msg,.ais .ais-btn,.ais .ais-b{border:1px solid CanvasText}
  .ais .ais-wave i,.ais .ais-bars i,.ais .ais-chip::before,.ais .ais-rec i,.ais .ais-pk{forced-color-adjust:none;background:CanvasText}
  .ais .ais-bh i,.ais .ais-mk{forced-color-adjust:none;background:CanvasText}
  .ais .ais-st.on .ais-b{outline:3px solid Highlight;outline-offset:2px}
  .ais .ais-stb:focus-visible,.ais .ais-btn:focus-visible{outline:2px solid Highlight}
  .ais .ais-e{border-color:Canvas}
  .ais .ais-e.on{border-color:Highlight}
  .ais .ais-ln mark{forced-color-adjust:none;background:Mark;color:MarkText}
  .ais .ais-dial *{forced-color-adjust:none}
  .ais .ais-dface,.ais .ais-hub{fill:Canvas;stroke:CanvasText}
  .ais .ais-night{fill:none}
  .ais .ais-tk,.ais .ais-dring,.ais .ais-hand line{stroke:CanvasText}
  .ais .ais-hl,.ais .ais-ct,.ais .ais-nl,.ais .ais-hand circle{fill:CanvasText}
  .ais .ais-eg{fill:none}
  .ais .ais-ec{fill:Highlight;stroke:Canvas}
  .ais .ais-spark *{forced-color-adjust:none}
  .ais .ais-l2{stroke:CanvasText}
  .ais .ais-ar{fill:none}
}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .ais .ais-track{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px}
  .ais .ais-track::before,.ais .ais-pk{display:none}
}
@media (max-width:900px){
  .ais .ais-call,.ais .ais-clock{grid-template-columns:1fr}
  .ais .ais-clock{gap:28px}
  .ais .ais-dial{max-width:420px}
  .ais .ais-dgrid{grid-template-columns:1fr}
  .ais .ais-ins{border-left:0;border-top:1px solid var(--line-l)}
  .ais .ais-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ais .ais-ca{display:none}
}
@media (max-width:640px){
  .ais .ais-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ais .ais-stb{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;row-gap:1px;align-items:center;padding:6px 10px 6px 6px;border-radius:16px;text-align:left;background:var(--ground);border:1px solid var(--line-l)}
  .ais .ais-st.on .ais-stb{border-color:var(--ink)}
  .ais .ais-b{width:44px;height:44px;border-radius:13px;font-size:17px}
  .ais .ais-bi{width:20px;height:20px}
  .ais .ais-st.on .ais-b{transform:scale(1.04) rotate(-4deg)}
  .ais .ais-t{display:block;font-size:14px}
  .ais .ais-wl{display:block;font-size:9.5px;letter-spacing:.06em}
  .ais .ais-stb>.ais-t,.ais .ais-stb>.ais-wl{grid-column:2}
  .ais .ais-stb>.ais-b{grid-row:1/span 2}
  .ais .ais-stb>.ais-t{align-self:end}
  .ais .ais-stb>.ais-wl{align-self:start}
  .ais .ais-detail{grid-template-columns:1fr;justify-items:start;padding:20px 18px}
  .ais .ais-sd{grid-template-columns:1fr;gap:12px}
  .ais .ais-num{font-size:44px}
  .ais .ais-sdt span{font-size:16px}
  .ais .ais-e{grid-template-columns:46px minmax(0,1fr);gap:10px;padding:7px 10px}
  .ais .ais-e.on{translate:3px 0}
  .ais .ais-dial{max-width:340px}
  .ais .ais-hl{font-size:20px}
  .ais .ais-ct{font-size:26px}
  .ais .ais-nl{font-size:13px}
  .ais .ais-tiles{padding:12px;gap:10px}
  .ais .ais-tile{padding:12px}
  .ais .ais-spark,.ais .ais-bars{flex-basis:72px;min-height:72px}
  .ais .ais-tag{margin-left:0}
}
@media (max-width:520px){
  .ais .ais-cbox{border-radius:22px;padding:16px}
  .ais .ais-wave{gap:2px;height:52px}
  .ais .ais-wave i:nth-child(2n){display:none}
  .ais .ais-ln{font-size:15px}
  .ais .ais-bins{grid-template-columns:1fr;grid-auto-rows:auto}
  .ais .ais-bin{min-height:0}
  .ais .ais-cs{flex-basis:100%}
}
@media (max-width:400px){
  .ais .ais-t{font-size:13px}
  .ais .ais-dbar{padding:10px 12px}
  .ais .ais-tiles{padding:10px;gap:8px}
  .ais .ais-tile{padding:10px}
  .ais .ais-stb{padding:5px 8px 5px 5px;column-gap:8px}
  .ais .ais-b{width:40px;height:40px;font-size:16px}
}
@media (max-width:340px){
  .ais .ais-track,.ais .ais-tiles{grid-template-columns:1fr}
}
.ais .ais-stb:disabled{cursor:default}