/* openWeb3 terminal. Colours, faces, scanlines, cursor and the boot intro are the
   h1-t3k.design ones (live-site/styles/main.css); the fonts load from the site's
   own /fonts folder, so this page adds no font bytes on-chain. */

@font-face{
  font-family:'Basenine';
  src:url('fonts/Basenine-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Basenine';
  src:url('fonts/Basenine-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Monogram';
  src:url('fonts/monogram.woff2') format('woff2');
  font-weight:normal;font-style:normal;font-display:block;
}

:root{
  --bg:#0d0f0b;
  --border2:#3a4530;
  --green:#39d353; --green-dim:#2a9f40;
  --amber:#c8a84b;
  --red:#e05c3a;
  --text:#d4e8c2; --muted:#8aa477; --dim:#6e855f;
  --mono:'Basenine','Courier New',Courier,monospace;
  --scanline:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.08) 2px,rgba(0,0,0,0.08) 4px);
  --line:1.8;
  --edge:clamp(16px,5vw,72px);
  --measure:72ch;
}

*{box-sizing:border-box}
html{
  background:var(--bg);color-scheme:dark;
  scrollbar-color:var(--border2) var(--bg);scrollbar-width:thin;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
body{
  margin:0;min-height:100dvh;background:var(--bg);color:var(--muted);
  font:400 0.9375rem/var(--line) var(--mono);letter-spacing:0.02em;
  font-synthesis:none;font-variant-ligatures:none;-webkit-font-smoothing:antialiased;
}
/* Scanlines and CRT vignette, as on every h1-t3k page */
body::before{
  content:'';position:fixed;inset:0;background:var(--scanline);
  pointer-events:none;z-index:100;opacity:0.5;
}
body::after{
  content:'';position:fixed;inset:0;
  background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,0.55) 100%);
  pointer-events:none;z-index:99;
}
::selection{background:var(--green);color:#000}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.cursor{
  display:inline-block;width:0.6em;height:1em;background:var(--green);
  vertical-align:text-bottom;animation:blink 1.1s step-end infinite;margin-left:3px;
}

a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.25em}
a:hover{color:var(--text)}
a:focus-visible,button:focus-visible{outline:1px dashed var(--green);outline-offset:4px}

/* ── The session ── */
#term{
  max-width:calc(var(--measure) + 2 * var(--edge));
  padding:56px var(--edge) 38vh;
}
.ln{white-space:pre-wrap;overflow-wrap:anywhere;text-wrap:pretty;min-height:calc(1em * var(--line))}
.ln.head,.ln.cmd{color:var(--text);margin-top:calc(1em * var(--line))}
.ln.head{font-weight:700}
.ln.head + .ln.head{margin-top:0}
.ln.dim{color:var(--dim)}
.ln.ok{color:var(--green)}
.ln.warn{color:var(--amber)}
.ln.err{color:var(--red)}
.ps{color:var(--green-dim)}

/* "label  value" pairs: the face is not fixed-width, so the key column is laid out */
.k{display:inline-block;min-width:14ch;margin-right:2ch}
.v{color:var(--text)}
.ln.dim .v{color:inherit}
.ln.help{display:flex}
.ln.help .k{flex:0 0 27ch;color:var(--text)}
.ln.help .v{flex:1;color:inherit}

/* A status row: label, dot leader, state. The leader is real full stops in the
   same face, clipped to the gap. */
.row{display:flex;align-items:baseline;gap:1ch}
.row .what{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.row .lead{flex:1 1 3ch;min-width:3ch;overflow:hidden;white-space:nowrap;color:var(--border2);user-select:none}
.row .lead::before{content:'........................................................................................................................'}
.row .st{white-space:nowrap;color:var(--dim)}
.row .st a{color:inherit;padding:0.35em 0.5ch;margin:0 -0.5ch}
.row[data-st=""] .lead,.row[data-st=""] .st{display:none}
.row[data-st="ok"] .st{color:var(--green)}
.row[data-st="fail"] .st{color:var(--red)}
.row[data-st="sign"] .st,.row[data-st="sent"] .st,.row[data-st="warn"] .st,
.row[data-st="unknown"] .st,.row[data-st="unsupported"] .st,.row[data-st="not found"] .st{color:var(--amber)}
/* Waiting on the person, in their wallet: the one place the cursor leaves the prompt */
.row[data-st="sign"] .st::after{
  content:'';display:inline-block;width:0.6em;height:1em;margin-left:1ch;
  background:var(--amber);vertical-align:text-bottom;animation:blink 1.1s step-end infinite;
}

/* ── Prompt and its completion candidates ── */
#prompt{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 1ch;margin-top:calc(1em * var(--line))}
#prompt[hidden]{display:none}
#ps{color:var(--green-dim);overflow-wrap:anywhere}
#prompt:focus-within #ps{color:var(--green)}
/* A question from the program reads as text; only the shell prompt is green.
   Its answer field follows the last word, wherever the question wraps. */
#prompt.question #ps,.q{color:var(--text)}
#prompt.question:not([hidden]){display:block}
#prompt.question #in{display:inline-block;width:44ch;max-width:100%;margin-left:1ch;vertical-align:baseline}
@supports (field-sizing:content){
  #prompt.question #in{width:auto;min-width:6ch;field-sizing:content}
}
#in{
  flex:1 1 14ch;min-width:10ch;margin:0;padding:0;border:0;outline:0;border-radius:0;
  background:none;color:var(--text);font:inherit;letter-spacing:inherit;
  caret-color:var(--green);caret-shape:block;
}
#opts{display:flex;flex-wrap:wrap;gap:0 3ch;min-height:calc(1em * var(--line))}
.opt{
  margin:0;padding:0;border:0;border-radius:0;background:none;cursor:pointer;
  color:var(--dim);font:inherit;letter-spacing:inherit;
  text-decoration:underline dotted var(--border2);text-underline-offset:0.3em;
}
.opt[hidden]{display:none}
.opt.next{color:var(--text)}
.opt:hover,.opt:focus-visible{color:var(--green);text-decoration-color:currentColor}
.opt:active{color:var(--text)}

/* ── A record to keep: selectable text, with copy and save ── */
.keep{margin:calc(1em * var(--line)) 0;padding:1ch 2ch;border:1px solid var(--border2)}
.keep pre{margin:0 0 1ch;font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
.keep .opt{margin-right:3ch}

/* ── Way back to the site: the nav monogram ── */
.home{
  position:absolute;top:12px;right:var(--edge);z-index:98;
  font:800 1.75rem/1 'Monogram',var(--mono);letter-spacing:-0.02em;
  color:var(--green-dim);text-decoration:none;
}
.home:hover{color:var(--green);text-shadow:0 0 14px rgba(57,211,83,0.3)}

/* ── Boot intro, ported from the home page (intro-cold-boot) ── */
#boot{position:fixed;inset:0;background:var(--bg);z-index:200;display:none}
#boot::before{
  content:'';position:absolute;inset:0;background:var(--scanline);
  pointer-events:none;opacity:0.5;
}
html.booting #boot,#boot.exit{display:block}
#boot.exit{opacity:0;transition:opacity 240ms linear}
html.booting #term,html.booting .home{visibility:hidden}

.boot-log{
  position:absolute;top:56px;left:0;right:0;
  max-width:calc(var(--measure) + 2 * var(--edge));padding:0 var(--edge);
}
.boot-log.wipe{opacity:0;transition:opacity 120ms linear}
.boot-log .row .st{opacity:0}
.boot-log .row.on .st{opacity:1}

.mono-stage{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
}
.mono-stage.on{opacity:1}
.monogram{
  font-family:'Monogram',var(--mono);font-weight:800;
  font-size:clamp(6rem,30vw,15rem);line-height:1;text-transform:lowercase;
  color:var(--green);opacity:0.12;position:relative;
}
/* Phosphor warm-up: stepped, not smooth */
.monogram.w1{opacity:0.42}
.monogram.w2{opacity:0.74}
.monogram.w3{opacity:1}
.monogram.glow{text-shadow:0 0 24px rgba(57,211,83,0.45),0 0 90px rgba(57,211,83,0.22)}
.sweep{
  position:absolute;left:-10%;right:-10%;top:-8%;height:3px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(57,211,83,0.7),transparent);
}
@keyframes sweep{from{transform:translateY(0);opacity:1}to{transform:translateY(120%);opacity:1}}
.sweep.run{animation:sweep 400ms linear forwards}
.skip-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  margin:0;padding:8px 12px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:0.8125rem;letter-spacing:0.12em;text-transform:lowercase;color:var(--dim);
}
.skip-hint:hover{color:var(--green)}

/* Touch: 16px input stops iOS zooming the page; candidates become 44px targets */
@media (pointer:coarse){
  #in{font-size:1rem}
  #opts{gap:0 1ch}
  .opt{min-height:44px;padding:0 1ch;display:inline-flex;align-items:center}
}
@media (max-width:480px){
  body{font-size:0.875rem}
  #term{padding-top:52px}
  .k{min-width:0}
  .ln.help{display:block}
  .ln.help .v{display:block;padding-left:2ch}
}
@media (prefers-reduced-motion:reduce){
  .cursor,.row[data-st="sign"] .st::after{animation:none}
}