/* Soft character cards; keep body text and assessment controls easy to read. */
:root{--bg:#F8FBFA;--card:#FFF;--ink:#344641;--ink2:#52655F;--mute:#687870;--pri:#327966;--pri2:#6CA78F;--line:#DDE9E2;--soft:#E8F5EE;--acc:#C75D7A;--warn:#AD3449;--r:8px;--font-ui:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif}
html,body{background:var(--bg);font-family:var(--font-ui)}
button,input,select,textarea{font-family:inherit}
.wrap{max-width:656px;padding:20px 24px 60px}
h1,h2,h3,.t1,.nm,.brand,.code,.career h4 small{letter-spacing:0;color:var(--ink)}
button,a,input,textarea,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--pri);outline-offset:4px}
[tabindex="-1"]:focus{outline:none}
button:disabled{cursor:default;opacity:.5}
.journal-nav,.quiz-nav,.report-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px}
.journal-nav{padding-bottom:12px;border-bottom:1px dashed #D3E5DA}
.journal-brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:15px;font-weight:700;text-decoration:none}
.journal-brand img{width:38px;height:38px;object-fit:contain}
.nav-report{font-family:inherit;font-size:14px;font-weight:600;background:transparent;border:0;color:var(--pri);cursor:pointer;padding:10px 0 10px 12px;min-height:44px}
.nav-report span{margin-left:8px}
.home-welcome{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0 30px}
.home-welcome>div{min-width:0}
.eyebrow{font-size:13px;color:var(--pri);letter-spacing:0}
.home-welcome h1{font-size:36px;line-height:1.4;margin:9px 0 10px;font-weight:700}
.title-dot{color:var(--acc);font-size:22px;margin-left:8px;vertical-align:middle}
.home-welcome p{font-size:14px;color:var(--ink2);margin:0;max-width:330px}
.welcome-mascot{width:160px;height:160px;object-fit:contain;flex:none;border-radius:50%;mix-blend-mode:multiply;animation:hello .65s ease-out both}
.collection-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.journal-heading{font-size:21px;line-height:1.5;margin:0;font-weight:700}
.collection-heading>span{font-size:12px;color:var(--mute);white-space:nowrap}
#testList{display:grid;gap:20px}
.journal-test{--test-accent:#286C58;--test-tint:#DFF2E8;--test-border:#B9D9C9;width:100%;display:grid;grid-template-columns:minmax(0,1fr) 138px;column-gap:12px;row-gap:8px;align-items:center;text-align:left;font:inherit;color:var(--ink);margin:0;border:1px solid var(--test-border);border-radius:8px;padding:20px 24px 0;background:var(--test-tint);box-shadow:inset 0 0 0 3px #FFFFFF80,0 5px 0 #DCE9E1,0 10px 24px #355E4B09;min-height:268px;cursor:pointer;transition:border-color .16s,transform .16s}
.journal-test[data-tone="pink"]{--test-accent:#A84C66;--test-tint:#FCE4EB;--test-border:#EAC3D0;box-shadow:inset 0 0 0 3px #FFFFFF80,0 5px 0 #F1D8E1,0 10px 24px #66344609}
.journal-test[data-tone="yellow"]{--test-accent:#806224;--test-tint:#FFF3CF;--test-border:#E6D9AA;box-shadow:inset 0 0 0 3px #FFFFFF80,0 5px 0 #EEE5C7,0 10px 24px #66543409}
.journal-test[data-tone="blue"]{--test-accent:#3C6585;--test-tint:#E4F0FA;--test-border:#C5DAE8;box-shadow:inset 0 0 0 3px #FFFFFF80,0 5px 0 #DAE6F0,0 10px 24px #34516609}
.test-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;overflow-wrap:anywhere}
.test-kicker{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--test-accent);font-weight:600}
.test-number{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.journal-test .t1{font-size:28px;font-weight:700;line-height:1.4}
.journal-test .t3{font-size:13px;line-height:1.6;margin-top:5px;color:var(--ink2)}
.journal-test .t4{font-size:12px;color:var(--mute);margin-top:9px;line-height:1.6}
.test-bottom{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px dashed var(--test-border);padding:14px 0;margin-top:4px;min-height:74px}
.test-status{font-size:12px;color:var(--test-accent);min-width:0;line-height:1.6}
.test-cta{display:flex;align-items:center;gap:12px;color:var(--test-accent);background:#FFFFFFE0;border:1px solid #FFFFFF;border-radius:8px;box-shadow:0 2px 0 #00000009;padding:9px 14px;font-size:14px;font-weight:700;white-space:nowrap;flex:none}
.test-art{position:relative;pointer-events:none;display:flex;align-items:center;justify-content:center}
.test-art img{width:138px;height:138px;object-fit:contain;transform:rotate(-5deg);filter:drop-shadow(0 4px 0 #FFFFFFB0)}
.test-progress{display:block;height:4px;width:108px;max-width:100%;background:#FFFFFFB0;overflow:hidden;margin-top:6px;border-radius:3px}
.test-progress i{display:block;height:100%;background:var(--test-accent)}
.access-note{font-size:12px;text-align:center;color:var(--mute);line-height:1.8;margin:16px 0 0}
.access-note span{margin:0 8px;color:#AFBDB5}
.journal-benefits{padding:28px 0;margin:28px 0 0;border-top:1px solid var(--line)}
.benefit-grid{display:grid;gap:12px;margin-top:20px}
.benefit-grid>div{display:grid;grid-template-columns:48px 1fr;column-gap:12px;padding:18px 16px;border:1px solid #E1E9E4;border-radius:8px;background:#FFF;box-shadow:0 3px 0 #ECF1ED}
.benefit-grid>div:nth-child(2){background:#FFF8E5;border-color:#F0E6C7}
.benefit-grid>div:nth-child(3){background:#FFF0F3;border-color:#EEDBE2}
.benefit-grid img{grid-row:span 2;width:48px;height:48px;align-self:center;object-fit:contain}
.benefit-grid b{font-size:14px;font-weight:650}
.benefit-grid p{font-size:13px;color:var(--mute);margin:3px 0 0;line-height:1.7}
.home-faq{border-top:1px solid var(--line);padding:24px 0 8px}
.home-faq h2{margin-bottom:10px}
.home-faq details{border:1px solid var(--line);font-size:14px;background:#FFF;border-radius:8px;padding:0 16px;margin-top:10px}
.home-faq summary{padding:15px 28px 15px 0;cursor:pointer;position:relative;list-style:none;font-weight:600}
.home-faq summary::-webkit-details-marker{display:none}
.home-faq summary:after{content:'+';position:absolute;right:4px;font-size:20px;top:9px;color:var(--pri);font-weight:400}
.home-faq details[open] summary:after{content:'−'}
.home-faq details p{margin:0;padding:0 20px 18px 0;color:var(--ink2);font-size:13px;line-height:1.9}
.card{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:24px 0 4px;margin-top:28px}
.lookup-panel{padding:20px;background:#FFF;border:1px solid var(--line);border-radius:8px}
.btn{background:var(--pri);color:#FFF;border-radius:8px;box-shadow:0 4px 0 #CBE1D5;letter-spacing:0;font-weight:650;font-size:16px;min-height:50px;transition:background .15s,transform .15s}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.ghost{color:var(--pri);border:1px solid #B6CFC2;background:#FFF;box-shadow:none}
.link{min-height:44px;line-height:1.5;text-decoration:none;color:var(--pri)}
.link:hover{text-decoration:underline}
.sec-t{font-size:17px;font-weight:750}
.sec-t:before{width:4px;height:16px;border-radius:0;background:var(--acc)}
.hero2{padding-top:12px}
.bubble{background:#FFF;border:1px solid #E1E9E4;border-radius:8px;box-shadow:0 3px 0 #EAF0EC;padding:12px 18px;font-size:13px}
.bubble:after{display:block}
.bubble b{font-size:15px;font-weight:600;margin-top:4px}
.mascot{width:156px;height:156px;animation:hello .65s ease-out both;object-fit:contain}
.hero2 h1{font-size:30px;letter-spacing:0;margin-top:4px;font-weight:700}
.hero2 .sub{font-size:13px;color:var(--mute);margin-top:10px}
.intro-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.intro-actions .btn{margin-top:0}
.zoo{gap:10px;margin-top:16px}
.zoo div{border-radius:8px;padding:10px 4px}
.zoo img{width:70px;height:70px;object-fit:contain}
.zoo small{font-weight:600}
.getlist li{font-size:14px}
.quiz-nav{padding:2px 0 8px;border-bottom:1px solid var(--line)}
.brand{color:var(--ink);font-size:15px}
.track{margin:14px 17px 0;height:40px}
.track .bar2{height:6px;background:#E1EAE4;bottom:5px}
.track .bar2 i{background:var(--pri2)}
.track img{bottom:8px}
.qmeta{gap:12px;flex-wrap:wrap;font-size:12px;color:var(--mute)}
.qcard{background:#FFF8E5;border:1px solid #EDE2BD;box-shadow:inset 0 0 0 3px #FFFFFFB0,0 4px 0 #F0E8D0;border-radius:8px;padding:24px 22px;margin:20px 0 24px;min-height:150px}
.qtext{font-size:23px;line-height:1.65;font-weight:700;overflow-wrap:anywhere}
.question-enter{animation:question-in .16s ease-out}
.opts button{position:relative;min-height:54px;border-radius:8px;border:1px solid #CFDCD4;background:#FFF;box-shadow:0 3px 0 #EAF0EC;padding:14px 46px 14px 18px!important;margin-bottom:13px;color:var(--ink2);font-weight:500;transition:background .12s,border-color .12s}
.opts button:after{content:'';position:absolute;right:18px;top:50%;transform:translateY(-50%);border:1px solid #9AAD9F;width:16px;height:16px;border-radius:50%}
.opts button.on{background:#E0F1E8;border-color:var(--pri);color:#19513F;font-weight:650}
.opts button.on:after{content:'✓';display:grid;place-items:center;background:var(--pri);border-color:var(--pri);color:#FFF;font-size:12px;line-height:1}
.opts button:disabled{opacity:1}
.quiz-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.save-status{font-size:12px;color:var(--mute);text-align:center;margin:16px 0 0;min-height:22px}
.result-heading{font-weight:700;font-size:23px;margin:18px 0;color:var(--ink)}
.result-heading span{color:var(--acc)}
.animal-card{padding:8px 8px 16px;border:1px solid #CEDBD3;background:#FFF;border-radius:8px;overflow:hidden;box-shadow:0 5px 0 #E2ECE5}
.pet{border:0;border-radius:0;padding:20px 16px;margin:0}
.pet .tag2{border-radius:0;background:transparent;border-bottom:1px solid #FFFFFF;padding:0 0 12px;width:100%;color:var(--ink2);font-size:12px}
.pet img{width:170px;height:170px;object-fit:contain;animation:hello .62s ease-out both}
.pet .nm{font-weight:700;font-size:26px;line-height:1.45;overflow-wrap:anywhere}
.pet .ln{font-size:14px;color:var(--ink2);line-height:1.8}
.chips span{border-radius:4px;background:#FFFFFFC9;color:var(--ink2);font-size:12px}
.card-signature{text-align:center;font-size:12px;color:var(--mute);margin:14px 12px 0;line-height:1.8}
.card-signature small{font-size:11px}
.bars .bar{background:#E4ECE7}
.bars .bar i{background:var(--pri2)}
.blur{display:none}
.locked ul{font-size:14px;line-height:1.8}
input,select,textarea{border:1px solid #BCCEC2;border-radius:8px;min-height:48px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pri);outline-offset:2px}
.err{line-height:1.7}
.report-nav{margin-bottom:18px}
.rhead{border:0;border-radius:8px;padding:20px;display:grid;grid-template-columns:minmax(0,1fr) 80px;column-gap:12px}
.rhead .pimg{position:static;grid-column:2;grid-row:1 / span 2;width:80px;height:80px;object-fit:contain}
.rhead .muted{grid-column:1;grid-row:1;max-width:none;padding:0;background:transparent;border-radius:0;font-size:12px}
.rhead h2{grid-column:1;grid-row:2;font-size:24px;margin:8px 0 6px;min-height:48px;overflow-wrap:anywhere}
.rhead .rc{grid-column:1 / -1;padding-top:12px}
.rhead p{grid-column:1 / -1;background:transparent;border-radius:0;padding:14px 0 0;border-top:1px solid #FFFFFF;color:var(--ink2)}
.tcard{background:var(--soft);border-radius:8px}
.career{border:1px solid var(--line);border-radius:8px;background:#FFF}
.career h4{flex-wrap:wrap}
.career .step{border-radius:4px;color:var(--pri);background:var(--soft)}
.twocol{gap:10px}
.twocol div{border-radius:8px}
.plan .todo,.career h4 span{min-width:0;overflow-wrap:anywhere}
.answer,.closing2 div{overflow-wrap:anywhere}
.closing2{background:transparent;border-radius:0;border-top:1px solid var(--line);padding:20px 0 0;margin-top:24px}
.closing2 div{font-size:14px}
.foot{color:var(--mute);font-size:12px;line-height:1.9}
.actions{border-top:1px solid var(--line);background:#FAFCFBF5;padding:12px 0 max(12px,env(safe-area-inset-bottom));z-index:2}
.actions .btn{font-size:14px;min-width:0}
#moreTests{display:grid;gap:14px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.more-t{font-size:16px}
.loading{padding:55px 12px}
.lmascot{width:132px;height:132px;object-fit:contain;animation:hello .65s ease-out both}
.lstep:after{content:'';display:block;width:32px;height:3px;background:var(--pri2);margin:16px auto;animation:loading-pulse 1.5s ease-in-out infinite}
.modal{z-index:100}
.modal .btn{flex-shrink:0}
.modal img{object-fit:contain}
.toast{border-radius:8px;max-width:calc(100% - 32px);width:max-content;text-align:center}
@keyframes hello{0%{transform:translateY(8px) rotate(-5deg);opacity:.4}65%{transform:translateY(-3px) rotate(2deg)}100%{transform:none;opacity:1}}
@keyframes question-in{from{transform:translateY(5px);opacity:.5}to{transform:none;opacity:1}}
@keyframes loading-pulse{50%{opacity:.35}}
@media(hover:hover){.journal-test:hover{transform:translateY(-2px);border-color:var(--test-accent)}.opts button:not(:disabled):hover{border-color:var(--pri)}}
@media(min-width:900px){
  .wrap.home-width{max-width:1080px;padding:26px 40px 60px}
  .home-welcome{padding:34px 0 36px}
  .home-welcome h1{font-size:40px}
  .home-welcome p{max-width:none;font-size:15px}
  .welcome-mascot{width:178px;height:178px;margin-right:32px}
  #testList{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .journal-test{min-height:292px;padding:20px 24px 0;grid-template-columns:minmax(0,1fr) 156px}
  .test-art img{width:156px;height:156px}
  .benefit-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .journal-benefits{margin-top:30px}
}
@media(max-width:480px){
  .wrap{padding:14px 18px 42px}
  .home-welcome{padding:26px 0;gap:10px}
  .home-welcome h1{font-size:31px}
  .home-welcome p{font-size:13px;max-width:220px}
  .welcome-mascot{width:118px;height:118px}
  .journal-heading{font-size:19px}
  .collection-heading>span{font-size:11px}
  .journal-test{padding:16px 18px 0;grid-template-columns:minmax(0,1fr) 116px;min-height:246px}
  .test-art img{width:116px;height:116px}
  .journal-test .t1{font-size:26px}
  .journal-test .t3{font-size:12px}
  .twocol{grid-template-columns:1fr}
  .qtext{font-size:21px}
  .rhead h2{font-size:22px}
}
@media(max-width:360px){
  .wrap{padding-left:14px;padding-right:14px}
  .journal-brand{font-size:13px;gap:4px}
  .home-welcome h1{font-size:28px}
  .welcome-mascot{width:92px;height:92px}
  .title-dot{font-size:15px;margin-left:3px}
  .collection-heading{flex-wrap:wrap;gap:4px}
  .journal-test{padding:16px 14px 0;grid-template-columns:minmax(0,1fr) 100px;gap:8px}
  .test-art img{width:100px;height:100px}
  .test-cta{padding:8px 10px}
  .pet .nm{font-size:25px}
  .zoo img{width:60px;height:60px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}