/* Blue-screen homepage, same language as the at.ao teaser.
   Boot (Python types on the beat, archive mounts) -> strobe -> home -> ENTER PORTFOLIO */
:root{
  --blue:#0000aa; --white:#ffffff; --gray:#aaaaaa;
  --num:#5050d7; --str:#bebeff; --dim:#8282e1; --hex:#1c1cbe; --hl:#1414bb;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--blue);color:var(--white);font-family:var(--mono);overflow:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.screen{position:fixed;inset:0;background:var(--blue);overflow:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-top:calc(env(safe-area-inset-top,0px) + 24px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px)}
[hidden]{display:none!important}
#hex{position:fixed;inset:0;color:var(--hex);font-size:clamp(10px,1.6vw,14px);line-height:1.5;white-space:pre;
  padding-left:max(16px,env(safe-area-inset-left,0px));will-change:transform;pointer-events:none;z-index:0}
.wrap{position:relative;max-width:1180px;margin:0 auto;height:100%;display:flex;flex-direction:column;gap:clamp(14px,2.4vh,28px);min-width:0}
.bar{align-self:center;background:var(--gray);color:var(--blue);font-weight:700;padding:2px 14px;font-size:clamp(12px,1.6vw,16px);white-space:nowrap}
.t{font-size:clamp(11.5px,1.9vw,18px);line-height:1.65}
#code{min-width:0}
.ln{display:flex;white-space:pre;padding:0 4px}
.ln.cur{background:var(--hl)}
.ln i{font-style:normal;color:var(--num);width:3ch;flex:none;text-align:right;margin-right:1.6ch}
.s{color:var(--str)} .c{color:var(--dim)} .k{color:var(--white);font-weight:700}
.cursor{display:inline-block;width:.6em;animation:blink .83s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#load{display:grid;gap:4px}
.prog{display:flex;gap:1.5ch;align-items:center;white-space:pre}
.track{flex:1;height:1.1em;border:2px solid var(--white);position:relative;max-width:520px}
.fill{position:absolute;top:2px;bottom:2px;left:2px;background:var(--white);width:0}
.ok{background:var(--white);color:var(--blue);padding:0 .5ch;font-weight:700}
#skip{margin-top:auto}
.small{color:var(--gray);font-size:clamp(10.5px,1.4vw,14px)}

/* home: phone = one column; wide = text left, image window right */
.home{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto auto;
  grid-template-areas:"bar" "stop" "name" "win" "dir" "foot";align-content:start}
.home .bar{grid-area:bar;justify-self:center}
.stop{grid-area:stop;display:grid;gap:2px}
h1{grid-area:name;margin:0;font-weight:800;line-height:.92;letter-spacing:-.02em;font-size:clamp(40px,min(12.5vw,10.5vh),150px)}
h1 span{display:block}
.win{grid-area:win;margin:0;border:2px solid var(--white);background:var(--blue);min-height:0;display:flex;flex-direction:column;align-self:center;max-width:100%}
.win .tb{background:var(--white);color:var(--blue);font-weight:700;display:flex;justify-content:space-between;gap:12px;padding:1px 8px;font-size:clamp(10px,1.3vw,13px);white-space:nowrap;overflow:hidden}
.win img{display:block;width:100%;height:auto;max-height:28vh;object-fit:cover;filter:grayscale(1) contrast(1.1);mix-blend-mode:screen;opacity:.92}
.win{background:var(--blue)}
.dir{grid-area:dir;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2ch;white-space:pre-wrap}
.dir span{color:var(--gray)}
.dir .note{grid-column:1/-1}
.foot{grid-area:foot;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between}
#go{font-weight:700;font-size:clamp(15px,2vw,22px);background:var(--white);color:var(--blue);padding:10px 18px}
#go:hover{background:var(--str)}
#go:focus-visible,.bar:focus-visible{outline:3px solid var(--white);outline-offset:4px}
@media (min-width:900px) and (min-aspect-ratio:1/1){
  .home{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr auto auto;column-gap:clamp(28px,4vw,64px);
    grid-template-areas:"bar bar" "stop win" "name win" "dir win" "foot foot"}
  .win{align-self:center}
  .win img{max-height:62vh}
  .dir{grid-template-columns:minmax(0,1fr);align-self:end}
}

/* strobe frames: blue/white swap, and RGB scanline stripes under white text */
.neg{--blue:#ffffff;--white:#0000aa;--gray:#0000aa;--num:#0000aa;--str:#0000aa;--dim:#0000aa;--hex:#d0d0ff;--hl:#d0d0ff}
.rgb{--blue:transparent;--hex:transparent;--hl:transparent;--num:#fff;--str:#fff;--dim:#fff;--gray:#fff}
body.rgb{background:repeating-linear-gradient(0deg,#ff0000 0 6px,#00ff00 6px 12px,#0000ff 12px 18px)}
.neg .bar,.neg .ok,.neg #go,.neg .win .tb{color:#fff}
.rgb .bar,.rgb .ok,.rgb #go,.rgb .win .tb{color:#00f;background:#fff}
.neg .win img{filter:grayscale(1) invert(1);mix-blend-mode:multiply}
@media (prefers-reduced-motion:reduce){.cursor{animation:none}}