/* Final Wallet dashboard — the website's design language on the actuator. * * One token block, two themes. DARK is final-de.fi's stage: near-black ground, * deep-blue glass, the violet → indigo → magenta → cyan ramp. LIGHT is the same * ramp on cool white paper, each text accent darkened one step so it passes AA * (the contrast table is in docs/plans/2026-09-04-wallet-explorer-visual-system.md). * The explorer carries the SAME block (FinalBackend/explorer/views/theme.js); * change them together. * * Semantics (DESIGN.md): --live = in flight / authorised-not-settled, * --commit = held / settled, --bad = failure AND one-way latches. The site's * cyan and electric blue are fills only — never text. * * Mechanism unchanged: the system preference decides, unless data-theme on * (the cookie-set switch) says otherwise. */ /* ── faces (vendored, OFL — font-OFL.txt beside them) ─────────────────────── */ @font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;src:url(../font-sora-latin-wght.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(../font-inter-latin-wght.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ── tokens: light (cool white paper) + the theme-independent block ────────── */ :root{ --bg:#f7f8fc;--panel:#ffffff;--panel2:#f1f3fa; --ink:#0b1020;--ink-dim:#3f4761;--muted:#5c6482; --line:rgba(59,72,150,.14);--line2:rgba(124,58,237,.34);--chip:rgba(59,72,150,.07); --live:#7c3aed;--live-soft:rgba(124,58,237,.10); --commit:#0f766e;--commit-soft:rgba(15,118,110,.10); --good:#15803d;--bad:#dc2626;--bad-soft:rgba(220,38,38,.10); --tick:rgba(59,72,150,.22);--focus:#7c3aed; --mesh:radial-gradient(at 0% 0%,rgba(139,92,246,.10) 0,transparent 50%), radial-gradient(at 100% 0%,rgba(59,130,246,.08) 0,transparent 50%), radial-gradient(at 100% 100%,rgba(192,38,211,.06) 0,transparent 50%), radial-gradient(at 0% 100%,rgba(34,211,197,.08) 0,transparent 50%); --brand-line:var(--grad-accent); --glow:rgba(124,58,237,.28); --panel-blur:0px;--shadow:0 18px 44px rgba(15,23,42,.10); --violet:#8b5cf6;--violet-soft:#a78bfa;--indigo:#3b82f6;--electric:#2401f2; --magenta:#c026d3;--cyan:#22d3c5; --grad-accent:linear-gradient(96deg,#c233fb 0%,#a02ae4 52%,#8b5cf6 100%); --grad-primary:linear-gradient(96deg,#2401f2 0%,#3f3bfb 55%,#5560fe 100%); --grad-strand:linear-gradient(135deg,#22d3c5 0%,#3b82f6 55%,#a78bfa 100%); --grad-hairline:linear-gradient(90deg,transparent,rgba(167,139,250,.45),transparent); --radius:14px;--radius-lg:18px;--radius-sm:8px; --ease:cubic-bezier(.22,.61,.36,1); --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; --sans:"Inter",ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --display:"Sora",var(--sans); } /* ── tokens: dark (final-de.fi's stage) ───────────────────────────────────── */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --bg:#000205;--panel:#050914;--panel2:#0a1020; --ink:#f5f7ff;--ink-dim:#b9c0d4;--muted:#97a0b8; --line:rgba(148,163,220,.14);--line2:rgba(167,139,250,.32);--chip:rgba(148,163,220,.08); --live:#8b5cf6;--live-soft:rgba(139,92,246,.16); --commit:#22d3c5;--commit-soft:rgba(34,211,197,.14); --good:#10b981;--bad:#ef4444;--bad-soft:rgba(239,68,68,.16); --tick:rgba(148,163,220,.18);--focus:#a78bfa; --mesh:radial-gradient(at 0% 0%,rgba(139,92,246,.16) 0,transparent 50%), radial-gradient(at 100% 0%,rgba(59,130,246,.12) 0,transparent 50%), radial-gradient(at 100% 100%,rgba(192,38,211,.10) 0,transparent 50%), radial-gradient(at 0% 100%,rgba(34,211,197,.10) 0,transparent 50%); --glow:rgba(139,92,246,.45); --panel-blur:10px;--shadow:0 18px 44px rgba(0,0,0,.55); }} :root[data-theme="dark"]{ --bg:#000205;--panel:#050914;--panel2:#0a1020; --ink:#f5f7ff;--ink-dim:#b9c0d4;--muted:#97a0b8; --line:rgba(148,163,220,.14);--line2:rgba(167,139,250,.32);--chip:rgba(148,163,220,.08); --live:#8b5cf6;--live-soft:rgba(139,92,246,.16); --commit:#22d3c5;--commit-soft:rgba(34,211,197,.14); --good:#10b981;--bad:#ef4444;--bad-soft:rgba(239,68,68,.16); --tick:rgba(148,163,220,.18);--focus:#a78bfa; --mesh:radial-gradient(at 0% 0%,rgba(139,92,246,.16) 0,transparent 50%), radial-gradient(at 100% 0%,rgba(59,130,246,.12) 0,transparent 50%), radial-gradient(at 100% 100%,rgba(192,38,211,.10) 0,transparent 50%), radial-gradient(at 0% 100%,rgba(34,211,197,.10) 0,transparent 50%); --glow:rgba(139,92,246,.45); --panel-blur:10px;--shadow:0 18px 44px rgba(0,0,0,.55); } /* ── base ───────────────────────────────────────────────────────────────── */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background-color:var(--bg);background-image:var(--mesh); background-attachment:fixed;color:var(--ink);font:14px/1.55 var(--sans); font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} a{color:inherit;text-decoration:none} a:hover{color:var(--live)} :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px} .mono,code{font-family:var(--mono);font-size:12.5px} h1{font:600 26px/1.15 var(--display);letter-spacing:-.02em;margin:0 0 4px} h2{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em; color:var(--muted);margin:30px 0 10px} h3{font:600 15px/1.3 var(--display);letter-spacing:-.01em;margin:0 0 8px} .sub{color:var(--muted);font-size:12.5px;margin:0 0 18px;font-family:var(--mono);word-break:break-all} .lede{color:var(--ink-dim);font:15px/1.5 var(--sans);margin:0 0 18px;max-width:560px} .hint,details.adv .hint{font:12px/1.5 var(--sans);color:var(--muted);margin:6px 0} /* ── chrome (the explorer's idiom, on glass) ─────────────────────────────── */ header{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--panel) 82%,transparent); border-bottom:1px solid var(--line);backdrop-filter:blur(var(--panel-blur));-webkit-backdrop-filter:blur(var(--panel-blur))} .hwrap{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap} .brand{font:650 15px var(--mono);letter-spacing:-.01em;display:flex;align-items:baseline;gap:10px} .brand:hover{color:var(--ink)} .brand .word{padding-bottom:2px;background:var(--brand-line) no-repeat left bottom/100% 2px} .env{font:600 10.5px var(--mono);letter-spacing:.06em;padding:3px 9px;border-radius:6px; border:1px solid var(--line2);color:var(--muted);white-space:nowrap} .env b{color:var(--live);font-weight:600} .hspacer{margin-left:auto} .mode{display:flex;border:1px solid var(--line2);border-radius:var(--radius-sm);overflow:hidden;background:var(--chip)} .mode a,.mode button{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase; padding:6px 10px;color:var(--muted);border-right:1px solid var(--line2);background:none;border-top:0;border-bottom:0;border-left:0;cursor:pointer; transition:color .2s var(--ease),background-color .2s var(--ease)} .mode a:last-child,.mode button:last-child{border-right:0} .mode a:hover,.mode button:hover{color:var(--ink);background:var(--line)} .mode a[aria-current],.mode button[aria-current]{color:var(--live);background:var(--live-soft)} /* the language selector: the same instrument idiom, a flag + code, the native names in a dropdown */ /* ── the language picker — ONE block in two places: FinalWallet dashboard/public/theme.css and FinalBackend explorer/views/theme.js. Same markup (details.lang > summary > flag + code; ul.langs > li > a > flag + name + code), same rules; change together. The list opens below the summary, aligned to its inline end, above the page (its header carries the z-level), is as wide as its longest row so every language sits on one line, and scrolls past ~14 rows with a scrollbar that is always drawn. ── */ details.lang{position:relative} details.lang summary{list-style:none;display:flex;align-items:center;gap:7px;font:600 10px var(--mono);letter-spacing:.08em; text-transform:uppercase;padding:5px 10px;color:var(--muted);cursor:pointer;border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--chip)} details.lang summary::-webkit-details-marker{display:none} details.lang summary:hover,details.lang[open] summary{color:var(--ink);background:var(--line)} details.lang .langs{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:30;width:max-content;min-width:240px;max-width:min(92vw,380px);max-height:min(60vh,460px);overflow-y:auto;overflow-x:hidden;margin:0;padding:6px;list-style:none; background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); backdrop-filter:blur(var(--panel-blur));-webkit-backdrop-filter:blur(var(--panel-blur));animation:rise .2s var(--ease) both; scrollbar-width:thin;scrollbar-color:var(--line2) transparent;scrollbar-gutter:stable} details.lang .langs::-webkit-scrollbar{width:8px} details.lang .langs::-webkit-scrollbar-track{background:transparent} details.lang .langs::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:2px solid var(--panel)} details.lang .langs a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius-sm);font:500 12.5px var(--sans);color:var(--ink);white-space:nowrap} details.lang .langs a:hover{background:var(--chip);color:var(--ink)} details.lang .langs a[aria-current]{color:var(--live);background:var(--live-soft)} details.lang .langs .code{margin-inline-start:auto;padding-inline-start:12px;font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} details.lang .langs .name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} /* the account switcher (dashboard header, §14.12): the language menu's dropdown with the account's name and short address */ details.acct summary{text-transform:none;letter-spacing:0;gap:8px;max-width:min(46vw,320px)} details.acct summary .nm{font:600 11px var(--sans);color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} details.acct summary .code{font:600 10px var(--mono);letter-spacing:.04em;color:var(--muted);text-transform:none} details.acct .langs a .code{text-transform:none;letter-spacing:.04em} details.acct summary[data-elsewhere]{border-style:dashed} details.acct .langs li.note{padding:7px 10px 9px;font:500 11.5px var(--sans);color:var(--muted);border-bottom:1px solid var(--line);margin-bottom:4px;white-space:normal;max-width:340px;line-height:1.35} /* the colour-mode switch: words on wide screens, glyphs on narrow ones */ .mode .ico{display:none;line-height:0} .mode .ico svg{display:block} /* flags (views/flags.js): 4:3, 2px corners, a 1px inset hairline in --line so light flags hold their edge on paper and dark ones on the stage */ .flag{display:inline-block;width:20px;height:15px;border-radius:2px;overflow:hidden;flex:none;vertical-align:middle} .flag.lg{width:24px;height:18px} .flag .edge{stroke:var(--line)} main{max-width:1200px;margin:0 auto;padding:26px 20px 64px} footer{border-top:1px solid var(--line);margin-top:20px} .fwrap{max-width:1200px;margin:0 auto;padding:18px 20px 40px;color:var(--muted); font:11px var(--mono);display:flex;gap:18px;flex-wrap:wrap} /* ── surfaces: glass cards with the site's top hairline ──────────────────── */ .panel,.card,.meter,.kv,.ticket,nav.rail,details.adv,.note,.gauge,.hero{position:relative} .panel,.card,.meter,.kv,.ticket,nav.rail,details.adv,.gauge{ background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); backdrop-filter:blur(var(--panel-blur));-webkit-backdrop-filter:blur(var(--panel-blur))} .panel::before,.card::before,.meter::before,.ticket::before,nav.rail::before,.gauge::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding-top:1px;background:var(--grad-hairline); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none} .panel{overflow:hidden} .pad{padding:18px} .meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin:0 0 6px} .meter{padding:12px 14px 10px} .meter .k{font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.11em;color:var(--muted)} .meter .v{font:600 20px/1.25 var(--mono);letter-spacing:-.02em;margin-top:5px;word-break:break-word} .meter .u{font:500 10.5px var(--mono);color:var(--muted);margin-left:4px} .pill{display:inline-block;font:600 10px var(--mono);letter-spacing:.07em;text-transform:uppercase; padding:2px 8px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)} .pill.ok,.pill.commit{color:var(--commit);border-color:var(--commit);background:var(--commit-soft)} .pill.live{color:var(--live);border-color:var(--live);background:var(--live-soft)} .pill.bad{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)} .pill.dim{opacity:.75} .kv{margin:0;overflow:hidden} .kv .row{display:grid;grid-template-columns:190px 1fr;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line)} .kv .row:last-child{border-bottom:0} .kv dt{font:600 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)} .kv dd{margin:0;font-size:13px;word-break:break-word} @media (max-width:640px){.kv .row{grid-template-columns:1fr}} .note{border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:var(--radius-sm); background:var(--panel);padding:10px 14px;font-size:12.5px;color:var(--muted);margin:10px 0;text-align:left} .note.commit{border-left-color:var(--commit)} .note.bad{border-left-color:var(--bad);color:var(--ink)} .note.live{border-left-color:var(--live)} table.data{width:100%;border-collapse:collapse;font-size:12.5px} table.data th{font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted); text-align:left;padding:8px 12px;border-bottom:1px solid var(--line2)} table.data td{padding:8px 12px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;vertical-align:top} table.data tr:last-child td{border-bottom:0} .scroll{overflow-x:auto} /* ── forms + buttons ─────────────────────────────────────────────────────── */ label.f{display:block;margin:0 0 12px} label.f .l{display:block;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.1em; color:var(--muted);margin-bottom:5px} label.f .hint{display:block;font:11px var(--sans);color:var(--muted);margin-top:4px} input.t,select.t,textarea.t{width:100%;padding:9px 12px;border:1px solid var(--line2);border-radius:var(--radius-sm); background:var(--bg);color:var(--ink);font:12.5px var(--mono);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)} input.t:focus,select.t:focus,textarea.t:focus{outline:none;border-color:var(--live);box-shadow:0 0 0 3px var(--live-soft)} input.t::placeholder,textarea.t::placeholder{color:var(--muted)} textarea.t{min-height:74px;resize:vertical} .btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:9px 16px; border:1px solid var(--line2);border-radius:10px;background:var(--chip);color:var(--ink);cursor:pointer; font:600 13px/1.2 var(--sans);letter-spacing:-.005em;white-space:nowrap; transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease),background-color .28s var(--ease)} .btn:hover{background:var(--line);transform:translateY(-1px)} .btn.primary{border-color:transparent;background:var(--grad-primary);background-origin:border-box;color:#fff; box-shadow:0 8px 26px -10px rgba(64,76,253,.9)} .btn.primary:hover{background:var(--grad-primary);background-origin:border-box;box-shadow:0 14px 34px -10px rgba(80,92,255,1)} .btn.commit{border-color:var(--commit);background:var(--commit-soft);color:var(--commit)} .btn.commit:hover{background:var(--commit-soft);box-shadow:0 10px 28px -14px var(--commit)} .btn.danger{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)} .btn.danger:hover{background:var(--bad-soft)} .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none} .frow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end} .frow>label.f{flex:1 1 200px;margin-bottom:0} .seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--radius-sm);overflow:hidden} .seg button{font:600 10.5px var(--mono);letter-spacing:.05em;padding:6px 12px;color:var(--muted); background:none;border:0;border-right:1px solid var(--line2);cursor:pointer} .seg button:last-child{border-right:0} .seg button[aria-pressed="true"]{color:var(--live);background:var(--live-soft)} /* ── basic view: the balance inside the chains ───────────────────────────── */ .hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 16px 20px; border-radius:var(--radius-lg);overflow:hidden} .hero>*{position:relative;z-index:1} .hero .k{font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)} .hero .bal{font:600 30px/1.15 var(--mono);letter-spacing:-.02em;margin:6px 0 0;word-break:break-word} .hero .bal .u{font-size:13px;color:var(--muted);margin-left:6px;letter-spacing:0} .hero .addr{font:11.5px var(--mono);color:var(--muted);margin-top:6px;word-break:break-all} .constellation{position:relative;width:min(380px,100%);aspect-ratio:1;margin:0 auto} .constellation svg{display:block;width:100%;height:100%} .hero-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; pointer-events:none;padding:0 22%} .hero-core>*{pointer-events:auto} .hero .chainrow{margin-top:10px} .actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:14px 0} .twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:860px){.twocol{grid-template-columns:1fr}} /* the figures (art.js): strand strokes, dashed tracks, the lit arc */ .constellation-svg .track,.gauge-svg .track,.gate-art-svg .track{stroke:var(--tick);stroke-width:1.5;stroke-dasharray:3 6} .constellation-svg .tick,.gauge-svg .tick,.gate-art-svg .tick{stroke:var(--tick);stroke-width:1} .constellation-svg .arc,.gauge-svg .arc,.gate-art-svg .arc{stroke:url(#cst-strand);stroke-width:3;stroke-linecap:round; transition:stroke-dasharray .6s var(--ease)} .gauge-svg .arc{stroke:url(#gauge-strand)} .gate-art-svg .arc{stroke:url(#g-art-strand);stroke-width:2;opacity:.75} .constellation-svg .arc.frozen{stroke:var(--bad)} .constellation-svg .node{cursor:pointer;outline:none} .constellation-svg .node .beam{stroke:var(--tick);stroke-width:1.2} .constellation-svg .node .dot{fill:var(--panel);stroke:var(--tick);stroke-width:1.5;stroke-dasharray:3 4; transition:stroke .3s var(--ease),fill .3s var(--ease)} .constellation-svg .node .code{fill:var(--muted);font:600 10px var(--mono);letter-spacing:.06em;pointer-events:none} .constellation-svg .node.on .beam{stroke:url(#cst-strand);opacity:.7} .constellation-svg .node.on .dot{stroke:url(#cst-strand);stroke-dasharray:none;fill:var(--live-soft)} .constellation-svg .node.on .code{fill:var(--ink)} .constellation-svg .node.pending .dot{stroke:var(--live);stroke-dasharray:none;animation:pulse 1.6s var(--ease) infinite} .constellation-svg .node.frozen .dot{stroke:var(--bad);stroke-dasharray:none;fill:var(--bad-soft)} .constellation-svg .node.frozen .code{fill:var(--bad)} .constellation-svg .node.selected .dot{filter:url(#cst-glow);stroke-width:2.2} .constellation-svg .node:hover .dot,.constellation-svg .node:focus-visible .dot{stroke:var(--live);stroke-dasharray:none} .gate-art-svg .dot{fill:var(--panel);stroke:url(#g-art-strand);stroke-width:1.6;opacity:.85} .gate-art-svg .beam{stroke:url(#g-art-strand);stroke-width:1.2;opacity:.45} .gate-art-svg .seal{stroke:url(#g-art-strand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:url(#g-art-glow)} .gate-art-svg .seal .core{fill:#fff;stroke:none} .gate-art-svg .particle{fill:#fff;filter:url(#g-art-glow)} .gate-art-svg .halo,.constellation-svg .halo,.gauge-svg .halo{pointer-events:none} /* ── advanced view: the instrument panel ─────────────────────────────────── */ .panelgrid{display:grid;grid-template-columns:232px 1fr;gap:16px;align-items:start} @media (max-width:860px){.panelgrid{grid-template-columns:1fr}} nav.rail{position:sticky;top:72px;display:flex;flex-direction:column;gap:2px;padding:8px} nav.rail a{position:relative;font:500 12.5px var(--sans);padding:8px 12px;border-radius:var(--radius-sm);color:var(--muted); transition:color .2s var(--ease),background-color .2s var(--ease)} nav.rail a:hover{color:var(--ink);background:var(--chip)} nav.rail a[aria-current]{color:var(--ink);background:var(--chip)} nav.rail a[aria-current]::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--grad-accent)} nav.rail .sep{border-top:1px solid var(--line);margin:6px 4px} nav.rail .grp{font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);padding:8px 12px 3px} /* ── the signature: the intent ticket ────────────────────────────────────── */ .ticket{border-color:var(--line2);border-radius:var(--radius-lg);overflow:hidden;margin:14px 0} .ticket .head{display:flex;justify-content:space-between;align-items:baseline;gap:10px; padding:12px 16px;background:var(--panel2);border-bottom:1px solid var(--line)} .ticket .head .t{font:650 12px var(--mono);letter-spacing:.06em;text-transform:uppercase} .ticket .head .n{font:600 10.5px var(--mono);color:var(--muted)} .ticket .body{padding:6px 16px} .ticket .fr{display:grid;grid-template-columns:170px 1fr;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)} .ticket .fr:last-child{border-bottom:0} .ticket .fr .k{font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding-top:2px} .ticket .fr .v{font:12px var(--mono);word-break:break-all} .ticket .tear{position:relative;border-top:2px dashed var(--line2);margin:0} .ticket .tear::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--grad-hairline);opacity:.8} .ticket .foot{padding:12px 16px;background:var(--panel2)} .ticket .foot .k{font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)} .ticket .digest{font:600 13px var(--mono);letter-spacing:.22em;word-break:break-all;margin-top:4px;color:var(--live); animation:reveal .6s var(--ease) both} .ticket.oneway{border-color:var(--bad)} .ticket.oneway .head{background:var(--bad-soft)} .ticket.oneway .digest{color:var(--bad)} .ticket .actionsrow{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap} /* nothing moves at the moment of signing */ .ticket .actionsrow .btn,.ticket .actionsrow .btn:hover{transform:none} @media (max-width:640px){.ticket .fr{grid-template-columns:1fr}} /* status line under async actions */ .status{font:12px var(--mono);color:var(--muted);margin:8px 0;word-break:break-all} .status.ok{color:var(--good)} .status.err{color:var(--bad)} .spin::after{content:"…";animation:d 1.2s steps(4,end) infinite} @keyframes d{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}} /* chain chips (status lines, advanced) */ .chains{display:flex;gap:8px;flex-wrap:wrap;justify-content:center} .chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);border-radius:999px; padding:5px 12px;font:600 10.5px var(--mono);letter-spacing:.04em;color:var(--muted);background:var(--panel);cursor:pointer} .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--tick)} .chip.on{color:var(--ink)} .chip.on .dot{background:var(--commit)} .chip.frozen{color:var(--bad);border-color:var(--bad)} .chip.frozen .dot{background:var(--bad)} /* ── the gate, its doors, the gauge ──────────────────────────────────────── */ .gate{display:flex;flex-direction:column;align-items:center;gap:14px;padding:40px 16px 56px;text-align:center;overflow-wrap:anywhere} /* a long label in a full-width action wraps rather than pushing the page wider than a phone */ .actions .btn{white-space:normal} /* inside the centred gate column the grid needs a definite width, or auto-fit lays two 220px columns into a 358px phone and the page scrolls sideways */ .gate .actions,.gate .cards,.gate .kv,.gate details.adv,.gate .note{width:100%} .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;width:100%;max-width:840px} .card{text-align:left;padding:16px;cursor:pointer;font:inherit;color:inherit; transition:border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease)} .card:hover:not(:disabled),.card:focus-visible{border-color:var(--line2);transform:translateY(-2px); box-shadow:var(--shadow),0 0 0 1px var(--live-soft),0 0 42px -12px var(--glow)} .card:disabled{opacity:.45;cursor:not-allowed} /* discovery found no wallet behind this door: dimmed, still clickable (a click looks again) */ .card.is-missing{opacity:.6} .card .ct{font:600 14.5px/1.3 var(--display);letter-spacing:-.01em;display:block;margin-bottom:6px} .card .cd{font:12.5px/1.5 var(--sans);color:var(--muted);display:block} .card .ct .pill{margin-left:6px;vertical-align:middle;font-size:9px} .gate .cards.doors{max-width:900px} .card.door{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:18px} .card.door .ci{grid-row:1/span 2;display:flex;width:48px;height:48px} .card.door .ci svg,.card.door .ci img{width:48px;height:48px;border-radius:10px} .card.door .ct{margin-bottom:2px} .gate-art{display:flex;justify-content:center;margin-bottom:-10px;filter:drop-shadow(0 0 22px var(--glow))} .gate-art svg{max-width:100%;height:auto} .gate-art.mining svg{animation:breathe 2.4s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}} .progresswrap{width:100%;max-width:560px;height:8px;border-radius:4px;background:var(--line);overflow:hidden} .progresswrap .fill{height:100%;width:0%;background:var(--grad-strand);transition:width .4s ease} .gauge{position:relative;width:220px;height:220px;border-radius:50%;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none} .gauge::before{display:none} .gauge svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 18px var(--glow))} .gauge-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px} .gauge-core b{font:600 30px/1 var(--mono);letter-spacing:-.02em} .gauge-core span{font:600 9.5px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)} /* ── the connect notice: a sheet over the page, Final DeFi's words before the wallet's prompt ── */ .sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px; background:rgba(0,2,5,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .2s var(--ease) both} .card.notice{width:min(520px,100%);padding:22px;cursor:default;text-align:left;animation:rise .28s var(--ease) both} .card.notice:hover{transform:none;box-shadow:var(--shadow)} .notice-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px} .notice-head h3{margin:0 0 4px} .notice-head .cd{margin:0} .notice-icon{width:44px;height:44px;border-radius:10px;flex:none} .notice-icon-blank{display:block;background:var(--grad-strand);opacity:.55} .notice-points{margin:0 0 12px;padding-left:18px;font:13px/1.55 var(--sans);color:var(--ink-dim)} .notice-points li{margin:4px 0} .notice-assurance{margin:0 0 10px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--live-soft); border:1px solid var(--line2);font:12.5px/1.5 var(--sans);color:var(--ink)} .notice-warning{margin:0 0 12px;font:600 13px var(--display);color:var(--ink)} .notice-remember{display:flex;gap:8px;align-items:center;font:12.5px var(--sans);color:var(--muted);margin-bottom:14px} .notice-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap} @keyframes fade{from{opacity:0}} details.adv{padding:8px 14px;text-align:left} details.adv summary{cursor:pointer;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} details.adv[open] summary{margin-bottom:8px} /* ── motion: transitional, ambient, state ────────────────────────────────── */ .gate,#work>*,#surface>*,.ticket,.panelgrid{animation:rise .24s var(--ease) both} .cards .card:nth-child(1){animation:rise .3s var(--ease) both .04s} .cards .card:nth-child(2){animation:rise .3s var(--ease) both .08s} .cards .card:nth-child(3){animation:rise .3s var(--ease) both .12s} .cards .card:nth-child(4){animation:rise .3s var(--ease) both .16s} .cards .card:nth-child(5){animation:rise .3s var(--ease) both .2s} .cards .card:nth-child(6){animation:rise .3s var(--ease) both .24s} @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes pulse{50%{opacity:.55}} @keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}} .pulse{animation:pulse 1.6s var(--ease) infinite} /* ── small screens ───────────────────────────────────────────────────────── */ @media (max-width:640px){ main{padding:18px 14px 48px} /* two lines, in every language: brand · env · language, then view · colour mode */ .hwrap{padding:10px 14px;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"brand env lang" "view view theme";align-items:center;row-gap:8px;column-gap:10px} .brand{grid-area:brand}.env{grid-area:env;justify-self:start}.hspacer{display:none} .mode.view{grid-area:view;justify-self:start}.mode.theme{grid-area:theme;justify-self:end} details.lang{grid-area:lang;justify-self:end} .env .chain{display:none} .mode.theme .lbl{display:none}.mode.theme .ico{display:block}.mode.theme a{padding:6px 9px} h1{font-size:22px} .hero .bal{font-size:24px} .constellation{width:min(300px,100%)} .gauge{width:180px;height:180px} .gauge-core b{font-size:24px} } @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}