:root{--bg:#000;--fg:#fff;--dim:#aaa;--off:#767676;--yellow:#ff5;--green:#5f5;--cyan:#5ff;--line:2px;--gutter:16px;--width:1200px;--mono:ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"DejaVu Sans Mono",Menlo,monospace}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--fg);font:16px/1.5 var(--mono)}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bar{background:var(--fg);color:var(--bg);padding:.25em max(var(--gutter),calc((100% - var(--width))/2 + var(--gutter)))}
.logo{margin:0;font-size:1.25rem;line-height:1.5;font-weight:700}
.logo a{text-decoration:none}
.logo a:focus-visible{outline:var(--line) solid var(--bg);outline-offset:2px}
main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5em 2ch;max-width:var(--width);margin:0 auto;padding:clamp(2.5em,8vh,5em) var(--gutter)}
.box{--accent:var(--fg);position:relative;display:flex;flex-direction:column;gap:1em;min-width:0;border:var(--line) solid var(--accent);padding:1.75em 2ch 1.5em}
.box h2{position:absolute;top:calc(var(--line)/-2);left:1.5ch;transform:translateY(-50%);margin:0;padding:0 1ch;background:var(--bg);color:var(--accent);font-size:1rem;line-height:1.2;text-transform:lowercase}
.box p{margin:0}
.meta,.status{color:var(--dim)}
.status{overflow-wrap:anywhere}
.status:empty{display:none}
.keys{display:flex;flex-wrap:wrap;gap:.5em 2ch;margin-top:auto;padding-top:.5em}
.key{color:var(--accent);text-decoration:none;white-space:nowrap}
a.key:hover,button.key:enabled:hover,.key:focus-visible{background:var(--accent);color:var(--bg);outline:none}
.key.off,.key:disabled{color:var(--off);cursor:not-allowed}
.craftwork{--accent:var(--yellow);--line:4px;border-style:double;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center;gap:2em 4ch;padding:2.5em 3ch}
.craftwork h2{background:var(--accent);color:var(--bg)}
.pitch{display:flex;flex-direction:column;align-items:center;gap:1em;min-width:0;text-align:center}
.pitch .keys{margin-top:0;justify-content:center}
.screen{margin:0;width:100%;max-width:400px;border:2px solid var(--accent);background:#071821}
.crest{display:block;width:100%;height:auto}
.screen figcaption{display:flex;justify-content:flex-end;padding:.25em 1ch;border-top:2px solid var(--accent);background:var(--bg)}
.key.quiet{color:var(--dim)}
.recover{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.5em 2ch}
.recover input{width:min(28ch,100%);padding:0 .5ch;border:0;border-bottom:2px solid var(--dim);background:transparent;color:var(--fg);font:inherit}
.recover input:focus-visible{outline:none;border-bottom-color:var(--accent)}
.trailer{min-width:0;display:grid;place-items:center;aspect-ratio:16/9;border:2px dashed var(--off)}
.trailer iframe{place-self:stretch;width:100%;height:100%;border:0}
.trailer p{color:var(--off)}
.trailer:has(iframe){border:2px solid var(--accent)}
.hirari{--accent:var(--green)}
.skunkworks{--accent:var(--cyan)}
.butterfly{text-transform:none}
.lost{grid-column:1/-1;max-width:40ch}
@media(max-width:860px){main{grid-template-columns:minmax(0,1fr)}.craftwork{grid-template-columns:minmax(0,1fr);padding:2em 2ch}.screen{max-width:300px}}
@media(forced-colors:active){.key:focus-visible{outline:var(--line) solid}}