/* 锁定浅色方案：禁止 Chrome Auto Dark Theme 与浏览器"强制深色"改写配色；显式声明画布底色，避免深色模式下默认画布发黑 */
html{background:#eaece8;color-scheme:only light}
:root{--ink:#183e70;--navy:#173f79;--blue:#315f98;--muted:#738195;--paper:#f8f6f0;--line:#e4e2d9;--gold:#b4956d;--serif:'Noto Serif SC','Source Han Serif SC','Songti SC','SimSun',serif;--sans:'Microsoft YaHei','PingFang SC',system-ui,sans-serif;color-scheme:only light}
*{box-sizing:border-box}body{margin:0;background:#eaece8;color:var(--ink);font:14px/1.65 var(--sans);-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer;color:inherit}a{color:var(--navy)}button{border:0;background:none}button:disabled{cursor:default;opacity:.65}img{display:block;max-width:100%}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b18c4e;outline-offset:4px}svg.icon{width:22px;height:22px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.app-shell{max-width:460px;min-height:100dvh;margin:auto;background:var(--paper);position:relative;box-shadow:0 0 90px #20364b12}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);line-height:1.45}h1{font-size:29px}h2{font-size:22px}h3{font-size:17px}small{font-size:11px}.muted{color:var(--muted)}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2.4px;color:var(--blue)}.seal{display:inline-flex;font:11px/1 var(--serif);writing-mode:vertical-rl;background:#ad594b;color:#fff4e6;padding:5px 3px;border-radius:3px;margin-left:8px;vertical-align:middle}.app-header{height:68px;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:3;background:#f8f6f0f2}.brand{font:bold 29px/1 var(--serif);letter-spacing:1px}.icon-button{width:42px;height:42px;display:grid;place-items:center;border:1px solid transparent;border-radius:50%;flex-shrink:0}.icon-button:hover{background:#e9edf0}.header-title{text-align:center;flex:1}.header-title h1{font-size:21px}.header-title small{color:var(--muted);font-size:10px}.header-spacer{width:42px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,460px);z-index:8;display:flex;justify-content:space-around;padding:8px 15px calc(8px + env(safe-area-inset-bottom));background:#fdfbf7f2;backdrop-filter:blur(15px);border-top:1px solid var(--line)}.nav-item{width:65px;min-height:49px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;color:#818896;border-radius:12px}.nav-item.active{color:var(--navy);background:#e9eef6;font-weight:bold}.nav-item.active svg{stroke-width:2.2}main{padding:0 22px 98px;min-height:calc(100dvh - 68px)}.section-heading{display:flex;justify-content:space-between;align-items:center;margin:23px 0 12px}.section-heading h2{font-size:19px}.text-link{display:flex;align-items:center;gap:4px;font-size:12px;min-height:35px}.text-link svg{width:14px}.pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;padding:3px 9px;border-radius:30px;background:#edf0ee;color:#55716c}.primary,.secondary{min-height:45px;padding:11px 18px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:600}.primary{background:var(--navy);color:white;box-shadow:0 4px 9px #153e7314}.primary:hover{background:#295991}.secondary{background:#fdfbf6;border:1px solid #d5d7da;color:var(--navy)}.primary svg,.secondary svg{width:19px;height:19px}.full{width:100%}.wave{position:absolute;left:0;bottom:-1px;width:100%;height:57px;color:#aec5d1;pointer-events:none}.hero{position:relative;margin:0 -22px;padding:12px 22px 50px;background:linear-gradient(165deg,#f8f6f0 10%,#eef0e9 67%,#e0e9ec);overflow:hidden}.hero:before{content:'';position:absolute;right:-10px;top:45px;width:200px;height:160px;background:radial-gradient(ellipse,#c6d4d560,transparent 68%);transform:rotate(-20deg)}.hero .eyebrow{margin-bottom:11px}.hero h1{font-size:32px;letter-spacing:2px;position:relative}.hero h1 span{color:#658991}.hero .subtitle{font-size:11px;color:var(--muted);margin:9px 0 0}.hero-image{width:calc(100% + 22px);max-width:none;margin:20px -11px 5px;mix-blend-mode:multiply;position:relative}.hero .primary{position:relative;z-index:2;margin:10px auto 0;display:flex;width:166px;min-height:42px;font-size:12px;border-radius:25px}.shortcut-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:17px 0 7px}.shortcut{min-height:102px;padding:12px 3px 8px;background:#f0eee6;border:1px solid #eeebe0;border-radius:12px;text-align:center}.shortcut:nth-child(2){background:#eaf0ed}.shortcut:nth-child(3){background:#f1eadd}.shortcut:nth-child(4){background:#e9eef2}.shortcut .icon{width:27px;height:27px;margin:0 auto 5px;stroke-width:1.3}.shortcut b{display:block;font:600 13px var(--serif)}.shortcut small{display:block;color:#85877e;font-size:9px;margin-top:4px;white-space:nowrap}.feature-card{position:relative;overflow:hidden;min-height:185px;display:flex;padding:18px;background:linear-gradient(120deg,#e8eee7,#eef1ed);border:1px solid #e0e6df;border-radius:14px;text-align:left;width:100%}.feature-copy{position:relative;z-index:1;width:61%}.feature-copy h3{font-size:21px;margin:9px 0 8px}.feature-copy p{font-size:11px;color:#6f817e;line-height:1.8}.feature-copy .text-link{margin-top:8px}.feature-character{position:absolute;right:-5px;top:9px;height:213px;max-width:47%;object-fit:contain;mix-blend-mode:multiply}.journal-card{display:flex;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}.journal-art{width:70px;height:78px;object-fit:contain;mix-blend-mode:multiply;background:#e8edf1;border-radius:10px}.journal-card h3{font-size:16px;margin:4px 0}.journal-card p{font-size:11px;color:var(--muted)}.page-lead{padding:11px 0 19px;border-bottom:1px solid var(--line);margin-bottom:18px}.page-lead p{font-size:12px;color:var(--muted);margin-top:6px}.search-box{height:45px;border:1px solid #d9dedc;background:#fffdf8;border-radius:11px;display:flex;align-items:center;padding:0 12px;gap:8px;margin-bottom:15px}.search-box svg{width:18px}.search-box input{width:100%;min-width:0;border:0;outline:none;background:none;color:var(--ink);font-size:12px;height:40px}.search-box .icon-button{width:28px;height:28px;min-width:28px}.chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin-bottom:17px;padding:3px 0}.chip{flex:1;white-space:nowrap;padding:7px 10px;min-height:34px;border-radius:20px;background:#eeede8;color:#77808a;font-size:11px;border:1px solid transparent}.chip.active{background:var(--navy);color:white;border-color:var(--navy)}.result-caption{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin:4px 0 12px}.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.role-card{position:relative;overflow:hidden;min-height:208px;border-radius:14px;background:var(--tone);border:1px solid #e2e4de;text-align:left;padding:0;display:flex;flex-direction:column}.role-card:before{content:'';position:absolute;width:120px;height:120px;border:1px solid #ffffff80;border-radius:50%;right:-35px;top:10px}.role-card .role-portrait{width:100%;height:148px;object-fit:contain;object-position:center top;mix-blend-mode:multiply;transform:translateY(8px);padding:0 17px}.role-card .role-card-copy{position:relative;padding:13px 14px 11px;background:linear-gradient(0deg,var(--tone) 55%,transparent);display:flex;align-items:end;justify-content:space-between;gap:4px}.role-card h3{font-size:18px;color:var(--role)}.role-card small{font-size:10px;color:#667078;display:block;margin-top:3px}.role-card .small-arrow{font-size:18px;font-weight:300;color:var(--role)}.role-card.wide{grid-column:1/-1;min-height:133px;flex-direction:row-reverse}.role-card.wide .role-portrait{width:50%;height:154px;padding:0 20px;margin-bottom:-21px}.role-card.wide .role-card-copy{width:50%;align-self:center;display:block;background:none;padding:15px 20px}.role-card.wide h3{font-size:21px}.role-card.wide .small-arrow{display:none}.saved-dot{position:absolute;right:11px;top:10px;width:25px;height:25px;background:#fff9;border-radius:50%;display:grid;place-items:center;z-index:1}.saved-dot svg{width:14px;height:14px;fill:var(--role);stroke:var(--role)}.empty{text-align:center;padding:45px 20px;color:var(--muted);background:#f1f1eb;border-radius:14px}.empty svg{width:36px;height:36px;margin:auto auto 10px}.empty h3{color:var(--ink);margin:5px 0}.empty p{font-size:12px;margin-bottom:16px}.detail-hero{margin:0 -22px;position:relative;min-height:327px;padding:24px 24px 38px;overflow:hidden;background:linear-gradient(130deg,var(--tone),#f8f6f0 72%)}.detail-copy{position:relative;z-index:1;width:44%}.detail-copy h1{font-size:33px;margin:10px 0 5px;color:var(--role)}.detail-copy .pill{font-size:9px;background:#fff9;color:var(--role)}.detail-copy p{font-family:var(--serif);font-size:13px;margin-top:15px;color:#7c8590;line-height:2;max-width:133px}.detail-hero img{height:305px;width:61%;object-fit:contain;position:absolute;right:-5px;bottom:12px;mix-blend-mode:multiply}.detail-hero .wave{height:38px}.detail-tabs{display:flex;border-bottom:1px solid var(--line);margin:0 0 19px;gap:26px;padding:0 4px}.detail-tab{min-height:45px;font-size:13px;position:relative;color:#8b9098;padding:10px 8px}.detail-tab.active{color:var(--navy);font-weight:bold}.detail-tab.active:after{content:'';position:absolute;bottom:-1px;height:3px;left:5px;right:5px;border-radius:3px;background:var(--navy)}.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}.meta-cell{padding:12px;background:#f0f0e9;border-radius:10px;display:flex;gap:10px;align-items:center}.meta-cell .icon{color:var(--role)}.meta-cell small{display:block;color:var(--muted);font-size:9px}.meta-cell b{font-size:11px;font-weight:500}.body-copy{font-size:12px;line-height:1.95;color:#6e7d8d}.quote{font:16px/1.8 var(--serif);color:var(--role);border-left:2px solid var(--role);padding-left:13px;margin:17px 0}.actions-row{display:flex;gap:9px;margin-top:21px}.actions-row>*{flex:1;padding:11px 8px}.caption{font-size:10px;line-height:1.8;color:#929795}.source-link{font-size:10px;text-decoration:underline;text-underline-offset:3px;display:inline-block;margin-top:12px}.vessel-panel{display:flex;gap:16px;align-items:center;background:#f0eee6;border-radius:12px;padding:15px;margin-bottom:14px}.vessel-panel img{width:42%;height:160px;object-fit:contain;mix-blend-mode:multiply}.vessel-panel h3{font-size:21px}.vessel-panel p{font-size:10px;color:var(--muted);margin-top:8px}.pattern-panel{display:flex;align-items:center;gap:20px;margin-bottom:15px}.pattern-panel img{width:110px;height:110px;object-fit:cover;border-radius:12px;mix-blend-mode:multiply}.swatch-row{display:flex;gap:8px;margin-top:9px}.swatch-row i{width:20px;height:20px;border-radius:50%;border:1px solid #bbc5c440}.journey-intro{background:linear-gradient(140deg,#e6ede8,#e9edf0);margin:0 -22px;padding:23px 22px 26px;position:relative;overflow:hidden}.journey-intro h2{font-size:25px}.journey-intro p{font-size:12px;color:#7c898d;margin-top:6px}.route-map{position:relative;margin-top:32px;display:flex;justify-content:space-between;padding-bottom:12px}.route-line{position:absolute;left:18px;right:18px;top:24px;width:calc(100% - 36px);height:70px;color:#99b2be}.station{position:relative;width:58px;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px}.station-symbol{background:#f8f6f0;width:44px;height:44px;border-radius:50%;border:1px solid #cfdbd9;display:grid;place-items:center}.station-symbol svg{width:25px;height:25px}.station.selected .station-symbol{background:var(--navy);color:white;border-color:var(--navy);box-shadow:0 0 0 4px #ffffffa0}.station.complete:not(.selected) .station-symbol{border-color:#759788;color:#587a68}.station b{font-size:10px;font-weight:500}.station small{font-size:8px;color:#768585}.station-status{position:absolute;right:3px;top:-3px;background:#6a9281;color:white;border:2px solid #edf1ec;border-radius:50%;width:15px;height:15px;display:grid;place-items:center;font-size:9px}.progress-block{padding:19px 0 6px}.progress-label{display:flex;justify-content:space-between;font-size:11px;margin-bottom:8px}.progress-track{height:6px;border-radius:7px;background:#e8e7df;overflow:hidden}.progress-fill{height:100%;background:#7a9f92;border-radius:7px;transition:width .3s}.station-card{margin-top:19px;border:1px solid #e0e5df;border-radius:15px;padding:21px;background:var(--tone);position:relative;overflow:hidden}.station-card .station-art{height:186px;position:absolute;right:-4px;top:17px;width:44%;object-fit:contain;mix-blend-mode:multiply}.station-card-copy{width:59%;position:relative;z-index:1}.station-card h2{font-size:24px;margin:8px 0 10px}.station-card .body-copy{font-size:11px;min-height:82px}.station-card .primary{margin-top:17px;font-size:11px;padding:10px 13px}.journey-note{margin:20px 0;font-size:10px;line-height:1.8;color:#8e9699;display:flex;gap:8px}.journey-note svg{width:17px;flex-shrink:0}.passport-top{padding:14px 0 23px;display:flex;align-items:center;justify-content:space-between}.passport-top .passport-mark{width:60px;height:60px;border:1px solid #b8c9cd;border-radius:50%;background:#e8eeec;display:grid;place-items:center;color:#79998f}.passport-mark svg{width:32px;height:32px}.passport-top h2{font-size:25px}.passport-top p{font-size:11px;color:var(--muted);margin-top:5px}.passport{padding:22px 16px;background:linear-gradient(100deg,#f5ecda,#fffcf4 47%,#e9decb 50%,#fff9ec 54%,#f2e8d6);border:1px solid #d8c5a7;border-radius:8px;box-shadow:0 3px 0 #dfd7c9,0 5px 0 #eae4d6;position:relative}.passport-title{text-align:center;font-size:9px;letter-spacing:2px;color:#a18b69;margin-bottom:20px}.stamp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;align-items:start}.stamp{padding:0;text-align:center;min-height:93px}.stamp-ring{height:65px;width:65px;border:1px dashed #b8b4a8;border-radius:50%;margin:auto;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;filter:grayscale(1);opacity:.4}.stamp-ring img{height:56px;width:47px;object-fit:contain;mix-blend-mode:multiply}.stamp.unlocked .stamp-ring{filter:none;opacity:1;border:2px double var(--role);box-shadow:0 0 0 3px #fff8,0 0 0 4px var(--role)}.stamp-ring .stamp-tick{position:absolute;bottom:0;right:5px;border-radius:50%;background:var(--role);color:white;font-size:8px;width:15px;height:15px}.stamp b{font-size:10px;display:block;margin-top:7px}.stamp small{font-size:8px;color:#9c9586;display:block}.passport-count{align-self:center;text-align:center;font-family:var(--serif);font-size:27px;color:var(--navy)}.passport-count small{display:block;font:9px var(--sans);color:#9a8c76;margin-top:5px}.reset-link{width:100%;margin:22px 0 3px;text-align:center;color:#8f969b;text-decoration:underline;font-size:10px;min-height:35px}.collection-list{display:grid;gap:10px}.collection-item{background:#eeefe8;border:1px solid #e3e7e1;border-radius:12px;display:flex;align-items:center;padding:10px;gap:13px}.collection-item img{width:47px;height:69px;object-fit:contain;mix-blend-mode:multiply}.collection-item .collection-open{padding:0;flex:1;text-align:left}.collection-item h3{font-size:17px}.collection-item small{color:var(--muted);font-size:10px}.collection-item .icon-button svg{width:18px;fill:#8ca6bc;stroke:#8ca6bc}.shop-banner{position:relative;overflow:hidden;border-radius:14px;padding:22px 20px;background:linear-gradient(120deg,#e8dfce,#f5eee1);min-height:174px;text-align:left;width:100%;margin:0 0 21px}.shop-banner h2{font-size:25px;margin:7px 0}.shop-banner p{font-size:11px;color:#8d806b}.shop-banner img{height:177px;max-width:40%;position:absolute;right:0;bottom:-9px;mix-blend-mode:multiply}.shop-banner .text-link{margin-top:12px;font-size:11px}.shop-banner>div{position:relative;z-index:1}.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 13px}.product{padding:0;text-align:left;overflow:hidden}.product img{width:100%;height:136px;object-fit:cover;border-radius:12px;background:#eee8dc}.product h3{font-size:13px;margin:9px 0 4px}.product p{font-size:10px;color:var(--muted)}.product-tag{font-size:8px;letter-spacing:1px;color:#aaa085;margin-top:7px}.product-more{display:flex;justify-content:space-between;align-items:center}.product-more .icon{width:15px;height:15px}.footer-note{text-align:center;color:#9a9f9d;font-size:9px;margin:25px 0 0;line-height:1.9}
dialog{width:calc(100% - 32px);max-width:418px;max-height:86dvh;border:1px solid #e0d9cb;border-radius:19px;background:var(--paper);padding:0;color:var(--ink);box-shadow:0 20px 70px #14263b35;overflow:auto}dialog::backdrop{background:#20354d60;backdrop-filter:blur(4px)}.modal-top{display:flex;align-items:center;justify-content:space-between;padding:17px 18px 10px;position:sticky;top:0;background:var(--paper);z-index:1}.modal-top h2{font-size:20px}.modal-body{padding:4px 22px 25px}.modal-body p{font-size:13px;line-height:1.95;color:#6c7c8c;margin:12px 0}.modal-body .body-copy{margin:13px 0}.modal-role{height:175px;max-width:80%;object-fit:contain;margin:5px auto 13px;mix-blend-mode:multiply}.modal-body .tag-label{font-size:10px;color:#9b8c72;letter-spacing:1px}.modal-body .source-link{font-size:10px}.modal-body .primary{margin-top:13px}.modal-product{width:100%;height:216px;object-fit:contain;background:#eee9df;border-radius:12px}.modal-actions{display:flex;gap:10px;margin-top:20px}.modal-actions button{flex:1}.danger{background:#8c504a}.toast{position:fixed;left:50%;transform:translate(-50%,10px);bottom:100px;z-index:30;background:#193b64ee;color:#fff;padding:11px 20px;border-radius:35px;font-size:12px;max-width:90%;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}.storage-notice{font-size:10px;background:#f2e4ce;padding:8px 16px;color:#866039}.skip-link{position:fixed;left:12px;top:-60px;z-index:40;background:white;padding:10px}.skip-link:focus{top:10px}.noscript{background:#fff3d8;padding:25px;text-align:center}.desktop-intro{display:none}.intro-line{width:35px;border-top:1px solid var(--gold);margin:28px 0}.intro-swatches{display:flex;gap:13px;margin-top:45px}.intro-swatches i{width:17px;height:17px;background:#9c8c71;border-radius:50%}.intro-swatches i:nth-child(2){background:#91a7b6}.intro-swatches i:nth-child(3){background:#a8bca6}.intro-swatches i:nth-child(4){background:#7892b2}.intro-swatches i:nth-child(5){background:#dfc9ae}.about-mark{font-family:var(--serif);text-align:center;font-size:38px;margin:13px 0;color:var(--navy)}.mini-source-list{display:grid;gap:13px;font-size:11px}.mini-source-list a{line-height:1.8}.modal-open{overflow:hidden}
@media(min-width:1080px){body{background:radial-gradient(ellipse at 85% 20%,#e1e9e7,transparent 40%),radial-gradient(ellipse at 10% 80%,#e0e7e8,transparent 45%),#edf0eb}.app-shell{margin-left:calc(50% - 75px);min-height:100vh}.bottom-nav{left:calc(50% + 155px)}.desktop-intro{display:block;position:fixed;left:calc(50% - 435px);top:21vh;width:290px}.desktop-intro h1{font-size:51px;letter-spacing:4px;margin-top:18px}.desktop-intro>p:not(.eyebrow){font:25px/1.9 var(--serif);letter-spacing:3px}.desktop-intro small{display:block;margin-top:23px;color:#8b9a9c;font-size:12px}.desktop-intro .seal{font-size:12px}.app-shell{border-left:1px solid #dee4df;border-right:1px solid #dee4df}}
@media(max-width:350px){main{padding-left:16px;padding-right:16px}.hero,.journey-intro,.detail-hero{margin-left:-16px;margin-right:-16px}.shortcut-grid{gap:5px}.shortcut small{font-size:8px}.hero h1{font-size:29px}.role-card .role-portrait{padding:0 8px}.role-card .role-card-copy{padding:12px 10px}.detail-copy h1{font-size:29px}.primary,.secondary{font-size:12px}.route-map{margin-left:-5px;margin-right:-5px}.station{width:53px}.stamp-ring{width:59px;height:59px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.product img{object-fit:contain;padding:7px;background:#f0ebe1}.detail-hero img[src$="qinghua.webp"]{clip-path:inset(0 2px 0 0)}@media(min-width:1080px){.toast{left:calc(50% + 155px)}}