:root{--ink:#203b36;--muted:#68766d;--paper:#f7f7f0;--accent:#255d4c;--line:#dce2d7;--soft:#edf1e8;--orange:#cb6848}
body{background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;-webkit-font-smoothing:antialiased}
.page{padding:32px 20px 44px}.page.active{animation:fadeUp .2s ease}.wrap,.wide-wrap{max-width:580px}.wide-wrap{max-width:660px}
.hero-title{font-size:30px;line-height:1.4;letter-spacing:-.8px;font-weight:650;color:var(--ink);margin:0 auto 14px;max-width:380px;text-wrap:balance}.hero-sub{font-size:11px;color:var(--muted);letter-spacing:2.6px;font-weight:500;margin-bottom:32px}
.icon-box{width:100%;height:148px;margin:0 auto 26px;border-radius:0;background:transparent url('city-landmarks.png') center/contain no-repeat;box-shadow:none;font-size:0}
.card,.pw-card,.category-card,.group-card,.top-card,.dim-card,.others-card{background:#fff;border:1px solid var(--line);box-shadow:none;border-radius:20px;padding:24px;margin-bottom:20px}
.pw-card{padding:24px}.pw-label{font-size:16px;color:var(--ink);font-weight:550;text-align:left}.pw-input{border:1px solid #ccd5c9;background:#fafbf7;border-radius:12px;color:var(--ink);font-size:28px;font-weight:500;min-height:64px}.pw-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #255d4c15}.pw-hint{font-size:14px;line-height:1.6;color:var(--muted);text-align:left;margin-top:12px}
.info-box{background:var(--soft);border:0;border-radius:14px;padding:18px 20px;margin-bottom:24px}.info-box-title{color:var(--ink);font-size:14px;margin-bottom:8px}.info-box-text,.decl-text{color:#53635a;font-size:15px;line-height:1.8}.decl-text strong{color:var(--accent)}
.btn-primary{background:var(--accent);box-shadow:none;border-radius:12px;padding:18px;font-size:17px;font-weight:600;letter-spacing:.3px;min-height:58px}.btn-primary:hover{background:#194a3c;box-shadow:none;transform:none}.btn-primary:active{transform:scale(.99)}.btn-secondary{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;font-size:16px;font-weight:500;min-height:56px}.btn-secondary:hover{background:var(--soft)}
.footer{padding:24px 0 4px}.footer a{font-size:12px;color:var(--muted);border-color:#cbd2c7;line-height:1.8}
.stats-grid{gap:0;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 0;margin-bottom:24px}.stat-card{background:none;border-radius:0;box-shadow:none;padding:0 5px;gap:7px;border-right:1px solid var(--line)}.stat-card:last-child{border:0}.stat-icon{display:none}.stat-num{font-size:19px;color:var(--ink);font-weight:650;white-space:nowrap}.stat-desc{font-size:12px;color:var(--muted)}
.card-title,.dim-card-title,.others-title{font-size:18px;color:var(--ink);font-weight:600;margin-bottom:16px}.dim-list{gap:0}.dim-item{background:none;border-radius:0;padding:14px 0;border-top:1px solid #eef0e9;gap:12px}.dim-item-name{display:block;font-size:15px;color:var(--ink);font-weight:550;margin-bottom:4px}.dim-item-desc{font-size:14px;line-height:1.7;color:var(--muted)}.dim-item-icon{font-size:19px}.category-card{padding:20px}.category-name{font-size:16px;color:var(--ink)}.category-desc{background:transparent;color:var(--muted);font-size:11px;padding:0}.category-icon{background:var(--soft)!important}.city-tag{font-size:14px;background:var(--soft);color:var(--accent);padding:7px 13px;border-radius:7px}.city-tags{gap:8px}
#page-quiz{padding-top:38px}.q-header,.q-body,.q-nav{max-width:580px}.q-header{background:none;box-shadow:none;border-radius:0;padding:0;margin-bottom:32px}.q-meta{flex-wrap:wrap;gap:10px;margin-bottom:16px}.q-cat{font-size:14px;font-weight:550;color:var(--accent);margin-right:auto}.q-count,.q-pct{font-size:13px;color:var(--muted);font-weight:450}.progress-track{height:4px;background:#e1e7db}.progress-bar,.dim-bar{background:var(--accent)}
.q-body{background:none;box-shadow:none;padding:0;margin-bottom:26px;border-radius:0}.q-text{color:var(--ink);font-size:25px;font-weight:600;line-height:1.5;letter-spacing:-.4px;margin-bottom:30px}.opts{gap:14px}.opt{min-height:74px;padding:20px 18px;background:#fff;border:1px solid #d7ded1;border-radius:14px;color:var(--ink);font-size:17px;line-height:1.6;gap:14px;box-shadow:0 2px 0 #203b3603}.opt:hover{background:#f0f4e9;border-color:var(--accent);transform:none}.opt.selected{background:#e8f0df;border-color:var(--accent);color:var(--accent);font-weight:500}.opt-radio{color:var(--accent);font-size:21px}.q-nav{gap:8px}.nav-btn{font-size:14px;color:var(--muted);border:1px solid var(--line);border-radius:10px;background:transparent;padding:13px 16px;min-height:48px}.auto-hint{font-size:12px;color:var(--muted)}
.top-card{position:relative;padding:30px 24px 24px;background:#fff}.top-sub{color:var(--muted);font-size:13px;font-weight:450;letter-spacing:1px;margin-bottom:18px}.top-icon-emoji{font-size:0;height:118px;background:url('city-landmarks.png') center/contain no-repeat;margin-bottom:20px}.match-pct{font-size:48px;font-weight:550;color:var(--orange);background:none;-webkit-text-fill-color:var(--orange);letter-spacing:-2px}.top-city{font-size:38px;font-weight:650;color:var(--ink);letter-spacing:4px;margin-top:10px}.top-prov{color:var(--muted);font-size:14px;margin-bottom:22px}.tag-chip,.tag-chip-sm{background:#eaf0e4;color:var(--accent);border:0;font-weight:500;border-radius:6px;padding:6px 11px;font-size:13px}.kw-chip,.kw-chip-sm{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:6px;padding:5px 10px;font-size:12px}.match-reason{background:#f5f7ef;border:0;border-radius:12px;padding:20px;margin-top:24px}.reason-title{color:var(--accent);font-size:15px;font-weight:600;margin-bottom:12px}.reason-text{font-size:16px;color:#46594e;line-height:1.9;text-align:justify}.dim-card,.others-card{padding:24px}.dim-grid{gap:18px}.dim-label{width:72px;font-size:14px;color:var(--muted)}.dim-val{font-size:14px;color:var(--accent);font-weight:500}.dim-track{background:#eaf0e4;height:6px}.others-grid{grid-template-columns:1fr;gap:16px}.other-card{background:#fafbf7;border:1px solid var(--line);border-radius:12px;padding:20px}.other-name{color:var(--ink);font-size:20px;font-weight:600}.other-prov{color:var(--muted);font-size:13px}.other-score{color:var(--orange);font-size:23px;font-weight:550}.other-desc{color:#53635a;font-size:15px;line-height:1.85}.other-card .tag-row{justify-content:flex-start}.other-top{margin-bottom:16px}
button:focus-visible,a:focus-visible{outline:3px solid #cf764f;outline-offset:4px}
@media(min-width:700px){.page{padding-top:48px}#page-password{padding-top:58px}.hero-title{font-size:34px}.opt{font-size:18px}.q-text{font-size:28px}}
@media(max-width:360px){.page{padding-left:16px;padding-right:16px}.hero-title{font-size:27px}.category-header{align-items:flex-start;gap:8px}.category-desc{max-width:100px;text-align:right}.card,.pw-card,.top-card,.dim-card,.others-card{padding:20px}.stat-num{font-size:17px}.q-text{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Landmark illustration replacement */
.icon-box{height:210px;margin-bottom:20px}.top-icon-emoji{height:185px;margin-bottom:20px}
/* Blend the illustration's near-white paper into the result card. */
.top-icon-emoji{filter:brightness(1.08);mix-blend-mode:multiply}