/* ==========================================================================
   samisee.design, TERMINAL, snake, toasts and the sound toggle.
   The terminal reads like the boot log: same prompt, same mono, same colours.
   ========================================================================== */

#w-terminal { width: 580px; height: 400px; }
.term { padding: 14px 18px 18px; font: 400 var(--text-body)/1.6 var(--font-mono); color: var(--os-ink); cursor: text; }
.term__out > div { white-space: pre-wrap; overflow-wrap: anywhere; }
.term__out b { font-weight: 500; color: var(--os-accent); }
.term__p { color: var(--os-accent); user-select: none; }
.term__err { color: var(--os-accent-3); }
.term__hint { color: var(--os-ink-dim); }
.term__row { display: flex; gap: 1ch; align-items: baseline; }
.term__in {
  flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none;
  font: inherit; color: var(--os-ink); caret-color: var(--os-accent);
}
.term__in[readonly] { opacity: .4; }

.snake { display: block; margin: 8px 0; width: 240px; height: 160px; border-radius: 8px; image-rendering: pixelated; box-shadow: inset 0 0 0 1px var(--os-border), 0 0 0 1px var(--os-border); }

/* ---- toasts: one glass pill under the menubar ---- */
.toast {
  position: fixed; z-index: var(--z-toast); top: 46px; left: 50%; translate: -50% -10px;
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; --lg-r: 999px;
  font: 500 var(--text-body)/1 var(--font-body); color: var(--os-ink);
  opacity: 0; pointer-events: none;
  transition: opacity 260ms var(--ease-standard), translate 260ms var(--ease-enter);
}
.toast.is-on { opacity: 1; translate: -50% 0; }
.toast__g { color: var(--os-accent); }

/* ---- sound toggle in the menubar: off shows a cross, on shows the waves ---- */
.menubar__sound { display: grid; place-items: center; color: inherit; }
.menubar__sound:hover { color: var(--os-ink); }
.menubar__sound .sound__on { display: none; }
.menubar__sound[aria-pressed="true"] .sound__on { display: inline; }
.menubar__sound[aria-pressed="true"] .sound__off { display: none; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 200ms linear; translate: -50% 0; }
}