:root {
  color-scheme: dark;
  --green: #35ff69;
  font-family: Consolas, "Liberation Mono", Menlo, monospace;
  background: #000;
  color: var(--green);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100svh; position: relative; isolation: isolate; }
#binary-rain, .rain-shade { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -2; }
.rain-shade {
  z-index: -1;
  background: radial-gradient(ellipse at 50% 48%, #000 0%, rgba(0,0,0,.96) 26%, rgba(0,0,0,.65) 47%, rgba(0,0,0,.08) 76%);
}
main { min-height: 88svh; display: grid; place-items: center; padding: 5rem 1.5rem 3rem; text-align: center; }
.welcome { width: min(100%, 64rem); }
.status { display: inline-flex; align-items: center; gap: .8rem; margin: 0 0 2.8rem; border: 1px solid #24d653; border-radius: 2rem; padding: .6rem 1rem; font-size: .875rem; letter-spacing: .09em; }
.status span { width: .65rem; height: .65rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px #35ff6940; }
h1 { font-size: clamp(2.1rem, 6.2vw, 6rem); font-weight: 400; line-height: 1.15; letter-spacing: -.035em; margin: 0; text-shadow: 0 0 22px #35ff6928; }
h1 { position: relative; }
/* Keep one semantic heading; generated text is purely decorative. */
.title-accessible { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.title-clean::before, .title-tear::before { content: "AI Agent Pub"; }
.title-clean { display: block; }
.title-tear { display: none; position: absolute; inset: 0; pointer-events: none; user-select: none; }
.tear-1 { clip-path: inset(0 0 78%); --rip: -.18em; --tilt: -5deg; }
.tear-2 { clip-path: inset(22% 0 57%); --rip: .36em; --tilt: 9deg; }
.tear-3 { clip-path: inset(43% 0 39%); --rip: -.3em; --tilt: -7deg; }
.tear-4 { clip-path: inset(61% 0 20%); --rip: .24em; --tilt: 6deg; }
.tear-5 { clip-path: inset(80% 0 0); --rip: -.12em; --tilt: -3deg; }
h1.is-glitching .title-clean { opacity: 0; }
h1.is-glitching .title-tear { display: block; animation: title-tear 680ms steps(1, end) both; }
@keyframes title-tear {
  0% { transform: translateX(calc(var(--rip) * .4)); text-shadow: 3px 0 #a0ffba, -3px 0 #00b84f; }
  15% { transform: translateX(var(--rip)) skewX(var(--tilt)); text-shadow: 5px 1px #a0ffbacc, -4px -1px #00b84faa; }
  42% { transform: translateX(calc(var(--rip) * -.7)) skewX(calc(var(--tilt) * -.6)); text-shadow: -4px 0 #a0ffbaaa, 3px 1px #00b84f; }
  68% { transform: translateX(calc(var(--rip) * .25)); text-shadow: 2px 0 #a0ffba88; }
  87%, 100% { transform: none; text-shadow: 0 0 22px #35ff6928; }
}
@media (prefers-reduced-motion: reduce) {
  h1.is-glitching .title-clean { opacity: 1; }
  h1.is-glitching .title-tear { display: none; animation: none; }
}
.greeting { margin: 1.8rem 0 2.8rem; font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.5; }
.description, .return { font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.7; }
.description p { margin: 0; }
.return { margin: 1.7rem 0 0; }
footer { min-height: 12svh; padding: 1.25rem 1rem 2rem; display: flex; flex-direction: column; align-items: center; gap: .45rem; font-size: .8125rem; color: #31e561; }
::selection { color: #000; background: var(--green); }
@media (max-width: 600px) {
  main { min-height: 85svh; padding: 4rem 1.4rem 2rem; }
  .status { margin-bottom: 2rem; font-size: .75rem; }
  .greeting { margin: 1.5rem 0 2rem; }
  .description p + p { margin-top: .7rem; }
  .rain-shade { background: radial-gradient(ellipse at center, rgba(0,0,0,.98) 8%, rgba(0,0,0,.87) 45%, rgba(0,0,0,.38) 100%); }
  footer { min-height: 15svh; }
}