:root { --ink:#2b194f; --coral:#e76f9f; --cream:#fffaff; --paper:#ffffff; --aqua:#e5dafa; --yellow:#f7c4dc; --pink:#e76f9f; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; }
button { font:inherit; cursor:pointer; }
.page-shell { width:min(1180px, calc(100% - 48px)); margin:auto; min-height:100vh; }
.hero { min-height:100vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:70px 7vw; position:relative; overflow:hidden; }
.hero::before,.hero::after { content:""; position:absolute; border-radius:50%; z-index:-1; }
.hero::before { width:520px; height:520px; background:var(--aqua); right:-160px; top:-90px; }
.hero::after { width:330px; height:330px; background:#f5b6d1; left:-180px; bottom:-120px; }
.eyebrow { color:#62468d; font:500 11px/1 "DM Mono",monospace; letter-spacing:.15em; margin:0 0 22px; }
.eyebrow span { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--coral); margin-right:8px; }
h1,h2 { font-family:"Playfair Display",serif; letter-spacing:-.05em; margin:0; font-weight:600; }
h1 { max-width:840px; font-size:clamp(3.3rem,7.2vw,6.8rem); line-height:.97; }
h1 em { color:var(--coral); font-weight:600; }
.intro-copy { font-size:18px; line-height:1.55; max-width:510px; margin:30px 0; color:#5b4b71; }
.profile-form { display:grid; grid-template-columns:170px minmax(230px, 310px); gap:12px; width:min(100%,510px); margin:0 0 14px; }
.profile-form label { display:grid; gap:7px; color:#62468d; font:500 10px "DM Mono",monospace; letter-spacing:.09em; }
.profile-form input,.profile-form select { width:100%; appearance:none; background:#fff; border:1px solid #dfd4ee; border-radius:10px; color:var(--ink); padding:12px; outline:none; font:500 14px "DM Sans",sans-serif; }
.profile-form input:focus,.profile-form select:focus { border-color:var(--pink); box-shadow:0 0 0 3px #fde2ee; }
.form-message { color:#a32f6e; margin:0 0 14px; font-size:13px; }
.button { border:0; border-radius:100px; padding:16px 23px; font-weight:700; transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 10px 20px #182a2b22; }
.button-primary { background:var(--ink); color:white; }
.button-primary span { color:var(--yellow); font-size:1.2em; margin-left:20px; }
.tiny-note { font:500 11px "DM Mono",monospace; color:#786890; margin:22px 0 0; }
.hidden { display:none !important; }
.quiz,.result { padding:32px 0 60px; min-height:100vh; }
.quiz-header { display:flex; justify-content:space-between; align-items:center; }
.wordmark { color:var(--ink); text-decoration:none; font:700 15px "DM Mono",monospace; letter-spacing:.04em; }
.wordmark i { color:var(--coral); font-style:normal; }
.question-count { font:500 12px "DM Mono",monospace; color:#786890; }
.progress { height:3px; background:#e8e0f5; margin:26px 0 clamp(60px,12vh,130px); }
.progress span { display:block; height:100%; background:var(--coral); transition:width .35s ease; }
.question-wrap { max-width:800px; margin:auto; }
.question-wrap h2 { font-size:clamp(2.7rem,5.5vw,5.1rem); line-height:1.03; margin-bottom:42px; }
.answers { display:grid; grid-template-columns:repeat(5,1fr); gap:11px; }
.answer { text-align:left; min-height:174px; padding:18px; background:var(--paper); border:1px solid #e9e2f4; border-radius:18px; color:var(--ink); transition:.2s; }
.answer:hover { border-color:var(--ink); background:var(--aqua); transform:translateY(-4px); }
.answer.is-selected,.other-answer.is-selected { background:#fde7f0; border-color:var(--pink); box-shadow:inset 0 0 0 1px var(--pink); }
.answer-icon { display:block; font-size:34px; margin-bottom:31px; }
.other-answer { min-height:174px; padding:18px; border:1px solid #e9e2f4; border-radius:18px; background:var(--paper); display:flex; flex-direction:column; gap:18px; color:var(--ink); font-size:34px; transition:.2s; }
.other-answer:hover,.other-answer:focus-within { border-color:var(--ink); background:var(--aqua); transform:translateY(-4px); }
.other-answer input { width:100%; margin-top:auto; border:0; border-bottom:1px solid #b9a9d0; padding:7px 0; background:transparent; color:var(--ink); font:600 14px "DM Sans",sans-serif; outline:none; }
.other-answer input::placeholder { color:#76678a; font-weight:400; }
.other-answer strong { font-size:17px; display:block; margin-bottom:7px; }
.other-answer small { color:#76678a; font-size:13px; line-height:1.35; display:block; }
.answer strong { font-size:17px; display:block; margin-bottom:7px; }
.answer small { color:#76678a; font-size:13px; line-height:1.35; display:block; }
.question-nav { display:flex; justify-content:space-between; align-items:center; margin-top:30px; }
.nav-button { border:0; background:transparent; color:#6742a8; padding:12px 0; font:500 12px "DM Mono",monospace; }
.nav-button:disabled { opacity:0; pointer-events:none; }
.next-button:disabled { cursor:not-allowed; opacity:.35; transform:none; box-shadow:none; }
.text-button { border:0; background:none; color:#6742a8; font:500 12px "DM Mono",monospace; }
.result-layout { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:68px; max-width:1080px; margin:70px auto 0; }
.result-copy h2 { font-size:clamp(3.4rem,6vw,5.7rem); line-height:.94; color:var(--coral); }
.result-copy > p:not(.eyebrow) { color:#5b4b71; line-height:1.65; font-size:17px; max-width:390px; margin:26px 0; }
.city-traits { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.city-traits span { background:#eee7fa; border-radius:100px; padding:8px 11px; color:#573985; font:500 10px "DM Mono",monospace; }
.save-choice { display:flex; gap:10px; align-items:flex-start; max-width:390px; margin-top:17px; padding:13px; border:1px solid #ecd9ea; border-radius:13px; background:#fff; color:#4b276d; }
.save-choice-icon { display:grid; flex:0 0 32px; width:32px; height:32px; place-items:center; border-radius:50%; background:#fde7f0; font-size:16px; }
.save-choice strong,.save-choice small { display:block; }.save-choice strong { font-size:13px; }.save-choice small { margin-top:3px; color:#715d8c; font-size:11px; line-height:1.4; }.save-choice p { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.save-result,.skip-save { padding:7px 9px; border-radius:999px; font:600 10px "DM Mono",monospace; }.save-result { border:0; background:#4b276d; color:#fff; }.skip-save { border:1px solid #dacbe8; background:#fff; color:#715d8c; }.save-choice-status { color:#715d8c; font:500 11px "DM Mono",monospace; }
.world-match { grid-column:2; background:#3f2074; border:0; border-radius:16px; padding:22px; margin:-36px 0 30px; max-width:100%; box-shadow:8px 9px 0 #d4b6ff; }
.world-match h3 { margin:0 0 9px; font-size:12px; letter-spacing:.13em; color:#ffffff; font-family:"DM Mono",monospace; }
.world-match p { margin:0 0 16px; color:#decfff; font-size:13px; line-height:1.45; }
.places { display:grid; gap:8px; }
.place { display:flex; align-items:center; gap:11px; padding:11px 12px; background:#ffffff; border:0; border-radius:10px; text-decoration:none; transition:transform .18s, background .18s; }
.place:hover { background:#f1e9ff; transform:translateX(3px); }
.place-number { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#d8bdff; color:#2b194f; font:500 10px "DM Mono",monospace; }
.place strong { display:block; font-size:14px; color:#2b194f; }
.place small { display:block; color:#715d8c; font-size:11px; margin-top:2px; }
.place .match-reason { color:#b34f83; font:500 9px "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; margin-top:5px; }
.place-map { margin-left:auto; color:var(--pink); font:500 10px "DM Mono",monospace; white-space:nowrap; }
.place-indicators { grid-column:2; display:flex; flex-wrap:wrap; gap:8px 13px; margin:3px 0 2px; }
.indicator { display:flex; align-items:center; gap:4px; color:#725d8f; font:500 9px "DM Mono",monospace; }
.dots { display:flex; gap:2px; }
.dots i { width:6px; height:6px; border-radius:50%; background:#d9c7f5; display:block; }
.dots i.on { background:var(--pink); }
.city-art-frame { background:var(--paper); padding:13px 13px 0; border:1px solid #e6dff3; box-shadow:12px 12px 0 var(--aqua); transform:rotate(1.3deg); }
.city-art { overflow:hidden; aspect-ratio:16 / 9; background:#bfe3df; position:relative; }
.city-art img { width:100%; height:100%; display:block; object-fit:cover; }
.custom-scene-note { position:absolute; left:14px; bottom:14px; max-width:calc(100% - 28px); padding:8px 10px; background:#2b194fe8; color:#fff; border-radius:6px; font:500 10px "DM Mono",monospace; letter-spacing:.04em; }
.art-caption { text-align:right; margin:9px 2px 11px; color:#786890; font:10px "DM Mono",monospace; }
@media (max-width:720px) { .page-shell{width:min(100% - 32px,1180px)} .hero{padding:50px 5vw} .profile-form{grid-template-columns:1fr} .answers{grid-template-columns:1fr} .answer{min-height:112px; display:grid; grid-template-columns:64px 1fr; column-gap:12px; align-items:center} .answer-icon{margin:0; grid-row:span 2} .result-layout{grid-template-columns:1fr; gap:45px; margin-top:55px} .city-art-frame{transform:none} .world-match{grid-column:1; margin:-24px 0 0} }
/* Specific destinations extend the existing violet recommendation panel. */
.world-match { grid-column:1 / -1; margin:0 0 30px; padding:24px; }
.world-match h3 { font-size:.875rem; line-height:1.5; }
.world-match > p { font-size:1rem; }
.places { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.city-recommendation { background:var(--paper); border-radius:12px; overflow:hidden; min-width:0; }
.city-recommendation .place { border-radius:0; padding:16px; align-items:flex-start; gap:8px; }
.place > div { min-width:0; }
.place-number { flex-shrink:0; }
.place strong { font-size:1.125rem; }
.place small { font-size:.875rem; line-height:1.5; }
.place-map { color:#6742a8; font-size:.75rem; padding-top:4px; }
.indicator { font-size:.75rem; }
.spot-list { padding:0 16px; }
.spot { border-top:1px solid #e9e2f4; padding:18px 0; }
.spot-type { display:inline-block; background:#eee7fa; color:#573985; border-radius:20px; padding:4px 9px; font-size:.875rem; }
.spot h4 { font-size:1.125rem; line-height:1.4; margin:10px 0 3px; overflow-wrap:anywhere; }
.spot-area { color:#715d8c; font-size:.875rem; }
.world-match .spot p { font-size:1rem; color:#5b4b71; margin:10px 0; line-height:1.55; }
.world-match .spot .spot-reason { color:#6742a8; font-size:.875rem; }
.spot-links { display:flex; flex-wrap:wrap; gap:4px 16px; }
.spot-links a { color:#573985; font-size:.875rem; line-height:1.6; padding:8px 0; text-underline-offset:4px; }
.spot-links a:hover { color:#8f2357; }
.world-match a:focus-visible { outline:3px solid #a63873; outline-offset:-3px; border-radius:4px; }
.world-match .places-note { font-size:.875rem; margin:18px 0 0; }
.commercial-ideas { grid-column:1 / -1; background:#fff; border:1px solid #e6dff3; border-radius:16px; padding:24px; box-shadow:8px 9px 0 #f7c4dc; }
.commercial-ideas h3 { margin:0 0 7px; color:#3f2074; font:600 .8rem "DM Mono",monospace; letter-spacing:.12em; }
.commercial-ideas > p { margin:0 0 16px; color:#715d8c; font-size:.95rem; }
.commerce-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.commerce-card { min-height:118px; padding:14px; background:#f7f2ff; border-radius:12px; }
.commerce-card span { display:block; font-size:1.5rem; margin-bottom:10px; }
.commerce-card strong { display:block; font-size:.94rem; color:#3f2074; }
.commerce-card small { display:block; color:#715d8c; font-size:.76rem; line-height:1.35; margin-top:5px; }
@media (max-width:1000px) { .places { grid-template-columns:1fr; } }
@media (max-width:720px) { .commerce-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .world-match { padding:18px; margin:0; } }

.idea-note { max-width: 580px; margin: -4px 0 26px; color: #8c4562; font-size: 12px; line-height: 1.5; }

.archive-toggle { position:fixed; z-index:12; right:22px; bottom:22px; display:flex; align-items:center; gap:7px; padding:8px 11px 8px 9px; border:1px solid #e7c4d6; border-radius:999px; background:#fff; color:#4b276d; box-shadow:0 5px 17px #2b194f18; font:600 11px "DM Mono",monospace; transition:transform .2s,box-shadow .2s; }
.language-toggle { position:fixed; z-index:12; top:18px; right:145px; min-width:62px; padding:10px 12px; border:1px solid #d9c8ee; border-radius:999px; background:#f6efff; color:#4b276d; font:600 11px "DM Mono",monospace; box-shadow:0 5px 17px #2b194f12; }
.language-toggle:hover { background:#fff; transform:translateY(-2px); }
.archive-toggle:hover { transform:translateY(-2px) rotate(-1deg); box-shadow:0 9px 24px #2b194f24; }
.archive-toggle > span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#fde7f0; font-size:15px; }
.archive-toggle small { display:grid; min-width:18px; height:18px; place-items:center; border-radius:50%; background:#5c3480; color:#fff; font-size:9px; }
.city-archive { position:fixed; z-index:20; top:15px; right:15px; width:min(385px,calc(100vw - 30px)); max-height:calc(100vh - 30px); overflow:auto; padding:23px; border:1px solid #e6d9f4; border-radius:20px; background:#fffaff; box-shadow:0 23px 60px #2b194f36; }
.archive-heading { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.archive-heading .eyebrow { margin-bottom:8px; }
.archive-heading h2 { font-size:2.25rem; color:#e76f9f; }
.archive-close { width:32px; height:32px; border:0; border-radius:50%; background:#eee7fa; color:#4b276d; font-size:23px; line-height:1; }
.archive-copy { margin:14px 0 18px; color:#715d8c; font-size:13px; line-height:1.5; }
.archive-list { display:grid; gap:9px; }
.saved-city { display:grid; grid-template-columns:74px 1fr 26px; gap:11px; align-items:center; padding:8px; border:1px solid #eadff4; border-radius:13px; background:#fff; cursor:pointer; transition:transform .18s,border-color .18s; }
.saved-city:hover,.saved-city:focus-visible { border-color:#e76f9f; transform:translateX(-2px); outline:none; }
.saved-city img { width:74px; height:57px; border-radius:9px; object-fit:cover; }
.saved-city small,.saved-city span { display:block; color:#806a96; font-size:10px; line-height:1.3; }
.saved-city strong { display:block; margin:3px 0; color:#3f2074; font-size:14px; }
.saved-city-delete { width:25px; height:25px; border:0; border-radius:50%; background:transparent; color:#9a7190; font-size:19px; }
.saved-city-delete:hover { background:#fde7f0; color:#a32f6e; }
.archive-empty { padding:31px 15px; border:1px dashed #d9c9e9; border-radius:13px; text-align:center; color:#715d8c; }
.archive-empty span { display:block; color:#e76f9f; font-size:25px; margin-bottom:8px; }.archive-empty strong{color:#4b276d;font-size:14px}.archive-empty p{margin:7px 0 0;font-size:12px}
.archive-clear { width:100%; margin-top:14px; padding:9px; border:0; background:transparent; color:#9a7190; font:500 10px "DM Mono",monospace; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:720px) { .archive-toggle { right:12px; bottom:14px; } .archive-toggle b { display:none; } .language-toggle { top:11px; right:67px; min-width:54px; padding:9px; } .city-archive { top:10px; right:10px; width:calc(100vw - 20px); } }