:root { color-scheme: dark; font-family: Consolas, 'Courier New', monospace; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: #080a09; color: #c8f4c7; }
.terminal { position: relative; overflow: hidden; min-height: 100vh; min-height: 100dvh; padding: clamp(28px, 7vw, 96px); display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 48px; }
.output, .actions { position: relative; z-index: 1; }
.clouds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.clouds[hidden] { display: none; }
.cloud { position: absolute; left: 0; margin: 0; color: #668e70; opacity: .45; font: 16px/1.15 Consolas, 'Courier New', monospace; animation: drift 35s linear infinite; }
.cloud-one { top: 30%; animation-delay: -10s; }
.cloud-two { top: 48%; animation-duration: 47s; animation-delay: -32s; }
.cloud-three { top: 64%; animation-duration: 40s; animation-delay: -24s; }
.cloud-hippo { top: 39%; width: clamp(170px, 26vw, 260px); height: auto; opacity: 1; animation-duration: 52s; animation-delay: -18s; }
.output { max-width: 820px; font-size: clamp(18px, 2.4vw, 28px); line-height: 1.7; overflow-wrap: anywhere; white-space: pre-wrap; }
.prompt { color: #68ad75; }
.cursor { display: inline-block; width: .58em; height: 1.05em; vertical-align: -.12em; background: #a8e8a6; animation: blink 1s steps(1) infinite; }
button { font: inherit; font-size: 14px; letter-spacing: .02em; color: #c8f4c7; background: transparent; border: 1px solid #52735a; padding: 14px 18px; cursor: pointer; }
button span { margin-left: 28px; color: #84bf8d; }
button:hover, button:focus-visible { border-color: #c8f4c7; background: #18251b; }
button:focus-visible { outline: 2px solid #c8f4c7; outline-offset: 4px; }
button:disabled { opacity: .55; cursor: wait; }
.actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.pairing { flex-basis: 100%; font-size: 14px; line-height: 1.6; max-width: 320px; }
.pairing[hidden] { display: none; }
.pairing img { display: block; background: white; padding: 8px; margin-top: 10px; }
.pairing a { color: #c8f4c7; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes drift { from { transform: translateX(-180px); } to { transform: translateX(100vw); } }
@media (prefers-reduced-motion: reduce) {
  .cursor, .cloud { animation: none; }
  .cloud-one { left: 8%; }
  .cloud-two { left: 55%; }
  .cloud-three { left: 25%; }
  .cloud-hippo { left: 35%; }
}