/* OTWONO Hub: the otwono.com homepage. One rail of feed cards orbiting the OTWONO planet, in the
   same deep space as the OTWONO Studios universe pages, with four small labels in the corners
   (after jesperlandberg.com). Tap a card to open it; the round button takes you back. */
/* the hub is exactly one screen: pinned to the visible viewport (below the admin bar when it shows), never scrolled */
html:has(body.home .othub),body.home{height:100%;overflow:hidden;overscroll-behavior:none;background:#04060d}
/* WordPress pushes the page down by the admin bar's height when it shows; take that off so it is still exactly one screen */
html:has(body.home .othub){height:calc(100% - var(--wp-admin--admin-bar--height,0px))}
body.home .space-sky,body.home .site-header,body.home > footer.footer,body.home .skip:not(:focus){display:none!important}
.othub{--ink:#eef1f8;--muted:#8d97ad;--accent:#7f9cff;--lime:#cce765;--space:#04060d;--paper:#f4f3ee;--dark:#142237;
  position:fixed;inset:var(--wp-admin--admin-bar--height,0px) 0 0 0;overflow:hidden;color:var(--ink);background:radial-gradient(120% 80% at 50% 100%,#0c1630 0%,#060914 55%,#04060d 100%);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;isolation:isolate}
.othub *{box-sizing:border-box}
.othub [hidden]{display:none!important}
.othub button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
.othub a{color:inherit;text-decoration:none}
.othub :focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.hub-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.hub-locked,html.hub-locked body{overflow:hidden}

/* ---------- space ---------- */
.hub-space{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hub-stars{position:absolute;inset:0;width:100%;height:100%}
.hub-planet{position:absolute;left:50%;bottom:0;width:max(150vw,1300px);max-width:none;translate:-50% 74%;opacity:.5;filter:saturate(.9) brightness(.8);
  -webkit-mask:radial-gradient(closest-side,#000 70%,transparent);mask:radial-gradient(closest-side,#000 70%,transparent)}
.hub-space::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(transparent,#04060daa)}
.hub-orbit{position:absolute;left:-12vw;top:calc(50% - var(--ch) * .62);height:calc(var(--ch) * 1.24);width:124vw;rotate:-4deg;fill:none;stroke-width:1.2;opacity:.8}
.hub-orbit ellipse{vector-effect:non-scaling-stroke;stroke-linecap:round}

/* ---------- corners ---------- */
.hub-corner{position:absolute;z-index:5;display:flex;align-items:center;gap:8px;font:600 11px/1 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.hub-corner a,.hub-corner button{padding:10px 2px;letter-spacing:inherit;text-transform:inherit;font-weight:inherit}
.hub-corner a:hover,.hub-corner button:hover{color:var(--lime)}
.hub-tl{top:calc(18px + env(safe-area-inset-top,0px));left:max(18px,3vw)}
/* the OTWONO lockup: the animated planet mark and the brush wordmark (clear O), as on the rest of the site.
   The wordmark artwork sits on black, so it is screened onto the stage and only the lettering shows. */
.hub-tl .hub-brand{display:flex;align-items:center;gap:6px;padding:4px 2px}
.hub-brand-mark{width:auto;height:clamp(40px,6vh,56px);filter:drop-shadow(0 0 14px #4f7cff55)}
.hub-brand-word{width:auto;height:clamp(28px,4.2vh,40px);mix-blend-mode:screen;margin-left:-2px}
.hub-tl .hub-brand:hover .hub-brand-word{filter:brightness(1.15)}
.hub-tr{top:calc(18px + env(safe-area-inset-top,0px));right:max(18px,3vw)}
.hub-bl{bottom:calc(16px + env(safe-area-inset-bottom,0px));left:max(18px,3vw)}
.hub-br{bottom:calc(16px + env(safe-area-inset-bottom,0px));right:max(18px,3vw)}
.hub-on{color:var(--ink)}
.hub-slash{color:var(--muted)}
.hub-bl button{color:var(--lime)}
.hub-save{position:absolute;z-index:5;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));translate:-50% 0;margin:0;max-width:min(60vw,420px);text-align:center;font-size:11.5px;color:var(--muted);transition:opacity .4s}
.hub-save a{color:var(--lime)}
.hub-save:empty{display:none}

/* ---------- the rail ---------- */
.hub-stage{position:absolute;inset:0;display:grid;align-content:center}
/* the card is sized from the whole screen: as big as the space between the corner labels allows,
   landscape on wide screens, portrait on phones, squarer in between */
.othub{--vh:calc(100svh - var(--wp-admin--admin-bar--height,0px));--avh:calc(var(--vh) - 150px);--cr:1.6;--cw:min(74vw,calc(var(--avh) * var(--cr)),1180px);--ch:calc(var(--cw) / var(--cr))}
@media (max-aspect-ratio:6/5){.othub{--cr:1.15;--cw:min(80vw,calc(var(--avh) * var(--cr)))}}
/* a short wide screen, such as a phone turned sideways: the corner labels sit at the edges, so the card takes the height between them */
@media (max-height:520px) and (min-aspect-ratio:6/5){.othub{--avh:calc(var(--vh) - 92px);--cr:1.85;--cw:min(70vw,calc(var(--avh) * var(--cr)))} .hub-hint{display:none}}
@media (max-aspect-ratio:4/5){.othub{--avh:calc(var(--vh) - 170px);--cr:.74;--cw:min(82vw,calc(var(--avh) * var(--cr)))}}
/* the orbit: every card is centred on one point and hub.js places it on the ring each frame (one eased turn for every input) */
.hub-rail{position:relative;width:100%;height:calc(var(--ch) + 48px);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;outline:0}
.hub-rail::-webkit-scrollbar{display:none}
.hub-rail:active{cursor:grabbing}
.hub-rail img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.hub-hint{position:absolute;left:50%;top:calc(50% + var(--ch) / 2 + 22px);translate:-50% 0;margin:0;white-space:nowrap;font:600 10.5px/1 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);transition:opacity .6s}
.othub.hub-moved .hub-hint{opacity:0}

.hub-card{--brand:#7f9cff;position:absolute;left:50%;top:50%;margin:calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);width:var(--cw);height:var(--ch);border-radius:18px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:#0d1322;box-shadow:inset 0 1px 0 #ffffff1c,0 40px 90px -36px #000,0 0 0 1px #ffffff17;transform-origin:50% 50%;will-change:transform;isolation:isolate}
.hub-face{position:absolute;inset:0;z-index:-2}
.hub-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hub-slide.on{opacity:1}
/* a picture is shown whole whatever the card shape; a soft blurred copy of it fills the rest */
.hub-slide img{position:absolute;inset:0;width:100%;height:100%;display:block}
.hub-slide .hub-blur{object-fit:cover;filter:blur(30px) saturate(1.35) brightness(.88);transform:scale(1.3)}
.hub-slide .hub-pic{object-fit:contain}
.hub-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#04060d80 0%,#0000 28%,#0000 52%,#04060dd9 100%)}
/* a post with no picture is set as type */
.hub-quote{position:absolute;inset:0;display:grid;align-content:center;padding:clamp(22px,4vw,56px) clamp(22px,4vw,56px) 70px;background:#141b30;background:radial-gradient(120% 100% at 0% 0%,color-mix(in srgb,var(--brand) 38%,#0d1322),#0d1322 70%)}
.hub-quote p{margin:0;font:400 clamp(17px,2.1vw,30px)/1.3 Georgia,serif;color:#f4f3ee;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hub-brandface{position:absolute;inset:0;display:grid;align-content:center;justify-items:start;padding:clamp(22px,4vw,56px);background:#1b2340;background:radial-gradient(140% 120% at 100% 0%,color-mix(in srgb,var(--brand) 70%,#0d1322),#0d1322 75%)}
.hub-brandface b{font:800 clamp(34px,6vw,92px)/.9 system-ui,sans-serif;letter-spacing:-.06em;color:#fff}
.hub-brandface span{margin-top:12px;font-size:14px;color:#ffffffcc;max-width:40ch}
.hub-embed{position:absolute;inset:0;width:100%;height:100%;border:0;background:#0d1322;pointer-events:none}
.hub-tag{position:absolute;top:16px;left:18px;right:18px;display:flex;align-items:center;gap:8px;font:600 10.5px/1.3 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 8px #000}
.hub-tag i{width:6px;height:6px;border-radius:50%;background:#43d17a;box-shadow:0 0 0 3px #43d17a33;flex:none}
.hub-tag.is-embed i{background:var(--brand);box-shadow:none}
.hub-tag.is-link i{background:#ffffff80;box-shadow:none}
.hub-cap{position:absolute;top:36px;left:18px;right:18px;font-size:13px;line-height:1.35;color:#ffffffd9;text-shadow:0 1px 8px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-label{position:absolute;left:18px;right:70px;bottom:16px;display:grid;gap:2px}
.hub-label b{font:600 clamp(16px,1.5vw,21px)/1.15 system-ui,sans-serif;letter-spacing:-.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-label small{font-size:12px;color:#ffffffb3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-go{position:absolute;right:16px;bottom:16px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ffffffe6;color:#0d1322;font-size:15px}
.hub-card-hit{position:absolute;inset:0;z-index:3;border-radius:inherit}
.hub-card-hit:focus-visible{outline-offset:-4px}
.hub-empty-face{position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;padding:24px 24px 70px;color:var(--muted)}
.hub-empty-face b{color:#fff;font-weight:600;font-size:18px}
.hub-skel{position:absolute;inset:0;background:linear-gradient(100deg,#0d1322 30%,#16203a 50%,#0d1322 70%);background-size:300% 100%;animation:hub-shimmer 1.6s linear infinite}
@keyframes hub-shimmer{to{background-position:-300% 0}}
.hub-card-add{background:radial-gradient(120% 120% at 50% 0%,#1a2547 0%,#0d1322 65%);box-shadow:inset 0 1px 0 #ffffff1c,0 40px 90px -36px #000;border:1.5px dashed #ffffff40}
.hub-card-add::after{display:none}
.hub-add-hit{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;padding:24px}
.hub-plus{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--lime);color:#0d1322;font-size:34px;line-height:1}
.hub-add-hit b{font-size:18px;font-weight:600}
.hub-add-hit small{max-width:28ch;color:var(--muted)}

/* ---------- intro cards: what it is, how it works, why use it, what it helps you do ---------- */
.hub-intro{background:radial-gradient(130% 110% at 100% 0%,#1d2b55 0%,#0d1322 60%);container-type:size}
/* a faint field of stars inside every intro card, so each one reads as a window onto the same space */
.hub-intro::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;background-image:radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 34% 8%,#cfe0ff,transparent),radial-gradient(1.2px 1.2px at 58% 26%,#fff,transparent),radial-gradient(1px 1px at 82% 12%,#fff,transparent),radial-gradient(1px 1px at 92% 44%,#cfe0ff,transparent),radial-gradient(1px 1px at 8% 52%,#fff,transparent),radial-gradient(1.2px 1.2px at 46% 48%,#fff,transparent),radial-gradient(1px 1px at 70% 64%,#cfe0ff,transparent),radial-gradient(1px 1px at 24% 78%,#fff,transparent),radial-gradient(1px 1px at 88% 86%,#fff,transparent)}
.hub-intro .hub-intro-body{z-index:1}
.hub-intro::after{display:none}
.hub-intro-what{background:radial-gradient(120% 120% at 85% 15%,#24408f 0%,#111a33 45%,#0b1020 100%)}
.hub-intro-start{background:radial-gradient(120% 120% at 20% 100%,#3d4f1f 0%,#141d2c 55%,#0d1322 100%)}
.hub-intro-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(10px,3cqmin,22px);padding:clamp(20px,6cqmin,56px);color:#eef1f8}
.hub-intro-text{flex:none;display:flex;flex-direction:column;gap:12px}
/* the picture takes whatever height the words leave, and every piece of it is placed by its centre */
.hub-intro-art{flex:1 1 0;min-height:0;position:relative}
.hub-intro-art > div{position:absolute;inset:0}
.hub-intro-art img,.hub-intro-art span,.hub-intro-art .hub-mini{position:absolute;translate:-50% -50%}
.hub-art-lines,.hub-art-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none}
.hub-art-lines path{stroke:#9fb6ff;stroke-opacity:.55;stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-dasharray:2 5;stroke-linecap:round}
.hub-world{width:auto;filter:drop-shadow(0 8px 22px #000a)}
/* Welcome: OTWONO at the centre of its universe */
.hub-art-what .w-otwono{left:72%;top:46%;height:96%}
.hub-art-what .w-labs{left:16%;top:30%;height:30%}
.hub-art-what .w-preneur{left:42%;top:10%;height:21%}
.hub-art-what .w-studios{left:27%;top:76%;height:34%}
/* Social Hub: a small view of the orbit */
.hub-mini{top:50%;width:min(38%,170px);height:88%;border-radius:12px;overflow:hidden;background:#0d1322;box-shadow:0 18px 40px -16px #000,0 0 0 1px #ffffff1f;border-top:3px solid var(--brand)}
.hub-mini.m-mid{left:50%;z-index:2}
.hub-mini.m-left{left:23%;transform:perspective(500px) rotateY(24deg) scale(.82);opacity:.8}
.hub-mini.m-right{left:77%;transform:perspective(500px) rotateY(-24deg) scale(.82);opacity:.8}
.hub-mini .hub-mini-pic{position:absolute;inset:0;translate:none;width:100%;height:100%;object-fit:cover}
.hub-mini .hub-mini-pic:not([src]){display:none}
.hub-mini i{position:absolute;left:8px;bottom:7px;font:600 9px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;font-style:normal;text-shadow:0 1px 6px #000}
.hub-mini i b{color:#43d17a;font-weight:700}
.hub-mini-q{left:50%;top:44%;width:80%;font:400 clamp(11px,3cqmin,15px)/1.3 Georgia,serif;color:#f4f3ee}
.hub-mini-bars{left:50%;top:44%;display:flex;align-items:flex-end;gap:4px;height:34%}
.hub-mini-bars b{position:static;translate:none;width:5px;border-radius:2px;background:var(--brand);height:40%;animation:hub-eq 1.2s ease-in-out infinite}
.hub-mini-bars b:nth-child(2){animation-delay:-.3s;height:80%}.hub-mini-bars b:nth-child(3){animation-delay:-.6s;height:60%}.hub-mini-bars b:nth-child(4){animation-delay:-.9s;height:95%}.hub-mini-bars b:nth-child(5){animation-delay:-.45s;height:50%}
@keyframes hub-eq{50%{transform:scaleY(.45)}}
.hub-mini-bars b{transform-origin:bottom}
/* Why OTWONO: you at the centre, your accounts around you in your order */
.hub-art-ring ellipse{stroke:#cce765;stroke-opacity:.35;stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-dasharray:3 6}
.hub-you{left:50%;top:52%;display:grid;place-items:center;width:clamp(54px,20cqmin,96px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e4f59a,#9fc03a);color:#0d1322;font:800 clamp(13px,4.2cqmin,19px)/1 system-ui,sans-serif;box-shadow:0 0 0 8px #cce76522,0 0 40px #cce76555}
.hub-chip{display:grid;place-items:center;aspect-ratio:1;border-radius:30%;background:var(--brand);color:#fff;font:800 12px/1 system-ui,sans-serif;box-shadow:0 8px 20px -8px #000,0 0 0 2px #0d1322}
.hub-chip.c1{left:50%;top:22%;width:clamp(30px,12cqmin,54px);font-size:clamp(13px,4.6cqmin,22px)}
.hub-chip.c2{left:88%;top:39%;width:clamp(27px,10.5cqmin,46px);font-size:clamp(12px,4cqmin,19px)}
.hub-chip.c3{left:82%;top:72%;width:clamp(24px,9cqmin,40px);font-size:clamp(11px,3.5cqmin,17px)}
.hub-chip.c4{left:18%;top:72%;width:clamp(22px,8cqmin,35px);font-size:clamp(10px,3.1cqmin,15px)}
.hub-chip.c5{left:12%;top:39%;width:clamp(20px,7cqmin,31px);font-size:clamp(10px,2.8cqmin,14px)}
/* What you can do: the four worlds on one rising line */
.hub-step{display:flex;flex-direction:column;align-items:center;gap:4px}
.hub-step img{position:static;translate:none;flex:1 1 0;min-height:0;height:auto;width:auto;max-width:none;aspect-ratio:1;object-fit:contain}
.hub-step i{flex:none}
.hub-step i{font:600 9.5px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#cfd6e6;font-style:normal}
.hub-step.s1{left:10%;top:74%;height:28%}
.hub-step.s2{left:38%;top:54%;height:34%}
.hub-step.s3{left:64%;top:38%;height:40%}
.hub-step.s4{left:88%;top:22%;height:48%}
.hub-step.s4 i{color:var(--lime)}
/* Get started: the connect picker in miniature */
.hub-mini-pick{left:50%;top:50%;width:min(92%,380px);display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;border-radius:14px;background:#f4f3ee;box-shadow:0 20px 50px -20px #000}
.hub-mini-pick span{position:static;translate:none;display:flex;align-items:center;gap:6px;padding:6px;border-radius:9px;background:#fff;border:1px solid #1422371f;font:600 clamp(9.5px,2.6cqmin,12px)/1 system-ui,sans-serif;color:#142237;min-width:0;overflow:hidden;white-space:nowrap}
.hub-mini-pick span b{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--brand);color:#fff;font-size:10px}
.hub-mini-pick span.on{outline:2px solid #9fc03a;outline-offset:1px}
/* Coming soon, beside an eyebrow */
.hub-soon{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;border:1px solid #cce76566;color:#e4f59a;font:600 9.5px/1.2 system-ui,sans-serif;letter-spacing:.12em;vertical-align:1px}
.hub-intro-publish{background:radial-gradient(120% 120% at 100% 0%,#3a2a5e 0%,#151a33 50%,#0b1020 100%)}
.hub-intro-space{background:radial-gradient(120% 120% at 0% 0%,#1f3d4a 0%,#121c2e 50%,#0b1020 100%)}
/* Publishing: the composer in miniature */
.hub-mini-compose{left:50%;top:50%;width:min(90%,380px);display:flex;flex-direction:column;gap:7px;padding:10px 12px;border-radius:14px;background:#f4f3ee;box-shadow:0 20px 50px -20px #000}
.hub-mini-compose span{position:static;translate:none}
.mc-head{display:flex;justify-content:space-between;align-items:center;font:700 clamp(10px,2.8cqmin,13px)/1 system-ui,sans-serif;color:#142237}
.mc-head i{font-style:normal;font-size:clamp(8px,2.2cqmin,10px);letter-spacing:.1em;text-transform:uppercase;color:#7a5cc7}
.othub .hub-mini-compose b{color:#142237}
.mc-when,.mc-send{white-space:nowrap}
.mc-line{display:block;height:7px;border-radius:4px;background:#14223722}
.mc-line.short{display:none}
.mc-chips{display:flex;gap:5px}
.mc-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mc-chip{display:grid;place-items:center;width:clamp(20px,6cqmin,26px);aspect-ratio:1;border-radius:7px;background:var(--brand);color:#fff;font:800 clamp(9px,2.4cqmin,11px)/1 system-ui,sans-serif;opacity:.35}
.mc-chip.on{opacity:1;box-shadow:0 0 0 2px #f4f3ee,0 0 0 3.5px #9fc03a}
.mc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mc-when{font:600 clamp(9px,2.5cqmin,11.5px)/1 system-ui,sans-serif;color:#142237;padding:6px 8px;border-radius:8px;background:#fff;border:1px solid #1422371f}
.mc-send{font:700 clamp(9px,2.5cqmin,11.5px)/1 system-ui,sans-serif;color:#142237;padding:7px 12px;border-radius:999px;background:#cce765}
/* Your space: a profile and its modules in miniature */
.hub-mini-profile{left:50%;top:50%;width:min(80%,320px);aspect-ratio:1.45;border-radius:14px;overflow:hidden;background:#f4f3ee;box-shadow:0 20px 50px -20px #000}
.hub-mini-profile > span{position:absolute;translate:none}
.mp-banner{left:0;right:0;top:0;height:30%;background:linear-gradient(120deg,#254fd0,#7f9cff 60%,#cce765)}
.mp-avatar{left:8%;top:16%;width:22%;aspect-ratio:1;border-radius:50%;background:#0d1322;display:grid;place-items:center;box-shadow:0 0 0 3px #f4f3ee}
.mp-avatar img{position:static;translate:none;width:86%;height:auto}
.mp-name{left:34%;top:34%;width:38%;height:7%;border-radius:4px;background:#142237}
.mp-sub{left:34%;top:46%;width:26%;height:5%;border-radius:4px;background:#14223744}
.mp-mods{left:8%;right:8%;bottom:9%;height:28%;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:6px}
.mp-mod{position:static;translate:none;border-radius:8px}
.mp-mod.a{background:#f7e6bc}.mp-mod.b{background:#d9e2fb}.mp-mod.c{background:#e4f59a}
/* The universe card: each world beside its own planet */
.hub-intro ul.hub-worlds li{display:flex;align-items:center;gap:10px;padding-left:0}
.hub-intro ul.hub-worlds li::before{display:none}
.hub-worlds .hub-world{flex:none;height:clamp(26px,8cqmin,40px);width:clamp(26px,8cqmin,40px);object-fit:contain;filter:drop-shadow(0 4px 10px #000a)}
.hub-worlds .hub-world[src$="earth.webp"]{border-radius:50%;object-fit:cover;transform:scale(.86)}
.hub-intro .hub-intro-eyebrow{margin:0;font:600 11px/1.3 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.othub .hub-intro h2{margin:0;font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important;font-weight:780!important;font-size:clamp(26px,9cqmin,72px)!important;line-height:.98!important;letter-spacing:-.05em!important;color:#fff!important;text-wrap:balance;max-width:16ch;text-transform:none!important;text-shadow:none!important;-webkit-text-stroke:0!important;-webkit-text-fill-color:#fff!important;background:none!important;word-spacing:normal!important}
.hub-intro p,.hub-intro li{font-size:clamp(14px,3.4cqmin,19px);line-height:1.45;color:#d7dceb;max-width:48ch}
.hub-intro p{margin:0}
.hub-intro ol,.hub-intro ul{margin:0;padding:0 0 0 1.2em;display:grid;gap:6px;max-width:52ch}
.hub-intro ul{list-style:none;padding:0}
.hub-intro ul li{position:relative;padding-left:18px}
.hub-intro ul li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--lime)}
.hub-intro ol li::marker{color:var(--lime);font-weight:700}
.hub-intro b{color:#fff;font-weight:650}
.hub-intro .hub-intro-small{font-size:clamp(12px,2.7cqmin,14.5px);color:#9aa5bd}
.hub-intro-foot{margin-top:4px!important;font:600 11px/1.3 system-ui,sans-serif!important;letter-spacing:.14em;text-transform:uppercase;color:#9aa5bd!important}
/* links on an intro card sit above the card's own tap area */
.othub .hub-intro a{position:relative;z-index:4;color:#fff;text-decoration:underline;text-decoration-color:#cce76599;text-underline-offset:3px}
.othub .hub-intro a:hover{color:var(--lime)}
.hub-intro-worlds{background:radial-gradient(120% 120% at 0% 0%,#2a2f6b 0%,#121a33 50%,#0b1020 100%)}
.hub-intro .hub-intro-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:4px}
.othub .hub-intro .hub-intro-alt{text-decoration:none;font-weight:700;color:var(--lime)}
.hub-intro-cta{align-self:flex-start;display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:999px;background:var(--lime);color:#0d1322;font-weight:700;font-size:15px;margin-top:4px}
/* on a small card the extra detail steps aside so the main message always fits */
@container (max-height:470px){ .hub-intro .hub-intro-small{display:none} .hub-intro ol,.hub-intro ul{gap:3px} }
@container (max-height:470px){ .hub-worlds .hub-world{height:22px;width:22px} .hub-intro ul.hub-worlds{gap:4px} .hub-intro ul.hub-worlds li{gap:8px;line-height:1.3} }
@container (max-height:360px){ .hub-intro-art{display:none} }
@container (max-height:330px){ .hub-intro ul li:nth-child(n+4),.hub-intro ol li:nth-child(n+4){display:none} .hub-intro-foot{display:none} }
@container (max-height:300px){ .hub-intro-body{gap:7px;padding:16px 20px} .othub .hub-intro h2{font-size:24px!important} .hub-intro p,.hub-intro li{font-size:13px;line-height:1.35} .hub-intro ul li:nth-child(n+3),.hub-intro ol li:nth-child(n+3){display:none} }

/* ---------- open mode: the card becomes a page ---------- */
.hub-open{position:fixed;inset:0;z-index:2147483600;background:#04060db3;display:grid;place-items:center;padding:0}
.hub-open-card{--brand:#7f9cff;position:relative;width:100%;height:100%;height:100dvh;display:flex;flex-direction:column;background:var(--paper);color:var(--dark);overflow:hidden}
.hub-open-head{display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 14px 12px 18px}
.hub-open-who{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.hub-open-who > div{display:grid;min-width:0}
.hub-open-who b{font-size:20px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-open-who small{font-size:12px;color:#536174;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-mark{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--brand);color:#fff;font:800 15px/1 system-ui,sans-serif}
.hub-open-tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.othub .hub-pill{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:999px;border:1px solid #14223724;font-size:12.5px;font-weight:600;color:var(--dark);white-space:nowrap;background:#fff}
.othub .hub-pill:hover{border-color:#142237}
.othub .hub-pill-solid{background:var(--dark);color:#fff;border-color:var(--dark);min-height:46px;padding:0 20px;font-size:15px}
.othub .hub-danger{color:#b4321e}
.othub .hub-x{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--dark);color:#fff;font-size:24px;line-height:1}
.hub-open-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px clamp(14px,4vw,40px) 76px}
.hub-items{list-style:none;margin:0 auto;padding:0;max-width:820px;display:grid;gap:26px}
.othub .hub-item{display:grid;gap:10px;width:100%;text-align:left;color:var(--dark)}
.hub-thumb{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#14223712}
.hub-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.hub-item:hover .hub-thumb img{transform:scale(1.02)}
.hub-item-body{display:grid;gap:4px}
.hub-item b{font-size:17px;line-height:1.3;letter-spacing:-.01em}
.hub-item-text{font:15.5px/1.55 Georgia,serif;color:#2d3b52;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hub-by{font-weight:600;font-size:12px;color:#254fd0}
.hub-item time{font-size:12px;color:#536174}
.hub-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.hub-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hub-embed-full{display:block;width:100%;max-width:960px;height:100%;min-height:60vh;margin:0 auto;border:0;border-radius:14px}
.hub-linkonly{max-width:520px;margin:12vh auto 0;display:grid;gap:16px;justify-items:start;font-size:16px;color:#2d3b52}
.hub-linkonly p{margin:0}
.hub-empty{margin:40px auto;max-width:520px;color:#536174;font-size:16px}
.hub-empty a{color:#254fd0;font-weight:600}
.hub-open-step{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:-50% 0;display:flex;gap:8px}
.othub .hub-open-step button{width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid #14223724;font-size:20px;color:var(--dark);box-shadow:0 6px 20px -10px #14223766}

/* ---------- menu ---------- */
.hub-menu{position:fixed;inset:0;z-index:2147483600;background:#04060df5;display:grid;align-content:center;padding:70px max(24px,8vw)}
.othub .hub-menu .hub-x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:max(14px,3vw);background:#fff;color:#0d1322}
.hub-menu-links{display:flex;flex-wrap:wrap;gap:6px 26px;max-width:1000px;max-height:80vh;overflow-y:auto}
.hub-menu-links a{font:700 clamp(22px,3.4vw,42px)/1.25 system-ui,sans-serif;letter-spacing:-.04em;color:#eef1f8}
.hub-menu-links a:hover{color:var(--lime)}

/* ---------- connect dialog ---------- */
.hub-add{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 40px);border:0;border-radius:22px;padding:0;color:var(--dark);background:var(--paper);box-shadow:0 30px 80px -20px #000}
.hub-add::backdrop{background:#04060dcc}
.hub-add-form{display:grid;gap:14px;padding:18px 18px 22px}
.hub-add-form header{display:flex;justify-content:space-between;align-items:center}
.othub .hub-add h2{margin:0;font:750 24px/1.1 system-ui,sans-serif!important;letter-spacing:-.04em!important;color:var(--dark)!important;text-transform:none!important;text-shadow:none!important;-webkit-text-stroke:0!important;-webkit-text-fill-color:currentColor!important}
.hub-add-step > p{margin:0 0 12px;font-size:13.5px;color:#536174}
.hub-add-step b{color:var(--dark)}
.hub-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.othub .hub-pick-item{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;text-align:left;padding:10px;border-radius:14px;border:1px solid #1422371f;background:#fff;color:var(--dark)}
.hub-pick-item .hub-mark{grid-row:1/3;width:32px;height:32px;font-size:14px}
.hub-pick-item b{font-size:14px;line-height:1.2;overflow-wrap:anywhere}
.hub-pick-item small{font-size:11px;color:#536174}
.hub-pick-item.is-feed small{color:#2a8a57}
.othub .hub-pick-item:hover{border-color:var(--brand)}
.hub-add-name{display:grid;gap:10px}
.hub-add-name label{font-weight:600}
.hub-field{display:flex;gap:8px}
.hub-field input{flex:1;min-width:0;min-height:46px;padding:0 16px;border-radius:999px;border:1.5px solid #14223733;font-size:16px;color:var(--dark);background:#fff}
.hub-field input:focus{border-color:#254fd0;outline:0}
.hub-add-msg{margin:0;min-height:1.4em;font-size:14px;color:#536174}
.othub .hub-link{color:#254fd0;font-weight:600;justify-self:start}
.hub-noscript{position:absolute;inset:auto 0 40%;text-align:center;color:var(--muted)}

@media (min-width:761px){
  .hub-open{padding:3vh 3vw}
  .hub-open-card{max-width:1200px;height:94vh;height:94dvh;border-radius:22px}
}
@media (max-width:760px){
  .hub-planet{width:240vw;translate:-50% 76%}
  .hub-orbit{rotate:-8deg}
  .hub-open-head{flex-wrap:wrap}
  .hub-open-tools{order:3;width:100%;justify-content:flex-start}
  .hub-save{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hub-slide,.hub-skel,.hub-mini-bars b{transition:none;animation:none}
}