html { color-scheme:dark; background:#243e5a; }
body { margin:0; }

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap');
#family-site { width:100%; }
#family-site *, #family-site *::before, #family-site *::after { box-sizing:border-box; }
#family-site [hidden] { display:none !important; }
#family-site .cf-stage { --cf-accent:#c4e4ff; position:relative; isolation:isolate; height:640px; min-height:640px; overflow:hidden; font:400 15px/1.5 'DM Sans',Arial,sans-serif; }
#family-site .cf-header { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 48px; padding-top:34px; }
#family-site .cf-brand { display:flex; align-items:center; gap:12px; white-space:nowrap; }
#family-site .cf-mark { font:500 27px/1 'DM Sans',Arial,sans-serif; letter-spacing:-3px; }
#family-site .cf-domain { font-size:11px; font-weight:500; letter-spacing:2px; }
#family-site .cf-login-area { position:relative; }
#family-site .cf-login-toggle { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; border:0; border-radius:50%; color:inherit; background:transparent; }
#family-site .cf-login-toggle svg { width:22px; height:22px; }
#family-site .cf-login-panel { position:absolute; top:calc(100% + 12px); right:0; z-index:20; width:294px; padding:23px; border:1px solid; border-radius:10px; box-shadow:0 18px 60px #00000026; }
#family-site .cf-login-panel form { display:grid; gap:12px; }
#family-site .cf-login-panel input { display:block; width:100%; min-width:0; min-height:42px; padding:10px 12px; border:1px solid; border-radius:5px; font:400 16px/1.3 'DM Sans',Arial,sans-serif; }
#family-site .cf-login-panel input::placeholder { color:inherit; opacity:.75; }
#family-site .cf-submit { width:100%; min-height:43px; margin-top:0; border:0; border-radius:5px; padding:10px; font:500 13px/1.4 'DM Sans',Arial,sans-serif; }
#family-site .cf-error { margin:14px 0 0; font-size:12px; line-height:1.5; }
#family-site .cf-footer { position:absolute; z-index:2; right:48px; bottom:29px; left:48px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 20px; font-size:11px; letter-spacing:1px; }
#family-site .cf-footer span { display:block; }
#family-site .cf-heading { margin:0; padding:0; color:inherit; }

/* Dark / orbital. */
#family-site .cf-dark { background:#243e5a; color:#f3f8ff; }
#family-site .cf-dark::before { content:''; position:absolute; inset:0; z-index:-2; opacity:.17; background-image:linear-gradient(#d0e5ff0e 1px,transparent 1px),linear-gradient(90deg,#d0e5ff0e 1px,transparent 1px); background-size:64px 64px; }
#family-site .cf-dark .cf-mark { color:var(--cf-accent); }
#family-site .cf-dark .cf-domain { color:#c6d6e7; }
#family-site .cf-dark .cf-login-toggle { border-color:#7892af; }
#family-site .cf-dark .cf-login-toggle:hover { background:#ffffff09; border-color:var(--cf-accent); }
#family-site .cf-dark .cf-main { position:relative; z-index:1; margin:118px 48px 115px; }
#family-site .cf-dark .cf-kicker { display:flex; align-items:center; gap:10px; margin-bottom:22px; color:var(--cf-accent); font-size:11px; letter-spacing:3px; }
#family-site .cf-dark .cf-kicker::before { content:''; width:24px; height:1px; background:var(--cf-accent); }
#family-site .cf-dark .cf-heading { font:500 clamp(49px,8vw,88px)/1.03 'DM Sans',Arial,sans-serif; letter-spacing:-5px; }
#family-site .cf-dark .cf-heading span { color:var(--cf-accent); }
#family-site .cf-dark .cf-orbit { position:absolute; z-index:-1; width:480px; height:480px; right:-33px; top:112px; border-radius:50%; border:1px solid #b9ddff32; transform:rotate(-27deg); background:radial-gradient(ellipse at 30% 25%,#c3e1ff0b,transparent 65%); box-shadow:inset 0 0 64px #b8d9ff07,0 0 70px #b8d9ff05; }
#family-site .cf-dark .cf-orbit::before { content:''; position:absolute; inset:56px -30px; border:1px solid #c4e1ff38; border-radius:50%; box-shadow:0 0 0 35px #c4e1ff04,0 0 0 70px #c4e1ff03; transform:rotate(55deg); }
#family-site .cf-dark .cf-orbit::after { content:''; position:absolute; width:11px; height:11px; border-radius:50%; left:29px; top:108px; background:var(--cf-accent); box-shadow:0 0 24px var(--cf-accent); }
#family-site .cf-dark .cf-footer { color:#c4d6e9; }
#family-site .cf-dark .cf-login-panel { color:#f0f7ff; background:#2b4a68; border-color:#819dbb; }
#family-site .cf-dark .cf-login-panel input { color:#f3f8ff; background:#203c57; border-color:#85a3c2; }
#family-site .cf-dark .cf-submit { color:#17344e; background:var(--cf-accent); }
#family-site .cf-dark .cf-error { color:#ffb7ac; }

@media(max-width:650px) {
  #family-site .cf-stage { height:610px; min-height:610px; }
  #family-site .cf-header { margin:0 25px; padding-top:26px; }
  #family-site .cf-domain { font-size:11px; letter-spacing:1px; }
  #family-site .cf-brand { gap:10px; }
  #family-site .cf-login-toggle { min-height:44px; padding:10px; }
  #family-site .cf-login-panel { width:min(294px,calc(100vw - 50px)); }
  #family-site .cf-footer { right:25px; left:25px; bottom:27px; font-size:11px; letter-spacing:.4px; }
  #family-site .cf-dark .cf-main { margin:153px 25px 150px; }
  #family-site .cf-dark .cf-heading { font-size:clamp(48px,10vw,66px); letter-spacing:-2.8px; }
  #family-site .cf-dark .cf-kicker { margin-bottom:23px; }
  #family-site .cf-dark .cf-orbit { width:370px; height:370px; right:-190px; top:185px; opacity:.65; }
}
@media(prefers-reduced-motion:reduce) { #family-site *,#family-site *::before,#family-site *::after { transition:none !important; } }
#family-site .cf-stage { min-height:100svh; height:auto; display:flex; flex-direction:column; }
#family-site .cf-header { flex:none; }
#family-site .cf-dark .cf-main { flex:1; display:flex; align-items:center; margin:0; padding:88px 48px 120px; }
#family-site .cf-dark .cf-orbit { width:clamp(370px,44vw,680px); height:auto; aspect-ratio:1; top:50%; right:-2vw; transform:translateY(-50%) rotate(-27deg); }
#family-site .cf-login-panel { max-width:calc(100vw - 50px); }
#family-site .cf-login-toggle, #family-site .cf-submit { cursor:pointer; }
@media(max-width:650px) {
  #family-site .cf-dark .cf-main { margin:0; padding:110px 25px 140px; }
  #family-site .cf-dark .cf-orbit { width:370px; height:370px; top:27%; right:-190px; transform:rotate(-27deg); }
}