/* Elsewhere — the terminal. Tokens first; worlds redefine tokens only. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #111914; --fg: #E2E8D8; --acc: #C8D99B; --dim: #7F8A7C; --link: #8FD1C4; --err: #F08A7A; --ok: #C8D99B;
  --sel: rgba(200,217,155,.18); --scan: rgba(0,0,0,.20); --glow: rgba(200,217,155,.07); --panel: transparent;
}
html[data-world="rain"] { --bg: #020704; --fg: #B8FFC9; --acc: #45FF78; --dim: #3E8A55; --link: #7FFFD4; --err: #FF5A5A; --ok: #45FF78; --sel: rgba(69,255,120,.16); --scan: rgba(0,0,0,.30); --glow: rgba(69,255,120,.06); --panel: rgba(2,7,4,.62); }
html[data-world="eden"] { --bg: #08171F; --fg: #FFF4D6; --acc: #FFD791; --dim: #9DB3AA; --link: #7FE0D9; --err: #FF7A6B; --ok: #9BE38A; --sel: rgba(255,215,145,.18); --scan: rgba(0,0,0,.10); --glow: rgba(255,215,145,.05); --panel: rgba(8,23,31,.58); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
html, body { overflow-x: hidden; }
body { position: relative; min-height: 100svh; background: var(--bg); color: var(--fg); font: 400 15px/1.55 "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; -webkit-font-smoothing: antialiased; transition: background-color .4s ease, color .3s ease; }
/* scanlines and a vignette are the only decoration */
body::before { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%), radial-gradient(ellipse at 30% 0%, var(--glow), transparent 60%); }
#fx { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }

.screen { position: relative; z-index: 3; max-width: 96ch; margin: 0 auto; padding: 28px 24px 140px; }
html[data-world="rain"] .screen, html[data-world="eden"] .screen { background: var(--panel); box-shadow: 0 0 60px 30px var(--panel); }
.line { white-space: pre-wrap; overflow-wrap: anywhere; }
.line:empty { min-height: 1.55em; }
.dim { color: var(--dim); } .acc { color: var(--acc); } .err { color: var(--err); } .ok { color: var(--ok); }
.banner { color: var(--acc); font-size: 11px; line-height: 1.05; letter-spacing: .02em; margin: 10px 0 14px; text-shadow: 0 0 12px var(--glow); white-space: pre; font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;   /* the block glyph is outside the self-hosted subset; blocks and spaces must share one face */ }
@media (min-width: 700px) { .banner { font-size: 13px; } }

/* anything lit is clickable */
.cmd { color: var(--link); cursor: pointer; text-decoration: none; border-bottom: 1px dotted transparent; }
.cmd:hover { border-bottom-color: var(--link); }
.tbl { display: grid; grid-template-columns: max-content max-content 1fr; column-gap: 2ch; row-gap: 2px; margin: 6px 0 10px; }
.tbl .tag { color: var(--dim); }
@media (max-width: 600px) { .tbl { grid-template-columns: max-content 1fr; } .tbl .tag { display: none; } }

.prompt { display: flex; align-items: baseline; margin-top: 6px; }
.ps { color: var(--acc); white-space: pre; }
.in { flex: 1; min-width: 8ch; padding: 0; border: 0; outline: none; background: transparent; color: var(--fg); font: inherit; caret-color: var(--acc); }
.in::selection { background: var(--sel); }
.in:read-only { opacity: .6; }
.cursor { display: inline-block; width: .6ch; height: 1.1em; margin-left: 1px; background: var(--acc); vertical-align: -.15em; animation: blink 1.1s steps(1) infinite; }
.prompt.focused .cursor { display: none; }
@keyframes blink { 50% { opacity: 0; } }

/* the two corners: the way back, and the switcher, both as terminal words */
.corner { position: fixed; z-index: 4; padding: 2px 6px; background: var(--bg); font-size: 12px; color: var(--dim); }
html[data-world="rain"] .corner, html[data-world="eden"] .corner { background: var(--panel); }
.back { top: 12px; left: 12px; color: var(--dim); text-decoration: none; border-bottom: 1px dotted transparent; }
.back:hover { color: var(--link); border-bottom-color: var(--link); }
.worlds { right: 12px; bottom: 12px; }
.worlds button { appearance: none; -webkit-appearance: none; padding: 0; border: 0; border-bottom: 1px dotted transparent; background: none; color: var(--link); font: inherit; cursor: pointer; }
.worlds button:hover { border-bottom-color: var(--link); }
.worlds button[aria-pressed="true"] { color: var(--acc); border-bottom-color: var(--acc); }

.boot .line { opacity: 0; animation: in .12s ease forwards; }
@keyframes in { to { opacity: 1; } }
.cmd:focus-visible, .worlds button:focus-visible, .back:focus-visible { outline: 1px solid var(--acc); outline-offset: 2px; border-bottom-color: transparent; }

@media (max-width: 700px) {
  .screen { padding: 44px 16px 120px; }
  .back { top: 8px; left: 8px; }
  .worlds { right: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .boot .line { animation: none; opacity: 1; }
  .cursor { animation: none; }
  body { transition: none; }
}