/* Pearl: soft silver surfaces on a charcoal stage. Loaded after app.css. */
:root {
  color-scheme: light;
  --bg: #ededed; --surface: #fafafa;
  --ink: #191919; --ink-2: #555; --ink-3: #666;
  --line: #00000012; --line-strong: #00000026;
  --accent: #191919; --accent-hover: #333; --accent-ink: #fff;
  --accent-soft: #fff; --danger: #a32929;
  --glass: #ffffff75; --glass-border: #ffffff90;
  --serif: var(--sans);
  --iridescent: linear-gradient(115deg,#caa5f5,#e9efbc 28%,#efd6e8 53%,#b6dfed 76%,#849cf0);
}
html { background: #171717; }
body { background: radial-gradient(ellipse at 65% 0,#69696966,transparent 48%),#171717; padding: 28px 12px; }
body::before { inset: 0; width: auto; height: auto; border: 0; border-radius: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
#app { background: linear-gradient(170deg,#fff 0,#efefef 36%,#cecece 100%); border-radius: 36px; overflow: clip; box-shadow: 0 28px 90px #00000030, inset 0 1px 0 #ffffff; }
.page { min-height: calc(100dvh - 56px); }
.brand, .brand::before, .landing-copy h1, .landing-copy h1 em, .auth .hero h1 { color: var(--ink); }
.brand { font-weight: 550; }.brand::before { color: #252525; }
h1,h2,h3 { letter-spacing: -.045em; }
.landing-hero { padding-top: 35px; gap: 30px; }
.landing-copy { text-align: center; }
.landing-copy h1 { font-size: 36px; font-weight: 500; line-height: 1.3; }
.hero-tag, .section-tag, .eyebrow, .auth .eyebrow { color: var(--ink-2); font-weight: 500; }
.hero-tag { padding: 5px 11px; border-radius: 999px; background: #ffffff60; box-shadow: inset 0 1px 2px #fff; }
.hero-tag::before { background: #202020; }
.landing-sub, .auth .hero .sub { color: var(--ink-2); }
.btn { border-radius: 999px; font-weight: 500; }
.btn-primary { color: #fff; border: 1px solid #444; background: radial-gradient(ellipse at 50% 0,#494949,#111 75%); box-shadow: inset 0 1px 3px #ffffff60,0 4px 10px #00000012; }
.btn-primary:hover { background: #333; color: #fff; }.btn-primary:active { background: #111; }
.btn-secondary, .btn-google, .nav-account { background: #ffffff65; color: var(--ink); border-color: #ffffffa0; box-shadow: inset 0 1px 2px #ffffff; }
.btn-secondary:hover,.btn-google:hover { background: #fff; border-color: #ccc; }
.btn[disabled],.btn[aria-disabled="true"] { color: #777; background: #ddd; border-color: #d5d5d5; }
.landing-action .btn { justify-content: center; gap: 18px; }
:is(.auth-box,.charm-visual,.perspective,.preview-section,.preview-paper,.result-cover,.page-report .cards .card,.page-report .charm .card,.page-report .summary-text,.page-report .upsell,.report-contents,.callout,.item-list li,.type-gallery-card,.type-detail-card,.pass-product,.report-block) { background: #ffffff75; border: 1px solid #ffffff90; box-shadow: inset 0 1px 0 #fff,0 6px 20px #00000003; border-radius: 25px; }
.charm-visual { background: radial-gradient(ellipse at 50% 40%,#fff,#e0e0e0); }
.visual-caption,.visual-baseline { color: #666; }
.shape-back { background: linear-gradient(130deg,#fff,#dedede 60%,#b4b4b4); border-color: #ffffff; box-shadow: inset 0 1px 10px #fff,12px 20px 28px #00000018; }
.shape-front { border-color: #535353; background: transparent; box-shadow: inset -4px 1px 13px #00000020,6px 14px 20px #00000020; }
.visual-spark { color: #333; }
.trait-chip { background: #ffffffa8; color: #333; border-color: #ffffff; border-radius: 999px; box-shadow: 0 5px 18px #00000009; }
.trait-chip > span,.chip-second > span { background: #555; }
.perspective-icon { color: #252525; }.section-heading { text-align: center; }
.perspective:last-child { grid-column: 1 / -1; }
.preview-paper { background: #fafafa; }.preview-paper img { border-radius: 18px; mix-blend-mode: multiply; }
.casual-benefits li > span,.page-detail .detail-section > h2 .num { background: #fff9; color: #555; border-color: #fff; box-shadow: inset 0 1px 2px #fff; }
.auth .hero::before { color: #222; background: #ffffff80; border-color: #fff; box-shadow: inset 0 1px 2px #fff; border-radius: 50%; }
.auth .field span { color: #333; }
.field input,.auth .field input { color: #191919; background: #ffffff90; border-color: #00000018; border-radius: 15px; }
.field input::placeholder,.type-search input::placeholder { color: #707070; }
.field input:focus-visible,.auth .field input:focus-visible { outline-color: #777; background: #fff; }
.field input:-webkit-autofill { -webkit-text-fill-color: #191919; -webkit-box-shadow: 0 0 0 1000px #fafafa inset; caret-color: #191919; }
.auth .auth-links a,.auth-divider { color: #555; }.check input { accent-color: #222; }
.opt-box { border-color: #ffffff99; background: #ffffff65; border-radius: 22px; box-shadow: inset 0 1px 2px #fff; }
.opt-box:hover { border-color: #aaa; background: #ffffffaa; }
.opt input:checked + .opt-box { border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box,var(--iridescent) border-box; }
.opt-mark { border-color: #999; background: #ffffffa0; }
.opt input:checked + .opt-box .opt-mark { background: #222; border-color: #222; }
.opt input:checked + .opt-box .opt-mark svg { color: #fff; }
.progress { background: #00000012; }.progress > i { background: #262626; }
.bar { max-width: 430px; background: #efefeff2; border-color: #00000012; border-radius: 24px 24px 0 0; box-shadow: 0 -8px 24px #00000006; }
.q-num,.q-hint b { color: #222; }
.cover-top,.cover-caption,.cover-bottom,.cover-perception,.report-section-title > span,.tag-src,.report-contents a span { color: var(--ink-2); }
.cover-bottom { border-color: var(--line); }.cover-bottom span:first-child,.page-report .card-label strong { color: #222; }
.perception { background: #ffffff70; border-color: #fff; padding: 18px; }
.mock-banner,.todo,.payment-test-note { background: #ffffff85; color: #555; border-color: #aaa; }.badge-warn { color: var(--danger); border-color: currentColor; }
.type-number,.type-keywords li,.type-about,.type-extra summary,.pass-product-label,.pass-single,.pass-price span,.pass-features li { color: #555; }
.type-keywords li,.pass-single { background: #ffffff70; border-color: #fff; }
.type-view-switch { background: #ffffff65; }.type-view-switch button[aria-pressed="true"] { background: #222; color: #fff; border-color: #333; }
.pass-symbol { background: #ffffff80; border-color: #fff; }.pass-features li::before { color: #222; }
.style-poles>span.active { background: #fff; border-color: #888; }
.footer { background: transparent; border-color: #00000010; }.toast,.skip-link { background: #222; color: #fff; }
.faq-section { margin-top: 52px; padding: 37px 0 12px; border-top: 1px solid var(--line); text-align: center; }
.faq-label { display: inline-flex; align-items: center; gap: 8px; background: #ffffff50; border-radius: 99px; padding: 4px 10px; font-size: 9px; }.faq-label > span { color: #666; }
.faq-section h2 { font-size: 29px; font-weight: 500; margin-top: 14px; }
.faq-intro { font-size: 12px; color: #606060; margin-top: 8px; }
.faq-list { margin-top: 29px; display: grid; gap: 7px; text-align: left; }
.faq-item { border: 1px solid transparent; border-radius: 22px; background: #ffffff60; }
.faq-item[open] { background: linear-gradient(#fff,#fff) padding-box,var(--iridescent) border-box; }
.faq-item summary { display: grid; grid-template-columns: 21px 1fr 29px; align-items: center; gap: 10px; padding: 16px 13px; list-style: none; font-size: 12px; line-height: 1.5; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-number { display: grid; place-items: center; width: 21px; height: 23px; background: #ffffff90; border-radius: 7px; box-shadow: inset 0 1px 3px #fff,0 1px 4px #00000004; font-size: 10px; }
.faq-toggle { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #fff; background: radial-gradient(#151515 30%,#333 65%,#777); box-shadow: inset 0 0 4px #ffffff70; }
.faq-toggle::before { content: '+'; font-size: 21px; font-weight: 300; line-height: 1; }
.faq-item[open] .faq-toggle { background: linear-gradient(#fff,#fff) padding-box,var(--iridescent) border-box; border: 1px solid transparent; color: #222; box-shadow: none; }
.faq-item[open] .faq-toggle::before { content: '×'; }
.faq-answer { padding: 0 43px 22px 44px; color: #626262; font-size: 12px; line-height: 1.8; }
.faq-footnote { font-size: 11px; color: #555; line-height: 2; margin-top: 25px; }.faq-footnote a { color: #222; text-underline-offset: 3px; }
@media (max-width: 450px) {
  body { padding: 0; } #app { border-radius: 0; } .page { min-height: 100dvh; }
  .topbar { padding-top: 23px; }.landing-hero { padding-top: 28px; }
}
@media (prefers-reduced-transparency: reduce) {
  :is(.auth-box,.perspective,.preview-section,.result-cover,.report-block,.bar) { background: #f3f3f3; backdrop-filter: none; }
}
@media print { body { padding: 0; } #app { border-radius: 0; } }