:root { color: #202326; background: #f8f7f2; font-family: "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 90% 0%, #e1eee8 0, transparent 30rem), #f8f7f2; color: #202326; }
button { font: inherit; cursor: pointer; }
#app { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.screen { width: min(100%, 620px); animation: rise .32s ease-out; }
.intro, .question, .result { padding: 18px 0 38px; }
.centered { min-height: 76dvh; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { margin: 0 0 12px; color: #54766a; font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.8rem, 7vw, 2.75rem); line-height: 1.35; letter-spacing: -.04em; }
h2 { font-size: 1.25rem; line-height: 1.5; }
p { line-height: 1.8; }
.future-preview { border-left: 2px solid #98baab; margin: 28px 0; padding: 4px 0 4px 19px; }
.future-preview p { font-weight: 650; line-height: 1.7; margin: 0 0 14px; }
.intro-bottom { background: #fff; border-radius: 20px; padding: 24px; box-shadow: 0 8px 28px #2340310d; }
.intro-bottom small { display: block; text-align: center; color: #68726e; margin-top: 14px; }
.button { border: 0; border-radius: 12px; width: 100%; background: #1e5145; color: white; min-height: 58px; padding: 14px 18px; font-weight: 700; box-shadow: 0 7px 0 #123d33; transition: transform .15s, box-shadow .15s; }
.button:active { transform: translateY(5px); box-shadow: 0 2px 0 #123d33; }
.button + .button { margin-top: 12px; }
.secondary { background: #e8eee9; color: #1e5145; box-shadow: 0 7px 0 #cedbd3; }
.text-back { display: block; width: 100%; margin-top: 18px; border: 0; background: transparent; color: #60716a; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.text-back:disabled { opacity: .45; cursor: default; }
.future-screen .text-back { color: #c4dace; }
.check-list { list-style: none; padding: 0; margin: 8px 0 32px; }
.check-list li { padding: 14px 0; border-bottom: 1px solid #dce4df; }
.check-list li::before { content: "✓"; color: #3f816f; margin-right: 12px; font-weight: 800; }
.progress-wrap { margin-bottom: 34px; }.progress-copy { color: #60716a; font-size: .78rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 8px; }.progress { height: 5px; background: #dce6df; border-radius: 99px; overflow: hidden; }.progress span { display: block; height: 100%; background: #4e907d; border-radius: inherit; transition: width .3s ease; }
.question-title { font-size: clamp(1.45rem, 6vw, 2.25rem); margin-bottom: 30px; }.answers { display: grid; gap: 11px; }.answer { display: flex; align-items: center; gap: 13px; width: 100%; background: #fff; color: #27312d; border: 1px solid #d8e3dd; border-radius: 14px; padding: 16px; min-height: 67px; text-align: left; font-weight: 650; line-height: 1.5; transition: border-color .15s, transform .15s, background .15s; }.answer:hover { border-color: #55907e; }.answer:active, .answer.chosen { transform: scale(.985); background: #e9f3ee; border-color: #34735f; }.answer span { color: #34735f; border: 1px solid #b8d2c7; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: .76rem; }
.future-screen { background: #244b42; border-radius: 24px; padding: 28px 20px 34px; color: #f7f6ef; }.future-screen .eyebrow, .future-screen .progress-copy { color: #c4dace; }.future-screen .progress { background: #466c61; }.future-screen .progress span { background: #cfb36b; }.future-event { margin: 24px 0 30px; }.future-event p { opacity: 0; animation: appear .45s forwards; animation-delay: calc(var(--delay) * .18s); font-weight: 650; font-size: 1.03rem; line-height: 1.7; }.future-event strong { display: block; margin-top: 25px; color: #f0d78e; line-height: 1.6; }.future-screen .answer { background: #f6f5ef; }
.intermission { text-align: center; }.spark { color: #c5942b; display: block; font-size: 2.4rem; margin-bottom: 12px; }.intermission p { color: #5d6d65; }.analysis-list { margin-top: 30px; }.analysis-list p { display: flex; gap: 12px; align-items: center; margin: 0; padding: 10px 0; opacity: 0; animation: appear .25s forwards; animation-delay: calc(var(--delay) * .18s); }.analysis-list span { height: 9px; width: 9px; border-radius: 50%; background: #c5942b; box-shadow: 0 0 0 5px #f4e8c9; }
.type-name { color: #1d5e4e; margin-bottom: 10px; }.lead { color: #58655f; margin-bottom: 34px; }.result-section { background: #fff; border-radius: 18px; padding: 22px; margin: 16px 0; box-shadow: 0 7px 24px #1e40310a; }.result-section h2 { margin-bottom: 14px; }.strengths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.strengths article { background: #eff6f1; border-radius: 12px; padding: 14px; }.strengths b, .strengths span { display: block; }.strengths span { margin-top: 7px; font-size: .8rem; line-height: 1.55; color: #52615a; }.axis { margin: 15px 0; }.axis > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: .92rem; }.axis span { color: #527567; font-size: .78rem; font-weight: 700; }.meter { height: 7px; border-radius: 9px; background: #e1ebe5; overflow: hidden; }.meter i { display: block; height: 100%; background: #5b9a86; border-radius: inherit; }.point { background: #edf5ef; }.point p { margin-bottom: 0; font-size: 1.12rem; font-weight: 700; }.future-result { background: #244b42; color: white; }.future-result .eyebrow { color: #cfddcf; }.future-result p:last-child { margin-bottom: 0; color: #e3ece6; }.next-question { text-align: center; padding: 24px 8px; }.next-question p { font-weight: 700; font-size: 1.1rem; }.cta { background: #c58e20; box-shadow: 0 7px 0 #9d6e16; }.cta:active { box-shadow: 0 2px 0 #9d6e16; }.next-step { text-align: center; }.next-step p { color: #58655f; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes appear { to { opacity: 1; } }
@media (min-width: 700px) { #app { padding: 46px; }.intro-bottom, .result-section { padding: 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }