/* The Realm® pearl finish. Everything is scoped to html.pearl, so the dark finish is untouched until pearl is switched on. */
html.pearl{
  --void:#9aa7b8; --deep:#eef2f6; --panel:#f3f6f9; --line:rgba(110,126,148,.32);
  --ink:#17202e; --dim:#4a586c; --faint:#748297;
  --violet:#1e6fd9; --violet-hot:#1c63c4; --glow:rgba(95,211,255,.45);
  --gold:#a8812e; --ok:#13a36b; --warn:#c27a12;
  --lamp:#5fd3ff;
  --glass:rgba(255,255,255,.55); --glass-strong:rgba(244,247,250,.92); --glass-edge:rgba(255,255,255,.9); --glass-lit:rgba(255,255,255,.95);
  --pearl-paint:linear-gradient(172deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,0) 40%),radial-gradient(120% 90% at 30% 0%,#ffffff 0%,#f4f7fa 42%,#dde3ea 100%);
  --pearl-shadow:inset 0 2px 0 #fff,inset 0 -12px 26px rgba(120,135,155,.22),inset 0 0 0 1px rgba(255,255,255,.7),0 26px 34px -22px rgba(30,45,70,.5),0 50px 70px -46px rgba(30,45,70,.55);
  color-scheme:light;
}
html.pearl body{background:#9aa7b8;color:var(--ink)}

/* ---------- backdrop ---------- */
html.pearl #pearl-fiber{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
html.pearl canvas#field{display:none}
html.pearl .vista{background:linear-gradient(180deg,#b7c1cd,#97a4b5 55%,#7f8da0)}
html.pearl .vista img{filter:grayscale(.55) brightness(1.15) contrast(.9);opacity:.28;mix-blend-mode:luminosity}
html.pearl .vista .scrim,html.pearl body:not([data-page="gate"]) .vista .scrim{background:linear-gradient(180deg,rgba(183,193,205,.55),rgba(151,164,181,.6) 55%,rgba(127,141,160,.7))}
html.pearl .vista .beam,html.pearl .vista .flare{opacity:.25!important}
html.pearl .frame{position:relative;z-index:1}

/* ---------- top bar: a pearl capsule ---------- */
html.pearl header.hud{background:var(--pearl-paint);box-shadow:var(--pearl-shadow);border:0;border-radius:0 0 34px 34px;margin-inline:calc(-1 * clamp(16px,4vw,48px) + 10px)}
html.pearl .mark,html.pearl .mark span{color:var(--ink)}
html.pearl .mark .r,html.pearl .mark img{filter:brightness(0) saturate(0) opacity(.82)}
html.pearl nav.chambers a{color:var(--dim);border-radius:999px}
html.pearl nav.chambers a:hover{color:var(--ink);background:rgba(255,255,255,.7)}
html.pearl nav.chambers a[aria-current="page"]{color:var(--ink);background:#fff;border-color:rgba(110,126,148,.3);box-shadow:0 2px 8px rgba(30,45,70,.12)}
html.pearl nav.chambers a.studio{color:var(--ink);background:#fff;border-color:rgba(30,111,217,.45)}
html.pearl nav.chambers a.jump{color:#fff;background:linear-gradient(180deg,#2a3546,#141b26);border-color:#141b26;box-shadow:0 6px 14px rgba(20,30,45,.35),inset 0 1px 0 rgba(255,255,255,.25)}

/* ---------- type ---------- */
html.pearl .eyebrow{color:#1c63c4}
html.pearl p{color:var(--dim)}
html.pearl p.lead,html.pearl h1,html.pearl h2,html.pearl h3{color:var(--ink)}
html.pearl a{color:#1c63c4}
html.pearl .voice{color:var(--ink)}
html.pearl .voice .caret{background:var(--lamp)}

/* ---------- buttons: graphite and pearl capsules ---------- */
html.pearl .btn{border-radius:999px;border-color:transparent}
html.pearl .btn.primary{background:linear-gradient(180deg,#2a3546,#141b26);color:#fff;box-shadow:0 10px 22px rgba(20,30,45,.38),inset 0 1px 0 rgba(255,255,255,.25)}
html.pearl .btn.primary:hover{background:linear-gradient(180deg,#34425a,#1b2433)}
html.pearl .btn.ghost{background:linear-gradient(180deg,#fff,#e3e8ee);color:var(--ink);box-shadow:0 6px 14px rgba(20,30,45,.16),inset 0 0 0 1px rgba(150,162,178,.5)}
html.pearl .btn.ghost:hover{background:#fff}

/* ---------- the body panels ---------- */
html.pearl .panel,html.pearl .rfile,html.pearl .member{background:var(--pearl-paint)!important;border:0!important;box-shadow:var(--pearl-shadow)!important;border-radius:28px 64px 28px 64px/28px 44px 28px 44px;color:var(--ink);backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.pearl .panel::before{top:auto;left:8%;right:auto;bottom:12px;width:34%;height:2px;border:0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--lamp) 20%,#e8fbff 50%,var(--lamp) 80%,transparent);box-shadow:0 0 12px var(--lamp);opacity:.85}
html.pearl .panel::after{inset:8px;width:auto;height:auto;border:1px solid rgba(150,162,178,.35);border-radius:inherit;pointer-events:none}
html.pearl .telemetry{background:transparent;border:0;gap:12px}
html.pearl .telemetry div{background:var(--pearl-paint);box-shadow:var(--pearl-shadow);border-radius:20px 40px 20px 40px/20px 30px 20px 30px}
html.pearl .telemetry dt{color:var(--faint)}
html.pearl .telemetry dd{color:var(--ink)}
html.pearl .note{color:var(--faint)}

/* ---------- tiny pulsing lights in the frames ---------- */
html.pearl .led{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--lamp);box-shadow:0 0 6px var(--lamp),0 0 14px rgba(95,211,255,.7);animation:pearlLed 3.2s ease-in-out infinite;pointer-events:none;z-index:3}
html.pearl .led0{top:14px;right:22px}
html.pearl .led1{top:14px;right:34px;width:4px;height:4px;background:#bff0ff;animation-duration:4.1s}
html.pearl .led2{top:50%;left:14px;width:4px;height:4px;transform:translateY(-50%);animation-duration:2.6s}
html.pearl header.hud .led0{top:50%;right:10px;transform:translateY(-50%)}
html.pearl header.hud .led1{top:auto;bottom:6px;right:50%}
html.pearl header.hud .led2{left:10px}
html.pearl footer.pulse .led0{top:50%;right:12px;transform:translateY(-50%)}
@keyframes pearlLed{0%,100%{opacity:.25;box-shadow:0 0 3px var(--lamp)}45%{opacity:1;box-shadow:0 0 8px var(--lamp),0 0 18px rgba(95,211,255,.9)}}

/* ---------- forms, tags, tabs ---------- */
html.pearl input,html.pearl select,html.pearl textarea,html.pearl label.f input,html.pearl label.f select,html.pearl .vault-search input{background:#fff!important;color:var(--ink)!important;border:1px solid #c5cfdb!important;border-radius:10px!important;box-shadow:inset 0 1px 3px rgba(20,40,70,.12)}
html.pearl input::placeholder,html.pearl textarea::placeholder{color:#8a97a9}
html.pearl .tag{border-radius:999px}
html.pearl .tag.v{color:#1c63c4}
html.pearl .tabs button{color:var(--dim);border-radius:999px}
html.pearl .tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(30,45,70,.14)}

/* ---------- maps and the land-title grid ---------- */
html.pearl .isles{background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.6),transparent 70%),#dfe5ec;border:0;border-radius:24px;box-shadow:var(--pearl-shadow)}
html.pearl .isle path{fill:rgba(30,111,217,.12);stroke:#1e6fd9}
html.pearl .isle:hover path,html.pearl .isle.on path{fill:rgba(30,111,217,.3)}
html.pearl .parcels button{background:rgba(255,255,255,.7);border-color:rgba(110,126,148,.35)}
html.pearl .parcels button.held{background:rgba(168,129,46,.35);border-color:var(--gold)}
html.pearl .parcels button:hover,html.pearl .parcels button.sel{background:#1e6fd9;border-color:#1c63c4}

/* ---------- footer heartbeat bar ---------- */
html.pearl footer.pulse{background:var(--pearl-paint)!important;box-shadow:var(--pearl-shadow)!important;border:0;border-radius:34px 34px 0 0;margin-inline:calc(-1 * clamp(16px,4vw,48px) + 10px);color:var(--dim)}
html.pearl footer.pulse .bpm{color:#1c63c4}

/* ---------- pictures sit like smoked glass inserts ---------- */
html.pearl .panel img:not(.r):not([src*="logo"]):not([src*="sigil"]){border-radius:16px}

@media (prefers-reduced-motion:reduce){html.pearl .led{animation:none;opacity:.8}}

/* ---------- dark scenes stay as smoked-glass windows, with their own light lettering ---------- */
html.pearl :is(.core-hero,.cd,.tm,.cx-root,.codex-page .tm){--ink:#eef1f7;--dim:#c8d0dd;--faint:#9aa6ba}
html.pearl .core-hero{clip-path:none;border-radius:30px 80px 30px 80px/30px 54px 30px 54px;box-shadow:0 0 0 8px rgba(255,255,255,.85),0 0 0 9px rgba(150,162,178,.5),0 30px 50px -24px rgba(30,45,70,.6)}
html.pearl .core-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.04) 28%,transparent 42%)}
html.pearl .core-hero .eyebrow,html.pearl .cd .eyebrow{color:#8fe6ff}
html.pearl .core-hero .btn.ghost{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}

/* ---------- the gate's headline and readouts ---------- */
html.pearl .headline{text-shadow:none}
html.pearl .headline .hl2{background-image:linear-gradient(90deg,#1c63c4,#5fd3ff 50%,#1c63c4)}
html.pearl .vista-loc{background:rgba(255,255,255,.85)!important;color:var(--dim)!important;border-color:rgba(110,126,148,.35)!important;border-radius:999px}
html.pearl .vista-loc b{color:var(--ink)}
html.pearl .vista-loc i::after{background:#1e6fd9}

/* ---------- Raven, the concierge ---------- */
html.pearl .cg-orb{background:linear-gradient(180deg,#fff,#e3e8ee);color:var(--ink);border:0;box-shadow:0 10px 24px rgba(20,30,45,.3),inset 0 0 0 1px rgba(150,162,178,.5)}
html.pearl .cg{clip-path:none;border-radius:28px;background:var(--pearl-paint);box-shadow:var(--pearl-shadow),0 30px 60px rgba(20,30,45,.35)}
html.pearl .cg-m.a{background:#eaf4ff;border-color:rgba(30,111,217,.25)}
html.pearl .cg-m.u{background:#fff;border-color:rgba(110,126,148,.3)}
html.pearl .cg-chips button{background:#fff;color:var(--dim);border-color:rgba(110,126,148,.35)}
html.pearl .cg-head,html.pearl .cg-form{border-color:rgba(110,126,148,.25)}

/* ---------- the landing viewport ---------- */
html.pearl section.stage .core,html.pearl section.stage .vista-loc{display:none}
html.pearl .pearl-port{position:relative;width:min(1180px,100%);aspect-ratio:21/8;flex:none;padding:14px;
  border-radius:44px 44px 50% 50%/44px 44px 34% 34%;background:var(--pearl-paint);box-shadow:var(--pearl-shadow),0 40px 60px -30px rgba(30,45,70,.55)}
html.pearl .pp-win{position:absolute;inset:14px;border-radius:32px 32px 50% 50%/32px 32px 34% 34%;overflow:hidden;background:#dfe6ee;
  box-shadow:inset 0 0 0 1px rgba(150,162,178,.45),inset 0 10px 30px rgba(30,45,70,.25)}
html.pearl .pp-win img{position:absolute;top:0;left:0;width:118%;height:100%;object-fit:cover;opacity:0;transition:opacity 2.4s ease;filter:saturate(1.05) brightness(1.04);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
html.pearl .pp-win img.on{opacity:1;animation:ppDrift 9.4s linear both}
@keyframes ppDrift{from{transform:translateX(0)}to{transform:translateX(-15%)}}
html.pearl .pp-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(170deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.08) 26%,transparent 40%),radial-gradient(120% 70% at 50% 120%,rgba(183,193,205,.55),transparent 60%)}
html.pearl .pp-disc{position:absolute;left:50%;top:50%;width:clamp(120px,30%,300px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;z-index:2;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#ffffff 0%,#f4f7fa 38%,#d3dae3 78%,#b9c2cd 100%);
  box-shadow:inset 0 -10px 24px rgba(110,126,148,.35),inset 0 6px 14px #fff,0 0 0 8px rgba(255,255,255,.55),0 0 0 9px rgba(150,162,178,.45),0 24px 40px rgba(20,30,45,.35),0 0 60px rgba(95,211,255,.35)}
html.pearl .pp-disc img{width:88%;height:auto;filter:brightness(0) saturate(0) opacity(.78);animation:beat var(--bpm-dur) ease-in-out infinite}
html.pearl .pp-cap{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);z-index:3;display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:999px;text-decoration:none;
  font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dim);background:rgba(255,255,255,.88);box-shadow:0 6px 16px rgba(20,30,45,.2);transition:opacity .5s}
html.pearl .pp-cap b{color:var(--ink);font-weight:500}
html.pearl .pp-cap i{width:7px;height:7px;border-radius:50%;background:var(--lamp);box-shadow:0 0 8px var(--lamp);animation:pearlLed 2.4s ease-in-out infinite}
html.pearl .pp-cap.fade{opacity:0}
html.pearl .pearl-port .led0{top:22px;right:40px}
html.pearl .pearl-port .led1{top:22px;right:52px}
html.pearl .pearl-port .led2{top:22px;left:40px}
@media (max-width:700px){html.pearl .pearl-port{aspect-ratio:4/3;padding:10px}html.pearl .pp-win{inset:10px}html.pearl .pp-cap{bottom:7%;font-size:9.5px}}
@media (prefers-reduced-motion:reduce){html.pearl .pp-win img.on{animation:none}}
html.pearl footer.pulse canvas{filter:hue-rotate(-45deg) saturate(1.2)}
html.pearl .pp-cap{white-space:nowrap}
/* larger landing viewport */
html.pearl section.stage{max-width:none;width:100%}
html.pearl .pearl-port{width:min(1600px,100%);aspect-ratio:auto;height:clamp(340px,64vh,760px)}
html.pearl .pp-disc{width:auto;height:min(46%,320px)}
@media (max-width:700px){html.pearl .pearl-port{height:min(56vh,420px)}html.pearl .pp-disc{height:44%}}

/* the legal footer and loose notes sit on the blue-gray: white lettering */
html.pearl .site-legal{background:rgba(70,86,110,.35);border-top:1px solid rgba(255,255,255,.35);color:#fff}
html.pearl .site-legal p,html.pearl .site-legal .copy,html.pearl .site-legal span{color:#fff}
html.pearl .site-legal nav a{color:#fff;opacity:.92}
html.pearl .site-legal nav a:hover{opacity:1;text-decoration:underline}
html.pearl .site-legal a{color:#fff}
html.pearl section.stage>.note{color:#fff;text-shadow:0 1px 6px rgba(30,45,70,.35)}

/* old light-cyan links read poorly on pearl: make them deep blue, except inside the dark scenes */
html.pearl main a:not(.btn):not(.pp-cap):not(.vista-loc){color:#1c63c4}
html.pearl :is(.core-hero,.cd,.tm) a:not(.btn){color:#8fe6ff}
html.pearl .site-legal a,html.pearl .site-legal nav a,html.pearl .site-legal .share-link{color:#fff}
html.pearl .site-legal a,html.pearl .site-legal nav a,html.pearl .site-legal .share-link{color:#152026}

/* hard-coded light lettering from the dark finish, made readable on pearl */
html.pearl main :is(p,li):not(:is(.core-hero,.cd,.tm,figure) *){color:var(--dim)}
html.pearl main summary{color:var(--ink)}
html.pearl main :is(.pr,.price,.panel b.n){color:#152026}
html.pearl main :is(.iz-num,.role,.sub):not(:is(.core-hero,.cd,.tm,figure) *){color:#1c63c4}
html.pearl main .vn-card b{color:var(--ink)}
html.pearl main .vn-card small{color:#1c63c4}
html.pearl main .stad-rail button,html.pearl main .ex-pill{color:#8a6a1e}
html.pearl main .vx-apply span{color:var(--dim)}

/* team: wider cards, text fully below the portrait, nothing clipped by the curved corners */
html.pearl .team-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:22px}
html.pearl .member{overflow:visible;border-radius:28px 48px 28px 48px/28px 36px 28px 36px}
html.pearl .member .ph{border-radius:22px 40px 0 0/22px 30px 0 0;margin:10px 10px 0}
html.pearl .member .ph::after{background:linear-gradient(transparent 70%,rgba(244,247,250,.55)),repeating-linear-gradient(to bottom,rgba(150,230,255,.06) 0 1px,transparent 1px 3px)}
html.pearl .member .bd{margin-top:0;padding:16px 22px 30px}
html.pearl .member .role{color:#1c63c4}
html.pearl .member p{color:var(--dim)}
html.pearl .member details summary{color:#1c63c4}
html.pearl .team-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
html.pearl :is(.holo){--ink:#eef1f7;--dim:#c8d0dd;--faint:#9aa6ba}
html.pearl .isle-chips button,html.pearl [class*="chips"] button{color:var(--dim);background:rgba(255,255,255,.7);border-color:rgba(110,126,148,.35);border-radius:999px}