/* loaders */
.ld-arc, .ld-trail, .ld-dual, .ld-dash, .ld-square, .ld-ringp, .ld-conic, .ld-ios, .ld-focus {
  width: 42px; height: 42px; border-radius: 50%;
}
.ld-arc {
  border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
.ld-trail {
  background: conic-gradient(from 0deg, transparent 0 62%, var(--accent));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: spin 0.85s linear infinite;
}
.ld-ios {
  border: 4px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
.ld-dual { position: relative; border: 2px solid var(--hair); }
.ld-dual i, .ld-dual b { position: absolute; border-radius: 50%; border: 2px solid transparent; }
.ld-dual i { inset: -5px; border-top-color: var(--accent); animation: spin 1.1s linear infinite; }
.ld-dual b { inset: 5px; border-bottom-color: var(--accent); animation: spin 1.7s linear infinite reverse; }
.ld-dash { border: 3px dashed var(--accent); animation: spin 1.4s linear infinite; }
.ld-square {
  border-radius: 5px;
  border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
.ld-orbit, .ld-clock, .ld-radar, .ld-rings, .ld-eclipse { width: 42px; height: 42px; position: relative; }
.ld-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--hair); }
.ld-orbit b {
  position: absolute; top: -3px; left: 50%; width: 8px; height: 8px;
  margin-left: -4px; border-radius: 50%; background: var(--accent);
  transform-origin: 4px 24px; animation: spin 1s linear infinite;
}
.ld-atom { width: 48px; height: 48px; position: relative; }
.ld-atom i, .ld-atom b {
  position: absolute; inset: 6px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}
.ld-atom i { animation: spin 1.2s linear infinite; transform: rotateX(66deg); }
.ld-atom b { animation: spin 1.6s linear infinite reverse; }
.ld-atom em { position: absolute; inset: 20px; border-radius: 50%; background: var(--accent); }
.ld-petals { width: 44px; height: 44px; position: relative; }
.ld-petals i {
  position: absolute; left: 50%; top: 2px; width: 5px; height: 12px;
  margin-left: -2.5px; border-radius: 6px; background: var(--accent);
  transform-origin: 2.5px 20px; animation: petal 1s ease-in-out infinite;
}
.ld-hour {
  width: 16px; height: 26px; border: 2px solid var(--accent);
  animation: flip 1.2s ease-in-out infinite;
}
.ld-hour i { display: block; margin: 3px; height: 8px; background: var(--accent); animation: sand 1.2s linear infinite; }
.ld-clock { border: 2px solid var(--hair); border-radius: 50%; }
.ld-clock i, .ld-clock b {
  position: absolute; left: 50%; top: 50%; width: 2px; background: var(--accent);
  transform-origin: bottom center; margin-left: -1px;
}
.ld-clock i { height: 10px; margin-top: -10px; animation: spin 3.6s linear infinite; }
.ld-clock b { height: 14px; margin-top: -14px; animation: spin 1.1s linear infinite; }
.ld-radar {
  border-radius: 50%; border: 1px solid var(--hair);
  background: conic-gradient(from 0deg, transparent, var(--accent-soft) 18%, transparent 42%);
  animation: spin 1.4s linear infinite;
}
.ld-rings i {
  position: absolute; border-radius: 50%; border: 1px solid var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
.ld-rings i:nth-child(1) { inset: 0; }
.ld-rings i:nth-child(2) { inset: 7px; animation-delay: .2s; }
.ld-rings i:nth-child(3) { inset: 14px; animation-delay: .4s; }
.ld-cube { width: 16px; height: 16px; background: var(--accent); animation: cube 1.1s ease-in-out infinite; }
.ld-eclipse {
  border-radius: 50%; background: var(--accent);
  box-shadow: inset -11px 0 0 0 var(--bg); animation: spin 1.2s linear infinite;
}
.ld-metro { display: flex; gap: 3px; align-items: center; }
.ld-metro i { width: 5px; height: 16px; background: var(--accent); animation: blink 1s ease-in-out infinite; }
.ld-metro i:nth-child(2) { animation-delay: .12s; }
.ld-metro i:nth-child(3) { animation-delay: .24s; }

.ld-dots, .ld-fade, .ld-wave, .ld-type, .ld-five, .ld-scale, .ld-snake { display: flex; gap: 6px; align-items: center; }
.ld-dots i, .ld-fade i, .ld-wave i, .ld-type i, .ld-five i, .ld-scale i, .ld-snake i, .ld-vdots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
.ld-dots i { animation: bounce .9s ease-in-out infinite; }
.ld-dots i:nth-child(2), .ld-fade i:nth-child(2), .ld-wave i:nth-child(2), .ld-scale i:nth-child(2) { animation-delay: .12s; }
.ld-dots i:nth-child(3), .ld-fade i:nth-child(3), .ld-wave i:nth-child(3), .ld-scale i:nth-child(3) { animation-delay: .24s; }
.ld-fade i { animation: blink 1s ease-in-out infinite; }
.ld-wave i { animation: wave .9s ease-in-out infinite; }
.ld-type i { animation: blink 1.1s ease-in-out infinite; }
.ld-five i { animation: wave .85s ease-in-out infinite; }
.ld-five i:nth-child(2) { animation-delay: .08s; }
.ld-five i:nth-child(3) { animation-delay: .16s; }
.ld-five i:nth-child(4) { animation-delay: .24s; }
.ld-five i:nth-child(5) { animation-delay: .32s; }
.ld-vdots { display: flex; flex-direction: column; gap: 5px; }
.ld-vdots i { animation: blink 1s infinite; }
.ld-vdots i:nth-child(2) { animation-delay: .15s; }
.ld-orbit3 { width: 42px; height: 42px; position: relative; }
.ld-orbit3 i {
  position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--accent); transform-origin: 3.5px 21px;
  animation: spin 1.1s linear infinite;
}
.ld-orbit3 i:nth-child(2) { animation-delay: -.36s; }
.ld-orbit3 i:nth-child(3) { animation-delay: -.72s; }
.ld-scale i { animation: pulse .9s ease-in-out infinite; }
.ld-plus { width: 22px; height: 22px; position: relative; animation: pulse 1.3s ease-in-out infinite; }
.ld-plus i, .ld-plus b { position: absolute; background: var(--accent); }
.ld-plus i { left: 10px; top: 2px; width: 2px; height: 18px; }
.ld-plus b { left: 2px; top: 10px; width: 18px; height: 2px; }
.ld-snake i { animation: blink .8s linear infinite; }
.ld-snake i:nth-child(2) { animation-delay: .2s; }
.ld-snake i:nth-child(3) { animation-delay: .4s; }
.ld-snake i:nth-child(4) { animation-delay: .6s; }
.ld-eq { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.ld-eq i { width: 4px; height: 100%; background: var(--accent); animation: eq .8s ease-in-out infinite; }
.ld-eq i:nth-child(2) { animation-delay: .1s; }
.ld-eq i:nth-child(3) { animation-delay: .2s; }
.ld-eq i:nth-child(4) { animation-delay: .15s; }
.ld-eq i:nth-child(5) { animation-delay: .05s; }
.ld-pulse {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-soft); display: grid; place-items: center;
  animation: pulse 1.5s ease-in-out infinite;
}
.ld-pulse i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }

.ld-track { width: 100%; height: 3px; background: var(--hair); overflow: hidden; }
.ld-track b { display: block; height: 100%; background: var(--accent); }
.ld-fill b { width: 42%; animation: fill 2.2s ease-in-out infinite; }
.ld-wander b { width: 34%; animation: wander 1.3s ease-in-out infinite; }
.ld-buffer { position: relative; }
.ld-buffer em { position: absolute; inset: 0 auto 0 0; width: 72%; background: var(--accent-soft); }
.ld-buffer b { width: 28%; position: relative; animation: wander 1.1s linear infinite; }
.ld-ringp, .ld-pie {
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--hair) 0);
  animation: read 3s linear infinite;
}
.ld-ringp {
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
.ld-pie { width: 36px; height: 36px; border-radius: 50%; }
.ld-gauge { width: 52px; height: 26px; overflow: hidden; }
.ld-gauge i {
  display: block; width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(from 180deg, var(--accent) 0 110deg, var(--hair) 110deg 180deg, transparent 180deg);
}
.ld-segs { display: flex; gap: 4px; width: 100%; }
.ld-segs i { flex: 1; height: 5px; background: var(--hair); animation: seg 2s ease-in-out infinite; }
.ld-segs i:nth-child(2) { animation-delay: .18s; }
.ld-segs i:nth-child(3) { animation-delay: .36s; }
.ld-segs i:nth-child(4) { animation-delay: .54s; }
.ld-vert { width: 5px; height: 42px; background: var(--hair); display: flex; align-items: flex-end; }
.ld-vert b { width: 100%; height: 40%; background: var(--accent); animation: vfill 1.8s ease-in-out infinite; }
.ld-files { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.ld-label { width: 100%; }
.ld-label em { display: block; font-size: 10px; color: var(--ink3); margin-bottom: 6px; font-style: normal; }
.ld-battery {
  width: 28px; height: 16px; border: 1px solid var(--accent); padding: 2px; position: relative;
}
.ld-battery::after {
  content: ""; position: absolute; right: -4px; top: 4px; width: 2px; height: 6px; background: var(--accent);
}
.ld-battery b { display: block; height: 100%; width: 58%; background: var(--accent); animation: fill 2s ease-in-out infinite; }
.ld-split { width: 100%; height: 3px; display: flex; background: var(--hair); }
.ld-split i { width: 46%; background: var(--accent); }
.ld-split b { width: 22%; background: var(--warn); }
.ld-ringnum { position: relative; width: 42px; height: 42px; }
.ld-ringnum .ld-ringp { width: 42px; height: 42px; }
.ld-ringnum em {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; color: var(--ink2); font-style: normal;
}
.ld-drop {
  width: 100%; height: 52px; border: 1px dashed var(--hair);
  display: grid; place-items: center;
}

.ld-lines, .ld-folio, .ld-people, .ld-table, .ld-tiles, .ld-form, .ld-video, .ld-chat, .ld-profile, .ld-article, .ld-thread { width: 100%; }
.ld-lines { display: flex; flex-direction: column; gap: 7px; }
.sk {
  display: block; border-radius: 2px;
  background: linear-gradient(90deg, var(--tile), var(--surface), var(--tile));
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
.ld-lines i { height: 7px; }
.ld-lines i:nth-child(1) { width: 88%; height: 9px; }
.ld-lines i:nth-child(2) { width: 64%; }
.ld-lines i:nth-child(3) { width: 76%; }
.ld-folio { display: flex; flex-direction: column; gap: 7px; }
.ld-folio .ph { height: 38px; }
.ld-people { display: flex; flex-direction: column; gap: 8px; }
.ld-people span { display: flex; gap: 8px; align-items: center; }
.ld-people i { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 16px; background: var(--tile); animation: pulse 1.4s ease-in-out infinite; }
.ld-people b { height: 7px; flex: 1; }
.ld-table { display: flex; flex-direction: column; gap: 6px; }
.ld-table i { height: 7px; width: 100%; }
.ld-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ld-tiles i { height: 26px; }
.ld-pulsebone i { background: var(--tile); animation: pulse 1.3s ease-in-out infinite; }
.ld-form { display: flex; flex-direction: column; gap: 6px; }
.ld-form i { height: 14px; }
.ld-form i:last-child { width: 42%; height: 16px; }
.ld-video { height: 48px; position: relative; }
.ld-video i { position: absolute; inset: 16px 40%; border-radius: 50%; background: var(--surface); }
.ld-chat { display: flex; flex-direction: column; gap: 6px; }
.ld-chat i { height: 14px; width: 70%; }
.ld-chat i:nth-child(2) { width: 54%; align-self: flex-end; }
.ld-profile { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: center; }
.ld-profile .ava { width: 28px; height: 28px; border-radius: 50%; }
.ld-article i { height: 6px; margin-top: 5px; }
.ld-article i:first-child { width: 70%; height: 9px; margin-top: 0; }
.ld-thread i { height: 8px; }

.ld-veil, .ld-nbar, .ld-splash, .ld-search, .ld-drawer {
  width: 100%; height: 72px; background: var(--mask); display: grid; place-items: center; position: relative;
}
.ld-nbar { background: var(--surface); }
.ld-nbar b { position: absolute; top: 0; left: 0; height: 2px; width: 40%; background: var(--accent); animation: nbar 1.4s ease-in-out infinite; }
.ld-btn, .ld-inline, .ld-toast, .ld-badge, .ld-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px;
}
.ld-btn {
  height: 34px; min-width: 88px; padding: 0 12px;
  background: var(--accent); color: var(--cta-ink);
}
.ld-btn i, .ld-inline i, .ld-toast i, .ld-badge i, .ld-search i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: currentColor;
  animation: spin .75s linear infinite;
}
.ld-inline { color: var(--ink2); }
.ld-toast { background: var(--surface); border: 1px solid var(--hair); padding: 6px 10px; color: var(--ink2); }
.ld-splash { flex-direction: column; gap: 10px; color: var(--ink2); font-size: 11px; letter-spacing: 0.2em; }
.ld-search { justify-content: flex-start; padding: 0 12px; color: var(--ink3); }
.ld-badge { position: relative; width: 36px; height: 36px; background: var(--surface); }
.ld-badge i { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; }
.ld-drawer { justify-items: end; }
.ld-drawer b { width: 42%; height: 100%; background: var(--surface); display: grid; place-items: center; }
.ld-tab { gap: 12px; color: var(--ink3); }
.ld-tab b { color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); padding-bottom: 2px; font-weight: 500; }

.ld-morph { width: 42px; height: 42px; position: relative; }
.ld-morph .ld-arc { position: absolute; inset: 0; width: auto; height: auto; }
.ld-morph .mark {
  display: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-deep);
  align-items: center; justify-content: center; font-size: 18px;
}
.ld-morph.is-done .ld-arc { display: none; }
.ld-morph.is-done .mark { display: flex; animation: pop 280ms ease; }
.ld-morph.is-err .mark { color: var(--warn); }
.ld-morph.is-warn .mark { color: var(--accent); }
.ld-dissolve { width: 100%; min-height: 64px; }
.ld-dissolve .real { display: none; font-size: 13px; color: var(--ink2); }
.ld-dissolve.is-shown .ld-lines { display: none; }
.ld-dissolve.is-shown .real { display: block; animation: rise 280ms ease; }
.ld-swallow {
  position: relative; overflow: hidden; height: 34px; width: 100%;
  background: var(--tile); color: var(--ink); font-size: 12px; display: grid; place-items: center;
}
.ld-swallow b { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); }
.ld-swallow span { position: relative; z-index: 1; }
.ld-swallow.is-run b { animation: swallow 1.5s ease forwards; }
.ld-swallow.is-run span { color: var(--cta-ink); }
.ld-stagger { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.ld-stagger i { display: block; height: 9px; background: var(--accent-soft); transform-origin: left; animation: stagger 1.7s ease infinite; }
.ld-stagger i:nth-child(2) { width: 78%; animation-delay: .08s; }
.ld-stagger i:nth-child(3) { width: 64%; animation-delay: .16s; }
.ld-pull { width: 26px; height: 28px; position: relative; }
.ld-pull i {
  position: absolute; left: 50%; top: 0; width: 2px; height: 14px; margin-left: -1px;
  background: var(--accent); transform-origin: bottom; animation: pull 1.2s ease-in-out infinite;
}
.ld-pull b {
  position: absolute; left: 50%; bottom: 0; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; border: 2px solid var(--hair); border-top-color: var(--accent);
  animation: spin .85s linear infinite, show 1.2s steps(1) infinite;
}
.ld-steps { display: flex; gap: 8px; }
.ld-steps i { width: 8px; height: 8px; border-radius: 50%; background: var(--hair); animation: step 2.2s ease-in-out infinite; }
.ld-steps i:nth-child(2) { animation-delay: .2s; }
.ld-steps i:nth-child(3) { animation-delay: .4s; }
.ld-stream { font-size: 13px; color: var(--ink2); }
.ld-stream i {
  display: inline-block; width: 7px; height: 13px; background: var(--accent);
  margin-left: 2px; animation: blink .8s steps(1) infinite; vertical-align: text-bottom;
}
.ld-swap { width: 100%; font-size: 12px; color: var(--ink2); min-height: 36px; }
.ld-swap .old { text-decoration: line-through; opacity: .45; }
.ld-swap.is-run .old { display: none; }
.ld-swap .neu { display: none; }
.ld-swap.is-run .neu { display: block; animation: rise 280ms ease; }

.ld-letters { display: flex; gap: 2px; font-size: 11px; letter-spacing: 0.1em; color: var(--accent); }
.ld-letters i { display: inline-block; animation: letter 1.2s ease-in-out infinite; font-style: normal; }
.ld-letters i:nth-child(2) { animation-delay: .08s; }
.ld-letters i:nth-child(3) { animation-delay: .16s; }
.ld-letters i:nth-child(4) { animation-delay: .24s; }
.ld-letters i:nth-child(5) { animation-delay: .32s; }
.ld-letters i:nth-child(6) { animation-delay: .4s; }
.ld-letters i:nth-child(7) { animation-delay: .48s; }
.ld-pct, .ld-count, .ld-timer, .ld-typewriter, .ld-think, .ld-ellipsis, .ld-status, .ld-gen {
  font-variant-numeric: tabular-nums; font-size: 14px; color: var(--accent);
}
.ld-cursor { font-size: 14px; color: var(--ink2); }
.ld-cursor i { display: inline-block; width: 7px; height: 14px; background: var(--accent); animation: blink .7s steps(1) infinite; vertical-align: text-bottom; }

.ld-ripple { width: 42px; height: 42px; position: relative; }
.ld-ripple i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent); animation: ripple 2s ease-out infinite; }
.ld-ripple i:nth-child(2) { animation-delay: .6s; }
.ld-ripple i:nth-child(3) { animation-delay: 1.2s; }
.ld-ripple b { position: absolute; inset: 16px; border-radius: 50%; background: var(--accent); }
.ld-sweep { width: 100%; height: 6px; overflow: hidden; background: var(--tile); }
.ld-sweep b { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: wander 1.2s linear infinite; }
.ld-conic {
  background: conic-gradient(from 0deg, transparent, var(--accent));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: spin 0.9s linear infinite;
}
.ld-blob { width: 34px; height: 34px; background: var(--accent); opacity: .75; animation: blob 2s ease-in-out infinite; }
.ld-aurora {
  width: 72px; height: 28px; border-radius: 20px; opacity: .8;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  filter: blur(6px); animation: wander 2.4s ease-in-out infinite;
}
.ld-scan { width: 100%; height: 42px; position: relative; overflow: hidden; background: var(--tile); }
.ld-scan b { position: absolute; left: 0; right: 0; height: 1px; background: var(--accent); animation: scan 1.6s linear infinite; }
.ld-focus { border: 1px solid var(--accent); animation: pulse 1.4s ease-in-out infinite; }

/* icon, pagination and overlay loading patterns */
.ld-icon-action {
  min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--surface); color: var(--ink2); font-size: 11px;
}
.ld-icon-action.is-primary { border-color: var(--accent); background: var(--accent); color: var(--cta-ink); }
.ld-icon-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ld-icon-action .icon-spin { animation: spin .8s linear infinite; }
.ld-icon-action .icon-pulse { animation: pulse 1.15s ease-in-out infinite; }
.ld-icon-action .done, .ld-icon-action.is-done .busy { display: none; }
.ld-icon-action.is-done .done { display: inline-flex; animation: pop .24s ease; }
.ld-icon-stack { position: relative; width: 40px; height: 40px; }
.ld-icon-stack .ld-icon-action { position: absolute; inset: 0; padding: 0; }
.ld-icon-stack .mini-busy {
  position: absolute; right: -3px; top: -3px; width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--accent);
}
.ld-icon-stack .mini-busy::after {
  content: ""; position: absolute; inset: 2px; border-radius: 50%;
  border: 1px solid transparent; border-top-color: var(--cta-ink); animation: spin .7s linear infinite;
}
.ld-icon-upload { display: flex; align-items: center; gap: 9px; color: var(--ink2); font-size: 11px; }
.ld-icon-upload .file {
  width: 30px; height: 36px; border: 1px solid var(--hair); border-radius: 5px;
  display: grid; place-items: center; background: var(--surface);
}
.ld-icon-upload svg { width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 1.8; }

.ld-pages { display: inline-flex; align-items: center; gap: 4px; }
.ld-pages i, .ld-pages b {
  width: 26px; height: 26px; border: 1px solid var(--hair); border-radius: 7px;
  display: grid; place-items: center; background: var(--surface); color: var(--ink3);
  font-size: 10px; font-style: normal; font-weight: 500;
}
.ld-pages b { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.ld-pages .page-busy::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--hair); border-top-color: var(--accent); animation: spin .7s linear infinite;
}
.ld-page-more { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.ld-page-more .ld-track { width: 76%; }
.ld-page-more span { color: var(--ink3); font-size: 10px; }
.ld-page-skeleton { width: 100%; display: grid; gap: 6px; }
.ld-page-skeleton i { display: block; height: 7px; border-radius: 2px; }
.ld-page-skeleton i:nth-child(2) { width: 82%; }
.ld-cursor-page {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px;
  border: 1px solid var(--hair); border-radius: 8px; background: var(--surface);
  color: var(--ink2); font-size: 10px;
}
.ld-cursor-page i {
  width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--hair);
  border-top-color: var(--accent); animation: spin .7s linear infinite;
}

.ld-pop-stage {
  position: relative; width: 138px; height: 78px; overflow: hidden;
  border: 1px solid var(--hair); border-radius: 9px; background: var(--bg);
}
.ld-pop-stage .scrim {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}
.ld-mini-modal {
  width: 88px; padding: 10px; border-radius: 7px; background: var(--surface);
  box-shadow: var(--shadow-md); text-align: center; color: var(--ink2); font-size: 8px;
}
.ld-mini-modal .ld-inline { margin-top: 7px; font-size: 8px; gap: 5px; }
.ld-mini-modal .ld-inline i { width: 9px; height: 9px; }
.ld-pop-stage .scrim, .ld-pop-stage .drawer-panel, .ld-pop-stage .popover-panel, .ld-pop-stage .toast-panel {
  opacity: 0; pointer-events: none;
}
.ld-pop-stage.is-open .scrim, .ld-pop-stage.is-open .drawer-panel,
.ld-pop-stage.is-open .popover-panel, .ld-pop-stage.is-open .toast-panel {
  opacity: 1; pointer-events: auto; animation: pop-in .24s ease both;
}
.ld-pop-stage .drawer-panel {
  position: absolute; inset: 0 0 0 auto; width: 58%; padding: 10px;
  display: grid; align-content: center; justify-items: center; gap: 7px;
  background: var(--surface); border-left: 1px solid var(--hair);
  color: var(--ink3); font-size: 8px;
}
.ld-pop-stage.is-open .drawer-panel { animation-name: drawer-in; }
.ld-pop-stage .popover-anchor {
  position: absolute; left: 18px; top: 28px; width: 22px; height: 22px;
  border-radius: 6px; background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 11px;
}
.ld-pop-stage .popover-panel {
  position: absolute; left: 47px; top: 17px; width: 78px; padding: 9px;
  border: 1px solid var(--hair); border-radius: 7px; background: var(--surface);
  box-shadow: var(--shadow-sm); color: var(--ink3); font-size: 8px;
}
.ld-pop-stage .toast-panel {
  position: absolute; left: 10px; right: 10px; bottom: 9px; padding: 8px 9px;
  display: flex; align-items: center; gap: 7px; border: 1px solid var(--hair);
  border-radius: 7px; background: var(--surface); box-shadow: var(--shadow-sm);
  color: var(--ink2); font-size: 8px;
}
.ld-pop-stage .toast-panel .ld-inline i { width: 9px; height: 9px; }
.ld-pop-stage .confirm-actions { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
.ld-pop-stage .confirm-actions i { width: 24px; height: 8px; border-radius: 3px; background: var(--tile); }
.ld-pop-stage .confirm-actions i:last-child { background: var(--accent); }
@keyframes pop-in { from { opacity: 0; transform: translateY(5px) scale(.97); } }
@keyframes drawer-in { from { opacity: 0; transform: translateX(100%); } }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
@keyframes blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px) scale(1.12); } }
@keyframes eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes pulse { 0%, 100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }
@keyframes fill { 0% { width: 8%; } 50% { width: 78%; } 100% { width: 8%; } }
@keyframes wander { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@keyframes read { 0% { --p: 8; } 100% { --p: 96; } }
@keyframes seg { 0%, 25% { background: var(--hair); } 40%, 100% { background: var(--accent); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes pop { from { transform: scale(.84); opacity: 0; } }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } }
@keyframes swallow { to { width: 100%; } }
@keyframes stagger { 0%, 18% { transform: scaleX(.2); opacity: .3; } 40%, 70% { transform: scaleX(1); opacity: 1; } 100% { opacity: .35; } }
@keyframes pull { 0%, 40% { transform: scaleY(.3); opacity: 1; } 55% { transform: scaleY(1); opacity: 0; } 100% { opacity: 0; } }
@keyframes show { 0%, 45% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes ripple { 0% { transform: scale(.2); opacity: .7; } 100% { transform: scale(1.15); opacity: 0; } }
@keyframes petal { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes flip { 0%, 45% { transform: rotate(0); } 55%, 100% { transform: rotate(180deg); } }
@keyframes sand { 0% { height: 10px; } 50% { height: 2px; } 100% { height: 10px; } }
@keyframes vfill { 0%, 100% { height: 22%; } 50% { height: 86%; } }
@keyframes nbar { 0% { transform: translateX(-80%); } 100% { transform: translateX(280%); } }
@keyframes step { 0%, 20% { background: var(--hair); } 35%, 100% { background: var(--accent); } }
@keyframes letter { 0%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-3px); opacity: 1; } }
@keyframes blob { 0%, 100% { border-radius: 42% 58% 60% 40%; transform: scale(.86); } 50% { border-radius: 60% 40% 42% 58%; transform: scale(1); } }
@keyframes cube { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(.72); } }
@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }