.al { --al-ok:#12A97A; --al-ok-ink:#0B8A63; --al-stop:#D97706; --al-yes:#3D6BFF; --al-no:#7C5CFF;
  position:relative; isolation:isolate; overflow:hidden; margin-bottom:8px; border:1px solid var(--line); border-radius:22px; background:var(--surface);
  box-shadow:0 1px 2px rgba(19,28,59,.04),0 34px 80px -46px rgba(19,28,59,.38); container-type:inline-size; }
.al::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(620px 260px at 50% 22%,rgba(61,107,255,.08),transparent 70%),
    linear-gradient(rgba(61,107,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(61,107,255,.04) 1px,transparent 1px);
  background-size:auto,32px 32px,32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 30%,transparent 88%); mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 30%,transparent 88%); }

.al-head { padding:26px 28px 4px; }
.al-kicker { display:inline-flex; align-items:center; gap:10px; margin:0; font:600 11.5px/1.5 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
html[lang="ar"] .al-kicker,html[lang="hi"] .al-kicker { letter-spacing:0; font-family:inherit; font-size:13px; text-transform:none; }
.al-kicker i { width:8px; height:8px; border-radius:50%; background:var(--al-ok); animation:alPing 2.2s ease-out infinite; }
@keyframes alPing { 0% { box-shadow:0 0 0 0 rgba(18,169,122,.5); } 70%,100% { box-shadow:0 0 0 10px rgba(18,169,122,0); } }
.al h2 { margin:8px 0 8px; font-size:clamp(22px,2.6cqi,30px); line-height:1.15; font-weight:650; letter-spacing:-.025em; color:var(--ink); }
.al-lead { margin:0; max-width:66ch; font-size:15px; line-height:1.65; color:var(--ink-2); }

.al-pipe { position:relative; margin:18px 20px 0; padding:58px 6px 14px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,var(--surface),var(--surface-alt)); }
.al-track { position:absolute; left:10%; right:10%; top:calc(58px + 29px); height:3px; margin-top:-1.5px; border-radius:3px; background:var(--line); overflow:hidden; }
.al-track i { position:absolute; inset:0; background:linear-gradient(90deg,var(--al-yes),var(--al-ok)); transform-origin:left; transform:scaleX(0); }
[dir="rtl"] .al-track i { transform-origin:right; background:linear-gradient(270deg,var(--al-yes),var(--al-ok)); }
.al-nodes { position:relative; display:flex; list-style:none; margin:0; padding:0; }
.al-node { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 6px; transition:opacity .3s ease; }
.al-dot { position:relative; display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--surface); border:2px solid var(--line-2); color:var(--ink-3); box-shadow:0 10px 24px -16px rgba(19,28,59,.5); transition:border-color .25s, background .25s, color .25s, box-shadow .3s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.al-dot svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.al-badge { position:absolute; right:-4px; top:-4px; width:20px; height:20px; border-radius:50%; border:2px solid var(--surface); opacity:0; transform:scale(.4); transition:opacity .2s, transform .35s cubic-bezier(.34,1.56,.64,1); background-position:center; background-repeat:no-repeat; background-size:11px; }
[dir="rtl"] .al-badge { right:auto; left:-4px; }
.al-name { margin-top:12px; font-size:14px; font-weight:650; line-height:1.3; color:var(--ink); }
.al-desc { margin-top:4px; max-width:22ch; font-size:12px; line-height:1.45; color:var(--ink-3); }
.al-node.is-active .al-dot { border-color:var(--accent); color:var(--accent); transform:scale(1.1); box-shadow:0 0 0 6px rgba(61,107,255,.14),0 14px 30px -14px rgba(61,107,255,.7); }
.al-node.is-ok .al-dot { border-color:var(--al-ok); color:var(--al-ok); background:rgba(18,169,122,.08); }
.al-node.is-ok .al-badge { opacity:1; transform:none; background-color:var(--al-ok); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.al-node.is-fail .al-dot { border-color:var(--al-stop); color:var(--al-stop); background:rgba(217,119,6,.08); animation:alShake .4s; }
.al-node.is-fail .al-badge { opacity:1; transform:none; background-color:var(--al-stop); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 3.5l5 5M8.5 3.5l-5 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.al-node.is-skip { opacity:.38; }
@keyframes alShake { 25%,75% { translate:-4px 0; } 50% { translate:4px 0; } }
.al-token { position:absolute; left:0; top:0; z-index:3; pointer-events:none; transition:opacity .3s ease; }
.al-token>* { position:absolute; }
.al-token b { left:0; top:-56px; translate:-50% 0; width:max-content; max-width:none!important; display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 8px; border-radius:999px; background:var(--ink); color:var(--surface); font:700 12px/1.2 'JetBrains Mono',monospace; white-space:nowrap; box-shadow:0 10px 22px -10px rgba(19,28,59,.6); transition:background .25s, translate .45s cubic-bezier(.16,1,.3,1), opacity .35s ease; direction:ltr; }
.al-token b::before { content:''; width:8px; height:8px; border-radius:50%; background:#F7931A; box-shadow:0 0 0 3px rgba(247,147,26,.25); }
.al-token i { left:-5px; top:-26px; width:10px; height:10px; background:var(--ink); transform:rotate(45deg); border-radius:2px; transition:background .25s, opacity .35s ease; }
.al-token.is-exec b { background:var(--accent); }
.al-token.is-exec i { background:var(--accent); }
.al-token.is-ok b,.al-token.is-ok i { background:var(--al-ok); }
.al-token.is-out b { background:var(--al-stop); translate:-50% 26px; opacity:0; transition-delay:.25s; }
.al-token.is-out i { background:var(--al-stop); opacity:0; transition-delay:.25s; }
.al-fire { position:absolute; inset:0; pointer-events:none; }
.al-order { position:absolute; left:50%; top:50%; width:max-content; max-width:none!important; padding:4px 9px; border-radius:8px; font:700 11.5px/1.2 'JetBrains Mono',monospace; font-style:normal; color:#fff; white-space:nowrap; opacity:0; translate:-50% -50%; direction:ltr; }
.al-order-yes { background:var(--al-yes); }
.al-order-no { background:var(--al-no); }
.al-node.is-fire .al-order-yes { animation:alOrderA .95s cubic-bezier(.16,1,.3,1); }
.al-node.is-fire .al-order-no { animation:alOrderB .95s cubic-bezier(.16,1,.3,1); }
@keyframes alOrderA { 0% { opacity:0; transform:translate(0,0) scale(.6); } 20% { opacity:1; } 70% { opacity:1; } 100% { opacity:0; transform:translate(-74px,36px) scale(1); } }
@keyframes alOrderB { 0% { opacity:0; transform:translate(0,0) scale(.6); } 20% { opacity:1; } 70% { opacity:1; } 100% { opacity:0; transform:translate(74px,36px) scale(1); } }
.al-node.is-fire .al-dot::after { content:''; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--accent); animation:alBurst .8s ease-out; }
@keyframes alBurst { from { opacity:.9; scale:1; } to { opacity:0; scale:1.9; } }

.al-panels { display:grid; grid-template-columns:1fr; gap:16px; margin:16px 20px 0; }
.al-slot,.al-day { position:relative; min-width:0; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,var(--surface),var(--surface-alt)); }
.al-slot { padding:16px 18px 14px; }
.al-slot-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.al-slot-t { margin:0; font:700 15px/1.3 'JetBrains Mono',monospace; color:var(--ink); direction:ltr; unicode-bidi:isolate; }
html[lang="ar"] .al-slot-t,html[lang="hi"] .al-slot-t { font-family:inherit; }
.al-sim { display:inline-flex; align-items:center; gap:6px; font:500 10px/1.3 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
html[lang="ar"] .al-sim,html[lang="hi"] .al-sim { letter-spacing:0; font-family:inherit; font-size:11px; text-transform:none; }
.al-sim::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.6; }
.al-checks { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:2px; }
.al-checks li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; align-items:start; padding:7px 8px; border-radius:10px; transition:background .25s, opacity .25s; }
.al-checks li>i { position:relative; width:22px; height:22px; margin-top:1px; border-radius:50%; border:1.5px solid var(--line-2); box-sizing:border-box; transition:background .25s, border-color .25s; background-position:center; background-repeat:no-repeat; background-size:12px; }
.al-checks span { display:flex; flex-wrap:wrap; column-gap:8px; font-size:13.5px; line-height:1.45; color:var(--ink-2); }
.al-checks span b { font-weight:650; color:var(--ink); }
.al-checks em { font-style:normal; }
.al-checks li.is-idle { opacity:.55; }
.al-checks li.is-active { background:rgba(61,107,255,.07); }
.al-checks li.is-active>i { border-color:var(--accent); border-top-color:transparent; animation:alSpin .7s linear infinite; }
@keyframes alSpin { to { transform:rotate(360deg); } }
.al-checks li.is-ok>i { border-color:var(--al-ok); background-color:var(--al-ok); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.al-checks li.is-fail { background:rgba(217,119,6,.08); }
.al-checks li.is-fail>i { border-color:var(--al-stop); background-color:var(--al-stop); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 3.5l5 5M8.5 3.5l-5 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.al-checks li.is-fail em { color:var(--al-stop); font-weight:600; }
.al-checks li.is-skip { opacity:.4; }
.al-checks li.is-skip>i { border-style:dashed; }
.al-ledger { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.al-ledger-k { margin:0 0 6px; font:600 10.5px/1.4 'JetBrains Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
html[lang="ar"] .al-ledger-k,html[lang="hi"] .al-ledger-k { letter-spacing:0; font-family:inherit; font-size:12px; text-transform:none; }
.al-ledger ul { list-style:none; margin:0; padding:0; min-height:96px; }
.al-ledger li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:5px 0; font:500 12px/1.4 'JetBrains Mono',monospace; color:var(--ink-2); border-bottom:1px dashed var(--line); }
.al-ledger li b,.al-ledger li em { direction:ltr; unicode-bidi:isolate; }
.al-ledger li:last-child { border-bottom:0; }
.al-ledger li b { color:var(--ink); }
.al-ledger li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.al-ledger li em { font-style:normal; font-weight:700; color:#fff; background:var(--al-ok); padding:1px 7px; border-radius:999px; }
.al-ledger li:first-child { animation:alLine .5s cubic-bezier(.16,1,.3,1); }
@keyframes alLine { from { opacity:0; transform:translateY(-8px); background:rgba(18,169,122,.12); } }
.al.is-fast .al-ledger li:first-child { animation:none; }

.al-day { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; }
.al-dial { position:relative; width:min(100%,232px); aspect-ratio:1; }
.al-ring { width:100%; height:100%; overflow:visible; }
.al-seg { fill:var(--surface-alt); stroke:var(--line); stroke-width:.6; transition:fill .25s ease; }
.al-seg.is-used { fill:var(--al-ok); stroke:none; }
.al-seg.is-skip { fill:rgba(128,140,170,.35); stroke:none; }
.al-seg.is-now { fill:var(--accent); stroke:none; animation:alNow 1s ease-in-out infinite; }
@keyframes alNow { 50% { opacity:.45; } }
.al.is-fast .al-seg.is-now { animation:none; }
.al-hour { font:600 9px 'JetBrains Mono',monospace; fill:var(--ink-3); text-anchor:middle; dominant-baseline:middle; }
.al-dial-c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; }
.al-now { font:600 12px/1 'JetBrains Mono',monospace; color:var(--ink-3); letter-spacing:.04em; direction:ltr; }
.al-used { display:flex; align-items:baseline; gap:4px; margin:6px 0 2px; direction:ltr; }
.al-used b { font:700 40px/1 'JetBrains Mono',monospace; letter-spacing:-.04em; color:var(--al-ok-ink); font-variant-numeric:tabular-nums; }
.al-used small { font:600 13px 'JetBrains Mono',monospace; color:var(--ink-3); }
.al-used-k { font-size:12.5px; color:var(--ink-3); }
.al.is-done .al-used b { animation:alPop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes alPop { 40% { transform:scale(1.18); } }
.al-legend { display:flex; gap:16px; margin:12px 0 0; font-size:12.5px; color:var(--ink-3); }
.al-legend span { display:inline-flex; align-items:center; gap:6px; }
.al-legend span::before { content:''; width:10px; height:10px; border-radius:3px; }
.al-legend .is-used::before { background:var(--al-ok); }
.al-legend .is-skip::before { background:rgba(128,140,170,.35); }

.al.is-fast .al-token { opacity:0; }
.al.is-fast .al-dot,.al.is-fast .al-checks li,.al.is-fast .al-checks li>i { transition:none; }
.al.is-fast .al-node.is-fail .al-dot { animation:none; }
.al.is-fast .al-checks li.is-active>i { animation:none; }

.al-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 20px; margin-top:16px; padding:14px 22px 16px; border-top:1px solid var(--line); background:var(--surface-alt); }
.al-cap { flex:1 1 320px; min-height:3.1em; margin:0; font-size:14px; line-height:1.55; color:var(--ink-2); }
.al-ctrl { display:flex; flex-wrap:wrap; gap:8px; }
.al-ctrl button { min-height:40px; padding:0 16px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:border-color .2s, color .2s, background .2s; }
.al-ctrl button:hover { border-color:var(--accent); color:var(--accent); }
.al-fast[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--surface); }
.al-fast[aria-pressed="true"]:hover { color:var(--surface); }
.al-ctrl button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

.al:not(.al-on) :is(.al-pipe,.al-panels) { opacity:0; translate:0 18px; }
.al-pipe,.al-panels { transition:opacity .7s ease, translate .9s cubic-bezier(.16,1,.3,1); }
.al-panels { transition-delay:.12s; }

@container (min-width:640px) {
  .al-panels { grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); }
}
@container (min-width:780px) {
  .al-pipe { margin:20px 28px 0; padding:62px 10px 18px; }
  .al-track { top:calc(62px + 29px); }
  .al-panels { grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); margin:18px 28px 0; }
  .al-foot { padding:14px 28px 18px; }
}
@container (max-width:560px) {
  .al-head { padding:22px 18px 2px; }
  .al-pipe { margin:16px 12px 0; padding:52px 0 12px; }
  .al-track { top:calc(52px + 21px); }
  .al-node { padding:0 2px; }
  .al-dot { width:42px; height:42px; }
  .al-dot svg { width:18px; height:18px; }
  .al-badge { width:16px; height:16px; background-size:9px; }
  .al-name { margin-top:8px; font-size:11px; line-height:1.25; overflow-wrap:anywhere; }
  .al-desc { display:none; }
  .al-token b { top:-46px; font-size:11px; padding:4px 8px 4px 7px; }
  .al-token i { top:-22px; }
  @keyframes alOrderA { 0% { opacity:0; transform:translate(0,0) scale(.6); } 20%,70% { opacity:1; } 100% { opacity:0; transform:translate(-40px,30px) scale(.9); } }
  @keyframes alOrderB { 0% { opacity:0; transform:translate(0,0) scale(.6); } 20%,70% { opacity:1; } 100% { opacity:0; transform:translate(40px,30px) scale(.9); } }
  .al-panels { margin:12px 12px 0; gap:12px; }
  .al-slot { padding:14px; }
  .al-foot { padding:12px 16px 14px; }
  .al-ctrl button { padding:0 12px; font-size:13px; }
}

@media (prefers-reduced-motion:reduce) {
  .al *,.al::before { animation:none!important; transition:none!important; }
}
@media print { .al { display:none!important; } }
