/* Signals: yellow SIM-stock punchcards, tiled by context. Arianrhod is the icon. */
:root{
  --paper:#f2d322;
  --well:#e4c21a;
  --ink:#1a2438;
  --ink-dim:#4a4458;
  --navy:#1e3a5f;
  --scarlet:#c41e3a;
  --gold:#c9a227;
  --chip:#d4a017;
  --font:"Courier New", Courier, "Lucida Console", monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.45;overflow:hidden}
body{
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 11px, rgba(30,58,95,.08) 12px, transparent 13px),
    repeating-linear-gradient(0deg, transparent 0, transparent 11px, rgba(30,58,95,.06) 12px, transparent 13px);
}
button,input{font:inherit;border-radius:0;appearance:none}
button{cursor:pointer}
a{color:var(--navy)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

#titleFlash{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;background:var(--paper);
  padding:12px 16px calc(5.6rem + env(safe-area-inset-bottom,0px));cursor:pointer}
#titleCard{width:min(92vw,44rem);height:auto;image-rendering:pixelated;image-rendering:crisp-edges;
  box-shadow:6px 10px 0 rgba(30,58,95,.18);border:2px solid var(--navy)}
.title-skip{margin:0;letter-spacing:.2em;text-transform:uppercase;color:var(--navy);font-size:10px}
body:not(.booting) #titleFlash{display:none}

.site-mark{position:fixed;top:10px;left:14px;z-index:8;margin:0;
  letter-spacing:.16em;text-transform:uppercase;color:var(--scarlet);font-size:10px}
.site-mark a{color:inherit;text-decoration:none}
.site-mark a:hover,.site-mark a:focus-visible{text-decoration:underline}

.presents{position:fixed;top:10px;right:14px;z-index:8;margin:0;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);font-size:10px}

#hud{position:fixed;top:36px;left:14px;z-index:8;display:flex;gap:.75rem;align-items:flex-start;
  max-width:min(26rem,calc(100vw - 28px));pointer-events:none}
#hud .hud-copy{pointer-events:auto}
#arianrhodDoor{display:block;flex:none;pointer-events:auto;line-height:0}
#arianrhod{width:72px;height:72px;image-rendering:pixelated;image-rendering:crisp-edges;
  background:var(--well);border:2px solid var(--navy);pointer-events:none}
#jackForm{margin:0 0 6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
#coordRead{margin:0 0 8px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
#find{width:min(16rem,70vw);background:var(--paper);border:1.5px solid var(--navy);color:var(--ink);
  padding:.4rem .55rem;letter-spacing:.12em;text-transform:uppercase}
#find:focus{outline:2px solid var(--scarlet);outline-offset:1px}

#viewport{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab}
#viewport.drag{cursor:grabbing}
#plane{position:absolute;left:0;top:0;will-change:transform;transform-origin:0 0}
#threads{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:1;transform-origin:0 0}

.card{position:absolute;width:232px;min-height:156px;padding:1.15rem .85rem .7rem 3.4rem;
  background:
    linear-gradient(180deg, rgba(30,58,95,.06), transparent 1.2rem),
    repeating-linear-gradient(90deg, transparent 0, transparent 10px, rgba(30,58,95,.1) 11px, transparent 12px),
    var(--paper);
  border:2px solid var(--navy);color:var(--ink);z-index:2;
  clip-path:polygon(14px 0,100% 0,100% 40%,94% 45%,94% 58%,100% 63%,100% 100%,0 100%,0 14px);
  box-shadow:3px 3px 0 rgba(30,58,95,.16);cursor:pointer}
.card:before{content:"";position:absolute;top:0;left:0;width:14px;height:14px;
  background:linear-gradient(135deg,transparent 49%,var(--navy) 50%)}
.chip{position:absolute;top:22px;left:10px;width:34px;height:28px;display:grid;
  grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);gap:2px;
  padding:3px;background:var(--navy);pointer-events:none}
.chip i{display:block;background:var(--chip)}
.card.signal{border-color:var(--navy);box-shadow:3px 3px 0 rgba(30,58,95,.2),0 0 0 1px var(--gold)}
.card.pending{opacity:.72;border-style:dashed}
.card.dim{opacity:.28}
.card.on{z-index:6;outline:2px solid var(--navy);outline-offset:3px}
.card h2{margin:.15rem 0 .3rem;font-size:1rem;font-weight:400;letter-spacing:.04em}
.card .band{margin:0;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.card .year{margin:0;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}
.card canvas{display:block;width:100%;height:32px;margin-top:.45rem;image-rendering:pixelated}

#slip{position:fixed;right:12px;top:88px;bottom:72px;z-index:12;width:min(26rem,calc(100vw - 24px));
  overflow:auto;padding:1.1rem 1rem 1.2rem;background:
    linear-gradient(180deg, rgba(30,58,95,.06), transparent 2.1rem),
    repeating-linear-gradient(90deg, transparent 0, transparent 11px, rgba(30,58,95,.08) 12px, transparent 13px),
    var(--paper);
  border:2px solid var(--navy);color:var(--ink);
  clip-path:polygon(16px 0,100% 0,100% 38%,95% 43%,95% 57%,100% 62%,100% 100%,0 100%,0 16px);
  box-shadow:-5px 6px 0 rgba(30,58,95,.16)}
#slip[hidden]{display:none}
.punch-face{position:relative;margin:0 0 .7rem}
.punch-clip{position:absolute;top:0;right:0;width:1.15rem;height:1.15rem;
  background:linear-gradient(135deg, transparent 50%, rgba(30,58,95,.35) 50%)}
.punch-batch{margin:0 0 .25rem;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.punch-ruler{display:grid;grid-template-columns:repeat(40,minmax(0,1fr));
  font-size:7px;color:var(--navy);opacity:.55;margin:0 0 .15rem}
.punch-ruler span{text-align:center}
#slipBelt{display:block;width:100%;height:48px;image-rendering:pixelated;border:1px solid rgba(30,58,95,.35);background:var(--well)}
#slip .beat-label{margin:0 0 8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
#slip h2{margin:0 0 .4rem;font-size:1.35rem;font-weight:400}
.slip-meta{margin:0 0 .7rem;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.beat-text{margin:0 0 .7rem}
.slip-why{margin:0 0 .8rem;font-size:13px;color:var(--ink-dim)}
.slip-near{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.35rem}
.slip-near a{display:block;padding:.4rem .5rem;border:1px solid var(--navy);color:var(--ink);text-decoration:none;
  letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.slip-near a:hover{background:var(--navy);color:var(--paper)}
.slip-actions{display:flex;flex-wrap:wrap;gap:8px}
.slip-actions a,.slip-actions button{
  display:inline-block;padding:.5rem .75rem;border:2px solid var(--navy);
  background:var(--navy);color:var(--paper);text-decoration:none;
  letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.slip-actions button{background:transparent;color:var(--ink)}
.slip-actions a:hover,.slip-actions button:hover{background:var(--scarlet);border-color:var(--scarlet);color:#f4eede}

.hint{position:fixed;left:14px;bottom:58px;z-index:8;margin:0;max-width:70vw;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);pointer-events:none}

#dock{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;
  gap:14px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--well);border-top:2px solid var(--navy);font-size:11px;letter-spacing:.14em}
#dock a{color:var(--navy);text-decoration:none;text-transform:uppercase}
#dock a[aria-current="page"],#dock a:hover,#dock a:focus-visible{color:var(--scarlet)}
#dock .you-dock{color:var(--navy)}

@media(max-width:700px){
  #hud{top:34px}
  #arianrhod{width:56px;height:56px}
  #slip{left:8px;right:8px;top:auto;bottom:58px;width:auto;max-height:52vh}
  .card{width:216px}
  .presents{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important}
}