/* $SEED — VERIFY THE SEED (fx/verify.css)
   A steel inspection bench inside the Proof section. Five key tags hang on a rail (pick the vault),
   twelve punched slots take the words, a CHECK lever hashes + derives in the browser, and a paper
   result sheet gets a rubber stamp slammed on it: MATCH in win-blue, NO MATCH in safety orange.
   Everything is CSS; the only motion is the stamp, the tag swing, the slot fill and the step LEDs.
   State: .vf-sheet[data-state="idle"|"work"|"match"|"nomatch"|"warn"]. */

.vf{
  position:relative;margin:26px 0 0;border:3px solid var(--ink);background:var(--plate);box-shadow:6px 6px 0 var(--ink);
  /* brushed steel: fine vertical grain over the plate tone */
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#eef0ec,var(--plate) 60%,#dcdfdb);
  container-type:inline-size;
}
.vf-rivet{
  position:absolute;width:11px;height:11px;border-radius:50%;background:#9ea39f;border:2px solid var(--ink);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55);pointer-events:none;z-index:2;
}
.vf-rivet:nth-child(1){left:7px;top:7px}
.vf-rivet:nth-child(2){right:7px;top:7px}
.vf-rivet:nth-child(3){left:7px;bottom:7px}
.vf-rivet:nth-child(4){right:7px;bottom:7px}

/* ---------- head ---------- */
.vf-head{padding:clamp(16px,3cqw,26px) clamp(14px,3cqw,28px) clamp(12px,2cqw,18px);border-bottom:3px solid var(--ink)}
.vf-title{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-weight:900;line-height:1}
.vf-stamp{
  display:inline-block;background:var(--ink);color:var(--yellow);font-family:var(--body);font-weight:800;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;transform:rotate(-1.2deg);
}
.vf-dash{font-family:var(--stencil);font-size:clamp(22px,4cqw,36px);color:var(--orange-d)}
.vf-claim{font-family:var(--stencil);font-weight:900;font-size:clamp(22px,4cqw,36px);text-transform:uppercase;letter-spacing:.01em}
.vf-sub{margin:8px 0 0;font-size:15px;color:var(--ink-2);max-width:48em}
.vf-sub b{color:var(--ink)}

/* ---------- body: form left, result sheet right ---------- */
.vf-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,380px)}
.vf-form{position:relative;padding:clamp(14px,2.6cqw,24px) clamp(14px,3cqw,28px) clamp(16px,2.6cqw,24px);min-width:0;display:grid;gap:16px}
.vf-form.vf-shake{animation:vf-shake .42s cubic-bezier(.2,.8,.3,1)}
@keyframes vf-shake{
  15%{transform:translateX(-7px)}30%{transform:translateX(6px)}45%{transform:translateX(-5px)}
  60%{transform:translateX(4px)}75%{transform:translateX(-2px)}90%{transform:translateX(1px)}
}
.vf-lbl{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.vf-lbl b{font-family:var(--stencil);font-size:20px;letter-spacing:0;color:var(--ink);line-height:1}
.vf-lbl span{margin-left:auto;font-family:var(--mono);font-weight:600;letter-spacing:0;text-transform:none;color:var(--mute)}

/* the rail with five key tags hanging on it */
.vf-tags{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding-top:16px;margin:0}
.vf-tags::before{content:"";position:absolute;left:-4px;right:-4px;top:4px;height:5px;background:var(--ink);border-radius:3px;box-shadow:0 2px 0 rgba(255,255,255,.5)}
.vf-tag{
  position:relative;display:flex;flex-direction:column;gap:3px;min-width:0;padding:16px 9px 9px;text-align:left;cursor:pointer;
  border:3px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink);
  transform:translateY(0) rotate(0);transform-origin:50% -12px;
  transition:transform .32s cubic-bezier(.34,1.56,.44,1),background-color .2s,box-shadow .2s;
}
/* the cord up to the rail and the punched hole it threads */
.vf-tag::before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:16px;margin-left:-1px;background:var(--ink)}
.vf-tag::after{content:"";position:absolute;left:50%;top:4px;width:8px;height:8px;margin-left:-6px;border-radius:50%;background:var(--steel);border:2px solid var(--ink);box-shadow:inset 1px 1px 0 rgba(0,0,0,.25)}
.vf-tag:hover{background:#fff8d6}
.vf-tag[aria-checked="true"]{
  background:var(--yellow);transform:translateY(7px) rotate(-1.4deg);box-shadow:4px 6px 0 var(--ink);
}
.vf-tag[aria-checked="true"]::before{height:23px;top:-23px}
.vf-tag:focus-visible{outline:3px solid var(--orange-d);outline-offset:2px}
.vf-tag b{font-family:var(--stencil);font-weight:900;font-size:clamp(20px,2.4cqw,28px);line-height:.95}
.vf-tag-st{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 5px;background:var(--ink);color:#fff;align-self:flex-start;white-space:nowrap}
.vf-tag.vf-s-dropping .vf-tag-st{background:var(--orange);animation:vf-blink 1s steps(2) infinite}
.vf-tag.vf-s-open .vf-tag-st{background:var(--orange-d)}
.vf-tag.vf-s-cracked .vf-tag-st{background:var(--won)}
.vf-tag code{font-size:10.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vf-tag small{font-size:10px;color:var(--mute);font-weight:600;white-space:nowrap}
.vf-tag.vf-s-cracked small,.vf-tag.vf-s-open small{color:var(--won)}
@keyframes vf-blink{50%{opacity:.4}}

/* paste box: one line, splits into the slots */
.vf-paste{display:flex;gap:8px;align-items:stretch}
.vf-paste-in{
  flex:1;min-width:0;resize:none;height:42px;padding:10px 12px;border:2px solid var(--ink);background:#fff;
  font-family:var(--mono);font-size:13px;font-weight:600;line-height:1.5;color:var(--ink);box-shadow:inset 2px 2px 0 rgba(0,0,0,.08);
}
.vf-paste-in::placeholder{color:var(--mute);font-weight:400}
.vf-paste-in:focus{outline:0;border-color:var(--orange-d);box-shadow:inset 2px 2px 0 rgba(0,0,0,.08),0 0 0 3px var(--yellow)}
.vf-split{
  flex:none;padding:0 14px;border:2px solid var(--ink);background:var(--plate);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .1s,box-shadow .1s;
}
.vf-split:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* the twelve punched slots */
.vf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0}
.vf-cell{
  position:relative;display:flex;align-items:center;height:46px;min-width:0;border:2px solid var(--ink);
  background:#c9cdc9;box-shadow:inset 2px 2px 0 rgba(0,0,0,.18);
  transition:background-color .15s,box-shadow .15s,border-color .15s;
}
/* the punched hole on the left of every tag */
.vf-cell::before{content:"";position:absolute;left:9px;top:50%;width:8px;height:8px;margin-top:-6px;border-radius:50%;background:var(--steel);border:2px solid var(--ink);box-shadow:inset 1px 1px 0 rgba(0,0,0,.3)}
.vf-no{position:absolute;left:26px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;font-weight:600;color:var(--mute);pointer-events:none}
.vf-in,.vf-ghost{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:0;padding:0 8px 0 48px;line-height:42px}
.vf-in{
  flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);outline:0;text-transform:lowercase;position:relative;z-index:1;
  -webkit-appearance:none;appearance:none;border-radius:0;
}
.vf-ghost{position:absolute;left:0;top:0;bottom:0;right:0;color:var(--mute);pointer-events:none;white-space:nowrap;overflow:hidden;z-index:0}
.vf-ghost b{visibility:hidden;font-weight:600}
.vf-ck{position:absolute;right:6px;top:4px;font-size:8px;font-weight:800;letter-spacing:.1em;color:var(--mute);pointer-events:none}
.vf-cell:focus-within{border-color:var(--orange-d);box-shadow:inset 2px 2px 0 rgba(0,0,0,.08),0 0 0 3px var(--yellow);background:#fff;z-index:3}
.vf-cell.vf-ok{background:#fff;box-shadow:2px 2px 0 var(--ink)}
.vf-cell.vf-ok .vf-no{color:var(--ink-2)}
.vf-cell.vf-ok::after{content:"";position:absolute;right:8px;top:50%;width:6px;height:11px;margin-top:-8px;border:solid var(--won);border-width:0 3px 3px 0;transform:rotate(42deg);pointer-events:none}
.vf-cell.vf-bad{background:#ffe3da;border-color:var(--orange-d);box-shadow:2px 2px 0 var(--orange-d)}
.vf-cell.vf-bad .vf-in{color:var(--orange-d)}
.vf-cell.vf-bad::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:3px;margin-top:-1px;background:var(--orange-d);transform:rotate(-45deg);box-shadow:0 0 0 0 transparent;pointer-events:none}
.vf-cell.vf-bad .vf-ck,.vf-cell.vf-ok .vf-ck{right:24px}
/* a word dropped in by FILL or SPLIT lands like a stamped tag; --vf-d staggers the row */
.vf-cell.vf-land{animation:vf-land .5s cubic-bezier(.3,1.6,.5,1) var(--vf-d,0s) both}
@keyframes vf-land{0%{transform:scale(1.35) rotate(-3deg);background:var(--yellow)}60%{transform:scale(.96);background:var(--yellow)}100%{transform:scale(1)}}

/* the completion list under the active slot */
.vf-drop{
  position:absolute;left:-2px;right:-2px;top:100%;margin-top:5px;z-index:40;background:#fff;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  max-height:232px;overflow:auto;
}
.vf-drop button{
  display:block;width:100%;text-align:left;padding:7px 12px;border:0;border-bottom:1px solid #d2d5d1;background:none;cursor:pointer;
  font-family:var(--mono);font-size:14px;font-weight:600;color:var(--ink);
}
.vf-drop button:last-child{border-bottom:0}
.vf-drop button b{color:var(--orange-d);font-weight:600}
.vf-drop button[aria-selected="true"],.vf-drop button:hover{background:var(--yellow)}

/* lever row */
.vf-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.vf-btn{
  display:inline-flex;align-items:center;gap:8px;border:3px solid var(--ink);cursor:pointer;background:#fff;color:var(--ink);
  font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:13px;padding:10px 16px;box-shadow:4px 4px 0 var(--ink);
  transition:transform .1s,box-shadow .1s,opacity .2s;white-space:nowrap;
}
.vf-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.vf-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:4px 4px 0 var(--ink)}
.vf-btn:focus-visible{outline:3px solid var(--orange-d);outline-offset:2px}
.vf-check{background:var(--orange);color:#fff;font-family:var(--stencil);font-size:28px;letter-spacing:.03em;padding:6px 26px 7px;line-height:1}
.vf-check.vf-busy{background:var(--ink);color:var(--yellow)}
/* the lever's little dial spins only while a check runs */
.vf-check i{width:18px;height:18px;border-radius:50%;border:3px solid currentColor;position:relative;flex:none}
.vf-check i::after{content:"";position:absolute;left:50%;top:-3px;width:3px;height:50%;background:currentColor;transform:translateX(-50%)}
.vf-check.vf-busy i{animation:vf-spin .7s linear infinite}
@keyframes vf-spin{to{transform:rotate(360deg)}}
.vf-fill{background:var(--plate)}
.vf-fill b{font-family:var(--mono);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.vf-wipe{background:transparent;margin-left:auto}

/* live counters under the slots */
.vf-meter{display:flex;gap:6px 16px;flex-wrap:wrap;margin:0;font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.vf-meter span{display:inline-flex;align-items:center;gap:6px}
.vf-meter b{font-weight:600;color:var(--ink)}
.vf-meter i{width:10px;height:10px;border:2px solid var(--ink);background:#fff;flex:none}
.vf-meter i.vf-yes{background:var(--won)}
.vf-meter i.vf-nope{background:var(--orange)}
.vf-meter i.vf-part{background:var(--yellow)}

/* ---------- right: the result sheet on a hazard-topped panel ---------- */
.vf-result{
  position:relative;padding:30px 18px 18px;min-width:0;border-left:3px solid var(--ink);
  background:repeating-linear-gradient(-45deg,rgba(0,0,0,.07) 0 8px,transparent 8px 16px),#cfd3cf;
}
.vf-result::before{
  content:"";position:absolute;left:0;right:0;top:0;height:12px;border-bottom:3px solid var(--ink);
  background:repeating-linear-gradient(-45deg,var(--ink) 0 10px,var(--yellow) 10px 20px);
}
.vf-sheet{
  position:relative;background:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:16px 16px 14px;min-height:300px;
  display:flex;flex-direction:column;gap:12px;overflow:hidden;
}
/* the two staple holes the sheet hangs on */
.vf-sheet::before,.vf-sheet::after{content:"";position:absolute;top:8px;width:7px;height:7px;border-radius:50%;background:var(--steel);border:2px solid var(--ink);z-index:1}
.vf-sheet::before{left:10px}.vf-sheet::after{right:10px}
.vf-sheet.vf-hit{animation:vf-hit .42s cubic-bezier(.2,.8,.3,1)}
@keyframes vf-hit{
  12%{transform:translate(-4px,3px) rotate(-.5deg)}30%{transform:translate(5px,-3px) rotate(.4deg)}
  50%{transform:translate(-3px,2px)}70%{transform:translate(2px,-1px)}
}
.vf-sheet-h{display:flex;flex-direction:column;gap:3px;padding:0 14px}
.vf-kick{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.vf-for{font-family:var(--stencil);font-weight:900;font-size:24px;line-height:1;text-transform:uppercase}
.vf-sheet[data-state="work"] .vf-kick{color:var(--orange-d)}

/* the three derivation steps, lit one by one */
.vf-steps{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.vf-steps li{display:grid;grid-template-columns:14px 1fr;gap:3px 10px;align-items:center;font-size:12px;font-weight:600;color:var(--mute);transition:color .2s}
.vf-steps li i{width:14px;height:14px;border:2px solid var(--ink);background:#fff;transition:background-color .2s}
.vf-steps li code{grid-column:2;font-size:10.5px;color:var(--mute);font-weight:400;overflow-wrap:anywhere}
.vf-steps li.vf-run{color:var(--ink)}
.vf-steps li.vf-run i{background:var(--yellow);animation:vf-blink .45s steps(2) infinite}
.vf-steps li.vf-done{color:var(--ink)}
.vf-steps li.vf-done i{background:var(--won);border-color:var(--won)}
.vf-steps li.vf-fail{color:var(--orange-d)}
.vf-steps li.vf-fail i{background:var(--orange);border-color:var(--orange-d)}
.vf-steps li.vf-skip i{background:repeating-linear-gradient(-45deg,#fff 0 3px,#c9cdc9 3px 6px)}

/* hash row + address row: yours vs the vault's, char-by-char */
.vf-rows{display:grid;gap:2px}
.vf-row{display:grid;grid-template-columns:30px 1fr;gap:3px 10px;align-items:start;border-top:2px dashed var(--ink);padding:9px 0 8px}
.vf-mark{
  grid-row:span 4;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);
  font-family:var(--stencil);font-weight:900;font-size:20px;line-height:1;background:#fff;color:var(--mute);
  transition:background-color .2s,color .2s;
}
.vf-mark.vf-yes{background:var(--won);border-color:var(--won);color:#fff;animation:vf-pop .4s cubic-bezier(.3,1.6,.5,1)}
.vf-mark.vf-nope{background:var(--orange);border-color:var(--orange-d);color:#fff;animation:vf-pop .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes vf-pop{0%{transform:scale(1.8);opacity:0}60%{transform:scale(.9);opacity:1}100%{transform:scale(1)}}
.vf-row small{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.vf-row small span{font-weight:600;letter-spacing:0;text-transform:none;color:var(--mute);margin-left:6px}
.vf-row code{display:block;font-size:10.5px;line-height:1.45;overflow-wrap:anywhere;color:var(--ink-2);min-height:1em}
.vf-row code::before{content:attr(data-who);display:inline-block;width:5.2em;font-weight:600;color:var(--mute);text-transform:uppercase;font-size:9px;letter-spacing:.08em}
.vf-row code em{font-style:normal;background:#ffd9cf;color:var(--orange-d)}
.vf-row code.vf-same{color:var(--won)}
.vf-row.vf-off{opacity:.5}

/* the rubber stamp */
.vf-seal{
  position:absolute;right:12px;top:48px;z-index:4;pointer-events:none;opacity:0;
  font-family:var(--stencil);font-weight:900;font-size:clamp(34px,10cqw,46px);line-height:1;letter-spacing:.02em;white-space:nowrap;
  padding:6px 14px 7px;border:4px double currentColor;color:var(--won);
  transform:rotate(-10deg);transform-origin:50% 50%;mix-blend-mode:multiply;
  /* worn ink: the stamp never prints perfectly even */
  -webkit-mask-image:repeating-radial-gradient(circle at 32% 38%,rgba(0,0,0,1) 0 3px,rgba(0,0,0,.72) 3px 5px);
  mask-image:repeating-radial-gradient(circle at 32% 38%,rgba(0,0,0,1) 0 3px,rgba(0,0,0,.72) 3px 5px);
}
.vf-seal.vf-no{color:var(--orange-d)}
.vf-seal.vf-on{opacity:1;animation:vf-stamp .5s cubic-bezier(.3,1.55,.5,1) both}
@keyframes vf-stamp{0%{transform:rotate(-10deg) scale(2.6);opacity:0}55%{transform:rotate(-10deg) scale(.94);opacity:1}100%{transform:rotate(-10deg) scale(1);opacity:1}}
/* the ring of ink that spreads out of the impact */
.vf-seal::after{content:"";position:absolute;inset:-10px -16px;border:3px solid currentColor;border-radius:50%;opacity:0}
.vf-seal.vf-on::after{animation:vf-ring .55s .22s ease-out both}
@keyframes vf-ring{0%{transform:scale(.7);opacity:.55}100%{transform:scale(1.35);opacity:0}}

/* the verdict line */
.vf-verdict{margin:auto 0 0;font-size:14px;font-weight:600;line-height:1.4;color:var(--ink-2);border-top:3px solid var(--ink);padding-top:10px}
.vf-verdict b{color:var(--ink)}
.vf-sheet[data-state="match"] .vf-verdict{color:var(--ink)}
.vf-sheet[data-state="match"] .vf-verdict b{color:var(--won)}
.vf-sheet[data-state="nomatch"] .vf-verdict b{color:var(--orange-d)}
.vf-sheet[data-state="warn"] .vf-verdict{color:var(--orange-d)}
.vf-sheet[data-state="match"]{border-color:var(--won);box-shadow:4px 4px 0 var(--won)}
.vf-sheet[data-state="nomatch"]{border-color:var(--orange-d);box-shadow:4px 4px 0 var(--orange)}

/* ---------- foot note ---------- */
.vf-note{
  display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px clamp(14px,3cqw,28px) 14px;border-top:3px solid var(--ink);
  font-size:12px;color:var(--ink-2);background:var(--plate);
}
.vf-note b{color:var(--ink)}
.vf-note code{font-size:11px}
/* a padlock drawn in CSS: shackle + body */
.vf-lock{position:relative;flex:none;width:14px;height:18px;margin-top:1px}
.vf-lock::before{content:"";position:absolute;left:2px;top:0;width:6px;height:8px;border:2px solid var(--ink);border-bottom:0;border-radius:5px 5px 0 0}
.vf-lock::after{content:"";position:absolute;left:0;top:7px;width:14px;height:11px;background:var(--ink);border-radius:2px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .vf-body{grid-template-columns:1fr}
  .vf-result{border-left:0;border-top:3px solid var(--ink)}
  .vf-sheet{min-height:0}
}
@media (max-width:720px){
  .vf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vf-tags{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .vf-tag{padding:14px 7px 8px}
  .vf-in,.vf-ghost{font-size:16px} /* 16px: iOS does not zoom the page into the field */
  .vf-check{font-size:24px;padding:6px 20px 7px}
  .vf-wipe{margin-left:0}
  .vf-seal{right:8px;top:40px}
}
@media (max-width:420px){
  .vf-tags{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vf-tag b{font-size:19px}
  .vf-paste-in{font-size:12px}
  .vf-split{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  /* style.css already kills animation site-wide; make sure every end state still shows */
  .vf-seal.vf-on{opacity:1;transform:rotate(-10deg) scale(1)}
  .vf-tag[aria-checked="true"]{transform:translateY(7px)}
}