/* machina-site.css: Machina's own look (4 Nov 2026). Navy and steel blue from the splash. Full width, no centred column. */
.mx{--mx-navy:#0a1226;--mx-navy2:#101b36;--mx-pale:#a9c6f0;--mx-muted:#6f86ad;--mx-link:#8ea3c6;--mx-ink:#0c1a33;--mx-page:#eef1f6;--mx-line:#9fb2d1;--mx-card:#b9c7de;--mx-blue:#185fa5;--mx-blue2:#2f74c0;--mx-serif:var(--serif,'Cormorant Garamond',Georgia,serif);margin:0;background:var(--mx-page);color:var(--mx-ink);font-family:var(--sans,'Inter',system-ui,sans-serif)}
.mx{min-height:100vh;display:flex;flex-direction:column}
.mx-main{flex:1}
.mx a{text-decoration:none}
.mx a:hover{text-decoration:none}
.mx-top{background:var(--mx-navy);display:flex;align-items:center;gap:28px;padding:14px 32px}
.mx-brand{display:flex;align-items:baseline;gap:16px}
.mx-mark{font-family:var(--mx-serif);letter-spacing:.35em;font-size:24px;color:var(--mx-pale)}
.mx-mark--sm{font-size:16px}
.mx-tag{font-family:var(--mx-serif);font-style:italic;font-size:14px;color:var(--mx-muted)}
.mx-nav{flex:1;display:flex;justify-content:flex-end;gap:24px}
.mx-nav a{font-size:14px;color:var(--mx-link);letter-spacing:.02em}
.mx-nav a:hover,.mx-nav a.on{color:#e6eefb}
.mx-me{width:34px;height:34px;border-radius:50%;overflow:hidden;background:var(--mx-blue2);display:flex;align-items:center;justify-content:center;color:#e6f1fb;font-size:12px;flex:none}
.mx-me img{width:100%;height:100%;object-fit:cover}
.mx-signin{font-size:13px;color:var(--mx-pale);border:1px solid #2a3a5e;border-radius:16px;padding:5px 14px}
.mx-strip{background:var(--mx-navy2);display:flex;justify-content:space-between;padding:7px 32px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mx-muted)}
.mx-strip a{color:var(--mx-muted)}
.mx-strip a:hover{color:var(--mx-pale)}
.mx-strip i{font-style:normal;margin:0 4px}
.mx-strip b{font-weight:400;color:var(--mx-pale)}
.mx-main{padding:32px 32px 48px}
.mx-lede{font-family:var(--mx-serif);font-size:22px;line-height:1.5;color:var(--mx-ink);margin:0 0 28px;max-width:62ch}
.mx-tree__label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#5a6f93;margin-bottom:14px}
.mx-tree{display:flex;flex-direction:column;align-items:center}
.mx-tree__label{align-self:flex-start}
.mx-root{background:var(--mx-navy);color:var(--mx-pale);font-family:var(--mx-serif);letter-spacing:.3em;font-size:18px;padding:9px 24px;border-radius:8px}
.mx-stem{width:1px;height:18px;background:var(--mx-line)}
.mx-hbar{align-self:stretch;height:1px;background:var(--mx-line);margin:0 calc((100% - (var(--n) - 1) * 20px) / (2 * var(--n)))}
.mx-worlds{width:100%;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:20px}
.mx-branch{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mx-card);border-radius:10px;padding:18px 20px;position:relative;margin-top:16px}
.mx-drop{position:absolute;top:-17px;left:50%;width:1px;height:16px;background:var(--mx-line)}
.mx-world{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.mx-world__cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mx-blue2)}
.mx-world__name{font-family:var(--mx-serif);font-size:26px;color:var(--mx-ink)}
.mx-world__desc{font-size:14px;line-height:1.5;color:#3b4d6b}
.mx-world--soon .mx-world__cat{color:#7b8aa3}
.mx-world--soon .mx-world__name{color:#5a6f93}
.mx-branch:has(.mx-world--soon){background:#f4f6fa;border-style:dashed}
.mx-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:14px 0 4px}
.mx-chip{font-size:13px;background:#e6f1fb;color:#0c447c;padding:3px 10px;border-radius:5px}
.mx-chip:hover{background:#d3e5f8}
.mx-chip--soon{background:#f1efe8;color:#5f5e5a}
.mx-world__foot{margin-top:auto;padding-top:16px;display:flex;justify-content:space-between;align-items:center}
.mx-badge{font-size:11px;letter-spacing:.1em;text-transform:uppercase;background:var(--mx-blue);color:#e6f1fb;padding:3px 10px;border-radius:12px}
.mx-badge--soon{background:transparent;color:#5a6f93;border:1px solid var(--mx-line)}
.mx-go{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mx-blue)}
.mx-page{max-width:none}
.mx-page p{font-size:16px;line-height:1.7}
.mx-h1{font-family:var(--mx-serif);font-weight:400;font-size:40px;margin:6px 0 12px}
.mx-h1 small{font-size:18px;color:var(--mx-muted);font-style:italic;margin-left:10px}
.mx-foot{background:var(--mx-navy);display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px;padding:28px 32px}
.mx-foot p{font-size:13px;line-height:1.6;color:var(--mx-muted);margin:8px 0 0;max-width:46ch}
.mx-foot h4{font-size:12px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#c9d6ec;margin:0 0 8px}
.mx-foot a,.mx-foot span{display:block;font-size:13px;line-height:1.9;color:var(--mx-link)}
.mx-foot a:hover{color:var(--mx-pale)}
@media (max-width:900px){.mx-top{flex-wrap:wrap;padding:12px 18px}.mx-nav{justify-content:flex-start;flex-wrap:wrap;gap:14px}.mx-strip,.mx-main,.mx-foot{padding-left:18px;padding-right:18px}.mx-worlds{grid-template-columns:1fr}.mx-hbar,.mx-drop{display:none}.mx-foot{grid-template-columns:1fr 1fr}}
/* v3 (4 Nov 2026): tagline under the wordmark, avatar menu, world drawers */
.mx-brand{flex-direction:column;align-items:flex-start;gap:2px}
.mx-brand .mx-mark{line-height:1}
.mx-brand .mx-tag{margin-left:2px}
.mx-brand .mx-tag:hover{color:var(--mx-pale)}
.mx-user{position:relative}
.mx-user summary{list-style:none;cursor:pointer}
.mx-user summary::-webkit-details-marker{display:none}
.mx-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:20;min-width:240px;background:var(--mx-navy2);border:1px solid #23355c;border-radius:10px;padding:8px 0;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.mx-menu a,.mx-menu__soon{display:block;padding:8px 16px;font-size:14px;color:#c9d6ec}
.mx-menu a:hover{background:#17264a;color:#fff}
.mx-menu__soon{color:#56698d;cursor:default}
.mx-menu__head{padding:8px 16px 10px;border-bottom:1px solid #23355c;margin-bottom:6px}
.mx-menu__head b{display:block;font-weight:500;color:#e6eefb;font-size:14px}
.mx-menu__head span{font-size:12px;color:var(--mx-muted)}
.mx-menu__sep{height:1px;background:#23355c;margin:6px 0}
button.mx-badge{border:0;cursor:pointer;font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
button.mx-badge--soon{border:1px solid var(--mx-line)}
.mx-scrim{position:fixed;inset:0;background:rgba(6,12,28,.55);opacity:0;transition:opacity .25s;z-index:40}
.mx-scrim.on{opacity:1}
.mx-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,92vw);background:#fff;z-index:41;padding:34px 32px 28px;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;gap:10px;border-left:4px solid var(--mx-navy)}
.mx-drawer.on{transform:none}
.mx-drawer__x{position:absolute;top:14px;right:16px;background:none;border:0;font-size:28px;line-height:1;color:#5a6f93;cursor:pointer}
.mx-drawer__name{font-family:var(--mx-serif);font-weight:400;font-size:36px;margin:0;color:var(--mx-ink)}
.mx-drawer__tag{margin:0;color:#3b4d6b;font-size:15px}
.mx-drawer .mx-badge{align-self:flex-start}
.mx-drawer__about{font-size:16px;line-height:1.7;color:var(--mx-ink);margin:8px 0}
.mx-drawer__label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5a6f93;margin-top:6px}
.mx-chips--left{justify-content:flex-start;margin:0}
.mx-drawer__facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:12px 0 0;font-size:14px}
.mx-drawer__facts dt{color:#5a6f93}
.mx-drawer__facts dd{margin:0;color:var(--mx-ink)}
.mx-drawer__go{margin-top:auto;display:block;text-align:center;background:var(--mx-navy);color:var(--mx-pale);padding:14px 18px;border-radius:8px;font-size:15px;letter-spacing:.06em}
.mx-drawer__go:hover{background:#13234a;color:#fff}
.mx-drawer__go--soon{background:#eef1f6;color:var(--mx-blue);border:1px solid var(--mx-card)}
body.mx-locked{overflow:hidden}

/* v9: product names on the cards (the UNE is the small address under it) */
.mx-world__addr{font-size:12px;letter-spacing:.06em;color:#7b8aa3;margin-top:-2px}
/* v9: each world's products hang under its card in the Machina tree (one place, no repeat) */
/* one row of cards (equal height), the hierarchies in the row under them */
.mx-worlds{grid-template-rows:auto auto;grid-auto-flow:column;row-gap:0}
.mx-col{display:contents}
.mx-worlds{align-items:stretch}.mx-col__tree{align-self:start}
@media (max-width:900px){.mx-worlds{grid-auto-flow:row;grid-template-rows:none}.mx-col{display:flex;flex-direction:column}}
.mx-col__tree{padding-left:28px}
.mx-pt__t{list-style:none;margin:0;padding:0 0 0 26px}
.mx-col__tree>.mx-pt__t{padding-left:0}
.mx-pt__t li{position:relative;padding:12px 0 0 22px}
.mx-pt__t li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1px solid #8fb1e3}
.mx-pt__t li:last-child::before{bottom:auto;height:36px}
.mx-pt__t li::after{content:"";position:absolute;left:0;top:36px;width:22px;border-top:1px solid #8fb1e3}
.mx-pt__n{background:#fff;border:1px solid #d6deea;border-radius:7px;padding:10px 14px}
.mx-pt__n b{display:block;font-weight:500;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#0a1226}
.mx-pt__n span{display:block;font-size:12.5px;color:#5a6f93;margin-top:3px}
.mx-pt__n--core{border-color:#3C7DDD;box-shadow:0 0 0 3px rgba(60,125,221,.10)}
.mx-pt__n--side{background:#f7f9fc;border-style:dashed}

/* v12 (4 Nov 2026): petscii.nw-style header (light top bar: logo, search, text size, light/dark, full screen, account;
   then the menu bar in Machina navy), proper footer, dark mode, logos on the cards, search results. */
.mx-head{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 1px 0 #d7deea}
.mx-row1{display:flex;align-items:center;gap:22px;padding:12px 32px}
.mx-head .mx-brand{flex:0 0 auto}
.mx-head .mx-mark{color:var(--mx-navy);font-size:24px}
.mx-head .mx-tag{color:#5b6f94}
.mx-search{flex:1 1 auto;max-width:720px;display:flex;align-items:center;gap:8px;background:#f1f4f9;border:1px solid #d7deea;border-radius:8px;padding:0 12px}
.mx-search svg{width:16px;height:16px;fill:none;stroke:#6a7790;stroke-width:2;flex:none}
.mx-search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--mx-ink);padding:10px 0}
.mx-search input::placeholder{color:#7b879f}
.mx-search:focus-within{border-color:var(--mx-blue2);box-shadow:0 0 0 3px rgba(47,116,192,.15)}
.mx-tools{display:flex;gap:6px;margin-left:auto}
.mx-tools button{min-width:38px;height:38px;border:1px solid #d7deea;background:#fff;color:var(--mx-ink);border-radius:7px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;display:grid;place-items:center;padding:0 7px}
.mx-tools button:hover{border-color:var(--mx-blue2);color:var(--mx-blue2)}
.mx-tools svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.mx-head .mx-user summary{display:flex;align-items:center;gap:9px;border:1px solid #d7deea;border-radius:8px;padding:4px 12px 4px 4px;background:#fff}
.mx-head .mx-user summary em{font-style:normal;font-size:14px;font-weight:600;color:var(--mx-ink);white-space:nowrap}
.mx-head .mx-signin{background:var(--mx-navy);color:#fff;border:0;border-radius:8px;padding:9px 16px;font-weight:600}
.mx-head .mx-menu{background:#fff;border-color:#d7deea;box-shadow:0 12px 30px rgba(0,0,0,.15)}
.mx-head .mx-menu a{color:var(--mx-ink)}.mx-head .mx-menu a:hover{background:#f1f4f9;color:var(--mx-ink)}
.mx-head .mx-menu__head{border-color:#d7deea}.mx-head .mx-menu__head b{color:var(--mx-ink)}.mx-head .mx-menu__sep{background:#d7deea}
.mx-head .mx-nav{flex:none;display:flex;justify-content:center;gap:4px;padding:0 32px;background:var(--mx-navy2)}
.mx-head .mx-nav a{padding:13px 18px;font-size:15px;font-weight:500;color:#dbe5f6;border-bottom:3px solid transparent}
.mx-head .mx-nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.mx-head .mx-nav a.on{color:#fff;font-weight:600;border-bottom-color:#5aa0ff;background:rgba(255,255,255,.09)}
.mx-strip{background:#fff;color:#5b6f94;border-bottom:1px solid #d7deea}
.mx-strip a{color:var(--mx-ink)}.mx-strip b{color:var(--mx-ink);font-weight:600}
.mx-foot{grid-template-columns:2fr 1fr 1fr 1fr}
.mx-foot__base{grid-column:1/-1;border-top:1px solid #23355c;padding-top:14px;font-size:12px;color:#6f86ad}
.mx-world__id{display:flex;align-items:center;justify-content:center;gap:16px;margin:4px 0 2px}
.mx-world__nm{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.mx-world__logo{width:68px;height:68px;object-fit:contain;border-radius:12px;flex:none}
.mx-results{margin:6px 0 34px;display:flex;flex-direction:column;gap:10px;max-width:760px}
.mx-results__h{font-family:var(--mx-serif);font-weight:400;font-size:30px;margin:0 0 6px}
.mx-result{display:block;background:#fff;border:1px solid #d7deea;border-radius:8px;padding:12px 16px}
.mx-result b{display:block;font-weight:600;color:var(--mx-ink)}.mx-result span{font-size:14px;color:#5b6f94}
.mx-result:hover{border-color:var(--mx-blue2)}
.mx-result--out{border-style:dashed}
.mx-results__none{color:#5b6f94;margin:0}
/* text size: scales the page below the header */
html[data-scale="1"] .mx-main{zoom:.9}html[data-scale="3"] .mx-main{zoom:1.12}html[data-scale="4"] .mx-main{zoom:1.25}
/* dark mode */
html[data-theme="dark"] .mx{--mx-page:#0b0f19;--mx-ink:#e6ebf5;--mx-card:#2a3550}
html[data-theme="dark"] .mx-head,html[data-theme="dark"] .mx-strip{background:#141b2b;box-shadow:0 1px 0 #2a3550;border-color:#2a3550}
html[data-theme="dark"] .mx-head .mx-mark{color:#a9c6f0}
html[data-theme="dark"] .mx-search{background:#26304a;border-color:#3a4766}
html[data-theme="dark"] .mx-search input{color:#e6ebf5}html[data-theme="dark"] .mx-search input::placeholder{color:#b4bdd0}
html[data-theme="dark"] .mx-tools button,html[data-theme="dark"] .mx-head .mx-user summary{background:#141b2b;border-color:#3a4766;color:#e6ebf5}
html[data-theme="dark"] .mx-head .mx-user summary em{color:#e6ebf5}
html[data-theme="dark"] .mx-head .mx-menu{background:#141b2b;border-color:#2a3550}html[data-theme="dark"] .mx-head .mx-menu a{color:#e6ebf5}
html[data-theme="dark"] .mx-head .mx-menu a:hover{background:#1d2740}
html[data-theme="dark"] .mx-branch,html[data-theme="dark"] .mx-pt__n,html[data-theme="dark"] .mx-result,html[data-theme="dark"] .mx-drawer{background:#141b2b;border-color:#2a3550;color:#e6ebf5}
html[data-theme="dark"] .mx-branch:has(.mx-world--soon),html[data-theme="dark"] .mx-pt__n--side{background:#111827}
html[data-theme="dark"] .mx-world__name,html[data-theme="dark"] .mx-pt__n b,html[data-theme="dark"] .mx-result b{color:#e6ebf5}
html[data-theme="dark"] .mx-world__desc,html[data-theme="dark"] .mx-pt__n span,html[data-theme="dark"] .mx-lede{color:#c3cbdc}
html[data-theme="dark"] .mx-root{background:#1d2740}
@media (max-width:1000px){.mx-row1{flex-wrap:wrap;padding:10px 18px}.mx-search{order:5;flex-basis:100%;max-width:none}.mx-head .mx-user summary em{display:none}.mx-head .mx-nav{justify-content:flex-start;overflow-x:auto;padding:0 8px}.mx-foot{grid-template-columns:1fr 1fr}}
html[data-theme="dark"] .mx-chip{background:#1d2740;color:#c9d6ec;border-color:#2a3550}
html[data-theme="dark"] .mx-go{color:#8fb8ff}
.mx-views{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;font-weight:600;color:#1f6b2c;background:#eaf6ec;border:1px solid #9fd3aa;border-radius:18px;padding:6px 12px}
.mx-views svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
html[data-theme="dark"] .mx-views{background:#13301b;color:#8fe0a0;border-color:#2c6b3a}
/* v15: the card's logo, large, top left; the category, name and address to its right; the card reads left to right */
.mx-world{align-items:stretch;text-align:left}
.mx-world__id{justify-content:flex-start;gap:18px;margin:0 0 6px}
.mx-world__logo{width:104px;height:104px;border-radius:16px}
.mx-world__nm .mx-world__cat{margin-bottom:2px}
.mx-world__nm .mx-world__name{font-size:30px;line-height:1.1}
.mx-world__desc{text-align:left}
.mx-branch .mx-chips{justify-content:flex-start}

/* v19: the Machina logo (Blueprint M) beside the wordmark */
.mx-head .mx-logo{flex:0 0 auto;display:block;line-height:0}
.mx-head .mx-logo img{width:48px;height:48px;display:block}
.mx-head .mx-logo + .mx-brand{margin-left:-6px}

/* v20: the Machina logo larger, straddling the top row and the nav bar (as NEURA/8 and PETSCII do) */
@media (min-width:901px){
  .mx-head .mx-logo{position:absolute;left:28px;top:8px;z-index:40}
  .mx-head .mx-logo img{width:108px;height:108px;filter:drop-shadow(0 6px 14px rgba(10,20,45,.35))}
  .mx-head .mx-logo + .mx-brand{margin-left:112px}
}