:root {
  color-scheme: dark;
  --bg: #050508;
  --panel: rgba(11, 13, 20, 0.72);
  --ink: #f8f4f7;
  --muted: #8d8b99;
  --cyan: #74f7df;
  --pink: #ff5b93;
  --pink-soft: #ff9ec1;
  --edge: rgba(255, 255, 255, 0.1);
  --beam-distance: calc(50vw + 8px);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--bg); }

body {
  min-width: 280px;
  overflow: hidden;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

.app {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 58, 123, 0.055), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(80, 255, 226, 0.045), transparent 38%),
    #050508;
}

.app[data-user="darek"] { --beam-distance: calc(50vw + 8px); }
.app[data-user="marta"] { --beam-distance: calc(-50vw - 8px); }

.noise, .scanline, .particles { position: absolute; inset: 0; pointer-events: none; }

.noise {
  z-index: -1;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

.scanline {
  z-index: 6;
  opacity: .12;
  background: linear-gradient(to bottom, transparent 50%, rgba(255,255,255,.035) 50%);
  background-size: 100% 4px;
}

.scanline::after {
  content: "";
  position: absolute;
  inset: -30% 0 auto;
  height: 18%;
  background: linear-gradient(transparent, rgba(116, 247, 223, .035), transparent);
  animation: scan 8s linear infinite;
}

.particles i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--pink-soft);
  box-shadow: 0 0 9px currentColor;
  opacity: 0;
  animation: float 9s linear infinite;
}
.particles i:nth-child(1) { left: 9%; animation-delay: -1s; }
.particles i:nth-child(2) { left: 21%; animation-delay: -6s; animation-duration: 11s; }
.particles i:nth-child(3) { left: 34%; animation-delay: -3s; }
.particles i:nth-child(4) { left: 46%; animation-delay: -8s; animation-duration: 12s; }
.particles i:nth-child(5) { left: 58%; animation-delay: -4s; }
.particles i:nth-child(6) { left: 72%; animation-delay: -9s; animation-duration: 13s; }
.particles i:nth-child(7) { left: 84%; animation-delay: -2s; }
.particles i:nth-child(8) { left: 94%; animation-delay: -7s; animation-duration: 10s; }

.unsupported {
  min-height: 100%;
  display: grid;
  place-content: center;
  gap: 28px;
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-size: clamp(.72rem, 2.8vw, .9rem);
  letter-spacing: .14em;
}

.standby-mark {
  width: 72px;
  aspect-ratio: 1;
  margin: auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(116,247,223,.16);
  border-radius: 50%;
  animation: breathe 2.8s ease-in-out infinite;
}
.standby-mark::before, .standby-mark::after, .standby-mark span {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
}
.standby-mark::before { width: 24px; height: 24px; opacity: .45; }
.standby-mark::after { width: 42px; height: 42px; opacity: .2; }

.experience {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: max(24px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
}

.start-gate {
  position: fixed;
  z-index: 15;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  place-items: center;
  gap: 26px;
  padding: max(36px, env(safe-area-inset-top)) 24px max(36px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 48%, rgba(255,65,101,.11), transparent 25%),
    rgba(5,5,8,.97);
}
.start-gate-label {
  align-self: end;
  margin: 0;
  color: #777984;
  font-size: .57rem;
  letter-spacing: .2em;
}
.start-button {
  position: relative;
  width: clamp(118px, 34vw, 142px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,170,185,.68);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(255,255,255,.22), transparent 16%),
    radial-gradient(circle, #e33e61 0 34%, #a81f42 68%, #5d1026 100%);
  color: #fff7f9;
  font: 600 .78rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: .2em;
  text-indent: .2em;
  box-shadow:
    0 0 0 9px rgba(255,74,111,.035),
    0 0 32px rgba(255,58,99,.27),
    inset 0 0 22px rgba(255,205,215,.12),
    inset 0 -12px 20px rgba(53,0,17,.38);
  cursor: pointer;
  animation: startPulse 1.65s ease-in-out infinite;
}
.start-button::before, .start-button::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,78,117,.2);
  border-radius: 50%;
  pointer-events: none;
}
.start-button::before { inset: -18px; animation: startRing 1.65s ease-out infinite; }
.start-button::after { inset: -34px; animation: startRing 1.65s .55s ease-out infinite; }
.start-button:hover, .start-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 10px rgba(255,74,111,.06), 0 0 50px rgba(255,58,99,.42), inset 0 0 25px rgba(255,220,228,.18);
}
.start-button:active { scale: .96; }
.start-gate-copy { align-self: start; display: grid; gap: 8px; text-align: center; }
.start-gate-copy strong { color: var(--pink-soft); font-size: .62rem; font-weight: 500; letter-spacing: .18em; }
.start-gate-copy span { max-width: 250px; color: #777984; font: 400 .65rem/1.5 ui-sans-serif, system-ui, sans-serif; }
.start-gate.is-launching { animation: launchGate .48s ease-in forwards; }
.start-gate.is-launching .start-button { animation: launchButton .48s ease-in forwards; }

.identity { flex: 0 0 auto; text-align: center; }
.eyebrow { color: var(--muted); font-size: .59rem; letter-spacing: .2em; }
.identity h1 {
  margin: 11px 0 8px;
  font-size: clamp(2.35rem, 12vw, 4.4rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-indent: .18em;
  text-shadow: 0 0 25px rgba(255,255,255,.12);
}

.signal { height: 12px; display: flex; justify-content: center; align-items: end; gap: 3px; }
.signal i { width: 2px; height: 3px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); animation: signal 1.2s ease-in-out infinite; }
.signal i:nth-child(2) { height: 5px; animation-delay: .12s; }
.signal i:nth-child(3) { height: 8px; animation-delay: .24s; }
.signal i:nth-child(4) { height: 11px; animation-delay: .36s; }

.sequence { flex: 1; min-height: 0; display: grid; }
.connect-stage, .success-stage { grid-area: 1 / 1; min-height: 0; }
.connect-stage { display: flex; flex-direction: column; justify-content: center; padding: 2vh 0; }
.status-block { text-align: center; min-height: 74px; }
.status-label { margin: 0; color: var(--cyan); font-size: clamp(.72rem, 3.1vw, .96rem); letter-spacing: .14em; text-shadow: 0 0 14px rgba(116,247,223,.35); }
.waiting-label { margin: 13px 0 0; color: var(--muted); font-size: .61rem; letter-spacing: .17em; }
.waiting-label::after { content: ""; animation: dots 1.4s steps(4, end) infinite; }

.link-field { position: relative; height: min(34vh, 280px); width: calc(100% + 44px); margin-inline: -22px; overflow: hidden; }
.orbit {
  position: absolute;
  left: 50%; top: 50%;
  width: 110px; aspect-ratio: 1;
  translate: -50% -50%;
  display: grid; place-items: center;
  border: 1px solid rgba(116,247,223,.16);
  border-radius: 50%;
}
.orbit::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan), 0 0 28px rgba(116,247,223,.4); animation: core 1.8s ease-in-out infinite; }
.orbit i { position: absolute; border: 1px solid rgba(116,247,223,.09); border-radius: 50%; animation: ripple 2.8s ease-out infinite; }
.orbit i:nth-child(1) { inset: -20px; }
.orbit i:nth-child(2) { inset: -43px; animation-delay: .75s; }
.orbit i:nth-child(3) { inset: -68px; animation-delay: 1.5s; }

.beam { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(116,247,223,.12) 50%, transparent); }
.beam span {
  position: absolute; top: -1px; left: calc(50% - 7px);
  width: 14px; height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 18px var(--cyan), 0 0 32px var(--cyan);
  animation: beam var(--beam-speed, 2.4s) cubic-bezier(.4,0,.2,1) infinite;
}
.progress-region { width: min(100%, 520px); margin: 0 auto; padding: 0 4px; }
.progress-heading { margin-bottom: 9px; color: #777984; font-size: .52rem; letter-spacing: .14em; }
.dual-progress { display: grid; gap: 8px; }
.device-progress { transition: opacity .25s ease, filter .25s ease; }
.progress-meta { display: flex; justify-content: space-between; margin-bottom: 5px; color: #b5b4bd; font-size: .57rem; letter-spacing: .13em; }
.progress-track { height: 2px; overflow: hidden; background: rgba(255,255,255,.08); }
.progress-track span { display: block; width: 0; height: 100%; transition: width .3s ease-out; }
.device-progress-darek .progress-track span { background: linear-gradient(90deg, #4ba99b, var(--cyan)); box-shadow: 0 0 10px rgba(116,247,223,.45); }
.device-progress-marta .progress-track span { background: linear-gradient(90deg, #b3426b, var(--pink-soft)); box-shadow: 0 0 10px rgba(255,91,147,.4); }
.device-progress.is-offline { opacity: .32; filter: saturate(.35); }
.device-progress.is-complete { opacity: 1; filter: none; }
.device-progress-darek.is-complete .progress-meta { color: var(--cyan); }
.device-progress-marta.is-complete .progress-meta { color: var(--pink-soft); }
.terminal-log {
  height: min(43dvh, 340px);
  margin-top: 14px;
  padding: 9px 10px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(116,247,223,.2) transparent;
  border-left: 1px solid rgba(116,247,223,.3);
  background: linear-gradient(90deg, rgba(116,247,223,.035), transparent 80%);
  color: #d4d3da;
  font-size: clamp(.49rem, 2.05vw, .61rem);
  line-height: 1.52;
  letter-spacing: .02em;
}
.terminal-log::-webkit-scrollbar { width: 3px; }
.terminal-log::-webkit-scrollbar-thumb { background: rgba(116,247,223,.2); }
.terminal-log p {
  margin: 0;
  white-space: nowrap;
  opacity: .98;
  transition: opacity .25s ease, filter .25s ease;
  animation: logEntry .22s ease-out both;
}
.terminal-log p::before { content: "> "; color: var(--cyan); }
.terminal-log p b { display: inline-block; width: 54px; margin-right: 5px; color: #bec0c9; font-weight: 500; }
.terminal-log p em { color: #d4d3da; font-style: normal; }
.terminal-log p em::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: .9em;
  margin-left: 2px;
  background: rgba(116,247,223,.7);
  vertical-align: -.08em;
  animation: cursorBlink .65s steps(1) infinite;
}
.terminal-log p:not(:last-child) em::after,
.terminal-log p.is-old em::after,
.terminal-log p.is-instant em::after { display: none; }
.terminal-log p.log-ok b, .terminal-log p.log-ok::before { color: #8aebda; }
.terminal-log p.log-ok em { color: #d3e5e1; }
.terminal-log p.log-warn b, .terminal-log p.log-warn::before,
.terminal-log p.log-warning b, .terminal-log p.log-warning::before { color: #e1c47f; }
.terminal-log p.log-warn em, .terminal-log p.log-warning em { color: #ddd2ba; }
.terminal-log p.log-error b, .terminal-log p.log-error::before { color: #ef91aa; }
.terminal-log p.log-error em { color: #e8c3cd; }
.terminal-log p.log-info b, .terminal-log p.log-info::before { color: #a9c7ec; }
.terminal-log p.is-old { opacity: .52; filter: saturate(.72); animation: none; }
.log-spinner {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 7px;
  border: 1px solid rgba(116,247,223,.2);
  border-top-color: var(--cyan);
  border-radius: 50%;
  vertical-align: -1px;
  animation: spinner .55s linear infinite;
}
.terminal-log p:not(.is-loading) .log-spinner { display: none; }
.terminal-prompt {
  height: 18px;
  padding: 5px 10px 0;
  color: #5f616b;
  font-size: .52rem;
  letter-spacing: .04em;
}
.terminal-prompt span { color: rgba(116,247,223,.55); }
.terminal-prompt i {
  display: inline-block;
  width: 5px;
  height: 9px;
  margin-left: 5px;
  background: var(--cyan);
  vertical-align: -1px;
  animation: cursorBlink .8s steps(1) infinite;
}
.is-booting .status-block { min-height: 48px; }
.is-booting .link-field { height: 86px; transition: height .45s ease; }
.is-booting .orbit { width: 54px; }
.is-booting .orbit i:nth-child(1) { inset: -11px; }
.is-booting .orbit i:nth-child(2) { inset: -22px; }
.is-booting .orbit i:nth-child(3) { inset: -33px; }
.link-boost .beam span { --beam-speed: .42s; width: 30px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 30px var(--cyan), 0 0 55px var(--cyan); }
.connection-pulse .link-field { animation: linkConfirmation .7s ease-out; }

.success-stage { display: grid; align-content: center; justify-items: center; padding: 1vh 0; opacity: 0; transform: scale(.98); }
.success-stage.reveal { animation: reveal .8s ease-out forwards; }
.success-kicker { margin: 0 0 1.2vh; color: var(--cyan); font-size: clamp(.62rem,2.7vw,.78rem); letter-spacing: .17em; text-align: center; animation: flickerIn .7s ease-out both; }
.heart-wrap {
  position: relative;
  width: clamp(190px, 58vw, 250px);
  aspect-ratio: 1.12;
  display: grid;
  place-items: center;
}
.app[data-user="darek"] .heart-wrap {
  justify-self: end;
  transform: translateX(calc(50% + 22px));
}
.app[data-user="marta"] .heart-wrap {
  justify-self: start;
  transform: translateX(calc(-50% - 22px));
}
.heart { position: relative; z-index: 2; width: 100%; overflow: visible; filter: url(#heartGlow); animation: heartbeat 1.45s ease-in-out infinite; }
.heart path { fill: url(#heartGradient); transform-origin: center; }
.heart-rings, .heart-rings i { position: absolute; inset: 4%; border: 1px solid rgba(255,91,147,.2); border-radius: 50%; }
.heart-rings i { inset: 0; animation: heartRing 2.2s ease-out infinite; }
.heart-rings i:nth-child(2) { animation-delay: .7s; }
.heart-rings i:nth-child(3) { animation-delay: 1.4s; }
.heart-seam { position: absolute; z-index: 3; top: 10%; bottom: 2%; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.75), transparent); box-shadow: 0 0 8px #fff; opacity: .45; }
.app[data-user="darek"] .heart { clip-path: inset(0 49% 0 0); }
.app[data-user="marta"] .heart { clip-path: inset(0 0 0 49%); }

.final-copy { width: min(100%, 430px); text-align: center; }
.final-title { margin: 0 0 .7vh; font: 500 clamp(1.42rem,7vw,2.25rem)/1.1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .055em; }
.final-title span { color: var(--pink); text-shadow: 0 0 15px var(--pink); }
.pairing { margin: 0 0 1.7vh; color: var(--pink-soft); font-size: .62rem; letter-spacing: .18em; }
.final-copy dl { margin: 0 auto 1.8vh; padding: 10px 13px; border-block: 1px solid var(--edge); font-size: .58rem; letter-spacing: .08em; }
.final-copy dl div { display: flex; justify-content: space-between; padding: 4px 0; }
.final-copy dt { color: var(--muted); }
.final-copy dd { margin: 0; color: var(--cyan); }
.closing { margin: 0 0 5px; font: 400 clamp(.83rem,3.8vw,1rem)/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: .03em; }
.encryption { margin: 0; color: var(--muted); font: 400 .62rem/1.4 ui-sans-serif, system-ui, sans-serif; }
.final-log-slot { width: min(100%, 430px); margin-top: 1.5vh; }
.terminal-log.is-final-log {
  width: 100%;
  height: 68px;
  margin-top: 0;
  padding-block: 7px;
  overflow-y: auto;
  border-left-color: rgba(255,91,147,.28);
  background: linear-gradient(90deg, rgba(255,91,147,.035), transparent 80%);
  opacity: .95;
}

.logs-trigger {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: max(38px, calc(env(safe-area-inset-bottom) + 32px));
  translate: -50% 0;
  padding: 7px 13px;
  border: 1px solid rgba(116,247,223,.32);
  border-radius: 2px;
  background: rgba(5,8,11,.86);
  color: var(--cyan);
  font-size: .55rem;
  line-height: 1;
  letter-spacing: .15em;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(116,247,223,.08), inset 0 0 12px rgba(116,247,223,.035);
  cursor: pointer;
  animation: logsGlow 2.2s ease-in-out infinite;
}
.logs-trigger::before { content: "[ "; color: var(--pink-soft); }
.logs-trigger::after { content: " ]"; color: var(--pink-soft); }
.logs-trigger:hover, .logs-trigger:focus-visible {
  border-color: rgba(116,247,223,.7);
  outline: none;
  box-shadow: 0 0 22px rgba(116,247,223,.2), inset 0 0 14px rgba(116,247,223,.07);
}

.logs-modal {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  background: rgba(2,3,6,.82);
  backdrop-filter: blur(9px);
  animation: modalFade .22s ease-out both;
}
.logs-window {
  width: min(100%, 520px);
  height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
  max-height: none;
  padding: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(116,247,223,.28);
  background: rgba(5,7,11,.97);
  box-shadow: 0 0 45px rgba(116,247,223,.08);
}
.logs-window-header {
  flex: 0 0 auto;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  color: #646670;
  font-size: .52rem;
  letter-spacing: .12em;
}
.logs-window-header span, .logs-window-header strong { display: block; }
.logs-window-header strong { margin-top: 3px; color: var(--cyan); font-weight: 500; }
.logs-window-header button {
  padding: 2px;
  border: 0;
  background: transparent;
  color: var(--pink-soft);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.modal-terminal-log { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; margin: 0; overflow-y: auto; }
.modal-terminal-log p.is-old { opacity: .82; filter: none; }

footer { flex: 0 0 auto; display: flex; justify-content: space-between; color: #64636d; font-size: .53rem; letter-spacing: .12em; }
.live-dot::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); animation: blink 1.4s ease-in-out infinite; }

.debug-panel {
  position: fixed; z-index: 20; top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left));
  width: min(242px, calc(100vw - 16px)); padding: 9px 10px;
  border: 1px solid rgba(116,247,223,.24); background: rgba(3,5,8,.9); backdrop-filter: blur(8px);
  color: #bbb9c2; font-size: 9px; line-height: 1.35;
}
.debug-panel strong { display: block; margin-bottom: 5px; color: var(--cyan); letter-spacing: .14em; }
.debug-panel dl { margin: 0; }
.debug-panel dl div { display: flex; justify-content: space-between; gap: 12px; }
.debug-panel dt { color: #777681; }
.debug-panel dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

[hidden] { display: none !important; }
.is-pairing .waiting-label { opacity: 0; }
.is-pairing.is-paused .waiting-label,
.is-pairing.is-waiting-partner .waiting-label { opacity: 1; color: #d9bd83; }
.is-paused .status-label { color: #e1c47f; text-shadow: 0 0 14px rgba(225,196,127,.22); }
.is-paused .beam span,
.is-paused .orbit,
.is-paused .orbit::before,
.is-paused .orbit i { animation-play-state: paused; }
.is-paused .beam span { opacity: .22; }
.is-pairing .orbit { border-color: rgba(255,91,147,.35); box-shadow: 0 0 40px rgba(255,91,147,.06); }
.is-pairing .beam span { --beam-speed: .78s; background: var(--pink-soft); }
.fade-out { animation: fadeOut .5s ease-in forwards; }

@keyframes scan { to { transform: translateY(720%); } }
@keyframes float { 0% { transform: translateY(105vh); opacity: 0; } 12%,80% { opacity: .35; } 100% { transform: translateY(-10vh); opacity: 0; } }
@keyframes breathe { 50% { transform: scale(1.07); box-shadow: 0 0 30px rgba(116,247,223,.06); } }
@keyframes signal { 50% { opacity: .25; transform: scaleY(.55); } }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%,100% { content: "..."; } }
@keyframes core { 50% { transform: scale(.65); opacity: .6; } }
@keyframes ripple { from { transform: scale(.58); opacity: .7; } to { transform: scale(1.18); opacity: 0; } }
@keyframes beam { from { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { transform: translateX(var(--beam-distance)); opacity: 0; } }
@keyframes reveal { to { opacity: 1; transform: scale(1); } }
@keyframes flickerIn { 0%,30% { opacity: 0; } 35% { opacity: 1; } 45% { opacity: .25; } 100% { opacity: 1; } }
@keyframes heartbeat { 0%,35%,100% { scale: 1; } 12% { scale: 1.075; } 23% { scale: 1.025; } }
@keyframes heartRing { 0% { scale: .55; opacity: 0; } 15% { opacity: .45; } 100% { scale: 1.5; opacity: 0; } }
@keyframes blink { 50% { opacity: .2; } }
@keyframes fadeOut { to { opacity: 0; transform: scale(.98); } }
@keyframes logEntry { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } }
@keyframes logsGlow { 50% { color: #c4fff4; text-shadow: 0 0 9px var(--cyan); } }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spinner { to { rotate: 360deg; } }
@keyframes cursorBlink { 50% { opacity: 0; } }
@keyframes linkConfirmation { 0% { filter: brightness(1); } 30% { filter: brightness(2.4); } 100% { filter: brightness(1); } }
@keyframes startPulse { 50% { scale: 1.035; filter: brightness(1.12); } }
@keyframes startRing { from { scale: .78; opacity: .8; } to { scale: 1.28; opacity: 0; } }
@keyframes launchGate { to { opacity: 0; visibility: hidden; } }
@keyframes launchButton { to { scale: 1.35; filter: brightness(2); opacity: 0; } }

@media (max-height: 650px) {
  .experience { padding-top: max(16px, env(safe-area-inset-top)); }
  .identity h1 { font-size: 2rem; margin-block: 5px; }
  .link-field { height: 25vh; }
  .is-booting .link-field { height: 58px; }
  .heart-wrap { width: clamp(170px, 50vw, 205px); }
  .terminal-log { height: min(38dvh, 240px); padding-block: 6px; line-height: 1.4; }
  .terminal-log.is-final-log { height: 52px; }
  .final-copy dl { margin-bottom: 7px; padding-block: 6px; }
  .success-kicker, .pairing { margin-bottom: 7px; }
  .final-log-slot { margin-top: 6px; }
}

@media (min-width: 700px) {
  .experience { max-width: 680px; margin: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .particles, .scanline::after { display: none; }
}