/* PIXEL GAINS pages on lucarc.tech. Colours and frames are the app's own (theme "night"). */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* Pixelify Sans draws "fi" as one glyph that reads like "A" (finish -> Anish). The `font` shorthand resets
   ligature settings, so this has to win everywhere. */
*,*::before,*::after{font-variant-ligatures:none!important;font-feature-settings:'liga' 0,'dlig' 0,'clig' 0!important}
:root{
  --night:#0E0B1F; --dots:#221E4A; --win:#1B2766; --well:#101845; --panel:#142058; --bevel:#2E3F96;
  --mist:#A9B4E8; --text:#F2EBD9; --ink:#07061A;
  --gold:#FFD23F; --gold-shadow:#9A6A10; --title-shadow:#7A3B12;
  --coral:#FF6B4A; --coral-shadow:#8A2E1C; --cyan:#5CE1E6; --leaf:#7EE07A;
  --pixel:'Pixelify Sans',ui-monospace,monospace;
  --body:'Atkinson Hyperlegible',system-ui,sans-serif;
}
html{font-size:17px;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background-color:var(--night);background-image:radial-gradient(var(--dots) 1.5px,transparent 1.6px);background-size:22px 22px;color:var(--text);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%;display:block}
a{color:var(--cyan)}
a:hover{color:var(--text)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--ink)}

/* LucArc Labs bar, same structure as the rest of lucarc.tech */
.lab-nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1rem;height:60px;padding:0 2rem;background:rgba(7,6,26,.88);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
.lab-nav .home{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font:500 .72rem/1 'Chakra Petch',system-ui,sans-serif;letter-spacing:.18em}
.lab-nav .home svg{width:18px;height:18px}
.lab-nav .links{margin-left:auto;display:flex;gap:.25rem}
.lab-nav .links a{color:rgba(255,255,255,.6);text-decoration:none;font:500 .74rem/1 'Chakra Petch',system-ui,sans-serif;padding:.55rem .8rem;border-radius:100px}
.lab-nav .links a:hover,.lab-nav .links a[aria-current]{color:#fff;background:rgba(255,255,255,.07)}

/* the app's window: cream frame, ink outline, hard shadow, a title tab sitting on the top edge */
.win{position:relative;background:var(--win);border:4px solid var(--text);box-shadow:0 0 0 3px var(--ink),6px 6px 0 3px var(--ink);padding:1.6rem 1.25rem 1.25rem;margin-top:14px}
.win>.tab{position:absolute;top:-17px;left:14px;background:var(--ink);border:3px solid var(--text);padding:.15rem .6rem;font:700 .82rem/1.2 var(--pixel);letter-spacing:.1em;color:var(--gold);text-transform:uppercase}
.win>.tab.right{left:auto;right:14px;color:var(--text)}
.win.gold{border-color:var(--gold)}
.win.gold>.tab{border-color:var(--gold)}
.win.danger{border-color:var(--coral)}
.win.danger>.tab{border-color:var(--coral);color:var(--coral)}

/* buttons, like the app's Btn: chunky, bordered, with a darker lip underneath */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:.7rem 1.4rem;font:700 1rem/1 var(--pixel);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;color:var(--ink);background:var(--gold);border:3px solid var(--ink);box-shadow:0 5px 0 var(--gold-shadow),0 5px 0 3px var(--ink);transition:transform .06s,box-shadow .06s}
.btn:hover{color:var(--ink);filter:brightness(1.05)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--gold-shadow),0 1px 0 3px var(--ink)}
.btn.ghost{background:var(--well);color:var(--text);border-color:var(--text);box-shadow:0 5px 0 var(--ink)}
.btn.ghost:active{box-shadow:0 1px 0 var(--ink)}
.btn.danger{background:var(--coral);box-shadow:0 5px 0 var(--coral-shadow),0 5px 0 3px var(--ink)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}

.pixel{font-family:var(--pixel)}
.mist{color:var(--mist)}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}
.read{max-width:68ch;margin:0 auto;padding:0 1.25rem}

/* page heading used by privacy + delete */
.page-head{padding:3.5rem 0 1.5rem}
.page-head .crumb{font:500 .9rem/1 var(--pixel);color:var(--mist);text-decoration:none}
.page-head .crumb:hover{color:var(--gold)}
.page-head h1{font:700 clamp(2rem,6vw,3rem)/1.05 var(--pixel);color:var(--gold);text-shadow:4px 4px 0 var(--title-shadow);margin:.9rem 0 .6rem}
.page-head p{color:var(--mist)}

/* long reading pages */
.prose h2{font:700 1.35rem/1.25 var(--pixel);color:var(--gold);margin:2.6rem 0 .7rem}
.prose h3{font:600 1.05rem/1.3 var(--pixel);color:var(--text);margin:1.6rem 0 .4rem}
/* anchor links (#crews, #delete) land below the sticky bar */
.prose h2,.prose h3{scroll-margin-top:76px}
.prose p,.prose li{color:#DAD6EC}
.prose p{margin:0 0 1rem}
.prose ul{margin:0 0 1.1rem 1.2rem}
.prose li{margin:.3rem 0}
.prose li::marker{color:var(--gold)}
.prose strong{color:var(--text)}
.prose table{width:100%;border-collapse:collapse;margin:.4rem 0 1.4rem;font-size:.95rem}
.prose th,.prose td{text-align:left;vertical-align:top;padding:.6rem .7rem;border-bottom:2px solid var(--bevel)}
.prose th{font:600 .9rem/1.3 var(--pixel);color:var(--text);background:var(--well)}
.prose td{color:#DAD6EC}
.table-scroll{overflow-x:auto}
@media (max-width:640px){
  /* tables become one block per row on phones; each cell shows its column name */
  .prose table,.prose tbody,.prose tr,.prose td{display:block;width:100%}
  .prose thead{display:none}
  .prose tr{background:var(--well);border:3px solid var(--ink);padding:.5rem .8rem .7rem;margin:0 0 .8rem}
  .prose td{border:none;padding:.3rem 0}
  .prose td::before{content:attr(data-label);display:block;font:600 .78rem/1.3 var(--pixel);letter-spacing:.06em;color:var(--mist)}
}

footer.pg-foot{margin-top:4rem;padding:1.6rem 1.25rem 2.2rem;border-top:3px solid var(--ink);background:rgba(7,6,26,.6);color:var(--mist);font-size:.92rem}
footer.pg-foot .row{max-width:1080px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center}
footer.pg-foot a{color:var(--mist)}
footer.pg-foot a:hover{color:var(--gold)}
footer.pg-foot .by{margin-right:auto}

@media (max-width:640px){
  html{font-size:16px}
  .lab-nav{padding:0 1rem}
  .lab-nav .links a{padding:.5rem .55rem}
  .win{padding:1.5rem 1rem 1rem}
}