for a leading glyph */
.note {
display: block;
padding: var(--s-3) var(--s-4);
border-radius: var(--r-md);
border: 1px solid var(--c-line);
background: var(--c-panel-2);
font-size: var(--t-sm);
color: var(--c-dim);
max-width: none; /* a must span the grid like a
*/
}
.note b { color: var(--c-text); }
.note.with-icon { display: flex; gap: var(--s-3); align-items: flex-start; }
.note-icon { flex: 0 0 auto; line-height: 1.4; }
.note-warn { border-color: rgba(242, 169, 0, 0.35); background: var(--c-dogs-soft); }
.note-danger { border-color: rgba(224, 69, 58, 0.4); background: var(--c-danger-soft); color: var(--c-text); }
.note-info { border-color: rgba(111, 156, 255, 0.35); background: var(--c-info-soft); }
/* ---------- tooltips (CSS only, [data-tip]) ---------------------------- */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
content: attr(data-tip);
position: absolute;
left: 50%; bottom: calc(100% + 8px);
transform: translate(-50%, 4px);
width: max-content; max-width: min(260px, 80vw);
padding: var(--s-2) var(--s-3);
border-radius: var(--r-sm);
background: var(--c-panel-3);
border: 1px solid var(--c-line-strong);
color: var(--c-text);
font-family: var(--f-text);
font-size: var(--t-xs);
font-weight: 400;
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
white-space: normal;
text-align: left;
box-shadow: var(--sh-2);
opacity: 0;
pointer-events: none;
transition: opacity var(--d-fast), transform var(--d-fast) var(--ease-out);
z-index: var(--z-tooltip);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
[data-tip].tip-right::after { left: auto; right: 0; transform: translate(0, 4px); }
[data-tip].tip-right:hover::after { transform: translate(0, 0); }
[data-tip].tip-left::after { left: 0; transform: translate(0, 4px); }
[data-tip].tip-left:hover::after { transform: translate(0, 0); }
/* opens downward: for anything near the top of the viewport. Every tip inside the sticky .topbar is
forced below automatically (a tip above the topbar is above the page and never visible). */
[data-tip].tip-below::after, .topbar [data-tip]::after { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
[data-tip].tip-below:hover::after, [data-tip].tip-below:focus-visible::after,
.topbar [data-tip]:hover::after, .topbar [data-tip]:focus-visible::after { transform: translate(-50%, 0); }
/* .topbar-actions hugs the right edge: anchor those tips to the right so a 260px tip never leaves the viewport */
.topbar .topbar-actions [data-tip]::after { left: auto; right: 0; transform: translate(0, -4px); }
.topbar .topbar-actions [data-tip]:hover::after, .topbar .topbar-actions [data-tip]:focus-visible::after { transform: translate(0, 0); }
.tip-icon {
display: inline-grid; place-items: center;
width: 16px; height: 16px; border-radius: 50%;
border: 1px solid var(--c-dim); color: var(--c-dim);
font-size: 10px; font-weight: 700; line-height: 1;
vertical-align: middle; margin-left: 0.3em;
}
/* ---------- toast ------------------------------------------------------- */
.toast-stack {
position: fixed;
left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
transform: translateX(-50%);
display: flex; flex-direction: column; gap: var(--s-2);
width: min(420px, calc(100vw - 32px));
z-index: var(--z-toast);
pointer-events: none;
}
.toast {
pointer-events: auto;
display: flex; align-items: flex-start; gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-radius: var(--r-md);
background: var(--c-panel-3);
border: 1px solid var(--c-line-strong);
color: var(--c-text);
font-size: var(--t-sm);
box-shadow: var(--sh-3);
animation: toast-in var(--d-base) var(--ease-out);
overflow-wrap: anywhere;
}
.toast.is-leaving { animation: toast-out var(--d-base) var(--ease-in-out) forwards; }
.toast-success { border-color: var(--c-cats-line); }
.toast-success .toast-icon { color: var(--c-cats); }
.toast-error { border-color: rgba(224, 69, 58, 0.5); }
.toast-error .toast-icon { color: var(--c-danger-text); }
.toast-dogs { border-color: var(--c-dogs-line); }
.toast-dogs .toast-icon { color: var(--c-dogs); }
.toast-cats { border-color: var(--c-cats-line); }
.toast-cats .toast-icon { color: var(--c-cats); }
.toast-icon { flex: 0 0 auto; font-size: 1rem; line-height: 1.3; }
.toast-body { flex: 1 1 auto; }
.toast-body a { color: var(--c-dogs); text-decoration: underline; }
.toast-close { flex: 0 0 auto; color: var(--c-dim); padding: 0 var(--s-1); font-size: 1rem; line-height: 1; }
.toast-close:hover { color: var(--c-text); }
/* ---------- skeleton / loading ----------------------------------------- */
.skeleton {
position: relative;
display: inline-block;
min-width: 3ch; min-height: 1em;
border-radius: var(--r-xs);
background: var(--c-panel-3);
color: transparent !important;
overflow: hidden;
user-select: none;
}
.skeleton::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
transform: translateX(-100%);
animation: shimmer 1.6s var(--ease-in-out) infinite;
}
.skeleton-block { display: block; width: 100%; min-height: 3rem; border-radius: var(--r-md); }
.spinner {
width: 20px; height: 20px; border-radius: 50%;
border: 2px solid var(--c-line-strong);
border-top-color: var(--c-text);
animation: spin 0.8s linear infinite;
}
/* ---------- lock screen (dapp pre-launch / wrong chain) ----------------- */
.lock {
position: relative;
display: grid; place-items: center; text-align: center;
gap: var(--s-4);
padding: clamp(2rem, 6vw, 4rem) var(--s-5);
border: 1px dashed var(--c-line-strong);
border-radius: var(--r-xl);
background: radial-gradient(60% 80% at 50% 0%, rgba(255, 255, 255, 0.03), transparent), var(--c-panel);
}
.lock-icon { font-size: 2.5rem; line-height: 1; }
.lock ol { text-align: left; color: var(--c-dim); display: grid; gap: var(--s-2); max-width: 46ch; }
.lock ol b { color: var(--c-text); }
/* ---------- reveal on scroll ------------------------------------------- */
[data-reveal] {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
/* promote only while the reveal can still run; once visible the layer is released */
[data-reveal]:not(.is-visible) { will-change: opacity, transform; }
[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
/* ---------- footer ------------------------------------------------------ */
.footer {
border-top: 1px solid var(--c-line);
padding-block: var(--s-7) var(--s-6);
color: var(--c-dim);
font-size: var(--t-sm);
background: var(--c-bg-deep);
}
.footer a { color: var(--c-dim); }
.footer a:hover { color: var(--c-text); }
.footer-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer-addr { display: grid; gap: var(--s-1); }
.footer-addr .num { font-size: var(--t-xs); color: var(--c-text); }
.addr { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--f-mono); font-size: var(--t-sm); }
.addr .copy { color: var(--c-dim); }
.addr .copy:hover { color: var(--c-text); }
/* ---------- embers canvas ---------------------------------------------- */
.embers {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: var(--z-embers);
}
/* ---------- keyframes --------------------------------------------------- */
@keyframes reveal {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.8); }
}
@keyframes vs-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
@keyframes vs-glow {
50% { opacity: 1; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
@keyframes count {
0% { transform: scale(1); }
40% { transform: scale(1.04); }
100% { transform: scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toast-in {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: none; }
}
@keyframes toast-out {
to { opacity: 0; transform: translateY(8px) scale(0.98); }
}
.anim-float { animation: float 6s var(--ease-in-out) infinite; }
.anim-float-slow { animation: float 9s var(--ease-in-out) infinite; }
/* ---------- reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
[data-reveal] { opacity: 1; transform: none; }
.vs, .vs::after, .anim-float, .anim-float-slow, .badge-live .dot { animation: none; }
.card:hover, .btn:hover { transform: none; }
.embers { display: none; }
}
/* ---------- print ------------------------------------------------------- */
@media print {
.topbar, .embers, .toast-stack { display: none !important; }
body { background: #fff; color: #000; }
}