:root {
  --ink: #1a1712;
  --night: #17130e;
  --night-soft: #251e15;
  --paper: #f3eadb;
  --paper-deep: #e4d3b8;
  --gold: #c9a458;
  --gold-light: #e1c789;
  --red: #82351f;
  --muted: #7c7163;
  --line: rgba(118, 88, 39, .25);
  --serif: 'Songti SC', 'STSong', 'SimSun', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { margin: 0; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.page-shell { width: min(100%, 760px); min-height: 100svh; margin: 0 auto; }

.access-view {
  min-height: 100vh;
  color: #f1e7d5;
  background:
    radial-gradient(circle at 50% 26%, rgba(180, 129, 54, .2), transparent 31%),
    linear-gradient(155deg, #251d13 0, #100d09 62%, #19130e 100%);
}
.access-gate { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding: 22px 28px 34px; }
.access-gate::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(211,174,94,.22); pointer-events: none; }
.gate-masthead { align-self: start; }
.gate-frame { position: absolute; top: 86px; left: 50%; width: 420px; height: 420px; transform: translateX(-50%) rotate(45deg); border: 1px solid rgba(201,164,88,.08); }
.gate-frame::before, .gate-frame::after { content: ''; position: absolute; inset: 54px; border: 1px dashed rgba(201,164,88,.1); border-radius: 50%; }
.gate-frame::after { inset: 112px; border-style: solid; }
.gate-content { position: relative; z-index: 1; width: min(100%, 520px); margin: auto; padding: 46px 0 18px; text-align: center; }
.gate-seal { position: relative; width: 76px; height: 76px; margin: auto; display: grid; place-items: center; border: 2px solid #a95336; color: #d17a5a; font: 700 38px var(--serif); transform: rotate(-2deg); }
.gate-seal::before { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(193,89,56,.55); }
.gate-content .hero-kicker { margin: 26px 0 18px; }
.gate-content h1 { margin: 0; color: #f3e5c9; font: 700 clamp(35px, 8.5vw, 55px)/1.35 var(--serif); letter-spacing: .04em; }
.gate-lead { width: min(100%, 420px); margin: 20px auto 27px; color: rgba(239,226,200,.61); font: 14px/1.9 var(--serif); }
.access-form { display: grid; gap: 10px; padding: 19px; border: 1px solid rgba(201,164,88,.33); background: rgba(7,6,4,.45); box-shadow: 0 22px 65px rgba(0,0,0,.28); text-align: left; }
.access-form label { color: #d6bd88; font: 600 12px var(--serif); letter-spacing: .12em; }
.access-form input { width: 100%; height: 54px; padding: 0 15px; border: 1px solid rgba(220,194,139,.38); border-radius: 0; background: #f0e6d3; color: #211910; text-align: center; text-transform: uppercase; letter-spacing: .07em; }
.access-form button { min-height: 54px; border: 0; padding: 0 20px; background: linear-gradient(135deg, #d8b86f, #9f702b); color: #1b140c; font-weight: 750; }
.access-form button span { float: right; }
.access-form button:disabled { opacity: .62; cursor: wait; }
.access-error { min-height: 17px; margin: 0; color: #e9a58d; font-size: 11px; line-height: 1.5; text-align: center; }
.locked-features { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 22px auto 0; color: rgba(232,215,183,.58); font: 11px var(--serif); letter-spacing: .12em; }
.locked-features i { width: 14px; height: 1px; background: rgba(201,164,88,.32); }
.gate-note { margin: 13px 0 0; color: rgba(235,220,192,.36); font-size: 10px; line-height: 1.7; }
.access-loading { min-height: 100svh; display: grid; place-content: center; gap: 18px; text-align: center; color: rgba(238,224,197,.56); }
.access-loading .mini-seal { margin: auto; color: #cba660; border-color: #9d7133; }
.access-loading p { margin: 0; font: 13px var(--serif); letter-spacing: .1em; }

.home-view {
  min-height: 100vh;
  color: #f1e7d5;
  background:
    radial-gradient(circle at 50% 8%, rgba(188, 144, 71, .2), transparent 30%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,.018) 80px),
    linear-gradient(160deg, #201a12 0, #0f0d0a 62%, #18130e 100%);
}
.hero { position: relative; overflow: hidden; padding: 22px 28px 60px; }
.hero::before, .hero::after { content: ''; position: absolute; pointer-events: none; border: 1px solid rgba(211,174,94,.22); }
.hero::before { inset: 14px; }
.hero::after { inset: 20px; border-color: rgba(211,174,94,.08); }
.masthead { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; color: #c8a761; font: 12px/1.2 var(--serif); letter-spacing: .18em; }
.brand-mark { padding: 6px 8px; border: 1px solid rgba(201,164,88,.6); }
.edition { color: rgba(235,220,192,.5); letter-spacing: .08em; }
.hero-orbit { position: absolute; top: 80px; left: 50%; width: 400px; height: 400px; transform: translateX(-50%); border: 1px solid rgba(201,164,88,.11); border-radius: 50%; display: grid; place-items: center; }
.hero-orbit::before, .hero-orbit::after { content: ''; position: absolute; inset: 48px; border: 1px dashed rgba(201,164,88,.14); border-radius: 50%; transform: rotate(18deg); }
.hero-orbit::after { inset: 95px; border-style: solid; }
.hero-orbit span { color: rgba(201,164,88,.035); font: 900 250px/1 var(--serif); }
.hero-kicker { position: relative; z-index: 1; margin: 92px 0 24px; text-align: center; color: var(--gold-light); font: 600 13px/1.5 var(--serif); letter-spacing: .28em; }
.hero-kicker span { display: inline-block; width: 36px; height: 1px; margin: 0 10px 4px; background: linear-gradient(90deg, transparent, var(--gold)); }
.hero-kicker span:last-child { transform: scaleX(-1); }
.hero h1 { position: relative; z-index: 1; margin: 0; text-align: center; color: #f2e6ce; font: 700 clamp(39px, 9vw, 67px)/1.3 var(--serif); letter-spacing: .04em; text-shadow: 0 8px 30px rgba(0,0,0,.35); }
.hero-lead { position: relative; z-index: 1; width: min(560px, 94%); margin: 28px auto 44px; text-align: center; color: rgba(239,229,209,.72); font: 15px/2 var(--serif); }
.surname-search { position: relative; z-index: 2; padding: 20px; border: 1px solid rgba(203,167,92,.38); background: rgba(15,13,10,.82); box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.surname-search label { display: block; margin: 0 0 13px; color: #d8c395; font: 600 14px var(--serif); }
.input-wrap { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.input-wrap input { min-width: 0; height: 54px; padding: 0 16px; border: 1px solid rgba(222,199,149,.38); border-radius: 0; background: #f1e7d5; color: #251e16; font-size: 16px; }
.input-wrap input::placeholder { color: #968b79; }
.input-wrap button, .code-modal form button { border: 0; padding: 0 22px; background: linear-gradient(135deg, #d7b66c, #a77b31); color: #1c150c; font-weight: 750; }
.input-wrap button span { margin-left: 7px; }
.input-wrap button:disabled { opacity: .68; cursor: wait; }
.surname-search > p { margin: 11px 0 0; color: rgba(229,217,194,.46); font-size: 12px; }
.trust-statement { position: relative; z-index: 1; display: grid; grid-template-columns: 46px 1fr; gap: 15px; align-items: center; margin: 32px 3px; }
.trust-glyph { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #934830; color: #bb6b50; font: 700 20px var(--serif); transform: rotate(-3deg); }
.trust-statement p { margin: 0; color: rgba(238,227,207,.65); font-size: 13px; line-height: 1.75; }
.trust-statement strong { color: #ebd9b6; }
.chart-teaser { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 116px 1fr auto; gap: 16px; align-items: center; border: 1px solid rgba(201,164,88,.22); padding: 10px; background: rgba(243,234,219,.06); color: #efe1c5; text-align: left; }
.chart-teaser img { width: 116px; height: 82px; object-fit: cover; object-position: center 38%; filter: sepia(.32) contrast(.92); }
.chart-teaser b, .chart-teaser small { display: block; }
.chart-teaser b { margin-bottom: 7px; font: 600 15px var(--serif); }
.chart-teaser small { color: rgba(237,225,201,.48); }
.chart-teaser em { padding: 5px 7px; border: 1px solid rgba(201,164,88,.32); color: #c9a458; font-size: 11px; font-style: normal; }
.trust-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 24px; }
.trust-grid article { min-height: 154px; padding: 18px 13px; border-top: 1px solid rgba(201,164,88,.3); background: rgba(255,255,255,.025); }
.trust-grid span { color: #b88d43; font: 700 12px var(--serif); }
.trust-grid h2 { margin: 18px 0 8px; color: #e7d8b9; font: 600 14px var(--serif); }
.trust-grid p { margin: 0; color: rgba(237,225,201,.48); font-size: 11px; line-height: 1.7; }
.home-note { position: relative; z-index: 1; margin: 28px 8px 0; color: rgba(235,222,197,.38); font-size: 10px; line-height: 1.7; text-align: center; }

.lookup-view { min-height: 100vh; background: var(--paper); }
.lookup { padding: 24px 24px 56px; background: radial-gradient(circle at 50% 0, #fbf4e8, var(--paper) 54%, #e9dcc8); }
.back-button, .quiz-header button { border: 0; background: transparent; color: #766753; padding: 6px 0; }
.lookup-head { margin-top: 40px; text-align: center; }
.surname-seal { position: relative; width: 124px; height: 124px; margin: 0 auto 24px; display: grid; place-items: center; border: 2px solid var(--red); color: var(--red); transform: rotate(-1.5deg); }
.surname-seal::before, .surname-seal::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(130,53,31,.55); }
.surname-seal::after { inset: -7px 7px 7px -7px; border-color: rgba(130,53,31,.22); }
.surname-seal span { font: 700 63px/1 var(--serif); }
.surname-seal i { position: absolute; bottom: 8px; right: 8px; font: 500 9px/1 var(--serif); letter-spacing: .1em; writing-mode: vertical-rl; }
.section-kicker { margin: 0 0 12px; color: #9b773c; font: 700 12px/1.5 var(--serif); letter-spacing: .24em; text-transform: uppercase; }
.lookup-head h1 { margin: 0 auto 18px; max-width: 600px; font: 700 clamp(28px, 7vw, 43px)/1.45 var(--serif); }
.lookup-head > p:last-child { max-width: 560px; margin: auto; color: #776d60; font-size: 14px; line-height: 1.9; }
.lookup-panel { margin: 34px 0 28px; padding: 22px; border: 1px solid #c6ad82; background: rgba(255,252,245,.7); box-shadow: 0 18px 48px rgba(80,53,20,.08); }
.panel-label { margin-bottom: 12px; color: #8b6b3d; font: 600 12px var(--serif); letter-spacing: .15em; }
.path-list { display: grid; gap: 10px; }
.path-card { display: block; position: relative; padding: 16px; border-left: 3px solid #9a4f30; background: #f3e6d0; }
.path-card.selectable { padding-left: 45px; cursor: pointer; }
.path-card input { position: absolute; top: 22px; left: 16px; accent-color: var(--red); }
.path-line { display: block; color: #382d21; font: 600 15px/1.65 var(--serif); }
.path-card small { display: block; margin-top: 6px; color: #8d7c67; }
.uncertain { margin-top: 10px; border-left-color: #9e917d; background: #ede5d7; }
.text-button { width: 100%; margin-top: 17px; padding: 13px 0 5px; border: 0; border-top: 1px solid #d5c3a5; background: transparent; color: #82512d; text-align: left; font-weight: 650; }
.text-button span { float: right; }
.unlisted-seal .surname-seal { width: 100px; height: 100px; margin-bottom: 18px; }
.unlisted-seal .surname-seal span { font-size: 48px; }
.lookup-panel > h2 { margin: 0; text-align: center; font: 700 24px var(--serif); }
.lookup-panel > p { color: #756a5b; line-height: 1.8; text-align: center; }
.what-next { padding: 24px 8px; text-align: center; }
.what-next > span { color: #9a783f; font: 600 11px var(--serif); letter-spacing: .3em; }
.what-next h2 { margin: 13px 0 12px; font: 700 24px/1.5 var(--serif); }
.what-next p { margin: 0; color: #7b7164; font-size: 13px; line-height: 1.8; }
.primary-cta, .secondary-cta { width: 100%; min-height: 58px; border: 0; padding: 0 22px; font-weight: 750; }
.primary-cta { background: linear-gradient(135deg, #3b3022, #17130e); color: #f4e6c9; box-shadow: 0 14px 34px rgba(36,27,17,.18); }
.primary-cta span { float: right; color: #c6aa72; font-weight: 500; }
.fine-print, .result-disclaimer { color: #918474; font-size: 10px; line-height: 1.6; text-align: center; }

.quiz-view { min-height: 100vh; background: #f5eee3; }
.quiz { padding: 20px 22px 34px; background: radial-gradient(circle at 90% 4%, rgba(173,134,65,.13), transparent 28%), #f5eee3; }
.quiz-header { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; }
.quiz-header button { font-size: 21px; }
.progress-meta { display: flex; justify-content: space-between; color: #8a7555; font: 600 11px var(--serif); letter-spacing: .12em; }
.progress-meta em { color: #b1a48f; font-style: normal; }
.progress-track { grid-column: 2; height: 2px; margin-top: -7px; background: #ded2bf; }
.progress-track i { display: block; height: 100%; background: linear-gradient(90deg, #8a3f27, #bc8d44); transition: width .4s; }
.question-card { padding: 50px 0 20px; animation: enterQuestion .38s ease both; }
.backward .question-card { animation-name: enterBack; }
@keyframes enterQuestion { from { opacity: 0; transform: translateX(22px); } }
@keyframes enterBack { from { opacity: 0; transform: translateX(-22px); } }
.question-eyebrow { color: #9a8157; font: 600 13px/1.5 var(--serif); letter-spacing: .12em; }
.question-card h1 { margin: 14px 0 32px; font: 700 clamp(25px, 6.5vw, 37px)/1.58 var(--serif); letter-spacing: .015em; }
.options { display: grid; gap: 12px; }
.option { position: relative; width: 100%; min-height: 86px; display: grid; grid-template-columns: 42px 1fr 20px; gap: 12px; align-items: center; padding: 15px 17px; border: 1px solid #d3c5b0; border-radius: 2px; background: rgba(255,255,255,.66); color: #302b24; text-align: left; transition: .2s ease; }
.option b { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #a78e68; border-radius: 50%; color: #80623b; font: 700 14px var(--serif); }
.option span { font-size: 15px; line-height: 1.7; }
.option i { width: 15px; height: 15px; border: 1px solid #a99c89; border-radius: 50%; }
.option.selected { border-color: #8c4b31; background: #eee0cb; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(102,65,28,.1); }
.option.selected b { border-color: #8c4b31; background: #8c4b31; color: white; }
.option.selected i { border: 4px solid #8c4b31; }
.quiz-whisper { margin-top: 14px; color: #a29584; font: 11px/1.6 var(--serif); text-align: center; }

.calculating-view { min-height: 100vh; background: var(--night); color: #eadbbd; }
.calculating { min-height: 100svh; display: grid; place-content: center; gap: 30px; padding: 30px; text-align: center; }
.lineage-loader { position: relative; width: 150px; height: 150px; margin: auto; display: grid; place-items: center; border: 1px solid rgba(201,164,88,.35); border-radius: 50%; }
.lineage-loader span { color: #d6b86e; font: 700 66px var(--serif); }
.lineage-loader i { position: absolute; inset: -10px; border: 1px dashed rgba(201,164,88,.25); border-radius: 50%; animation: spin 9s linear infinite; }
.lineage-loader i:nth-child(3) { inset: 13px; animation-direction: reverse; animation-duration: 6s; }
.lineage-loader i:nth-child(4) { inset: 34px; animation-duration: 4s; }
@keyframes spin { to { transform: rotate(360deg); } }
.calculating p { color: rgba(236,221,192,.62); font: 14px/2 var(--serif); }

.result-view { min-height: 100vh; background: #15120e; }
.result { background: #15120e; color: #eee2c8; }
.result-nav { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid rgba(201,164,88,.18); color: #b99550; font: 12px var(--serif); letter-spacing: .14em; }
.result-nav button { border: 0; background: transparent; color: #9b8a6d; }
.result-section { position: relative; min-height: 84svh; padding: 80px 34px 74px; overflow: hidden; }
.result-section::before { content: attr(data-index); position: absolute; top: 24px; right: 24px; color: rgba(201,164,88,.33); font: 600 12px var(--serif); }
.result-cover { min-height: calc(100svh - 58px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 50% 34%, rgba(185,139,63,.18), transparent 31%), linear-gradient(#1b1711, #100e0b); }
.cover-halo { position: absolute; top: 12%; left: 50%; width: 440px; height: 440px; transform: translateX(-50%); border: 1px solid rgba(201,164,88,.13); border-radius: 50%; }
.cover-halo::before, .cover-halo::after { content: ''; position: absolute; inset: 45px; border: 1px dashed rgba(201,164,88,.12); border-radius: 50%; }
.cover-halo::after { inset: 105px; border-style: solid; }
.result-cover .surname-seal { z-index: 1; width: 146px; height: 146px; margin: 12px auto 18px; border-color: #b96043; color: #ca7759; }
.result-cover .surname-seal span { font-size: 73px; }
.result-cover h1 { z-index: 1; margin: 0; color: #f0dfbb; font: 900 78px/1.1 var(--serif); }
.result-cover h2 { z-index: 1; margin: 14px 0 15px; color: #d0ad68; font: 600 25px var(--serif); }
.cover-verdict { z-index: 1; max-width: 520px; margin: 0; color: rgba(239,227,204,.75); font: 15px/2 var(--serif); }
.result-path { z-index: 1; width: min(100%, 540px); margin-top: 28px; padding: 15px 17px; border: 1px solid rgba(201,164,88,.28); background: rgba(255,255,255,.035); color: #e4d1ab; text-align: left; }
button.result-path { cursor: zoom-in; }
.result-path small, .result-path b, .result-path em, .result-path span { display: block; }
.result-path small { margin-bottom: 7px; color: #a98a50; letter-spacing: .1em; }
.result-path b { font: 600 13px/1.6 var(--serif); }
.result-path em { margin-top: 8px; color: #9f8b68; font-size: 11px; font-style: normal; }
.result-path p { margin: 6px 0; color: #b6a78e; font-size: 12px; line-height: 1.6; }
.result-path span { margin-top: 6px; color: #cdb78e; font-size: 12px; }
.scroll-cue { position: absolute; bottom: 22px; color: rgba(239,227,204,.38); font-size: 10px; letter-spacing: .08em; }
.scroll-cue span { display: block; margin-top: 8px; }
.ink-card { background: linear-gradient(160deg, #e9ddc8, #f8f1e5 54%, #ded0bb); color: #30281f; }
.large-sigil { position: absolute; top: 44px; right: 24px; color: rgba(125,56,35,.08); font: 900 210px/1 var(--serif); }
.result-section h2 { position: relative; margin: 16px 0 25px; max-width: 610px; font: 700 clamp(29px, 7vw, 42px)/1.45 var(--serif); }
.result-section > p:not(.section-kicker) { position: relative; max-width: 620px; margin: 0; font: 16px/2.05 var(--serif); }
.state-card { background: radial-gradient(circle at 85% 10%, rgba(201,164,88,.11), transparent 35%), #1c1812; }
.quiet-line { margin-top: 36px; padding: 18px 20px; border-left: 2px solid #9f6c34; background: rgba(255,255,255,.035); color: #cbbd9f; font: 13px/1.8 var(--serif); }
.need-card { min-height: 78svh; display: flex; flex-direction: column; justify-content: center; background: #7f3521; color: #fff1dc; }
.need-card .section-kicker { color: #e7bd86; }
.quote-mark { position: absolute; top: -70px; right: 10px; color: rgba(255,255,255,.07); font: 900 380px/1 var(--serif); }
.blessing-card { background: radial-gradient(circle at 50% 15%, rgba(179,132,59,.15), transparent 29%), #14110d; }
.closing-line { position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; margin-top: 45px; padding-top: 24px; border-top: 1px solid rgba(201,164,88,.28); }
.closing-line b { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid #a45135; color: #c36e51; font: 700 36px var(--serif); }
.closing-line span { color: #cdbd9f; font: 14px/1.8 var(--serif); }
.result-actions { padding: 28px 24px 12px; background: #e9decb; }
.result-actions .primary-cta { background: #241d15; }
.secondary-cta { margin-top: 10px; border: 1px solid #8b7452; background: transparent; color: #503f2b; }
.result-disclaimer { margin: 0; padding: 13px 28px 45px; background: #e9decb; }

.modal-backdrop { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(7,6,5,.79); backdrop-filter: blur(8px); }
.code-modal { position: relative; width: min(100%, 440px); padding: 35px 25px 27px; border: 1px solid #c5a766; background: #f2e8d6; color: #2e271f; text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.modal-close { position: absolute; top: 10px; right: 12px; width: 35px; height: 35px; border: 0; background: transparent; color: #8a7963; font-size: 25px; }
.mini-seal { width: 52px; height: 52px; margin: 0 auto 18px; display: grid; place-items: center; border: 1px solid #8b3e28; color: #8b3e28; font: 700 25px var(--serif); }
.code-modal h2 { margin: 8px 0 12px; font: 700 25px/1.5 var(--serif); }
.code-modal > p:not(.section-kicker) { color: #7c6e5d; font-size: 13px; line-height: 1.7; }
.code-modal form { display: grid; gap: 10px; margin: 22px 0 18px; }
.code-modal form input { height: 52px; border: 1px solid #b6a183; background: #fffaf0; padding: 0 13px; text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.code-modal form button { min-height: 52px; }
.code-modal small { color: #948674; font-size: 10px; line-height: 1.6; }
.chart-backdrop { place-items: stretch center; overflow: auto; }
.chart-modal { width: min(100%, 900px); margin: auto; padding: 16px; background: #17130e; color: #e8d9ba; }
.chart-modal header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding: 8px 8px 16px; }
.chart-modal header p { margin: 0 0 7px; color: #a88850; font-size: 11px; letter-spacing: .16em; }
.chart-modal header h2 { margin: 0; font: 600 16px/1.5 var(--serif); }
.chart-modal .modal-close { position: static; color: #c6b18a; }
.chart-canvas { position: relative; overflow: auto; max-height: 74vh; background: #eee6d7; touch-action: pinch-zoom; }
.chart-canvas img { display: block; width: 100%; min-width: 620px; height: auto; }
.chart-pin { position: absolute; min-width: 22px; min-height: 20px; border: 3px solid #d33c25; border-radius: 50%; box-shadow: 0 0 0 5px rgba(211,60,37,.2), 0 0 22px rgba(211,60,37,.8); transform: translate(-20%, -15%); animation: pulsePin 1.6s infinite; pointer-events: none; }
.chart-pin i { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 4px 7px; background: #c93621; color: white; font: 600 11px var(--serif); white-space: nowrap; }
@keyframes pulsePin { 50% { box-shadow: 0 0 0 10px rgba(211,60,37,.08), 0 0 28px rgba(211,60,37,.55); } }
.chart-modal > p { margin: 12px 4px 2px; color: #998b74; font-size: 10px; line-height: 1.6; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 26px; transform: translate(-50%, 18px); max-width: min(90vw, 420px); padding: 11px 16px; border-radius: 4px; background: #2b4c38; color: #e5ffed; font-size: 13px; opacity: 0; pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #743627; color: #ffe6dc; }

@media (max-width: 560px) {
  .access-gate { padding-inline: 20px; }
  .access-gate::before { inset: 9px; }
  .gate-content { padding-top: 34px; }
  .gate-content .hero-kicker { margin-top: 23px; }
  .gate-content h1 { font-size: 36px; }
  .gate-lead { margin-block: 16px 20px; }
  .access-form { padding: 15px; }
  .locked-features { gap: 7px; }
  .hero { padding-inline: 20px; }
  .hero::before { inset: 9px; }
  .hero::after { display: none; }
  .hero-kicker { margin-top: 78px; }
  .hero-kicker span { width: 18px; margin-inline: 4px; }
  .input-wrap { grid-template-columns: 1fr; }
  .input-wrap button { min-height: 52px; }
  .chart-teaser { grid-template-columns: 82px 1fr; }
  .chart-teaser img { width: 82px; height: 72px; }
  .chart-teaser em { display: none; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid article { min-height: 0; display: grid; grid-template-columns: 35px 1fr; column-gap: 8px; }
  .trust-grid h2 { margin: 0; }
  .trust-grid p { grid-column: 2; }
  .lookup { padding-inline: 18px; }
  .lookup-panel { padding: 17px; }
  .question-card { padding-top: 37px; }
  .option { grid-template-columns: 38px 1fr 16px; padding: 13px; }
  .result-section { min-height: 88svh; padding: 70px 26px 60px; }
  .result-cover { min-height: calc(100svh - 58px); }
  .result-cover .surname-seal { width: 126px; height: 126px; }
  .result-cover h1 { font-size: 68px; }
  .large-sigil { font-size: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}