/* SHADE Docs (Apollo, 2026-10-28). Everything lives under .dx so content.html embeds anywhere. Page chrome: .dxp-* */
@font-face { font-family: 'Darker Grotesque'; src: url('../fonts/DarkerGrotesque-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Darker Grotesque'; src: url('../fonts/DarkerGrotesque-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono-var-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

.dx { --dx-fg:#EEEEEF; --dx-2:rgba(238,238,239,.70); --dx-3:rgba(238,238,239,.42); --dx-line:rgba(238,238,239,.14);
  --dx-d:'Darker Grotesque',system-ui,sans-serif; --dx-m:'Geist Mono',ui-monospace,monospace;
  color:var(--dx-2); font:400 19px/1.28 var(--dx-d); -webkit-font-smoothing:antialiased; text-align:left; }
.dx *, .dx *::before, .dx *::after { box-sizing:border-box; }
.dx b, .dx strong { color:var(--dx-fg); font-weight:700; }
.dx p { margin:0 0 12px; }
.dx h2 { margin:0 0 14px; font:700 clamp(32px,7vw,52px)/.94 var(--dx-d); text-transform:uppercase; color:var(--dx-fg); letter-spacing:0; }
.dx h3 { margin:26px 0 10px; font:700 21px/1 var(--dx-d); text-transform:uppercase; color:var(--dx-fg); }
.dx-s { padding:56px 0 8px; border-top:1px solid var(--dx-line); scroll-margin-top:72px; }
.dx-s:first-child { border-top:0; padding-top:12px; }
.dx-k { margin:0 0 16px !important; font:400 11px/1 var(--dx-m); letter-spacing:.18em; text-transform:uppercase; color:var(--dx-3); }
.dx-lead { font-size:clamp(20px,4.6vw,24px); line-height:1.2; color:var(--dx-fg) !important; max-width:640px; }
.dx-m { font:400 12px/1.6 var(--dx-m); color:var(--dx-3); max-width:640px; }
.dx-hint { font:400 10px/1 var(--dx-m); letter-spacing:.08em; text-transform:none; color:var(--dx-3); margin-left:10px; }
.dx code { font:400 .78em/1 var(--dx-m); color:var(--dx-fg); letter-spacing:-.02em; overflow-wrap:anywhere; }
.dx-cols { display:grid; grid-template-columns:1fr 1fr; gap:6px 40px; }
.dx-cols3 { display:grid; grid-template-columns:repeat(3,1fr); gap:0 28px; margin-top:8px; }
.dx-cols3 p, .dx-cols p { font-size:17.5px; line-height:1.24; }
.dx-box { border:1px solid var(--dx-line); border-radius:10px; padding:4px 18px 14px; margin-top:20px; }
.dx-box h3 { margin-top:16px; font:400 11px/1 var(--dx-m); letter-spacing:.16em; color:var(--dx-3); }
.dx-ol { list-style:none; margin:0; padding:0; counter-reset:s; }
.dx-ol li { counter-increment:s; position:relative; padding:0 0 9px 30px; }
.dx-ol li::before { content:counter(s,decimal-leading-zero); position:absolute; left:0; top:5px; font:400 10px/1 var(--dx-m); color:var(--dx-3); }

/* rooms */
.dx-rooms { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:30px 0 8px; }
.dx-room { border:1px solid var(--dx-line); border-radius:8px; padding:18px 16px 6px; min-height:210px; display:flex; flex-direction:column; }
.dx-room b { font:700 30px/1 var(--dx-d); text-transform:uppercase; color:rgba(238,238,239,.3); margin:34px 0 10px; }
.dx-room p { font-size:16.5px; line-height:1.2; }
.dx-room.live { border-color:rgba(238,238,239,.9); background:linear-gradient(180deg,rgba(238,238,239,.14),rgba(238,238,239,.02)); }
.dx-room.live b { color:var(--dx-fg); }
.dx-tag { font:400 10px/1 var(--dx-m); letter-spacing:.16em; text-transform:uppercase; color:var(--dx-3); }
.dx-room.live .dx-tag { color:var(--dx-fg); }
.dx-room.live .dx-tag::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--dx-fg); margin-right:7px; }

/* flow diagram */
.dx-flow { display:grid; grid-template-columns:1fr auto 1.15fr auto 1fr; align-items:center; gap:0; margin:30px 0 14px; }
.dx-n { border:1px solid rgba(238,238,239,.5); border-radius:8px; padding:14px 16px; min-width:0; }
.dx-n small { display:block; font:400 10px/1 var(--dx-m); letter-spacing:.14em; text-transform:uppercase; color:var(--dx-3); margin-bottom:10px; }
.dx-n b { display:block; font:700 22px/1.05 var(--dx-d); color:var(--dx-fg); }
.dx-n b.s { font:400 12px/1.4 var(--dx-m); color:var(--dx-2); margin-top:8px; }
.dx-n.pool { border-color:var(--dx-fg); background:rgba(238,238,239,.05); }
.dx-n svg { display:block; width:100%; max-width:130px; margin-top:12px; }
.dx-a { padding:0 12px; text-align:center; font:400 11px/1.3 var(--dx-m); color:var(--dx-fg); min-width:96px; }
.dx-a span { display:block; }
.dx-a span::after { content:'→'; display:block; font:400 22px/1 var(--dx-m); margin-top:6px; }
.dx-a em { display:block; font-style:normal; color:var(--dx-3); margin-top:4px; font-size:10.5px; }
.dx-cut { display:flex; align-items:center; justify-content:center; gap:10px; margin:0 0 22px !important; font:400 11px/1 var(--dx-m); letter-spacing:.14em; text-transform:uppercase; color:var(--dx-3); border-top:1px dashed rgba(238,238,239,.25); padding-top:14px; }
.dx-cut i { font-style:normal; display:inline-grid; place-items:center; width:20px; height:20px; border:1px solid rgba(238,238,239,.5); border-radius:50%; color:var(--dx-fg); font-size:10px; }

/* figures */
.dx-fig { margin:30px 0 10px; }
.dx-fig svg { display:block; width:100%; max-width:560px; height:auto; margin:0 auto; font-family:var(--dx-m); overflow:visible; }
.dx-fig figcaption { font:400 11px/1.6 var(--dx-m); color:var(--dx-3); margin-top:14px; max-width:560px; margin-left:auto; margin-right:auto; }
.dx-sw { display:inline-block; width:18px; height:0; border-top:2px solid var(--dx-fg); vertical-align:middle; margin:0 6px 0 0; }
.dx-sw.dash { border-top:1.5px dashed var(--dx-2); margin-left:14px; }

/* code */
.dx-code { margin:18px 0 0; padding:0; font:400 12px/1.8 var(--dx-m); color:var(--dx-2); white-space:pre; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.dx-code .c { color:var(--dx-3); } .dx-code .w { color:var(--dx-fg); }
.dx-code.sm { font-size:11.5px; }
.dx > .dx-s > .dx-code { border:1px solid var(--dx-line); border-radius:10px; padding:18px 20px; }
.dx-box .dx-code { margin-top:0; }

/* sequence */
.dx-seq { list-style:none; margin:28px 0 12px; padding:0; counter-reset:q; border-top:1px solid var(--dx-line); }
.dx-seq li { counter-increment:q; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:13px 0 13px 34px; border-bottom:1px solid var(--dx-line); position:relative; }
.dx-seq li::before { content:counter(q,decimal-leading-zero); position:absolute; left:0; top:20px; font:400 10px/1 var(--dx-m); color:var(--dx-3); }
.dx-seq .who { font:400 11px/1 var(--dx-m); letter-spacing:.1em; text-transform:uppercase; color:var(--dx-fg); border:1px solid rgba(238,238,239,.4); border-radius:4px; padding:6px 8px; white-space:nowrap; }
.dx-seq .who.hi { background:var(--dx-fg); color:#000; border-color:var(--dx-fg); }
.dx-seq i { font:400 16px/1 var(--dx-m); color:var(--dx-fg); font-style:normal; }
.dx-seq p { margin:0; flex:1 1 220px; font-size:17.5px; }

/* definition lists */
.dx-dl { margin:6px 0 0; display:grid; grid-template-columns:minmax(120px,170px) 1fr; border-top:1px solid var(--dx-line); }
.dx-dl dt, .dx-dl dd { margin:0; padding:10px 12px 10px 0; border-bottom:1px solid var(--dx-line); font:400 12.5px/1.5 var(--dx-m); }
.dx-dl dt { color:var(--dx-3); } .dx-dl dd { color:var(--dx-fg); min-width:0; overflow-wrap:anywhere; }
.dx-dl dd small { display:block; margin-top:4px; font-size:11.5px; color:var(--dx-3); }
.dx-dl .mono { letter-spacing:-.03em; }
.dx-dl.wide { grid-template-columns:minmax(110px,150px) 1fr; margin-top:24px; }
.dx-dl.wide dd { color:var(--dx-2); }
.dx-dl.addr dd[data-copy] { cursor:pointer; transition:color .2s; }
.dx-dl.addr dd[data-copy]:hover { color:#fff; }
.dx-dl.addr dd.copied { color:#fff; }
.dx-dl.addr dd.copied::after { content:'  copied'; color:var(--dx-3); letter-spacing:.06em; }

.dx-s > .dx-dl:last-child dt:nth-last-of-type(1), .dx-s > .dx-dl:last-child dd:last-of-type { border-bottom:0; }
/* tablet / phone */
@media (max-width:860px) {
  .dx-rooms { grid-template-columns:1fr 1fr; }
  .dx-cols3 { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .dx { font-size:18px; }
  .dx-s { padding-top:44px; }
  .dx-cols { grid-template-columns:1fr; }
  .dx-flow { grid-template-columns:1fr; gap:0; }
  .dx-a { padding:10px 0; min-width:0; }
  .dx-a span::after { content:'↓'; }
  .dx-a span:empty::after { margin-top:0; }
  .dx-rooms { gap:10px; }
  .dx-room { min-height:0; padding:14px 12px 4px; }
  .dx-room b { font-size:26px; margin:22px 0 8px; }
  .dx-room p { font-size:15.5px; }
  .dx-dl, .dx-dl.wide { grid-template-columns:1fr; }
  .dx-dl dt { border-bottom:0; padding-bottom:0; padding-top:12px; }
  .dx-dl dd { padding-top:4px; }
  .dx > .dx-s > .dx-code { padding:14px; }
  .dx-code { font-size:11px; }
}
@media (max-width:360px) {
  .dx-rooms { grid-template-columns:1fr; }
  .dx-code { font-size:10.5px; }
}

/* ===== standalone page chrome ===== */
html.dxp { scroll-behavior:smooth; }
.dxp, .dxp body { margin:0; background:#000; color:#EEEEEF; }
.dxp-top { position:sticky; top:0; z-index:5; background:rgba(0,0,0,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid rgba(238,238,239,.14); }
.dxp-bar { max-width:1040px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.dxp-bar img { height:22px; display:block; }
.dxp-bar a.back { font:400 11px/1 'Geist Mono',monospace; letter-spacing:.14em; text-transform:uppercase; color:rgba(238,238,239,.66); text-decoration:none; padding:8px 0; }
.dxp-bar a.back:hover { color:#fff; }
.dxp-nav { max-width:1040px; margin:0 auto; padding:0 24px; display:flex; gap:22px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.dxp-nav::-webkit-scrollbar { display:none; }
.dxp-nav a { flex:none; font:400 11px/1 'Geist Mono',monospace; letter-spacing:.12em; text-transform:uppercase; color:rgba(238,238,239,.42); text-decoration:none; padding:12px 0 14px; border-bottom:1px solid transparent; transition:color .2s; }
.dxp-nav a:hover { color:#EEEEEF; }
.dxp-nav a.on { color:#fff; border-bottom-color:#EEEEEF; }
.dxp-main { max-width:1040px; margin:0 auto; padding:56px 24px 120px; }
.dxp-hero { margin-bottom:44px; }
.dxp-hero h1 { margin:0 0 20px; font:700 clamp(46px,11vw,104px)/.88 'Darker Grotesque',sans-serif; text-transform:uppercase; }
@media (max-width:640px) { .dxp-bar, .dxp-nav, .dxp-main { padding-left:18px; padding-right:18px; } .dxp-main { padding-top:36px; } .dxp-nav { gap:18px; } }