/* craftty's logo is the three lines the dashboard draws (craftkit frame.BrandTabs, the Title style: bold, text
   colour), as text in Ghostty's fonts: JetBrains Mono, and AdwaitaMono for the small capitals it lacks. Both are
   600/1000 wide, so the cells line up; line-height 1.32 (ascent 1020 + descent 300) lets ┃ meet ┏ and ┗. */
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-bold.woff2) format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-mono-bold-italic.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: block; }
@font-face { font-family: "Adwaita Mono SC"; src: url(fonts/adwaita-mono-bold-smallcaps.woff2) format("woff2"); font-weight: 700; font-display: block; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { background: #282C34; color: #D8D8D8; font-family: "JetBrains Mono", "Adwaita Mono SC", ui-monospace, Menlo, monospace; -webkit-font-smoothing: antialiased; }
main { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; }

/* sizes where a cell is a whole number of pixels (0.6em: 30, 21, 15px), so the grid lands on whole pixels */
.logo { margin: 0; font-size: 50px; font-weight: 700; }
@media (max-width: 900px) { .logo { font-size: 35px; } }
@media (max-width: 560px) { .logo { font-size: 25px; } }
.logo pre { position: relative; margin: 0; font: inherit; line-height: 1.32; text-align: left; cursor: default; }
/* ┏━━━━━━━━━━━━━━━┓ / ┃ … ┃ / ┗━━━━━━━━━━━━━━━┛: Ghostty draws these itself, not from a font, as lines through
   the middle of each cell (heavy = twice the light line, the font's 0.05em underline). So the box is drawn the
   same way: the pre is the 17x3 cell grid, and its lines run through the centres of the edge cells. */
.logo pre::before { content: ""; position: absolute; pointer-events: none; border: .1em solid currentColor;
  top: calc(.66em - .05em); bottom: calc(.66em - .05em); left: calc(.3em - .05em); right: calc(.3em - .05em); }

.tagline { margin: 2.5em 0 0; color: #949494; font-size: clamp(14px, 1.5vw, 18px); }
.status { margin: .9em 0 0; color: #767676; font-size: clamp(12px, 1.15vw, 14px); }

/* a letter that just changed settles in, rather than snapping */
.wordmark .l { display: inline-block; }
.wordmark .l.it { font-style: italic; }
.wordmark .l.settle { animation: settle 180ms ease-out; }
@keyframes settle { from { opacity: .35; transform: translateY(.04em); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wordmark .l.settle { animation: none; } }

/* standup: the little game behind "press any key" */
.hint { margin: 2.6em 0 0; color: #5E636D; font-size: 12px; letter-spacing: .02em; min-height: 1.4em; }
.game { display: none; min-height: 100%; align-items: center; justify-content: center; padding: 2rem 1rem; }
body.playing main { display: none; }
body.playing .game { display: flex; animation: arrive 220ms ease-out; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
.game pre { margin: 0; width: calc(74 * .6em); height: calc(13 * 1.6em); font: 400 15px/1.6 "JetBrains Mono", "Adwaita Mono SC", ui-monospace, monospace; color: #D8D8D8; white-space: pre; }
.game .b { font-weight: 700; }
.game .dim { color: #949494; } .game .faint { color: #767676; }
.game .acc { color: #8AB4E0; } .game .attn { color: #E5A85C; } .game .ok { color: #8CC79F; } .game .danger { color: #E08A8A; }
@media (max-width: 760px) { .game pre { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { body.playing .game { animation: none; } }

/* the turning word in the tagline */
.tagline .word { position: relative; display: inline-block; height: 1.3em; vertical-align: bottom; transition: width 480ms cubic-bezier(.2,.7,.2,1); }
.tagline .word > span { position: absolute; left: 0; bottom: 0; white-space: nowrap; color: #D8D8D8; }
.tagline .word-measure { visibility: hidden; }
.tagline .word-in { animation: word-in 520ms cubic-bezier(.2,.7,.2,1) both; }
.tagline .word-out { animation: word-out 520ms ease-in both; }
@keyframes word-in { from { opacity: 0; transform: translateY(.45em); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes word-out { from { opacity: 1; transform: none; filter: none; } to { opacity: 0; transform: translateY(-.45em); filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) { .tagline .word { width: auto !important; } .tagline .word > span { position: static; } }

/* the beta notification form */
.signup { margin: 3.2em 0 0; display: flex; flex-direction: column; align-items: center; }
.signup .status { margin: 0 0 1.1em; color: #B9B9B9; font-size: 14px; }
.notify { display: flex; gap: .5rem; width: 420px; max-width: 100%; }
.notify input { flex: 1; min-width: 0; font: 400 14px "JetBrains Mono", ui-monospace, monospace; color: #D8D8D8; background: #21252B;
  border: 1px solid #3A3F4A; border-radius: 6px; padding: .6rem .8rem; transition: border-color 160ms; }
.notify input::placeholder { color: #5E636D; }
.notify input:focus { outline: none; border-color: #8AB4E0; }
.notify button { font: 700 14px "JetBrains Mono", ui-monospace, monospace; color: #282C34; background: #8AB4E0; border: 0;
  border-radius: 6px; padding: .6rem 1rem; cursor: pointer; transition: filter 160ms; }
.notify button:hover { filter: brightness(1.08); }
.notify button:disabled { filter: saturate(.4); cursor: default; }
.notify-msg { margin: .9em 0 0; min-height: 1.4em; color: #767676; font-size: 12.5px; }
.notify-msg.ok { color: #8CC79F; } .notify-msg.attn { color: #E5A85C; }
.sr, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }