.hubx {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: none;
    overflow: hidden;
    background: radial-gradient(1200px at 50% 42%, #101a38, #05070f 75%);
}
.hubx.open { display: block; }
.hubx-stage {
    position: absolute;
    inset: 0;
    transition: transform .2s ease;
    transform-origin: center center;
}
.hubx svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hubx svg line { stroke: rgba(127, 176, 255, .9); stroke-width: 1.2; transition: opacity .25s ease; }
.hubx-plate {
    position: absolute;
    border: 1px solid rgba(108, 140, 255, .16);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.hubx-rim {
    position: absolute;
    border: 2px dashed rgba(127, 176, 255, .22);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: hubx-spin 90s linear infinite;
}
@keyframes hubx-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hubx-node {
    position: absolute;
    width: 128px;
    color: #e8ecf6;
    text-align: center;
    text-decoration: none;
    transform: translate(-50%, -50%);
    transition: opacity .5s ease;
}
.hubx-node .disc {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 7px;
    border: 1px solid #2a4a7a;
    border-radius: 50%;
    background: #121a30;
    box-shadow: 0 0 22px rgba(79, 140, 255, .25);
    transition: transform .25s cubic-bezier(.2, .8, .25, 1), box-shadow .25s ease, border-color .25s ease;
    animation: hubx-float 6s ease-in-out infinite;
}
.hubx-node .disc img,
.hubx-center .core img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hubx-node .rel {
    display: block;
    margin-bottom: 2px;
    color: #6c8cff;
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.hubx-node .nm { font-size: 12px; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 6px #05070f; }
.hubx-node .cd { color: #7fb0ff; font-size: 9px; letter-spacing: .5px; }
.hubx-node:hover .disc,
.hubx-node:focus-visible .disc {
    border-color: #7fb0ff;
    box-shadow: 0 0 34px rgba(79, 140, 255, .65), 0 0 90px rgba(79, 140, 255, .25);
    transform: scale(1.16);
}
.hubx-node.pressed .disc { transform: scale(.9); }
.hubx-node .disc.facet {
    border-color: #3a5a94;
    background: linear-gradient(135deg, #24356b, #17224b);
}
.hubx-ripple {
    position: absolute;
    inset: -3px;
    border: 2px solid #7fb0ff;
    border-radius: 50%;
    pointer-events: none;
    animation: hubx-ripple .5s ease-out forwards;
}
@keyframes hubx-ripple {
    from { opacity: .9; transform: scale(1); }
    to { opacity: 0; transform: scale(2.2); }
}
@keyframes hubx-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.hubx-center {
    position: absolute;
    z-index: 3;
    text-align: center;
    transform: translate(-50%, -50%);
}
.hubx-center .core {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2f7dff, #1e4fd6);
    box-shadow: 0 0 70px rgba(79, 140, 255, .6);
    font-size: 46px;
    animation: hubx-breathe 5s ease-in-out infinite;
}
@keyframes hubx-breathe {
    0%, 100% { box-shadow: 0 0 70px rgba(79, 140, 255, .6); }
    50% { box-shadow: 0 0 95px rgba(79, 140, 255, .85); }
}
.hubx-center .nm { color: #fff; font-size: 17px; font-weight: 800; text-shadow: 0 2px 10px #05070f; }
.hubx-center .tp {
    margin-top: 2px;
    color: #9fb6e6;
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.hubx-center .cd {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    border: 1px solid #2a4a7a;
    border-radius: 999px;
    background: rgba(18, 26, 48, .8);
    color: #7fb0ff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}
.hubx-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    width: min(680px, 94vw);
    max-height: 80vh;
    padding: 18px 20px 26px;
    overflow-y: auto;
    border: 1px solid #2a4a7a;
    border-radius: 18px;
    background: linear-gradient(160deg, #0d1428, #0a0f1f);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
    color: #e8ecf6;
    transform: translate(-50%, -50%);
    --bg: #0b1020;
    --surface: #121a30;
    --ink: #e8ecf6;
    --muted: #9aa3b8;
    --line: #2a4a7a;
    --accent: #7fb0ff;
    --accent-contrast: #fff;
    animation: hubx-panel-rise .3s cubic-bezier(.2, .8, .25, 1);
}
@keyframes hubx-panel-rise {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.95); }
}
.hubx-panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.hubx-panel-back {
    flex-shrink: 0;
    margin-left: auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #2a4a7a;
    border-radius: 50%;
    background: rgba(18, 26, 48, .85);
    color: #e8ecf6;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}
.hubx-panel-back:hover { border-color: #7fb0ff; color: #7fb0ff; }
.hubx-panel-head .k {
    color: #6c8cff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.hubx-panel-head b { font-size: 16px; }
.hubx-panel-body .inner { max-width: none; padding: 0; }
.hubx-panel-body a { color: #7fb0ff; }

/* "Who is this?" — the answer the middle of the dial gives. */
.hubx-about .who { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.hubx-about .who img,
.hubx-about .who span {
    flex-shrink: 0; width: 58px; height: 58px; border-radius: 50%;
    object-fit: cover; display: grid; place-items: center; font-size: 27px;
    background: #16233f; border: 1px solid #2a4a7a;
}
.hubx-about .who b { display: block; font-size: 19px; }
.hubx-about .who i {
    display: block; font-style: normal; color: #8b93a7; font-size: 11.5px;
    text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800; margin-top: 2px;
}
.hubx-about .who code {
    display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700;
    letter-spacing: .6px; color: #9fc1ff; background: #14203a;
    border: 1px solid #223050; border-radius: 999px; padding: 3px 10px;
}
.hubx-about .bio { color: #c3c9d8; font-size: 14.5px; line-height: 1.65; margin-bottom: 14px; }
.hubx-about .bio.empty { color: #6c7590; font-style: italic; }
.hubx-about dl {
    display: grid; grid-template-columns: auto 1fr; gap: 7px 14px;
    margin: 0 0 14px; padding-top: 12px; border-top: 1px solid #223050; font-size: 13.5px;
}
.hubx-about dt { color: #6c7590; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; align-self: center; }
.hubx-about dd { margin: 0; color: #e8ecf6; }
.hubx-about .tags { color: #9fc1ff; font-size: 13px; margin-bottom: 14px; overflow-wrap: anywhere; }
.hubx-about .acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding-top: 12px; border-top: 1px solid #223050; }
.hubx-about .acts button {
    border: 0; cursor: pointer; border-radius: 999px; padding: 10px 18px;
    background: #4f8cff; color: #fff; font-weight: 800; font-size: 13.5px; font-family: inherit;
}
.hubx-close {
    position: absolute;
    /* Clear of the top-right corner bracket, which owns 18px-46px on both
       axes. Sitting at 16px put the button straight over it and swallowed
       the corner of the frame. */
    top: max(56px, calc(env(safe-area-inset-top) + 40px));
    right: 16px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #2a4a7a;
    border-radius: 999px;
    background: rgba(18, 26, 48, .9);
    color: #e8ecf6;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
}
/* The way back into the dial once it has been closed. */
.hubx-reopen {
    position: fixed;
    right: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 60;
    border: 1px solid #2a4a7a;
    border-radius: 999px;
    padding: 11px 18px;
    background: rgba(18, 26, 48, .94);
    color: #9fc1ff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    font-family: inherit;
    box-shadow: 0 12px 30px rgba(3, 7, 18, .5);
}
.hubx-reopen[hidden] { display: none; }
/* Desktop: the exact corner. One 16px inset shared with the back button and
   the menu, so the floating controls draw a straight rectangle — on a phone
   it stays above the full-width dock instead. */
@media (min-width: 821px) {
    .hubx-reopen { right: 16px; bottom: 16px; }
}

/* The website is a DESTINATION, not the way out of the dial. It sits under
   the × so the two never read as the same control. */
.hubx-site {
    position: absolute;
    top: max(106px, calc(env(safe-area-inset-top) + 90px));
    right: 16px;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 15px;
    border: 1px solid #2a4a7a;
    border-radius: 999px;
    background: rgba(18, 26, 48, .9);
    color: #9fc1ff;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 800;
}
.hubx-toast {
    position: absolute;
    top: max(18px, env(safe-area-inset-top));
    left: 50%;
    z-index: 7;
    width: min(520px, calc(100vw - 150px));
    padding: 9px 14px;
    border: 1px solid #1e5c39;
    border-radius: 999px;
    background: rgba(18, 48, 31, .94);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
    color: #8ce8b0;
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    transform: translateX(-50%);
}
.hubx-hint {
    position: absolute;
    right: 0;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 0;
    z-index: 5;
    color: #7181a3;
    font-size: 11.5px;
    text-align: center;
}
@media (max-width: 640px) {
    .hubx-node { width: 78px; }
    .hubx-node .nm {
        display: -webkit-box;
        overflow: hidden;
        font-size: 9.5px;
        line-height: 1.2;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .hubx-node .rel { font-size: 7.5px; }
    .hubx-node .cd { display: none; }
    .hubx-center { width: 126px; }
    .hubx-center .core { width: 76px; height: 76px; font-size: 32px; }
    .hubx-center .nm { font-size: 14px; line-height: 1.15; }
    .hubx-center .cd { margin-top: 4px; padding: 3px 8px; font-size: 9px; }
    .hubx-center .edit-hint { font-size: 8px; }
    .hubx-panel { max-height: 84vh; padding: 16px 14px 22px; }
    .hubx-toast {
        top: 70px;
        width: calc(100vw - 32px);
        border-radius: 10px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hubx-rim,
    .hubx-node .disc,
    .hubx-center .core,
    .hubx-panel,
    .hubx-ticks,
    .hubx-arc,
    .hubx-sweep,
    .hubx-telemetry b { animation: none; }
    .hubx-sweep { opacity: .12; }
}

/* ============================================================
   The instrument layer: what turns a dial into a cockpit.
   Flat by design — depth here is drawn, never transformed in 3D.
   ============================================================ */

/* A precision bezel: hairline ticks machined around the plate. */
.hubx-ticks {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(
        from 0deg,
        rgba(127, 176, 255, .5) 0deg .35deg,
        transparent .35deg 5deg
    );
    -webkit-mask: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 9px));
    mask: radial-gradient(circle, transparent calc(50% - 9px), #000 calc(50% - 9px));
    opacity: .5;
    animation: hubx-spin 240s linear infinite;
    pointer-events: none;
}
/* Every fifth tick is longer — the eye reads a scale, not a texture. */
.hubx-ticks.major {
    background: repeating-conic-gradient(
        from 0deg,
        rgba(160, 200, 255, .85) 0deg .5deg,
        transparent .5deg 30deg
    );
    -webkit-mask: radial-gradient(circle, transparent calc(50% - 18px), #000 calc(50% - 18px));
    mask: radial-gradient(circle, transparent calc(50% - 18px), #000 calc(50% - 18px));
    opacity: .7;
    animation-direction: reverse;
    animation-duration: 300s;
}

/* Open arc segments that counter-rotate, like a reactor housing. */
.hubx-arc {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid transparent;
    pointer-events: none;
}
.hubx-arc.a1 {
    border-top-color: rgba(127, 176, 255, .55);
    border-right-color: rgba(127, 176, 255, .18);
    animation: hubx-spin 26s linear infinite;
}
.hubx-arc.a2 {
    border-bottom-color: rgba(79, 140, 255, .5);
    border-left-color: rgba(79, 140, 255, .14);
    animation: hubx-spin 41s linear infinite reverse;
}
.hubx-arc.a3 {
    border-width: 2px;
    border-left-color: rgba(160, 200, 255, .32);
    animation: hubx-spin 74s linear infinite;
}

/* The sweep: the dial is listening, and says so once every eight seconds. */
.hubx-sweep {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, rgba(79, 140, 255, .22), transparent 22%);
    -webkit-mask: radial-gradient(circle, transparent 12%, #000 13%);
    mask: radial-gradient(circle, transparent 12%, #000 13%);
    animation: hubx-spin 8s linear infinite;
    pointer-events: none;
}

/* Corner brackets: the frame of a heads-up display. */
.hubx-frame {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(127, 176, 255, .35);
    pointer-events: none;
}
.hubx-frame.tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.hubx-frame.tr { top: 18px; right: 18px; border-left: 0; border-bottom: 0; }
.hubx-frame.bl { bottom: 18px; left: 18px; border-right: 0; border-top: 0; }
.hubx-frame.br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }

/* Telemetry: real numbers about this thing, read like an instrument. */
.hubx-telemetry {
    position: absolute;
    bottom: 26px;
    left: 26px;
    z-index: 3;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 10.5px;
    line-height: 1.75;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(127, 176, 255, .62);
    pointer-events: none;
    text-shadow: 0 0 12px rgba(5, 7, 15, .9);
}
.hubx-telemetry i { font-style: normal; color: rgba(232, 236, 246, .82); }
.hubx-telemetry b {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: #7fe0a8;
    box-shadow: 0 0 8px #7fe0a8;
    animation: hubx-blip 2.4s ease-in-out infinite;
}
@keyframes hubx-blip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Hovering a hole paints a reticle around it — the dial acquires a target. */
.hubx-node .disc::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px dashed rgba(127, 176, 255, .75);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.hubx-node:hover .disc::after,
.hubx-node:focus-within .disc::after { opacity: 1; transform: scale(1); }

@media (max-width: 640px) {
    /* Phones keep the bezel and the sweep; the rest is desktop theatre. */
    .hubx-arc.a2, .hubx-arc.a3, .hubx-ticks.major { display: none; }
    .hubx-telemetry { display: none; }
    .hubx-frame { width: 18px; height: 18px; }
    .hubx-hint { right: 36px; bottom: max(12px, env(safe-area-inset-bottom)); left: 36px; font-size: 10px; }
}

/* Pulse stats ride in pills: readable on any panel, any image behind. */
.hub-pulse-pills span,.hub-pulse-pills a{display:inline-flex;align-items:center;gap:5px;background:rgba(18,26,48,.85);border:1px solid #2a4a7a;border-radius:999px;padding:5px 12px;color:#c7d2e8;text-decoration:none}
.hub-pulse-pills span span,.hub-pulse-pills a span{background:none;border:0;padding:0}

/* The cockpit: sever badges, the editable centre, deletable posts. */
.hubx-sever{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;border:1px solid #7a2a2a;background:rgba(46,14,14,.95);color:#ffb4b4;font-size:14px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:3}
.hubx-node:hover .hubx-sever,.hubx-node:focus-within .hubx-sever{display:inline-flex}
.hubx-center.editable{cursor:pointer}
.hubx-center.editable:hover .core{box-shadow:0 0 80px rgba(79,140,255,.85)}
.hubx-center .edit-hint{margin-top:6px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#6c8cff;font-weight:800;opacity:.85}
.own-posts{margin-top:18px;border-top:1px solid rgba(148,163,184,.16);padding-top:12px}
.own-posts h3{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:#8b93a7;margin:0 0 8px}
.own-post-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid rgba(148,163,184,.1)}
.own-post-row span{flex:1;min-width:0;font-size:13.5px;color:#c7d2e8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.own-post-row button{border:1px solid rgba(148,163,184,.35);background:transparent;color:#ffb4b4;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer}

/* ============================================================
   HUB SKINS — seven curated looks, serious to playful.
   A skin is ONLY these custom properties plus a corner radius,
   so it can restyle the dial without touching its behaviour.
   Defaults below keep every existing rule working untouched.
   ============================================================ */
.hubx {
    --hub-accent: #4f8cff;
    --hub-accent-soft: rgba(79, 140, 255, .25);
    --hub-line: rgba(108, 140, 255, .16);
    --hub-rim: rgba(127, 176, 255, .22);
    --hub-spoke: rgba(127, 176, 255, .9);
    --hub-disc-bg: #121a30;
    --hub-disc-border: #2a4a7a;
    --hub-rel: #6c8cff;
    --hub-bg: radial-gradient(1200px at 50% 42%, #101a38, #05070f 75%);
    --hub-round: 50%;
    --hub-glow: 22px;
}

/* --- Serious ------------------------------------------------ */
.hubx[data-hub-skin="blueprint"] {
    --hub-accent: #38bdf8;
    --hub-accent-soft: rgba(56, 189, 248, .18);
    --hub-line: rgba(56, 189, 248, .22);
    --hub-rim: rgba(56, 189, 248, .26);
    --hub-spoke: rgba(125, 211, 252, .75);
    --hub-disc-bg: #0a1420;
    --hub-disc-border: #1e5e80;
    --hub-rel: #7dd3fc;
    --hub-bg: linear-gradient(#050b14, #050b14), repeating-linear-gradient(0deg, transparent 0 39px, rgba(56,189,248,.06) 39px 40px);
    --hub-round: 6px;
    --hub-glow: 0px;
}
.hubx[data-hub-skin="mono"] {
    --hub-accent: #a8b0c0;
    --hub-accent-soft: rgba(168, 176, 192, .16);
    --hub-line: rgba(168, 176, 192, .14);
    --hub-rim: rgba(168, 176, 192, .18);
    --hub-spoke: rgba(200, 206, 218, .6);
    --hub-disc-bg: #16181c;
    --hub-disc-border: #3a3f48;
    --hub-rel: #9aa2b1;
    --hub-bg: radial-gradient(1200px at 50% 42%, #17191e, #0a0b0d 75%);
    --hub-round: 50%;
    --hub-glow: 0px;
}

/* --- Warm --------------------------------------------------- */
.hubx[data-hub-skin="ember"] {
    --hub-accent: #f59e0b;
    --hub-accent-soft: rgba(245, 158, 11, .24);
    --hub-line: rgba(245, 158, 11, .16);
    --hub-rim: rgba(251, 191, 36, .22);
    --hub-spoke: rgba(251, 191, 36, .8);
    --hub-disc-bg: #1e1409;
    --hub-disc-border: #7c4a10;
    --hub-rel: #fbbf24;
    --hub-bg: radial-gradient(1200px at 50% 42%, #2a1a08, #0c0703 75%);
    --hub-round: 50%;
    --hub-glow: 26px;
}
.hubx[data-hub-skin="forest"] {
    --hub-accent: #34d399;
    --hub-accent-soft: rgba(52, 211, 153, .22);
    --hub-line: rgba(52, 211, 153, .16);
    --hub-rim: rgba(110, 231, 183, .2);
    --hub-spoke: rgba(110, 231, 183, .8);
    --hub-disc-bg: #08201a;
    --hub-disc-border: #16624a;
    --hub-rel: #6ee7b7;
    --hub-bg: radial-gradient(1200px at 50% 42%, #06251d, #030b09 75%);
    --hub-round: 40%;
    --hub-glow: 20px;
}

/* --- Playful ------------------------------------------------ */
.hubx[data-hub-skin="bloom"] {
    --hub-accent: #c084fc;
    --hub-accent-soft: rgba(192, 132, 252, .3);
    --hub-line: rgba(192, 132, 252, .18);
    --hub-rim: rgba(244, 114, 182, .26);
    --hub-spoke: rgba(232, 121, 249, .85);
    --hub-disc-bg: #1b0f2b;
    --hub-disc-border: #7e3ff2;
    --hub-rel: #f0abfc;
    --hub-bg: radial-gradient(1100px at 50% 38%, #2a1145, #0b0616 78%);
    --hub-round: 30%;
    --hub-glow: 34px;
}
.hubx[data-hub-skin="citrus"] {
    --hub-accent: #a3e635;
    --hub-accent-soft: rgba(163, 230, 53, .28);
    --hub-line: rgba(163, 230, 53, .18);
    --hub-rim: rgba(250, 204, 21, .28);
    --hub-spoke: rgba(250, 204, 21, .85);
    --hub-disc-bg: #1a1a06;
    --hub-disc-border: #79860f;
    --hub-rel: #facc15;
    --hub-bg: radial-gradient(1100px at 50% 38%, #24270a, #0b0c03 78%);
    --hub-round: 26%;
    --hub-glow: 30px;
}

/* --- The skin actually applied ------------------------------ */
.hubx { background: var(--hub-bg); }
.hubx svg line { stroke: var(--hub-spoke); }
.hubx-plate { border-color: var(--hub-line); }
.hubx-rim { border-color: var(--hub-rim); }
.hubx-node .disc {
    border-radius: var(--hub-round);
    background: var(--hub-disc-bg);
    border-color: var(--hub-disc-border);
    box-shadow: 0 0 var(--hub-glow) var(--hub-accent-soft);
}
.hubx-node .disc img { border-radius: var(--hub-round); }
.hubx-node:hover .disc, .hubx-node:focus-visible .disc { border-color: var(--hub-accent); }
.hubx-node .rel { color: var(--hub-rel); }
.hubx-center .core { border-color: var(--hub-disc-border); }
/* A square-cornered skin must square the middle too, or the centre
   reads as a different object from everything orbiting it. */
.hubx[data-hub-skin="blueprint"] .hubx-center .core,
.hubx[data-hub-skin="blueprint"] .hubx-center .core img { border-radius: 8px; }