:root{--ink:#0E0E0C;--ink-mid:#4A4A47;--ink-light:#767672;--ink-muted:#B5B5B0;--bg:#fff;--bg-alt:#F5F4F0;--line:#1A1A1A;--line-soft:#E5E4DE;--accent:#FF4F2E;--accent-dark:#D63D1F;--accent-light:#FFE8E1;--cat-personality:#6B4FE8;--cat-personality-bg:#ECE5FF;--cat-style:#FF4F2E;--cat-style-bg:#FFE8E1;--cat-lifestyle:#00875A;--cat-lifestyle-bg:#D8F0E5;--cat-fun:#F5A623;--cat-fun-bg:#FFF1D7;--cat-knowledge:#1463BD;--cat-knowledge-bg:#D6E6FA;--font-display:'Bricolage Grotesque',-apple-system,sans-serif;--font-serif:'Instrument Serif',Georgia,serif;--font-body:'Inter',-apple-system,sans-serif;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4.5rem;--space-4xl:7rem}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button{cursor:pointer;font-family:inherit;border:none;background:none}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:.95;letter-spacing:-.035em;color:var(--ink)}
h1{font-size:clamp(2.4rem,6vw,4.5rem)}
h2{font-size:clamp(1.8rem,4vw,2.8rem)}
h3{font-size:clamp(1.2rem,2.5vw,1.6rem);letter-spacing:-.02em}
h4{font-size:1rem;font-weight:700;letter-spacing:0}
p{margin-bottom:var(--space-md);color:var(--ink-mid)}
strong{font-weight:700;color:var(--ink)}
.skip-link{position:absolute;top:-100%;left:0;background:var(--accent);color:#fff;padding:.75rem 1.5rem;z-index:1000;font-weight:700}
.skip-link:focus{top:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.container{max-width:1280px;margin:0 auto;padding:0 var(--space-xl)}
.container--narrow{max-width:720px}
.container--quiz{max-width:720px}
.site-header{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.site-header nav{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) 0}
.logo{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-display);font-size:1.4rem;color:var(--ink);font-weight:800;letter-spacing:-.03em;margin-left:-3px}
.logo svg rect{fill:var(--accent)}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{display:block;padding:8px 14px;color:var(--ink-mid);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.nav-links a:hover{color:var(--accent)}
@media(max-width:768px){.nav-toggle{display:flex}.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:var(--space-md) var(--space-xl)}.nav-links.open{display:flex}.nav-links a{padding:var(--space-md);font-size:1rem;width:100%}}
.breadcrumb{padding:var(--space-md) 0;border-bottom:1px solid var(--line-soft)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-light);font-weight:600}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:4px}
.breadcrumb a{color:var(--ink-light)}
.breadcrumb a:hover{color:var(--accent)}
.site-footer{background:var(--ink);color:#B5B5B0;padding:var(--space-3xl) 0 var(--space-xl);margin-top:var(--space-4xl);border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-2xl)}
.footer-brand .logo{color:#fff;margin-bottom:var(--space-md)}
.footer-brand p{color:#8A8A85;font-size:14px;max-width:320px}
.footer-links h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-md)}
.footer-links ul{display:flex;flex-direction:column;gap:var(--space-sm)}
.footer-links a{color:#8A8A85;font-size:14px}
.footer-links a:hover{color:#fff}
.footer-bottom{margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:1px solid #2A2A28;font-size:12px}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:var(--space-xl)}}
.hero,.hero-block{background:var(--accent);color:#fff;padding:var(--space-4xl) 0;border-bottom:1px solid var(--line);text-align:left}
.hero h1,.hero-block h1{color:#fff;font-size:clamp(3rem,9vw,7rem);font-weight:800;line-height:.9;letter-spacing:-.04em;max-width:1000px}
.hero h1 em,.hero-block h1 em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.hero .subtitle,.hero-block .subtitle{font-size:clamp(1rem,1.5vw,1.15rem);color:rgba(255,255,255,.9);max-width:540px;margin:var(--space-lg) 0 var(--space-xl);font-weight:500}
.hero .btn,.hero-block .btn{background:#fff;color:var(--accent);border-color:#fff}
.hero .btn:hover,.hero-block .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:14px 28px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--ink);min-height:48px;font-family:inherit}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--outline{background:transparent;color:var(--ink)}
.btn--outline:hover{background:var(--ink);color:#fff}
.btn--secondary{background:transparent;color:var(--ink)}
.btn--secondary:hover{background:var(--ink);color:#fff}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:var(--accent);border-color:var(--accent)}
.btn--small{padding:8px 16px;font-size:11px;min-height:36px}
.features{padding:0}
.category-showcase{padding:var(--space-3xl) 0;border-bottom:1px solid var(--line)}
.category-showcase:nth-of-type(1){background:var(--cat-personality-bg)}
.category-showcase:nth-of-type(2){background:var(--cat-style-bg)}
.category-showcase:nth-of-type(3){background:var(--cat-lifestyle-bg)}
.category-showcase:nth-of-type(4){background:var(--cat-fun-bg)}
.category-showcase:nth-of-type(5){background:var(--cat-knowledge-bg)}
.category-showcase__header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:var(--space-2xl);padding-bottom:var(--space-md);border-bottom:1px solid var(--ink);gap:var(--space-md)}
.category-showcase__header h2{font-size:clamp(2rem,5vw,3.2rem)}
.category-showcase__header a{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.quiz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0;border:1px solid var(--ink);background:var(--ink)}
.quiz-card{padding:var(--space-xl);text-decoration:none;color:inherit;display:flex;flex-direction:column;background:var(--bg);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);min-height:220px;transition:background .15s ease}
.quiz-card:hover{background:var(--bg-alt)}
.quiz-card__category{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-sm)}
.quiz-card__category--personality{color:var(--cat-personality)}
.quiz-card__category--style{color:var(--cat-style)}
.quiz-card__category--lifestyle{color:var(--cat-lifestyle)}
.quiz-card__category--fun{color:var(--cat-fun)}
.quiz-card__category--knowledge{color:var(--cat-knowledge)}
.quiz-card__title{font-family:var(--font-display);font-size:1.5rem;font-weight:800;line-height:.95;letter-spacing:-.025em;margin-bottom:var(--space-sm);color:var(--ink)}
.quiz-card__desc{font-size:14px;color:var(--ink-light);margin-bottom:var(--space-md);flex-grow:1}
.quiz-card__meta{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-muted);font-weight:600}
.index-page,.content-page,.quiz-page,.result-page{padding:var(--space-2xl) 0 var(--space-3xl)}
.category-header{padding:var(--space-2xl) 0;border-bottom:1px solid var(--ink);margin-bottom:var(--space-2xl)}
.category-header__emoji{display:none}
.category-header h1{margin-bottom:var(--space-md)}
.category-header p{max-width:600px;font-size:1.1rem}
.category-chips{display:flex;flex-wrap:wrap;gap:0;margin-bottom:var(--space-2xl);border:1px solid var(--ink)}
.category-chip{padding:12px 18px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);border-right:1px solid var(--ink);background:var(--bg)}
.category-chip:last-child{border-right:none}
.category-chip:hover{background:var(--accent);color:#fff}
.category-chip.active{background:var(--ink);color:#fff}
.quiz-page h1{margin-bottom:var(--space-md)}
.quiz-intro{max-width:600px;font-size:1.1rem;margin-bottom:var(--space-2xl);color:var(--ink-light)}
.quiz-progress{width:100%;height:4px;background:var(--line-soft);margin-bottom:var(--space-xl)}
.quiz-progress__bar{height:100%;background:var(--accent);transition:width .4s ease;width:0%}
.quiz-progress__text{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);margin-bottom:var(--space-sm);font-weight:700;text-align:left}
.quiz-question{transition:opacity .3s ease,transform .3s ease}
.quiz-question.leaving{opacity:0;transform:translateY(-20px)}
.quiz-question.entering{opacity:0;transform:translateY(20px)}
.quiz-question__text{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:400;margin-bottom:var(--space-2xl);line-height:1.15;letter-spacing:-.02em;text-align:left}
.quiz-options{display:flex;flex-direction:column;gap:0;border:1px solid var(--ink);max-width:none}
.quiz-option{display:block;width:100%;background:var(--bg);border:none;border-bottom:1px solid var(--ink);padding:var(--space-lg) var(--space-xl);font-size:1rem;font-weight:500;color:var(--ink);text-align:left;min-height:48px;line-height:1.4;font-family:inherit}
.quiz-option:last-child{border-bottom:none}
.quiz-option:hover{background:var(--ink);color:#fff}
.quiz-option.selected{background:var(--accent);color:#fff;font-weight:700}
body.quiz-knowledge .quiz-options{counter-reset:opt}
body.quiz-knowledge .quiz-option{counter-increment:opt;display:flex;align-items:center;gap:var(--space-md)}
body.quiz-knowledge .quiz-option::before{content:counter(opt);font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--accent);min-width:32px;letter-spacing:-.02em}
body.quiz-knowledge .quiz-option:hover::before,body.quiz-knowledge .quiz-option.selected::before{color:#fff}
.quiz-start{padding:var(--space-xl) 0;text-align:left}
.quiz-meta-info{display:flex;gap:var(--space-xl);margin-bottom:var(--space-xl);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-muted);font-weight:700;justify-content:flex-start}
.quiz-start__btn{display:inline-flex;align-items:center;gap:var(--space-sm);background:var(--ink);color:#fff;padding:16px 32px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--ink);min-height:48px;font-family:inherit}
.quiz-start__btn:hover{background:var(--accent);border-color:var(--accent)}
.quiz-result-reveal{animation:fadeInUp .5s ease;text-align:left}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.quiz-result-reveal h2{font-size:11px;font-weight:700;color:var(--ink-light);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-md);font-family:var(--font-body)}
.result-card{background:var(--result-color,var(--accent));color:#fff;padding:var(--space-3xl) var(--space-xl);text-align:left;max-width:520px;margin:var(--space-xl) 0;border:1px solid var(--ink)}
.result-card,.result-card *{color:#fff!important}
.result-card__score{font-family:var(--font-display);font-size:clamp(4rem,12vw,7rem);font-weight:800;line-height:.85;letter-spacing:-.04em;margin-bottom:var(--space-md)}
.result-card__score span{font-size:.4em;opacity:.6;font-weight:700}
.result-card__title{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.6rem);font-weight:800;line-height:.9;letter-spacing:-.035em;margin-bottom:var(--space-md)}
.result-card__tagline{font-size:1rem;opacity:.95;margin-bottom:var(--space-lg);line-height:1.4;font-weight:500}
.result-card__traits{display:flex;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-lg);justify-content:flex-start}
.result-card__trait{background:rgba(255,255,255,.18);padding:6px 12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.result-card__brand{font-size:11px;opacity:.7;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.result-actions{display:flex;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-xl);align-items:flex-start;flex-direction:row}
.result-page__header{padding:var(--space-2xl) 0;border-bottom:1px solid var(--ink);text-align:left}
.result-page__source{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-light);margin-bottom:var(--space-md);font-weight:700}
.result-page__source a{color:var(--accent)}
.result-page__body{max-width:680px;padding:var(--space-2xl) 0}
.result-page__body h1{margin-bottom:var(--space-xl)}
.result-page__body h2{margin-top:var(--space-2xl);margin-bottom:var(--space-md)}
.result-page__body p{font-size:1.05rem;line-height:1.7;margin-bottom:var(--space-md)}
.result-page__cta{background:var(--ink);color:#fff;padding:var(--space-2xl);margin-top:var(--space-2xl);text-align:left}
.result-page__cta h3{color:#fff;margin-bottom:var(--space-md)}
.result-page__cta p{color:rgba(255,255,255,.7)}
.result-page__cta .btn{background:var(--accent);border-color:var(--accent)}
.related-quizzes{margin-top:var(--space-3xl);padding-top:var(--space-2xl);border-top:1px solid var(--ink)}
.related-quizzes h2{margin-bottom:var(--space-xl)}
.content-page .container--narrow h1{margin-bottom:var(--space-xl)}
.content-page .container--narrow h2{margin-top:var(--space-2xl);margin-bottom:var(--space-md);font-size:1.5rem}
.content-page .container--narrow h3{margin-top:var(--space-xl);margin-bottom:var(--space-sm);font-size:1.15rem}
.content-page .container--narrow p,.content-page .container--narrow li{font-size:1.05rem;line-height:1.7;color:var(--ink-mid)}
.content-page .container--narrow ul,.content-page .container--narrow ol{margin-bottom:var(--space-md);padding-left:var(--space-xl)}
.content-page .container--narrow ul li{list-style:disc;margin-bottom:var(--space-sm)}
.content-page .container--narrow ol li{list-style:decimal;margin-bottom:var(--space-sm)}
.content-page a{color:var(--accent);text-decoration:underline}
.last-updated{font-size:11px;color:var(--ink-muted);margin-top:var(--space-md);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.faq-section{margin-top:var(--space-2xl);border-top:1px solid var(--ink);padding-top:var(--space-2xl)}
.faq-section h2{margin-bottom:var(--space-xl)}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-question{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--space-lg) 0;font-size:1rem;font-weight:700;color:var(--ink);text-align:left;gap:var(--space-md);min-height:48px;font-family:inherit}
.faq-question::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--ink);flex-shrink:0}
.faq-question[aria-expanded="true"]::after{content:"\2212"}
.faq-answer{display:none;padding-bottom:var(--space-lg)}
.faq-answer.open{display:block}
.faq-answer p{font-size:.95rem;color:var(--ink-mid)}
.share-toast{position:fixed;bottom:var(--space-xl);left:50%;transform:translateX(-50%) translateY(100px);background:var(--ink);color:#fff;padding:var(--space-md) var(--space-xl);font-size:14px;font-weight:600;opacity:0;transition:all .3s ease;z-index:200;pointer-events:none;border:1px solid var(--ink)}
.share-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.text-center{text-align:center}
.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mt-2xl{margin-top:var(--space-2xl)}
.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media print{.site-header,.site-footer,.breadcrumb,.quiz-progress,.result-actions,.related-quizzes,.faq-section{display:none!important}.result-card{margin:0;max-width:100%}}

/* Quiz answer review */
.quiz-review { margin-top: 2rem; text-align: center; }
.quiz-review__list { margin-top: 1.5rem; text-align: left; display: flex; flex-direction: column; gap: 1rem; }
.quiz-review__item { padding: 1rem 1.25rem; border-radius: 12px; border-left: 4px solid #ccc; background: #fafaf7; }
.quiz-review__item.is-correct { border-left-color: #4a8a5f; }
.quiz-review__item.is-incorrect { border-left-color: #c25450; }
.quiz-review__q { font-weight: 600; margin: 0 0 0.5rem 0; }
.quiz-review__your span { font-weight: 600; }
.quiz-review__correct { color: #2a6a3f; margin: 0.25rem 0; }
.quiz-review__correct span { font-weight: 600; }
.quiz-review__explain { margin: 0.5rem 0 0 0; font-style: italic; color: #555; font-size: 0.95em; }
.quiz-review__list--collapsed { display: none !important; }

/* Quiz page expanded learn-more */
.quiz-divider { border: 0; border-top: 1px solid #e8e7e3; margin: 4rem auto 0; max-width: 1100px; }
.quiz-learn-more { padding: 3rem 0 4rem; }
.quiz-learn-more__block { margin-bottom: 3rem; }
.quiz-learn-more__block h2 { font-size: 1.75rem; margin-bottom: 1rem; }
.quiz-learn-more__lead { color: #6b6b6b; margin-bottom: 1.5rem; }
.results-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.result-preview-card { display: block; padding: 1.25rem; border: 1px solid #e8e7e3; border-radius: 14px; text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s; background: #fff; }
.result-preview-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.result-preview-card__swatch { display: block; width: 100%; height: 8px; border-radius: 4px; margin-bottom: 0.75rem; }
.result-preview-card__title { font-size: 1.15rem; margin: 0 0 0.4rem 0; }
.result-preview-card__tagline { font-size: 0.92rem; color: #555; margin: 0 0 0.6rem 0; }
.result-preview-card__traits { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.result-preview-card__traits span { font-size: 0.75rem; padding: 0.2rem 0.55rem; background: #f4f3ef; border-radius: 999px; color: #444; }