:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  background: #020304;
  color: #eef7f8;
  --cyan: #16d9f4;
  --cyan-soft: #87f3ff;
  --line: rgba(150, 226, 236, .11);
  --energy: 0;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; }
body { min-height: 100vh; min-height: 100svh; background: #020304; }
button, input { font: inherit; }
button { -webkit-user-select: none; user-select: none; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 43%, rgba(9,43,49,.34), transparent 42%), radial-gradient(ellipse at 50% 110%, rgba(8,104,116,.08), transparent 45%), linear-gradient(180deg,#050708 0%,#020304 42%,#010202 100%); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .24; 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ambient::before,.ambient::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent,var(--line) 28%,var(--line) 72%,transparent); }
.ambient::before { left: max(18px,calc(50% - 320px)); }.ambient::after { right: max(18px,calc(50% - 320px)); }
.ambient i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); opacity: .2; }
.ambient i:nth-child(1) { left: 18%; top: 21%; }.ambient i:nth-child(2) { right: 13%; top: 67%; }.ambient i:nth-child(3) { left: 27%; bottom: 9%; }
body[data-state="thinking"] .ambient i { animation: flicker 1.5s ease-in-out infinite alternate; }
body[data-state="speaking"] .ambient i { opacity: calc(.16 + var(--energy) * .55); }
.shell { isolation: isolate; width: min(100%,680px); min-height: 100vh; min-height: 100svh; margin: auto; padding: max(18px,env(safe-area-inset-top)) 22px max(18px,env(safe-area-inset-bottom)); display: flex; flex-direction: column; }
.topbar { height: 48px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; }.brand-sigil { width: 22px; height: 22px; padding: 5px; border: 1px solid rgba(118,231,244,.24); border-radius: 7px; transform: rotate(45deg); }
.brand-sigil i { display: block; width: 100%; height: 100%; border: 1px solid var(--cyan); border-left-color: transparent; border-radius: 50%; box-shadow: 0 0 8px rgba(22,217,244,.5); }
.brand div { display: flex; flex-direction: column; gap: 2px; }.brand strong { color: #d9e7e9; font-size: .67rem; font-weight: 600; letter-spacing: .22em; }.brand small { color: #38545a; font-size: .42rem; letter-spacing: .2em; }
.connection { display: flex; align-items: center; gap: 7px; color: #4b5e62; font-size: .52rem; letter-spacing: .16em; }.connection i { width: 5px; height: 5px; border-radius: 50%; background: #4e5d60; }.connection.online { color: #72c5cf; }.connection.online i { background: var(--cyan); box-shadow: 0 0 9px rgba(22,217,244,.85); }
.voice-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.presence-stage { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1vh 0 2vh; }
.state-code { width: min(76vw,322px); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; color: #426067; font-size: .48rem; letter-spacing: .25em; }.state-code i { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,rgba(37,207,227,.34),transparent); }
.presence { width: clamp(245px,69vw,350px); aspect-ratio: 1; position: relative; padding: 0; border: 0; border-radius: 27%; background: transparent; cursor: pointer; overflow: visible; filter: drop-shadow(0 24px 46px rgba(0,0,0,.72)); transition: transform .22s ease,filter .35s ease; }
.presence:active { transform: scale(.975); }.presence:disabled { cursor: default; opacity: .58; }
.presence-frame { position: absolute; inset: 7%; border-radius: 23%; overflow: hidden; background: #020303; box-shadow: 0 0 0 1px rgba(157,229,238,.14),inset 0 0 32px rgba(0,0,0,.82),0 0 48px rgba(0,195,222,.06); }
.presence-frame::before { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -40px 70px rgba(0,0,0,.36); pointer-events: none; }
.presence-frame::after { content: ""; position: absolute; z-index: 3; inset: 0; opacity: calc(.08 + var(--energy) * .19); background: radial-gradient(circle at 59% 43%,rgba(49,225,247,.42),transparent 4%,transparent 35%); mix-blend-mode: screen; pointer-events: none; }
.presence-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.015); filter: brightness(calc(.78 + var(--energy) * .22)) contrast(1.08) saturate(.9); transition: filter .25s ease,transform .5s ease; }
.scan { position: absolute; z-index: 4; left: 12%; right: 12%; top: 18%; height: 1px; opacity: 0; background: linear-gradient(90deg,transparent,rgba(93,238,255,.65),transparent); box-shadow: 0 0 12px rgba(22,217,244,.45); }
.pulse-node { position: absolute; z-index: 5; right: 14%; bottom: 15%; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan-soft); box-shadow: 0 0 11px var(--cyan); opacity: .34; }
.field { position: absolute; border: 1px solid rgba(44,206,226,.14); border-radius: 28%; pointer-events: none; }.field-a { inset: 2%; }.field-b { inset: -3%; border-color: rgba(94,195,208,.07); }
.field::before,.field::after { content: ""; position: absolute; width: 11px; height: 11px; border-color: rgba(65,221,239,.42); }.field::before { left: -1px; top: -1px; border-left: 1px solid; border-top: 1px solid; border-radius: 7px 0 0; }.field::after { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; border-radius: 0 0 7px; }
body[data-state="listening"] .presence { filter: drop-shadow(0 24px 50px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(22,217,244,.2)); } body[data-state="listening"] .presence-frame { box-shadow: 0 0 0 1px rgba(102,236,252,.28),inset 0 0 35px rgba(0,0,0,.7),0 0 44px rgba(22,217,244,.13); }
body[data-state="listening"] .field-a { animation: breathe 1.7s ease-in-out infinite; } body[data-state="listening"] .pulse-node { opacity: calc(.42 + var(--energy) * .58); transform: scale(calc(1 + var(--energy) * 1.8)); }
body[data-state="thinking"] .presence-frame img { transform: scale(1.035); filter: brightness(.9) contrast(1.12) saturate(1.05); } body[data-state="thinking"] .scan { opacity: .6; animation: scan 2s ease-in-out infinite; } body[data-state="thinking"] .field-a { animation: thinkField 2.4s ease-in-out infinite; }
body[data-state="speaking"] .presence { filter: drop-shadow(0 24px 50px rgba(0,0,0,.72)) drop-shadow(0 0 calc(12px + var(--energy) * 28px) rgba(22,217,244,.24)); } body[data-state="speaking"] .presence-frame img { filter: brightness(calc(.83 + var(--energy) * .32)) contrast(1.1) saturate(1.04); } body[data-state="speaking"] .field-a { transform: scale(calc(1 + var(--energy) * .018)); border-color: rgba(58,222,242,calc(.14 + var(--energy) * .26)); }
.voice-copy { margin-top: 29px; text-align: center; }.status { min-height: 30px; margin: 0; color: #e5edef; font-size: clamp(1.08rem,4.4vw,1.38rem); font-weight: 420; letter-spacing: .015em; text-shadow: 0 0 24px rgba(82,228,245,.12); }.instruction { margin: 9px 0 0; color: #4e676c; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.secure-line { width: min(76vw,310px); margin-top: 24px; display: flex; align-items: center; gap: 9px; color: #30494e; font-size: .44rem; letter-spacing: .18em; }.secure-line i { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,rgba(109,193,202,.16)); }.secure-line i:last-child { transform: scaleX(-1); }
.error { min-height: 20px; max-width: 92%; margin: 2px auto 7px; color: #e58a94; font-size: .72rem; text-align: center; letter-spacing: .015em; }
.details { width: 100%; max-height: 24vh; overflow: auto; color: #486167; border-top: 1px solid rgba(113,191,201,.1); padding-top: 10px; }.details summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; color: #3e575c; font-size: .48rem; letter-spacing: .2em; }.details summary::-webkit-details-marker { display: none; }.details summary i { flex: 1; height: 1px; background: linear-gradient(90deg,rgba(95,188,199,.13),transparent); }
.trace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }.trace-grid article { min-width: 0; padding: 12px; border: 1px solid rgba(97,177,188,.1); border-radius: 10px; background: rgba(4,10,12,.78); }.trace-grid small { color: #426168; font-size: .47rem; letter-spacing: .18em; }.trace-grid p { margin: 7px 0 0; color: #8ca3a7; font-size: .7rem; line-height: 1.5; white-space: pre-wrap; }
.pair-panel { width: 100%; max-width: 440px; margin: auto; padding: 28px; border: 1px solid rgba(119,206,217,.12); border-radius: 20px; background: rgba(3,7,8,.88); box-shadow: 0 25px 80px rgba(0,0,0,.6); }.pair-art { width: 76px; height: 76px; margin-bottom: 28px; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(125,224,236,.15),0 15px 30px rgba(0,0,0,.5); }.pair-art img { width: 100%; height: 100%; display: block; }.eyebrow { margin: 0 0 9px; color: #3f6b72; font-size: .5rem; letter-spacing: .24em; }.pair-panel h1 { margin: 0; color: #e2ebed; font-size: 1.6rem; font-weight: 460; }.pair-copy { margin: 9px 0 25px; color: #60777b; font-size: .78rem; line-height: 1.5; }
label { display: block; margin: 16px 0 7px; color: #506a70; font-size: .52rem; letter-spacing: .18em; } input { width: 100%; padding: 14px; color: #dce9eb; background: #020405; border: 1px solid rgba(97,185,197,.18); border-radius: 9px; outline: none; } input:focus { border-color: rgba(67,219,238,.46); box-shadow: 0 0 0 3px rgba(29,207,230,.05); }.primary { width: 100%; margin-top: 20px; padding: 14px; border: 1px solid rgba(105,230,245,.4); border-radius: 9px; color: #bceff5; background: linear-gradient(180deg,rgba(18,100,111,.72),rgba(7,46,52,.78)); font-size: .64rem; font-weight: 600; letter-spacing: .16em; }.primary:disabled { opacity: .45; }.hidden { display: none !important; }
@keyframes breathe { 50% { transform: scale(1.025); opacity: .7; } } @keyframes scan { 0%,100% { top: 17%; opacity: 0; } 18% { opacity: .58; } 82% { opacity: .58; } 100% { top: 82%; opacity: 0; } } @keyframes thinkField { 50% { transform: scale(.985) rotate(.35deg); border-color: rgba(45,222,244,.3); } } @keyframes flicker { 50% { opacity: .55; transform: scale(1.5); } }
@media (max-height:720px) { .presence { width: min(52vh,270px); }.state-code { margin-bottom: 10px; }.voice-copy { margin-top: 18px; }.secure-line { margin-top: 15px; } }
@media (max-width:430px) { .trace-grid { grid-template-columns: 1fr; } }
@media (display-mode:standalone) { .topbar { padding-top: 3px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }

/* V6 — NORA is not displayed. She is discovered. */
body::before {
  background:
    radial-gradient(ellipse 34% 44% at 55% 42%, rgba(3, 37, 43, .22), transparent 72%),
    linear-gradient(180deg, #020303 0%, #000 58%, #020303 100%);
}
body::after { opacity: .12; }
.ambient::before, .ambient::after { opacity: .38; }
.ambient i { width: 2px; height: 2px; opacity: .12; }
.topbar { opacity: .54; }
.brand-sigil { width: 14px; height: 14px; padding: 3px; border-radius: 5px; }
.brand strong { font-size: .58rem; letter-spacing: .28em; }
.brand small { color: #28383b; font-size: .36rem; letter-spacing: .24em; }
.connection { font-size: .43rem; letter-spacing: .22em; }
.connection i { width: 3px; height: 3px; }

.presence-stage { position: relative; padding-top: 0; }
.presence-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 11%;
  bottom: 21%;
  width: 1px;
  opacity: .14;
  background: linear-gradient(transparent, rgba(21, 213, 238, .42) 42%, rgba(21, 213, 238, .08) 65%, transparent);
  box-shadow: 0 0 18px rgba(21, 213, 238, .2);
}
.state-code { z-index: 3; width: min(60vw, 240px); margin-bottom: -3px; color: #32474b; font-size: .39rem; letter-spacing: .34em; }
.state-code i { opacity: .42; }

.presence {
  width: clamp(285px, 84vw, 410px);
  border-radius: 50%;
  filter: none;
}
.presence-frame {
  inset: -2%;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 73% at 57% 47%, #000 0 43%, rgba(0,0,0,.88) 57%, rgba(0,0,0,.2) 72%, transparent 83%);
  mask-image: radial-gradient(ellipse 62% 73% at 57% 47%, #000 0 43%, rgba(0,0,0,.88) 57%, rgba(0,0,0,.2) 72%, transparent 83%);
}
.presence-frame::before {
  box-shadow: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.56) 25%, transparent 52%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.9) 100%),
    linear-gradient(180deg, rgba(0,0,0,.82), transparent 24%, transparent 69%, #000 96%);
}
.presence-frame::after {
  opacity: calc(.025 + var(--energy) * .18);
  background: radial-gradient(ellipse at 62% 46%, rgba(35, 222, 245, .72), transparent 3%, transparent 25%);
}
.presence-frame img {
  transform: scale(1.14) translateX(-1.5%);
  filter: brightness(calc(.56 + var(--energy) * .32)) contrast(1.34) saturate(.74);
  opacity: .92;
}
.field { border-radius: 50%; border-color: transparent; }
.field-a { inset: 9% 5%; border-top-color: rgba(42, 194, 212, .12); border-right-color: rgba(42, 194, 212, .07); transform: rotate(-13deg); }
.field-b { inset: 3% 9%; border-left-color: rgba(91, 189, 201, .06); border-bottom-color: rgba(91, 189, 201, .09); transform: rotate(17deg); }
.field::before, .field::after { width: 18px; height: 18px; border-color: rgba(47, 208, 227, .28); }
.field::before { border-radius: 100% 0 0; }.field::after { border-radius: 0 0 100%; }
.pulse-node { right: 25%; bottom: 25%; width: 2px; height: 2px; opacity: .2; }
.scan { left: 28%; right: 20%; }

body[data-state="idle"] .presence-frame { animation: hiddenBreath 6s ease-in-out infinite; }
body[data-state="listening"] .presence,
body[data-state="speaking"] .presence { filter: drop-shadow(0 0 calc(7px + var(--energy) * 18px) rgba(17, 208, 232, .1)); }
body[data-state="listening"] .presence-frame,
body[data-state="speaking"] .presence-frame { box-shadow: none; }
body[data-state="listening"] .presence-frame img { filter: brightness(calc(.62 + var(--energy) * .35)) contrast(1.35) saturate(.88); }
body[data-state="thinking"] .presence-frame img { transform: scale(1.17) translateX(-1%); filter: brightness(.66) contrast(1.42) saturate(.88); }
body[data-state="speaking"] .presence-frame img { filter: brightness(calc(.60 + var(--energy) * .4)) contrast(1.38) saturate(.92); }
body[data-state="thinking"] .scan { opacity: .24; }

.voice-copy { z-index: 4; margin-top: -19px; }
.status { min-height: 22px; color: #98aaad; font-size: .68rem; font-weight: 450; letter-spacing: .42em; text-indent: .42em; text-shadow: none; }
.instruction { margin-top: 11px; color: #273a3e; font-size: .48rem; letter-spacing: .25em; }
.secure-line { z-index: 4; width: min(55vw, 220px); margin-top: 24px; color: #1f3033; font-size: .35rem; letter-spacing: .25em; }
.secure-line i { opacity: .45; }
.details { border-color: rgba(113, 191, 201, .045); opacity: .42; }
.details summary { color: #26383b; font-size: .37rem; letter-spacing: .32em; }
.error { z-index: 5; }

.pair-panel { border-color: rgba(119,206,217,.07); background: rgba(1,3,4,.94); box-shadow: 0 32px 100px #000; }
.pair-art {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  box-shadow: none;
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 76%);
  mask-image: radial-gradient(circle, #000 35%, transparent 76%);
}
.pair-art img { transform: scale(1.35); filter: brightness(.55) contrast(1.25); }

@keyframes hiddenBreath {
  0%, 100% { opacity: .78; transform: scale(.994); }
  50% { opacity: 1; transform: scale(1.006); }
}
@media (max-height:720px) {
  .presence { width: min(61vh, 310px); }
  .voice-copy { margin-top: -14px; }
}