:root{
  --ink:#1d2b21;--body:#314237;--muted:#718078;--green:#76b900;
  --green-dark:#4f7f00;--green-soft:#eef8df;--line:#dce4dc;
  --surface:#f7f9f7;--surface-2:#edf2ed;--paper:#fff;
  --banner:#172019;--banner-2:#223026;
  --mono:"IBM Plex Mono","Noto Sans Mono",Consolas,monospace;
  --sans:"IBM Plex Sans","Noto Sans",Segoe UI,system-ui,sans-serif;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font:15px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit}
.site-header{position:sticky;top:0;z-index:20;background:var(--paper)}
.brandbar{background:linear-gradient(90deg,var(--banner),var(--banner-2));color:#fff}
.brandbar-inner,.nav-inner,.page-shell,.footer-inner{width:min(var(--max),calc(100% - 36px));margin:0 auto}
.brandbar-inner{min-height:92px;display:flex;align-items:center;gap:17px}
.brand-mark{position:relative;flex:0 0 auto}
.brand-icon{width:66px;height:66px;border-radius:14px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 7px 22px rgba(0,0,0,.3)}
.presentation-axis-toggle{position:absolute;left:-13px;top:-13px;width:40px;height:40px;border:2px solid #b7ee5c;border-radius:50%;background:#101712;color:#b7ee5c;box-shadow:0 5px 16px rgba(0,0,0,.38);cursor:pointer;font:800 20px/1 var(--sans);display:grid;place-items:center;transition:transform .15s ease,background .15s ease,color .15s ease}
.presentation-axis-toggle:hover,.presentation-axis-toggle.active{transform:scale(1.08);background:var(--green);color:#101712}
.presentation-axis-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
.brand-copy{min-width:0}.brand{font:700 29px/1 var(--mono);letter-spacing:.01em}
.tagline{margin-top:8px;color:#b8c8b8;font:500 14px var(--mono);letter-spacing:.025em}
.header-actions{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.header-action-row{display:flex;align-items:center;gap:8px}
.release-stamp{font:650 10px var(--mono);letter-spacing:.06em;color:#a9c0a4;text-transform:uppercase;white-space:nowrap}
.release-stamp strong{color:#d7ecce;font-weight:700}
.release-dirty{color:#ffd166}
.release-dev{color:#9fb39f}
.version-chip,.theme-button{border:1px solid rgba(255,255,255,.22);border-radius:5px;color:#eaf2e7;background:rgba(255,255,255,.06);padding:8px 11px;font:650 10px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.theme-button{cursor:pointer}.theme-button:hover{background:rgba(255,255,255,.14)}
.presentation-axis{border-bottom:1px solid #315032;background:#101712;color:#e9f5e4}
.presentation-axis[hidden]{display:none}
.presentation-axis-inner{width:min(var(--max),calc(100% - 36px));min-height:74px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 0}
.presentation-axis-identity{min-width:205px;display:grid;line-height:1.25}
.presentation-axis-identity strong{font:700 14px var(--mono)}
.presentation-axis-identity span:last-child{color:#9fb39f;font:11px var(--mono)}
.presentation-axis-kicker{color:#9bd83b;font:700 9px var(--mono);letter-spacing:.13em}
/* Autoplay banner. width:100% forces its own line below the transport row, so
   it is never squeezed out by the rate buttons on a narrow window. */
.presentation-axis-status{width:100%;padding:6px 0 2px;font:700 12px var(--mono);
  letter-spacing:.07em;color:#b6f04a;text-transform:uppercase}
.presentation-axis-status[hidden]{display:none}
.presentation-axis-status strong{color:#c8ff5a;text-shadow:0 0 10px rgba(155,216,59,.45)}
.replay-status-where{color:#9fb39f;text-transform:none;letter-spacing:.02em;font-weight:500}
.replay-status-rate{color:#ffd166}
.presentation-axis-transport,.presentation-axis-rates{display:flex;gap:5px}
.presentation-axis-button{min-width:43px;border:1px solid #456348;border-radius:5px;background:#1b271d;color:#e9f5e4;padding:9px 10px;cursor:pointer;font:650 12px var(--mono)}
.presentation-axis-button:hover{border-color:var(--green);background:#263a27;color:#c8f27d}
/* Selected replay rate. Reads as a pressed key, not a hover. */
.presentation-axis-button.is-active{background:#9bd83b;border-color:#c8ff5a;color:#12210b;
  box-shadow:0 0 10px rgba(155,216,59,.4)}
.presentation-axis-button.is-active:hover{background:#b6f04a;color:#12210b}
.presentation-axis-rates{margin-left:auto}
.primary-nav,.secondary-nav{background:var(--paper);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;overflow-x:auto;scrollbar-width:thin}
.primary-nav button{flex:0 0 auto;border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);padding:18px 17px 13px;cursor:pointer;font-weight:680}
.primary-nav button:hover{color:var(--ink)}.primary-nav button.active{color:var(--ink);border-bottom-color:var(--green)}
.secondary-nav button{flex:0 0 auto;border:0;background:none;color:var(--muted);cursor:pointer;margin:7px 2px;padding:8px 12px;border-radius:4px;font:500 12px var(--mono)}
.secondary-nav button:hover{color:var(--ink);background:var(--surface)}
.secondary-nav button.active{color:var(--green-dark);background:var(--green-soft)}
.page-shell{padding:40px 0 84px;min-height:68vh}
.crumbs{margin-bottom:25px;color:var(--muted);font:650 11px var(--mono);letter-spacing:.13em;text-transform:uppercase}
.xlli-mount{max-width:940px}
.xlli-mount h1{font-family:var(--sans)!important;font-size:clamp(35px,5vw,58px)!important;line-height:1.04!important;letter-spacing:-.038em!important}
.xlli-mount h2{font-family:var(--sans)!important}
.xlli-mount table{font-family:var(--sans)!important}
.xlli-mount pre,.xlli-mount code{font-family:var(--mono)!important}
.xlli-source-view{margin:0;min-height:440px;overflow:auto;white-space:pre;tab-size:2;padding:22px 24px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:13px/1.65 var(--mono)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.xlli-host-image{margin:24px 0;max-width:100%}
.xlli-host-image img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 8px 28px rgba(23,32,25,.09)}
.xlli-host-image img.zoomable{cursor:zoom-in}
.xlli-host-image figcaption{margin-top:8px;color:var(--muted);font:12px/1.5 var(--mono)}
.xlli-host-image.unresolved{padding:16px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font:12px var(--mono)}
.xlli-icon-row{margin:18px 0 26px;padding:13px 14px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.xlli-icon-row-items{display:flex;flex-wrap:wrap;align-items:flex-start;gap:9px}
.xlli-icon-choice{width:72px;min-height:81px;padding:7px 5px 6px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease}
.xlli-icon-choice:hover{background:var(--green-soft);color:var(--green-dark);transform:translateY(-1px)}
.xlli-icon-choice:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.xlli-icon-choice img{width:48px;height:48px;object-fit:contain;border-radius:8px;filter:saturate(.72);transition:filter .16s ease,transform .16s ease,box-shadow .16s ease}
.xlli-icon-choice span{font:600 10px/1.25 var(--mono);text-align:center}
.xlli-icon-choice.is-relevant{border-color:var(--green);background:var(--paper);color:var(--ink)}
.xlli-icon-choice.is-relevant img{filter:none;transform:scale(1.08);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--green),0 6px 15px rgba(23,32,25,.18)}
.xlli-icon-glossary-preview{min-height:29px;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:16px;color:var(--body);font:12px/1.45 var(--sans)}
.xlli-icon-glossary-preview strong{color:var(--green-dark)}
.xlli-icon-glossary-link{flex:0 0 auto;color:var(--green-dark);font:650 11px var(--mono);text-decoration:none;border-bottom:1px dotted currentColor}
.xlli-icon-glossary-link:hover{border-bottom-style:solid}
.xlli-glossary-link{color:var(--green-dark);text-decoration:none;border-bottom:1px dotted currentColor}
.xlli-glossary-link:hover{border-bottom-style:solid}
.xlli-glossary-entry{scroll-margin-top:210px;margin:18px 0;padding:20px 22px;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:0 10px 10px 0;background:var(--surface);transition:box-shadow .2s ease,background .2s ease}
.xlli-glossary-entry-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.xlli-glossary-entry-icon{width:42px;height:42px;object-fit:contain;border-radius:8px}
.xlli-glossary-entry h2{margin:0!important;color:var(--ink);font:700 22px/1.2 var(--sans)!important}
.xlli-glossary-entry p{margin:8px 0 12px}
.xlli-glossary-entry-meta{display:flex;flex-wrap:wrap;gap:8px 14px;padding-top:10px;border-top:1px dashed var(--line);color:var(--muted);font:11px/1.5 var(--mono)}
.xlli-glossary-entry-meta strong{color:var(--body);letter-spacing:.08em;text-transform:uppercase}
.xlli-glossary-entry-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px}
.xlli-glossary-entry-links a{color:var(--green-dark);font:12px var(--mono)}
.glossary-entry-target{background:var(--green-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 35%,transparent)}
.site-footer{border-top:1px solid var(--line);padding:24px 0 42px;color:var(--muted);font:12px var(--mono)}
.footer-inner{display:flex;justify-content:space-between;gap:20px}
.fatal{margin:30px;white-space:pre-wrap;color:#b42318;font:13px/1.6 var(--mono)}
@media(max-width:700px){
  .tagline{display:none}.brandbar-inner{min-height:76px}.brand-icon{width:50px;height:50px;border-radius:10px}
  .brand{font-size:22px}.version-chip{display:none}.header-actions{gap:4px}.theme-button{padding:7px 8px}.primary-nav button{padding:14px 12px 10px}
  /* The release stamp stays visible on mobile — that is the whole point of it. */
  .release-stamp{font-size:9px;letter-spacing:.03em}.header-action-row{gap:5px}
  .page-shell{padding-top:27px}.footer-inner{display:block}
  .xlli-icon-choice{width:62px}.xlli-icon-choice img{width:42px;height:42px}
  .xlli-icon-glossary-preview{display:block}.xlli-icon-glossary-link{display:inline-block;margin-top:6px}
  .presentation-axis-inner{align-items:flex-start;flex-wrap:wrap}.presentation-axis-identity{width:100%}.presentation-axis-rates{margin-left:0}
}

/* Footer provenance: full UTC timestamp, room to breathe, and it stays
   visible on mobile -- unlike the header chip, which hides. */
.release-footer{font:650 10px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.release-footer strong{color:var(--ink)}
.release-footer .release-dirty{color:#c98a12}