/* Röntgen: the instrument between picture and code. Nothing is faked: the
   text comes from the live document. Three ways in:
   · the slider a little: a LENS follows the pointer; inside it the page
     shows its code, outside it stays the page. The further the slider, the
     wider the lens.
   · the slider all the way, or the key X: the whole page develops into
     code, from the top of the screen down, like a film in the tray.
   · a click on any element while the code shows: its whole SHEET opens,
     HTML, the CSS that applies, the script that draws it, ready to copy.
   The code is alive: lines type themselves in, long blocks roll, a scan line
   sweeps each element, and drawn elements show their live values. */
:root { --xr-page: 1; --xr-gray: 0; --xr-line: 0; --xr-code: 0; }

/* The control, always in sight, bottom right, above everything. */
.xray { position: fixed; left: 50%; bottom: 1.1rem; translate: -50% 0; z-index: 70; display: inline-flex; align-items: center; gap: .75rem; padding: .85rem 1.15rem .85rem 1rem; border-radius: 999px;
  font: 500 .66rem/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink, #eee); cursor: pointer; user-select: none;
  background: color-mix(in oklab, var(--bg, var(--sky-0, #000)) 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid color-mix(in oklab, var(--gold, #b8892a) 50%, transparent); box-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .3);
  animation: xr-invite 2.8s ease-in-out infinite; }
html.xr-used .xray { animation: none; }
@keyframes xr-invite { 50% { box-shadow: 0 12px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .3), 0 0 28px color-mix(in oklab, var(--gold, #b8892a) 45%, transparent); border-color: var(--gold, #b8892a); } }
.xray .xr-name { display: inline-flex; align-items: center; gap: .45rem; padding-right: .75rem; margin-right: .1rem; border-right: 1px solid color-mix(in oklab, var(--gold, #b8892a) 40%, transparent); color: var(--gold, #b8892a); letter-spacing: .22em; }
.xray .xr-name::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold, #b8892a); box-shadow: 0 0 10px var(--gold, #b8892a); }
.xray > span:not(.xr-name):not(.xr-readout) { color: var(--muted, #888); }
.xray .track { position: relative; display: inline-flex; align-items: center; }
.xray input { -webkit-appearance: none; appearance: none; width: 15rem; height: 3px; margin: 0; background: linear-gradient(90deg, var(--muted, #888), var(--gold, #b8892a)); border-radius: 2px; opacity: .85; cursor: grab; }
.xray input:active { cursor: grabbing; }
/* Three detents on the track: picture, lens, code. */
.xray .track::before, .xray .track::after, .xray .track i { content: ''; position: absolute; top: 50%; width: 1px; height: 9px; translate: 0 -50%; background: color-mix(in oklab, var(--gold, #b8892a) 55%, transparent); pointer-events: none; }
.xray .track::before { left: 0; } .xray .track::after { right: 0; } .xray .track i { display: none; }
.xray input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--gold, #b8892a); box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 0 14px color-mix(in oklab, var(--gold, #b8892a) 60%, transparent); }
.xray input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--gold, #b8892a); }
.xray input:focus-visible { outline: 2px solid var(--gold, #b8892a); outline-offset: 6px; }
.xray .on.on { color: var(--gold, #b8892a); }
.xray .xr-readout { display: none; white-space: nowrap; gap: .7rem; padding-left: .7rem; border-left: 1px solid color-mix(in oklab, var(--gold, #b8892a) 40%, transparent); color: var(--gold, #b8892a); font-variant-numeric: tabular-nums; }
html.xr-on .xray .xr-readout { display: inline-flex; }
.xray .xr-readout small { color: var(--muted, #888); }
@media (max-width: 48rem) {
  .xray { bottom: .7rem; padding: .65rem .8rem; gap: .5rem; max-width: calc(100% - 1.4rem); }
  .xray .xr-name { display: none; }
  .xray input { width: 9rem; }
  .xray .xr-readout small { display: none; }
}

main, footer.bottom, header.top .mark, header.top nav > a {
  opacity: var(--xr-page);
  filter: grayscale(var(--xr-gray));
  transition: opacity .12s linear, filter .12s linear;
}

/* The layer: one box per element, over the whole document. In lens mode it
   is clipped to a circle around the pointer; the clip is set by the script. */
.xr-layer { position: absolute; left: 0; top: 0; width: 100%; z-index: 40; pointer-events: none; --xr-accent: var(--gold, #b8892a); --xr-ink: var(--ink, #15171b); --xr-dim: var(--muted, #777); --xr-bg: var(--bg, var(--sky-0, #fff));
  display: none; }
.xr-layer[data-on] { display: block; pointer-events: auto; background: color-mix(in oklab, var(--xr-bg) calc((1 - var(--xr-page)) * 92%), transparent); }
.xr-layer::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background-image: linear-gradient(color-mix(in oklab, var(--xr-accent) 14%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--xr-accent) 14%, transparent) 1px, transparent 1px);
  background-size: 48px 48px; }
.xr-layer[data-on]::before { opacity: .5; }
.xr-box { position: absolute; box-sizing: border-box; }
.xr-box::before { content: ''; position: absolute; inset: 0; border: 1px solid var(--xr-accent); opacity: var(--xr-line); transition: opacity .2s; }
.xr-box.container::before { border-style: dashed; }
.xr-box.leaf { cursor: pointer; }
.xr-box.leaf:hover::before { opacity: 1; box-shadow: 0 0 0 1px var(--xr-accent), 0 0 22px color-mix(in oklab, var(--xr-accent) 45%, transparent); }
.xr-tag { position: absolute; padding: .15rem .4rem; font: 500 9.5px/1 ui-monospace, Consolas, monospace; letter-spacing: .06em; color: var(--xr-accent); background: var(--xr-bg); opacity: var(--xr-line); white-space: nowrap; }
.xr-box.container > .xr-tag { left: -1px; top: 0; transform: translateY(-100%); }
.xr-box.leaf > .xr-tag { right: 0; top: 0; }
.xr-code { position: absolute; inset: 0; margin: 0; padding: .35rem .5rem; overflow: hidden; background: color-mix(in oklab, var(--xr-bg) 94%, transparent); font: 11px/1.45 ui-monospace, 'Cascadia Mono', Consolas, monospace; white-space: pre; color: var(--xr-ink); opacity: var(--xr-code); -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.xr-code code { display: block; font: inherit; }
.xr-code .t, .xr-sheet .t { color: var(--xr-accent); }
.xr-code .a, .xr-sheet .a { color: var(--xr-dim); }
.xr-code .c, .xr-sheet .c { color: var(--xr-dim); font-style: italic; }
.xr-code .s, .xr-sheet .s { color: var(--xr-accent); }
.xr-code .p, .xr-sheet .p { color: var(--xr-dim); }
.xr-code .w, .xr-sheet .w { color: var(--xr-accent); font-style: normal; font-weight: 600; }
.xr-box.leaf.tiny .xr-code { padding-top: .15rem; }

/* Motion: lines type in, long blocks roll, a cursor blinks, a scan line sweeps. */
.xr-code .l { display: inline-block; min-width: 1px; opacity: 0; transform: translateX(-.4rem); transition: opacity .3s ease, transform .3s ease; transition-delay: calc(var(--i) * 26ms); }
.xr-layer[data-on] .xr-code .l { opacity: 1; transform: none; }
.xr-code code.roll { animation: xr-roll var(--dur, 20s) ease-in-out infinite alternate; animation-play-state: paused; animation-delay: 1.6s; }
.xr-layer[data-on] .xr-box.vis .xr-code code.roll { animation-play-state: running; }
@keyframes xr-roll { to { translate: 0 calc(-1 * var(--over)); } }
.xr-layer[data-on] .xr-box.vis .xr-code code::after { content: '▍'; color: var(--xr-accent); animation: xr-blink 1.1s steps(1) infinite; }
@keyframes xr-blink { 50% { opacity: 0; } }
.xr-box.leaf::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--xr-accent) 30%, var(--xr-accent) 70%, transparent); box-shadow: 0 0 12px var(--xr-accent); }
.xr-layer[data-on] .xr-box.leaf.vis::after { opacity: .55; animation: xr-scan 3.6s linear infinite; animation-delay: calc(var(--n, 0) * -.37s); }
@keyframes xr-scan { from { top: 0; } to { top: 100%; } }

/* The lens ring, following the pointer. */
.xr-lens { position: fixed; left: 0; top: 0; z-index: 41; pointer-events: none; border-radius: 50%; translate: -50% -50%; opacity: 0; transition: opacity .25s;
  border: 1px solid color-mix(in oklab, var(--gold, #b8892a) 70%, transparent); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 40px color-mix(in oklab, var(--gold, #b8892a) 35%, transparent), inset 0 0 40px rgba(0, 0, 0, .35); }
.xr-lens::after { content: attr(data-r); position: absolute; right: 8%; bottom: 8%; font: 500 9.5px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; color: var(--gold, #b8892a); }
html.xr-lensmode .xr-lens { opacity: 1; }
html.xr-lensmode .xr-layer { cursor: crosshair; }

/* The developing line when X sweeps the page. */
.xr-scan { position: fixed; left: 0; right: 0; top: -10px; z-index: 42; height: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--gold, #b8892a) 20%, #fff 50%, var(--gold, #b8892a) 80%, transparent); box-shadow: 0 0 24px var(--gold, #b8892a), 0 0 60px color-mix(in oklab, var(--gold, #b8892a) 60%, transparent); }

/* The sheet: one element's whole source, to read and to copy. */
.xr-sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: min(100%, 46rem); display: none; flex-direction: column;
  background: color-mix(in oklab, var(--bg, var(--sky-0, #000)) 94%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-left: 1px solid color-mix(in oklab, var(--gold, #b8892a) 45%, transparent); box-shadow: -30px 0 80px rgba(0, 0, 0, .5); color: var(--ink, #eee); }
.xr-sheet[data-open] { display: flex; animation: xr-sheet-in .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes xr-sheet-in { from { translate: 40px 0; opacity: 0; } }
.xr-sheet header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid color-mix(in oklab, var(--gold, #b8892a) 30%, transparent); font: 500 .7rem/1 ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; }
.xr-sheet header b { color: var(--gold, #b8892a); font-weight: 500; letter-spacing: .06em; text-transform: none; font-size: .85rem; flex: 1; }
.xr-sheet header button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink, #eee); background: none; border: 1px solid color-mix(in oklab, var(--gold, #b8892a) 45%, transparent); border-radius: 999px; padding: .5rem .8rem; cursor: pointer; }
.xr-sheet header button:hover { background: color-mix(in oklab, var(--gold, #b8892a) 14%, transparent); }
.xr-sheet header button.ok { color: var(--gold, #b8892a); }
.xr-sheet pre { flex: 1; margin: 0; padding: 1rem 1.2rem 6rem; overflow: auto; font: 12px/1.55 ui-monospace, 'Cascadia Mono', Consolas, monospace; white-space: pre; color: var(--ink, #eee); }
.xr-sheet pre .h { display: block; margin: 1.2rem 0 .4rem; padding-top: .8rem; border-top: 1px dashed color-mix(in oklab, var(--gold, #b8892a) 30%, transparent); color: var(--gold, #b8892a); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 10px; }
.xr-sheet pre .h:first-child { margin-top: 0; padding-top: 0; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .xr-code .l { transition: none; }
  .xr-code code.roll, .xr-layer[data-on] .xr-code code::after, .xr-layer[data-on] .xr-box.leaf::after { animation: none; }
  .xr-sheet[data-open] { animation: none; }
}

/* Layers (key S): the page comes apart into three floating sheets in real
   perspective, the picture below, the outlines in the middle, the code on
   top, and the whole stack tilts with the pointer. An exploded drawing. */
html.xr-split body { perspective: 1500px; perspective-origin: 50% var(--xr-po, 50vh); }
html.xr-split main, html.xr-split header.top, html.xr-split footer.bottom { transform: rotateX(var(--xr-rx, 44deg)) rotateZ(var(--xr-rz, -12deg)) translateZ(-200px) scale(.76); transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
html.xr-split .xr-layer { transform: rotateX(var(--xr-rx, 44deg)) rotateZ(var(--xr-rz, -12deg)) translateZ(40px) scale(.76); transform-style: preserve-3d; background: transparent; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
html.xr-split .xr-layer::before { opacity: .8; }
html.xr-split .xr-box { transform-style: preserve-3d; }
html.xr-split .xr-box::before { box-shadow: 0 0 0 1px color-mix(in oklab, var(--xr-accent) 30%, transparent); }
html.xr-split .xr-code { transform: translateZ(150px); background: color-mix(in oklab, var(--xr-bg) 84%, transparent); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px color-mix(in oklab, var(--xr-accent) 22%, transparent); -webkit-mask-image: none; mask-image: none; }
html.xr-split .xr-tag { transform: translateZ(0); }
html.xr-split .xr-box.container > .xr-tag { transform: translateY(-100%) translateZ(0); }
.xr-split-hint { position: fixed; left: 50%; bottom: 4.7rem; translate: calc(-100% - 1.2rem) 0; z-index: 70; display: none; text-align: right; white-space: nowrap; font: 500 .62rem/1.6 ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #888); }
.xr-split-hint b { color: var(--gold, #b8892a); font-weight: 500; }
html.xr-on .xr-split-hint { display: block; }
@media (max-width: 48rem) { .xr-split-hint { display: none !important; } }

/* Chaos with a shape: while the code shows, the Lorenz attractor draws
   itself on a canvas over the viewport, one thin line, its trail fading,
   two starts a ten-thousandth apart. Behind the control. */
.xr-vac { position: fixed; inset: 0; z-index: 43; pointer-events: none; opacity: 0; transition: opacity .8s; mix-blend-mode: screen; }
html.xr-on .xr-vac { opacity: var(--xr-code); }
@media (prefers-reduced-motion: reduce) { .xr-vac { display: none; } }
.xr-vac-note { position: fixed; left: 50%; bottom: 4.7rem; translate: 1.2rem 0; z-index: 70; display: none; text-align: left; white-space: nowrap; font: 500 .62rem/1.6 ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #888); }
.xr-vac-note b { color: var(--gold, #b8892a); font-weight: 500; }
html.xr-on .xr-vac-note { display: block; }
@media (max-width: 48rem) { .xr-vac-note { display: none !important; } }