/* ───────── TEK · blueprint layer (loaded last) ─────────
   Blueprint paper: deep cyanotype blue with a 24px drafting grid and a 120px major grid, white
   technical-pen lines, yellow highlighter for what matters. Every panel is a drawn frame with
   corner ticks that grow on hover; headings get dimension lines; the page sits inside a drawing
   frame with zone letters and a title block (both added by blueprint.js). */

:root {
  --bp: #0D3B7A; --bp-deep: #0A2F66; --bp-lite: #1550A0;
  --pen: #EEF5FF; --pen-2: rgba(226, 238, 255, .62); --pen-3: rgba(226, 238, 255, .28); --pen-4: rgba(226, 238, 255, .12);
  --hi: #FFD23F; --hi-ink: #0A2A5C; --hi-soft: rgba(255, 210, 63, .14);
  --tick: 12px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
html body, html body[data-module] {
  --bg: #0D3B7A; --surface: #0F4285; --surface-2: #134A92;
  --line: rgba(226, 238, 255, .3); --line-2: rgba(226, 238, 255, .13);
  --panel: rgba(10, 45, 100, .74);
  --accent: #FFD23F; --accent-ink: #0A2A5C; --accent-soft: rgba(255, 210, 63, .14);
  --red-hi: #FFD23F; --wire: #EEF5FF;
}
html, html:has(body[data-module]) { background: #0D3B7A !important; }

/* paper: two grids + a soft light falling on the sheet */
body {
  background-color: var(--bp) !important;
  background-image:
    radial-gradient(ellipse 80% 70% at 60% 35%, rgba(60, 130, 220, .28), transparent 70%),
    linear-gradient(rgba(226, 238, 255, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 238, 255, .14) 1px, transparent 1px),
    linear-gradient(rgba(226, 238, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 238, 255, .05) 1px, transparent 1px) !important;
  background-size: 100% 100%, 120px 120px, 120px 120px, 24px 24px, 24px 24px !important;
  background-position: 0 0, var(--side-w) 0, var(--side-w) 0, var(--side-w) 0, var(--side-w) 0 !important;
  background-attachment: fixed !important;
  font-family: var(--sans);
}
/* paper grain + vignette above the background, below everything else */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(3, 20, 50, .45) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
#view, .nav.side, .toasts, .modal, .help-fab, .tour, .tour-offer { position: relative; z-index: 1; }
.nav.side { position: fixed; z-index: 45; }
.help-fab, .toasts, .tour-offer { position: fixed; }
.tour { position: fixed; z-index: 90; }
.modal { position: fixed; z-index: 80; }
::selection { background: var(--hi); color: var(--hi-ink); }
:focus-visible { outline: 1px dashed var(--hi) !important; outline-offset: 3px; }

/* ═════════════ type: condensed technical lettering ═════════════ */
#view h1, #view h2, .dialog h3 { font-family: var(--display) !important; font-weight: 700 !important; letter-spacing: .01em !important; }
#view h1 em, #view h2 em, #view h1 .acc {
  color: var(--hi) !important; -webkit-text-fill-color: var(--hi);
}
.label, body[data-module] .label { font-family: var(--mono) !important; color: var(--pen-2); text-transform: uppercase; }
.mute { color: var(--mute); }
a.acc, .acc { color: var(--hi); }
.mono, code { font-family: var(--mono) !important; }

/* dimension line under every page title (blueprint.js adds .bp-dim after the h1) */
.bp-dim { position: relative; height: 22px; margin: 10px 0 4px; max-width: 100%; color: var(--pen-2); pointer-events: none; }
.bp-dim i { position: absolute; top: 10px; left: 0; height: 1px; width: var(--w, 100%); background: currentColor; transform-origin: left; transform: scaleX(0); animation: dimDraw .9s var(--ease) .25s forwards; }
.bp-dim i::before, .bp-dim i::after { content: ''; position: absolute; top: -4px; width: 0; height: 0; border: 4.5px solid transparent; }
.bp-dim i::before { left: 0; border-right: 9px solid currentColor; border-left: 0; }
.bp-dim i::after { right: 0; border-left: 9px solid currentColor; border-right: 0; }
.bp-dim b, .bp-dim s { position: absolute; top: 2px; width: 1px; height: 17px; background: currentColor; left: 0; }
.bp-dim s { left: calc(var(--w, 100%) - 1px); }
.bp-dim em { position: absolute; top: 2px; left: calc(var(--w, 100%) / 2); transform: translateX(-50%); font: 500 11px/18px var(--mono); font-style: normal; letter-spacing: .12em; color: var(--hi); background: var(--bp); padding: 0 8px; opacity: 0; animation: fadeIn .4s ease 1s forwards; white-space: nowrap; }
@keyframes dimDraw { to { transform: scaleX(1); } }
@keyframes fadeIn { to { opacity: 1; } }

/* ═════════════ sidebar: the drawing register ═════════════ */
.nav.side { background: rgba(9, 42, 94, .93) !important; border-right: 1px solid var(--line) !important; }
.nav.side::after { background: var(--hi) !important; width: 2px !important; }
.nav.side::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(226, 238, 255, .05) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgba(226, 238, 255, .05) 1px, transparent 1px) 0 0 / 24px 100%; }
.side-top { border-bottom: 1px solid var(--line) !important; position: relative; }
.brand-word { font: 700 30px/1 var(--display) !important; letter-spacing: .14em !important; }
.brand { position: relative; }
.brand::after { content: 'DRAWING SET · REV A'; position: absolute; left: 58px; top: 100%; margin-top: 4px; font: 500 8.5px/1 var(--mono); letter-spacing: .18em; color: var(--pen-2); white-space: nowrap; }
.side-k { font-family: var(--mono) !important; color: var(--pen-2) !important; }
.side-k::after { content: ' ───────────'; color: var(--pen-3); letter-spacing: -.05em; }
.nav.side .modnav a { font-weight: 600 !important; font-size: 20px !important; text-transform: uppercase !important; letter-spacing: .04em !important; border: 1px solid transparent !important;
  background-image: linear-gradient(var(--hi), var(--hi)) !important; }
.nav.side .modnav a i { font: 500 12px/1.6 var(--mono) !important; color: var(--pen-2) !important; }
.nav.side .modnav a i::after { content: '' !important; }
.nav.side .modnav a i::before { content: 'Nº'; opacity: .55; margin-right: 1px; font-size: 9px; }
.nav.side .modnav a small { font-family: var(--sans) !important; color: var(--pen-2) !important; text-transform: none; letter-spacing: 0; font-weight: 400; }
.nav.side .modnav a:hover { background-color: rgba(226, 238, 255, .06) !important; border-color: var(--pen-3) !important; border-style: dashed !important; }
.nav.side .modnav a::after { content: ''; position: absolute; right: 8px; top: 50%; width: 0; height: 1px; background: var(--pen); transition: width .3s var(--ease); }
.nav.side .modnav a::before { content: ''; position: absolute; right: 8px; top: calc(50% - 3px); width: 6px; height: 6px; border-top: 1px solid var(--pen); border-right: 1px solid var(--pen); transform: rotate(45deg); opacity: 0; transition: opacity .2s; }
.nav.side .modnav a:hover::after { width: 18px; } .nav.side .modnav a:hover::before { opacity: 1; }
.nav.side .modnav a[aria-current="page"] { color: var(--hi-ink) !important; border-color: var(--hi) !important; border-style: solid !important; }
.nav.side .modnav a[aria-current="page"] i, .nav.side .modnav a[aria-current="page"] small { color: rgba(10, 42, 92, .78) !important; }
.nav.side .modnav a[aria-current="page"]::after, .nav.side .modnav a[aria-current="page"]::before { background: var(--hi-ink); border-color: var(--hi-ink); }
.side-foot { border-top: 1px solid var(--line) !important; position: relative; }
.nav.side .wbtn { border: 1px solid var(--pen) !important; color: var(--pen) !important; background: transparent !important; font: 700 16px/1 var(--display) !important; letter-spacing: .14em !important; position: relative; overflow: hidden; }
.nav.side .wbtn::before { content: ''; position: absolute; inset: 0; background: var(--hi); transform: translateY(101%); transition: transform .35s var(--ease); z-index: -1; }
.nav.side .wbtn:hover { color: var(--hi-ink) !important; border-color: var(--hi) !important; background: transparent !important; }
.nav.side .wbtn:hover::before { transform: none; }
.nav.side .wbtn { isolation: isolate; }
.guide-btn { border-color: var(--pen-3) !important; color: var(--pen) !important; font-family: var(--display) !important; font-weight: 600 !important; letter-spacing: .1em !important; }
.guide-btn span { color: var(--hi); border-color: var(--hi) !important; }
.guide-btn:hover { background: var(--hi-soft) !important; border-color: var(--hi) !important; }
.ca-chip .ca-k, .ca-chip .ca-c, .ca-big .label { color: var(--hi) !important; }
.ca-big .ca-act { background: var(--hi) !important; color: var(--hi-ink) !important; }
@media (max-width: 1060px) { .side-body { background: var(--bp-deep) !important; } .brand::after { display: none; } }

/* ═════════════ panels: drawn frames with corner ticks ═════════════ */
.mu-card, .mu-sec, .mu-dimg, .mu-par, .mu-chip, .mu-ch-label,
.au-art, .au-lotart, .au-bidbox, .au-asset, .au-mine, .au-flow,
.ot-sec, .ot-mkt, .otw-step, .ot-tokbox, .ot-pill,
.ag-tape, .ag-card, .panel, .ag-dhead, .ag-kpis, .ag-preview, .ag-radar, .ag-tip,
.lc-col, .lc-sec, .lc-verdict,
.vc-sec, .vc-verdict, .vc-graph,
.hub-what-c, .hub-how-s li, .hub-faq details, .hub-pv-frame, .adm-card, .adm-wallet, .tl-panel,
.tl-coin, .tl-rules > div, .tl-cmd, .tl-kpis, .tl-steps, html body .state {
  --c: var(--pen-2);
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--tick) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 1px var(--tick) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--tick) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 1px var(--tick) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--tick) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 1px var(--tick) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--tick) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 1px var(--tick) no-repeat,
    var(--panel) !important;
  border: 1px solid var(--line-2) !important;
  transition: border-color .25s, background-size .4s var(--ease), transform .35s var(--ease) !important;
}
.mu-card:hover, .ag-card:hover, .hub-what-c:hover, .tl-coin:hover, .tl-rules > div:hover, .hub-how-s li:hover, .au-lot:hover .au-art, .lc-sec:hover, .vc-sec:hover, .ot-sec:hover {
  --c: var(--hi); --tick: 28px; border-color: var(--line) !important; transform: translateY(-2px);
}
html body .state { border-style: dashed !important; }
.hub-what-c[data-mod="launch"] { border-color: rgba(255, 210, 63, .45) !important; }
.mu-img, .au-art, .au-lotart, .tl-coin .logo-wrap, .logo-ph { background-color: var(--bp-deep) !important; }

/* screens that hold a canvas drawing: a plate of darker blue with its own fine grid */
.vc-net, .mu-chamber, .hub-pv-art, .ag-sketch, .au-la, .tl-screen {
  background:
    linear-gradient(rgba(226, 238, 255, .07) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, rgba(226, 238, 255, .07) 1px, transparent 1px) 0 0 / 20px 20px,
    radial-gradient(ellipse at 50% 30%, #1A56A6 0%, var(--bp-deep) 70%) !important;
  border: 1px solid var(--pen-2) !important; border-radius: 0 !important; outline: 1px solid var(--pen-4); outline-offset: 5px;
}
.hub-hero::before, .mu-hero::before, .ot-hero::before { background: radial-gradient(ellipse 60% 70% at 66% 55%, rgba(40, 110, 210, .35), transparent 70%) !important; }
.ot-hero::after { background: linear-gradient(90deg, rgba(13, 59, 122, .85), transparent) !important; }
.tl-play { color: var(--pen-2) !important; }

/* ═════════════ controls ═════════════ */
html body .btn {
  font: 600 15px/1 var(--display) !important; letter-spacing: .12em !important;
  border: 1px solid var(--pen-3) !important; background: rgba(10, 45, 100, .55) !important; color: var(--pen) !important;
  position: relative; isolation: isolate; overflow: visible;
  transition: border-color .2s, color .2s, background .2s, transform .15s !important;
}
html body .btn::after {
  content: ''; position: absolute; inset: -5px; pointer-events: none; opacity: 0;
  background:
    linear-gradient(var(--hi), var(--hi)) top left / 8px 1px no-repeat, linear-gradient(var(--hi), var(--hi)) top left / 1px 8px no-repeat,
    linear-gradient(var(--hi), var(--hi)) bottom right / 8px 1px no-repeat, linear-gradient(var(--hi), var(--hi)) bottom right / 1px 8px no-repeat;
  transition: opacity .2s, inset .25s var(--ease);
}
html body .btn:hover { border-color: var(--pen) !important; background: rgba(226, 238, 255, .08) !important; }
html body .btn:hover::after { opacity: 1; inset: -3px; }
html body .btn:active { transform: translateY(1px); }
html body .btn.primary { background: var(--hi) !important; border-color: var(--hi) !important; color: var(--hi-ink) !important; }
html body .btn.primary:hover { background: #FFE07A !important; border-color: #FFE07A !important; }
html body .btn .arrow { display: inline-block; transition: transform .25s var(--ease); }
html body .btn:hover .arrow { transform: translate(2px, -2px); }
html body .input, html body .select, html body .textarea {
  background: rgba(8, 36, 82, .6) !important; border: 1px solid var(--pen-3) !important; border-bottom: 1px solid var(--pen) !important; color: var(--pen) !important;
  font-family: var(--mono) !important; caret-color: var(--hi);
}
html body .input::placeholder, html body .textarea::placeholder { color: rgba(226, 238, 255, .45); }
html body .input:focus, html body .select:focus, html body .textarea:focus { border-color: var(--hi) !important; background: rgba(8, 36, 82, .85) !important; outline: none !important; box-shadow: 0 2px 0 0 var(--hi) !important; }
html body .chip { border-color: var(--pen-3) !important; color: var(--pen-2); }
html body .chip.on { color: var(--hi) !important; border-color: rgba(255, 210, 63, .55) !important; }
html body .seg button.on { background: var(--hi) !important; color: var(--hi-ink) !important; }
html body .dialog { background: var(--bp) !important; border: 1px solid var(--pen-2) !important; outline: 1px solid var(--pen-4); outline-offset: 6px; }
html body .dialog::before { background: var(--hi) !important; }
html body .toast { background: var(--bp-deep) !important; border-color: var(--pen-3) !important; border-left: 3px solid var(--hi) !important; color: var(--pen); }
html body .modal { background: rgba(4, 22, 52, .72) !important; }
html body .tbl th { color: var(--pen-2) !important; border-bottom: 1px solid var(--pen-2) !important; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
html body .tbl td { border-bottom: 1px dashed var(--line-2) !important; }
html body .tbl tbody tr:hover td { background: var(--hi-soft) !important; }
html body .skel { background: repeating-linear-gradient(-45deg, rgba(226, 238, 255, .06) 0 6px, transparent 6px 12px), rgba(10, 45, 100, .6) !important; background-size: 200% 100% !important; animation: hatch 1.2s linear infinite !important; }
@keyframes hatch { to { background-position: -34px 0; } }
.up { color: #7CF2B0 !important; } .down { color: #FF8C7E !important; }

/* ═════════════ home ═════════════ */
.hub-title { font: 700 clamp(60px, 7.6vw, 124px)/.9 var(--display) !important; letter-spacing: .005em !important; }
.hub-title em { -webkit-text-stroke: 0; }
.hub-dot { background: var(--hi) !important; box-shadow: 10px 0 0 var(--pen-2), 20px 0 0 var(--pen-3) !important; }
.hub-row.hot, .hub-row:hover { background: var(--hi) !important; color: var(--hi-ink) !important; }
.hub-row.hot .hub-no, .hub-row:hover .hub-no, .hub-row.hot .hub-line, .hub-row:hover .hub-line { color: var(--hi-ink) !important; }
.hub-what-go, .hub-how-s li span, .tl-steps li > span, .tl-cmd code b { color: var(--hi) !important; }
.hub-what-go { transition: letter-spacing .3s var(--ease); }
.hub-what-c:hover .hub-what-go { letter-spacing: .12em; }
.tl-cmd code i { color: var(--pen) !important; text-decoration: underline dashed var(--pen-2); text-underline-offset: 4px; }
.au-tabs a.on, .au-tabs .on { border-color: var(--hi) !important; color: var(--hi) !important; background: var(--hi-soft) !important; }
.ag-bar, .au-tabs { background: rgba(9, 42, 94, .94) !important; }
.vc-tbl tr.top td { background: var(--hi-soft) !important; }
.vc-bar i { background: var(--hi) !important; }

/* ═════════════ help, tour, toasts ═════════════ */
.help-fab { background: var(--bp-deep) !important; border-color: var(--pen-3) !important; color: var(--pen) !important; font-family: var(--display) !important; font-weight: 600 !important; letter-spacing: .12em !important; }
.help-fab span { color: var(--hi) !important; }
.tour-spot { border: 1px dashed var(--hi) !important; box-shadow: 0 0 0 200vmax rgba(4, 22, 52, .74) !important; }
.tour-spot::before, .tour-spot::after { border-color: var(--hi) !important; }
.tour-card, .tour-offer { background: var(--bp) !important; border-color: var(--pen-3) !important; }
.tour-card { border-top: 2px solid var(--hi) !important; } .tour-offer { border-left: 2px solid var(--hi) !important; }
.tour-dots i.on { background: var(--hi) !important; }

/* ═════════════ the drawing frame, zone marks and title block (blueprint.js) ═════════════ */
.bp-frame { position: fixed; top: 8px; right: 8px; bottom: 8px; left: calc(var(--side-w) + 8px); pointer-events: none; z-index: 2; border: 1px solid var(--pen-3); }
.bp-frame::before { content: ''; position: absolute; inset: 14px; border: 1px solid var(--pen-4); }
.bp-zones { position: absolute; display: flex; font: 500 9px/14px var(--mono); color: var(--pen-2); letter-spacing: .1em; }
.bp-zones span { flex: 1; text-align: center; border-left: 1px solid var(--pen-4); transition: color .2s, background .2s; }
.bp-zones span:first-child { border-left: 0; }
.bp-zones span.on { color: var(--hi); background: rgba(255, 210, 63, .16); }
.bp-zones.t, .bp-zones.b { left: 14px; right: 14px; height: 14px; } .bp-zones.t { top: 0; } .bp-zones.b { bottom: 0; }
.bp-zones.l, .bp-zones.r { top: 14px; bottom: 14px; width: 14px; flex-direction: column; } .bp-zones.l { left: 0; } .bp-zones.r { right: 0; }
.bp-zones.l span, .bp-zones.r span { display: grid; place-items: center; border-left: 0; border-top: 1px solid var(--pen-4); }
.bp-zones.l span:first-child, .bp-zones.r span:first-child { border-top: 0; }
.bp-tb { margin: auto 16px 14px; pointer-events: none; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--pen-2); background: rgba(10, 45, 100, .7); font: 500 8.5px/1 var(--mono); letter-spacing: .14em; color: var(--pen-2); text-transform: uppercase; }
.bp-tb > div { padding: 7px 9px; display: grid; gap: 5px; border-top: 1px solid var(--pen-3); min-width: 0; }
.bp-tb > div:nth-child(1) { border-top: 0; border-right: 1px solid var(--pen-3); } .bp-tb > div:nth-child(3) { border-top: 0; order: 2; }
.bp-tb > div:nth-child(2) { grid-column: 1 / -1; order: 3; }
.bp-tb b { font: 700 13px/1 var(--display); letter-spacing: .12em; color: var(--pen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-tb .bp-tb-dwg b { color: var(--hi); }
.bp-tb b.flip { animation: tbFlip .5s var(--ease); }
@keyframes tbFlip { from { opacity: 0; transform: translateY(6px); } }
.side-body .side-foot { margin-top: 0 !important; }
@media (max-height: 820px) and (min-width: 1061px) { .bp-tb { display: none; } .side-body .side-foot { margin-top: auto !important; } }
@media (max-width: 1060px) { .bp-frame { display: none; } .bp-tb { margin-top: 18px; } }

/* cursor: drafting crosshair with coordinates */
.bp-cx, .bp-cy { position: fixed; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .25s; }
.bp-cx { left: var(--side-w); right: 0; height: 0; border-top: 1px dashed rgba(226, 238, 255, .22); }
.bp-cy { top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(226, 238, 255, .22); }
.bp-co { position: fixed; pointer-events: none; z-index: 5; font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--hi); padding: 4px 6px; background: rgba(10, 45, 100, .9); border: 1px solid rgba(255, 210, 63, .5); opacity: 0; transition: opacity .25s; white-space: nowrap; }
body.bp-cur .bp-cx, body.bp-cur .bp-cy, body.bp-cur .bp-co { opacity: 1; }
@media (pointer: coarse), (max-width: 1060px) { .bp-cx, .bp-cy, .bp-co { display: none; } }

/* click: a compass circle with its radius */
.bp-ring { position: fixed; pointer-events: none; z-index: 6; width: 0; height: 0; }
.bp-ring svg { position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; overflow: visible; }
.bp-ring circle { fill: none; stroke: var(--hi); stroke-width: 1; stroke-dasharray: 340; stroke-dashoffset: 340; animation: ringDraw .55s var(--ease) forwards, ringOut .4s ease .45s forwards; }
.bp-ring line { stroke: var(--hi); stroke-width: 1; animation: ringOut .4s ease .45s forwards; }
.bp-ring span { position: absolute; left: 10px; top: -22px; font: 500 10px/1 var(--mono); color: var(--hi); animation: ringOut .4s ease .45s forwards; }
@keyframes ringDraw { to { stroke-dashoffset: 0; } }
@keyframes ringOut { to { opacity: 0; } }

/* scroll: panels are drawn in as they come into view */
.bp-pre { opacity: 0; transform: translateY(14px); clip-path: inset(0 100% 0 0); }
.bp-in { animation: bpIn .8s var(--ease) both; }
@keyframes bpIn { from { opacity: 0; transform: translateY(14px); clip-path: inset(0 100% 0 0); } 55% { opacity: 1; } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

/* page entrance: blocks are drawn left to right instead of falling in */
.entering #view section, .entering #view .tl-steps, .entering #view header, .entering #view .foot { animation: bpIn .85s var(--ease) both !important; }
.entering #view h1 { animation: titleDraw .9s var(--ease) both .05s !important; }
@keyframes titleDraw { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

/* highlighter stroke behind the yellow headline word, drawn once */
#view h1 em { position: relative; }

/* hatch fill on the active tab / hover rows */
.hub-row { position: relative; }
.hub-row::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(10, 42, 92, .18) 0 2px, transparent 2px 9px); opacity: 0; transition: opacity .25s; pointer-events: none; }
.hub-row:hover::before, .hub-row.hot::before { opacity: 1; }

/* logo mark (inline SVG): the yellow cube floats out of the notch and settles back */
.tek-mark { width: 44px; height: 44px; flex: none; color: var(--pen); overflow: visible; }
.tek-mark .tm-b line { stroke: currentColor; }
.tek-mark .tm-c line { stroke: var(--hi); }
.tek-mark .tm-c { animation: tmFloat 3.6s cubic-bezier(.45, 0, .2, 1) infinite; }
.brand:hover .tek-mark .tm-c { animation-duration: 1.2s; }
@keyframes tmFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.adm-card-h .tek-mark { width: 54px; height: 54px; }
@media (prefers-reduced-motion: reduce) { .tek-mark .tm-c { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .bp-dim i { animation: none; transform: none; } .bp-dim em { animation: none; opacity: 1; }
  .bp-pre { opacity: 1; transform: none; clip-path: none; } .bp-in { animation: none; }
  .bp-ring { display: none; }
}