/* ETCH'D · the one card (see assets/etchd-card.js). One box through every
   state; the rows match the wallet adapter's confirmation card row for row
   (TITLE · BY ARTIST, the asset line only when it adds something, chain ·
   contract, terms with the value the largest text, the buttons row reserved). */
.cele-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.cele-ov.on{display:flex}
/* the page beneath holds still while a card is up (the card itself scrolls when a viewport is short) */
html.cele-lock,html.cele-lock body{overflow:hidden}
/* the words hold still: no pulse, no fade (Kenny, 2026-09-04); only the dots move */
.cele{background:var(--bg);border:1px solid var(--rule);border-radius:6px;max-width:420px;width:100%;max-height:88vh;max-height:calc(100dvh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 20px 16px;position:relative;text-align:center;box-sizing:border-box}
.cele img,.cele video{width:100%;height:auto;display:block;border-radius:0;margin-bottom:18px}
.cele-i.fixed{width:100%;margin-bottom:18px}
.cele-i.fixed img,.cele-i.fixed video,.cele-i.fixed iframe{height:100%;object-fit:contain;margin-bottom:0}
.cele iframe{width:100%;aspect-ratio:1;border:0;display:block;border-radius:0;margin-bottom:18px}
.cele-i.fixed iframe{aspect-ratio:auto}
.cele-k{font-size:16px;letter-spacing:4px;font-weight:700;margin-bottom:10px;white-space:nowrap;overflow:hidden}
/* a run's card: the step count at the left of the top row, the stage after it */
.cele-k.counted{position:relative;padding:0 2.2em;text-align:center;letter-spacing:3px}
.cele-k .cele-kn{position:absolute;left:0;top:0;color:var(--faint);letter-spacing:2px}
.cele-k.counted .cele-kt{display:block;overflow:hidden;text-align:center}
.cele-b{font-size:20px;letter-spacing:4px;font-weight:700;margin-bottom:10px}
/* every state the same size: the button row's space is reserved even when a state has no buttons */
.cele-x{margin-top:14px;min-height:55px}
/* a run's bottom row: the step count left, time left right, the bar beneath with the bytes written over it (fits the 46px slot) */
.cele-step{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:1.5px;color:var(--faint);text-align:left;margin-bottom:6px;min-height:1.6em}
.cele-bar{position:relative;height:32px;border:1px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--bg)}
.cele-bar .fill{position:absolute;inset:0;right:auto;width:0;background:var(--ink);transition:width .4s ease}
.cele-bar .txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;letter-spacing:2px;color:#fff;mix-blend-mode:difference;white-space:nowrap}
.cele-k .dots::after{content:"";display:inline-block;width:1.4em;text-align:left;animation:celedots 1.1s steps(4,end) infinite}
@keyframes celedots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@media(prefers-reduced-motion:reduce){.cele-k .dots::after{animation:none;content:"…"}}
.cele-t{font-size:13px;letter-spacing:2px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-bottom:6px}
.cele-a{font-size:10.5px;letter-spacing:1.5px;color:var(--soft);margin:2px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cele-l{font-size:10px;letter-spacing:1.2px;color:var(--faint);margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cele-n{font-size:11px;letter-spacing:2px;font-weight:700;margin:2px 0 8px}
.cele-terms{margin:10px 0 0;border-top:1px solid var(--rule);padding-top:8px;text-align:left}
.cele-terms.hold{border-top-color:transparent}.cele-terms.hold .cele-term{visibility:hidden}
.cele-terms.solo{margin-top:0;border-top:0;padding-top:0}.cele-terms.solo .cele-term{padding:2px 0 3px}
.cele-term{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:10.5px;letter-spacing:1.5px;padding:3px 0}
.cele-tk{color:var(--faint);flex:none}
.cele-tv{font-weight:700;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cele-tv.money{font-size:24px;letter-spacing:3px}
.cele-term.money-row{justify-content:center}.cele-term.money-row .cele-tv{text-align:center}
.cele-btns{display:flex;gap:8px;transition:opacity .2s}
.cele-btns.hold{visibility:hidden;opacity:0}
.cele-btns a,.cele-btns button{flex:1;display:block;background:#fff;color:#000;border:1px solid #000;border-radius:4px;font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:2px;padding:12px 6px;cursor:pointer;text-decoration:none;text-align:center}
.cele-btns a:hover,.cele-btns button:hover{background:#000;color:#fff}
.cele-btns .share-x{background:var(--ink);color:var(--bg);border-color:var(--ink)}