:root {
  color-scheme:dark;
  --paper:#151918;
  --panel:#1d2422;
  --text:#f2ebda;
  --muted:#b5bbae;
  --line:#4e5750;
  --amber:#f5c16c;
  color:var(--text);
  background:var(--paper);
  font:100%/1.5 system-ui,sans-serif;
}
* {box-sizing:border-box}
body {margin:0}
a {color:inherit;text-underline-offset:.25em}
:focus-visible {outline:3px solid var(--amber);outline-offset:3px}
.skip {position:absolute;left:1rem;top:-5rem;background:var(--paper);padding:.65rem;z-index:2}
.skip:focus {top:.5rem}
header,main {width:min(92%,90rem);margin:auto}
header,header nav,.brand,.transport,.directory-title,#products a {display:flex;align-items:center}
header {justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--line)}
header nav {gap:clamp(.8rem,3vw,2rem)}
header a,.transport a {display:inline-flex;align-items:center;min-height:44px}
.brand {gap:.65rem;font-weight:700;text-decoration:none}
.brand img {background:var(--amber);padding:3px;image-rendering:pixelated}
main {max-width:68rem;padding:clamp(2rem,7vw,7rem) 0}
.projection {background:#0c100f;border:1px solid var(--line);padding:clamp(6px,1vw,12px);border-radius:6px}
video {width:100%;height:auto;display:block;aspect-ratio:16/9;background:#111714;image-rendering:auto}
.transport {gap:1rem;padding:.4rem .35rem 0;color:var(--muted);font: .85rem ui-monospace,monospace}
.transport a:first-of-type {margin-left:auto}
.play {background:var(--amber);color:#21190d;border:0;border-radius:2px;font:600 .9rem system-ui;padding:.6rem 1rem;min-height:44px;cursor:pointer}
.directory-title {align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:2px solid var(--amber)}
h1 {font:400 clamp(2rem,4vw,4rem)/1 Georgia,serif;letter-spacing:-.045em;margin:0}
.directory-title span {font:.8rem ui-monospace,monospace;color:var(--muted)}
ul {list-style:none;padding:0;margin:0}
li {border-bottom:1px solid var(--line)}
#products a {justify-content:space-between;gap:1rem;padding:1rem .2rem;min-height:48px;text-decoration:none;font-size:clamp(1rem,1.5vw,1.3rem)}
#products a i {color:var(--amber);font-style:normal}
#products a:hover,#products a:focus-visible {background:var(--panel);color:var(--amber);text-decoration:underline}
@media(max-width:850px){main{grid-template-columns:1fr;gap:2rem;padding-top:1.5rem}.projection{width:100%}}
@media(max-width:420px){header{flex-wrap:wrap;gap:0 .75rem}.brand{font-size:.92rem}}

.screen {position:relative;}
#products {display:none;position:absolute;inset:0;overflow:auto;background:var(--panel);padding:clamp(1rem,3vw,3rem);}
#products:target,#roadmap:target #products {display:block;}
.screen:has(#products:target) video,#roadmap:target video {visibility:hidden;}
.projection:has(#products:target) .play,.projection:has(#products:target) .duration,
.projection:has(#roadmap:target) .play,.projection:has(#roadmap:target) .duration {display:none;}
@media(max-width:620px){
  .screen:has(#products:target),#roadmap:target {min-height:23rem;}
  #products a {padding:.6rem .2rem;}
}
.future-view {display:none;margin:0;position:absolute;inset:0;background:#151918}
.future-view:target {display:block}
.future-view img {width:100%;height:100%;object-fit:contain;display:block}
.projection:has(#future:target) .play,.projection:has(#future:target) .duration {display:none}
.screen:has(#future:target) video {visibility:hidden}
.transport a {min-height:44px;padding-inline:.4rem}
.projection:has(#future:target) a[href="#future"],.projection:has(#products:target) .transport a[href="#products"],.projection:target a[href="#skyline"] {color:var(--route);text-decoration-thickness:2px}
.transport a[aria-current="location"] {color:var(--route);text-decoration-thickness:2px}