.fortune { max-width: 760px; padding-bottom: 48px; font-size: 17px; line-height: 1.8; }
.fd-heading { position: relative; padding: 24px 0; }
.fd-heading h1 { font-size: clamp(32px,7vw,46px); margin: 6px 0; letter-spacing: -.04em; }
.fd-lead { font-size: 20px; margin: 4px 0; }
.fd-art { display: block; width: 220px; max-width: 65%; height: auto; margin: 20px auto 0; mix-blend-mode: multiply; }
.fortune h2 { font-size: 25px; letter-spacing: -.03em; line-height: 1.5; }
.fortune h3 { font-size: 20px; line-height: 1.5; margin: 0 0 12px; }
.fortune p { overflow-wrap: anywhere; }
.fd-fields { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.fortune fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.fd-fields label { font-size: 15px; font-weight: 700; min-width: 0; }
.fd-fields input,.fd-fields select { display: block; width: 100%; min-width: 0; min-height: 54px; font: inherit; font-size: 18px; color: var(--text); border: 1px solid var(--border,#d8d2c9); border-radius: 12px; padding: 10px; background: #fff; margin-top: 8px; }
.fd-fields :focus-visible,.fd-text-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.fd-fields [aria-invalid=true] { border: 2px solid #ae4035; }
#fd-submit { width: 100%; }
.fd-error { color: #a2362d; font-size: 16px; min-height: 1.5em; }
.fd-note { font-size: 14px; line-height: 1.7; color: var(--muted); }
.fd-panel { background: #fff; border: 1px solid var(--border,#e2ded7); border-radius: 20px; padding: 24px; margin: 24px 0; }
.fd-panel p:last-child { margin-bottom: 0; }
.fd-overall { text-align: center; border-top: 5px solid #7b8490; }
.fd-overall[data-tone=bright] { border-top-color: #b84f43; }
.fd-overall[data-tone=steady] { border-top-color: #42705b; }
.fd-overall[data-tone=care] { border-top-color: #344f70; }
.fd-score { margin: 0; }
.fd-score strong { font-size: 64px; line-height: 1.3; }
.fd-score span { font-size: 16px; color: var(--muted); }
.fd-tone { font-weight: 700; }
.fd-domains { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fd-domains .fd-panel { margin: 0; }
.fd-domain-score { display: inline-block; font-size: 24px; font-weight: 700; }
.fd-domain-tone { display: block; font-size: 14px; color: var(--muted); }
.fd-word { font-size: 22px; font-weight: 700; }
.fd-first { background: #f3ede6; }
.fd-lucky { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; }
.fd-lucky dt { font-size: 14px; color: var(--muted); }
.fd-lucky dd { margin: 6px 0 0; font-size: 18px; font-weight: 700; }
#fd-color-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-right: 8px; }
.fd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fd-actions .btn:first-child { grid-column: 1 / -1; }
.fd-actions .btn { width: 100%; min-width: 0; white-space: normal; }
.fd-text-button { font: inherit; min-height: 48px; background: transparent; border: 0; padding: 10px 0; text-decoration: underline; color: var(--text); cursor: pointer; text-align: left; }
.fd-return { text-align: center; margin-top: 32px; font-weight: 700; }
.fd-explainer { margin-top: 40px; border-top: 1px solid var(--border,#ded8ce); padding-top: 20px; }
.fd-explainer summary { cursor: pointer; min-height: 48px; padding: 12px 0; font-weight: 700; }
.fd-disclaimer { color: var(--muted); font-size: 14px; margin-top: 32px; }
@media(max-width:540px) { .fd-domains { grid-template-columns: 1fr; } .fd-panel { padding: 20px; } .fd-fields { gap: 8px; } .fd-lucky { grid-template-columns: 1fr; } }

#fd-state { display: block; width: 100%; min-height: 54px; font: inherit; border: 1px solid var(--border,#d8d2c9); border-radius: 12px; padding: 10px; background: #fff; margin: 8px 0 16px; }
#fd-state:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }