:root {
  --ocean-50:#f5fcff; --ocean-100:#e5f7ff; --ocean-200:#c9edff; --ocean-300:#9edcff;
  --ocean-500:#3ba7e9; --ocean-700:#256d9e; --ink:#26304a; --ink-soft:#61708c;
  --violet:#8267f7; --pink:#ef6fb3; --coral:#ff7588; --white:#fff; --glass:rgba(255,255,255,.78);
  --gradient-brand:linear-gradient(125deg,#f06fae 0%,#a567ee 48%,#4d8df8 100%);
  --shadow-card:0 28px 80px rgba(61,116,154,.18); --shadow-button:0 12px 28px rgba(106,105,231,.25);
  --font-sans:"Noto Sans TC","Microsoft JhengHei",sans-serif; --font-display:"Noto Serif TC","Noto Sans TC",serif;
  --radius-sm:14px; --radius-md:24px; --radius-lg:38px; --content:1120px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--font-sans);background:#eaf8ff url("./assets/ocean-bg-light.png") center top/cover fixed no-repeat;overflow-x:hidden}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.ocean-glow{position:fixed;border-radius:50%;filter:blur(8px);pointer-events:none;z-index:-1}.ocean-glow--one{width:36rem;height:36rem;top:-12rem;left:-10rem;background:rgba(170,221,255,.42)}.ocean-glow--two{width:28rem;height:28rem;right:-10rem;bottom:-8rem;background:rgba(196,172,255,.24)}
.site-header{width:min(var(--content),calc(100% - 40px));height:92px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;font-family:Georgia,serif;font-size:36px;letter-spacing:.02em;background:var(--gradient-brand);background-clip:text;-webkit-background-clip:text;color:transparent}.brand span{font-size:1.28em}.header-chip{padding:9px 16px;border:1px solid rgba(101,169,217,.28);border-radius:999px;background:rgba(255,255,255,.62);color:var(--ocean-700);font-size:14px;font-weight:700;backdrop-filter:blur(12px)}
.app-shell{width:min(var(--content),calc(100% - 40px));min-height:calc(100vh - 170px);margin:auto}.screen{animation:screenIn .45s cubic-bezier(.2,.8,.2,1)}.screen[hidden]{display:none}.screen--welcome{min-height:650px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;padding:36px 0 70px}.eyebrow{color:#7973d9;font-size:13px;line-height:1.4;font-weight:900;letter-spacing:.19em}.hero-copy h1{font-family:var(--font-display);font-size:clamp(42px,5vw,70px);line-height:1.18;letter-spacing:-.04em;margin:18px 0 22px}.hero-copy h1 span{background:var(--gradient-brand);background-clip:text;-webkit-background-clip:text;color:transparent}.hero-lead{max-width:570px;font-size:18px;line-height:1.9;color:var(--ink-soft)}.hero-facts{display:flex;gap:10px;flex-wrap:wrap;margin:27px 0 32px}.hero-facts span{padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.72);color:#516781;font-size:13px;font-weight:700;box-shadow:0 4px 16px rgba(75,120,150,.08)}.button{border:0;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 25px;text-decoration:none;font-weight:800;cursor:pointer;transition:transform .2s,box-shadow .2s,filter .2s}.button:hover{transform:translateY(-2px);filter:saturate(1.08)}.button:focus-visible,.text-button:focus-visible,.answer-button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(72,151,241,.32);outline-offset:3px}.button--primary{color:#fff;background:var(--gradient-brand);box-shadow:var(--shadow-button)}.button--secondary{color:#5163a0;background:#fff;border:1px solid #d8e5f2}.button--accent{color:#fff;background:linear-gradient(125deg,#ff7588,#f09e75);box-shadow:0 12px 28px rgba(240,112,130,.22)}.button--learn{color:#fff;background:linear-gradient(125deg,#4d8df8,#3ba7e9);box-shadow:0 12px 28px rgba(59,151,233,.22)}.button[hidden]{display:none}.button--large{min-height:60px;padding:0 32px}.button--full{width:100%}.privacy-note{font-size:12px;color:#7b8da5;margin:14px 4px}.hero-visual{display:grid;place-items:center;perspective:1200px}.result-teaser{position:relative;width:min(365px,80vw);aspect-ratio:1080/1920;transform:rotate(4deg);filter:drop-shadow(0 30px 35px rgba(67,107,145,.23))}.result-teaser img{width:100%;height:100%;object-fit:cover;border-radius:28px}.teaser-orbit{position:absolute;border:1px solid rgba(83,157,219,.25);border-radius:50%;z-index:-1}.teaser-orbit--one{inset:-8% -30%}.teaser-orbit--two{inset:12% -45%;transform:rotate(23deg)}.bubble{position:absolute;border:2px solid rgba(74,169,228,.3);border-radius:50%;background:rgba(255,255,255,.35)}.bubble--one{width:36px;height:36px;top:15%;right:-18%}.bubble--two{width:19px;height:19px;bottom:24%;left:-15%}.bubble--three{width:11px;height:11px;top:38%;left:-22%}
.screen--quiz{max-width:780px;margin:30px auto;padding-bottom:60px}.quiz-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.text-button{appearance:none;border:0;background:none;color:#596986;font-weight:700;cursor:pointer;padding:8px}.question-count{font-size:14px;color:#8492a8}.question-count strong{font-size:24px;color:#6866c9;margin-right:3px}.progress-track{height:8px;border-radius:99px;background:rgba(255,255,255,.7);overflow:hidden;margin-bottom:26px}.progress-bar{height:100%;width:10%;border-radius:inherit;background:var(--gradient-brand);transition:width .35s}.question-card,.profile-card{padding:clamp(28px,5vw,52px);border:1px solid rgba(255,255,255,.85);border-radius:var(--radius-lg);background:var(--glass);box-shadow:var(--shadow-card);backdrop-filter:blur(18px)}.question-card h2{font-family:var(--font-display);font-size:clamp(27px,4vw,38px);line-height:1.5;margin:12px 0 32px}.answer-list{display:grid;gap:13px}.answer-button{display:flex;width:100%;align-items:center;gap:18px;text-align:left;padding:18px 20px;border:1px solid #d8e9f5;border-radius:18px;color:var(--ink);background:rgba(255,255,255,.78);cursor:pointer;transition:.2s}.answer-button:hover{border-color:#aebaf7;background:#fff;transform:translateX(4px);box-shadow:0 8px 20px rgba(72,115,150,.1)}.answer-letter{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;color:#756ed2;background:#edf1ff;font-weight:900}.quiz-hint{text-align:center;color:#8291a7;font-size:13px;margin-top:20px}
.screen--profile{max-width:760px;margin:30px auto 70px}.form-intro{text-align:center;margin-bottom:24px}.form-intro h2,.result-heading h2,.preef-intro h2{font-family:var(--font-display);font-size:clamp(30px,4vw,44px);margin:11px 0}.form-intro p,.result-heading p,.preef-intro p{color:var(--ink-soft);line-height:1.8}.profile-card{display:grid;gap:26px}.field{display:grid;gap:10px;border:0;padding:0;margin:0}.field>span,.field legend{font-weight:800;font-size:14px;margin-bottom:8px}.field input,.field select{width:100%;min-height:55px;border:1px solid #d7e5ef;border-radius:15px;background:#fff;color:var(--ink);padding:0 17px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented span{min-height:52px;border:1px solid #d7e5ef;border-radius:15px;background:#fff;display:grid;place-items:center;cursor:pointer;color:#65728b;font-weight:700}.segmented input:checked+span{border-color:#8b7bf2;background:#f0efff;color:#6658c7;box-shadow:inset 0 0 0 1px #8b7bf2}
.screen--result{padding:24px 0 80px}.result-heading{text-align:center;margin-bottom:30px}.result-section-width{width:100%;max-width:960px;margin-left:auto;margin-right:auto}.result-layout{display:grid;grid-template-columns:minmax(280px,440px) 1fr;gap:55px;align-items:center;max-width:960px;margin:auto}.share-card-wrap{padding:10px;border-radius:28px;background:rgba(255,255,255,.76);box-shadow:var(--shadow-card);overflow:hidden}.share-card-wrap img{display:block;width:100%;border-radius:20px}.share-card-wrap .progressive-image{opacity:.58;filter:blur(16px);transform:scale(1.025);transition:filter .75s ease,opacity .55s ease,transform .75s ease}.share-card-wrap .progressive-image.is-loaded{opacity:1;filter:blur(0);transform:scale(1)}.result-label{color:#7a79cc;font-size:13px;letter-spacing:.13em;font-weight:900}.result-actions h3{font-family:var(--font-display);font-size:54px;margin:9px 0 12px}.result-actions>p{font-size:18px;line-height:1.8;color:var(--ink-soft)}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}.restart-link{display:block;margin:16px auto}.preef-intro{width:100%;max-width:960px;margin:75px auto 0;padding:38px 44px;border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(255,255,255,.87),rgba(232,246,255,.88));box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:space-between;gap:35px}.preef-intro>div:first-child{max-width:660px}.preef-actions{display:grid;flex:0 0 auto;gap:12px;min-width:230px}.preef-actions .button{width:100%}.preef-intro h2{font-size:32px}.toast{position:fixed;left:50%;bottom:25px;z-index:9;transform:translate(-50%,20px);padding:12px 18px;border-radius:99px;background:#29334d;color:#fff;font-size:14px;opacity:0;pointer-events:none;transition:.25s}.toast.is-visible{opacity:1;transform:translate(-50%,0)}footer{width:min(var(--content),calc(100% - 40px));margin:auto;padding:22px 0 32px;border-top:1px solid rgba(84,145,182,.14);display:flex;justify-content:space-between;color:#7d90a7;font-size:12px}
.store-entry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:6px}.google-play-badge,.app-store-coming-soon{display:block;width:100%;min-width:0;padding:0;overflow:hidden;border:0;border-radius:7px;background:transparent}.google-play-badge img,.app-store-coming-soon img{display:block;width:100%;height:auto}.app-store-coming-soon{cursor:pointer}
@keyframes screenIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:820px){.site-header{height:76px}.header-chip{font-size:12px}.screen--welcome{grid-template-columns:1fr;text-align:center;padding-top:35px}.hero-copy{order:1}.hero-visual{order:0}.result-teaser{width:min(210px,56vw)}.hero-lead{margin-left:auto;margin-right:auto}.hero-facts{justify-content:center}.privacy-note{text-align:center}.result-layout{grid-template-columns:1fr;max-width:520px}.result-actions{text-align:center}.preef-intro{display:grid;text-align:center}.preef-intro .button{justify-self:center}.preef-actions{width:min(100%,280px);min-width:0;justify-self:center}.segmented{grid-template-columns:1fr}.screen--result{padding-top:12px}}
@media(max-width:520px){.site-header,.app-shell,footer{width:min(100% - 24px,var(--content))}.brand{font-size:29px}.header-chip{padding:7px 10px}.screen--welcome{gap:34px;padding-top:15px}.hero-copy h1{font-size:39px}.hero-lead{font-size:16px}.hero-facts span{font-size:11px}.question-card,.profile-card{padding:25px 18px;border-radius:25px}.answer-button{padding:15px 13px}.result-layout{gap:30px}.action-grid{grid-template-columns:1fr}.preef-intro{margin-top:50px;padding:30px 20px}.preef-intro h2{font-size:27px}footer{display:grid;gap:7px;text-align:center}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
/* 首頁：手機優先的礁友環繞舞台 */
.screen--welcome{display:block;min-height:700px;padding:0 0 36px;text-align:center}
.reef-stage{position:relative;width:100%;min-height:690px;margin:0 auto;isolation:isolate}
.reef-orbit{position:absolute;inset:0;z-index:1;overflow:visible;pointer-events:none}
.friend-silhouette{--x:50%;--y:8%;--size:92px;--delay:0s;position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);padding:4px;border:1px solid rgba(255,255,255,.92);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(205,238,255,.56));box-shadow:0 12px 28px rgba(42,105,148,.18),inset 0 0 18px rgba(255,255,255,.8);transform:translate(-50%,-50%);overflow:hidden;animation:friendFloat 5.6s ease-in-out var(--delay) infinite}
.friend-silhouette::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;color:#fff;font-family:var(--font-sans);font-size:clamp(34px,10vw,52px);font-weight:900;line-height:1;text-shadow:0 3px 0 rgba(73,67,135,.72),0 0 12px rgba(112,102,213,.85);background:radial-gradient(circle,rgba(126,112,220,.52) 0 24%,rgba(91,82,172,.16) 25% 42%,transparent 58%);box-shadow:inset 0 0 18px rgba(255,255,255,.7)}
.friend-silhouette img{width:100%;height:100%;object-fit:contain;transform:scale(1.06);filter:brightness(0) saturate(100%) blur(9px);opacity:.42;user-select:none;transition:filter .7s ease,opacity .55s ease,transform .7s ease}.friend-silhouette img.is-loaded{transform:scale(1);filter:brightness(0) saturate(100%) blur(0);opacity:.78}
.hero-glass-card{position:absolute;z-index:3;top:142px;left:50%;width:min(92%,430px);transform:translateX(-50%);padding:42px 21px 30px;border:1px solid rgba(255,255,255,.88);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.51),rgba(230,246,255,.34));box-shadow:0 28px 70px rgba(55,111,151,.22),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -20px 40px rgba(174,220,247,.15);-webkit-backdrop-filter:blur(42px) saturate(.78);backdrop-filter:blur(42px) saturate(.78);overflow:hidden}
.hero-glass-card::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.18);filter:blur(18px)}
.hero-copy{position:relative}.hero-copy h1{font-size:clamp(37px,10.5vw,48px);margin:15px 0 17px;line-height:1.22}.hero-lead{margin:0 auto;font-size:15px;line-height:1.8}.hero-facts{justify-content:center;gap:6px;margin:19px 0 24px}.hero-facts span{padding:8px 10px;font-size:11px;background:rgba(255,255,255,.56)}.hero-glass-card .button--large{width:min(100%,280px)}.privacy-note{text-align:center;margin-bottom:0}
.stage-bubble{position:absolute;border:2px solid rgba(80,177,231,.28);border-radius:50%;background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.95) 0 8%,rgba(255,255,255,.18) 30%,rgba(130,210,249,.12) 66%);box-shadow:inset 0 0 9px rgba(255,255,255,.64);animation:bubbleFloat 5s ease-in-out infinite}.stage-bubble--1{width:20px;height:20px;left:3%;top:27%}.stage-bubble--2{width:10px;height:10px;left:13%;top:10%;animation-delay:-1s}.stage-bubble--3{width:31px;height:31px;right:2%;top:33%;animation-delay:-2.5s}.stage-bubble--4{width:13px;height:13px;right:11%;top:11%;animation-delay:-.6s}.stage-bubble--5{width:18px;height:18px;left:7%;top:67%;animation-delay:-3s}.stage-bubble--6{width:9px;height:9px;right:5%;top:73%;animation-delay:-1.8s}.stage-bubble--7{width:26px;height:26px;left:18%;bottom:2%;animation-delay:-4s}.stage-bubble--8{width:12px;height:12px;right:19%;bottom:4%;animation-delay:-2s}
@keyframes friendFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes bubbleFloat{0%,100%{transform:translateY(0);opacity:.66}50%{transform:translateY(-12px);opacity:1}}
@media(min-width:700px){.screen--welcome{min-height:760px;padding-top:10px}.reef-stage{max-width:980px;min-height:750px}.hero-glass-card{top:160px;width:min(64%,590px);padding:58px 54px 40px}.hero-copy h1{font-size:58px}.hero-lead{font-size:17px}.hero-facts{gap:10px;margin:25px 0 30px}.hero-facts span{font-size:13px;padding:9px 13px}.friend-silhouette{--size:124px}.stage-bubble--1{left:7%}.stage-bubble--3{right:6%}}
@media(max-width:390px){.reef-stage{min-height:660px}.hero-glass-card{top:132px;width:94%;padding:37px 17px 26px}.hero-copy h1{font-size:35px}.friend-silhouette{--size:82px}.hero-facts span{padding:7px 8px;font-size:10px}}
/* 首頁標題與趣味測驗提醒 */
.hero-copy h1{font-size:clamp(29px,9vw,48px);letter-spacing:-.055em}
.hero-copy h1 .title-line{display:block;white-space:nowrap;background:none;color:var(--ink);background-clip:initial;-webkit-background-clip:initial}
.hero-copy h1 .title-line--accent{background:var(--gradient-brand);background-clip:text;-webkit-background-clip:text;color:transparent}
.quiz-reminder{margin:19px auto 0;padding:14px 15px;border:1px solid rgba(121,152,190,.19);border-radius:17px;background:rgba(242,249,255,.56);color:#66758d;text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.72)}
.quiz-reminder strong{display:block;margin-bottom:7px;color:#53627d;font-size:12px;letter-spacing:.03em}
.quiz-reminder p{margin:0;font-size:10.5px;line-height:1.65}
.quiz-reminder p+p{margin-top:6px}
.reef-stage{min-height:810px}
@media(min-width:700px){.hero-copy h1{font-size:54px}.quiz-reminder{max-width:470px;padding:16px 18px}.quiz-reminder strong{font-size:13px}.quiz-reminder p{font-size:11.5px}.reef-stage{min-height:850px}}
@media(max-width:390px){.hero-copy h1{font-size:clamp(28px,8.65vw,34px)}.reef-stage{min-height:790px}.quiz-reminder{padding:12px}.quiz-reminder p{font-size:10px}}

/* 頁尾固定置中 */
footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}
footer span{display:block;width:100%;text-align:center}
footer a,footer button{color:inherit;font:inherit}
footer a{text-underline-offset:3px}
footer button{padding:0;border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;cursor:pointer}


/* 基本資料頁下方說明 */
.profile-data-note{width:100%;margin:16px auto 0;color:#66758d;font-size:10.5px;line-height:1.65;text-align:center}
@media(min-width:700px){.profile-data-note{font-size:11.5px}}
@media(max-width:390px){.profile-data-note{font-size:10px}}

/* 正式題目與第十題複選介面 */
.question-instruction{margin:0 0 4px;padding:11px 14px;border-radius:13px;background:rgba(235,241,255,.74);color:#6866a8;font-size:13px;font-weight:700;text-align:center}
.answer-button.is-selected{border-color:#8b7bf2;background:rgba(240,239,255,.94);box-shadow:inset 0 0 0 1px #8b7bf2,0 8px 20px rgba(88,94,171,.1)}
.answer-button--multiple{position:relative;align-items:flex-start;padding-right:52px}
.answer-content{display:grid;gap:4px;line-height:1.55}
.answer-content strong{font-size:15px}
.answer-content small{color:#718097;font-size:12px;line-height:1.55}
.answer-check{position:absolute;right:16px;top:50%;display:grid;place-items:center;width:25px;height:25px;border:1px solid #cbdbea;border-radius:8px;color:#fff;background:#fff;font-size:15px;font-weight:900;transform:translateY(-50%)}
.answer-button.is-selected .answer-check{border-color:#8173e9;background:linear-gradient(135deg,#aa6aeb,#647ff3)}
.multi-continue{margin-top:9px}
.multi-continue:disabled{color:#8b97aa;background:#e9eef4;box-shadow:none;cursor:not-allowed;filter:none;transform:none}
@media(max-width:520px){.question-card h2{font-size:clamp(23px,6.6vw,29px);line-height:1.45}.answer-button--multiple{padding:14px 48px 14px 12px;gap:12px}.answer-content strong{font-size:14px}.answer-content small{font-size:11px}.answer-check{right:12px}.question-instruction{font-size:12px}}
/* 結果頁詳細分析與配對指南 */
.result-analysis{max-width:960px;margin:62px auto 0;padding:28px 20px;border:1px solid rgba(255,255,255,.86);border-radius:30px;background:rgba(255,255,255,.62);box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
.analysis-intro{text-align:center}
.analysis-intro h2,.pairing-heading h2{font-family:var(--font-display);font-size:clamp(28px,7.5vw,40px);margin:9px 0 18px}
.analysis-intro>p{max-width:780px;margin:0 auto;color:#52627a;font-size:15px;line-height:2;text-align:left}
.pairing-guide{margin-top:38px;padding-top:30px;border-top:1px solid rgba(99,150,187,.16)}
.pairing-heading{text-align:center}
.pairing-grid{display:grid;gap:14px;margin-top:22px}
.pairing-card{position:relative;padding:23px 21px;border-radius:22px;overflow:hidden;text-align:left}
.pairing-card::after{content:"";position:absolute;width:95px;height:95px;right:-32px;bottom:-42px;border-radius:50%;background:rgba(255,255,255,.34)}
.pairing-card--soulmate{border:1px solid rgba(236,119,155,.22);background:linear-gradient(135deg,rgba(255,238,245,.88),rgba(242,239,255,.8))}
.pairing-card--challenge{border:1px solid rgba(70,151,224,.2);background:linear-gradient(135deg,rgba(235,248,255,.9),rgba(239,242,255,.82))}
.pairing-label{color:#7772ba;font-size:12px;font-weight:900;letter-spacing:.08em}
.pairing-card h3{position:relative;z-index:1;font-family:var(--font-display);font-size:27px;margin:8px 0 10px}
.pairing-card p{position:relative;z-index:1;margin:0;color:#5f6f85;font-size:14px;line-height:1.8}
@media(min-width:700px){.result-analysis{padding:48px 54px;border-radius:38px}.analysis-intro>p{font-size:17px;line-height:2.05}.pairing-grid{grid-template-columns:1fr 1fr;gap:18px}.pairing-card{padding:28px}.pairing-card h3{font-size:30px}}
@media(max-width:390px){.result-analysis{padding:25px 16px}.analysis-intro>p{font-size:14px}.pairing-card{padding:20px 17px}.pairing-card p{font-size:13px}}
.button--copy-share{width:100%;margin-top:12px;color:#6658c7;background:rgba(244,241,255,.92);border:1px solid #d9d2ff;box-shadow:0 8px 20px rgba(99,82,188,.1)}

.shared-result-cta{width:100%;margin-top:28px;text-align:center}
.analysis-scroll-hint{width:fit-content;margin:34px auto 0;padding:10px 18px;border:1px solid rgba(122,121,204,.2);border-radius:999px;background:rgba(244,241,255,.88);box-shadow:0 10px 24px rgba(99,82,188,.1);color:#5f65ad;font-family:var(--font-display);font-size:clamp(22px,4vw,28px);font-weight:900;line-height:1.5;text-align:center}.analysis-scroll-hint span{display:inline-block;margin:0 8px;color:#7a79cc}.analysis-scroll-hint+.preef-intro{margin-top:24px}
.result-home-action{display:flex;justify-content:center;margin-top:42px}.result-home-action .button{width:min(100%,320px)}
#owner-action-controls[hidden],.shared-result-cta[hidden]{display:none}

/* 全測驗固定採手機版單欄面寬；寬螢幕只增加左右留白。 */
:root{--quiz-mobile-width:430px}
.site-header,.app-shell,footer{width:min(calc(100% - 24px),var(--quiz-mobile-width))}
.screen--welcome,.screen--quiz,.screen--profile,.screen--result{width:100%;max-width:var(--quiz-mobile-width);margin-left:auto;margin-right:auto}
.screen--quiz,.screen--profile{margin-top:24px}
.question-card,.profile-card{padding:25px 18px;border-radius:25px}
.question-card h2{font-size:clamp(23px,6.6vw,29px);line-height:1.45}
.segmented{grid-template-columns:1fr}
.reef-stage{max-width:var(--quiz-mobile-width)}
.hero-glass-card{width:92%;max-width:396px;padding:42px 21px 30px}
.hero-copy h1{font-size:clamp(29px,9vw,42px)}
.hero-lead{font-size:15px}
.hero-facts{gap:6px;margin:19px 0 24px}
.hero-facts span{padding:8px 10px;font-size:11px}
.result-heading{padding:0 8px}
.result-section-width,.result-layout,.result-analysis,.preef-intro{width:100%;max-width:var(--quiz-mobile-width)}
.result-layout{grid-template-columns:1fr;gap:30px}
.result-actions{text-align:center}
.result-actions h3{font-size:46px}
.action-grid{grid-template-columns:1fr}
.result-analysis{margin-top:50px;padding:28px 18px;border-radius:28px}
.analysis-intro>p{font-size:15px;line-height:1.9}
.pairing-grid{grid-template-columns:1fr;gap:14px}
.pairing-card{padding:22px 19px}
.preef-intro{display:grid;margin-top:50px;padding:30px 20px;text-align:center}
.preef-intro h2{font-size:27px}
.preef-actions{width:100%;min-width:0;justify-self:center}
.preef-actions .button{width:min(100%,320px);justify-self:center}
.store-entry{width:min(100%,320px);justify-self:center}
.google-play-badge,.app-store-coming-soon{width:100%}
.google-play-badge img{width:100%;height:auto}
footer{display:grid;gap:7px;text-align:center}