.app-compass { --brand: #e0894a; }
.app-compass { --brand-deep: #c46f33; }
.app-compass { --brand-soft: #fbeede; }
.app-compass { --glow-1: #fcefe0; }
.app-compass { --glow-2: #f6e7f1; }
.app-compass { --glow-3: #f9f4ea; }
@media (prefers-color-scheme: dark) { .app-compass { --brand: #f0a868; } }
@media (prefers-color-scheme: dark) { .app-compass { --brand-deep: #f6c08c; } }
@media (prefers-color-scheme: dark) { .app-compass { --brand-soft: #2e2014; } }
@media (prefers-color-scheme: dark) { .app-compass { --glow-1: #1b1610; } }
@media (prefers-color-scheme: dark) { .app-compass { --glow-2: #181219; } }
@media (prefers-color-scheme: dark) { .app-compass { --glow-3: #14110d; } }
.app-compass { max-width: 100%; }
.app-compass { padding: 0; }
.compass-stage { min-height: calc(100vh - 60px); }
.compass-stage { display: flex; }
.compass-stage { align-items: center; }
.compass-stage { justify-content: center; }
.compass-stage { padding: 3rem 1.25rem 4rem; }
.compass-stage { background: radial-gradient(120% 90% at 15% 0%, var(--glow-1) 0%, transparent 55%), radial-gradient(110% 90% at 95% 10%, var(--glow-2) 0%, transparent 50%), radial-gradient(140% 120% at 50% 110%, var(--glow-3) 0%, transparent 60%); }
.compass-card { width: 100%; }
.compass-card { max-width: 560px; }
.compass-card { background: var(--panel); }
.compass-card { border: 1px solid var(--line); }
.compass-card { border-radius: 28px; }
.compass-card { padding: 2.75rem 2.5rem 2.5rem; }
.compass-card { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 24px 60px -28px rgba(28,24,20,.45), 0 8px 22px -16px rgba(28,24,20,.3); }
.compass-card { text-align: center; }
@media (prefers-color-scheme: dark) { .compass-card { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 28px 70px -30px rgba(0,0,0,.7); } }
@media (max-width: 540px) { .compass-card { padding: 2rem 1.4rem 1.75rem; } }
@media (max-width: 540px) { .compass-card { border-radius: 22px; } }
.compass-top { margin-bottom: 2rem; }
.compass-eyebrow { display: inline-block; }
.compass-eyebrow { text-transform: uppercase; }
.compass-eyebrow { letter-spacing: .16em; }
.compass-eyebrow { font-size: .72rem; }
.compass-eyebrow { font-weight: 700; }
.compass-eyebrow { color: var(--brand-deep); }
.compass-eyebrow { margin: 0 0 1rem; }
.compass-eyebrow.is-result { color: var(--brand-deep); }
.compass-rail { position: relative; }
.compass-rail { height: 8px; }
.compass-rail { border-radius: 999px; }
.compass-rail { background: var(--sunk); }
.compass-rail { overflow: hidden; }
.compass-rail::after { content: ""; }
.compass-rail::after { position: absolute; }
.compass-rail::after { inset: 0; }
.compass-rail::after { width: 25%; }
.compass-rail::after { border-radius: 999px; }
.compass-rail::after { background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 100%); }
.compass-rail::after { transition: width .45s cubic-bezier(.34, 1.56, .64, 1); }
.compass-rail.at-1::after { width: 25%; }
.compass-rail.at-2::after { width: 50%; }
.compass-rail.at-3::after { width: 75%; }
.compass-rail.at-4::after { width: 100%; }
.compass-card h2 { font-size: clamp(1.7rem, 5vw, 2.3rem); }
.compass-card h2 { line-height: 1.12; }
.compass-card h2 { letter-spacing: -.02em; }
.compass-card h2 { margin: .2rem 0 0; }
.compass-lead { color: var(--muted); }
.compass-lead { font-size: 1.02rem; }
.compass-lead { margin: .85rem auto 0; }
.compass-lead { max-width: 38ch; }
.compass-answers { display: flex; }
.compass-answers { flex-direction: column; }
.compass-answers { gap: .7rem; }
.compass-answers { margin: 1.9rem 0 0; }
.compass-answers button { display: block; }
.compass-answers button { width: 100%; }
.compass-answers button { margin: 0; }
.compass-answers button { padding: 1.05rem 1.3rem; }
.compass-answers button { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.compass-answers button { font-size: 1.05rem; }
.compass-answers button { font-weight: 550; }
.compass-answers button { line-height: 1.3; }
.compass-answers button { text-align: left; }
.compass-answers button { color: var(--ink); }
.compass-answers button { background: var(--paper-2); }
.compass-answers button { border: 1.5px solid var(--line); }
.compass-answers button { border-radius: 16px; }
.compass-answers button { cursor: pointer; }
.compass-answers button { transition: transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s ease, border-color .14s ease, background .14s ease; }
.compass-answers button:hover { transform: translateY(-2px); }
.compass-answers button:hover { border-color: var(--brand); }
.compass-answers button:hover { background: var(--brand-soft); }
.compass-answers button:hover { box-shadow: 0 12px 26px -16px rgba(196,111,51,.55); }
.compass-answers button:active { transform: translateY(0) scale(.985); }
.compass-answers button:focus-visible { outline: 3px solid var(--brand); }
.compass-answers button:focus-visible { outline-offset: 2px; }
.compass-result { padding: .4rem 0 .2rem; }
.compass-burst { font-size: 3.4rem; }
.compass-burst { line-height: 1; }
.compass-burst { margin: 0 0 .4rem; }
.compass-burst { animation: pop .55s cubic-bezier(.34,1.56,.64,1) both; }
.compass-result h1 { font-size: clamp(2rem, 7vw, 2.9rem); }
.compass-result h1 { line-height: 1.05; }
.compass-result h1 { letter-spacing: -.025em; }
.compass-result h1 { margin: .15rem 0 0; }
.compass-result h1 { background: linear-gradient(100deg, var(--brand-deep), var(--brand)); }
.compass-result h1 { -webkit-background-clip: text; }
.compass-result h1 { background-clip: text; }
.compass-result h1 { color: transparent; }
.compass-why { color: var(--ink-soft); }
.compass-why { font-size: 1.06rem; }
.compass-why { line-height: 1.6; }
.compass-why { margin: 1rem auto 0; }
.compass-why { max-width: 40ch; }
.compass-why strong { color: var(--brand-deep); }
.compass-cta { display: inline-flex; }
.compass-cta { align-items: center; }
.compass-cta { gap: .45rem; }
.compass-cta { margin: 1.7rem 0 0; }
.compass-cta { padding: .95rem 1.7rem; }
.compass-cta { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.compass-cta { font-size: 1.02rem; }
.compass-cta { font-weight: 650; }
.compass-cta { color: #fff; }
.compass-cta { text-decoration: none; }
.compass-cta { background: linear-gradient(100deg, var(--brand) 0%, var(--brand-deep) 100%); }
.compass-cta { border-radius: 999px; }
.compass-cta { box-shadow: 0 14px 30px -12px rgba(196,111,51,.6); }
.compass-cta { transition: transform .14s ease, box-shadow .14s ease; }
.compass-cta:hover { color: #fff; }
.compass-cta:hover { transform: translateY(-2px); }
.compass-cta:hover { box-shadow: 0 20px 38px -14px rgba(196,111,51,.7); }
.compass-cta:focus-visible { outline: 3px solid var(--brand-deep); }
.compass-cta:focus-visible { outline-offset: 3px; }
.compass-restart { margin: 1.7rem 0 0; }
.compass-restart button { margin: 0; }
.compass-restart button { padding: .55rem 1.1rem; }
.compass-restart button { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.compass-restart button { font-size: .9rem; }
.compass-restart button { font-weight: 550; }
.compass-restart button { color: var(--muted); }
.compass-restart button { background: transparent; }
.compass-restart button { border: 1.5px solid var(--line); }
.compass-restart button { border-radius: 999px; }
.compass-restart button { cursor: pointer; }
.compass-restart button { transition: color .14s ease, border-color .14s ease; }
.compass-restart button:hover { color: var(--brand-deep); }
.compass-restart button:hover { border-color: var(--brand); }
.compass-restart button:focus-visible { outline: 3px solid var(--brand); }
.compass-restart button:focus-visible { outline-offset: 2px; }
.app-compass .source-reveal { max-width: 560px; }
.app-compass .source-reveal { margin: 1.75rem auto 0; }