/* Shared look for every Inference Club page: font, palette, background, form controls, entrance motion. */

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(/fonts/instrument-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url(/fonts/instrument-sans-latin.woff2) format("woff2");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #09090b;
  --ink: #f4f3ef;
  --muted: #8f8e8b;
  --faint: #5c5b59;
  --line: rgba(255, 255, 255, 0.1);
  --cool: 196, 210, 255;
  --error: #ff8f7a;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--ink); color: var(--bg); }

/* Background: a dot field that reacts to the pointer, one soft light from above, fine grain. */
#field { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.glow { position: fixed; left: 50%; top: -42vh; width: 130vw; height: 84vh; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--cool), .16), rgba(var(--cool), .04) 55%, transparent);
  animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: .65; transform: translateX(-50%) scale(1.06); } }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.page { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: max(36px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom)); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
/* Logo: an open play outline that also reads as a ">" prompt, with one solid dot at the opening.
   It draws itself on load and replays when the brand is hovered (see icons.js). */
.brand .logo { width: 24px; height: 24px; stroke-width: 2; overflow: visible; filter: drop-shadow(0 0 10px rgba(var(--cool), .45)); }
.logo .ring { stroke-dasharray: 1; }
.logo .core { transform-box: view-box; transform-origin: 11.2px 12px; }
.logo.play .ring { animation: logo-draw .9s var(--ease) .1s both; }
.logo.play .core { animation: logo-core .7s linear(0, .25 6%, .7 13%, 1.05 21%, 1.16 27%, 1.11 34%, 1.01 44%, .97 52%, 1 64%, 1) .55s both; }
@keyframes logo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes logo-core { from { transform: translateX(-7px) scale(.3); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }

form { display: flex; flex-direction: column; gap: 10px; }
input { width: 100%; height: 50px; padding: 0 20px; border: 1px solid var(--line); border-radius: 14px; text-align: left;
  background: rgba(18,18,21,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink); font: inherit; font-size: 16px; outline: none; caret-color: var(--ink);
  transition: border-color .25s var(--ease), box-shadow .3s var(--ease), background .25s var(--ease); }
input::placeholder { color: var(--faint); }
input:hover { border-color: rgba(255,255,255,.16); }
input:focus { border-color: rgba(255,255,255,.38); background: rgba(24,24,28,.75); box-shadow: 0 0 0 4px rgba(var(--cool), .07), 0 0 28px -6px rgba(var(--cool), .25); }
input[aria-invalid] { border-color: var(--error); }
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 40px #141417 inset; }
.hp { position: absolute; left: -9999px; }

.submit { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; margin-top: 4px;
  border: 0; border-radius: 14px; background: var(--ink); color: var(--bg); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 10px 36px -10px rgba(var(--cool), .55);
  transition: transform .15s var(--ease), background .2s var(--ease), box-shadow .3s var(--ease); }
.submit::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%); animation: sweep 4.5s var(--ease) 2s infinite; }
@keyframes sweep { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
.submit .ic { width: 18px; height: 18px; }
@media (hover: hover) {
  .submit:hover { background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 12px 44px -8px rgba(var(--cool), .75); }
}
.submit:active { transform: scale(.98); }
.submit:focus-visible, .again:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.submit[aria-busy="true"] { opacity: .6; cursor: progress; }
.error { margin: 2px 0 0; font-size: 14px; color: var(--error); }
.error:empty { display: none; }
.fine { margin: 6px 0 0; font-size: 13px; color: var(--faint); }

.done { align-self: center; }
.done .check { display: block; width: 46px; height: 46px; margin: 0 auto 18px; stroke-width: 1.4; color: var(--ink); filter: drop-shadow(0 0 12px rgba(var(--cool), .6)); }
.done h2 { margin: 0; font-size: 24px; font-weight: 400; letter-spacing: -0.02em; outline: none; }
.done p { margin: 8px 0 0; font-size: 16px; color: var(--muted); }
.again { margin-top: 18px; padding: 0; border: 0; background: none; color: var(--faint); font: inherit; font-size: 14px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; transition: color .2s var(--ease); }
@media (hover: hover) { .again:hover { color: var(--ink); } }

footer { margin-top: 56px; font-size: 13px; color: var(--faint); }
footer a { color: var(--muted); text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.2); transition: color .2s var(--ease); }
@media (hover: hover) { footer a:hover { color: var(--ink); } }

/* entrance */
.in { opacity: 0; transform: translateY(10px); filter: blur(6px); animation: in 1s var(--ease) forwards; }
@keyframes in { to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .glow, .submit::after, .logo.play .ring, .logo.play .core { animation: none; }
  .in { animation: none; opacity: 1; transform: none; filter: none; }
}