@layer reset, base, components, modules, shell, identity, responsive, utilities;
@layer modules {
  /* UoL Cortex — sign-in gateway.
   A dark instrument-panel treatment for the anonymous entry point. Purple stays the
   institutional anchor; teal is used only for live technical signals and focus states.
   Namespaced under .cxl so the authenticated shell styles are never affected. */
  .cxl {
    --cxl-ease:cubic-bezier(.2,.8,.2,1);
    position:relative;
    isolation:isolate;
    min-height:100vh;
    min-height:100dvh;
    color:var(--uol-surface);
    font-family: var(--uol-font-sans);
    background: radial-gradient(1100px 720px at 12% 8%,rgba(98,63,153,.34),transparent 68%), radial-gradient(820px 640px at 78% 92%,rgba(0,182,200,.13),transparent 66%), linear-gradient(158deg,var(--uol-purple-night) 0%,var(--uol-purple-night) 48%,#1c0f28 100%);
    overflow:hidden;
  }
  .cxl[hidden] {
    display:none;
  }
  .cxl * {
    box-sizing:border-box;
  }
  /* ── Atmosphere ──────────────────────────────────────────────────────────── */
  .cxl-field {
    position:absolute;
    inset:0;
    z-index: var(--uol-z-behind);
    pointer-events:none;
    overflow:hidden;
  }
  /* Engineered hairline grid, faded away from the origin corner. */
  .cxl-grid {
    position:absolute;
    inset:-2px;
    background-image: linear-gradient(rgba(205,180,223,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(205,180,223,.055) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(120% 100% at 8% 0%,#000 0%,rgba(0,0,0,.55) 48%,transparent 82%);
    mask-image:radial-gradient(120% 100% at 8% 0%,#000 0%,rgba(0,0,0,.55) 48%,transparent 82%);
  }
  .cxl-grid:after {
    content:"";
    position:absolute;
    inset:0;
    background-image: linear-gradient(rgba(205,180,223,.14) 1px,transparent 1px), linear-gradient(90deg,rgba(205,180,223,.14) 1px,transparent 1px);
    background-size:320px 320px;
    -webkit-mask-image:radial-gradient(90% 80% at 10% 4%,#000,transparent 76%);
    mask-image:radial-gradient(90% 80% at 10% 4%,#000,transparent 76%);
  }
  .cxl-bloom {
    position:absolute;
    border-radius:50%;
    filter:blur(96px);
    opacity:.4;
    animation:cxl-drift 17s var(--cxl-ease) infinite alternate;
  }
  .cxl-bloom-a {
    width:520px;
    height:520px;
    left:-90px;
    top:-140px;
    background:var(--uol-purple);
  }
  .cxl-bloom-b {
    width:420px;
    height:420px;
    left:34%;
    bottom:-190px;
    background:#1f6f9c;
    animation-delay:-8s;
  }
  .cxl-bloom-c {
    width:300px;
    height:300px;
    right:26%;
    top:18%;
    background:var(--uol-blue-purple);
    opacity:.26;
    animation-delay:-4s;
  }
  /* Signal mesh — the nodes and the packets travelling between them. */
  .cxl-mesh {
    position:absolute;
    left:2%;
    top:8%;
    width:78%;
    height:84%;
    opacity:.62;
  }
  .cxl-mesh .mesh-link {
    fill:none;
    stroke:rgba(205,180,223,.22);
    stroke-width:1;
    stroke-dasharray:4 9;
    animation:cxl-trace 30s linear infinite;
  }
  .cxl-mesh .mesh-link.secondary {
    stroke:rgba(0,182,200,.2);
  }
  .cxl-mesh .mesh-node {
    fill:#a07ccb;
    stroke:rgba(255,255,255,.34);
    stroke-width:1.5;
    transform-box:fill-box;
    transform-origin:center;
    animation:cxl-node 5.5s ease-in-out infinite;
  }
  .cxl-mesh .mesh-node:nth-child(3n) {
    animation-delay:-1.8s;
    fill:#4fc2d2;
  }
  .cxl-mesh .mesh-node:nth-child(4n) {
    animation-delay:-3.4s;
  }
  .cxl-mesh .mesh-packet {
    fill:#e7d8f7;
    filter:drop-shadow(0 0 6px rgba(163,116,197,.9));
  }
  .cxl-mesh .mesh-packet.cool {
    fill:#8fe4ee;
    filter:drop-shadow(0 0 6px rgba(0,182,200,.8));
  }
  /* Slow horizontal sweep, like a refresh pass across the panel. */
  .cxl-sweep {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:44%;
    background:linear-gradient(90deg,transparent,rgba(205,180,223,.06) 46%,rgba(0,182,200,.09) 50%,transparent);
    animation:cxl-sweep 13s ease-in-out infinite;
  }
  .cxl-grain {
    position:absolute;
    inset:0;
    opacity:.24;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  }
  .cxl-vignette {
    position:absolute;
    inset:0;
    background:radial-gradient(130% 120% at 40% 40%,transparent 42%,rgba(6,2,10,.62) 100%);
  }
  /* ── Stage ───────────────────────────────────────────────────────────────── */
  .cxl-stage {
    display:grid;
    grid-template-columns: minmax(0, 1fr);
    min-height:100vh;
    min-height:100dvh;
  }
  .cxl-brand {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:clamp(34px,5vh,64px);
    min-width:0;
    padding:clamp(30px,4.4vw,74px) clamp(26px,4.4vw,78px) clamp(30px,4vw,60px);
  }
  /* HUD bracket in the origin corner. */
  .cxl-brand:before {
    content:"";
    position:absolute;
    left:22px;
    top:22px;
    width:46px;
    height:46px;
    border-left:1px solid rgba(0,182,200,.36);
    border-top:1px solid rgba(0,182,200,.36);
    pointer-events:none;
  }
  .cxl-lockup {
    display:flex;
    align-items:center;
    gap: var(--uol-space-4);
    min-width:0;
  }
  .cxl-lockup img {
    width:clamp(112px,11vw,152px);
    max-height:56px;
    object-fit:contain;
  }
  .cxl-lockup span {
    max-width:180px;
    padding-left: var(--uol-space-4);
    border-left:1px solid var(--uol-border-inverse);
    color:var(--uol-muted-inverse);
    font-size: var(--uol-text-xs);
    font-weight:700;
    line-height:1.5;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .cxl-intro {
    max-width:730px;
  }
  .cxl-wordmark {
    display:block;
    width:min(292px,64%);
    margin:0 0 clamp(24px,3.4vh,40px);
    filter:drop-shadow(0 20px 34px rgba(9,3,15,.5));
  }
  .cxl-eyebrow {
    display:flex;
    align-items:center;
    gap: var(--uol-space-2);
    margin-bottom: var(--uol-space-4);
    color:#8fe0ea;
    font-family:var(--uol-font-mono);
    font-size: var(--uol-text-xs);
    font-weight:500;
    letter-spacing:.22em;
    text-transform:uppercase;
  }
  .cxl-eyebrow i {
    width:30px;
    height:1px;
    background:linear-gradient(90deg,var(--uol-teal),transparent);
    flex:0 0 30px;
  }
  .cxl-brand h1 {
    margin: 0 0 var(--uol-space-4);
    font-size:clamp(38px,5.4vw,80px);
    font-weight:300;
    line-height:.94;
    letter-spacing:-.045em;
    color:#fff;
  }
  .cxl-brand h1 strong {
    font-weight:800;
    background:linear-gradient(96deg,#e6d4f6 0%,var(--uol-purple-30) 40%,#7fdbe6 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
  }
  .cxl-lede {
    max-width:568px;
    margin:0;
    color:var(--uol-muted-inverse);
    font-size:clamp(13px,1.05vw,15.5px);
    line-height:1.72;
  }
  /* Numbered capability rail. */
  .cxl-rail {
    display:flex;
    flex-wrap:wrap;
    gap:0;
    margin-top:clamp(26px,3.6vh,42px);
    border-top:1px solid var(--uol-border-inverse);
  }
  .cxl-rail div {
    display:flex;
    align-items:baseline;
    gap: var(--uol-space-2);
    padding: var(--uol-space-4) var(--uol-space-5) 0 0;
    margin-right: var(--uol-space-5);
    color:rgba(244,240,248,.78);
    font-size: var(--uol-text-xs);
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
  }
  .cxl-rail b {
    color:var(--uol-teal);
    font-family:var(--uol-font-mono);
    font-size: var(--uol-text-xs);
    font-weight:500;
    letter-spacing:.08em;
  }
  .cxl-foot {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap: var(--uol-space-2) var(--uol-space-5);
    min-width:0;
  }
  .cxl-signal {
    display:inline-flex;
    align-items:center;
    gap: var(--uol-space-2);
    padding: var(--uol-space-2) var(--uol-space-3);
    border:1px solid var(--uol-border-inverse);
    border-radius: var(--uol-radius-pill);
    background:rgba(20,10,30,.5);
    backdrop-filter:blur(10px);
    color:var(--uol-muted-inverse);
    font-family:var(--uol-font-mono);
    font-size: var(--uol-text-xs);
    letter-spacing:.1em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .cxl-signal i {
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:var(--uol-purple-30);
    box-shadow:0 0 0 4px rgba(205,180,223,.1);
  }
  .cxl-signal[data-state] i {
    animation:cxl-blink 2.6s ease-in-out infinite;
  }
  .cxl-signal[data-state="online"] {
    color:rgba(244,240,248,.66);
  }
  .cxl-signal[data-state="online"] i {
    background:var(--uol-green);
    box-shadow:0 0 0 4px rgba(164,206,76,.14);
  }
  .cxl-signal[data-state="down"] i {
    background:var(--uol-red);
    box-shadow:0 0 0 4px rgba(238,64,80,.14);
    animation:none;
  }
  .cxl-copyright {
    color:rgba(244,240,248,.52);
    font-family:var(--uol-font-mono);
    font-size: var(--uol-text-xs);
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  /* ── Console column ──────────────────────────────────────────────────────── */
  .cxl-console {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    gap: var(--uol-space-4);
    padding:clamp(28px,3vw,52px) clamp(22px,2.6vw,46px) clamp(112px,10vh,132px);
    border-left:1px solid var(--uol-border-inverse);
    background:linear-gradient(200deg,rgba(35,20,51,.62),rgba(11,5,18,.78));
    box-shadow:-40px 0 90px rgba(6,2,11,.5);
    backdrop-filter:blur(14px);
  }
  /* Glowing node where the two columns meet. */
  .cxl-console:before {
    content:"";
    position:absolute;
    left:-3px;
    top:calc(50% - 62px);
    width:5px;
    height:124px;
    border-radius: var(--uol-radius-sm);
    background:linear-gradient(180deg,transparent,var(--uol-teal),transparent);
    opacity:.65;
  }
  .cxl-console-tag {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--uol-space-3);
    color:var(--uol-muted-inverse);
    font-family:var(--uol-font-mono);
    font-size: var(--uol-text-xs);
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .cxl-console-tag span {
    display:inline-flex;
    align-items:center;
    gap: var(--uol-space-2);
  }
  .cxl-console-tag em {
    font-style:normal;
    color:#8fe0ea;
  }
  .cxl-card {
    position:relative;
    padding:clamp(24px,2.4vw,36px);
    border:1px solid rgba(205,180,223,.16);
    border-radius: var(--uol-radius-lg);
    background:linear-gradient(180deg,rgba(46,27,64,.72),rgba(17,9,26,.88));
    box-shadow:0 34px 80px rgba(5,2,10,.5),inset 0 1px 0 rgba(255,255,255,.07);
  }
  /* Circuit trace across the head of the card. */
  .cxl-card:before {
    content:"";
    position:absolute;
    left:26px;
    right:26px;
    top:-1px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--uol-purple-80) 22%,var(--uol-teal) 62%,transparent);
    opacity:.7;
  }
  .cxl-card:after {
    content:"";
    position:absolute;
    right:20px;
    bottom:16px;
    width:36px;
    height:36px;
    border-right:1px solid rgba(0,182,200,.28);
    border-bottom:1px solid rgba(0,182,200,.28);
    border-bottom-right-radius:10px;
    pointer-events:none;
  }
  .cxl-card-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--uol-space-3);
    margin-bottom: var(--uol-space-5);
  }
  .cxl-mark {
    position:relative;
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    border:1px solid rgba(205,180,223,.2);
    border-radius: var(--uol-radius-md);
    background:rgba(255,255,255,.05);
  }
  .cxl-mark img {
    width:32px;
    height:32px;
    display:block;
  }
  .cxl-mark:after {
    content:"";
    position:absolute;
    inset:-5px;
    border:1px solid rgba(0,182,200,.22);
    border-radius: var(--uol-radius-md);
    border-style:dashed;
    animation:cxl-spin 22s linear infinite;
  }
  .cxl-secure {
    display:inline-flex;
    align-items:center;
    gap: var(--uol-space-2);
    padding: var(--uol-space-2) var(--uol-space-3);
    border:1px solid rgba(164,206,76,.22);
    border-radius: var(--uol-radius-pill);
    background:rgba(164,206,76,.08);
    color:#c9e28e;
    font-family:var(--uol-font-mono);
    font-size: var(--uol-text-xs);
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .cxl-secure i {
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--uol-green);
    box-shadow:0 0 0 4px rgba(164,206,76,.12);
  }
  .cxl-kicker {
    color:var(--uol-purple-30);
    font-family:var(--uol-font-mono);
    font-size: var(--uol-text-xs);
    letter-spacing:.2em;
    text-transform:uppercase;
  }
  .cxl-card h2 {
    margin: var(--uol-space-3) 0 var(--uol-space-2);
    color:#fff;
    font-size:clamp(25px,2.5vw,33px);
    font-weight:700;
    letter-spacing:-.03em;
  }
  .cxl-card h2+p {
    margin: 0 0 var(--uol-space-5);
    color:var(--uol-muted-inverse);
    font-size: var(--uol-text-xs);
    line-height:1.6;
  }
  /* ── Fields ──────────────────────────────────────────────────────────────── */
  .cxl-field-row {
    display:flex;
    flex-direction:column;
    gap: var(--uol-space-2);
    margin-top: var(--uol-space-4);
  }
  .cxl-field-row label {
    color:rgba(244,240,248,.66);
    font-family:var(--uol-font-mono);
    font-size: var(--uol-text-xs);
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .cxl-label-row {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap: var(--uol-space-3);
  }
  .cxl-link {
    border:0;
    background:transparent;
    padding:0;
    color:#8fe0ea;
    font-family:var(--uol-font-mono);
    font-size: var(--uol-text-xs);
    letter-spacing:.1em;
    text-transform:uppercase;
    cursor:pointer;
  }
  .cxl-link:hover {
    color:#bff2f8;
    text-decoration:underline;
  }
  .cxl-link:focus-visible {
    outline:2px solid var(--uol-teal);
    outline-offset:3px;
    border-radius: var(--uol-radius-sm);
  }
  .cxl-input {
    position:relative;
    display:flex;
    align-items:center;
    min-height:54px;
    border:1px solid rgba(205,180,223,.18);
    border-radius: var(--uol-radius-md);
    background:rgba(9,4,15,.55);
    transition:border-color .2s var(--cxl-ease),box-shadow .2s var(--cxl-ease),background .2s var(--cxl-ease);
  }
  .cxl-input:focus-within {
    border-color:rgba(0,182,200,.6);
    background:rgba(9,4,15,.72);
    box-shadow:0 0 0 4px rgba(0,182,200,.13);
  }
  .cxl-input>svg {
    width:18px;
    height:18px;
    flex:0 0 18px;
    margin: 0 0 0 var(--uol-space-4);
    color:rgba(205,180,223,.5);
    transition:color .2s;
  }
  .cxl-input:focus-within>svg {
    color:var(--uol-teal);
  }
  .cxl-input input {
    flex:1;
    min-width:0;
    padding: var(--uol-space-4) var(--uol-space-3);
    border:0;
    border-radius: var(--uol-radius-md);
    background:transparent;
    outline:0;
    color:var(--uol-surface);
    font-family: var(--uol-font-sans);
    font-size: var(--uol-text-sm);
    letter-spacing:.01em;
  }
  .cxl-input input::placeholder {
    color:rgba(244,240,248,.42);
  }
  .cxl-input input:-webkit-autofill, .cxl-input input:-webkit-autofill:focus {
    -webkit-text-fill-color:var(--uol-surface);
    -webkit-box-shadow:0 0 0 1000px #150b20 inset;
    caret-color:var(--uol-surface);
    transition:background-color 9999s ease-out;
  }
  .cxl-reveal {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    margin-right: var(--uol-space-2);
    border:1px solid transparent;
    border-radius: var(--uol-radius-sm);
    background:transparent;
    color:rgba(205,180,223,.62);
    cursor:pointer;
    transition:color .18s,background .18s,border-color .18s;
  }
  .cxl-reveal svg {
    width:17px;
    height:17px;
    display:block;
  }
  .cxl-reveal:hover {
    color:#fff;
    background:rgba(205,180,223,.1);
    border-color:rgba(205,180,223,.16);
  }
  .cxl-reveal:focus-visible {
    outline:2px solid var(--uol-teal);
    outline-offset:2px;
  }
  .cxl-caps {
    display:none;
    align-items:center;
    gap: var(--uol-space-2);
    margin-top: var(--uol-space-1);
    color:#ffe750;
    font-family:var(--uol-font-mono);
    font-size: var(--uol-text-xs);
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .cxl-caps.on {
    display:flex;
  }
  .cxl-caps:before {
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:#ffe750;
    box-shadow:0 0 0 3px rgba(255,231,80,.14);
  }
  .cxl-hint {
    margin: var(--uol-space-2) 0 0;
    color:var(--uol-muted-inverse);
    font-size: var(--uol-text-xs);
    line-height:1.5;
  }
  /* ── Actions ─────────────────────────────────────────────────────────────── */
  .cxl-submit {
    position:relative;
    overflow:hidden;
    width:100%;
    min-height:56px;
    margin-top: var(--uol-space-5);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: var(--uol-space-3);
    padding: 0 var(--uol-space-2) 0 var(--uol-space-4);
    border:0;
    border-radius: var(--uol-radius-md);
    background:linear-gradient(102deg,var(--uol-purple) 0%,#6f4bab 42%,var(--uol-blue-purple) 100%);
    color:#fff;
    font-family: var(--uol-font-sans);
    font-size: var(--uol-text-xs);
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
    cursor:pointer;
    box-shadow:0 18px 38px rgba(63,32,102,.44),inset 0 1px 0 rgba(255,255,255,.16);
    transition:transform .2s var(--cxl-ease),box-shadow .2s var(--cxl-ease),filter .2s;
  }
  .cxl-submit>span {
    position:relative;
    z-index: var(--uol-z-raised);
  }
  .cxl-submit b {
    position:relative;
    z-index: var(--uol-z-raised);
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius: var(--uol-radius-sm);
    background:rgba(255,255,255,.14);
    font-size: var(--uol-text-sm);
    font-weight:600;
    transition:transform .2s var(--cxl-ease),background .2s;
  }
  .cxl-submit:after {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-60%;
    width:45%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent);
    transform:skewX(-18deg);
  }
  .cxl-submit:hover {
    transform:translateY(-2px);
    box-shadow:0 24px 46px rgba(63,32,102,.54),inset 0 1px 0 rgba(255,255,255,.2);
  }
  .cxl-submit:hover:after {
    animation:cxl-shine .9s var(--cxl-ease);
  }
  .cxl-submit:hover b {
    transform:translateX(3px);
    background:rgba(255,255,255,.22);
  }
  .cxl-submit:active {
    transform:translateY(0);
  }
  .cxl-submit:focus-visible {
    outline:2px solid var(--uol-teal);
    outline-offset:3px;
  }
  .cxl-submit:disabled {
    cursor:progress;
    filter:saturate(.6) brightness(.9);
    transform:none;
  }
  .cxl-submit:disabled:before {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--uol-teal),transparent);
    animation:cxl-progress 1.15s linear infinite;
  }
  .cxl-submit.secondary {
    background:rgba(255,255,255,.06);
    border:1px solid rgba(205,180,223,.2);
    box-shadow:none;
  }
  .cxl-submit.secondary:hover {
    background:rgba(255,255,255,.1);
    box-shadow:0 14px 30px rgba(6,2,11,.4);
  }
  /* ── Alerts ──────────────────────────────────────────────────────────────── */
  #loginError:not(:empty),#setupError:not(:empty) {
    display:flex;
    gap: var(--uol-space-2);
    margin-top: var(--uol-space-4);
    padding: var(--uol-space-3) var(--uol-space-3);
    border:1px solid rgba(238,64,80,.34);
    border-left-width:3px;
    border-radius: var(--uol-radius-sm);
    background:rgba(238,64,80,.1);
    color:#ffc6cb;
    font-size: var(--uol-text-xs);
    line-height:1.55;
  }
  #loginError:not(:empty):before,#setupError:not(:empty):before {
    content:"!";
    flex:0 0 auto;
    color:var(--uol-red);
    font-family:var(--uol-font-mono);
    font-weight:700;
  }
  #loginError[data-state="notice"]:not(:empty) {
    border-color:rgba(164,206,76,.34);
    background:rgba(164,206,76,.1);
    color:#dcf0ae;
  }
  #loginError[data-state="notice"]:not(:empty):before {
    content:"→";
    color:var(--uol-green);
  }
  /* ── Card footer ─────────────────────────────────────────────────────────── */
  .cxl-help {
    display:flex;
    align-items:flex-start;
    gap: var(--uol-space-3);
    margin-top: var(--uol-space-5);
    padding-top: var(--uol-space-5);
    border-top:1px solid var(--uol-border-inverse);
  }
  .cxl-help svg {
    width:26px;
    height:26px;
    flex:0 0 26px;
    color:var(--uol-purple-30);
    opacity:.75;
  }
  .cxl-help p {
    margin:0;
    color:var(--uol-muted-inverse);
    font-size: var(--uol-text-xs);
    line-height:1.6;
  }
  .cxl-help strong {
    display:block;
    color:rgba(244,240,248,.82);
    font-weight:700;
  }
  .cxl-trust {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap: var(--uol-space-2) var(--uol-space-3);
    color:rgba(244,240,248,.58);
    font-family:var(--uol-font-mono);
    font-size: var(--uol-text-xs);
    letter-spacing:.14em;
    text-transform:uppercase;
    text-align:center;
  }
  .cxl-trust i {
    width:3px;
    height:3px;
    border-radius:50%;
    background:rgba(205,180,223,.4);
  }
  /* ── Entrance choreography ───────────────────────────────────────────────── */
  .cxl-lockup,.cxl-intro,.cxl-foot,.cxl-console-tag,.cxl-card,.cxl-trust {
    animation:cxl-rise .82s var(--cxl-ease) both;
  }
  .cxl-lockup {
    animation-delay:.04s;
  }
  .cxl-intro {
    animation-delay:.14s;
  }
  .cxl-foot {
    animation-delay:.3s;
  }
  .cxl-console-tag {
    animation-delay:.2s;
  }
  .cxl-card {
    animation-delay:.12s;
  }
  .cxl-trust {
    animation-delay:.34s;
  }
  @keyframes cxl-rise {
    from {
      opacity:0;
      transform:translate3d(0,18px,0);
    }
    to {
      opacity:1;
      transform:none;
    }
  }
  @keyframes cxl-drift {
    to {
      transform:translate3d(48px,-34px,0) scale(1.14);
      opacity:.52;
    }
  }
  @keyframes cxl-trace {
    to {
      stroke-dashoffset:-260;
    }
  }
  @keyframes cxl-node {
    0%,100% {
      transform:scale(.7);
      opacity:.5;
    }
    50% {
      transform:scale(1.2);
      opacity:1;
    }
  }
  @keyframes cxl-sweep {
    0% {
      transform:translateX(-30%);
      opacity:0;
    }
    18% {
      opacity:1;
    }
    82% {
      opacity:1;
    }
    100% {
      transform:translateX(230%);
      opacity:0;
    }
  }
  @keyframes cxl-spin {
    to {
      transform:rotate(360deg);
    }
  }
  @keyframes cxl-blink {
    0%,100% {
      opacity:.45;
    }
    50% {
      opacity:1;
    }
  }
  @keyframes cxl-shine {
    from {
      left:-60%;
    }
    to {
      left:130%;
    }
  }
  @keyframes cxl-progress {
    from {
      transform:translateX(-100%);
    }
    to {
      transform:translateX(100%);
    }
  }
  /* ── Responsive ──────────────────────────────────────────────────────────── */
  @media(max-width: 1024px) {
    .cxl-stage {
      grid-template-columns: minmax(0, 1fr);
    }
    .cxl-brand h1 {
      font-size:clamp(36px,4.6vw,58px);
    }
    .cxl-wordmark {
      width:min(250px,58%);
    }
  }
  @media(max-width: 1024px) {
    .cxl-stage {
      grid-template-columns:1fr;
      min-height:0;
    }
    .cxl-mesh {
      width:96%;
      height:52%;
      top:4%;
    }
    .cxl-brand {
      padding: var(--uol-space-6) var(--uol-space-5) var(--uol-space-7);
      gap: var(--uol-space-6);
    }
    .cxl-brand:before {
      left:14px;
      top:14px;
      width:34px;
      height:34px;
    }
    .cxl-intro {
      max-width:none;
    }
    .cxl-wordmark {
      width:min(226px,56%);
    }
    .cxl-console {
      padding: var(--uol-space-6) var(--uol-space-5) var(--uol-space-8);
      border-left:0;
      border-top:1px solid var(--uol-border-inverse);
      box-shadow:0 -34px 80px rgba(6,2,11,.46);
    }
    .cxl-console:before {
      left:calc(50% - 62px);
      top:-3px;
      width:124px;
      height:5px;
      background:linear-gradient(90deg,transparent,var(--uol-teal),transparent);
    }
    .cxl-card {
      max-width:520px;
      margin:0 auto;
      width:100%;
    }
    .cxl-console-tag,.cxl-trust {
      max-width:520px;
      margin:0 auto;
      width:100%;
    }
  }
  @media(max-width: 768px) {
    .cxl-brand {
      padding: var(--uol-space-5) var(--uol-space-4) var(--uol-space-6);
      gap: var(--uol-space-5);
    }
    .cxl-lockup {
      gap: var(--uol-space-3);
    }
    .cxl-lockup img {
      width:108px;
    }
    .cxl-lockup span {
      max-width:150px;
      padding-left: var(--uol-space-3);
      font-size: var(--uol-text-xs);
    }
    .cxl-brand h1 {
      font-size:clamp(32px,10vw,44px);
      margin-bottom: var(--uol-space-4);
    }
    .cxl-lede {
      font-size: var(--uol-text-xs);
    }
    .cxl-rail div {
      padding-right: var(--uol-space-4);
      margin-right: var(--uol-space-4);
      font-size: var(--uol-text-xs);
    }
    .cxl-copyright {
      display:none;
    }
    .cxl-console {
      padding: var(--uol-space-5) var(--uol-space-4) var(--uol-space-8);
    }
    .cxl-card {
      padding: var(--uol-space-5) var(--uol-space-4);
      border-radius: var(--uol-radius-md);
    }
    .cxl-card-head {
      margin-bottom: var(--uol-space-5);
    }
    .cxl-input {
      min-height:52px;
    }
  }
  @media(max-width: 480px) {
    .cxl-rail {
      display:none;
    }
  }
  @media(prefers-reduced-motion:reduce) {
    .cxl *,.cxl *:before,.cxl *:after {
      animation:none;
      transition:none;
    }
    .cxl-mesh .mesh-packet {
      display:none;
    }
    .cxl-sweep {
      display:none;
    }
  }
  /* Multi-column grids, restored from the laptop breakpoint up. Below this width every
     one of these needs more horizontal room than the viewport has, so the base rule above
     keeps them in a single column. See scripts/mobile-first-grids.mjs. */
  @media (min-width: 769px) {
    .cxl-stage {
      grid-template-columns: minmax(0,1fr) clamp(392px,33vw,536px);
    }
    .cxl-stage {
      grid-template-columns: minmax(0,1fr) clamp(360px,40vw,460px);
    }
  }
}