:root {
  color-scheme: dark;
  --space: #080e13;
  --space-soft: #101a20;
  --panel: #142127;
  --panel-deep: #0b171c;
  --line: #2b4046;
  --text: #f2f4ef;
  --muted: #9aadaa;
  --mint: #99e5cc;
  --mint-bright: #b8f6df;
  --silver: #dce5e0;
  --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--space); scroll-behavior: smooth; }
body { min-width: 0; margin: 0; color: var(--text); background: radial-gradient(circle at 78% 4%, #173735 0, transparent 27rem), radial-gradient(circle at 8% 32%, #17232e 0, transparent 32rem), var(--space); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--mint-bright); outline-offset: 4px; }
.site-shell { min-height: 100vh; min-height: 100dvh; overflow-x: clip; position: relative; }
.site-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .28; background-image: radial-gradient(#b9d4cf .65px, transparent .65px); background-size: 41px 47px; mask-image: linear-gradient(#000, transparent 75%); }
.site-header, .site-footer, #app { position: relative; z-index: 1; }
.site-header { width: min(100% - 40px, 1100px); height: 70px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(153,229,204,.16); }
.brand { display: flex; align-items: center; gap: 9px; color: var(--silver); font-size: 14px; font-weight: 700; letter-spacing: .15em; }
.brand-icon { color: var(--mint); font-size: 21px; line-height: 1; }
.header-code, .site-footer, .eyebrow, .home-topline, .section-index, .section-heading > span, .share-card-top, .share-card-bottom, .result-hero-top, .result-hero-bottom { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.header-code { color: var(--muted); font-size: 11px; }
.site-footer { width: min(100% - 40px, 1100px); margin: auto; padding: 27px 0 35px; border-top: 1px solid rgba(153,229,204,.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; color: #819692; font-size: 10px; }
.site-footer nav { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; }.site-footer a { color: #a8cfc1; text-decoration: none; }.site-footer a:hover { text-decoration: underline; }
.screen-enter { animation: enter .42s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* 首页 */
.home-screen { width: min(100% - 40px, 800px); margin: 0 auto; padding: 34px 0 84px; text-align: center; }
.home-topline { display: flex; justify-content: space-between; gap: 12px; color: var(--mint); font-size: 10px; text-align: left; }
.status-dot { width: 6px; height: 6px; flex: 0 0 6px; align-self: center; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.home-topline span:last-child { margin-left: auto; color: var(--muted); }
.planet-art { width: 205px; height: 205px; margin: 20px auto 26px; position: relative; display: grid; place-items: center; }
.planet-ring { position: absolute; inset: 14px; border: 1px solid rgba(153,229,204,.32); border-radius: 50%; }
.ring-one { transform: rotate(-27deg) scaleX(.58); }
.ring-two { transform: rotate(28deg) scaleX(.58); }
.planet-core { width: 126px; height: 126px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #7ac5ae; border-radius: 50%; background: radial-gradient(circle at 34% 24%, #377f70, #153d3a 48%, #0a2328 100%); box-shadow: 0 0 0 10px rgba(115,209,179,.06), 0 0 50px rgba(82,203,166,.2); transform: rotate(-8deg); }
.planet-core span { color: #c5f8e7; font: 11px ui-monospace, monospace; letter-spacing: .26em; }
.planet-core strong { color: white; font: 500 33px/1.2 ui-monospace, monospace; letter-spacing: -.06em; }
.planet-spark { position: absolute; color: var(--mint); }
.spark-one { top: 14px; right: 26px; font-size: 21px; }.spark-two { bottom: 17px; left: 18px; font-size: 14px; }
.eyebrow { margin: 0; color: var(--mint); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.home-screen h1 { margin: 16px 0 24px; font-size: clamp(34px, 8vw, 54px); line-height: 1.34; letter-spacing: .015em; text-wrap: balance; }
.home-screen h1 em { color: var(--mint-bright); font-style: normal; }
.home-story { max-width: 580px; margin: auto; color: var(--silver); font-size: 15px; line-height: 1.9; }
.home-story p { margin: 0 0 12px; }.home-story strong { color: var(--mint-bright); font-weight: 600; }
.scan-box { max-width: 600px; margin: 30px auto 0; padding: 18px; border: 1px solid var(--line); background: rgba(18,35,40,.7); text-align: left; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.scan-box-heading { display: flex; justify-content: space-between; color: var(--mint); font-size: 11px; letter-spacing: .12em; }.scan-box-heading span:last-child { color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; }
.scan-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }.scan-tags span { border: 1px solid #35534f; padding: 5px 10px; color: #dce9e2; background: #152d2d; font-size: 12px; }
.home-intro { margin: 26px 0 20px; color: var(--silver); font-size: 14px; }
.primary-button, .restart-button { width: min(100%, 310px); min-height: 56px; border: 1px solid var(--mint); background: var(--mint); color: #072621; display: inline-flex; align-items: center; justify-content: center; gap: 30px; padding: 12px 20px; font-weight: 800; letter-spacing: .09em; transition: background .2s, transform .2s; }
.primary-button:hover, .restart-button:hover { background: #c3f6e5; transform: translateY(-2px); }.primary-button span, .restart-button span { font-size: 21px; font-weight: 400; }
.home-note { margin: 16px 0 0; color: #8ca19e; font-size: 11px; line-height: 1.8; }

/* 题目 */
.quiz-screen { width: min(100% - 40px, 760px); min-height: calc(100dvh - 145px); margin: auto; padding: 20px 0 70px; }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; min-height: 40px; }.back-button { padding: 8px 0; border: 0; background: transparent; color: var(--mint); font-size: 14px; }.back-button:disabled { visibility: hidden; }
.question-counter { color: var(--muted); font: 14px ui-monospace, monospace; letter-spacing: .09em; }.question-counter strong { color: var(--mint-bright); font-size: 27px; font-weight: 500; }
.progress-track { height: 3px; margin-top: 12px; background: #24363b; overflow: hidden; }.progress-track span { height: 100%; display: block; background: linear-gradient(90deg, #5bb99c, #b3ffdd); transition: width .25s; }
.quiz-content { padding-top: clamp(40px, 7vh, 76px); }.quiz-content h1 { margin: 13px 0 0; font-size: clamp(31px, 5vw, 44px); line-height: 1.35; letter-spacing: .01em; }
.question-scene { margin: 25px 0 12px; color: #c9d9d3; font-size: 16px; line-height: 1.75; white-space: pre-line; }.question-prompt { margin: 0 0 24px; color: var(--mint-bright); font-size: 19px; line-height: 1.6; white-space: pre-line; }
.options { display: grid; gap: 10px; }.option-button { width: 100%; min-height: 66px; padding: 12px 14px; display: flex; align-items: center; gap: 13px; border: 1px solid #344c50; background: rgba(18,33,39,.94); color: var(--text); text-align: left; transition: border-color .16s, background .16s, transform .16s; }
.option-letter { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border: 1px solid #5b817a; border-radius: 50%; color: var(--mint); font: 14px ui-monospace, monospace; }.option-button.is-selected .option-letter { color: #0b2724; background: var(--mint); }.option-copy { flex: 1; min-width: 0; font-size: 15px; line-height: 1.56; white-space: pre-line; }.option-arrow { color: #7baba0; font-size: 18px; }.quiz-hint { margin: 18px 0 0; color: #8ca19e; font-size: 11px; text-align: center; }
@media (hover: hover) and (pointer: fine) { .option-button:hover:not(.is-selected) { border-color: #6c9c8f; background: #172d32; transform: none; } }
.option-button { -webkit-tap-highlight-color: transparent; }.option-button:focus-visible { outline: 2px solid var(--mint-bright); outline-offset: 2px; }.option-button.is-selected { border-color: var(--mint); background: #205149; transform: none; }

/* 过渡 */
.interlude-screen, .loading-screen { min-height: calc(100dvh - 145px); padding: 45px 24px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }.scan-orbit { width: 135px; height: 135px; margin-bottom: 34px; display: grid; place-items: center; position: relative; border: 1px solid #59877c; border-radius: 50%; box-shadow: 0 0 0 14px rgba(153,229,204,.035), 0 0 0 28px rgba(153,229,204,.025); }.scan-orbit::before { content: ""; position: absolute; inset: 10px; border: 1px dashed var(--mint); border-radius: 50%; animation: rotate 6s linear infinite; }.scan-orbit span { color: var(--mint-bright); font: 24px ui-monospace, monospace; }.loading-orbit span { font-size: 45px; }
@keyframes rotate { to { transform: rotate(360deg); } }.interlude-screen h1, .loading-screen h1 { margin: 12px 0; font-size: clamp(26px, 6vw, 36px); }.interlude-highlight { margin: 8px 0 20px; color: var(--mint-bright); font-size: 24px; line-height: 1.6; }.interlude-note { color: var(--muted); font-size: 14px; }.loading-lines { color: var(--silver); font-size: 14px; }.loading-lines p { margin: 7px 0; opacity: 0; animation: appear .22s forwards; }.loading-lines p:nth-child(2) { animation-delay: .42s; }.loading-lines p:nth-child(3) { animation-delay: .84s; }@keyframes appear { to { opacity: 1; } }

/* 结果 */
.result-screen { width: min(100%, 870px); margin: 0 auto; }.result-hero { min-height: 580px; padding: 23px 24px; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; border: 1px solid #477d6f; background: radial-gradient(circle at 50% 32%, rgba(75,159,133,.27), transparent 43%), linear-gradient(155deg, #132d2c, #0c1a22 72%); }.result-hero::before { content: ""; width: 390px; height: 390px; position: absolute; left: calc(50% - 195px); top: 58px; border: 1px solid rgba(153,229,204,.12); border-radius: 50%; box-shadow: 0 0 0 55px rgba(0,0,0,0), 0 0 0 56px rgba(153,229,204,.08), 0 0 0 110px rgba(0,0,0,0), 0 0 0 111px rgba(153,229,204,.045); pointer-events: none; }
.result-hero > * { position: relative; z-index: 1; }.result-hero-top, .result-hero-bottom { width: 100%; display: flex; justify-content: space-between; gap: 12px; color: #9bc7b9; font-size: 10px; text-align: left; }.result-overline { margin: 59px 0 2px; color: var(--mint-bright); font-size: 13px; letter-spacing: .2em; }.result-hero-emoji { font-size: 72px; line-height: 1.2; filter: drop-shadow(0 0 18px rgba(150,235,207,.3)); }.result-label { margin: 15px 0 0; color: #9bc7b9; font-size: 12px; letter-spacing: .16em; }.result-hero h1 { max-width: 630px; margin: 12px 0 3px; color: #fff; font-size: clamp(33px, 7vw, 56px); line-height: 1.26; text-wrap: balance; overflow-wrap: anywhere; }.result-subtitle { margin: 0; color: var(--mint); font-size: 14px; }.hero-verdict { max-width: 520px; margin: 28px 0; color: #e8f4eb; font-size: clamp(19px, 4vw, 25px); line-height: 1.6; }.hero-secondary { width: min(100%, 470px); margin: auto 0 48px; padding: 17px; border-top: 1px solid rgba(153,229,204,.4); border-bottom: 1px solid rgba(153,229,204,.4); display: flex; flex-direction: column; gap: 3px; }.hero-secondary span { color: #9bc7b9; font-size: 11px; letter-spacing: .15em; }.hero-secondary strong { color: white; font-size: 18px; font-weight: 600; }
.result-description { max-width: 560px; margin: 18px auto 0; color: #c7ded1; font-size: 15px; line-height: 1.7; }
.result-hero-art { width: clamp(152px, 28vw, 190px); margin: 8px auto 0; position: relative; filter: drop-shadow(0 18px 30px rgba(0,0,0,.25)); transform: rotate(-4deg); }.result-hero-art::before { content: ""; position: absolute; inset: -8px; border: 1px dashed rgba(197,255,223,.47); border-radius: 27%; transform: rotate(9deg); }.result-hero-art img { display: block; width: 100%; height: auto; border-radius: 23%; }
.result-body { width: min(100% - 40px, 760px); margin: 0 auto; padding: 47px 0 80px; }.result-body section { margin-bottom: 42px; }.section-index, .section-heading > span { color: var(--mint); font-size: 10px; }.result-intro h2, .section-heading h2, .text-panel h2 { margin: 9px 0 15px; font-size: clamp(23px, 4.5vw, 30px); line-height: 1.4; }.result-intro > p, .text-panel > p { color: #d9e4de; line-height: 1.9; font-size: 15px; }.secondary-line { margin-top: 24px; padding: 17px 18px; border-left: 2px solid var(--mint); background: rgba(153,229,204,.07); }.secondary-line span { color: var(--mint); font-size: 12px; }.secondary-line p { margin: 6px 0 0; color: var(--silver); font-size: 14px; line-height: 1.7; }
.stats-panel { padding: 22px 18px; border: 1px solid var(--line); background: rgba(18,33,39,.9); }.section-heading h2 { margin-bottom: 4px; }.section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }.stats-list { display: grid; gap: 17px; margin: 26px 0 20px; }.stat-row { display: grid; grid-template-columns: 76px 1fr 29px; align-items: center; gap: 10px; }.stat-row > span { color: var(--silver); font-size: 12px; }.stat-row strong { color: var(--mint-bright); font: 14px ui-monospace, monospace; text-align: right; }.stat-track { display: block; width: 100%; height: 8px; overflow: hidden; border-radius: 99px; }.stats-note { margin: 0; color: #8fa39e; font-size: 11px; }.text-panel { padding: 0 0 0 20px; border-left: 1px solid #3d7668; }.advice-panel { border-left-color: #a0c4b6; }
.quote-panel { min-height: 185px; padding: 28px; position: relative; display: flex; flex-direction: column; justify-content: center; border: 1px solid #50897a; background: linear-gradient(140deg, #1b423b, #11302f); }.quote-panel > span:first-child { color: var(--mint); font-size: 12px; }.quote-panel blockquote { max-width: 530px; margin: 11px 0; color: white; font-size: clamp(21px, 5vw, 31px); font-weight: 600; line-height: 1.5; }.quote-decoration { position: absolute; right: 25px; bottom: 17px; color: rgba(153,229,204,.38); font-size: 50px; }
.share-section .section-heading { margin-bottom: 18px; }.share-card { width: min(100%, 450px); min-height: 610px; margin: 0 auto; padding: 22px 23px 18px; display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid #a9e9d4; background: radial-gradient(circle at 50% 23%, #27534a 0, transparent 36%), linear-gradient(155deg, #173933, #0b2025 74%); box-shadow: 0 20px 70px rgba(0,0,0,.28); text-align: center; }.share-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(185,245,221,.16); pointer-events: none; }.share-card > * { position: relative; }.share-card-top, .share-card-bottom { display: flex; justify-content: space-between; gap: 8px; color: #a9dcca; font-size: 9px; text-align: left; }.share-kicker { margin: 45px 0 5px; color: #a9dcca; font-size: 12px; letter-spacing: .16em; }.share-emoji { font-size: 64px; line-height: 1.2; }.share-card h3 { max-width: 100%; margin: 9px auto 0; color: white; font-size: clamp(25px, 6.3vw, 35px); line-height: 1.3; overflow-wrap: anywhere; text-wrap: balance; }.share-divider { width: 52px; height: 1px; margin: 20px auto 18px; background: var(--mint); }.share-small-label { margin: 0; color: #9bc7b9; font-size: 11px; }.share-secondary { margin: 4px 0 21px; color: #fff; font-size: 16px; font-weight: 600; }.share-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 14px 0; border-top: 1px solid rgba(153,229,204,.3); border-bottom: 1px solid rgba(153,229,204,.3); }.share-stats > div { display: flex; flex-direction: column; gap: 4px; }.share-stats span { color: #a9d0c1; font-size: 10px; }.share-stats strong { color: white; font: 600 21px ui-monospace, monospace; }.share-verdict { margin: 22px 0 auto; }.share-verdict span { color: #a9d0c1; font-size: 11px; }.share-verdict p { margin: 6px auto 22px; color: white; font-size: 17px; font-weight: 600; line-height: 1.55; }.share-card-bottom { padding-top: 13px; border-top: 1px solid rgba(153,229,204,.2); font-size: 8px; }
.restart-button { width: 100%; max-width: 450px; display: flex; margin: 0 auto; }.result-disclaimer { margin: 18px 0 42px; color: var(--muted); font-size: 11px; text-align: center; }.debug-panel { max-width: 650px; margin: 0 auto; padding: 15px; border: 1px dashed #4b6d68; color: var(--muted); font-size: 12px; }.debug-panel summary { cursor: pointer; }.debug-panel pre { max-width: 100%; overflow: auto; padding-top: 12px; color: var(--silver); font-size: 11px; line-height: 1.5; }

/* 免费预览、付费墙与结果卡 */
.paywall-screen { width: min(100% - 40px, 700px); margin: 0 auto; padding: 48px 0 70px; }
.teaser-panel { position: relative; overflow: hidden; padding: 33px 28px; border: 1px solid #548d7c; background: radial-gradient(circle at 50% 4%, rgba(112,215,180,.18), transparent 52%), #102328; text-align: center; }
.teaser-panel::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(153,229,204,.18); pointer-events: none; }
.teaser-panel > * { position: relative; }
.teaser-alert { width: 82px; height: 82px; margin: 27px auto 7px; display: grid; place-items: center; border: 2px solid #d5ef91; border-radius: 50%; box-shadow: 0 0 0 10px rgba(213,239,145,.07), 0 0 32px rgba(213,239,145,.13); transform: rotate(-9deg); }
.teaser-alert span { color: #e9ffb4; font: 800 54px/1 ui-monospace, monospace; }
.teaser-panel h1 { margin: 15px 0 9px; color: #fff; font-size: clamp(29px, 6vw, 40px); }
.teaser-intro { margin: 0 auto; color: #c3d5cf; font-size: 16px; line-height: 1.7; }.teaser-intro span { color: #e9ffb4; font-weight: 700; }
.teaser-message { max-width: 530px; margin: 27px auto 0; padding: 18px 20px; border: 1px solid #6b8f79; background: rgba(9,28,29,.78); text-align: left; transform: rotate(-1deg); box-shadow: 5px 6px 0 rgba(0,0,0,.13); }
.teaser-message span { display: block; color: #e9ffb4; font: 700 11px ui-monospace, monospace; letter-spacing: .12em; }
.teaser-message p { margin: 10px 0 0; color: #f3f8ee; font-size: clamp(17px, 4vw, 20px); font-weight: 700; line-height: 1.65; }
.teaser-hint { max-width: 520px; margin: 22px auto 0; color: var(--mint); font-size: 15px; line-height: 1.7; }
.sealed-identity { max-width: 530px; margin: 24px auto 0; padding: 17px 12px 13px; display: flex; flex-direction: column; gap: 2px; border: 1px solid rgba(153,229,204,.32); background: repeating-linear-gradient(115deg, rgba(153,229,204,.03) 0 4px, transparent 4px 10px); }
.sealed-identity span { color: #88b9aa; font: 10px ui-monospace, monospace; letter-spacing: .23em; }.sealed-identity strong { color: #eaf7e9; font-size: 17px; letter-spacing: .07em; }.sealed-identity i { color: #8cb9a6; font-size: 11px; font-style: normal; letter-spacing: .45em; }
.locked-file { margin: 21px auto 0; color: #d4e8db; font-size: 13px; font-weight: 700; }
.paywall-panel { margin-top: 22px; padding: 29px 25px 24px; border: 1px solid var(--line); background: rgba(18,33,39,.9); }.paywall-panel h2 { margin: 10px 0 19px; font-size: clamp(23px, 5vw, 30px); }.paywall-panel ul { padding: 0; margin: 0 0 24px; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px 17px; }.paywall-panel li { color: #dce9e2; font-size: 14px; }.paywall-panel li span { margin-right: 8px; color: var(--mint); }.pay-price { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 13px; padding-top: 15px; border-top: 1px solid #33504b; }.pay-price span { color: var(--muted); font-size: 13px; }.pay-price strong { color: var(--mint-bright); font-size: 34px; }.pay-button { width: 100%; max-width: none; }.payment-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }.action-error { min-height: 1.5em; margin: 12px 0 0; color: #ffbdb9; font-size: 13px; }.text-button { display: block; margin: 20px auto 0; padding: 8px; border: 0; background: transparent; color: var(--mint); text-decoration: underline; }.primary-button:disabled { opacity: .65; cursor: wait; transform: none; }
.reveal-screen h1 { color: var(--mint-bright); }.card-preview-wrap { width: min(100%, 450px); margin: 0 auto 18px; border: 1px solid #85c8b3; background: #0d2829; min-height: 350px; }.card-preview-wrap img { display: block; width: 100%; height: auto; }.share-actions { width: min(100%,450px); margin: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.share-actions .primary-button { width: 100%; grid-column: 1 / -1; }.secondary-button { min-height: 47px; padding: 9px; border: 1px solid #609888; background: #173733; color: white; font-size: 13px; }.secondary-button:hover { background: #205149; }
.legal-screen { width: min(100% - 40px, 760px); margin: 0 auto; padding: 45px 0 85px; }.legal-screen h1 { font-size: 34px; }.legal-screen section { padding: 22px 0; border-top: 1px solid var(--line); }.legal-screen h2 { color: var(--mint); font-size: 22px; }.legal-screen p, .legal-screen li { color: var(--silver); font-size: 14px; line-height: 1.85; }.legal-screen a { color: var(--mint-bright); }

@media (min-width: 720px) {
  .home-screen { padding-top: 48px; }.planet-art { margin-top: 26px; }.quiz-content { padding-top: 65px; }.result-screen { margin-top: 22px; }.result-hero { border-radius: 2px; }.result-body { padding-top: 65px; }
}
@media (max-width: 480px) {
  .site-header { height: 59px; }.site-footer { flex-direction: column; gap: 3px; text-align: center; }.home-screen { padding: 23px 0 62px; }.planet-art { width: 180px; height: 180px; margin: 12px auto 20px; }.planet-core { width: 115px; height: 115px; }.home-screen h1 { margin-top: 11px; font-size: clamp(29px, 8vw, 38px); }.home-story { font-size: 14px; }.scan-box { margin-top: 23px; }.quiz-screen { padding-top: 10px; }.quiz-content { padding-top: 33px; }.quiz-content h1 { font-size: 32px; }.question-scene { margin: 18px 0 10px; font-size: 15px; line-height: 1.65; }.question-prompt { margin-bottom: 19px; font-size: 17px; }.option-button { min-height: 62px; padding: 10px 12px; gap: 11px; }.option-copy { font-size: 15px; }.result-hero { min-height: 560px; padding: 19px 19px; border-left: 0; border-right: 0; }.result-overline { margin-top: 43px; }.result-hero-emoji { font-size: 66px; }.result-hero h1 { font-size: clamp(30px, 8vw, 39px); }.hero-verdict { margin: 22px 0; }.result-body { padding-top: 41px; }.share-card { padding: 19px 18px 16px; min-height: 590px; }.share-kicker { margin-top: 37px; }.share-card h3 { font-size: clamp(24px, 7vw, 30px); }.share-stats strong { font-size: 19px; }.share-card-bottom { font-size: 7px; }
}
@media (max-width: 480px) { .paywall-screen { padding-top: 22px; }.teaser-panel { padding: 27px 17px; }.paywall-panel { padding: 23px 18px; }.paywall-panel ul { grid-template-columns: 1fr; gap: 9px; }.share-actions { gap: 8px; }.share-actions .primary-button { max-width: none; }.card-preview-wrap { min-height: 250px; } }
@media (max-width: 350px) {
  .site-header, .site-footer, .home-screen, .quiz-screen, .result-body { width: calc(100% - 30px); }.header-code { font-size: 9px; }.home-screen h1 { font-size: 28px; }.share-card { padding-left: 14px; padding-right: 14px; }.share-card h3 { font-size: 24px; }.share-stats span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }