:root{
  --bg:#04060e; --ink:#eef2ff; --dim:#9aa7c7;
  --line:rgba(140,170,255,.18); --glow:#57c8ff; --violet:#b49aff;
  --panel:rgba(90,140,255,.06); --danger:#ff9db1; --ok:#8fffc9;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:radial-gradient(1100px 700px at 50% -10%,rgba(64,110,255,.22),transparent 60%),radial-gradient(900px 600px at 85% 110%,rgba(122,60,255,.16),transparent 60%),var(--bg);
  color:var(--ink);font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;min-height:100vh}
main{max-width:880px;margin:0 auto;padding:6vh 22px 48px}
.hidden{display:none !important}
h1{font-size:clamp(2.2rem,7vw,3.6rem);font-weight:700;line-height:1.05;text-align:center;
  background:linear-gradient(100deg,#fff 20%,#8fd8ff 55%,#b49aff 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.parent-line{margin-top:10px;color:var(--dim);letter-spacing:.16em;text-transform:uppercase;text-align:center;font-size:.95rem}
h2{font-size:1.2rem;letter-spacing:.12em;text-transform:uppercase;color:var(--glow);margin:0 0 18px}
h3{font-size:1.05rem;margin:0 0 10px}
p{line-height:1.6}
.dim{color:var(--dim)}
.card{border:1px solid var(--line);border-radius:20px;background:var(--panel);padding:26px;margin-top:28px}
.center{max-width:520px;margin-left:auto;margin-right:auto}
label{display:block;margin:0 0 16px;font-size:.92rem;color:var(--dim);letter-spacing:.03em}
input[type=email],input[type=password],input[type=text],input[type=date],input[type=url],textarea{
  width:100%;margin-top:7px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:rgba(4,6,14,.65);color:var(--ink);font-size:1rem;font-family:inherit}
textarea{resize:vertical;min-height:74px}
input:focus,textarea:focus{outline:2px solid rgba(87,200,255,.55);outline-offset:1px}
button,.btn{cursor:pointer;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:11px 24px;position:relative;overflow:hidden;
  font-size:.97rem;letter-spacing:.03em;background:rgba(90,140,255,.10);transition:transform .19s ease,background .19s ease,border-color .19s ease,box-shadow .19s ease;font-family:inherit}
button:hover,.btn:hover{border-color:rgba(160,190,255,.55);background:rgba(90,140,255,.18);transform:translateY(-1px)}
button.primary{background:linear-gradient(100deg,rgba(61,123,255,.55),rgba(122,60,255,.55));border-color:rgba(160,190,255,.5);font-weight:600}
button:disabled{opacity:.5;cursor:wait;transform:none}
.toggle-row{display:flex;gap:10px;justify-content:center;margin-top:26px}
.toggle-row button.active{background:rgba(87,200,255,.22);border-color:var(--glow)}
.msg{margin:14px 0;padding:12px 16px;border-radius:12px;font-size:.97rem;line-height:1.5;display:none}
.msg.show{display:block}
.msg.error{background:rgba(255,80,110,.12);border:1px solid rgba(255,120,150,.4);color:#ffd7de}
.msg.note{background:rgba(87,200,255,.10);border:1px solid rgba(87,200,255,.35);color:#d8f2ff}
.code-input{font-size:1.6rem !important;text-align:center;letter-spacing:.5em}
.photo-row{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.photo-preview{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid var(--line);background:rgba(4,6,14,.6);display:none}
.photo-preview.show{display:block}
fieldset{border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}
legend{color:var(--dim);font-size:.88rem;letter-spacing:.06em;padding:0 6px}
fieldset label:last-child{margin-bottom:0}
/* Flight */
.flight{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.flight video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flight .flight-ui{position:relative;z-index:2;width:min(560px,90vw);text-align:center;padding:0 0 7vh}
.flight .bar{height:6px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden;margin:16px 0}
.flight .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--glow),var(--violet));transition:width .3s linear}
.flight-lights{position:absolute;inset:0;z-index:1;pointer-events:none}
.flight-lights i{position:absolute;border-radius:50%;filter:blur(2px);opacity:0;animation:pass 3.4s linear infinite}
@keyframes pass{0%{opacity:0;transform:scale(.4)}25%{opacity:.9}100%{opacity:0;transform:scale(2.6)}}
.arrival{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(2,3,8,.88);text-align:center;padding:24px}
.arrival .space-name{font-size:clamp(2rem,7vw,3.4rem);font-weight:700;margin:10px 0;animation:brighten 2.2s ease both}
@keyframes brighten{from{opacity:0;filter:brightness(.3) blur(6px)}to{opacity:1;filter:brightness(1.25) blur(0)}}
.arrival .halo{width:120px;height:120px;border-radius:50%;margin:0 auto 12px;animation:brighten 2.2s ease both}
/* Home */
.keepsake{border-radius:22px;padding:28px;margin-top:28px;color:#fff;position:relative;overflow:hidden;border:1px solid var(--line)}
.keepsake::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,14,.18),rgba(4,6,14,.72));z-index:0}
.keepsake>*{position:relative;z-index:1}
.keepsake .k-name{font-size:1.7rem;font-weight:700}
.keepsake .k-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.45);margin-bottom:12px;background:rgba(4,6,14,.5)}
.keepsake .k-no{color:rgba(255,255,255,.85);letter-spacing:.1em;font-size:.9rem;text-transform:uppercase;margin-top:4px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.badge{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.14);border-radius:999px;padding:5px 13px;font-size:.85rem}
.k-lit{margin-top:16px;color:rgba(255,255,255,.82);letter-spacing:.12em;font-size:.88rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chips a{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.10);border-radius:999px;padding:5px 13px;font-size:.85rem;color:#fff;text-decoration:none;box-shadow:0 0 12px rgba(87,200,255,.18);position:relative;overflow:hidden;transition:transform .19s ease,background .19s ease,border-color .19s ease,box-shadow .19s ease}
.chips a:hover{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.18);transform:translateY(-1px)}
.ritual-done{border-color:rgba(143,255,201,.45);box-shadow:0 0 24px rgba(143,255,201,.16)}
#ritualDone{line-height:1.6;color:var(--ink)}
#ritualDone .ritual-line{font-style:italic}
.counts{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap}
.counts .num{font-size:1.9rem;font-weight:700;line-height:1}
.counts .cap{color:rgba(255,255,255,.85);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-top:5px}
.brightest{margin-top:22px;border-radius:16px;padding:16px 20px;border:1px solid var(--line);font-size:1rem}
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.mate{border:1px solid var(--line);border-left:5px solid var(--dim);border-radius:16px;padding:16px;background:rgba(4,6,14,.45)}
.mate img{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:8px}
.mate .m-name{font-weight:600}
.mate .m-bio{color:var(--dim);font-size:.92rem;margin-top:4px}
.mate .m-no{color:var(--dim);font-size:.8rem;letter-spacing:.08em;margin-top:6px;text-transform:uppercase}
.mate .m-links{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap}
.mate .m-links a{color:var(--glow);font-size:.85rem;text-decoration:none}
.signal{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:rgba(4,6,14,.45);margin-bottom:12px}
.signal .s-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.signal .dot{width:12px;height:12px;border-radius:50%;flex:none}
.signal .s-author{font-weight:600}
.signal .s-time{color:var(--dim);font-size:.82rem;margin-left:auto}
.signal .s-body{line-height:1.55}
.pulse-btn{margin-top:10px;padding:6px 16px;font-size:.88rem}
.pulse-btn.pulsed{background:rgba(87,200,255,.25);border-color:var(--glow)}
#siPasskey{display:block;margin:12px auto 0}
/* H.U.D. */
.hud-glance{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.hud-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(4,6,14,.45);border-radius:999px;padding:6px 14px;font-size:.88rem;transition:all .25s ease}
.hud-dot{width:12px;height:12px;border-radius:50%;flex:none}
.dock-name{font-weight:600;font-size:1.05rem;margin-bottom:4px}
.dock-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.dock-actions button{padding:7px 16px;font-size:.88rem}
.dock-open{display:inline-block;text-decoration:none;padding:7px 16px;font-size:.88rem}
#dockForm{margin-top:14px}
#pkStatus{margin-bottom:12px;line-height:1.6}
#pkAdd{padding:8px 20px;font-size:.92rem}
.pk-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-top:1px solid var(--line);margin-top:10px;font-size:.95rem}
.pk-row button{padding:6px 16px;font-size:.88rem;flex:none}
.mind-shell{margin-top:26px;border:1px dashed var(--line);border-radius:16px;padding:18px 20px;color:var(--dim);background:rgba(4,6,14,.35)}
.mind-shell h3{color:var(--dim);letter-spacing:.08em;text-transform:uppercase;font-size:.92rem}
.mind-shell p{line-height:1.6}
.top-row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-bottom:8px}
footer{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);color:var(--dim);font-size:.92rem;letter-spacing:.06em;text-align:center}
footer a{color:var(--dim)}
/* --- Wave 3: motion everywhere (subtle, premium; all killed under reduced motion below) --- */
/* 1) Animated buttons: one-pass light sheen + hover glow + press bloom */
button::after,.btn::after,.chips a::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.26) 50%,transparent 58%);
  transform:translateX(-150%);transition:transform .55s ease}
button:hover::after,button:focus-visible::after,.btn:hover::after,.btn:focus-visible::after,.chips a:hover::after,.chips a:focus-visible::after{transform:translateX(150%)}
button:hover,.btn:hover{box-shadow:0 6px 20px rgba(87,200,255,.20),0 0 14px rgba(87,200,255,.14)}
button.primary:hover,.btn.primary:hover{box-shadow:0 6px 22px rgba(87,200,255,.28),0 0 18px rgba(180,154,255,.22)}
button:active,.btn:active,.chips a:active{transform:translateY(0) scale(.98);box-shadow:0 0 0 1px rgba(87,200,255,.25),0 0 24px rgba(87,200,255,.35)}
button:disabled::after,.btn:disabled::after{display:none}
button:disabled:active,.btn:disabled:active{transform:none;box-shadow:none}
/* 2) View transitions: CSS fallback enter (JS uses startViewTransition when allowed) */
.view-enter{animation:viewIn .24s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s}
/* 3) Arrival glow + home space-light breathing */
.arrival .halo{animation:brighten 2.2s ease both,breatheGlow 6s ease-in-out 2.2s infinite alternate}
@keyframes breatheGlow{from{opacity:.9;transform:scale(1)}to{opacity:1;transform:scale(1.04)}}
.keepsake::after{animation:spaceBreathe 6.5s ease-in-out infinite alternate}
@keyframes spaceBreathe{from{opacity:.9}to{opacity:1}}
/* 4) Signal + card motion */
.signal-new{animation:signalIn .28s ease both}
@keyframes signalIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.wall .mate{animation:cardIn .36s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.wall .mate:nth-child(1){animation-delay:0s}
.wall .mate:nth-child(2){animation-delay:.045s}
.wall .mate:nth-child(3){animation-delay:.09s}
.wall .mate:nth-child(4){animation-delay:.135s}
.wall .mate:nth-child(5){animation-delay:.18s}
.wall .mate:nth-child(6){animation-delay:.225s}
.wall .mate:nth-child(7){animation-delay:.27s}
.wall .mate:nth-child(8){animation-delay:.315s}
.pulse-btn.pulsing{animation:pulseRing .45s ease-out both}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(87,200,255,.55)}100%{box-shadow:0 0 0 14px rgba(87,200,255,0)}}
/* --- Wave 4: quick actions, presence, connectors, voice --- */
.quick-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.quick-bar button{flex:1 1 160px}
.ritual-highlight{animation:ritualHighlight 1.6s ease both}
@keyframes ritualHighlight{0%{box-shadow:0 0 0 rgba(87,200,255,0);border-color:var(--line)}30%{box-shadow:0 0 34px rgba(87,200,255,.45);border-color:var(--glow)}100%{box-shadow:0 0 0 rgba(87,200,255,0)}}
.presence{display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-size:.82rem;font-weight:500;margin-left:8px;vertical-align:middle;letter-spacing:.02em}
.presence-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;background:#c9ffe2;box-shadow:0 0 10px 3px rgba(143,255,201,.55);animation:presenceGlow 2.8s ease-in-out infinite alternate}
@keyframes presenceGlow{from{opacity:.65;box-shadow:0 0 6px 2px rgba(143,255,201,.35)}to{opacity:1;box-shadow:0 0 14px 5px rgba(143,255,201,.65)}}
.mate .m-latest{color:var(--dim);font-size:.9rem;line-height:1.5;margin-top:8px}
.wall-pulse-btn{margin-top:10px}
.connector-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 2px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;transition:background .19s ease,transform .19s ease}
#connectorsList .connector-row:first-child{border-top:none;padding-top:2px}
.connector-row:hover{transform:translateY(-1px)}
.connector-label{font-weight:600;flex:none}
.connector-value{color:var(--glow);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#connectorsHint{line-height:1.6}
.composer-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#voiceStrip{margin-top:16px;border:1px dashed var(--line);border-radius:14px;padding:14px 16px;background:rgba(4,6,14,.35)}
.voice-status{line-height:1.5;color:var(--dim)}
#voicePreview{width:100%;margin-top:12px}
.voice-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.voice-actions button{padding:7px 16px;font-size:.88rem}
#voiceBtn.is-recording{border-color:var(--danger);animation:recordingGlow 1.2s ease-in-out infinite alternate}
@keyframes recordingGlow{from{box-shadow:0 0 8px rgba(255,157,177,.25)}to{box-shadow:0 0 18px rgba(255,157,177,.5)}}
.voice-audio{width:100%;margin-top:10px;display:block}
/* --- Wave 5: life layer — season light, aura, moon, capsules, The Quiet, lineage --- */
/* Season brightening: a soft golden overlay inside the keepsake. Static —
   no shimmer, so nothing new joins the reduced-motion list. */
.keepsake::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(420px 240px at 50% 0%,rgba(255,205,90,.34),transparent 70%)}
.keepsake.season-bright::before{opacity:.65}
.keepsake.birthday-bright::before{opacity:1;
  background:radial-gradient(560px 320px at 50% 0%,rgba(255,214,110,.5),transparent 72%)}
.season-line{margin-top:10px;color:#ffe9a8;letter-spacing:.06em;font-size:.95rem}
/* Aura: light only, never a number. The keepsake glows in its own space
   colour (set as --space-color from the citizen's own space); mates glow
   in soft neutral light, scaled by tier. */
.keepsake.aura-0{box-shadow:0 0 10px 0 rgba(200,214,255,.10)}
.keepsake.aura-1{box-shadow:0 0 22px -4px var(--space-color,rgba(160,190,255,.35))}
.keepsake.aura-2{box-shadow:0 0 30px -2px var(--space-color,rgba(160,190,255,.45)),0 0 12px 0 rgba(255,255,255,.10)}
.keepsake.aura-3{box-shadow:0 0 42px 2px var(--space-color,rgba(160,190,255,.55)),0 0 18px 0 rgba(255,255,255,.14)}
.keepsake.aura-4{box-shadow:0 0 58px 6px var(--space-color,rgba(160,190,255,.7)),0 0 26px 2px rgba(255,255,255,.18)}
.mate.aura-1{box-shadow:0 0 14px -4px rgba(190,205,255,.35)}
.mate.aura-2{box-shadow:0 0 20px -2px rgba(190,205,255,.45)}
.mate.aura-3{box-shadow:0 0 28px 0 rgba(190,205,255,.55),0 0 10px 0 rgba(255,255,255,.10)}
.mate.aura-4{box-shadow:0 0 38px 2px rgba(200,214,255,.65),0 0 16px 0 rgba(255,255,255,.14)}
/* Lineage: a thread of light under the lit line */
.k-lineage{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:rgba(255,255,255,.88);font-size:.9rem}
.lineage-chip{border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);border-radius:999px;padding:4px 12px;font-size:.85rem}
.lineage-arrow{color:rgba(255,255,255,.65)}
/* One moon */
.moon-strip{display:flex;align-items:center;gap:16px;margin-top:18px;padding:14px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(4,6,14,.35)}
.moon-disc{width:52px;height:52px;border-radius:50%;flex:none;position:relative;overflow:hidden;background:#e8eeff;box-shadow:0 0 18px rgba(232,238,255,.35)}
.moon-shadow{position:absolute;inset:0;border-radius:50%;background:#04060e}
.moon-strip p{line-height:1.55}
/* Time capsules */
.capsule-unlock{margin-bottom:6px}
.radio-line{display:flex;align-items:center;gap:9px;margin-bottom:10px;color:var(--ink);font-size:.97rem;letter-spacing:0}
.radio-line input{accent-color:var(--glow);width:17px;height:17px;flex:none}
.capsule-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 2px;border-top:1px solid var(--line);margin-top:12px}
.capsule-body{line-height:1.6}
.capsule-meta{color:var(--dim);line-height:1.55}
.capsule-open .capsule-meta{margin-top:6px;font-size:.9rem}
.capsule-delete{padding:6px 16px;font-size:.88rem;flex:none}
/* The Quiet */
.quiet-controls{margin-top:4px}
#quietToggle.active{background:rgba(140,110,255,.28);border-color:var(--violet)}
#quietRow{margin-top:14px;border:1px dashed rgba(180,154,255,.45);border-radius:14px;padding:14px 16px;background:rgba(50,40,100,.12)}
#quietRow label{margin-bottom:10px}
#quietLen{margin-top:7px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(4,6,14,.65);color:var(--ink);font-size:1rem;font-family:inherit}
#signalComposer.quiet-on{border-color:rgba(180,154,255,.55);box-shadow:0 0 26px rgba(140,120,255,.16);background:rgba(70,50,140,.10)}
.signal-quiet{border-color:rgba(180,154,255,.35);background:rgba(50,40,100,.12)}
.quiet-foot{color:var(--dim);font-size:.88rem;margin-top:10px;letter-spacing:.03em}
@media (prefers-reduced-motion: reduce){
  button,.btn,.chips a,.hud-chip,.dock-open,.pk-row button,#siPasskey,.flight .bar i,.connector-row{transition:none}
  button::after,.btn::after,.chips a::after{transition:none;display:none}
  button:hover,.btn:hover,.chips a:hover,.dock-open:hover,.connector-row:hover{transform:none}
  button:active,.btn:active,.chips a:active{transform:none;box-shadow:none}
  button:hover,.btn:hover,button.primary:hover,.btn.primary:hover{box-shadow:none}
  .flight-lights i,.arrival .space-name,.arrival .halo{animation:none}
  .view-enter,.signal-new,.wall .mate,.pulse-btn.pulsing,.keepsake::after,.presence-dot,#voiceBtn.is-recording,.ritual-highlight{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}