#my-story-card{--f-bg:#080c17;--f-panel:#101a30;--f-deep:#14264c;--f-text:#f4f0e8;--f-sub:#b7c5df;--f-line:#35486e;--f-gold:#e4c18c;--f-blue:#2e50e7;--f-red:#ff8276;color:var(--f-text);background:var(--f-bg);color-scheme:dark;border-radius:20px;overflow:hidden;position:relative;font-family:Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:16px;line-height:1.75;box-sizing:border-box} #my-story-card *{box-sizing:border-box} #my-story-card [hidden]{display:none!important} #my-story-card button,#my-story-card input,#my-story-card select,#my-story-card textarea{font:inherit} #my-story-card .f-chrome{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:17px 26px;border-bottom:1px solid var(--f-line)} #my-story-card .f-brand{color:var(--f-gold);font-weight:500} #my-story-card .f-small{font-size:12px;color:var(--f-sub)} #my-story-card .f-layout{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr)} #my-story-card .f-guide{min-width:0;background:var(--f-deep)} #my-story-card .f-portrait{height:410px;overflow:hidden;background:#172e59} #my-story-card .f-portrait img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 24%} #my-story-card .f-guide-body{padding:21px 22px 25px} #my-story-card .f-guide-body p{margin:0 0 11px} #my-story-card .f-voice-name{font-size:21px;font-weight:500;color:var(--f-gold)} #my-story-card .f-voice-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:18px 0} #my-story-card .f-voice{min-width:0;min-height:66px;padding:9px 5px;border:1px solid var(--f-line);border-radius:9px;background:var(--f-bg);color:var(--f-text);text-align:center} #my-story-card .f-voice strong{display:block;font-weight:500;font-size:15px} #my-story-card .f-voice span{display:block;font-size:11px;color:var(--f-sub)} #my-story-card .f-voice img{display:block;width:30px;height:30px;object-fit:cover;border-radius:50%;margin:0 auto 5px} #my-story-card .f-voice[aria-pressed=true]{background:var(--f-blue);border-color:var(--f-blue)} #my-story-card .f-voice[aria-pressed=true] span{color:#e3eaff} #my-story-card .f-main{min-width:0;padding:29px 33px;background:var(--f-panel)} #my-story-card h1{color:var(--f-red);font-size:32px;line-height:1.4;font-weight:700;letter-spacing:-.04em;word-break:keep-all;margin:0 0 10px} #my-story-card h2{font-size:23px;line-height:1.5;font-weight:500;margin:0 0 15px;word-break:keep-all} #my-story-card .f-sample{display:block;color:var(--f-gold);font-size:12px;margin-bottom:8px} #my-story-card .f-modules{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:19px 0} #my-story-card .f-questions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:19px 0} #my-story-card .f-button{min-height:44px;padding:9px 15px;border:1px solid var(--f-line);border-radius:9px;background:transparent;color:var(--f-text);font-weight:500;white-space:normal} #my-story-card .f-button:hover{background:var(--f-deep)} #my-story-card .f-primary{background:var(--f-blue);border-color:var(--f-blue);color:#fff} #my-story-card .f-primary:hover{background:#4164ed} #my-story-card .f-link{min-height:44px;background:transparent;border:0;padding:7px 0;color:var(--f-gold);font-size:13px;text-align:left;text-decoration:underline;text-underline-offset:4px} #my-story-card .f-story{display:grid;gap:21px} #my-story-card .f-story section{min-width:0} #my-story-card .f-story h3{font-size:15px;font-weight:500;color:var(--f-gold);margin:0 0 6px} #my-story-card .f-story p{font-size:16px;line-height:1.95;margin:0;word-break:keep-all;overflow-wrap:anywhere} #my-story-card .f-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:25px} #my-story-card .f-report-launch{text-align:left;min-width:155px} #my-story-card .f-report-launch strong{display:block;font-weight:500} #my-story-card .f-report-launch span{display:block;color:var(--f-sub);font-size:12px} #my-story-card .f-report-intro{margin:0 0 18px} #my-story-card .f-report-issuer{color:var(--f-gold);text-align:right;margin:22px 0 0} #my-story-card .f-note{font-size:12px;color:var(--f-sub);margin:20px 0 0} #my-story-card .f-details{border-top:1px solid var(--f-line);padding-top:12px;margin-top:20px;font-size:12px;color:var(--f-sub)} #my-story-card .f-details summary{min-height:37px} #my-story-card .f-details p{margin:5px 0} #my-story-card .f-status{min-height:23px;font-size:13px;color:var(--f-gold);margin:14px 0 0} #my-story-card dialog{position:absolute;inset:22px auto auto 50%;transform:translateX(-50%);margin:0;width:min(620px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:none;overflow:visible;border:1px solid var(--f-line);border-radius:15px;padding:0;background:var(--f-panel);color:var(--f-text);box-shadow:0 25px 90px #000a} #my-story-card dialog::backdrop{background:#030711ca} #my-story-card .f-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 21px;border-bottom:1px solid var(--f-line)} #my-story-card .f-dialog-head h2{font-size:18px;margin:0} #my-story-card .f-close{min-height:44px;background:transparent;border:0;color:var(--f-sub);padding:7px 0 7px 14px} #my-story-card .f-dialog-body{padding:23px} #my-story-card .f-fields{display:grid;gap:14px} #my-story-card .f-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px} #my-story-card label{display:block;min-width:0;color:var(--f-text)} #my-story-card .f-label{display:block;font-size:16px;margin-bottom:5px;color:var(--f-text)} #my-story-card .f-photo-preview{display:block;width:auto;max-width:100%;height:160px;object-fit:contain;object-position:left center;margin-top:10px} #my-story-card .f-photo-name{overflow-wrap:anywhere;margin:5px 0} #my-story-card .f-photo-actions{display:flex;flex-wrap:wrap;gap:10px} #my-story-card .f-optional{font-size:12px;color:var(--f-sub);margin-left:4px} #my-story-card input,#my-story-card select,#my-story-card textarea{display:block;width:100%;min-width:0;min-height:46px;background:var(--f-bg);color:var(--f-text);border:1px solid var(--f-line);border-radius:0;padding:10px 11px;font-size:16px} #my-story-card input::placeholder,#my-story-card textarea::placeholder{color:#8c9cba;opacity:1} #my-story-card textarea{min-height:76px;resize:vertical;line-height:1.6} #my-story-card .f-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:21px} #my-story-card .f-form-actions .f-primary{margin-left:auto} #my-story-card .f-error{color:#ffb0a8;font-size:14px;margin:12px 0 0} #my-story-card .f-cost{font-size:25px;color:var(--f-gold);font-weight:500;margin:20px 0 2px} #my-story-card .f-preview-copy{display:grid;gap:17px} #my-story-card .f-preview-copy h3{font-size:15px;color:var(--f-gold);font-weight:500;margin:0 0 5px} #my-story-card .f-preview-copy p{margin:0;overflow-wrap:anywhere} @media(max-width:700px){#my-story-card{border-radius:15px}#my-story-card .f-chrome{padding:13px 19px}#my-story-card .f-layout{grid-template-columns:1fr}#my-story-card .f-guide{display:grid;grid-template-columns:35% minmax(0,1fr)}#my-story-card .f-portrait{height:265px}#my-story-card .f-guide-body{padding:18px 15px}#my-story-card .f-guide-body>p:not(.f-voice-name){font-size:13px}#my-story-card .f-voice-name{font-size:19px}#my-story-card .f-voice-picks{gap:5px;margin:12px 0}#my-story-card .f-voice{min-height:61px;padding:8px 3px}#my-story-card .f-voice strong{font-size:13px}#my-story-card .f-voice span{font-size:11px}#my-story-card .f-main{padding:25px 23px}#my-story-card h1{font-size:27px}#my-story-card .f-pair{grid-template-columns:1fr}#my-story-card .f-dialog-body{padding:19px}#my-story-card .f-story p{word-break:normal}} @media(max-width:360px){#my-story-card .f-chrome{padding:12px 15px;gap:7px}#my-story-card .f-chrome .f-small{font-size:11px}#my-story-card .f-guide{grid-template-columns:31% minmax(0,1fr)}#my-story-card .f-guide-body{padding:17px 12px}#my-story-card .f-guide-body>p:not(.f-voice-name){font-size:12px}#my-story-card .f-main{padding:23px 18px}#my-story-card h1{font-size:25px}#my-story-card .f-dialog-body{padding:17px}#my-story-card .f-form-actions .f-primary{width:100%;margin-left:0}#my-story-card .f-button{padding:9px 12px}} @media(max-width:700px){#my-story-card .f-questions{grid-template-columns:1fr}#my-story-card .f-report-launch{width:100%}} html{background:#080c17;color-scheme:dark}body{margin:0;padding:20px;font-family:Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}#my-story-card{max-width:1180px;margin:0 auto}#my-story-card a.f-button{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}#my-story-card button:disabled{opacity:.55}#my-story-card a[aria-disabled=true]{pointer-events:none;opacity:.55}#my-story-card dialog{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 32px);overflow:auto}#my-story-card .f-native-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px}#my-story-card .f-native-cards .f-button{text-align:left;justify-content:flex-start}#my-story-card .f-checkout-frame{width:100%;height:min(650px,70dvh);border:0;background:#080c17}#my-story-card .f-loading{color:var(--f-sub)}@media(max-width:700px){body{padding:0}#my-story-card{border-radius:0}#my-story-card dialog{max-height:calc(100dvh - 16px)}#my-story-card .f-native-cards{grid-template-columns:1fr}} /* V3 additions remain inside the existing Fate page and dialog. */ #my-story-card .f-consultation{border:1px solid var(--f-line);border-radius:10px;padding:11px 13px;margin:14px 0;color:var(--f-sub)} #my-story-card .f-consultation>summary,#my-story-card .f-evidence>summary{cursor:pointer;color:var(--f-gold);font-size:13px;min-height:24px} #my-story-card .f-consultation form{display:grid;gap:12px;margin-top:12px} #my-story-card .f-consultation textarea{width:100%;resize:vertical;max-height:340px} #my-story-card .f-consultation details>label{display:block;margin-top:9px} #my-story-card .f-personality-launch{display:block;width:100%;margin:16px 0 5px;border-color:#687be1;background:#1b2d60;text-align:center} #my-story-card [data-personality-screen]{max-width:100%;min-height:180px} #my-story-card .f-quiz-progress{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--f-gold);margin:0 0 18px} #my-story-card .f-quiz-progress progress{flex:1;min-width:0;height:7px;accent-color:#6e87ff} #my-story-card .f-quiz-question{font-size:20px;line-height:1.6;margin:0 0 20px;color:var(--f-text);outline:none;overflow-wrap:anywhere} #my-story-card .f-quiz-poles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:15px} #my-story-card .f-quiz-poles p{margin:0;padding:15px 12px;border:1px solid var(--f-line);border-radius:10px;background:#0b152a;font-size:14px;line-height:1.6;overflow-wrap:anywhere} #my-story-card .f-quiz-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px} #my-story-card .f-quiz-choice{min-width:0;min-height:64px;line-height:1.4;padding:10px 5px;border:1px solid var(--f-line);border-radius:8px;background:#101c36;color:var(--f-sub);font-size:11px;overflow-wrap:anywhere;cursor:pointer} #my-story-card .f-quiz-choice[aria-pressed=true]{border-color:#e4c18c;background:#26345b;color:#fff2d8;box-shadow:inset 0 0 0 1px #e4c18c} #my-story-card .f-quiz-choice:focus-visible,#my-story-card .f-personality-confirm button:focus-visible{outline:3px solid #9db1ff;outline-offset:3px} #my-story-card .f-personality-type{font-size:42px;line-height:1.25;letter-spacing:.08em;color:var(--f-gold);margin:10px 0 22px;font-weight:700} #my-story-card .f-personality-confirm{border:1px solid var(--f-line);border-radius:9px;margin:15px 0;padding:12px;min-width:0} #my-story-card .f-personality-confirm legend{font-size:13px;color:var(--f-gold);padding:0 4px} #my-story-card .f-personality-confirm button{display:block;text-align:left;width:100%;font-size:13px;line-height:1.6;margin:6px 0} #my-story-card .f-personality-confirm button[aria-pressed=true]{background:#26345b;border-color:var(--f-gold)} #my-story-card .f-personality-axes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0} #my-story-card .f-personality-axes>section{padding:13px;border:1px solid var(--f-line);border-radius:9px;min-width:0} #my-story-card .f-personality-axes h4{font-size:13px;color:var(--f-gold);margin:0 0 6px} #my-story-card .f-personality-axes p{font-size:12px;line-height:1.7;margin:6px 0;overflow-wrap:anywhere} #my-story-card .f-personality-axes details{font-size:11px;color:var(--f-sub)} #my-story-card .f-personality-axes summary{cursor:pointer} #my-story-card .f-personality-reflection{font-size:14px;line-height:1.8} #my-story-card .f-evidence{font-size:12px;line-height:1.8;margin:22px 0;border-top:1px solid var(--f-line);padding-top:12px} #my-story-card .f-evidence p{margin:8px 0;overflow-wrap:anywhere} #my-story-card .f-evidence h4{color:var(--f-gold);font-size:12px;margin:13px 0 5px} #my-story-card .f-evidence a{color:#c1d0ff;text-underline-offset:3px} @media(max-width:620px){#my-story-card .f-quiz-question{font-size:17px;line-height:1.55}#my-story-card .f-quiz-poles{gap:8px}#my-story-card .f-quiz-poles p{padding:12px 9px;font-size:12px}#my-story-card .f-quiz-choice{font-size:10px;padding:9px 4px;min-height:64px}#my-story-card .f-personality-axes{grid-template-columns:1fr}#my-story-card .f-consultation{padding:10px}#my-story-card .f-personality-type{font-size:36px}} /* IMO_FATE_PERSONALITY_UI_FIX2: native expandable help; no extra dialog. */ #my-story-card .f-mbti-help{margin:9px 0 0;font-size:13px;color:var(--f-sub)} #my-story-card .f-mbti-help>summary{cursor:pointer;display:list-item;width:fit-content;min-height:32px;padding:4px 0;color:var(--f-gold);text-decoration:underline;text-underline-offset:3px} #my-story-card .f-mbti-help>summary:focus-visible{outline:3px solid #9db1ff;outline-offset:3px;border-radius:3px} #my-story-card .f-mbti-help p{margin:10px 0;line-height:1.7} #my-story-card .f-mbti-help dl{display:grid;gap:10px;margin:13px 0;padding:12px;border:1px solid var(--f-line);border-radius:9px;background:#0b152a} #my-story-card .f-mbti-help dt{font-weight:700;color:var(--f-text)} #my-story-card .f-mbti-help dd{margin:3px 0 0;line-height:1.6} #my-story-card .f-mbti-help a{color:#c1d0ff;text-underline-offset:3px} #my-story-card .f-mbti-help [data-mbti-lang]{display:none} html:lang(ko) #my-story-card .f-mbti-help>summary>[data-mbti-lang="ko"]{display:inline} html:lang(ko) #my-story-card .f-mbti-help>[data-mbti-lang="ko"]{display:block} html:lang(en) #my-story-card .f-mbti-help>summary>[data-mbti-lang="en"]{display:inline} html:lang(en) #my-story-card .f-mbti-help>[data-mbti-lang="en"]{display:block} html:lang(ja) #my-story-card .f-mbti-help>summary>[data-mbti-lang="ja"]{display:inline} html:lang(ja) #my-story-card .f-mbti-help>[data-mbti-lang="ja"]{display:block} html:lang(zh) #my-story-card .f-mbti-help>summary>[data-mbti-lang="zh"]{display:inline} html:lang(zh) #my-story-card .f-mbti-help>[data-mbti-lang="zh"]{display:block} /* Premium Fate presentation: existing controls and fields retain their behavior. */ #my-story-card .f-modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch;margin:25px 0 28px} #my-story-card .f-modules>.f-button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;min-width:0;min-height:136px;padding:20px 10px 24px;border:1px solid #ba9c654f;border-radius:17px;background:radial-gradient(ellipse at 50% 0%,#aa85451a,transparent 76%),linear-gradient(150deg,#172a45,#0e192d);color:#f6ecd9;font-size:18px;line-height:1.45;font-weight:700;text-align:center;word-break:keep-all;overflow-wrap:break-word;box-shadow:0 9px 24px #0307114d,inset 0 1px #ffe6af0d;transition:border-color .16s,background-color .16s,transform .16s,box-shadow .16s} #my-story-card .f-modules>.f-button::before{content:"";flex:none;width:46px;height:46px;border:1px solid #c9ac724d;border-radius:50%;background-image:var(--f-entry-icon),radial-gradient(circle,#d2b57a19,#182b432b);background-size:27px 27px,cover;background-position:center;background-repeat:no-repeat;box-shadow:inset 0 1px 9px #d9b47812} #my-story-card .f-modules>.f-button::after{content:"";position:absolute;bottom:12px;left:calc(50% - 14px);width:28px;height:2px;background:linear-gradient(90deg,transparent,#cbb07b,transparent)} #my-story-card .f-modules>[data-action="basic"]{--f-entry-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='%23e2c58e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='6.5' width='18' height='17' rx='3'/%3E%3Cpath d='M9 4.5v4M19 4.5v4M5 12h18M10 16h2M16 16h2M10 20h2'/%3E%3C/svg%3E")} #my-story-card .f-modules>[data-action="mbti"]{--f-entry-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='%23e2c58e' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='10' r='4.5'/%3E%3Cpath d='M5.5 23c.8-4.2 3.6-6.5 8.5-6.5s7.7 2.3 8.5 6.5M23 5v4M21 7h4'/%3E%3C/svg%3E")} #my-story-card .f-modules>[data-action="dna"]{--f-entry-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='%23e2c58e' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M8 4c0 9 12 11 12 20M20 4c0 9-12 11-12 20M8.5 7h11M10.5 11h7M10.5 17h7M8.5 21h11'/%3E%3C/svg%3E")} #my-story-card .f-modules>.f-button:hover{border-color:#dfbd78;background-color:#1d304b;box-shadow:0 12px 29px #03071166,inset 0 1px #ffe6af19;transform:translateY(-2px)} #my-story-card .f-modules>.f-button:active{transform:translateY(0)} #my-story-card .f-modules>.f-button:focus-visible{outline:3px solid #e8c991;outline-offset:4px} #my-story-card dialog{width:min(760px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 40px);border:1px solid #c1a27180;border-radius:22px;overflow:hidden;background:linear-gradient(150deg,#14233b,#0d172a);box-shadow:0 34px 110px #000b,0 0 0 5px #e2bd7710} #my-story-card dialog[open]{display:flex;flex-direction:column} #my-story-card dialog::backdrop{background:#030815d9;backdrop-filter:blur(5px)} #my-story-card .f-dialog-head{flex:0 0 auto;position:relative;z-index:3;gap:16px;padding:17px 26px;border-bottom:1px solid #bfa26a40;background:#101d32} #my-story-card .f-dialog-head h2{font-size:21px;line-height:1.4;font-weight:700;color:#f4e5c7;letter-spacing:-.02em} #my-story-card .f-close{flex:none;min-width:54px;min-height:44px;padding:8px 13px;border:1px solid #9d906d45;border-radius:10px;background:#d8bc7d08;color:#dccaa8;font-size:13px} #my-story-card .f-close:hover{border-color:#d4b879;background:#d8bc7d12} #my-story-card .f-dialog-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:26px;scroll-padding:22px 0 112px;scrollbar-width:thin;scrollbar-color:#806f51 #0c1628} #my-story-card .f-dialog-body .f-fields{gap:18px} #my-story-card .f-dialog-body .f-pair{gap:16px} #my-story-card .f-dialog-body .f-label{font-size:14px;line-height:1.5;font-weight:600;margin-bottom:8px;color:#e9e0ce} #my-story-card .f-dialog-body input,#my-story-card .f-dialog-body select,#my-story-card .f-dialog-body textarea{min-height:52px;border:1px solid #60708b70;border-radius:11px;background:#091426;padding:13px 14px;line-height:1.5;scroll-margin:16px 0 110px} #my-story-card .f-dialog-body textarea{line-height:1.8;min-height:108px} #my-story-card .f-dialog-body select option{background:#101c30;color:#f4f0e8} #my-story-card .f-dialog-body input[type="file"]{padding:8px;line-height:1.7} #my-story-card .f-dialog-body input::file-selector-button{min-height:36px;margin-right:10px;padding:6px 12px;border:1px solid #b19a695c;border-radius:7px;background:#223450;color:#f0dfbb} #my-story-card .f-dialog-body :is(input,select,textarea,button,a,summary):focus-visible,#my-story-card .f-close:focus-visible{outline:3px solid #e4c18c;outline-offset:3px} #my-story-card .f-dialog-body .f-button{border-radius:11px;min-height:48px;padding:11px 17px;line-height:1.5} #my-story-card .f-dialog-body .f-primary{border-color:#d2b071;background:linear-gradient(125deg,#f0d69c,#c9a35d);color:#122035;font-weight:700;box-shadow:0 5px 15px #0003} #my-story-card .f-dialog-body .f-primary:hover{background:linear-gradient(125deg,#f6dfb0,#d8b774)} #my-story-card .f-dialog-body .f-form-actions{position:sticky;bottom:0;z-index:2;gap:12px;margin:24px -26px 0;padding:16px 26px;background:#111f35;border-top:1px solid #bfa26a3b;box-shadow:0 -10px 20px #0812234d} #my-story-card .f-dialog-body .f-form-actions .f-link{min-height:48px;padding:10px 3px} #my-story-card .f-dialog-body .f-small{font-size:13px;line-height:1.8} #my-story-card .f-dialog-body .f-personality-launch{display:block;width:100%;min-height:54px;margin:16px 0 12px;border-color:#d2b07180;background:linear-gradient(130deg,#233852,#192c44);color:#f5dfb3;font-size:16px;font-weight:700;letter-spacing:-.01em} #my-story-card .f-dialog-body .f-personality-launch:hover{background:linear-gradient(130deg,#2d4562,#213751);border-color:#e0c186} #my-story-card .f-mbti-help{margin:0 0 8px} #my-story-card .f-mbti-help>summary{min-height:44px;display:list-item;padding:9px 2px;font-size:13px;text-decoration:none} #my-story-card .f-mbti-help p{font-size:13px;line-height:1.7;margin:10px 0} #my-story-card .f-mbti-help dl{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px;margin:13px 0;background:#0b1628} #my-story-card .f-mbti-help dt{font-size:12px;line-height:1.55;color:#ead6af;word-break:keep-all} #my-story-card .f-mbti-help dd{font-size:12px;line-height:1.65;margin-top:4px;word-break:keep-all} #my-story-card .f-quiz-progress{gap:16px;margin-bottom:22px;font-size:12px;color:#d9bf89} #my-story-card .f-quiz-progress progress{height:6px;accent-color:#d6b779} #my-story-card .f-quiz-question{font-size:24px;line-height:1.55;margin-bottom:22px;word-break:keep-all;overflow-wrap:break-word;letter-spacing:-.025em} #my-story-card .f-quiz-poles{gap:12px;margin-bottom:18px} #my-story-card .f-quiz-poles p{padding:17px 15px;border-color:#7d725b70;border-radius:12px;background:linear-gradient(145deg,#15243b,#0c172b);font-size:14px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word} #my-story-card .f-quiz-choices{gap:8px} #my-story-card .f-quiz-choice{min-height:82px;padding:14px 10px;border:1px solid #5f6b825e;border-radius:11px;background:#14223a;color:#dce2ed;font-size:12px;line-height:1.65;word-break:keep-all;overflow-wrap:normal} #my-story-card .f-quiz-choice:hover{border-color:#bda879;background:#1a2e49} #my-story-card .f-quiz-choice[aria-pressed="true"]{border-color:#e3c78f;background:#2b3b52;color:#ffedc9;box-shadow:inset 0 0 0 1px #e3c78f,0 0 0 2px #e3c78f17} #my-story-card .f-personality-axes{gap:14px} #my-story-card .f-personality-axes>section{padding:17px;border-color:#8f805c5e;background:#0d192c;border-radius:12px} #my-story-card .f-personality-axes h4{font-size:14px;color:#ead1a0} #my-story-card .f-personality-axes p{font-size:14px;line-height:1.8;word-break:keep-all} #my-story-card .f-personality-confirm{border-color:#b59c6560;padding:16px;border-radius:12px;background:#0d192c} #my-story-card .f-personality-confirm button{font-size:14px;word-break:keep-all} #my-story-card .f-personality-reflection{font-size:15px;line-height:1.9} #my-story-card .f-dialog-body .f-preview-copy p{font-size:15px;line-height:1.9;word-break:keep-all} @media(max-width:700px){#my-story-card .f-modules{gap:10px;margin:22px 0 25px}#my-story-card .f-modules>.f-button{min-height:128px;font-size:17px;padding:18px 9px 23px}#my-story-card dialog{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:18px}#my-story-card .f-dialog-head{padding:15px 19px}#my-story-card .f-dialog-head h2{font-size:19px}#my-story-card .f-dialog-body{padding:22px 19px}#my-story-card .f-dialog-body .f-form-actions{bottom:0;margin:22px -19px 0;padding:14px 19px}#my-story-card .f-dialog-body .f-pair{grid-template-columns:1fr}#my-story-card .f-quiz-question{font-size:21px}} @media(max-width:560px){#my-story-card .f-modules{gap:8px}#my-story-card .f-modules>.f-button{min-height:124px;gap:10px;padding:15px 7px 22px;font-size:clamp(13px,3.8vw,17px)}#my-story-card .f-modules>.f-button::before{width:39px;height:39px;background-size:23px 23px,cover}#my-story-card dialog{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:16px}#my-story-card .f-dialog-head{padding:13px 16px}#my-story-card .f-dialog-head h2{font-size:18px}#my-story-card .f-dialog-body{padding:19px 16px}#my-story-card .f-dialog-body .f-form-actions{bottom:0;margin:21px -16px 0;padding:12px 16px;gap:10px}#my-story-card .f-dialog-body .f-form-actions .f-primary{width:auto;flex:1;margin-left:auto}#my-story-card .f-dialog-body .f-label{font-size:14px}#my-story-card .f-dialog-body input,#my-story-card .f-dialog-body select,#my-story-card .f-dialog-body textarea{font-size:16px}#my-story-card .f-mbti-help dl{gap:12px;padding:12px}#my-story-card .f-quiz-poles{gap:8px}#my-story-card .f-quiz-poles p{padding:13px 11px;font-size:13px}#my-story-card .f-quiz-choices{grid-template-columns:minmax(0,1fr);gap:8px}#my-story-card .f-quiz-choice{display:flex;align-items:center;gap:12px;min-height:49px;padding:12px 15px;font-size:14px;text-align:left;line-height:1.55;overflow-wrap:break-word}#my-story-card .f-quiz-choice::before{content:"";width:12px;height:12px;flex:none;border:1px solid #b6a17c;border-radius:50%;box-shadow:inset 0 0 0 3px #14223a}#my-story-card .f-quiz-choice[aria-pressed="true"]::before{background:#efd49b;border-color:#efd49b;box-shadow:inset 0 0 0 3px #2b3b52}#my-story-card .f-personality-axes{grid-template-columns:1fr}#my-story-card .f-personality-axes>section{padding:15px}} @media(max-width:360px){#my-story-card .f-main{padding-left:18px;padding-right:18px}#my-story-card .f-modules>.f-button{font-size:13px}#my-story-card .f-dialog-body .f-form-actions .f-button{padding-left:12px;padding-right:12px}#my-story-card .f-mbti-help dl{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){#my-story-card .f-modules>.f-button{transition:none}#my-story-card .f-modules>.f-button:hover{transform:none}#my-story-card dialog::backdrop{backdrop-filter:none}} /* Talisman creation stays in the existing page and premium modal. */ #my-story-card .f-talisman-card{margin:26px 0 14px;border:1px solid #ba9c6559;border-radius:18px;background:radial-gradient(ellipse at 100% 0,#a0844421,transparent 70%),linear-gradient(135deg,#182a43,#0c182b);overflow:hidden;box-shadow:0 12px 30px #0003} #my-story-card .f-talisman-entry{display:grid;grid-template-columns:114px minmax(0,1fr);align-items:center;gap:22px;width:100%;min-height:174px;padding:16px;border:0;background:transparent;color:var(--f-text);text-align:left;font:inherit;cursor:pointer} #my-story-card .f-talisman-entry:hover{background:#ddbb7510}#my-story-card .f-talisman-entry:focus-visible{outline:3px solid #e4c18c;outline-offset:-5px;border-radius:18px} #my-story-card .f-talisman-thumb{position:relative;display:block;height:140px;border-radius:10px;overflow:hidden;background:#16233a} #my-story-card .f-talisman-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center} #my-story-card .f-talisman-thumb>span{position:absolute;bottom:0;left:0;right:0;padding:3px 6px;background:#081321c9;color:#e8d7b2;font-size:11px;text-align:center} #my-story-card .f-talisman-card-copy{display:grid;gap:8px;min-width:0}#my-story-card .f-talisman-eyebrow{color:#d0b37c;font-size:11px;letter-spacing:.08em} #my-story-card .f-talisman-card-copy>strong{color:#f3dfb7;font-size:21px;line-height:1.45;word-break:keep-all}#my-story-card .f-talisman-card-copy>span:not(.f-talisman-eyebrow){font-size:13px;line-height:1.7;word-break:keep-all} #my-story-card .f-talisman-card-copy>.f-talisman-card-link{color:#ebcc91;margin-top:3px} #my-story-card .f-talisman-gate{padding:16px;margin-bottom:18px;background:#21334a;border:1px solid #c3a76b6b;border-radius:12px}#my-story-card .f-talisman-gate p{margin:0 0 12px;font-size:14px;line-height:1.8} #my-story-card .f-talisman-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 22px}#my-story-card .f-talisman-modes>.f-button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-width:0;min-height:108px;padding:16px;text-align:left;background:#0b172b;border-color:#77809459} #my-story-card .f-talisman-modes strong{font-size:16px;color:#f2dfba;line-height:1.5;word-break:keep-all}#my-story-card .f-talisman-modes span,#my-story-card .f-talisman-modes small{font-size:12px;color:#becbdc;line-height:1.6;word-break:keep-all} #my-story-card .f-talisman-modes [aria-pressed="true"]{border-color:#dfbf84;background:linear-gradient(135deg,#2b3e55,#1d2e46);box-shadow:inset 0 0 0 1px #dfbf8440} #my-story-card .f-talisman-editor{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:22px;align-items:start} #my-story-card .f-talisman-preview{margin:0;min-width:0;position:sticky;top:0}#my-story-card .f-talisman-preview>img{display:block;width:100%;max-height:340px;object-fit:contain;background:#081322;border:1px solid #8c795650;border-radius:12px} #my-story-card .f-talisman-preview figcaption{display:grid;gap:8px;margin-top:10px;color:#aebfd5;font-size:11px;line-height:1.7;word-break:keep-all}#my-story-card [data-talisman-message-preview]{color:#e6d1aa;overflow-wrap:anywhere;font-size:13px} #my-story-card .f-talisman-fields{display:grid;gap:17px;min-width:0}#my-story-card .f-talisman-fields .f-pair{gap:10px}#my-story-card .f-talisman-fields .f-label{font-size:13px}#my-story-card .f-talisman-fields textarea{min-height:112px;font-size:14px} #my-story-card .f-talisman-fields [data-talisman-count]{display:block;text-align:right;margin-top:4px;font-size:11px} #my-story-card .f-talisman-confirm{margin-top:22px;padding:20px;border:1px solid #caab735e;border-radius:12px;background:#0a1629}#my-story-card .f-talisman-confirm h3{margin:0;font-size:19px;color:#ead5ae}#my-story-card .f-talisman-confirm p{margin:12px 0 0} #my-story-card .f-talisman-notice{color:#a4b3c9;font-size:11px!important;line-height:1.7;margin-top:18px} #my-story-card .f-talisman-result{margin:22px 0;padding-top:18px;border-top:1px solid #9c885940}#my-story-card .f-talisman-result h3{color:#f2dbaa;font-size:21px;line-height:1.5;margin:10px 0 16px} #my-story-card .f-talisman-result>img{display:block;width:100%;max-height:560px;object-fit:contain;border-radius:12px;background:#07111f;border:1px solid #9f89604d} #my-story-card .f-talisman-result>p{font-size:14px;line-height:1.85;word-break:keep-all}#my-story-card .f-talisman-reminder{color:#e5d0a8}#my-story-card .f-talisman-downloads{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} #my-story-card [data-view="talisman"]>.f-form-actions{flex-wrap:wrap}#my-story-card [data-view="talisman"]>.f-form-actions>.f-primary{flex:1;min-width:150px} @media(max-width:560px){#my-story-card .f-talisman-entry{grid-template-columns:86px minmax(0,1fr);gap:14px;padding:12px;min-height:150px}#my-story-card .f-talisman-thumb{height:126px}#my-story-card .f-talisman-card-copy>strong{font-size:18px}#my-story-card .f-talisman-card-copy{gap:6px}#my-story-card .f-talisman-card-copy>span:not(.f-talisman-eyebrow){font-size:12px}#my-story-card .f-talisman-modes{gap:8px}#my-story-card .f-talisman-modes>.f-button{padding:13px 11px;min-height:116px}#my-story-card .f-talisman-modes strong{font-size:14px}#my-story-card .f-talisman-modes span,#my-story-card .f-talisman-modes small{font-size:11px}#my-story-card .f-talisman-editor{grid-template-columns:1fr;gap:20px}#my-story-card .f-talisman-preview{position:static;display:grid;grid-template-columns:100px minmax(0,1fr);gap:14px;align-items:center}#my-story-card .f-talisman-preview>img{max-height:150px}#my-story-card .f-talisman-preview figcaption{margin:0}#my-story-card .f-talisman-fields textarea{font-size:16px}#my-story-card .f-talisman-confirm{padding:16px}#my-story-card [data-view="talisman"]>.f-form-actions>.f-primary{min-width:120px}} #my-story-card .f-talisman-usage{margin:0;padding:0;border:0;min-width:0}#my-story-card .f-talisman-usage>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#my-story-card .f-talisman-usage .f-button{padding:10px;font-size:12px;line-height:1.6;text-align:left;word-break:keep-all;background:#0b172b}#my-story-card .f-talisman-usage [aria-pressed="true"]{border-color:#dfbf84;background:#23374f;color:#f2deb9}#my-story-card .f-talisman-guide{margin:16px 0;padding:12px;border:1px solid #b29a655c;border-radius:10px;background:#0b1629;font-size:13px}#my-story-card .f-talisman-guide summary{cursor:pointer;min-height:32px;color:#e6cc96}#my-story-card .f-talisman-guide p{white-space:pre-line;line-height:1.8;margin:10px 0;overflow-wrap:anywhere} /* Prepared Wolha artworks: a visible entrance and a focused selection gallery. */ #my-story-card .f-talisman-banner{margin:0;border:0;border-bottom:1px solid #b4935860;background:linear-gradient(115deg,#211c20,#152339 76%);overflow:hidden} #my-story-card .f-talisman-banner .f-talisman-entry{grid-template-columns:minmax(240px,44fr) minmax(0,56fr);gap:28px;min-height:236px;padding:0 38px 0 0} #my-story-card .f-talisman-banner-art{display:block;height:236px;overflow:hidden;background:#2b2119} #my-story-card .f-talisman-banner-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% center} #my-story-card .f-talisman-banner .f-talisman-card-copy>strong{font-size:clamp(25px,3vw,38px);font-weight:700;letter-spacing:-.03em} #my-story-card .f-talisman-banner .f-talisman-card-copy>span:not(.f-talisman-eyebrow){font-size:15px} #my-story-card .f-talisman-banner .f-talisman-eyebrow{font-size:12px;letter-spacing:.14em} #my-story-card .f-talisman-banner .f-talisman-card-link{display:inline-flex;align-items:center;min-height:38px;text-decoration:underline;text-underline-offset:5px} #my-story-card #f-fortune-start{scroll-margin-top:24px} #my-story-card #f-fortune-start:focus{outline:2px solid #d6b579;outline-offset:8px;border-radius:10px} #my-story-card .f-talisman-return{padding:14px 16px;margin:16px 0 22px;border:1px solid #bb9b6555;border-radius:12px;background:#1a2c46} #my-story-card .f-talisman-return p{margin:0 0 6px;font-size:13px;color:#e4cca1} #my-story-card .f-talisman-return .f-link{margin-left:10px;font-size:12px} #my-story-card dialog:has([data-view="talisman"]:not([hidden])){width:min(860px,calc(100vw - 24px))} #my-story-card .f-talisman-welcome{margin:0 0 20px} #my-story-card .f-talisman-welcome img{display:block;width:100%;height:210px;object-fit:cover;object-position:center;border:1px solid #a88b5455;border-radius:12px} #my-story-card .f-talisman-welcome figcaption{margin-top:16px;text-align:center;font-size:17px;color:#eedbb8} #my-story-card .f-talisman-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px} #my-story-card .f-talisman-route{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:7px;min-height:112px!important;text-align:left;background:#192b44;border-color:#b39b6666!important} #my-story-card .f-talisman-route strong{font-size:17px;color:#f3ddb0;line-height:1.55;word-break:keep-all} #my-story-card .f-talisman-route span{font-size:12px;color:#bdcadc} #my-story-card .f-talisman-route.f-primary{border-color:#e5c78f!important} #my-story-card .f-talisman-route.f-primary strong{color:#122035}#my-story-card .f-talisman-route.f-primary span{color:#263e57} #my-story-card [data-talisman-stage="appraising"]{padding:30px 0 35px;text-align:center} #my-story-card [data-talisman-stage="appraising"] h3{font-size:20px;line-height:1.6;color:#ecd8b2} #my-story-card .f-talisman-orbit{display:grid;place-items:center;width:90px;height:90px;margin:0 auto 25px;border:1px solid #c7a96775;border-radius:50%;background:radial-gradient(circle,#7f5b2538,transparent 75%);color:#e9c684;font-size:39px;box-shadow:0 0 35px #c9a05916} #my-story-card .f-talisman-report{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;margin:0 0 22px;border:1px solid #a98e5755;border-radius:11px;background:#1a2c44;font-size:13px} #my-story-card .f-talisman-report .f-button{min-height:40px!important;padding:8px 13px!important;font-size:12px} #my-story-card .f-talisman-gallery-title{margin:0 0 10px;font-size:21px;line-height:1.7;color:#f0dcb4;word-break:keep-all} #my-story-card .f-talisman-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0 18px;align-items:start} #my-story-card .f-talisman-purpose{display:flex;flex-direction:column;gap:9px;width:100%;min-width:0;min-height:44px;padding:10px 10px 16px;border:1px solid #9c875a55;border-radius:14px;background:#0b1729;color:#f5e5c3;font:inherit;text-align:left;cursor:pointer} #my-story-card .f-talisman-purpose:hover{border-color:#d4b372;background:#1c2c42} #my-story-card .f-talisman-purpose-art{display:block;aspect-ratio:3/4;width:100%;border-radius:8px;overflow:hidden;background:#241c13} #my-story-card .f-talisman-purpose-art img{display:block;width:100%;height:100%;object-fit:contain} #my-story-card .f-talisman-purpose strong{display:block;font-size:16px;line-height:1.5;word-break:keep-all} #my-story-card .f-talisman-purpose-meaning{display:block;font-size:12px;line-height:1.7;color:#becbdc;word-break:keep-all} #my-story-card .f-talisman-selected-title{font-size:24px;line-height:1.5;color:#f1d8a6;margin:8px 0} #my-story-card .f-talisman-selected-preview{margin:20px auto;max-width:300px;text-align:center} #my-story-card .f-talisman-selected-preview img{display:block;width:100%;max-height:360px;object-fit:contain;background:#091321;border:1px solid #9f875a66;border-radius:12px} #my-story-card .f-talisman-selected-preview figcaption{font-size:11px;color:#bbcae0;margin-top:7px} #my-story-card .f-talisman-modes small[data-talisman-mode-cost]{color:#f3d296;font-size:15px;margin-top:5px} #my-story-card [data-view="talisman"] .f-form-actions{position:static;box-shadow:none;padding-bottom:calc(16px + env(safe-area-inset-bottom))} #my-story-card [data-view="talisman"] .f-form-actions .f-link{margin-right:auto} @media(max-width:700px){#my-story-card .f-talisman-banner .f-talisman-entry{grid-template-columns:40fr 60fr;min-height:194px;gap:20px;padding-right:22px}#my-story-card .f-talisman-banner-art{height:194px}#my-story-card .f-talisman-banner .f-talisman-card-copy>strong{font-size:27px}#my-story-card .f-talisman-banner .f-talisman-card-copy>span:not(.f-talisman-eyebrow){font-size:13px}#my-story-card .f-talisman-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){#my-story-card .f-talisman-banner .f-talisman-entry{grid-template-columns:40fr 60fr;min-height:188px;gap:15px;padding-right:16px}#my-story-card .f-talisman-banner-art{height:188px}#my-story-card .f-talisman-banner .f-talisman-card-copy>strong{font-size:24px}#my-story-card .f-talisman-banner .f-talisman-card-copy>span:not(.f-talisman-eyebrow){font-size:12px;line-height:1.65}#my-story-card .f-talisman-banner .f-talisman-eyebrow{font-size:10px}#my-story-card .f-talisman-welcome img{height:160px}#my-story-card .f-talisman-welcome figcaption{font-size:16px}#my-story-card .f-talisman-routes{grid-template-columns:1fr;gap:11px}#my-story-card .f-talisman-route{min-height:89px!important}#my-story-card .f-talisman-route strong{font-size:16px}#my-story-card .f-talisman-gallery{gap:10px}#my-story-card .f-talisman-gallery-title{font-size:19px}#my-story-card .f-talisman-purpose{padding:8px 8px 13px;gap:8px}#my-story-card .f-talisman-purpose strong{font-size:15px}#my-story-card .f-talisman-purpose-meaning{font-size:11px}#my-story-card .f-talisman-selected-preview{max-width:240px}#my-story-card .f-talisman-selected-preview img{max-height:300px}#my-story-card .f-talisman-modes{grid-template-columns:1fr}#my-story-card .f-talisman-modes>.f-button{min-height:100px}#my-story-card .f-talisman-report{padding:11px 12px}#my-story-card [data-view="talisman"] .f-form-actions{padding-bottom:calc(12px + env(safe-area-inset-bottom))}} @media(prefers-reduced-motion:reduce){#my-story-card{scroll-behavior:auto}} /* The no-file reading route always has a visible, state-aware next step. */ #my-story-card .f-talisman-return>strong{display:block;margin-bottom:8px;font-size:18px;line-height:1.5;color:#f0dcb4} #my-story-card .f-talisman-return .f-talisman-continue{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:160px;margin-top:10px;padding:12px 22px;font-size:16px;font-weight:700} @media(max-width:560px){#my-story-card .f-talisman-return .f-talisman-continue{width:100%;min-width:0}#my-story-card .f-talisman-return .f-link{display:block;margin:12px 0 0;text-align:center}#my-story-card .f-talisman-return>strong{font-size:17px}} /* IMO_FATE_CONTEXT_REPORT_FIX1: editable life context and visible exports. */ #my-story-card .f-life-context{grid-column:1/-1;border:1px solid #bfa26a55;border-radius:14px;padding:12px 14px;background:#0b172b} #my-story-card .f-life-context summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700;color:#e6cc96} #my-story-card .f-life-context .f-fields{padding-top:14px} #my-story-card .f-reading-kind{margin:20px 0 8px;font-size:.82rem;line-height:1.5;color:#b9c3d1} #my-story-card .f-reading-save{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 24px} #my-story-card .f-profile-save-status{border:1px solid #b86a4b;border-radius:12px;background:#291e23;padding:12px 14px;line-height:1.65;color:#f2c2ab} @media(max-width:540px){#my-story-card .f-reading-save>*{flex:1 1 100%;text-align:center}} /* IMO_FATE_NARRATIVE_V1: four character lenses, without adding a checkout flow. */ #my-story-card .f-voice-picks{grid-template-columns:repeat(2,minmax(0,1fr))} #my-story-card .f-voice:disabled{opacity:.5;cursor:default;border-style:dashed} #my-story-card [data-legacy-voice-note]{font-size:12px;line-height:1.6;color:var(--f-sub)} @media(min-width:701px){#my-story-card .f-voice{min-height:74px}} /* IMO_FATE_READING_FLOW_FIX1: real generation status separated from entered details. */ #my-story-card .f-input-summary{margin:18px 0;padding:12px 16px;border:1px solid var(--f-line);border-radius:12px;background:#0d192b} #my-story-card .f-input-summary>summary{min-height:40px;display:flex;align-items:center;cursor:pointer;color:#d8c394;font-size:14px} #my-story-card .f-input-summary [data-reading-input-copy]{font-size:13px;line-height:1.75;color:var(--f-sub)} #my-story-card .f-input-summary h3{font-size:13px;color:var(--f-text);margin:15px 0 5px} #my-story-card .f-actual-reading{margin:22px 0;padding:22px;border:1px solid #bda16b66;border-radius:15px;background:linear-gradient(135deg,#15283d,#0f1d31)} #my-story-card .f-actual-reading h3{margin:0 0 12px;font-size:20px;color:#f0d7a1} #my-story-card .f-actual-reading p{line-height:1.8;font-size:15px} #my-story-card .f-actual-reading .f-button{margin-top:12px;min-height:48px} #my-story-card .f-actual-reading[aria-busy="true"]::before{content:"";display:block;height:3px;width:64px;background:#d2b37a;border-radius:3px;margin-bottom:18px;animation:f-reading-pulse 1.2s ease-in-out infinite alternate} @keyframes f-reading-pulse{from{opacity:.3}to{opacity:1}} @media(prefers-reduced-motion:reduce){#my-story-card .f-actual-reading[aria-busy="true"]::before{animation:none}} /* Saved account readings and point confirmation. */ #my-story-card .f-reading-history{margin:16px 0;border-top:1px solid var(--f-line);padding-top:10px}#my-story-card .f-reading-history>summary{min-height:44px;cursor:pointer;color:var(--f-gold)}#my-story-card [data-reading-history-items]{display:grid;gap:8px;margin:8px 0}#my-story-card .f-history-item{text-align:left;min-height:48px;overflow-wrap:anywhere}#my-story-card [data-payment-balance],#my-story-card [data-talisman-payment-balance]{font-size:15px;color:var(--f-text);margin:12px 0;overflow-wrap:anywhere} /* Keep the life-story label readable on the existing small-screen cards. */ #my-story-card .f-modules>[data-action="dna"]{font-size:clamp(13px,1.35vw,16px);line-height:1.45;word-break:keep-all;overflow-wrap:anywhere} @media(max-width:560px){#my-story-card .f-modules>[data-action="dna"]{font-size:clamp(12px,3.2vw,15px)}} /* Compact phone layout; all existing actions and original downloads remain available. */ @media(max-width:700px),(max-width:1000px) and (max-height:500px){ body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)} #my-story-card{border-radius:0} #my-story-card .f-main{padding:20px 16px} #my-story-card .f-main summary,#my-story-card .f-dialog-body summary{min-height:44px;overflow-wrap:anywhere} #my-story-card .f-link{min-width:44px;overflow-wrap:anywhere} #my-story-card .f-modules{gap:8px;margin:18px 0 22px} #my-story-card .f-modules>.f-button{min-height:108px;padding:12px 6px 18px;gap:8px;font-size:14px} #my-story-card .f-modules>.f-button::before{width:34px;height:34px;background-size:21px 21px,cover} #my-story-card dialog,#my-story-card dialog:has([data-view="talisman"]:not([hidden])){width:calc(100vw - 12px);max-width:calc(100vw - 12px);inset:max(8px,env(safe-area-inset-top)) auto auto 50%;transform:translateX(-50%);--f-mobile-pad-left:max(14px,env(safe-area-inset-left));--f-mobile-pad-right:max(14px,env(safe-area-inset-right));max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));border-radius:14px;overflow:hidden} #my-story-card .f-dialog-head{gap:10px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left))} #my-story-card .f-dialog-head h2{min-width:0;font-size:18px;line-height:1.4;overflow-wrap:anywhere;word-break:normal} #my-story-card .f-close{min-width:54px;min-height:44px} #my-story-card .f-dialog-body{padding:14px var(--f-mobile-pad-right) 14px var(--f-mobile-pad-left);scroll-padding:14px 0 calc(110px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch} #my-story-card .f-dialog-body .f-fields{gap:12px} #my-story-card .f-dialog-body .f-pair{gap:12px} #my-story-card .f-dialog-body .f-label{margin-bottom:5px;overflow-wrap:anywhere} #my-story-card .f-dialog-body input,#my-story-card .f-dialog-body select,#my-story-card .f-dialog-body textarea{font-size:16px;min-height:48px;padding:10px 12px} #my-story-card .f-dialog-body textarea{min-height:92px} #my-story-card .f-dialog-body input[type="file"]{padding:6px} #my-story-card .f-dialog-body input::file-selector-button{min-height:44px} #my-story-card .f-dialog-body .f-button{min-height:44px;padding:10px 12px;overflow-wrap:anywhere} #my-story-card .f-dialog-body .f-form-actions,#my-story-card [data-view="talisman"]>.f-form-actions{position:sticky;bottom:-14px;z-index:2;gap:8px;margin:18px calc(-1 * var(--f-mobile-pad-right)) 0 calc(-1 * var(--f-mobile-pad-left));padding:10px max(14px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:#101e34;box-shadow:0 -7px 16px #07112166} #my-story-card .f-dialog-body .f-form-actions>.f-link{flex:0 0 auto;min-width:44px;min-height:44px;margin-right:0;padding:8px 3px} #my-story-card .f-dialog-body .f-form-actions>.f-button{flex:1 1 90px;min-width:0;margin-left:0} #my-story-card .f-dialog-body .f-form-actions>.f-primary{flex:1.3 1 120px;min-width:0} #my-story-card .f-talisman-welcome{margin-bottom:14px} #my-story-card .f-talisman-welcome img{height:128px} #my-story-card .f-talisman-welcome figcaption{margin-top:10px;font-size:14px;line-height:1.65} #my-story-card .f-talisman-routes{gap:9px} #my-story-card .f-talisman-route{min-height:76px!important;gap:5px} #my-story-card .f-talisman-route strong,#my-story-card .f-talisman-route span{max-width:100%;overflow-wrap:anywhere;word-break:normal} #my-story-card .f-talisman-route strong{font-size:16px;line-height:1.5} #my-story-card .f-talisman-route span{line-height:1.5} #my-story-card .f-talisman-report{flex-wrap:wrap;gap:8px;padding:10px 12px;margin-bottom:14px} #my-story-card .f-talisman-report .f-button{min-height:44px!important} #my-story-card .f-talisman-gallery{gap:9px;margin:16px 0} #my-story-card .f-talisman-gallery-title{font-size:18px;line-height:1.6;overflow-wrap:anywhere;word-break:normal} #my-story-card .f-talisman-purpose-art{height:clamp(118px,24dvh,174px);aspect-ratio:auto} #my-story-card .f-talisman-purpose strong,#my-story-card .f-talisman-purpose-meaning{max-width:100%;overflow-wrap:anywhere;word-break:normal} #my-story-card .f-talisman-purpose strong{font-size:14px;line-height:1.5} #my-story-card .f-talisman-purpose-meaning{font-size:12px;line-height:1.6} #my-story-card [data-view="talisman"] h3,#my-story-card [data-view="talisman"] p{overflow-wrap:anywhere;word-break:normal} #my-story-card .f-talisman-selected-title{font-size:20px;line-height:1.5} #my-story-card .f-talisman-selected-preview{max-width:180px;margin:14px auto} #my-story-card .f-talisman-selected-preview img{max-height:180px} #my-story-card .f-talisman-modes{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} #my-story-card .f-dialog-body .f-talisman-modes>.f-button{min-height:76px;padding:10px 9px;overflow-wrap:anywhere;word-break:normal} #my-story-card [data-talisman-stage="selection"]:has([data-talisman-confirm]:not([hidden])) :is(.f-talisman-selected-preview,.f-talisman-modes,[data-talisman-selected-meaning]){display:none} #my-story-card .f-talisman-confirm{padding:14px;margin-top:14px} #my-story-card .f-talisman-confirm h3{font-size:18px;margin:0 0 8px} #my-story-card .f-talisman-confirm .f-cost{font-size:23px;margin-top:12px} #my-story-card [data-talisman-stage="appraising"]{padding:6px 0 8px} #my-story-card [data-talisman-stage="appraising"]:has([data-wolha-writing]:not([hidden])) .f-talisman-orbit{display:none} #my-story-card [data-talisman-stage="appraising"] h3{font-size:18px;margin:12px 0;line-height:1.5} #my-story-card dialog .f-wolha-writing{margin:6px 0 12px} #my-story-card dialog .f-wolha-writing__scene{height:clamp(140px,25dvh,186px)} #my-story-card .f-talisman-result{margin:14px 0;padding-top:12px} #my-story-card .f-talisman-result h3{font-size:19px;line-height:1.5;margin:8px 0 12px} #my-story-card .f-talisman-result>img{height:auto;max-height:min(48dvh,400px);object-fit:contain} #my-story-card .f-talisman-result>p{font-size:14px;line-height:1.7} #my-story-card .f-talisman-downloads{gap:8px} #my-story-card .f-talisman-downloads>*{flex:1 1 calc(50% - 4px);min-width:0;text-align:center;overflow-wrap:anywhere} #my-story-card .f-talisman-downloads>button{flex-basis:100%} } @media(max-width:1000px) and (max-height:500px){ #my-story-card .f-dialog-head{padding-top:7px;padding-bottom:7px} #my-story-card .f-dialog-body{padding-top:10px} #my-story-card .f-talisman-welcome img{height:100px} #my-story-card .f-talisman-selected-preview{max-width:120px} #my-story-card .f-talisman-selected-preview img{max-height:120px} #my-story-card dialog .f-wolha-writing__scene{height:112px} } /* SAJU V5: explicit birthplace clock and optional server-calculated facts only. */ #my-story-card .f-birth-clock select{width:100%;min-width:0;max-width:100%;font-size:16px;min-height:44px} #my-story-card .f-birth-clock .f-small{display:block;line-height:1.65;margin-top:6px} #my-story-card .f-birth-context-note{margin:0;padding:11px 12px;border:1px solid #927b4f4f;border-radius:9px;background:#192a3c;color:#c6c9ce;line-height:1.7} #my-story-card .f-evidence>summary{min-height:44px;display:flex;align-items:center;cursor:pointer} #my-story-card .f-evidence [data-evidence-content]{padding:0 2px 8px} #my-story-card .f-evidence [data-evidence-content]>h3{font-size:14px;margin:18px 0 8px;line-height:1.5;color:var(--f-gold)} #my-story-card .f-saju-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0} #my-story-card .f-saju-pillar{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border:1px solid #78643f66;border-radius:10px;background:#112039;min-width:0;text-align:center;overflow-wrap:anywhere} #my-story-card .f-saju-pillar strong{font-size:25px;line-height:1.3;font-weight:600;color:#e8d4aa} #my-story-card .f-saju-pillar .f-small{font-size:11px;margin:0} #my-story-card .f-saju-pillar small{font-size:11px;line-height:1.4;color:var(--f-sub)} #my-story-card .f-saju-master{font-size:14px;line-height:1.6;margin:5px 0} #my-story-card .f-saju-phases{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:9px 0} #my-story-card .f-saju-phases>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:9px 4px;border:1px solid #38516d;border-radius:9px;background:#122039;min-width:0;overflow-wrap:anywhere} #my-story-card .f-saju-phases b{font-size:11px;font-weight:500;color:#c7c8cf} #my-story-card .f-saju-phases span>span{font-size:18px;color:#e8d4aa} #my-story-card .f-saju-cycles,#my-story-card .f-saju-stages,#my-story-card .f-saju-limitations{padding-left:19px;margin:8px 0;line-height:1.75;font-size:12px;overflow-wrap:anywhere} #my-story-card .f-saju-cycles{display:flex;gap:6px;flex-wrap:wrap;list-style:none;padding:0} #my-story-card .f-saju-cycles li{padding:5px 8px;border:1px solid #3f5575;border-radius:7px;background:#14223a;margin:0} #my-story-card .f-saju-limitations{color:#c5b995;padding-top:9px;border-top:1px solid #675a3b55} #my-story-card .f-saju-limitations li{margin:6px 0} @media(max-width:420px){#my-story-card .f-saju-pillars{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}#my-story-card .f-saju-pillar{padding:9px 7px}#my-story-card .f-saju-pillar strong{font-size:25px}#my-story-card .f-saju-phases{gap:4px}#my-story-card .f-saju-phases b{font-size:10px}#my-story-card .f-saju-cycles,#my-story-card .f-saju-stages,#my-story-card .f-saju-limitations{font-size:11px}}