/* Whitman Technological — Museum design system. Ported from the interim Default.htm (v4), which is the design reference. No webfonts, no external dependencies. */ :root{ --ink:#e8e4da; /* warm off-white */ --ink-dim:#9a958a; --bg:#14161a; /* deep charcoal */ --bg-raise:#1c1f25; --line:#31353d; --amber:#f5891d; /* Whitman orange — primary accent */ --amber-dim:#a8641f; --blue:#3ab5e6; /* Whitman blue — links & live accents */ --blue-dim:#25718f; --green:#7fb069; --serif:Georgia,'Times New Roman',serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6} a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline} /* utility bar — keeps existing customers' login paths one click away */ .utility{background:#0e1013;border-bottom:1px solid var(--line);font-size:.78rem} .utility .wrap{display:flex;justify-content:flex-end;gap:1.4em;padding:.45em 1.2em;max-width:1080px;margin:0 auto;flex-wrap:wrap} .utility a{color:var(--ink-dim)} .utility a:hover{color:var(--amber)} header.site{max-width:1080px;margin:0 auto;padding:1em 1.2em 0;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:.6em;position:relative;z-index:2} .brand{display:flex;align-items:flex-start} /* logo rides down into the blueprint grid below — transparent png, so it floats over the squares */ .brand img{display:block;height:130px;width:auto;margin-bottom:-72px;filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))} .brand:hover{text-decoration:none} nav.main{padding-top:1.1em} @media(max-width:680px){ .brand img{height:88px;margin-bottom:-42px} nav.main{padding-top:.5em} } .wordmark{font-family:var(--serif);font-size:1.15rem;letter-spacing:.04em;color:var(--ink);padding-bottom:.35em; background:linear-gradient(90deg,var(--blue) 0 55%,var(--amber) 55% 100%) bottom left/100% 2px no-repeat} /* echo of the logo's blue/orange trace */ .wordmark b{color:var(--amber);font-weight:normal} nav.main{display:flex;gap:1.5em;font-size:.9rem} nav.main a{color:var(--ink-dim)} nav.main a:hover{color:var(--ink);text-decoration:none} /* blueprint-grid band, shared by the home hero and interior page headers */ .hero,.page-head{ border-top:1px solid var(--line);border-bottom:1px solid var(--line); background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(58,181,230,.05) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(58,181,230,.05) 39px 40px), radial-gradient(ellipse 90% 120% at 50% -20%, #1d2129 0%, var(--bg) 70%); } .hero{text-align:center;padding:7em 1.2em 5em} .hero .kicker{font-size:.8rem;letter-spacing:.35em;text-transform:uppercase;color:var(--amber);margin-bottom:1.4em} .hero h1{font-family:var(--serif);font-weight:normal;font-size:clamp(1.9rem,5vw,3.3rem);line-height:1.15;max-width:17em;margin:0 auto} .hero p.lede{max-width:44em;margin:1.6em auto 0;color:var(--ink-dim);font-size:1.05rem} .hero .cta{margin-top:2.4em;display:flex;gap:1em;justify-content:center;flex-wrap:wrap} .btn{display:inline-block;padding:.7em 1.5em;border:1px solid var(--blue-dim);border-radius:2px;color:var(--blue);font-size:.9rem;letter-spacing:.06em} .btn:hover{background:rgba(58,181,230,.08);text-decoration:none} .btn.solid{background:var(--amber);color:#14161a;border-color:var(--amber)} .btn.solid:hover{background:#eab46b} /* interior page header — same blueprint band, placard voice */ .page-head{padding:5.5em 1.2em 2.6em} .page-head .inner{max-width:860px;margin:0 auto} .page-head .crumb{font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);margin-bottom:1.1em} .page-head .crumb a{color:var(--amber)} .page-head h1{font-family:var(--serif);font-weight:normal;font-size:clamp(1.7rem,4.5vw,2.7rem);line-height:1.2} .page-head p.sub{color:var(--ink-dim);max-width:44em;margin-top:.8em} .page-head .tag{margin-top:1.2em} main{max-width:1080px;margin:0 auto;padding:0 1.2em} main.narrow{max-width:860px} section{padding:4em 0 1em} h2.hall{font-family:var(--serif);font-weight:normal;font-size:1.6rem;margin-bottom:.4em} .hall-note{color:var(--ink-dim);font-size:.92rem;max-width:46em;margin-bottom:2.2em} .exhibits{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1em;padding-bottom:2em} .placard{ background:var(--bg-raise);border:1px solid var(--line);border-radius:3px; padding:1.4em 1.4em 1.2em;position:relative;display:flex;flex-direction:column;gap:.55em; transition:transform .15s ease,border-color .15s ease; } a.placard{color:inherit} a.placard:hover{text-decoration:none;transform:translateY(-3px);border-color:var(--amber-dim)} .placard .no{font-family:var(--serif);color:var(--amber-dim);font-size:.85rem;letter-spacing:.15em} .placard h3{font-family:var(--serif);font-weight:normal;font-size:1.25rem} .placard p{color:var(--ink-dim);font-size:.9rem;flex-grow:1} .tag{align-self:flex-start;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;padding:.25em .7em;border-radius:2px;border:1px solid;display:inline-block} .tag.open{color:var(--blue);border-color:var(--blue-dim)} .tag.prep{color:var(--ink-dim);border-color:var(--line)} .tag.seasonal{color:var(--amber);border-color:var(--amber-dim)} /* mounted-print photo frame, sits below the placard text */ .ex-photo{margin:.5em 0 .3em;border:1px solid var(--line);background:#0e1013;padding:6px} .ex-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} .wing-label{margin:2.6em 0 1.1em;color:var(--ink-dim);font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:.6em} /* exhibit article prose */ .prose{padding:2.6em 0 1em} .prose h2{font-family:var(--serif);font-weight:normal;font-size:1.5rem;margin:1.8em 0 .5em;padding-top:1.2em;border-top:1px solid var(--line)} .prose h2:first-child{margin-top:0;border-top:none;padding-top:0} .prose h3{font-family:var(--serif);font-weight:normal;font-size:1.15rem;margin:1.4em 0 .3em} .prose p{margin:.8em 0;max-width:52em} .prose ul,.prose ol{margin:.8em 0 .8em 1.4em;max-width:50em} .prose li{margin:.4em 0} .prose .muted{color:var(--ink-dim)} .spec-line{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);margin:1.2em 0} .spec-line b{color:var(--amber);font-weight:normal} /* mounted prints: photos, video, and code presented as framed artifacts */ .photo-print,.video-frame,.code-print{margin:1.6em 0;border:1px solid var(--line);background:#0e1013;padding:6px} .photo-print img{display:block;width:100%;height:auto} .photo-print figcaption,.video-frame figcaption,.code-print figcaption{padding:.6em .4em .2em;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)} .video-frame .ratio{position:relative;aspect-ratio:16/9} .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .video-frame video{display:block;width:100%;height:auto} /* side-by-side mounted prints (collapse to a stack on small screens). align-items:start lets each placard be its own height — museum placards are custom-fit to the piece, not squared off to their neighbors. */ .media-pair,.media-trio{display:grid;gap:1.1em;margin:2.2em 0;align-items:start} .media-pair{grid-template-columns:1fr 1fr;max-width:880px} .media-trio{grid-template-columns:1fr 1fr 1fr} .media-pair>.photo-print,.media-pair>.video-frame,.media-trio>.photo-print,.media-trio>.video-frame{margin:0;max-width:none} @media(max-width:760px){.media-pair,.media-trio{grid-template-columns:1fr}} .code-print>div{max-width:100%} /* the hilite.me fragments only colorize SOME tokens — plain identifiers and punctuation carry no span, so without this they'd inherit the site's light ink and vanish against the white print */ .code-print pre{color:#14161a} pre.plain{background:#101216;border:1px solid var(--line);padding:.9em 1.1em;overflow-x:auto;font-size:.88rem;line-height:1.5;margin:.8em 0;max-width:52em} /* download terms + reveal */ .dl-terms{border:1px solid var(--line);background:var(--bg-raise);border-left:3px solid var(--amber-dim);padding:1.1em 1.4em;margin:1.2em 0;max-width:52em} .dl-terms ul{margin:.4em 0 .2em 1.2em} .dl-terms li{margin:.5em 0;color:var(--ink-dim);font-size:.92rem} details.reveal{margin:1.2em 0} details.reveal summary{list-style:none;cursor:pointer;display:inline-block;padding:.7em 1.5em;background:var(--amber);color:#14161a;border:1px solid var(--amber);border-radius:2px;font-size:.9rem;letter-spacing:.06em} details.reveal summary::-webkit-details-marker{display:none} details.reveal summary:hover{background:#eab46b} details.reveal[open] summary{display:none} .dl-list{list-style:none;margin:1em 0;max-width:52em} .dl-list li{border:1px solid var(--line);background:var(--bg-raise);border-radius:3px;padding:1em 1.3em;margin:.7em 0} .dl-list .file{font-size:1rem} .dl-list .meta{display:block;color:var(--ink-dim);font-size:.85rem;margin-top:.25em} /* circular portrait (transparent png) — no frame, floats on the page */ .prose .portrait{display:block;width:min(280px,70%);height:auto;margin:2.6em auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))} .back-link{display:inline-block;margin:2.2em 0 0;font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim)} .back-link:hover{color:var(--amber);text-decoration:none} /* ── exhibit story stage ────────────────────────────────────────────── Long-form exhibit pages: a sticky full-viewport background layer that crossfades per section (driven by js/exhibit.js), with foreground panels and mounted prints staggered left/right above it. */ .ex-stage{position:relative; background: repeating-linear-gradient(0deg, transparent 0 39px, rgba(58,181,230,.04) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(58,181,230,.04) 39px 40px), #0e1013; border-bottom:1px solid var(--line)} /* NOTE: no overflow on the rail — a clipping ancestor would break the frame's position:sticky (it would pin to the rail's never-scrolling box instead of the viewport). Clipping lives on the frame; drift happens on the inner layer so movement can never reveal the frame's edge. */ .ex-bg-rail{position:absolute;inset:0;z-index:0;pointer-events:none} .ex-bg-frame{position:sticky;top:0;height:100vh;overflow:hidden} .ex-bg-drift{position:absolute;inset:0;will-change:transform} .ex-bg{position:absolute;left:0;right:0;top:-18%;bottom:-18%;opacity:0;transition:opacity 1.6s ease} .ex-bg img,.ex-bg video{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9)} .ex-bg.active{opacity:.28} /* generative canvas backdrops are intrinsically dim — they earn more opacity */ .ex-bg canvas{width:100%;height:100%;display:block} .ex-bg.lumen.active{opacity:.5} .ex-bg.lumen[data-bg="cipher"].active{opacity:.38} /* z-index 3 keeps the lightbox backdrop (mounted inside the flow, sharing its stacking context) above the site header (z 2) when a print is promoted */ .ex-flow{position:relative;z-index:3;max-width:1080px;margin:0 auto;padding:3em 1.2em 6em;counter-reset:exsec} .ex-section{padding:12vh 0 8vh} .ex-section:first-of-type{padding-top:4vh} .ex-section h3{counter-increment:exsec;font-family:var(--serif);font-weight:normal;font-size:1.6rem;margin-bottom:1.4em;display:flex;align-items:baseline;gap:1em} .ex-section h3::before{content:"§ " counter(exsec,decimal-leading-zero);font-family:var(--sans);font-size:.78rem;letter-spacing:.25em;color:var(--amber)} /* bite-sized text chunks ride on translucent placards */ .ex-panel{background:rgba(20,22,26,.86);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); border:1px solid var(--line);border-radius:3px;padding:1.5em 1.7em;max-width:37em;margin:2.2em 0} .ex-panel p{margin:.7em 0;color:var(--ink)} .ex-panel p:first-child{margin-top:0} .ex-panel p:last-child{margin-bottom:0} /* foreground prints sized for the stage; stagger against the panels */ .ex-stage .photo-print,.ex-stage .video-frame{max-width:620px;margin:2.2em 0} /* hero media spans the full flow width — no stagger, no cap */ .ex-stage .video-frame.ex-hero,.ex-stage .photo-print.ex-hero{max-width:none;margin-left:0;margin-right:0} .ex-right{margin-left:auto} /* default rhythm when no explicit sides are set: even sections mirror odd ones */ .ex-section:nth-of-type(even) .ex-panel{margin-left:auto} .ex-section:nth-of-type(even) .photo-print,.ex-section:nth-of-type(even) .video-frame{margin-left:0} .ex-section:nth-of-type(odd) .photo-print,.ex-section:nth-of-type(odd) .video-frame{margin-left:auto} .ex-section .ex-left{margin-left:0} .ex-section .ex-right{margin-left:auto} @media(max-width:760px){ .ex-section{padding:8vh 0 6vh} .ex-panel,.ex-stage .photo-print,.ex-stage .video-frame{margin-left:0!important;margin-right:0!important;max-width:none} } @media(prefers-reduced-motion:reduce){ .ex-bg{transition:none} } /* live/offline status panel (the Lightshow's "take the controls" slot) */ .live-panel{display:flex;align-items:center;flex-wrap:wrap;gap:1em;border:1px solid var(--amber-dim);background:rgba(245,137,29,.06); border-radius:3px;padding:1.1em 1.4em;margin:1.5em 0 0;max-width:44em} .live-panel p{flex:1 1 20em} .live-panel .btn{flex:none} .live-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ink-dim);box-shadow:0 0 0 3px rgba(154,149,138,.15)} .live-panel.online .live-dot{background:var(--green);box-shadow:0 0 0 3px rgba(127,176,105,.2)} .live-panel p{margin:0;font-size:.92rem;color:var(--ink-dim)} .live-panel b{color:var(--ink);font-weight:normal} /* 3D model frame — a print you can pick up and turn over */ .ex-stage .photo-print.model-frame{max-width:760px} .model-frame model-viewer{display:block;width:100%;height:440px;background:#0e1013;--poster-color:#0e1013} .media-trio .model-frame model-viewer{height:300px} .media-pair .model-frame model-viewer{height:360px} /* the hundred websites — a wall of tiny storefronts. Deliberately NOT lightboxable: the thumbnails are all that survive, and they're tiny. */ .thumb-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin:2.4em 0;align-items:start} .thumb-wall img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#0e1013;padding:3px} .era-logos{display:flex;gap:1.5em;flex-wrap:wrap;align-items:center;margin:2.2em 0} .era-logos img{border:1px solid var(--line);background:#fff;padding:8px;max-width:100%;height:auto} /* ── Onyx exhibit tidbits ──────────────────────────────────────────── Interactive demos framed as artworks: dark frame → cream mat → a window into Onyx's own console world (tokens from Onyx-Server\onyx-styling-guide.md). Space Grotesk falls back to system sans until/unless the font is vendored. */ .onyx-tidbit{display:flex;flex-direction:column;align-items:center;margin:2.6em 0} .onyx-tidbit figcaption{padding:.8em .4em 0;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);text-align:center} .onyx-frame{padding:16px;border-radius:6px;background:linear-gradient(155deg,#232326,#141416 60%,#0e0e10);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 26px 48px -18px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.28);max-width:100%} .onyx-mat{background:linear-gradient(180deg,#efece3,#e6e2d7);padding:38px 38px 34px;border-radius:2px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset} .onyx-window{border-radius:12px;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 0 3px #ded9ce,0 2px 5px rgba(0,0,0,.4) inset,0 10px 26px -8px rgba(0,0,0,.5)} .onyx-art{--oxa:#2aa6e2;--oxa-hi:#3fb6ec;--oxa-ink:#06121a;width:560px;max-width:74vw;box-sizing:border-box;background:radial-gradient(120% 90% at 50% 0%,#12161c 0%,#0b0d10 55%,#08090c 100%);border-radius:12px;padding:26px 28px 30px;color:#e7ebf0;font-family:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;line-height:1.5;text-align:left} .onyx-art .head{display:flex;align-items:center;gap:13px} .onyx-art .wordmark{font-size:20px;font-weight:600;letter-spacing:.14em} .onyx-art .vsep{width:1px;height:20px;background:#2a313b} .onyx-art .eyebrow{font-size:12px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#7c8794} .onyx-art hr{height:1px;border:0;margin:18px 0 20px;background:linear-gradient(90deg,transparent,#262c34 18%,#262c34 82%,transparent)} .onyx-art .obtn{font:inherit;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:10px 20px;border-radius:8px;border:1px solid var(--oxa);background:var(--oxa);color:var(--oxa-ink);cursor:pointer;transition:background .15s ease,border-color .15s ease} .onyx-art .obtn:hover:not(:disabled){background:var(--oxa-hi);border-color:var(--oxa-hi)} .onyx-art .obtn:disabled{opacity:.5;cursor:default} .onyx-art .mono{font-family:ui-monospace,'SF Mono','Cascadia Mono',Menlo,monospace} /* NOT monospace on purpose: mono fonts have narrow Unicode coverage and would render the alien ciphertext as tofu boxes. This stack maximizes per-glyph fallback so every exotic codepoint shows its true face. */ .onyx-art .alien{font-family:'Segoe UI','Segoe UI Symbol','Segoe UI Historic','Arial Unicode MS','Noto Sans',sans-serif} @media(max-width:680px){.onyx-frame{padding:10px}.onyx-mat{padding:16px}} /* encrypted-everywhere tidbit — one record, nine locks, a hacker lens */ .onyx-art.ee .obtn{border-color:#f07e1b;background:#f07e1b;color:#0a0805} .onyx-art.ee .obtn:hover:not(:disabled){background:#ff9038;border-color:#ff9038} .onyx-art .ee-intro{margin:0 0 18px;font-size:13px;line-height:1.5;color:#98a2ae} .onyx-art .ee-intro b{color:#e7ebf0;font-weight:600} .onyx-art .ee-scene{position:relative;display:flex;align-items:center;margin-top:6px} .onyx-art .ee-locus{cursor:pointer} .onyx-art .ee-locus.on{box-shadow:0 0 0 1.5px rgba(63,182,236,.7)} .onyx-art .ee-locus:focus-visible{outline:2px solid #2aa6e2;outline-offset:2px} .onyx-art .ee-endpoint{flex:none;width:74px;height:96px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:11px;background:#101318;border:1px solid #262c34;transition:background .3s ease,border-color .3s ease} .onyx-art .ee-epicon{font-size:20px;color:#7c8794} .onyx-art .ee-endpoint.sealed .ee-epicon{color:#e7ebf0} .onyx-art .ee-endpoint.glow{background:rgba(55,211,155,.08);border-color:rgba(55,211,155,.5)} .onyx-art .ee-endpoint.glow .ee-epicon{color:#37d39b;text-shadow:0 0 12px rgba(55,211,155,.6)} .onyx-art .ee-eplbl{font-size:10px;letter-spacing:.08em;color:#98a2ae;margin-top:5px} .onyx-art .ee-epsub{font-size:8.5px;color:#6b7682;margin-top:1px} .onyx-art .ee-wire{flex:1;min-width:34px;height:26px;align-self:center;display:flex;align-items:center;justify-content:center;border-radius:6px} .onyx-art .ee-wireline{width:100%;height:3px;border-radius:2px;background-image:repeating-linear-gradient(90deg,#3a424d 0 7px,transparent 7px 14px);background-size:28px 3px;opacity:.5} .onyx-art .ee-wireline.sealed{background-image:repeating-linear-gradient(90deg,#37d39b 0 7px,transparent 7px 14px);opacity:.9} .onyx-art .ee-scene.running .ee-wireline{animation:eewire .6s linear infinite} @keyframes eewire{to{background-position:28px 0}} @keyframes eewirev{to{background-position:0 28px}} .onyx-art .ee-house{flex:none;width:156px;box-sizing:border-box;border-radius:11px;border:1px solid #1c2129;padding:9px 6px 7px;display:flex;flex-direction:column;gap:6px} .onyx-art .ee-house.a{background:#0d1116} .onyx-art .ee-house.b{background:#100d0a} .onyx-art .ee-srvlbl{text-align:center;font-size:11px;color:#e7ebf0;letter-spacing:.03em;margin-bottom:2px} .onyx-art .ee-srvlbl b{font-weight:400} .onyx-art .ee-house.a .ee-srvlbl b{color:#3fb6ec} .onyx-art .ee-house.b .ee-srvlbl b{color:#ff9038} .onyx-art .ee-cell{height:42px;box-sizing:border-box;padding:6px 9px;display:flex;flex-direction:column;justify-content:center;gap:3px;border-radius:8px;background:#0c0f13;border:1px solid #1c2129;transition:border-color .3s ease,background .3s ease} .onyx-art .ee-cell.sealed{background:linear-gradient(135deg,#12171d,#0b0e12)} .onyx-art .ee-cell.a.sealed{border-color:rgba(42,166,226,.4)} .onyx-art .ee-cell.b.sealed{border-color:rgba(240,126,27,.4)} .onyx-art .ee-cellname{display:flex;align-items:center;gap:6px;font-size:9.5px;letter-spacing:.04em;color:#6b7682} .onyx-art .ee-cell.sealed .ee-cellname{color:#98a2ae} .onyx-art .ee-celldot{width:5px;height:5px;border-radius:50%;flex:none;background:#3a424d} .onyx-art .ee-cell.a.sealed .ee-celldot{background:#2aa6e2;box-shadow:0 0 6px #2aa6e2} .onyx-art .ee-cell.b.sealed .ee-celldot{background:#f07e1b;box-shadow:0 0 6px #f07e1b} .onyx-art .ee-cellsoup{font-size:11px;line-height:1;color:#3f4750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.5px} .onyx-art .ee-cell.sealed .ee-cellsoup{color:#c3ccd6} .onyx-art .ee-chip{position:absolute;z-index:5;transform:translate(-50%,-50%);padding:4px 9px;border-radius:11px;max-width:92px;white-space:nowrap;overflow:hidden;pointer-events:none;background:#eef3f7;border:1px solid #cfe6f5;box-shadow:0 0 14px rgba(207,230,245,.55)} .onyx-art .ee-chip span{font-size:11px;font-weight:600;color:#0c1016} .onyx-art .ee-chip.sealed{border-radius:5px;padding:4px 8px;background:linear-gradient(135deg,#232c37,#0c1016);border-color:rgba(63,182,236,.55);box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(120,180,220,.3)} .onyx-art .ee-chip.sealed span{color:#a9c6dc;letter-spacing:.5px} .onyx-art .ee-chip.dec{border-radius:11px;background:#0f2820;border-color:rgba(55,211,155,.6);box-shadow:0 0 16px rgba(55,211,155,.5)} .onyx-art .ee-chip.dec span{color:#7ff0c4} .onyx-art .ee-spark{position:absolute;z-index:6;width:22px;height:22px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:eespark .7s ease-out forwards} @keyframes eespark{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}} .onyx-art .ee-lens{position:absolute;z-index:20;box-sizing:border-box;padding:11px 13px;border-radius:9px;background:#0a0d11;border:1px solid #2b333d;box-shadow:0 14px 34px -10px rgba(0,0,0,.7);pointer-events:none;animation:eelensin .16s ease} @keyframes eelensin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .onyx-art .ee-lenshead{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#f0a95b;margin-bottom:6px} .onyx-art .ee-lenshead.sender{color:#3fb6ec} .onyx-art .ee-lenshead.recipient{color:#37d39b} .onyx-art .ee-lensbrow{font-size:11px;color:#e7ebf0;margin-bottom:6px;line-height:1.3} .onyx-art .ee-lensbrow.dim{color:#98a2ae} .onyx-art .ee-lensbody{font-size:15px;line-height:1.4;word-break:break-word;color:#cdd5de;letter-spacing:1px} .onyx-art .ee-lens.void .ee-lensbody{font-size:12px;font-style:italic;letter-spacing:0;color:#5c6570} .onyx-art .ee-lens.plain .ee-lensbody{font-size:14px;font-weight:600;line-height:1.35;letter-spacing:0;color:#e7ebf0} .onyx-art .ee-lens.dec .ee-lensbody{font-size:14px;font-weight:600;line-height:1.35;letter-spacing:0;color:#37d39b;text-shadow:0 0 10px rgba(55,211,155,.35)} .onyx-art .ee-controls{display:flex;align-items:center;gap:10px;margin-top:20px} .onyx-art .ee-input{flex:1;min-width:0;box-sizing:border-box;font:inherit;font-size:13px;padding:11px 14px;color:#e7ebf0;background:#0c0f13;border:1px solid #262c34;border-radius:9px} .onyx-art .ee-input::placeholder{color:#4d5661} .onyx-art .ee-input:focus{outline:none;border-color:var(--oxa);box-shadow:0 0 0 3px rgba(42,166,226,.16)} .onyx-art .ee-statusrow{display:flex;align-items:center;gap:10px;margin-top:13px;min-height:18px} .onyx-art .ee-status{font-size:12.5px;letter-spacing:.02em;color:#98a2ae;transition:color .2s ease} .onyx-art .ee-status.idle{color:#7c8794} .onyx-art .ee-status.ok{color:#37d39b} .onyx-art .ee-hint{margin-left:auto;font-size:11px;color:#6b7682;text-align:right} .onyx-art .ee-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid #1c2129;font-size:12px;color:#7c8794} .onyx-art .ee-foot b{color:#e7ebf0;font-weight:400} .onyx-art .ee-foot i{font-style:normal;color:#37d39b} @media(max-width:760px){ .onyx-art .ee-scene{flex-direction:column;align-items:stretch} .onyx-art .ee-endpoint{width:100%;height:56px;flex-direction:row;justify-content:flex-start;gap:10px;padding:0 14px} .onyx-art .ee-eplbl{margin-top:0} .onyx-art .ee-epsub{margin-top:0;margin-left:auto} .onyx-art .ee-wire{flex:none;width:26px;height:36px;min-width:0;align-self:center} .onyx-art .ee-wireline{width:3px;height:100%;background-image:repeating-linear-gradient(180deg,#3a424d 0 7px,transparent 7px 14px);background-size:3px 28px} .onyx-art .ee-wireline.sealed{background-image:repeating-linear-gradient(180deg,#37d39b 0 7px,transparent 7px 14px)} .onyx-art .ee-scene.running .ee-wireline{animation:eewirev .6s linear infinite} .onyx-art .ee-house{width:100%} .onyx-art .ee-foot{flex-direction:column;align-items:flex-start;gap:4px} } /* replication tidbit — three replicas, flying packets, landing chips */ .onyx-art.wide{width:720px;max-width:88vw} .onyx-art hr.tight{margin:18px 0 8px} .onyx-art .rx-intro{margin:0 0 22px;font-size:13px;line-height:1.5;color:#98a2ae} .onyx-art .rx-intro b{color:#e7ebf0;font-weight:600} .onyx-art .rx-stage{position:relative;display:flex;gap:20px;align-items:flex-start} .onyx-art .rx-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px} .onyx-art .addbtn{cursor:pointer;transition:transform .12s ease,filter .12s ease,background .12s ease;font:inherit} .onyx-art .addbtn:hover{filter:brightness(1.25);transform:translateY(-1px)} .onyx-art .addbtn:active{transform:translateY(0) scale(.97)} .onyx-art .addbtn.is-flash{animation:onyxflash .34s ease} @keyframes onyxflash{0%{transform:scale(1);filter:brightness(1)}35%{transform:scale(.94);filter:brightness(1.6)}100%{transform:scale(1);filter:brightness(1)}} .onyx-art .rx-add{display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 12px;border-radius:9px;border:1px solid} .onyx-art .rx-cap{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;font-size:12px;font-weight:600;border:1px solid} .onyx-art .rx-addlbl{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase} .onyx-art .rx-node{background:#101318;border:1px solid #1c2129;border-radius:10px;padding:13px 14px} .onyx-art .rx-nodehead{display:flex;align-items:center;gap:8px;margin-bottom:11px} .onyx-art .rx-led{width:9px;height:9px;border-radius:50%;flex:none;animation:ledpulse 1.6s ease-in-out infinite} @keyframes ledpulse{0%,100%{opacity:1}50%{opacity:.45}} .onyx-art .rx-name{font-size:12.5px;letter-spacing:.02em;color:#e7ebf0} .onyx-art .rx-replica{margin-left:auto;font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#6b7682} .onyx-art .rx-bars{display:flex;flex-direction:column;gap:5px} .onyx-art .rx-bars span{height:5px;border-radius:2px;background:#161b21} .onyx-art .rx-stackhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px} .onyx-art .rx-stacklbl{font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:#7c8794} .onyx-art .rx-count{font-size:10.5px;color:#6b7682} .onyx-art .rx-stackbox{display:flex;flex-direction:column;gap:6px;min-height:246px;padding:8px;border-radius:9px;background:#0c0f13;border:1px solid #171c22} .onyx-art .rec-chip{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;background:#12161c;border:1px solid #20262e;animation:chipin .28s cubic-bezier(.3,.7,.3,1)} @keyframes chipin{from{opacity:0;transform:translateY(-9px) scale(.96)}to{opacity:1;transform:none}} .onyx-art .rec-chip .rid{font-size:12px;color:#c7cdd5} .onyx-art .rec-chip .rtag{font-size:10px;font-weight:600;letter-spacing:.12em} .onyx-art .rec-chip .rver{margin-left:auto;font-size:10.5px;color:#5c6672} .onyx-art .rx-packet{position:absolute;width:30px;height:30px;border-radius:8px;border:1px solid;display:flex;align-items:center;justify-content:center;transition:transform .58s cubic-bezier(.42,0,.18,1);z-index:6;pointer-events:none} .onyx-art .rx-packet span{width:9px;height:9px;border-radius:50%} @media(max-width:760px){.onyx-art .rx-stage{flex-direction:column}.onyx-art .rx-col{width:100%}.onyx-art .rx-stackbox{min-height:120px}} /* WAL sync tidbit — two servers, a physical cable, outbox piles, cursors */ .onyx-art .wx-stage{position:relative;display:flex;align-items:flex-end;gap:16px;height:210px} .onyx-art .wx-outbox{width:58px;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch} .onyx-art .wx-pile{display:flex;flex-direction:column;gap:1px} .onyx-art .wx-slip{height:4px;border-radius:2px;flex:none} .onyx-art .slip-in{animation:slipin .22s ease} @keyframes slipin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .onyx-art .wx-badge{margin-top:5px;text-align:center;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:600;padding:3px 0;border-radius:5px;color:#7c8794;background:#0f1318;border:1px solid #1c2129} .onyx-art .wx-node{position:relative;flex:none;width:150px;height:110px;box-sizing:border-box;background:#101318;border:1px solid #1c2129;border-radius:11px;padding:13px 14px} .onyx-art .wx-nodehead{display:flex;align-items:center;gap:8px;margin-bottom:12px} .onyx-art .wx-name{font-size:12.5px;color:#e7ebf0} .onyx-art .wx-meta{font-size:10.5px;line-height:1.7;color:#6b7682} .onyx-art .wx-meta b{color:#c7cdd5;font-weight:400} .onyx-art .wx-port{position:absolute;top:45px;width:9px;height:20px;border-radius:3px;background:#2a313b;border:1px solid #38424e} .onyx-art .wx-cable{position:relative;flex:1;min-width:130px;height:110px} .onyx-art .wx-cable-l{position:absolute;top:50%;left:0;transform:translateY(-50%);width:calc(50% - 4px);height:9px;border-radius:5px;background:linear-gradient(180deg,#39424e,#1d232b);box-shadow:0 1px 0 rgba(255,255,255,.06) inset} .onyx-art .wx-flow{position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;height:3px;border-radius:2px;opacity:.7;z-index:3;background-image:repeating-linear-gradient(90deg,rgba(63,182,236,.9) 0 8px,rgba(63,182,236,0) 8px 22px);animation:cableflow .5s linear infinite} @keyframes cableflow{to{background-position:22px 0}} .onyx-art .wx-jack-l{position:absolute;top:50%;left:calc(50% - 16px);transform:translateY(-50%);width:16px;height:19px;border-radius:3px;background:linear-gradient(180deg,#4a545f,#242b33);border:1px solid #545f6b} .onyx-art .wx-right{position:absolute;top:0;right:0;width:50%;height:100%;transform-origin:right center;transition:transform .55s cubic-bezier(.5,0,.3,1)} .onyx-art .wx-right.unplugged{transform:translateX(14px) rotate(9deg)} .onyx-art .wx-cable-r{position:absolute;top:50%;right:0;transform:translateY(-50%);width:calc(100% - 4px);height:9px;border-radius:5px;background:linear-gradient(180deg,#39424e,#1d232b);box-shadow:0 1px 0 rgba(255,255,255,.06) inset} .onyx-art .wx-jack-r{position:absolute;top:50%;left:0;transform:translateY(-50%);width:16px;height:19px;border-radius:3px;background:linear-gradient(180deg,#4a545f,#242b33);border:1px solid #545f6b} .onyx-art .wx-prongs{position:absolute;top:50%;left:-6px;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px} .onyx-art .wx-prongs span{width:6px;height:2px;background:#8a95a1;border-radius:1px} .onyx-art .wx-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:26px} .onyx-art .wx-status{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase} .onyx-art .wx-status .sdot{width:8px;height:8px;border-radius:50%} .onyx-art .plugbtn{cursor:pointer;white-space:nowrap;transition:background .13s ease,border-color .13s ease,color .13s ease;font:inherit;font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:10px 20px;border-radius:8px;background:#101318;color:#e7ebf0;border:1px solid #262c34} .onyx-art .wx-packet{position:absolute;width:12px;height:12px;border-radius:3px;z-index:6;pointer-events:none} @media(max-width:760px){.onyx-art .wx-stage{gap:8px}.onyx-art .wx-node{width:118px}.onyx-art .wx-outbox{width:40px}} /* anti-entropy tidbit — the showpiece: digest drill-down, repair, re-proof */ .onyx-art .ae-stage{position:relative;display:flex;align-items:flex-start;gap:14px} .onyx-art .ae-card{flex:none;width:238px;box-sizing:border-box;background:#101318;border:1px solid #1c2129;border-radius:11px;padding:14px} .onyx-art .ae-card.glitch{animation:aeglitch .5s steps(2,end) 2} @keyframes aeglitch{0%,100%{transform:translate(0,0);filter:none}20%{transform:translate(-2px,1px);filter:hue-rotate(25deg) brightness(1.35)}45%{transform:translate(2px,-1px);filter:brightness(1.2)}65%{transform:translate(-1px,-1px);filter:hue-rotate(-15deg) brightness(1.4)}82%{transform:translate(1px,1px)}} .onyx-art .ae-cardhead{display:flex;align-items:center;gap:8px} .onyx-art .ae-reccount{margin-left:auto;font-size:10px;color:#6b7682} .onyx-art .ae-chip{margin-top:12px;padding:8px 11px;border-radius:8px;background:#0c0f13;border:1px solid #262c34;transition:border-color .25s ease,box-shadow .25s ease} .onyx-art .ae-chip .lbl{font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#7c8794;margin-bottom:3px} .onyx-art .ae-chip .dg{font-size:12px;letter-spacing:.08em;color:#c7cdd5} .onyx-art .ae-chip.compare{border-color:#2aa6e2;box-shadow:0 0 0 3px rgba(42,166,226,.12);animation:aesoftpulse 1s ease-in-out infinite} .onyx-art .ae-chip.match{border-color:#37d39b;box-shadow:0 0 0 3px rgba(55,211,155,.12)} .onyx-art .ae-chip.mismatch{border-color:#f07e1b;box-shadow:0 0 0 3px rgba(240,126,27,.12)} @keyframes aesoftpulse{0%,100%{opacity:1}50%{opacity:.45}} .onyx-art .ae-grid{margin-top:12px;display:grid;grid-template-columns:repeat(16,11px);gap:2px} .onyx-art .ae-cell{width:11px;height:11px;border-radius:2px;background:#161b22} .onyx-art .ae-cell.scan{animation:aecellscan .45s ease both} @keyframes aecellscan{0%{background:#0c0f13}40%{background:#2aa6e2}100%{background:#161b22}} .onyx-art .ae-cell.diverge{background:#f07e1b;box-shadow:0 0 6px rgba(240,126,27,.85);animation:none} .onyx-art .ae-cell.healed{background:#37d39b;box-shadow:0 0 5px rgba(55,211,155,.7);animation:none} .onyx-art .ae-gutter{flex:1;min-width:120px;align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding-top:66px} .onyx-art .ae-gutter .arr{font-size:16px;color:#4a5560} .onyx-art .ae-gutter .note{text-align:center;font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#6b7682;line-height:1.5} .onyx-art .ae-gutter .note i{font-style:normal;color:#525c67} .onyx-art .ae-connector{position:absolute;height:2px;border-radius:1px;background:#262c34;transition:background .25s ease;z-index:4} .onyx-art .ae-shake{position:absolute;width:8px;height:8px;border-radius:50%;background:#3fb6ec;box-shadow:0 0 10px rgba(63,182,236,.9);z-index:6;animation:aehandshake .8s ease-in-out} @keyframes aehandshake{from{transform:translateX(0)}to{transform:translateX(var(--len))}} .onyx-art .ae-repairpk{position:absolute;width:14px;height:14px;border-radius:3px;background:#37d39b;box-shadow:0 0 14px rgba(55,211,155,.85);z-index:7;animation:aerepairmove .68s ease forwards} @keyframes aerepairmove{from{transform:translate(0,0)}to{transform:translate(var(--dx),var(--dy))}} .onyx-art .ae-statusrow{display:flex;align-items:center;justify-content:center;margin-top:20px} .onyx-art .ae-statusrow span{font-size:13px;letter-spacing:.04em;transition:color .2s ease} .onyx-art .ae-listing{margin-top:16px;background:#0c0f13;border:1px solid #1c2129;border-radius:10px;padding:12px 14px} .onyx-art .ae-listhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px} .onyx-art .ae-listhead .t{font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#7c8794} .onyx-art .ae-listhead .u{font-size:10px;color:#5c6672} .onyx-art .ae-row{display:flex;align-items:center;gap:10px;padding:5px 9px;border-radius:6px;border:1px solid transparent;animation:aerowin .2s ease both} @keyframes aerowin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .onyx-art .ae-row .k{font-size:11.5px;color:#c7cdd5;min-width:96px} .onyx-art .ae-row .v{font-size:11.5px;color:#7c8794;margin-left:auto} .onyx-art .ae-row .g{min-width:96px;text-align:right;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#525c67} .onyx-art .ae-row.bad{background:rgba(240,126,27,.1);border-color:rgba(240,126,27,.4)} .onyx-art .ae-row.bad .k,.onyx-art .ae-row.bad .v,.onyx-art .ae-row.bad .g{color:#f07e1b} .onyx-art .ae-row.fixed{background:rgba(55,211,155,.1);border-color:rgba(55,211,155,.4)} .onyx-art .ae-row.fixed .k,.onyx-art .ae-row.fixed .v,.onyx-art .ae-row.fixed .g{color:#37d39b} .onyx-art .ae-score{margin-top:16px;display:flex;gap:12px} .onyx-art .ae-scard{background:#101318;border:1px solid #1c2129;border-radius:10px;padding:13px 15px} .onyx-art .ae-scard .lbl{font-size:9.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#7c8794} .onyx-art .ae-scard .num{display:flex;align-items:baseline;gap:7px;margin-top:5px} .onyx-art .ae-scard .big{font-size:26px;font-weight:600} .onyx-art .ae-scard .unit{font-size:11px;color:#7c8794} .onyx-art .ae-scard .sub{font-size:10.5px;color:#6b7682;margin-top:3px} .onyx-art .ae-note{margin:12px 2px 0;font-size:11px;line-height:1.5;color:#6b7682} .onyx-art .ae-note b{color:#98a2ae;font-weight:400} .onyx-art .ae-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px} .onyx-art .ae-corrupt{cursor:pointer;white-space:nowrap;transition:filter .13s ease;font:inherit;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:10px 20px;border-radius:8px;background:transparent;color:#f07e1b;border:1px solid #3a2a17} .onyx-art .ae-corrupt:hover{filter:brightness(1.18)} .onyx-art .ae-pending{font-size:11px;letter-spacing:.04em;color:#6b7682} @media(max-width:760px){.onyx-art .ae-stage{flex-wrap:wrap}.onyx-art .ae-gutter{display:none}.onyx-art .ae-card{width:100%}.onyx-art .ae-grid{grid-template-columns:repeat(16,1fr)}} /* snapshot bootstrap tidbit — the visitor plays the host */ .onyx-art .sb-rail{display:flex;align-items:center;gap:8px;margin-bottom:20px} .onyx-art .sb-step{display:flex;align-items:center;gap:7px} .onyx-art .sb-step.todo{opacity:.6} .onyx-art .sb-dot{width:18px;height:18px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;font-family:ui-monospace,Menlo,monospace;color:#7c8794;background:transparent;border:1px solid #2a313b} .onyx-art .sb-step.active .sb-dot{color:#06121a;background:#2aa6e2;border-color:#2aa6e2} .onyx-art .sb-step.done .sb-dot{color:#06121a;background:#37d39b;border-color:#37d39b} .onyx-art .sb-lbl{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#525c67} .onyx-art .sb-step.active .sb-lbl{color:#2aa6e2} .onyx-art .sb-step.done .sb-lbl{color:#37d39b} .onyx-art .sb-conn{flex:1;height:1px;background:#262c34;min-width:10px} .onyx-art .sb-stage{position:relative;display:flex;align-items:flex-start;gap:12px} .onyx-art .sb-card{position:relative;flex:none;width:276px;box-sizing:border-box;background:#101318;border:1px solid #1c2129;border-radius:11px;padding:14px} .onyx-art .sb-cardb{transition:transform .6s cubic-bezier(.4,.1,.2,1),opacity .6s ease} .onyx-art .sb-cardb.out{transform:translateX(54px);opacity:0} .onyx-art .sb-gutter{flex:1;min-width:96px;align-self:stretch} .onyx-art .sb-role{margin-left:auto;font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase} .onyx-art .sb-sub{margin-top:6px;font-size:10px;letter-spacing:.04em;color:#6b7682} .onyx-art .sb-walhead{display:flex;justify-content:space-between;font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#7c8794;margin:12px 0 6px} .onyx-art .sb-walbox{display:flex;align-items:flex-end;gap:2px;height:36px;padding:6px 8px;background:#0c0f13;border:1px solid #171c22;border-radius:8px;overflow:hidden} .onyx-art .sb-walbar{width:4px;flex:none;border-radius:1px;animation:sbtickin .2s ease;transform-origin:bottom} @keyframes sbtickin{from{opacity:0;transform:scaleY(.3)}to{opacity:1;transform:none}} .onyx-art .sb-walmark{width:2px;height:30px;flex:none;background:#f07e1b;box-shadow:0 0 6px rgba(240,126,27,.8);border-radius:1px} .onyx-art .sb-pinzone{margin-top:12px;min-height:52px} .onyx-art .sb-pinlbl{font-size:9px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#7c8794;margin-bottom:4px;text-align:center} .onyx-art .sb-pin{font-size:30px;font-weight:600;letter-spacing:.22em;color:#e7ebf0;text-align:center;animation:sbpindigit .3s ease} @keyframes sbpindigit{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .onyx-art .sb-chiprow{display:flex;align-items:center;gap:8px;justify-content:center} .onyx-art .sb-chiplbl{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#7c8794} .onyx-art .sb-keychip{font-size:11px;color:#37d39b;padding:3px 8px;border:1px solid rgba(55,211,155,.4);border-radius:6px;background:rgba(55,211,155,.08)} .onyx-art .sb-curschip{font-size:11px;color:#f07e1b;padding:3px 8px;border:1px solid rgba(240,126,27,.4);border-radius:6px;background:rgba(240,126,27,.08)} .onyx-art .sb-replicabox{margin-top:12px;min-height:36px;padding:6px 8px;background:#0c0f13;border:1px solid #171c22;border-radius:8px;display:flex;align-items:center;justify-content:center} .onyx-art .sb-replicabox span{font-size:11px;letter-spacing:.04em;color:#525c67;transition:color .2s ease} .onyx-art .sb-chipzone{margin-top:12px;min-height:52px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center} .onyx-art .sb-snapwrap{min-height:77px;margin-top:16px} .onyx-art .sb-snap{background:#0c0f13;border:1px solid #1c2129;border-radius:10px;padding:12px 14px} .onyx-art .sb-snaphead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px} .onyx-art .sb-snaphead .t{font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#7c8794} .onyx-art .sb-snaphead .b{font-size:11px;color:#98a2ae} .onyx-art .sb-snapbar{height:8px;border-radius:5px;background:#161b22;overflow:hidden} .onyx-art .sb-snapfill{width:0;height:100%;background:linear-gradient(90deg,#2aa6e2,#3fb6ec);transition:width .12s linear} .onyx-art .sb-snapfill.ok{background:#37d39b} .onyx-art .sb-hashes{display:flex;justify-content:space-between;margin-top:9px} .onyx-art .sb-hashes span{font-size:10px;color:#6b7682;transition:color .2s ease} .onyx-art .sb-hashes span.ok{color:#37d39b} .onyx-art .sb-statusrow{display:flex;align-items:center;justify-content:center;margin-top:18px;min-height:20px} .onyx-art .sb-statusrow span{font-size:13px;letter-spacing:.03em;text-align:center;transition:color .2s ease} .onyx-art .sb-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px} .onyx-art .sb-btn{cursor:pointer;white-space:nowrap;transition:filter .13s ease,opacity .2s ease;font:inherit;font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:11px 22px;border-radius:8px} .onyx-art .sb-btn:hover:not(:disabled){filter:brightness(1.15)} .onyx-art .sb-btn:disabled{cursor:default} .onyx-art .sb-btn.go{background:#2aa6e2;color:#06121a;border:1px solid #2aa6e2;animation:sbglow 1.7s ease-in-out infinite} @keyframes sbglow{0%,100%{box-shadow:0 0 0 0 rgba(42,166,226,0)}50%{box-shadow:0 0 0 4px rgba(42,166,226,.2)}} .onyx-art .sb-btn.wait{background:#101318;color:#6b7682;border:1px solid #1c2129;opacity:.7} .onyx-art .sb-btn.reset{background:transparent;color:#f07e1b;border:1px solid #3a2a17} .onyx-art .sb-connline{position:absolute;height:3px;border-radius:2px;z-index:3;background-size:20px 100%;animation:sbflowdash .6s linear infinite;opacity:.85} @keyframes sbflowdash{to{background-position:20px 0}} .onyx-art .sb-connglyph{position:absolute;width:22px;height:22px;border-radius:50%;background:#0c0f13;display:flex;align-items:center;justify-content:center;font-size:13px;z-index:5} .onyx-art .sb-packet{position:absolute;display:flex;align-items:center;justify-content:center;font-size:11px;color:#06121a;z-index:7;pointer-events:none} @media(max-width:760px){.onyx-art .sb-stage{flex-wrap:wrap}.onyx-art .sb-gutter{display:none}.onyx-art .sb-card{width:100%}} /* tombstones tidbit — the last-writer-wins minigame */ .onyx-art .tb-scroll{overflow-x:auto} .onyx-art .tb-stage{position:relative;min-width:648px} .onyx-art .tb-keys{display:flex;gap:10px;margin-bottom:8px} .onyx-art .tb-keys .spacer{width:100px;flex:none} .onyx-art .tb-keys .k{width:126px;flex:none;text-align:center;font-size:11px;font-weight:500;letter-spacing:.18em;color:#7c8794;font-family:ui-monospace,Menlo,monospace} .onyx-art .tb-rows{display:flex;flex-direction:column;gap:10px} .onyx-art .tb-row{display:flex;gap:10px;align-items:stretch} .onyx-art .tb-srv{width:100px;flex:none;display:flex;align-items:center;gap:8px} .onyx-art .tb-srv .nm{font-size:11.5px;color:#c7cdd5} /* fixed height on purpose: alive/tomb/empty must never differ, or the edit/delete buttons shift mid-race */ .onyx-art .tb-cell{width:126px;flex:none;height:68px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:9px;padding:8px;background:#101318;border:1px solid #1c2129} .onyx-art .tb-cell.tomb{border-color:#232830} .onyx-art .tb-cell.empty{background:transparent;border:1px dashed #20262e} .onyx-art .tb-alivebox{display:flex;flex-direction:column;gap:6px;align-items:center} .onyx-art .tb-toprow{display:flex;align-items:center;gap:8px} .onyx-art .tb-swatch{width:16px;height:16px;border-radius:4px;flex:none;transition:background .2s ease} .onyx-art .tb-ver{font-size:12px;color:#c7cdd5} .onyx-art .tb-cell.tomb .tb-ver{color:#7c8794} .onyx-art .tb-btns{display:flex;gap:6px} .onyx-art .tb-act{cursor:pointer;transition:filter .12s ease;font-family:ui-monospace,Menlo,monospace;font-size:11px;padding:2px 9px;border-radius:5px;background:#12161c;color:#98a2ae;border:1px solid #262c34} .onyx-art .tb-act.del{color:#f07e1b;border-color:#3a2a17} .onyx-art .tb-act:hover{filter:brightness(1.25)} .onyx-art .tb-tombbox{display:flex;align-items:center} .onyx-art .tb-grave{width:16px;height:20px;flex:none;background:#525c67;border-radius:8px 8px 2px 2px;position:relative;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25);margin-right:9px} .onyx-art .tb-grave::before{content:'';position:absolute;left:7px;top:5px;width:2px;height:9px;background:#3a424c} .onyx-art .tb-grave::after{content:'';position:absolute;left:4px;top:8px;width:8px;height:2px;background:#3a424c} .onyx-art .tb-new{cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease;font-family:ui-monospace,Menlo,monospace;font-size:11px;padding:4px 12px;border-radius:6px;background:transparent;color:#7c8794;border:1px dashed #2a313b} .onyx-art .tb-new:hover{background:rgba(42,166,226,.12);border-color:#2aa6e2;color:#3fb6ec} .onyx-art .tb-free{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#525c67;animation:tbsettle .4s ease} @keyframes tbsettle{from{opacity:0;transform:scale(.6)}to{opacity:.6;transform:scale(1)}} .onyx-art .tb-packet{position:absolute;width:16px;height:16px;border-radius:4px;z-index:8;pointer-events:none} .onyx-art .tb-packet.tomb{border-radius:7px 7px 3px 3px} .onyx-art .tb-packet.bounce{border:1px solid #ff9038;animation:tbrejflash .44s ease forwards} @keyframes tbrejflash{0%{transform:scale(1);opacity:1}40%{transform:scale(1.35);opacity:1}100%{transform:scale(.7);opacity:0}} .onyx-art .tb-statusrow{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;min-height:20px} .onyx-art .tb-statusrow .st{font-size:13px;letter-spacing:.03em;text-align:center;transition:color .2s ease} .onyx-art .tb-agree{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#37d39b;animation:tbagree 1.1s ease forwards} @keyframes tbagree{0%{opacity:0}25%{opacity:1}100%{opacity:0}} /* auto-enrollment tidbit — cut the mesh, watch it re-wire itself */ .onyx-art .mx-scroll{overflow-x:auto} /* overflow:hidden is load-bearing: the 520px radar pulse extends past the stage, and the scroll wrapper would otherwise sprout a transient vertical scrollbar every sweep */ .onyx-art .mx-stage{position:relative;height:300px;margin-top:10px;min-width:620px;overflow:hidden} .onyx-art .mx-edge{position:absolute;height:3px;border-radius:2px;transform-origin:0 50%;z-index:1;transition:background .3s ease} .onyx-art .mx-edge.healed{animation:mxhealpulse .6s ease} @keyframes mxhealpulse{0%{filter:brightness(1.8)}100%{filter:brightness(1)}} .onyx-art .mx-edgehit{position:absolute;height:24px;transform-origin:0 50%;z-index:2;cursor:pointer;background:transparent;border:0;padding:0} .onyx-art .mx-edgehit:disabled{cursor:default} .onyx-art .mx-node{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:10px;background:#101318;border:1px solid #1c2129;z-index:3;white-space:nowrap} .onyx-art .mx-node .nm{font-size:12px;color:#e7ebf0} .onyx-art .mx-ember{position:absolute;width:9px;height:9px;border-radius:50%;background:#f07e1b;box-shadow:0 0 12px #ff9038;transform:translate(-50%,-50%);z-index:4;animation:mxsparkpop .45s ease} @keyframes mxsparkpop{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}40%{transform:translate(-50%,-50%) scale(1.7);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}} .onyx-art .mx-badge{position:absolute;transform:translate(-50%,-50%);font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:600;color:#f07e1b;background:rgba(240,126,27,.12);border:1px solid rgba(240,126,27,.45);border-radius:10px;padding:2px 8px;z-index:5;white-space:nowrap;animation:mxbadgepop .25s ease} @keyframes mxbadgepop{from{transform:translate(-50%,-50%) scale(.5);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}} .onyx-art .mx-packet{position:absolute;border-radius:3px;z-index:6;pointer-events:none} .onyx-art .mx-radar{position:absolute;width:520px;height:520px;border-radius:50%;border:2px solid #3fb6ec;transform:translate(-50%,-50%);z-index:2;pointer-events:none;animation:mxradar 1s ease-out} @keyframes mxradar{0%{transform:translate(-50%,-50%) scale(.15);opacity:.55}100%{transform:translate(-50%,-50%) scale(1);opacity:0}} .onyx-art .mx-statusrow{display:flex;align-items:center;justify-content:center;margin-top:16px;min-height:20px} .onyx-art .mx-statusrow span{font-size:13px;letter-spacing:.03em;text-align:center;transition:color .2s ease} .onyx-art .mx-counters{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid #1c2129} .onyx-art .mx-counters .cuts{font-size:12px;color:#7c8794} .onyx-art .mx-counters .cuts b{color:#e7ebf0;font-weight:400} .onyx-art .mx-counters .cuts i{color:#37d39b;font-style:normal} .onyx-art .mx-counters .cd{font-size:12px;color:#7c8794;transition:color .2s ease} /* schema stamps tidbit — roll the upgrade in any order (reuses mx plumbing) */ .onyx-art .sx-stage{position:relative;height:322px;margin-top:10px;min-width:620px;overflow:hidden} .onyx-art .mx-radar.green{border-color:#37d39b} .onyx-art .sx-node{position:absolute;transform:translate(-50%,-50%);width:172px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;padding:11px 13px;border-radius:11px;background:#101318;border:1px solid #1c2129;transition:border-color .3s ease;z-index:3} .onyx-art .sx-node.v2{border-color:#2e4a3f} .onyx-art .sx-node.conforming{animation:sxconform .8s ease;box-shadow:0 0 0 3px rgba(63,182,236,.28)} @keyframes sxconform{0%,100%{box-shadow:0 0 0 0 rgba(63,182,236,0)}50%{box-shadow:0 0 0 4px rgba(63,182,236,.28)}} .onyx-art .sx-node .nhead{display:flex;align-items:center;gap:8px} .onyx-art .sx-node .nm{font-size:12px;color:#e7ebf0} .onyx-art .sx-stamp{font-size:11px;letter-spacing:.04em;color:#98a2ae;transition:color .3s ease} .onyx-art .sx-node.v2 .sx-stamp{color:#37d39b} .onyx-art .sx-up{cursor:pointer;transition:filter .13s ease,opacity .2s ease;font:inherit;font-size:12px;font-weight:500;letter-spacing:.04em;padding:7px 10px;border-radius:7px;background:#2aa6e2;color:#06121a;border:1px solid #2aa6e2} .onyx-art .sx-up:hover:not(:disabled){filter:brightness(1.2)} .onyx-art .sx-up:disabled{cursor:default} .onyx-art .sx-up.busy{background:#101318;color:#6b7682;border-color:#1c2129;opacity:.75} .onyx-art .sx-up.done{font-family:ui-monospace,Menlo,monospace;background:transparent;color:#37d39b;border-color:rgba(55,211,155,.4)} .onyx-art .sx-counters{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid #1c2129} .onyx-art .sx-counters .tally{font-size:12px;color:#7c8794} .onyx-art .sx-counters .tally i{color:#37d39b;font-style:normal} .onyx-art .sx-counters .tally b{color:#f07e1b;font-weight:400} .onyx-art .sx-counters .tally u{color:#e7ebf0;text-decoration:none} .onyx-art .sx-reset{cursor:pointer;transition:filter .13s ease;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;letter-spacing:.04em;padding:7px 14px;border-radius:7px;background:transparent;color:#7c8794;border:1px solid #262c34} .onyx-art .sx-reset:hover{filter:brightness(1.3)} /* records-as-objects tidbit — code becomes table */ .onyx-art .px-wrap{display:flex;gap:22px;align-items:flex-start;margin-top:14px} .onyx-art .px-code{flex:none;width:236px} .onyx-art .px-codecard{font-family:ui-monospace,'SF Mono','Cascadia Mono',Menlo,monospace;background:#0c0f13;border:1px solid #1c2129;border-radius:10px;overflow:hidden} .onyx-art .px-codehead{display:flex;align-items:center;gap:7px;padding:8px 12px;border-bottom:1px solid #1c2129;background:#101318} .onyx-art .px-codehead .dot{width:7px;height:7px;border-radius:50%;background:#2aa6e2} .onyx-art .px-codehead .fn{font-size:11px;color:#7c8794;letter-spacing:.02em} .onyx-art .px-codebody{padding:13px 14px;font-size:11.5px;line-height:1.85;overflow-x:auto;overflow-y:hidden} .onyx-art .px-codebody div{white-space:pre} .onyx-art .px-kw{color:#3fb6ec} .onyx-art .px-ty{color:#37d39b} .onyx-art .px-id{color:#e7ebf0} .onyx-art .px-pn{color:#6b7682} .onyx-art .px-at{color:#7c8794} .onyx-art .px-line.removing{animation:pxcolout .5s ease forwards} .onyx-art .px-typing{color:#dbe7ef} .onyx-art .px-caret{display:inline-block;width:7px;height:14px;background:#3fb6ec;margin-left:1px;vertical-align:-2px;animation:pxcaret 1s steps(1) infinite} @keyframes pxcaret{0%,100%{opacity:1}50%{opacity:0}} .onyx-art .px-chips{display:flex;flex-direction:column;gap:8px;margin-top:13px} .onyx-art .px-chip{cursor:pointer;font-family:ui-monospace,Menlo,monospace;font-size:11.5px;padding:8px 11px;border-radius:8px;border:1px solid #262c34;background:#101318;transition:opacity .2s ease,border-color .2s ease,filter .13s ease;letter-spacing:.01em;width:100%;text-align:left;white-space:nowrap;box-sizing:border-box;color:#e7ebf0} .onyx-art .px-chip:hover:not(:disabled){border-color:#3a424d;filter:brightness(1.18)} .onyx-art .px-chip:disabled{cursor:default} .onyx-art .px-chip .mk{color:#37d39b;font-weight:700} .onyx-art .px-chip .kw{color:#3fb6ec} .onyx-art .px-chip .nm{color:#e7ebf0;font-weight:600} .onyx-art .px-chip.used{opacity:.45;border-style:dashed} .onyx-art .px-chip.used .mk,.onyx-art .px-chip.used .kw{color:#6b7682} .onyx-art .px-chip.used .nm{color:#7c8794} .onyx-art .px-chip.rm{border-color:rgba(240,126,27,.4)} .onyx-art .px-chip.rm .mk{color:#f07e1b} .onyx-art .px-chip.rm .kw{color:#7c8794} .onyx-art .px-chip.rm .nm{color:#f0a95b} .onyx-art .px-right{flex:1;min-width:0} .onyx-art .px-tablelabel{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#98a2ae} .onyx-art .px-tablewrap{border:1px solid #1c2129;border-radius:10px;padding:4px 14px 8px;background:#0c0f13;overflow-x:auto;overflow-y:hidden} .onyx-art .px-table{border-collapse:collapse;width:100%;font-size:10.5px;font-family:ui-monospace,Menlo,monospace} .onyx-art .px-table th{text-transform:uppercase;letter-spacing:.1em;font-size:9px;font-weight:600;padding:8px 9px 8px 0;border-bottom:1px solid #262c34;white-space:nowrap;text-align:left;color:#7c8794;transition:color .3s ease} .onyx-art .px-table td{padding:7px 9px 7px 0;border-bottom:1px solid #1c2129;white-space:nowrap;vertical-align:middle;transition:color .3s ease} .onyx-art .px-table .vercol{position:sticky;right:0;background:#0c0f13;padding-left:13px;padding-right:0;box-shadow:-12px 0 14px -8px #0c0f13;z-index:2;text-align:right;color:#7c8794} .onyx-art .px-table.verhl .vercol{color:#37d39b;text-shadow:0 0 8px rgba(55,211,155,.4)} .onyx-art .px-table .c-id{color:#7c8794} .onyx-art .px-table .c-name{color:#e9edf2} .onyx-art .px-table .c-year{color:#c7cfd8} .onyx-art .px-table .c-def{color:#8f9aa6;font-style:italic} .onyx-art .px-table tr.tombrow td{color:#5c6570;font-style:italic} .onyx-art .px-table .colin{animation:pxcolin .4s ease} .onyx-art .px-table .cellin{animation:pxcellin .3s ease} .onyx-art .px-table .colout{animation:pxcolout .45s ease forwards} @keyframes pxcolin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}} @keyframes pxcellin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @keyframes pxcolout{to{opacity:0;transform:translateX(8px)}} .onyx-art .px-statusrow{margin-top:16px;display:flex;align-items:center;gap:12px;min-height:22px} .onyx-art .px-statusrow .st{font-size:12.5px;letter-spacing:.02em;transition:color .2s ease} .onyx-art .px-note{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:#37d39b;background:rgba(55,211,155,.1);border:1px solid rgba(55,211,155,.34);border-radius:10px;padding:3px 10px;white-space:nowrap;animation:pxnote .3s ease} @keyframes pxnote{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}} @media(max-width:760px){.onyx-art .px-wrap{flex-wrap:wrap}.onyx-art .px-code{width:100%}} /* isolation tidbit — three tenants, one toggle, the fused switch */ .onyx-art .ix-modes{display:flex;justify-content:center;margin-top:12px} .onyx-art .ix-modeswrap{display:inline-flex;background:#0c0f13;border:1px solid #262c34;border-radius:9px;padding:3px} .onyx-art .ix-seg{cursor:pointer;font:inherit;font-size:12px;font-weight:600;padding:7px 15px;border-radius:7px;border:none;letter-spacing:.01em;background:transparent;color:#7c8794;transition:background .15s ease,color .15s ease} .onyx-art .ix-seg.active{background:#17222c;color:#e7ebf0} .onyx-art .ix-svgwrap{margin-top:6px} .onyx-art .ix-svgwrap svg{display:block;width:100%;height:auto} .onyx-art .ix-sw{cursor:pointer} .onyx-art .ix-sw:focus-visible{outline:2px solid #2aa6e2;outline-offset:2px} .onyx-art .ix-burstrow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px} .onyx-art .ix-burst{cursor:pointer;font:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;padding:9px 16px;border-radius:8px;border:none;background:#f07e1b;color:#0a0805;flex:none;transition:filter .15s ease,background .2s ease,color .2s ease} .onyx-art .ix-burst:hover:not(:disabled){filter:brightness(1.12)} .onyx-art .ix-burst:disabled{cursor:default;background:#241a12;color:#7c8794} .onyx-art .ix-status{font-size:12.5px;letter-spacing:.02em;text-align:right;transition:color .2s ease} /* origin lockup — the Nyx paragraph rides the top-right shoulder of the gem */ /* padding-top (not margin on the panel) is load-bearing: a panel margin would collapse through the container and drag the absolutely-positioned gem down with it */ .onyx-history{position:relative;min-height:540px;padding-top:4.6em} .onyx-history .biglogo{position:absolute;left:14%;top:-1.5em;width:min(560px,72%);height:auto;z-index:0;filter:drop-shadow(0 14px 34px rgba(0,0,0,.5))} .onyx-history .ex-panel{position:relative;z-index:1;margin-left:auto} @media(max-width:760px){.onyx-history{min-height:0;padding-top:0}.onyx-history .biglogo{position:static;display:block;width:72%;margin:1.6em auto 0}} /* §databar — the isolation text beside its retail packaging */ .onyx-candy{display:flex;gap:1.6em;align-items:flex-start;margin:2.2em 0} .onyx-candy .ex-panel{flex:1;margin:0} .onyx-candy .photo-print{flex:none;width:300px;margin:0} @media(max-width:760px){.onyx-candy{flex-direction:column}.onyx-candy .photo-print{width:100%}} /* torture test tidbit — the finale: hold to break it, release to be proven wrong */ .onyx-art .tx-stage{position:relative;width:664px;max-width:100%;height:150px;margin:18px auto 0} .onyx-art .tx-card{position:absolute;top:0;width:250px;box-sizing:border-box;padding:15px 16px;border-radius:12px;background:#101318;border:1px solid #1c2129;transition:border-color .3s ease} .onyx-art .tx-card.hot{border-color:rgba(240,126,27,.35)} .onyx-art .tx-cardhead{display:flex;align-items:center;gap:9px;margin-bottom:12px} .onyx-art .tx-cardhead .nm{font-size:13px;color:#e7ebf0;letter-spacing:.02em} .onyx-art .tx-cardhead .tag{font-size:10px;color:#6b7682;margin-left:auto} .onyx-art .tx-led{width:9px;height:9px;border-radius:50%;flex:none} .onyx-art .tx-card.hot .tx-led{animation:txledpulse .7s ease-in-out infinite} @keyframes txledpulse{0%,100%{opacity:1}50%{opacity:.45}} .onyx-art .tx-threads{display:flex;flex-direction:column;gap:8px} .onyx-art .tx-thread{display:flex;align-items:center;gap:9px} .onyx-art .tx-thread .lbl{font-size:9px;letter-spacing:.07em;color:#7c8794;width:58px;flex:none} .onyx-art .tx-thread .meter{flex:1;height:7px;border-radius:4px;background:#0c0f13;border:1px solid #1c2129;overflow:hidden} .onyx-art .tx-thread .fill{height:100%;width:3%} .onyx-art .tx-thread .cnt{font-size:10.5px;color:#98a2ae;width:56px;flex:none;text-align:right} .onyx-art .tx-ops{margin-top:11px;padding-top:9px;border-top:1px solid #1c2129;font-size:11px;color:#7c8794} .onyx-art .tx-ops b{color:#e7ebf0;font-weight:400} .onyx-art .tx-link{position:absolute;left:250px;top:88px;width:164px;height:3px;border-radius:2px;background:linear-gradient(90deg,#2aa6e2,#f07e1b);opacity:.32} .onyx-art .tx-porta,.onyx-art .tx-portb{position:absolute;top:84px;width:10px;height:10px;border-radius:50%} .onyx-art .tx-porta{left:245px;background:#2aa6e2;box-shadow:0 0 8px #2aa6e2} .onyx-art .tx-portb{left:409px;background:#f07e1b;box-shadow:0 0 8px #f07e1b} .onyx-art .tx-packet{position:absolute;border-radius:50%;pointer-events:none} .onyx-art .tx-sums{display:flex;align-items:baseline;justify-content:center;gap:24px;margin-top:18px} .onyx-art .tx-sum{font-size:30px;font-weight:500;letter-spacing:.01em;min-width:210px;text-align:center;transition:color .3s ease} .onyx-art .tx-sign{font-size:30px;font-weight:700;transition:color .3s ease} .onyx-art .tx-sums.proved .tx-sum,.onyx-art .tx-sums.proved .tx-sign{animation:txproofland .6s ease} @keyframes txproofland{0%{transform:scale(1)}42%{transform:scale(1.09)}100%{transform:scale(1)}} .onyx-art .tx-sumcap{text-align:center;margin-top:3px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6b7682} .onyx-art .tx-hold{width:100%;box-sizing:border-box;margin-top:20px;padding:17px;border-radius:12px;border:none;font:inherit;font-size:15px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#180a02;user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer;background:linear-gradient(180deg,#ff9038,#f07e1b);box-shadow:0 7px 20px -7px rgba(240,126,27,.65),inset 0 1px 0 rgba(255,255,255,.32)} .onyx-art .tx-hold.held{background:linear-gradient(180deg,#df6f0d,#c65d10);box-shadow:inset 0 3px 11px rgba(0,0,0,.45);transform:translateY(2px);animation:txtorturepulse .5s ease-in-out infinite} @keyframes txtorturepulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.14)}} .onyx-art .tx-statusrow{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;min-height:20px} .onyx-art .tx-statusrow span{font-size:12.5px;letter-spacing:.02em;text-align:center;transition:color .2s ease} .onyx-art .tx-closing{text-align:center;margin-top:4px;font-size:12px;color:#37d39b;letter-spacing:.02em} @media(max-width:760px){.onyx-art .tx-sum{min-width:0;font-size:22px}.onyx-art .tx-sign{font-size:22px}} /* lightbox — walk up to a print instead of viewing it from across the room. The figure is promoted in place (position:fixed + placeholder), never moved in the DOM, so a playing