/* Mind, Eye, and Motion. Fonts and night tokens copied from intriligator.com (assets/site.css);
   the font files sit in fonts/ so the page works from any folder. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/newsreader.woff2) format("woff2")}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/archivo-narrow.woff2) format("woff2")}

:root{
  --paper:#0B0817;--raised:#150F26;--wash:#1C1432;
  --ink:#EEE8F7;--body:#D3CBE3;--quiet:#A398BA;--rule:#2E2245;
  --violet:#B39BFB;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --label:"Archivo Narrow","Arial Narrow",Arial,sans-serif;
  /* the 1998 frame colors: blue while running, purple while drawing or showing credits */
  --frame-run:rgb(40,40,90);--frame-alt:rgb(80,20,80);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--body);font:400 17px/1.55 var(--serif);font-optical-sizing:auto;overflow-x:hidden}
a{color:var(--violet);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:3px}

.page{max-width:1000px;margin:0 auto;padding:28px 28px 40px}
@media (max-width:600px){.page{padding:18px 16px 32px}body{font-size:16.5px}}

.intro{margin:0 auto 18px;max-width:40rem;text-align:center}
.intro h1{margin:0 0 6px;color:var(--ink);font:400 clamp(30px,4vw,44px)/1.1 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.lede{margin:0;color:var(--body);font-size:clamp(16.5px,1.6vw,19px);line-height:1.5;text-wrap:pretty}

/* the stage: the dot field, framed by a thin ring in the 1998 frame color */
.stage{position:relative;width:fit-content;max-width:100%;margin:0 auto;border-radius:6px;overflow:hidden;background:#000;
  box-shadow:0 0 0 2px var(--frame-run),0 24px 60px -30px rgba(0,0,0,.9);transition:box-shadow .3s ease}
.stage[data-mode="draw"],.stage[data-mode="info"]{box-shadow:0 0 0 2px var(--frame-alt),0 24px 60px -30px rgba(0,0,0,.9)}
#mem{display:block;max-width:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.error{color:#ff8a80;margin:8px 0 0;text-align:center;font:500 15px/1.4 var(--label)}
.error:empty{display:none}

/* the 1998 credit card: its text, over the cycling color pattern drawn by mem.js */
.credit-card{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;container-type:size;opacity:0}
.credit-card[hidden]{display:none}
.card{text-align:center;padding:4cqh 6cqw;border-radius:10px;background:rgba(11,8,23,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--ink);max-width:88cqw}
.card p{margin:0}
.card .by{font:400 clamp(20px,7.5cqw,46px)/1.1 var(--serif);letter-spacing:-.01em;margin-bottom:1.2cqh}
.card .mail{font:500 clamp(11px,2.6cqw,16px)/1.5 var(--label);color:var(--quiet)}
.card .lib{font:400 clamp(13px,3.2cqw,20px)/1.35 var(--serif);margin-top:2.4cqh}
.card .year{font:500 clamp(11px,2.4cqw,15px)/1.5 var(--label);color:var(--quiet);margin-top:1.6cqh}
.card .go{font:600 clamp(11px,2.4cqw,14px)/1.4 var(--label);letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin-top:3cqh}

/* controls under the stage: speed and picture set; brush and Done while drawing */
.controls{display:flex;justify-content:center;margin:20px auto 0}
.run-controls,.draw-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px}
.draw-controls{display:none}
.controls.drawing .run-controls{display:none}
.controls.drawing .draw-controls{display:flex}
.field{display:flex;align-items:center;gap:10px}
.field-label,.draw-hint{font:500 15px/1 var(--label);color:var(--quiet);letter-spacing:.02em}

.seg{display:inline-flex;padding:3px;gap:2px;border-radius:999px;background:var(--raised);border:1px solid var(--rule)}
.seg button{appearance:none;border:0;margin:0;background:transparent;color:var(--body);cursor:pointer;
  font:500 15.5px/1 var(--label);min-width:40px;min-height:36px;padding:0 12px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease}
.seg button:hover{color:var(--ink);background:var(--wash)}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--paper)}
.seg-wide button{padding:0 16px}
.seg .dot{display:block;width:var(--d);height:var(--d);border-radius:50%;background:currentColor}

.done{appearance:none;cursor:pointer;font:600 15.5px/1 var(--label);letter-spacing:.02em;color:var(--paper);background:var(--violet);
  border:0;border-radius:999px;min-height:40px;padding:0 22px}
.done:hover{background:var(--ink)}

.foot{margin:30px auto 0;max-width:40rem;text-align:center;font:500 14.5px/1.5 var(--label);color:var(--quiet)}
.foot p{margin:0 0 6px}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px}
.linkish{appearance:none;border:0;background:none;padding:0;cursor:pointer;font:inherit;color:var(--quiet);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.linkish:hover{color:var(--violet)}

@media (max-width:600px){
  .controls{margin-top:16px}
  .run-controls{gap:12px}
  .seg-wide button{padding:0 14px}
}
@media (prefers-reduced-motion:reduce){.stage,.seg button{transition:none}}