/* the Perspective page, as the owner showed it: black, green, Space Mono */
#intro, #intro-cursor { --u: clamp(11px, 0.72vw, 20px); --g: #1dff1d; }
#intro { position: fixed; inset: 0; z-index: 20; background: #000; color: var(--g); font-family: 'Space Mono', 'Martian Mono', ui-monospace, monospace; font-size: var(--u); line-height: 1.3; overflow: hidden; cursor: none; transform-origin: 50% 50%; will-change: transform, opacity; }
#intro.gone, #intro-cursor.gone { display: none; }
#intro * { box-sizing: border-box; }
#intro .nav { position: absolute; left: calc(var(--u) * .7); top: calc(var(--u) * 1.2); display: flex; gap: calc(var(--u) * 1.6); font-size: calc(var(--u) * .78); letter-spacing: .04em; }
#intro .nav span { padding: .32em .5em; border: 1px solid transparent; }
#intro .nav span.on { border-color: var(--g); background: rgba(29,255,29,.18); box-shadow: inset 0 0 0 1px #000; }
#intro .logo { position: absolute; right: calc(var(--u) * .8); top: calc(var(--u) * .9); font-weight: 700; font-size: calc(var(--u) * 1.25); letter-spacing: .02em; }
#intro .logo b { display: inline-block; transform: scaleX(-1); }
#intro .title { position: absolute; left: 50%; top: 9vh; font-size: calc(var(--u) * 2.2); letter-spacing: .02em; line-height: 1; }
#intro .list { position: absolute; left: 50%; top: 16.5vh; right: 0; }
#intro .list div { position: relative; white-space: nowrap; }
#intro .list div.gap { height: 1.3em; }
#intro .list div.gap.big { height: 2.2em; }
#intro .list div.on { background: var(--g); color: #000; }
#intro .list div.on::before { content: '→ '; }
#intro .square { position: absolute; left: 22vw; top: 15.5vh; width: 38vh; height: 38vh; border: 1px solid var(--g); }
#intro .square canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#intro .square video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; background: transparent; }
#intro .square video.show { display: block; }
#intro .foot { position: absolute; left: calc(var(--u) * .7); bottom: calc(var(--u) * .9); font-size: calc(var(--u) * .72); }
#intro .foot u { margin-left: 1.4em; }
#intro .toggle { position: absolute; right: calc(var(--u) * .8); bottom: calc(var(--u) * .8); width: calc(var(--u) * .9); height: calc(var(--u) * .9); background: var(--g); }
/* the fake cursor: a sibling of #intro, above the TV canvas (z 21) and the page (z 20) */
#intro-cursor { position: fixed; left: 0; top: 0; z-index: 22; width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); transform: translate(-2px, -2px); pointer-events: none; filter: drop-shadow(0 0 1px #000); }
#intro-cursor svg { display: block; width: 100%; height: 100%; }