/* Anneal: a list becomes a map of routes; one fix closes several; the check runs before and after. */
.an-stage{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px}
.an-stage .pp-pane{min-height:440px}
.an-pane-map{background:#151519;border-color:#3f3f47;display:grid;padding-bottom:22px}
.an-pane-map>.an-list,.an-pane-map>.an-map{grid-area:1/1;align-self:center}
.an-pane-side{display:flex;flex-direction:column;font-family:"Mona Sans",Arial,sans-serif;font-size:13px}

/* The list */
.an-list{position:relative;height:100%;max-height:420px;overflow:hidden;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.an-list ul{animation:an-scroll 14s linear infinite;font-family:"Mona Sans",Arial,sans-serif;font-size:12px}
@keyframes an-scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.an-list li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--line-soft);color:var(--text)}
.an-list li b{font-weight:500;color:var(--ink)}
.an-list li span{font:11px/1 var(--mono);color:var(--mute)}
.an-list li em{font-style:normal;font:600 9.5px/1 "Mona Sans",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:100px;background:#33333a;color:var(--text)}
.an-list li.is-critical em,.an-list li.is-high em{background:rgba(var(--accent-rgb),.18);color:var(--accent)}

/* The map */
.an-map{position:relative;width:100%;aspect-ratio:100/62;font-family:"Mona Sans",Arial,sans-serif;opacity:0;transform:scale(.96);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.an-internet{position:absolute;left:3.5%;top:10%;bottom:10%;width:1.6%;border-radius:4px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.6),rgba(var(--accent-rgb),.12));opacity:0;transition:opacity .6s var(--ease)}
.an-internet b{position:absolute;left:0;top:100%;margin-top:6px;font:500 10px/1 "Mona Sans",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.an-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.an-edge{fill:none;stroke:#5d5d66;stroke-width:.22;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease),stroke .6s var(--ease),stroke-width .6s var(--ease),opacity .8s var(--ease)}
.an-node{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-50%);width:max-content;max-width:30%;padding:7px 10px;border-radius:8px;background:#26262b;border:1px solid #4b4b53;font-size:11px;line-height:1.3;color:var(--ink);opacity:0;transition:opacity .5s var(--ease),border-color .5s,box-shadow .5s,background .5s}
.an-node b{display:block;font-weight:500;white-space:nowrap}
.an-crit{border-color:#5b5b64;background:#2c2c32}
.an-crit::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;border-radius:8px 0 0 8px;background:var(--ink);opacity:.5}
.an-chip{position:absolute;left:50%;top:100%;transform:translate(-50%,4px) scale(.8);font:600 9px/1 "Mona Sans",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:5px 8px;border-radius:100px;opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.an-chip-most{background:var(--accent);color:#1d1d1f}
.an-chip-fix{background:var(--ink);color:#1d1d1f}

/* Phases */
.p-fold .an-list{opacity:0;transform:scale(.94) translateY(-10px)}
.p-fold .an-map{opacity:1;transform:none;transition-delay:.4s}
.p-fold .an-internet{opacity:1;transition-delay:.6s}
.p-fold .an-node{opacity:1;transition-delay:calc(.6s + var(--i) * 80ms)}
.p-routes .an-edge{stroke-dashoffset:0;transition-delay:calc(var(--rank) * .55s + var(--i) * 60ms)}
.p-most .an-node[data-n="idp"]{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2),0 0 30px rgba(var(--accent-rgb),.25)}
.p-most .an-edge.an-via{stroke:var(--accent);stroke-width:.34;transition-delay:.3s}
.p-most .an-node[data-n="idp"] .an-chip-most{opacity:1;transform:translate(-50%,4px);transition-delay:.5s}
.p-fix .an-node[data-n="idp"] .an-chip-most{opacity:0}
.p-fix .an-node[data-n="idp"] .an-chip-fix{opacity:1;transform:translate(-50%,4px);transition-delay:.3s}
.p-fix .an-node[data-n="idp"]{background:var(--accent);color:#1d1d1f;border-color:var(--accent);box-shadow:none;transition-delay:.3s}
.p-fix .an-edge.an-via{stroke:#3a3a40;stroke-width:.22;opacity:.5;transition-delay:calc(.8s + var(--i) * .22s)}
.p-closed .an-pane-map{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 24px 70px rgba(var(--accent-rgb),.12)}

/* The side pane */
.an-side{display:grid;gap:14px;flex:1}
.an-say{max-width:none;font-size:14px;line-height:1.5;color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.an-say-list{color:var(--text)}
.p-list .an-say-list{opacity:1;transform:none}
.p-fold .an-say-list{opacity:.4}
.p-routes .an-say-routes{opacity:1;transform:none;transition-delay:.6s}
.p-most .an-say-routes{opacity:.4}
.p-most .an-say-most{opacity:1;transform:none;transition-delay:.4s}
.p-prove .an-say-most{opacity:.4}
.an-box{padding:14px 16px;border-radius:12px;background:#1b1b1f;border:1px dashed #6a6a72;display:grid;gap:12px;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .6s}
.an-box-title{font:500 10px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.an-copy{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:#26262b;border:1px solid #4b4b53;font-size:12.5px;font-weight:500;color:var(--ink)}
.an-copy i{width:12px;height:12px;border-radius:3px;background:var(--accent);opacity:.7}
.an-checks,.an-claims{display:grid;gap:6px}
.an-checks li,.an-claims li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;background:#26262b;font-size:12px;color:var(--text);opacity:0;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.an-checks li b,.an-claims li b{font-weight:400}
.an-checks li em,.an-claims li em{font-style:normal;font:600 10px/1 "Mona Sans",Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:100px;background:rgba(var(--accent-rgb),.18);color:var(--accent)}
.an-check-before em,.an-claim-drop em{background:rgba(242,164,94,.18);color:var(--flag)}
.an-claims li em{text-transform:none;letter-spacing:0;font-weight:500;font-size:11px}
.p-prove .an-box{opacity:1;transform:none;border-color:var(--accent)}
.p-prove .an-check-before{opacity:1;transform:none;transition-delay:.8s}
.p-prove .an-check-after{opacity:1;transform:none;transition-delay:1.5s}
.p-prove .an-check-health{opacity:1;transform:none;transition-delay:2s}
.p-fix .an-box{opacity:.5}
.p-fix .an-say-closed{opacity:1;transform:none;transition-delay:1s}

/* Method figure */
.an-mf .an-map{max-width:640px;margin:0 auto;opacity:1;transform:none}
.an-mf .an-node{opacity:0}
.an-mf .an-internet{opacity:0}
[data-state="1"].is-on .s1 .an-internet{opacity:1}
[data-state="1"].is-on .s1 .an-node{opacity:1;transition-delay:calc(.2s + var(--i) * 80ms)}
[data-state="1"].is-on .s1 .an-edge{stroke-dashoffset:0;transition-delay:calc(.6s + var(--rank) * .5s + var(--i) * 50ms)}
[data-state="1"].is-resolved .s1 .an-node[data-n="idp"]{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2)}
[data-state="1"].is-resolved .s1 .an-edge.an-via{stroke:var(--accent);stroke-width:.34}
[data-state="1"].is-resolved .s1 .an-node[data-n="idp"] .an-chip-most{opacity:1;transform:translate(-50%,4px);transition-delay:.3s}
.an-box-mf{max-width:520px;margin:0 auto;width:100%;opacity:1;transform:none;border-color:var(--accent)}
[data-state="2"].is-on .s2 .an-claims li{opacity:1;transform:none;transition-delay:calc(.5s + var(--i, 0) * .5s)}
[data-state="2"].is-on .s2 .an-claim-keep{transition-delay:1s}
[data-state="2"].is-resolved .s2 .an-claim-drop{opacity:.4}
[data-state="2"].is-resolved .s2 .an-claim-drop b{text-decoration:line-through}
[data-state="2"].is-resolved .s2 .an-claim-keep{background:rgba(var(--accent-rgb),.10)}
[data-state="3"].is-on .s3 .an-check-before{opacity:1;transform:none;transition-delay:.4s}
[data-state="3"].is-on .s3 .an-check-after{opacity:1;transform:none;transition-delay:1.2s}
[data-state="3"].is-on .s3 .an-check-health{opacity:1;transform:none;transition-delay:1.8s}
.an-live{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink);max-width:none;opacity:0;transition:opacity .5s var(--ease)}
.an-live i{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
[data-state="3"].is-resolved .s3 .an-live{opacity:1}

/* Stakes: one server, the passwords, 48 databases */
.an-fan{display:grid;grid-template-columns:auto 24px auto 24px minmax(0,1fr);gap:10px;align-items:center;margin-top:30px;max-width:460px;font:11.5px/1.3 "Mona Sans",Arial,sans-serif}
.an-fan-node{display:grid;padding:9px 11px;border-radius:8px;background:#26262b;border:1px solid #4b4b53;color:var(--ink);opacity:0;transition:opacity .5s var(--ease),border-color .5s}
.an-fan-node b{font-weight:500;white-space:nowrap}
.an-fan-node small{font-size:10px;color:var(--mute)}
.an-fan-arrow{height:1px;background:var(--line);position:relative;opacity:0;transition:opacity .5s var(--ease)}
.an-fan-arrow::after{content:'';position:absolute;right:-1px;top:-3px;border:3.5px solid transparent;border-left-color:var(--mute)}
.an-fan-dbs{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:3px;padding-bottom:16px}
.an-fan-dbs i{aspect-ratio:1;border-radius:2px;background:var(--line);opacity:.35;transition:background .3s,opacity .3s}
.an-fan-dbs small{position:absolute;left:0;bottom:0;font-size:10px;color:var(--mute);opacity:0;transition:opacity .4s}
.an-fan.is-on .an-fan-web{opacity:1;border-color:var(--flag)}
.an-fan.is-on .an-fan-arrow{opacity:1;transition-delay:.4s}
.an-fan.is-on .an-fan-pw{opacity:1;transition-delay:.7s}
.an-fan.is-on .an-fan-dbs i{background:var(--flag);opacity:1;transition-delay:calc(1.1s + var(--i) * 25ms)}
.an-fan.is-resolved .an-fan-dbs small{opacity:1}

/* Proof: the reasoning behind one priority */
.an-reason{border-radius:16px;background:#1b1b1f;border:1px solid var(--line-soft);padding:22px 24px;font-family:"Mona Sans",Arial,sans-serif;font-size:13px;color:#e6e6ec}
.an-reason-head strong{display:block;font-size:18px;font-weight:500;color:var(--ink);margin-bottom:16px}
.an-inputs{display:grid;gap:8px}
.an-inputs li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:12px;padding:10px 12px;border-radius:8px;background:#26262b;border:1px solid #4b4b53;opacity:.25;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .5s}
.an-inputs li b{font-weight:500;color:var(--ink)}
.an-inputs li span{color:var(--text);font-size:12.5px}
.an-inputs li:last-child{border-color:rgba(var(--accent-rgb),.6)}
.an-reason.is-on .an-inputs li{opacity:1;transform:none;transition-delay:calc(.2s + var(--i) * .35s)}
.an-reason-foot{margin-top:16px;font-size:12.5px;color:var(--mute);max-width:none;opacity:0;transition:opacity .5s var(--ease)}
.an-reason.is-resolved .an-reason-foot{opacity:1}

@media(max-width:1280px){.an-node{font-size:10px}}
@media(max-width:1000px){
  .an-stage{grid-template-columns:1fr;gap:12px;padding-bottom:44px}
  .an-stage .pp-pane{min-height:0}
  .an-pane-map{min-height:300px}
  .an-list{max-height:260px}
  .an-pane-side{min-height:300px}
  .an-fan{max-width:520px}
}
@media(max-width:760px){
  .an-stage .pp-pane{padding:42px 14px 14px}
  .an-node{padding:5px 7px;font-size:9.5px;max-width:31%}
  .an-chip{font-size:8px}
  .an-list li{grid-template-columns:1fr auto;font-size:11px}
  .an-list li span{display:none}
  .an-fan{grid-template-columns:1fr;gap:8px}
  .an-fan-arrow{width:1px;height:16px;justify-self:start;margin-left:20px}
  .an-fan-arrow::after{right:-3px;top:auto;bottom:-1px;border:3.5px solid transparent;border-top-color:var(--mute)}
  .an-inputs li{grid-template-columns:1fr;gap:4px}
  .an-reason{padding:18px 16px}
}