:root{color-scheme:light dark;--page: #ecece6;--surface: #f7f7f2;--surface-strong: #deded6;--ink: #20211f;--muted: #686963;--line: #c8c8bf;--accent: #c54730;--accent-hover: #aa3927;--accent-ink: #fff8f3;--photo-shadow: rgba(55, 57, 50, .2);--radius: 6px;--header-height: 72px;font-family:PingFang SC,Noto Sans CJK SC,Microsoft YaHei,system-ui,sans-serif;font-synthesis:none;letter-spacing:0}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:var(--page)}body{margin:0;min-width:320px;min-height:100%;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}button,input{font:inherit}button{letter-spacing:0}button:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:4px}img{display:block;width:100%}.page-noise{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}.site-header{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;width:min(100% - 64px,1360px);height:var(--header-height);margin:0 auto;border-bottom:1px solid var(--line)}.brand{display:inline-flex;align-items:center;gap:10px;padding:8px 0;color:var(--ink);background:none;border:0;font-size:15px;font-weight:700;cursor:pointer}.brand-mark{display:block;width:14px;height:14px;background:var(--accent);border-radius:2px 7px;transform:rotate(12deg)}.header-note{margin:0;color:var(--muted);font-size:13px}.screen{width:min(100% - 64px,1360px);min-height:calc(100dvh - var(--header-height));margin:0 auto}.intro-screen{display:grid;grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);align-items:center;gap:clamp(40px,7vw,112px);padding:clamp(44px,6vh,76px) 0}.intro-copy{align-self:center;padding-left:clamp(0px,3vw,42px)}.eyebrow,.question-kicker,.result-label{margin:0 0 24px;color:var(--accent);font-size:13px;font-weight:700}.intro-copy h1,.question-panel h1,.loading-copy h1,.result-summary h1{margin:0;font-weight:760;letter-spacing:0;line-height:1.08}.intro-copy h1{max-width:680px;font-size:clamp(44px,4.55vw,72px)}.intro-lead{max-width:430px;margin:28px 0 34px;color:var(--muted);font-size:17px;line-height:1.8}.primary-button,.secondary-button,.text-button{min-height:48px;border-radius:var(--radius);cursor:pointer;transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease}.primary-button{display:inline-flex;align-items:center;justify-content:space-between;gap:26px;min-width:166px;padding:0 18px;color:var(--accent-ink);background:var(--accent);border:1px solid var(--accent);font-weight:700}.primary-button:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px)}.primary-button:active:not(:disabled),.secondary-button:active,.text-button:active,.option-button:active{transform:scale(.98)}.primary-button:disabled{color:color-mix(in srgb,var(--muted) 72%,transparent);background:var(--surface-strong);border-color:var(--surface-strong);cursor:not-allowed}.secondary-button{min-width:132px;padding:0 18px;color:var(--ink);background:transparent;border:1px solid var(--line);font-weight:700}.secondary-button:hover{border-color:var(--ink);transform:translateY(-2px)}.city-collage{position:relative;min-height:min(68vh,660px)}.city-photo{position:absolute;margin:0;overflow:hidden;border-radius:var(--radius);box-shadow:0 22px 56px var(--photo-shadow)}.city-photo img{height:100%;object-fit:cover}.city-photo-main{inset:6% 15% 3% 8%}.city-photo-top{top:0;right:0;width:39%;height:33%;border:7px solid var(--page)}.city-photo-bottom{right:1%;bottom:4%;width:35%;height:29%;border:7px solid var(--page)}.collage-caption{position:absolute;bottom:1%;left:0;display:grid;gap:4px;padding:12px 14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);font-size:12px;font-weight:700}.quiz-screen{display:grid;grid-template-columns:280px minmax(0,760px);justify-content:center;gap:clamp(56px,10vw,150px);padding:clamp(52px,8vh,96px) 0 64px}.quiz-rail{align-self:start}.progress-copy{display:flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums}.progress-copy span:first-child{color:var(--accent);font-size:58px;font-weight:760;line-height:1}.progress-copy span:not(:first-child){color:var(--muted);font-size:15px}.progress-ticks{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;width:210px;margin-top:22px}.progress-tick{height:4px;background:var(--surface-strong);border-radius:2px}.progress-tick.is-complete,.progress-tick.is-current{background:var(--accent)}.question-context{max-width:220px;margin:34px 0 0;color:var(--muted);font-size:14px;line-height:1.7}.question-panel{min-width:0;animation:panel-in .42s cubic-bezier(.16,1,.3,1) both}.question-kicker{margin-bottom:18px}.question-panel h1{max-width:680px;font-size:clamp(34px,4vw,56px)}.options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:48px}.option-button{position:relative;display:grid;grid-template-columns:34px 1fr;align-items:start;gap:12px;min-height:112px;padding:20px;color:var(--ink);text-align:left;background:color-mix(in srgb,var(--surface) 72%,transparent);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}.option-button:hover{background:var(--surface);border-color:color-mix(in srgb,var(--accent) 64%,var(--line));transform:translateY(-2px)}.option-button[aria-checked=true]{background:color-mix(in srgb,var(--accent) 10%,var(--surface));border-color:var(--accent)}.option-index{display:grid;place-items:center;width:30px;height:30px;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius);font-size:12px;font-weight:700}.option-button[aria-checked=true] .option-index{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.option-title{display:block;margin-bottom:6px;font-size:16px;font-weight:700;line-height:1.4}.option-description{display:block;color:var(--muted);font-size:13px;line-height:1.6}.quiz-actions{display:flex;align-items:center;justify-content:space-between;margin-top:28px}.text-button{display:inline-flex;align-items:center;gap:8px;padding:0 8px;color:var(--muted);background:transparent;border:0}.text-button:hover{color:var(--ink)}.selection-error{min-height:22px;margin:14px 0 0;color:var(--accent);font-size:13px;text-align:right}.loading-screen{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);align-items:center;gap:10vw;padding:64px 0}.loading-copy h1{font-size:clamp(42px,5vw,72px)}.loading-visual{display:grid;gap:14px}.loading-line{width:72%;height:16px;background:var(--surface-strong);border-radius:var(--radius);animation:loading-pulse 1.2s ease-in-out infinite alternate}.loading-line-short{width:46%;animation-delay:.18s}.loading-photo{width:100%;aspect-ratio:16 / 9;margin-top:18px;background:var(--surface-strong);border-radius:var(--radius);animation:loading-pulse 1.2s ease-in-out .28s infinite alternate}.result-screen{width:min(100% - 64px,1360px);margin:0 auto;padding:52px 0 72px}.result-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);gap:clamp(44px,7vw,104px);align-items:center;min-height:calc(100dvh - var(--header-height) - 52px)}.result-image{height:min(72vh,720px);min-height:500px;margin:0;overflow:hidden;border-radius:var(--radius);box-shadow:0 26px 70px var(--photo-shadow)}.result-image img{height:100%;object-fit:cover}.result-summary h1{font-size:clamp(66px,8vw,116px)}.result-subtitle{max-width:520px;margin:20px 0 0;color:var(--muted);font-size:20px;line-height:1.6}.match-score{display:flex;align-items:end;gap:14px;margin-top:38px;padding-top:24px;border-top:1px solid var(--line)}.match-score strong{color:var(--accent);font-size:48px;font-weight:760;line-height:1;font-variant-numeric:tabular-nums}.match-score span{padding-bottom:4px;color:var(--muted);font-size:13px}.trait-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.trait{padding:8px 10px;color:var(--ink);background:var(--surface-strong);border-radius:var(--radius);font-size:13px}.result-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:72px clamp(48px,8vw,120px);padding:100px clamp(0px,4vw,54px) 0}.result-body h2{margin:0;font-size:clamp(28px,3vw,42px);line-height:1.2}.result-intro{max-width:720px;margin:26px 0 0;color:var(--muted);font-size:18px;line-height:1.8}.reason-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:38px}.reason-item{min-height:166px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.reason-item:first-child{grid-column:span 2}.reason-item h3,.reality-check h3{margin:0 0 12px;font-size:15px}.reason-item p,.city-note p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}.city-note{align-self:start;padding:30px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-left:4px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0}.city-note>p{margin-top:22px;color:var(--ink);font-size:16px}.reality-check{margin-top:30px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--accent) 32%,var(--line))}.alternatives{grid-column:1 / -1;padding-top:26px}.alternatives-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px}.alternative-item{display:grid;grid-template-columns:142px minmax(0,1fr);gap:22px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.alternative-item img{height:112px;object-fit:cover;border-radius:calc(var(--radius) - 2px)}.alternative-copy{align-self:center}.alternative-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.alternative-heading h3{margin:0;font-size:22px}.alternative-heading strong{color:var(--accent);font-size:15px;font-variant-numeric:tabular-nums}.alternative-copy p{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.55}.result-actions{grid-column:1 / -1;display:flex;gap:12px;padding-top:10px}.disclaimer,.photo-credits{grid-column:1 / -1;margin:-44px 0 0 auto;color:var(--muted);font-size:12px}.photo-credits{margin-top:-54px;transform:translateY(28px)}.photo-credits summary{cursor:pointer;text-align:right}.photo-credits div{display:grid;gap:4px;max-width:520px;margin-top:10px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.photo-credits a{color:var(--muted)}.toast{position:fixed;right:24px;bottom:24px;z-index:20;max-width:min(340px,calc(100vw - 32px));padding:12px 16px;color:var(--accent-ink);background:var(--ink);border-radius:var(--radius);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}.toast.is-visible{opacity:1;transform:translateY(0)}.reveal-item{animation:reveal-in .62s cubic-bezier(.16,1,.3,1) both}.reveal-item:nth-child(2){animation-delay:.1s}@keyframes reveal-in{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes panel-in{0%{opacity:0;transform:translate(18px)}to{opacity:1;transform:translate(0)}}@keyframes loading-pulse{0%{opacity:.4}to{opacity:1}}@media(max-width:960px){.intro-screen{grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);gap:36px}.quiz-screen{grid-template-columns:180px minmax(0,1fr);gap:48px}.progress-ticks{width:160px}.result-hero{grid-template-columns:minmax(0,1fr) 340px;gap:40px}.result-body{grid-template-columns:1fr}.alternatives,.result-actions,.disclaimer,.photo-credits{grid-column:1}.disclaimer,.photo-credits{margin:0;transform:none}.photo-credits summary{text-align:left}}@media(max-width:767px){:root{--header-height: 62px}.site-header,.screen,.result-screen{width:min(100% - 32px,1360px)}.header-note{display:none}.intro-screen{grid-template-columns:1fr;gap:34px;min-height:auto;padding:44px 0 34px}.intro-copy{padding-left:0}.eyebrow{margin-bottom:18px}.intro-copy h1{font-size:clamp(42px,13vw,64px)}.intro-lead{margin:22px 0 28px;font-size:16px}.city-collage{min-height:390px}.city-photo-main{inset:3% 11% 4% 0}.city-photo-top{width:42%;height:30%;border-width:5px}.city-photo-bottom{right:0;width:40%;height:29%;border-width:5px}.quiz-screen{grid-template-columns:1fr;gap:34px;padding:34px 0 40px}.quiz-rail{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:18px}.progress-copy span:first-child{font-size:34px}.progress-ticks{width:100%;margin-top:0}.question-context{display:none}.question-panel h1{font-size:clamp(32px,9.5vw,45px)}.options-grid{grid-template-columns:1fr;margin-top:32px}.option-button{min-height:94px;padding:16px}.quiz-actions .primary-button{min-width:132px}.loading-screen{grid-template-columns:1fr;align-content:center;gap:50px}.loading-copy h1{font-size:clamp(40px,12vw,58px)}.result-screen{padding-top:28px}.result-hero{grid-template-columns:1fr;gap:34px;min-height:auto}.result-image{height:auto;min-height:0;aspect-ratio:4 / 3}.result-summary h1{font-size:clamp(62px,20vw,92px)}.result-subtitle{font-size:18px}.result-body{gap:58px;padding:82px 0 0}.reason-grid,.alternatives-list{grid-template-columns:1fr}.reason-item:first-child{grid-column:1}.alternative-item{grid-template-columns:112px minmax(0,1fr);gap:16px}.alternative-item img{height:100px}.result-actions{display:grid;grid-template-columns:1fr 1fr}.result-actions button{width:100%;min-width:0}.toast{right:16px;bottom:16px}}@media(max-width:420px){.brand{font-size:14px}.city-collage{min-height:330px}.collage-caption{display:none}.alternative-item{grid-template-columns:1fr}.alternative-item img{width:100%;height:auto;aspect-ratio:16 / 8}.result-actions{grid-template-columns:1fr}}@media(prefers-color-scheme:dark){:root{--page: #1b1c1a;--surface: #252623;--surface-strong: #343530;--ink: #eeede7;--muted: #b4b5ad;--line: #464740;--accent: #dd6248;--accent-hover: #ed7258;--accent-ink: #181915;--photo-shadow: rgba(0, 0, 0, .35)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(prefers-reduced-transparency:reduce){.option-button{background:var(--surface)}}