/* Sample personal page */
.sp-page{--sp-teal:#28686A;--sp-deep:#09282D;--sp-black:#09282D;--sp-gold:#d4ba82;--sp-champ:#f3e3bd;--sp-parch:#f6efe1;--sp-parch2:#efe4cf;--sp-lav:#b9a6d6;--sp-ink:#1d2228}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sp-page :focus-visible{outline:2px solid var(--sp-gold);outline-offset:3px}

.sp-hero{background:radial-gradient(ellipse at 70% 0%,rgba(212,186,130,.14),transparent 55%),linear-gradient(180deg,var(--sp-black),var(--sp-teal));color:#f4ecdc;padding:88px 0 70px;border-bottom:1px solid rgba(212,186,130,.35)}
.sp-hero .eyebrow{color:var(--sp-gold)}
.sp-hero h1{color:#f8f1e3;margin:.2em 0 .35em}.sp-hero h1 em{color:var(--sp-gold)}
.sp-hero .lead{color:#e8decb;max-width:700px}
.sp-mode{display:inline-flex;margin:26px 0 14px;border:1px solid var(--sp-gold);border-radius:999px;padding:4px;gap:4px;flex-wrap:wrap}
.sp-mode-btn{background:none;border:0;color:#f4ecdc;font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:13px 20px;border-radius:999px;cursor:pointer;min-height:44px}
.sp-mode-btn[aria-pressed="true"]{background:var(--sp-gold);color:var(--sp-black)}
.sp-note{font-size:13.5px;color:#bfc9c4;max-width:640px;margin:0}
.sp-note-dark{color:#a9b7b3;margin-top:16px}
.sp-motion{margin-top:18px;background:none;border:1px solid rgba(212,186,130,.5);color:#e8decb;border-radius:999px;padding:9px 16px;font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;min-height:40px}

.sp-section{padding:78px 0}
.sp-sec-head{max-width:720px;margin-bottom:34px}
.sp-sec-head h2{margin:.15em 0 .3em}
.sp-sec-head p:last-child{color:inherit;opacity:.85}
.sp-narrow{max-width:780px}
.sp-muted{color:#7d7a72;font-size:14px}

/* dark sections */
.sp-observatory,.sp-shared{background:radial-gradient(ellipse at 30% 40%,#28686A 0%,var(--sp-teal) 40%,var(--sp-black) 100%);color:#efe6d4}
.sp-observatory h2,.sp-shared h2{color:#f8f1e3}
.sp-observatory .eyebrow,.sp-shared .eyebrow{color:var(--sp-gold)}

.sp-obs-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.9fr);gap:36px;align-items:start}
.sp-obs-stage{position:sticky;top:96px}
.sp-orrery{width:100%;height:auto;display:block;max-width:640px;margin:0 auto;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.sp-orrery-tilt{transition:transform .5s ease-out}
.sp-ring-path{fill:none;stroke:rgba(212,186,130,.26);stroke-width:1;transition:stroke .4s,stroke-width .4s}
.sp-ring-path.is-dashed{stroke-dasharray:1 6}
.sp-tick{stroke:rgba(212,186,130,.32);stroke-width:1}
.sp-ring.on .sp-ring-path{stroke:rgba(243,227,189,.85);stroke-width:1.6}
.sp-body{cursor:pointer;outline:none}
.sp-hit{fill:transparent}
.sp-glow{opacity:.25;transition:opacity .35s}
.sp-dot{fill:var(--sp-gold);stroke:#f6e6c2;stroke-width:.6;transition:fill .3s}
.sp-body.is-small .sp-dot{fill:#cdbfdc}
.sp-body.is-sun .sp-dot{fill:#f3d798}
.sp-body.is-sun .sp-glow{opacity:.7}
.sp-body:hover .sp-glow,.sp-body:focus-visible .sp-glow,.sp-body.on .sp-glow{opacity:1}
.sp-body:hover .sp-dot,.sp-body.on .sp-dot{fill:#fff4d8}
.sp-body:focus-visible .sp-hit{stroke:var(--sp-gold);stroke-width:1.5;stroke-dasharray:3 3}
.trail-on .sp-body:not(.in-ch):not(.on) .sp-dot{opacity:.45}
.sp-label{pointer-events:none;transition:opacity .3s}
.sp-label-bg{fill:rgba(9,40,45,.82);stroke:var(--sp-gold);stroke-width:.8}
.sp-label-t{fill:var(--sp-champ);font:16px 'Segoe UI Symbol','Noto Sans Symbols 2','Noto Sans Symbols','Apple Symbols',serif}
.sp-trace{fill:none;stroke:rgba(243,227,189,.5);stroke-width:.8;stroke-dasharray:2 4}
.sp-final{fill:none;stroke:var(--sp-gold);stroke-width:1.2;stroke-dasharray:1400;stroke-dashoffset:1400;animation:sp-draw 3.2s ease-out forwards}
.sp-final.still{animation:none;stroke-dashoffset:0}
.sp-spark{fill:#fff3d2;filter:drop-shadow(0 0 6px #f3d798)}
.sp-spark.rest{transition:opacity 1.5s;opacity:0}
.is-complete .sp-ring-path{stroke:rgba(212,186,130,.42)}
@keyframes sp-draw{to{stroke-dashoffset:0}}
.dragging{cursor:grabbing}
.sp-stage-controls{display:flex;gap:16px;align-items:center;justify-content:center;margin-top:10px}
.sp-hint{font-size:12px;color:#9fb0ab;letter-spacing:.06em}
.sp-ghost{background:none;border:1px solid rgba(212,186,130,.55);color:#f0e6d2;padding:10px 16px;border-radius:2px;font:500 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;min-height:42px}
.sp-ghost:hover{background:rgba(212,186,130,.14)}

/* parchment panel */
.sp-panel{background:linear-gradient(180deg,var(--sp-parch),var(--sp-parch2));color:var(--sp-ink);border:1px solid rgba(212,186,130,.7);border-radius:4px;padding:26px 24px;box-shadow:0 18px 40px rgba(0,0,0,.28);display:grid;gap:22px}
.sp-panel>[hidden]{display:none}
.sp-invite-k{font:500 clamp(24px,2.3vw,30px)/1.15 var(--serif);margin:0 0 6px}
.sp-invite p{margin:0 0 16px}
.sp-chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sp-chapters button{background:none;border:1px solid #cdbb94;border-radius:2px;padding:8px 6px;font:500 11px/1.25 var(--sans);color:#4a463f;cursor:pointer;min-height:56px;text-align:center}
.sp-chapters button span{display:block;font:600 15px var(--serif);color:#8e6a33}
.sp-chapters button[aria-selected="true"]{background:var(--sp-teal);color:#f4ecdc;border-color:var(--sp-teal)}
.sp-chapters button[aria-selected="true"] span{color:var(--sp-gold)}
.sp-chapters button.done{box-shadow:inset 0 -3px 0 var(--sp-gold)}
.sp-ch-intro{margin:12px 0 10px;font-size:14.5px;color:#4e4b44}
.sp-chips{display:flex;flex-wrap:wrap;gap:8px}
.sp-chip{display:inline-flex;align-items:center;gap:7px;background:#fffaf0;border:1px solid #d8c8a4;border-radius:999px;padding:8px 14px;font:500 13px var(--sans);color:var(--sp-ink);cursor:pointer;min-height:40px}
.sp-chip span[aria-hidden]{font-size:16px;color:#8e6a33}
.sp-chip.seen{border-color:#b89654;background:#f3e6c6}
.sp-chip.cur,.sp-chip:hover{border-color:var(--sp-teal);box-shadow:0 0 0 1px var(--sp-teal)}
.sp-card{border-top:1px solid #d8c8a4;padding-top:18px}
.sp-card-top{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.sp-card-top>div{flex:1}
.sp-card-glyph{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--sp-teal);color:var(--sp-champ);font-size:26px;border:1px solid var(--sp-gold)}
.sp-card-kind{font:500 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8e6a33;margin:0}
.sp-card h3,.sp-zod-card h3{font:500 30px/1.1 var(--serif);margin:2px 0 0;color:var(--sp-ink)}
.sp-x{background:none;border:1px solid #cdbb94;border-radius:50%;width:40px;height:40px;font-size:22px;line-height:1;color:#5a5348;cursor:pointer}
.sp-card p,.sp-zod-card p,.sp-so-panel p{font-size:15.5px;line-height:1.65}
.sp-place{display:grid;gap:12px;margin-top:12px}
.sp-place-row{background:rgba(18,61,64,.06);border-left:3px solid var(--sp-gold);padding:10px 14px}
.sp-place-row.is-two{border-left-color:#9a86bd}
.sp-place-row p{margin:0}
.sp-place-h{font:600 12px/1.4 var(--sans)!important;letter-spacing:.08em;text-transform:uppercase;color:#6e5426;margin:0 0 4px!important}
.sp-place-h.is-two,.is-two .sp-place-h{color:#5f4d82}
.sp-progress-h{font:500 20px var(--serif);margin:0 0 10px}
.sp-segs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px}
.sp-segs i{height:4px;border-radius:2px;background:#ddd0b3;transition:background .6s,box-shadow .6s}
.sp-segs i.lit{background:var(--sp-gold);box-shadow:0 0 8px rgba(212,186,130,.8)}
.sp-progress ul{list-style:none;margin:0 0 8px;padding:0;font-size:14px}
.sp-progress li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dotted #d6c8a8}
.sp-progress li span{color:#6c675d;white-space:nowrap}
.sp-progress li.done{color:#6e5426;font-weight:500}
.sp-link{background:none;border:0;padding:6px 0;color:#6e5426;text-decoration:underline;cursor:pointer;font:inherit;font-size:13px}
.sp-complete{background:var(--sp-teal);color:#f4ecdc;border-radius:3px;padding:22px;text-align:center;outline:none}
.sp-complete-a{font:italic 500 22px/1.3 var(--serif);color:var(--sp-champ);margin:0 0 6px}
.sp-complete-b{font-size:14px;letter-spacing:.06em;margin:0 0 18px}
.sp-complete-btns{display:grid;gap:10px}
.sp-complete .btn-outline{color:#f4ecdc;border-color:var(--sp-gold)}

/* catch the planet */
.sp-catch{background:var(--sp-parch)}
.sp-catch-wrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:28px;align-items:start}
.sp-sky{position:relative;height:380px;border-radius:4px;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#1d5458,transparent 60%),radial-gradient(1px 1px at 20% 30%,#fff8,transparent),radial-gradient(1px 1px at 70% 20%,#fff8,transparent),radial-gradient(1px 1px at 40% 70%,#fff6,transparent),radial-gradient(1px 1px at 85% 60%,#fff6,transparent),radial-gradient(1px 1px at 10% 85%,#fff5,transparent),linear-gradient(180deg,var(--sp-black),var(--sp-teal));border:1px solid rgba(212,186,130,.5);touch-action:pan-y}
.sp-sky-start{position:absolute;inset:0;display:grid;place-items:center;margin:0}
.sp-sky-start[hidden]{display:none}
.sp-planet{position:absolute;width:54px;height:54px;margin-top:-27px;border-radius:50%;border:1px solid rgba(243,227,189,.8);background:radial-gradient(circle at 35% 30%,#fff3d2,#d4ba82 45%,#8a6a35);color:var(--sp-black);font-size:24px;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 18px rgba(212,186,130,.55);padding:0}
.sp-planet.p-moon{background:radial-gradient(circle at 35% 30%,#fff,#d9d6cf 50%,#8f8a80)}
.sp-planet.p-mars{background:radial-gradient(circle at 35% 30%,#ffd9c4,#c9805a 50%,#7a3e25)}
.sp-planet.p-venus{background:radial-gradient(circle at 35% 30%,#fff1e4,#e7c2a0 50%,#9d7656)}
.sp-planet.p-neptune,.sp-planet.p-uranus{background:radial-gradient(circle at 35% 30%,#e9fbff,#8fc3c8 50%,#3d6f75)}
.sp-planet.p-pluto,.sp-planet.p-saturn{background:radial-gradient(circle at 35% 30%,#f7efe0,#c2ae8a 50%,#6d5d42)}
.sp-planet.got{animation:sp-got .7s ease-out forwards}
@keyframes sp-got{to{transform:scale(1.8);opacity:0}}
.sp-sky.is-still .sp-planet{position:absolute}
.sp-catch-count{font:500 22px var(--serif);margin:0 0 12px}
.sp-caught{display:grid;gap:8px;max-height:380px;overflow:auto;margin-bottom:12px}
.sp-got{background:#fffaf0;border:1px solid #d8c8a4;border-radius:3px;padding:10px 14px}
.sp-got summary{cursor:pointer;font:500 17px var(--serif);display:flex;gap:10px;align-items:center}
.sp-got summary span{color:#8e6a33;font-size:18px}
.sp-got p{font-size:14.5px;margin:8px 0 0}
.sp-catch .sp-ghost{color:var(--sp-ink);border-color:#b89654}
kbd{font:600 12px var(--sans);border:1px solid #b9a77d;border-bottom-width:2px;border-radius:3px;padding:1px 6px;background:#fffaf0}

/* zodiac */
.sp-zodiac{background:linear-gradient(180deg,#fbf7ef,var(--sp-parch))}
.sp-zod-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:40px;align-items:center}
.sp-wheel{width:100%;max-width:520px;height:auto;margin:0 auto;display:block}
.sp-w-outer{fill:var(--sp-teal);stroke:var(--sp-gold);stroke-width:1}
.sp-w-inner{fill:var(--sp-black);stroke:rgba(212,186,130,.6)}
.sp-seg{cursor:pointer;outline:none}
.sp-seg path{fill:rgba(255,255,255,.02);stroke:rgba(212,186,130,.45);stroke-width:1;transition:fill .3s}
.sp-seg.el-fire path{fill:rgba(212,150,100,.10)}.sp-seg.el-earth path{fill:rgba(160,170,110,.10)}.sp-seg.el-air path{fill:rgba(220,220,230,.07)}.sp-seg.el-water path{fill:rgba(140,170,210,.10)}
.sp-seg text{fill:var(--sp-champ);font:22px 'Segoe UI Symbol','Noto Sans Symbols 2','Noto Sans Symbols','Apple Symbols',serif;pointer-events:none}
.sp-seg:hover path,.sp-seg:focus-visible path{fill:rgba(212,186,130,.22)}
.sp-seg.on path{fill:rgba(212,186,130,.42);stroke:var(--sp-champ);stroke-width:1.5}
.sp-seg:focus-visible path{stroke:#fff;stroke-width:2}
.sp-w-centre{fill:var(--sp-gold);font:46px 'Segoe UI Symbol','Noto Sans Symbols 2','Noto Sans Symbols','Apple Symbols',serif}
.sp-w-dot{fill:var(--sp-gold)}.sp-w-dot.is-two{fill:var(--sp-lav)}
.sp-zod-card{background:#fffaf0;border:1px solid #d8c8a4;border-radius:4px;padding:26px;min-height:260px}
.sp-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin:14px 0}
.sp-facts dt{font:600 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#8e6a33}
.sp-facts dd{margin:2px 0 0;font-size:15px}

/* shared orbit */
.sp-so-modes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.sp-so-modes button{background:none;border:1px solid rgba(212,186,130,.55);color:#efe6d4;padding:11px 18px;font:500 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;min-height:44px;border-radius:2px}
.sp-so-modes button[aria-selected="true"]{background:var(--sp-gold);color:var(--sp-black)}
.sp-so-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr);gap:32px;align-items:start}
.sp-so{width:100%;height:auto;display:block;touch-action:pan-y}
.sp-so-warm{transition:opacity 1.2s;opacity:0;pointer-events:none}
.sys-one .sp-ring-path{stroke:rgba(212,186,130,.4)}
.sys-two .sp-ring-path{stroke:rgba(185,166,214,.45)}
.sys-two .sp-dot{fill:var(--sp-lav);stroke:#e4daf2}
.sys-two .sp-ring.on .sp-ring-path{stroke:rgba(220,208,240,.9)}
.sys-one .sp-body.is-sun .sp-dot{fill:#f3d798}
.sys-two .sp-body.is-sun .sp-dot{fill:#d6cbe8}
.sp-so .sp-body.on .sp-dot{fill:#fff;filter:drop-shadow(0 0 5px #f3d798)}
.sys-two .sp-body.on .sp-dot{filter:drop-shadow(0 0 5px #c8b7e6)}
.sp-conn{cursor:pointer;outline:none;opacity:0;transition:opacity .9s;pointer-events:none}
.sp-so[data-mode="together"] .sp-conn,.sp-so[data-mode="connections"] .sp-conn{opacity:1}
.sp-so[data-mode="connections"] .sp-conn{pointer-events:auto}
.sp-conn-line{stroke:url(#none);stroke:rgba(212,186,130,.6);stroke-width:1;stroke-dasharray:4 6;animation:sp-wave 2.4s linear infinite}
.sp-conn:nth-child(even) .sp-conn-line{stroke:rgba(140,200,200,.6)}
.sp-conn-hit{stroke:transparent;stroke-width:16}
.sp-so.has-conn .sp-conn:not(.on){opacity:.25}
.sp-conn.on .sp-conn-line,.sp-conn:hover .sp-conn-line,.sp-conn:focus-visible .sp-conn-line{stroke:#f6e2b0;stroke-width:2.2;stroke-dasharray:none}
@keyframes sp-wave{to{stroke-dashoffset:-20}}
.sp-so-panel{background:linear-gradient(180deg,var(--sp-parch),var(--sp-parch2));color:var(--sp-ink);border:1px solid rgba(212,186,130,.7);border-radius:4px;padding:24px}
.sp-so-panel h3{font:500 26px/1.15 var(--serif);margin:4px 0 8px;color:var(--sp-ink)}
.sp-so-panel h4{font:500 22px var(--serif);margin:16px 0 4px}
.sp-so-k{font:600 11px var(--sans)!important;letter-spacing:.16em;text-transform:uppercase;color:#8e6a33;margin:0}
.sp-so-k.is-two{color:#5f4d82}
.sp-so-panel [data-so-detail]{margin-top:14px}
.sp-so-panel .btn-outline{color:var(--sp-ink)}
.sp-ends{display:grid;gap:4px;font-size:13.5px!important;color:#6e5426}
.sp-ends .is-two{color:#5f4d82}

/* reflections + cta */
.sp-reflect{background:var(--sp-parch)}
.sp-questions{padding-left:1.4em;margin:0 0 22px;display:grid;gap:12px}
.sp-questions li{font:italic 500 clamp(20px,2vw,25px)/1.35 var(--serif);animation:sp-in .7s ease-out}
@keyframes sp-in{from{opacity:0;transform:translateY(6px)}}
.sp-cta{background:linear-gradient(180deg,var(--sp-teal),var(--sp-black));color:#efe6d4;padding:72px 0;text-align:center}
.sp-cta h2{color:#f8f1e3}.sp-cta .eyebrow{color:var(--sp-gold)}
.sp-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:22px 0 14px}
.sp-cta .btn-outline{color:#f4ecdc;border-color:var(--sp-gold)}
.sp-cta .sp-muted{color:#a9b7b3}
.sp-page[data-sp-mode="couple"] [data-cta-couple]{order:-1}

@media (max-width:960px){
  .sp-obs-grid,.sp-catch-wrap,.sp-zod-grid,.sp-so-grid{grid-template-columns:1fr}
  .sp-orrery{max-width:520px}
  .sp-hint{display:none}
}
@media (max-width:560px){
  .sp-section{padding:56px 0}
  .sp-hero{padding:64px 0 52px}
  .sp-mode{display:flex}
  .sp-mode-btn{flex:1;padding:12px 10px;letter-spacing:.1em}
  .sp-chapters{grid-template-columns:repeat(2,1fr)}
  .sp-panel{padding:20px 16px}
  .sp-sky{height:320px}
  .sp-facts{grid-template-columns:1fr}
  .sp-so-modes button{flex:1 1 45%;padding:11px 8px}
  .sp-zod-card{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  .sp-orrery-tilt,.sp-glow,.sp-ring-path,.sp-so-warm,.sp-conn{transition:none}
  .sp-conn-line{animation:none}
  .sp-final{animation:none;stroke-dashoffset:0}
  .sp-questions li{animation:none}
  .sp-planet.got{animation:none;opacity:.3}
}

@media (max-width:960px){.sp-obs-stage{position:relative;top:auto}}
.sp-demo-label{display:inline-block;margin:0 0 18px;padding:6px 12px;border:1px solid rgba(212,186,130,.6);border-radius:999px;font:500 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sp-champ)}
.sp-lead2{color:#cfd6cf;max-width:700px;margin:12px 0 0}

/* Page-flipping book inside the Interactive Sample */
.sp-page{--lb-serif:var(--serif);--lb-sans:var(--sans)}
.sp-book-sec{background:linear-gradient(180deg,#09282D,var(--sp-teal) 40%,#09282D);color:#efe6d4}
.sp-book-head{text-align:center;margin-left:auto;margin-right:auto}
.sp-book-head h2{color:#f8f1e3}.sp-book-head h2 em{color:var(--sp-gold)}
.sp-book-head .eyebrow{color:var(--sp-gold)}
.sp-book-sec .lb-book button,.sp-book-sec .lb-book a{font:inherit}
.sp-book-sec .lb-book button{cursor:pointer}
.sp-book-sec .lb-book :focus-visible{outline:3px solid #EBCA81;outline-offset:4px}
.sp-book-sec .lb-book{color:var(--lb-white);font-family:var(--lb-sans);text-align:left}