:root{--page:#e8e8e6;--fg:#111;--g1:#fafafa;--g2:#cdcdcd;--g3:#8c8c8c;
    box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--page:#131313;--fg:#e8e8e6;color-scheme:dark}}
:root[data-theme="dark"]{--page:#131313;--fg:#e8e8e6;color-scheme:dark}
body{margin:0;padding:12px;background:var(--page);color:var(--fg);font:400 15px/1.55 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid #000;outline-offset:2px;background:#fff}
.defs{position:absolute;width:0;height:0}
.panel{position:relative;overflow:hidden;height:calc(100svh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:560px;background:var(--g2);color:#111}
.panel+.panel{margin-top:12px}
.panel svg.ph{position:absolute;inset:0;width:100%;height:100%}
.panel video.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.zoom{transform:scale(1.5);transform-origin:70% 35%}
.grad{background:radial-gradient(circle at var(--x) var(--y),var(--g1),var(--g2) 48%,var(--g3))}
.art{height:82svh;background:radial-gradient(circle at var(--x) var(--y),var(--g1),var(--g2) 48%,var(--g3))}
.logo{position:absolute;left:24px;top:18px;max-width:calc(100% - 48px);font:300 clamp(22px,3.6vw,38px)/1.05 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:-.02em;text-decoration:none}
.txt{position:absolute;left:24px;top:100px;width:min(320px,calc(100% - 48px));max-height:calc(100% - 190px);overflow:auto}
.txt h2{font:500 12px/1.3 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px}
.txt ul{margin:0 0 26px;padding-left:16px}
.txt li{margin:1px 0}
.txt a{text-decoration:none}
.txt a:hover{text-decoration:underline}
.t0{top:18px}
.p{padding-left:16px}
details{margin:0 0 3px}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"\2022";display:inline-block;width:16px;margin-left:-16px}
summary:hover span+span{text-decoration:underline}
summary span:first-child{display:inline-block;width:96px}
details p{margin:2px 0 8px 96px;max-width:28ch}
.pr{display:block;width:170px;height:3px;background:rgba(0,0,0,.22);margin:8px 0 6px}
.pr::before{content:"";display:block;height:100%;width:calc(var(--p)*1%);background:#111}
.ctr{position:absolute;inset:0;display:grid;place-items:center;color:#555;pointer-events:none}
.cr{position:absolute;right:14px;bottom:14px;display:flex;gap:6px}
.chip{background:#fff;color:#111;border:0;font:inherit;font-size:12px;line-height:1;padding:5px 8px;text-decoration:none;cursor:pointer}
.txt p{margin:0 0 26px;max-width:34ch}
.txt details p a{text-decoration:underline}
.vp{position:absolute;inset:0;overflow:auto;background:var(--g2);color:#111;overscroll-behavior:contain}
.vp.dg{user-select:none}
.world{position:relative;width:2900px;height:1650px;min-width:100%;min-height:100%;cursor:grab;background:radial-gradient(circle at var(--x,30%) var(--y,25%),var(--g1),var(--g2) 48%,var(--g3))}
.vp.dg .world{cursor:grabbing}
.it{position:absolute;margin:0}
.tx{max-width:30ch}
.tx b{display:block;font:500 12px/1.3 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.fr{font-size:12px;white-space:nowrap}
.ti{font:300 clamp(28px,4vw,44px)/1.05 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:-.02em;margin:0 0 10px}
.im .f{aspect-ratio:var(--ar);border:1px solid #111;display:grid;place-items:center;color:#555;background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(0,0,0,.14) 8px 9px)}
.im .f span{background:rgba(243,243,241,.85);padding:0 6px}
.im figcaption{font-size:12px;margin-top:6px}
.hint{position:absolute;right:14px;bottom:14px;z-index:3;pointer-events:none}
nav{position:fixed;z-index:5;left:24px;bottom:calc(26px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 48px)}
nav a{background:#fff;color:#111;font-size:12px;line-height:1;padding:5px 8px;text-decoration:none}
nav a:hover,nav a[aria-current="page"]{background:#111;color:#fff}
footer{padding:12px 2px 6px;font:300 22px/1 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:-.02em}
footer a{text-decoration:none}
@media (max-width:700px){.txt{background:rgba(232,232,230,.88);padding:10px 10px 4px;left:12px;width:calc(100% - 24px)}.logo{left:12px}.cr{bottom:56px}}
.panel img.ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.im img{display:block;box-sizing:border-box;width:100%;height:auto;aspect-ratio:var(--ar,auto);object-fit:cover;border:1px solid #111}