.character-page { --character-accent: #176aab; --character-quiet: #566b83; }
.character-shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding-top: calc(var(--header) + 22px); }
.character-breadcrumb { display: flex; gap: 12px; align-items: center; color: var(--character-quiet); font-size: 12px; }
.character-breadcrumb a:hover { color: var(--character-accent); text-decoration: underline; }
.character-eyebrow { margin: 0 0 20px; color: var(--character-accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; }
.character-watermark { margin-right: 5px; color: #6db2df; }
.character-hero { display: grid; grid-template-columns: 1fr 1.08fr; gap: 32px; align-items: center; min-height: 530px; padding: 34px 0 40px; }
.character-hero-copy { position: relative; z-index: 1; }
.character-hero h1 { margin: 0 0 24px; font-family: var(--serif); font-size: clamp(76px, 8vw, 110px); font-weight: 500; line-height: .98; letter-spacing: -.065em; }
.character-hero h1 > span { display: block; margin-top: 18px; color: var(--character-accent); font-size: clamp(27px, 3vw, 40px); font-style: italic; letter-spacing: -.045em; }
.character-lead { max-width: 450px; margin: 0; color: var(--character-quiet); font-size: 16px; line-height: 1.8; }
.character-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.character-button { display: inline-flex; justify-content: center; align-items: center; gap: 20px; min-height: 48px; padding: 13px 20px; border: 1px solid transparent; border-radius: 9px; background: #15568a; color: #fff; font: 700 12px/1.45 var(--sans); text-align: center; cursor: pointer; transition: background .16s, box-shadow .16s; }
.character-button:hover { background: #10446e; box-shadow: 0 5px 18px #15568a22; }
.character-button-secondary { border-color: #b3d1e3; color: #15568a; background: #ffffffaa; }
.character-button-secondary:hover { background: #e3f3fc; }
.character-page :is(a, button, input, summary):focus-visible { outline: 3px solid #2079bc; outline-offset: 4px; }
.character-hero-note { margin: 14px 0 0; color: var(--character-quiet); font-size: 11px; line-height: 1.6; }
.character-stage { position: relative; display: flex; min-width: 0; min-height: 440px; flex-direction: column; justify-content: center; isolation: isolate; }
.character-stage::before { position: absolute; z-index: -1; content: ''; inset: 0 0 8%; border: 1px solid #93bed844; border-radius: 50%; background: radial-gradient(ellipse, #7cbbe133, #c9eafd22 55%, transparent 72%); transform: scaleY(.76); }
.character-stage::after { position: absolute; z-index: -1; content: ''; inset: 30% 4% 12%; border: 1px solid #82b7d555; border-radius: 50%; transform: none; }
.character-stage-word { position: absolute; top: 6%; right: 4%; color: #6092ba20; font: 500 clamp(50px, 6.6vw, 88px)/1 var(--serif); letter-spacing: .12em; }
.character-card-fan { display: flex; align-items: center; justify-content: center; padding: 44px 12px 25px; }
.character-native-card { position: relative; width: 35%; max-width: 196px; margin: 0 -7px; transform-origin: 50% 70%; }
.character-native-card img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; border-radius: 10px; filter: drop-shadow(0 16px 14px #10395529); }
.character-native-r { transform: rotate(-11deg) translateY(23px) scale(.89); }
.character-native-sr { z-index: 1; transform: rotate(-1deg); }
.character-native-ssr { z-index: 2; transform: rotate(10deg) translateY(-13px) scale(1.05); }
.character-native-card figcaption { margin-top: 15px; text-align: center; color: var(--character-quiet); }
.character-native-card figcaption > span { font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.character-native-card figcaption > small { display: block; margin-top: 4px; font-size: 8px; letter-spacing: .04em; }
.character-stage-note { margin: 24px 0 0; color: var(--character-quiet); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-align: center; }
.character-quiz-section { display: grid; grid-template-columns: .74fr 1.5fr; gap: 60px; align-items: start; border-top: 1px solid var(--line); padding: 56px 0 64px; scroll-margin-top: calc(var(--header) + 24px); }
.character-section-copy { padding-top: 10px; }
.character-section-copy h2, .character-collection-note h2, .character-start h2 { margin: 0 0 17px; font: 500 clamp(34px, 3.5vw, 45px)/1.13 var(--serif); letter-spacing: -.04em; }
.character-section-copy > p:not(.character-eyebrow) { max-width: 280px; color: var(--character-quiet); font-size: 14px; line-height: 1.8; }
.character-mini-tag { display: inline-block; margin-top: 16px; padding: 8px 10px; border: 1px solid var(--line-bright); border-radius: 5px; color: var(--character-accent); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.character-quiz { min-width: 0; padding: 30px; border: 1px solid #bed7e9; border-radius: 18px; background: #ffffffd9; box-shadow: 0 16px 50px #15568a08; }
.character-quiz fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.character-quiz legend { display: block; float: left; width: 100%; margin-bottom: 25px; padding: 0; color: var(--ink); font-size: clamp(18px, 2vw, 23px); font-weight: 750; line-height: 1.55; letter-spacing: -.025em; }
.character-choices { display: grid; clear: both; grid-template-columns: 1fr 1fr; gap: 11px; }
.character-choice { position: relative; display: flex; min-width: 0; align-items: center; gap: 11px; min-height: 68px; padding: 12px; border: 1px solid #c9dce9; border-radius: 8px; background: #f8fcff; cursor: pointer; }
.character-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.character-choice:focus-within { outline: 3px solid #2079bc; outline-offset: 2px; }
.character-choice:has(input:checked) { border-color: #2374b2; background: #e8f4fc; }
.character-choice:hover { border-color: #78a8ca; }
.character-choice-letter { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; border: 1px solid #bfd5e6; border-radius: 6px; color: #316082; background: #fff; font-size: 10px; font-weight: 800; }
.character-choice-text { font-size: 12px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.character-choice-text small { display: block; margin-top: 3px; font-size: 10px; }
.character-choice[data-result="correct"] { border-color: #298260; background: #edf9f2; }
.character-choice[data-result="incorrect"] { border-color: #b15363; background: #fff0f2; }
.character-quiz fieldset:disabled .character-choice { cursor: default; }
.character-quiz-bottom { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 22px; }
.character-quiz-bottom > p { flex: 1 1 150px; margin: 0; color: var(--character-quiet); font-size: 11px; line-height: 1.6; }
.character-practice-note { margin: 21px 0 0; color: var(--character-quiet); font-size: 10px; line-height: 1.65; }
.character-quiz-result { margin-top: 22px; padding: 23px; border: 1px solid #bed7e9; border-radius: 10px; background: #edf7ff; }
.character-quiz-result > .character-eyebrow { margin-bottom: 10px; }
.character-quiz-result h3 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.035em; }
.character-quiz-result > p:not(.character-eyebrow) { color: var(--character-quiet); font-size: 13px; line-height: 1.8; }
.character-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 20px 0 14px; }
.character-text-button { padding: 8px 0; border: 0; background: none; color: var(--character-accent); font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.character-source { color: var(--character-quiet); font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.character-noscript, .character-answer-fallback { font-size: 13px; line-height: 1.8; }
.character-answer-fallback summary { cursor: pointer; color: var(--character-accent); }
.character-collection-note { display: grid; grid-template-columns: 1fr 1.1fr; gap: 65px; padding: 40px 0 56px; }
.character-collection-note h2 { max-width: 420px; font-size: 37px; }
.character-collection-note > div > p:not(.character-eyebrow) { margin: 0 0 15px; color: var(--character-quiet); font-size: 14px; line-height: 1.85; }
.character-collection-note .character-fine-print { font-size: 11px; }
.character-inline-link { color: var(--character-accent); font-size: 12px; font-weight: 750; }
.character-start { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; padding: 42px; border: 1px solid #b7d3e7; border-radius: 18px; background: linear-gradient(120deg, #e0f0fc, #f3faff 70%); scroll-margin-top: calc(var(--header) + 24px); }
.character-start-copy > p:not(.character-eyebrow) { color: var(--character-quiet); font-size: 14px; line-height: 1.85; }
.character-start-copy > .character-button { margin-top: 12px; }
.character-start-steps ol { display: grid; gap: 22px; list-style: none; margin: 0; padding: 0; }
.character-start-steps li { display: flex; align-items: start; gap: 15px; }
.character-start-steps li > span { padding-top: 2px; color: var(--character-accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.character-start-steps li > div { flex: 1; min-width: 0; }
.character-start-steps strong { font-size: 13px; }
.character-start-steps li p { margin: 6px 0 0; color: var(--character-quiet); font-size: 11px; line-height: 1.7; }
.character-command { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 9px 8px 12px; border: 1px solid #b3cfe1; border-radius: 6px; background: #fff; }
.character-command code { min-width: 0; padding: 0; border: 0; background: transparent; color: #15568a; font-size: 12px; overflow-wrap: anywhere; }
.character-command button { padding: 7px 10px; border: 1px solid #c7dce9; border-radius: 4px; background: #eef7fd; color: #15568a; font-size: 10px; font-weight: 750; cursor: pointer; }
.character-admin-link { margin: 20px 0 0 29px; color: var(--character-quiet); font-size: 11px; line-height: 1.7; }
.character-admin-link a { color: var(--character-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.character-affiliation { margin: 22px 0 0; color: var(--character-quiet); font-size: 10px; line-height: 1.8; text-align: center; }
.character-index { min-height: 70vh; padding-bottom: 40px; }
.character-index h1 { margin: 24px 0; font: 500 clamp(44px, 6vw, 70px)/1.1 var(--serif); letter-spacing: -.04em; }
.character-index > .character-eyebrow { margin-top: 40px; }
.character-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 24px; margin-top: 40px; }
.character-index-card { display: flex; align-items: center; gap: 25px; max-width: 550px; padding: 24px; border: 1px solid var(--line-bright); border-radius: 16px; background: var(--panel); }
.character-index-card img { width: 140px; height: auto; }
.character-index-card h2 { margin: 12px 0; font: 500 40px/1.1 var(--serif); }
.character-index-card p { color: var(--character-quiet); font-size: 12px; line-height: 1.8; }
:root[data-theme="dark"] .character-page { --character-accent: #8bcbff; --character-quiet: #adc5d7; }
:root[data-theme="dark"] .character-page :is(.character-quiz, .character-start, .character-quiz-result, .character-command) { border-color: #34586c; background: #112f40; }
:root[data-theme="dark"] .character-page .character-button-secondary { color: #b7dfff; border-color: #41637d; background: #143548; }
:root[data-theme="dark"] .character-page :is(.character-choice, .character-choice-letter, .character-command button) { color: #d7ebf8; border-color: #41637d; background: #13394b; }
:root[data-theme="dark"] .character-page .character-choice:has(input:checked) { background: #1d4c68; border-color: #8bcbff; }
:root[data-theme="dark"] .character-page .character-choice[data-result="correct"] { border-color: #7dd3a6; background: #174532; }
:root[data-theme="dark"] .character-page .character-choice[data-result="incorrect"] { border-color: #f3a5b0; background: #4c2735; }
:root[data-theme="dark"] .character-page .character-command code { color: #c7e8ff; }
@media (max-width: 1000px) { .character-hero { gap: 16px; } .character-actions { gap: 9px; } .character-button { padding: 12px 14px; font-size: 11px; gap: 12px; } .character-quiz-section { gap: 30px; grid-template-columns: .65fr 1.5fr; } .character-start { gap: 35px; padding: 30px; } }
@media (max-width: 760px) { .character-shell { width: calc(100% - 36px); padding-top: calc(var(--header) + 18px); } .character-hero { grid-template-columns: 1fr; gap: 15px; padding-top: 32px; padding-bottom: 24px; } .character-hero h1 { font-size: 85px; } .character-hero h1 > span { font-size: 33px; } .character-lead { max-width: 500px; font-size: 15px; } .character-stage { min-height: 350px; max-width: 530px; width: 100%; margin: 0 auto; } .character-stage-word { top: 4%; font-size: 66px; } .character-card-fan { padding-top: 30px; } .character-native-card { max-width: 175px; } .character-stage-note { margin-top: 15px; font-size: 7px; } .character-quiz-section { grid-template-columns: 1fr; gap: 24px; padding-top: 34px; padding-bottom: 35px; } .character-section-copy > p:not(.character-eyebrow) { max-width: 100%; margin-bottom: 0; } .character-section-copy .character-eyebrow { margin-bottom: 12px; } .character-mini-tag { margin-top: 14px; } .character-quiz { padding: 23px; } .character-collection-note { grid-template-columns: 1fr; gap: 4px; padding: 22px 0 35px; } .character-collection-note h2 { font-size: 34px; } .character-start { grid-template-columns: 1fr; gap: 30px; padding: 25px; } .character-start h2 { font-size: 36px; } .character-index-card { gap: 20px; padding: 18px; } .character-index-card img { width: 110px; } }
@media (max-width: 420px) { .character-hero h1 { font-size: 76px; } .character-hero h1 > span { font-size: 30px; } .character-eyebrow { font-size: 8px; } .character-actions { flex-direction: column; align-items: stretch; } .character-button { min-height: 46px; font-size: 12px; } .character-stage { min-height: 310px; } .character-stage-word { font-size: 51px; top: 8%; } .character-native-card { margin: 0 -5px; } .character-native-card figcaption > small { font-size: 7px; } .character-quiz { padding: 19px; } .character-choices { grid-template-columns: 1fr; gap: 9px; } .character-choice { min-height: 54px; } .character-quiz-bottom { align-items: stretch; flex-direction: column; } .character-quiz-bottom > p { flex: 0 0 auto; } .character-quiz-result { padding: 18px; } .character-result-actions { align-items: stretch; flex-direction: column; gap: 8px; } .character-result-actions .character-button { gap: 10px; font-size: 11px; } .character-start { padding: 21px; } .character-start-copy > .character-button { width: 100%; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .character-button { transition: none; } }