:root { --ink:#17221f; --muted:#66726d; --cream:#f4f2ec; --paper:#fbfaf7; --line:#d8ddd7; --lime:#c9ed5b; --mint:#e5f0dd; --input:#ffffff; }
:root[data-theme="dark"] { --ink:#f0f3ed; --muted:#a7b1aa; --cream:#202b28; --paper:#111816; --line:#35443e; --lime:#c9ed5b; --mint:#263b34; --input:#18231f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); transition:background .2s ease,color .2s ease; font-family:'DM Sans',sans-serif; }
.site-header { height:78px; padding:0 6vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; text-decoration:none; display:flex; gap:9px; align-items:center; }
.brand-mark { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--lime); }
.beta { color:#8b9690; font-size:9px; letter-spacing:1.2px; margin-left:2px; }
nav { display:flex; gap:30px; align-items:center; } nav a { color:var(--muted); font-size:13px; text-decoration:none; } nav a:hover { color:var(--ink); }.theme-toggle { border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:20px; padding:8px 11px; font:500 11px 'DM Sans',sans-serif; cursor:pointer; }.theme-toggle:hover { border-color:var(--lime); }
.hero { background:var(--cream); padding:105px 12vw 112px; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; right:8vw; top:55px; color:var(--lime); font-size:260px; line-height:1; transform:rotate(20deg); opacity:.8; }
.eyebrow { color:#78847d; font-size:11px; font-weight:700; letter-spacing:2px; margin:0 0 22px; } .eyebrow span { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--lime); margin-right:8px; }
h1,h2 { font-family:'Space Grotesk',sans-serif; letter-spacing:-2px; line-height:.98; margin:0; } h1 { font-size:clamp(48px,7vw,92px); position:relative; z-index:1; } h1 em,h2 em { font-style:normal; color:#819494; }
.hero-copy { max-width:470px; color:var(--muted); font-size:16px; line-height:1.6; margin:28px 0 30px; position:relative; z-index:1; }
.button { display:inline-flex; gap:32px; align-items:center; background:var(--ink); color:white; padding:15px 18px 15px 22px; font-size:13px; text-decoration:none; border-radius:2px; position:relative; z-index:1; } .button span { color:var(--lime); font-size:20px; }
.hero-note { color:var(--muted); font-size:11px; margin-top:54px; position:relative; z-index:1; }.spark { color:#ec8b6f; font-size:17px; margin-right:8px; }
.compare-section { padding:105px 6vw 120px; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:40px; }.section-heading h2,.how-section h2 { font-size:clamp(36px,5vw,60px); }.section-intro { color:var(--muted); max-width:180px; font-size:13px; line-height:1.5; margin:0; }
.recommend-section { padding:105px 6vw 20px; }.recommend-form { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:end; }.recommend-form label,.manual-grid label { display:grid; gap:8px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.4px; }.recommend-form label span { font-weight:400; }.recommend-form input,.manual-grid input { width:100%; border:1px solid var(--line); border-radius:2px; background:var(--input); color:var(--ink); padding:14px; font:14px 'DM Sans',sans-serif; }.recommend-form input:focus,.manual-grid input:focus { outline:2px solid var(--lime); }.form-hint { color:var(--muted); font-size:12px; margin:16px 0 0; }.manual-fields,.recommendation-result { margin-top:28px; border:1px solid var(--line); background:var(--cream); padding:25px; }.manual-title { margin:0 0 18px; font-weight:600; }.manual-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.manual-submit { margin-top:22px; }.recommendation-result { scroll-margin-top:20px; }.result-header { display:flex; gap:18px; align-items:center; }.result-header img,.result-image-placeholder { width:76px; height:92px; object-fit:contain; background:var(--mint); border-radius:6px; }.result-image-placeholder { display:grid; place-items:center; font:700 30px 'Space Grotesk',sans-serif; color:var(--lime); background:var(--ink); }.result-header h3 { margin:5px 0; font:600 28px 'Space Grotesk',sans-serif; letter-spacing:-1px; }.confidence { color:var(--muted); font-size:12px; margin:0; }.archetype-result { margin:28px 0 18px; padding:20px; background:var(--ink); color:white; display:flex; gap:16px; align-items:baseline; flex-wrap:wrap; }.archetype-result span,.archetype-result small { color:#a9b6ab; font-size:11px; }.archetype-result strong { color:var(--lime); font:600 25px 'Space Grotesk',sans-serif; }.result-explanation { font-size:14px; line-height:1.5; }.score-list,.result-specs { margin-top:25px; }.score-list h4,.result-specs h4 { font:600 15px 'Space Grotesk',sans-serif; margin:0 0 14px; }.score-row { display:grid; grid-template-columns:140px 1fr 28px; gap:10px; align-items:center; font-size:12px; margin:10px 0; }.score-row b { text-align:right; }.result-specs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px 20px; border-top:1px solid var(--line); padding-top:20px; }.result-specs h4 { grid-column:1/-1; }.result-spec { display:flex; justify-content:space-between; gap:12px; font-size:12px; }.result-spec span { color:var(--muted); }.result-spec b { text-align:right; }
.paddle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }.card { background:var(--cream); border:1px solid var(--line); padding:25px; display:flex; flex-direction:column; }.card:nth-child(2) { background:var(--mint); }.card-top { display:flex; justify-content:space-between; align-items:start; margin-bottom:36px; }.paddle-icon { background:var(--ink); width:50px; height:67px; border-radius:22px 22px 8px 8px; transform:rotate(25deg); position:relative; }.paddle-icon::after { content:''; position:absolute; width:8px; height:38px; background:var(--lime); left:21px; top:53px; border-radius:2px; }.card-number { color:#81908a; font-size:12px; }.card h3 { font:600 26px 'Space Grotesk',sans-serif; margin:25px 0 7px; letter-spacing:-1px; }.tag { color:#748278; font-size:11px; text-transform:uppercase; letter-spacing:1.2px; }.prediction { font-size:14px; line-height:1.5; margin:26px 0 31px; min-height:65px; }.prediction strong { font-weight:700; }
.specs { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:17px 0; display:grid; gap:12px; }.spec { display:flex; justify-content:space-between; font-size:12px; }.spec span { color:var(--muted); }.spec b { font-weight:600; }.ratings { padding-top:21px; display:grid; gap:10px; }.rating { display:grid; grid-template-columns:82px 1fr 24px; gap:9px; align-items:center; font-size:11px; }.bar { height:5px; background:#d4dbd3; border-radius:5px; overflow:hidden; }.bar i { display:block; height:100%; background:var(--ink); border-radius:5px; }.rating b { font-size:11px; text-align:right; }
.how-section { background:var(--ink); color:white; padding:90px 12vw; }.how-section .eyebrow { color:#a9b6ab; }.how-section h2 { color:white; margin-bottom:25px; }.how-section p:last-child { color:#a9b6ab; max-width:430px; line-height:1.6; }
footer { padding:24px 6vw; display:flex; justify-content:space-between; color:#84918b; font-size:11px; }
@media (max-width:980px) { .paddle-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:980px) { .recommend-form { grid-template-columns:repeat(2,1fr); }.recommend-form .button { width:100%; justify-content:space-between; }.manual-grid { grid-template-columns:repeat(2,1fr); }.result-specs { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { .site-header { padding:0 5vw; }.brand { font-size:17px; gap:7px; }.beta { display:none; } nav { display:flex; gap:10px; } nav a { font-size:10px; }.theme-toggle { padding:7px 8px; font-size:10px; }.hero { padding:75px 8vw 80px; }.hero::after { right:-50px; top:70px; font-size:180px; }.recommend-section { padding:75px 6vw 20px; }.recommend-form { grid-template-columns:1fr; }.section-heading { display:block; }.section-intro { margin-top:18px; }.paddle-grid { grid-template-columns:1fr; }.card { padding:22px; }.prediction { min-height:0; }.manual-fields,.recommendation-result { padding:20px; }.manual-grid,.result-specs { grid-template-columns:1fr; }.result-header h3 { font-size:23px; }.score-row { grid-template-columns:115px 1fr 25px; }.how-section { padding:75px 8vw; } footer { display:block; line-height:2; } }

/* Court-inspired visual language and mobile-first finishing touches. */
.hero { isolation:isolate; }
.hero::before { content:''; position:absolute; z-index:0; left:0; right:0; bottom:0; height:42%; background:linear-gradient(90deg, transparent 49.7%, rgba(201,237,91,.28) 50%, transparent 50.3%), linear-gradient(0deg, transparent 49.7%, rgba(201,237,91,.22) 50%, transparent 50.3%); opacity:.8; pointer-events:none; }
.court-illustration { position:absolute; max-width:100%; z-index:0; right:7vw; bottom:0; width:39vw; height:72%; min-width:300px; max-width:550px; border:1px solid rgba(23,34,31,.18); border-bottom:0; transform:perspective(500px) rotateX(12deg); opacity:.8; pointer-events:none; }
.court-net { position:absolute; left:0; right:0; top:45%; border-top:3px solid var(--ink); box-shadow:0 3px 0 rgba(23,34,31,.18); }
.court-line { position:absolute; background:rgba(23,34,31,.22); }.kitchen-line { left:0; right:0; top:25%; height:1px; }.baseline { left:15%; right:15%; bottom:18%; height:1px; }
.court-paddle { position:absolute; width:42px; height:58px; border:4px solid var(--ink); border-radius:18px 18px 8px 8px; bottom:30%; }.court-paddle::after { content:''; position:absolute; width:7px; height:30px; background:var(--ink); left:13px; top:50px; transform:rotate(-12deg); }.paddle-one { left:19%; transform:rotate(-18deg); }.paddle-two { right:19%; bottom:9%; transform:rotate(22deg); border-color:#819494; }.paddle-two::after { background:#819494; }
.recommend-form .button { min-height:48px; justify-content:space-between; }.recommend-form input,.manual-grid input { min-height:48px; }.theme-toggle { min-height:40px; }
@media (max-width:760px) {
  .site-header { height:auto; min-height:78px; padding:14px 5vw; gap:12px; align-items:stretch; }
  .brand { justify-content:center; }
  nav { width:100%; justify-content:space-between; gap:4px; flex-wrap:wrap; }
  nav a { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 5px; }
  .theme-toggle { min-height:40px; padding:7px 10px; }
  .hero { padding:62px 8vw 88px; }
  .hero::before { height:32%; }
  .court-illustration { right:-86px; width:310px; height:45%; min-width:0; opacity:.48; }
  .hero::after { right:-75px; top:135px; font-size:145px; opacity:.35; }
  h1 { font-size:clamp(44px,13vw,64px); }
  .hero-copy { font-size:15px; max-width:330px; }
  .recommend-form { gap:14px; }
  .recommend-form .button { width:100%; }
  .result-header { align-items:flex-start; }
  .result-header h3 { overflow-wrap:anywhere; }
  .archetype-result strong { font-size:22px; }
  .result-spec { align-items:flex-start; }
  .result-spec b { max-width:58%; overflow-wrap:anywhere; }
  .card { min-width:0; }
}
.popularity-section { padding:55px 6vw 115px; }
.period-tabs { display:flex; gap:8px; margin:-10px 0 24px; overflow-x:auto; }
.period-tab { flex:0 0 auto; min-height:42px; border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:22px; padding:0 16px; font:600 11px 'DM Sans',sans-serif; cursor:pointer; }
.period-tab.is-active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.popular-paddles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; min-height:170px; }
.popular-card { display:flex; gap:16px; min-width:0; border:1px solid var(--line); background:var(--cream); padding:24px; }
.popular-rank { color:var(--lime); background:var(--ink); width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; font:600 13px 'Space Grotesk',sans-serif; }
.popular-card-body { min-width:0; }.popular-card h3 { margin:5px 0 10px; font:600 21px 'Space Grotesk',sans-serif; overflow-wrap:anywhere; }.search-count { color:var(--muted); font-size:12px; margin:0 0 20px; }.popular-link { color:var(--ink); font-size:11px; font-weight:700; text-decoration:none; }.popular-link:hover { color:#819494; }.data-state { align-self:center; grid-column:1/-1; color:var(--muted); border:1px dashed var(--line); padding:28px; text-align:center; line-height:1.6; }.data-state.is-error { color:#c87d69; }
@media (max-width:980px) { .popular-paddles { grid-template-columns:1fr; } }
@media (max-width:760px) { .popularity-section { padding:35px 6vw 85px; }.period-tabs { margin-top:0; }.period-tab { min-height:46px; }.popular-card { padding:20px; }.popular-card h3 { font-size:20px; } }
.quiz-section { padding:65px 6vw 80px; background:var(--cream); }
.hero-quiz-button { margin-top:4px; }
.quiz-app { max-width:720px; margin:0 auto; }
.quiz-progress { margin:0 0 32px; }.quiz-progress-label { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.5px; margin-bottom:10px; }.quiz-progress-track { height:6px; background:var(--line); border-radius:8px; overflow:hidden; }.quiz-progress-track i { display:block; height:100%; background:var(--lime); border-radius:8px; transition:width .2s ease; }
.quiz-question { border:0; padding:0; margin:0; }.quiz-question legend { font:600 clamp(28px,5vw,48px) 'Space Grotesk',sans-serif; letter-spacing:-1px; line-height:1.05; padding:0; margin-bottom:24px; }.quiz-options { display:grid; gap:10px; }.quiz-option { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line); background:var(--input); color:var(--ink); border-radius:4px; padding:15px 17px; text-align:left; font:500 14px 'DM Sans',sans-serif; cursor:pointer; }.quiz-option span { color:var(--muted); font-size:20px; }.quiz-option:hover,.quiz-option:focus-visible { border-color:var(--lime); outline:2px solid transparent; }.quiz-option.is-selected { background:var(--ink); color:var(--paper); border-color:var(--ink); }.quiz-option.is-selected span { color:var(--lime); }.quiz-controls { display:flex; justify-content:space-between; align-items:center; margin-top:24px; }.quiz-back,.quiz-restart { border:0; background:transparent; color:var(--muted); padding:14px 0; font:600 13px 'DM Sans',sans-serif; cursor:pointer; }.quiz-back:disabled { opacity:.35; cursor:not-allowed; }.quiz-continue { border:0; cursor:pointer; }.quiz-continue:disabled { opacity:.45; cursor:not-allowed; }.quiz-summary-actions { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:24px; }.quiz-summary { background:var(--paper); border:1px solid var(--line); padding:30px; }.quiz-summary h3 { font:600 clamp(28px,5vw,44px) 'Space Grotesk',sans-serif; letter-spacing:-1px; line-height:1.05; margin:0 0 16px; }.quiz-summary > p:not(.eyebrow) { color:var(--muted); line-height:1.6; }.profile-list { border-top:1px solid var(--line); margin-top:26px; }.profile-row { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); font-size:13px; }.profile-row b { color:var(--muted); font-weight:400; text-align:right; }
@media (max-width:760px) { .quiz-section { padding:55px 6vw 70px; }.quiz-question legend { font-size:32px; }.quiz-option { min-height:58px; padding:16px; }.quiz-summary { padding:22px; }.profile-row { display:block; }.profile-row b { display:block; margin-top:5px; text-align:left; }.hero-quiz-button { width:100%; justify-content:space-between; } }
@media (prefers-reduced-motion: reduce) { .quiz-progress-track i { transition:none; } }
/* Dark-mode contrast fixes */
:root[data-theme="dark"] .button,
:root[data-theme="dark"] .recommend-form .button,
:root[data-theme="dark"] .quiz-continue {
  background: var(--lime);
  color: #14201b;
  border-color: var(--lime);
}
:root[data-theme="dark"] .button span { color: #14201b; }
:root[data-theme="dark"] .button:hover,
:root[data-theme="dark"] .recommend-form .button:hover,
:root[data-theme="dark"] .quiz-continue:hover:not(:disabled) {
  background: #d9f77c;
  color: #14201b;
}
:root[data-theme="dark"] .quiz-continue:disabled {
  background: #71863d;
  color: #18231f;
  opacity: .7;
}
:root {
  --motion-fast: 140ms;
  --motion-standard: 200ms;
  --motion-slow: 280ms;
  --ease-standard: cubic-bezier(.2,.75,.25,1);
  --shadow-soft: 0 12px 28px rgba(23,34,31,.08);
  --radius-sm: 6px;
  --radius-md: 12px;
}
.button,.theme-toggle,.period-tab,.quiz-option,.quiz-back,.quiz-restart,.spec-toggle,.popular-link {
  transition: transform var(--motion-fast) var(--ease-standard), background-color var(--motion-standard) var(--ease-standard), border-color var(--motion-standard) var(--ease-standard), color var(--motion-standard) var(--ease-standard), box-shadow var(--motion-standard) var(--ease-standard);
}
.button:hover,.theme-toggle:hover,.period-tab:hover,.quiz-option:hover,.popular-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.button:active,.theme-toggle:active,.period-tab:active,.quiz-option:active,.quiz-back:active,.quiz-restart:active,.spec-toggle:active { transform:scale(.98); }
.button:focus-visible,.theme-toggle:focus-visible,.period-tab:focus-visible,.quiz-option:focus-visible,.quiz-back:focus-visible,.quiz-restart:focus-visible,.spec-toggle:focus-visible,input:focus-visible { outline:3px solid var(--lime); outline-offset:3px; }
.button:disabled,.quiz-option:disabled,.quiz-continue:disabled { cursor:not-allowed; filter:none; }
.recommend-form input,.manual-grid input { border-radius:var(--radius-sm); transition:border-color var(--motion-standard) var(--ease-standard), box-shadow var(--motion-standard) var(--ease-standard), background-color var(--motion-standard) var(--ease-standard); }
.recommend-form input:focus,.manual-grid input:focus { outline:none; border-color:var(--lime); box-shadow:0 0 0 4px rgba(201,237,91,.18); }
.card,.popular-card,.manual-fields,.recommendation-result,.quiz-summary { border-radius:var(--radius-md); transition:transform var(--motion-standard) var(--ease-standard), box-shadow var(--motion-standard) var(--ease-standard); }
.card:hover,.popular-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.recommendation-result { animation:result-enter var(--motion-slow) var(--ease-standard) both; }
.spec-row { display:block; border-bottom:1px solid var(--line); }
.spec-row:last-child { border-bottom:0; }
.spec-toggle { width:100%; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; background:transparent; color:var(--ink); padding:9px 0; text-align:left; cursor:pointer; }
.spec-toggle span { display:flex; justify-content:space-between; align-items:center; gap:18px; width:100%; }
.spec-toggle b { font-weight:600; }
.spec-toggle small { color:var(--ink); text-align:right; overflow-wrap:anywhere; }
.spec-toggle i { color:var(--muted); font-style:normal; font-size:20px; transition:transform var(--motion-standard) var(--ease-standard); }
.spec-row.is-open .spec-toggle i { transform:rotate(45deg); color:var(--lime); }
.spec-explanation { overflow:hidden; padding:0 8px 14px 0; animation:spec-open var(--motion-standard) var(--ease-standard) both; }
.spec-explanation p { margin:0 0 10px; }
.spec-status { color:var(--muted); font-size:11px; }
.spec-explanation dl { display:grid; gap:8px; margin:0; }
.spec-explanation dl div { display:grid; grid-template-columns:110px 1fr; gap:12px; font-size:12px; line-height:1.45; }
.spec-explanation dt { color:var(--muted); font-weight:700; }
.spec-explanation dd { margin:0; }
.quiz-question,.quiz-summary { animation:result-enter var(--motion-standard) var(--ease-standard) both; }
.quiz-progress-track i { transition:width var(--motion-standard) var(--ease-standard); }
@keyframes result-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes spec-open { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) {
  .spec-toggle span { align-items:flex-start; flex-direction:column; gap:3px; }
  .spec-toggle small { text-align:left; }
  .spec-explanation dl div { grid-template-columns:1fr; gap:2px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; }
  .button:hover,.theme-toggle:hover,.period-tab:hover,.quiz-option:hover,.popular-card:hover,.card:hover { transform:none; box-shadow:none; }
}


.feedback-section { padding:65px 6vw 80px; background:var(--cream); }
.feedback-form { max-width:620px; display:grid; gap:14px; }
.feedback-form label { display:grid; gap:8px; color:var(--muted); font-size:12px; font-weight:700; }
.feedback-form textarea { width:100%; min-height:120px; resize:vertical; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--input); color:var(--ink); padding:14px; font:14px/1.5 'DM Sans',sans-serif; }
.feedback-form textarea:focus { outline:3px solid var(--lime); outline-offset:2px; }
.feedback-note,.feedback-status { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.feedback-status { min-height:18px; color:var(--ink); }
@media (max-width:760px) { .feedback-section { padding:55px 6vw 70px; }.feedback-form .button { width:100%; justify-content:space-between; } }


/* Accessible semantic design system */
:root {
  --page-bg:#fbfaf7;
  --surface:#f4f2ec;
  --surface-alt:#e5f0dd;
  --card-bg:#fbfaf7;
  --text-primary:#17221f;
  --text-secondary:#4f5c56;
  --text-muted:#5e6b65;
  --border:#c8d0c9;
  --border-strong:#87958d;
  --accent:#c9ed5b;
  --accent-text:#14201b;
  --accent-soft:#eef8c9;
  --focus-ring:#6e8f00;
  --success:#216e4e;
  --warning:#785c00;
  --error:#a33e2d;
  --disabled-bg:#dfe4df;
  --disabled-text:#526058;
  --skeleton:#dce4dc;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-pill:999px;
  --elevation:0 8px 22px rgba(23,34,31,.10);
}
:root[data-theme="dark"] {
  --page-bg:#111816;
  --surface:#202b28;
  --surface-alt:#263b34;
  --card-bg:#18231f;
  --text-primary:#f0f3ed;
  --text-secondary:#d1d9d2;
  --text-muted:#b8c2ba;
  --border:#405149;
  --border-strong:#73847a;
  --accent:#c9ed5b;
  --accent-text:#14201b;
  --accent-soft:#304326;
  --focus-ring:#e2ff7a;
  --success:#8bd6ad;
  --warning:#f2d66d;
  --error:#ff9a87;
  --disabled-bg:#39453f;
  --disabled-text:#c0c9c1;
  --skeleton:#2b3933;
  --elevation:0 8px 22px rgba(0,0,0,.28);
}
body { background:var(--page-bg); color:var(--text-primary); }
.site-header,footer { border-color:var(--border); }
.hero,.quiz-section,.recommend-section,.popularity-section,.feedback-section { background:var(--surface); }
h1,h2,h3,h4,.brand,.result-header h3,.card h3,.popular-card h3 { color:var(--text-primary); }
.hero-copy,.section-intro,.form-hint,.confidence,.prediction,.result-explanation,.feedback-note,.feedback-status { color:var(--text-secondary); }
.eyebrow,.tag,.beta,.spec span,.result-spec span,.profile-row b,.progress-label,.quiz-progress-label { color:var(--text-muted); }
.button,.quiz-continue { background:var(--accent); color:var(--accent-text); border:1px solid var(--accent); border-radius:var(--radius-md); font-weight:700; }
.button span { color:var(--accent-text); }
.button:hover:not(:disabled),.quiz-continue:hover:not(:disabled) { background:#dff77b; color:var(--accent-text); }
.theme-toggle,.period-tab,.quiz-back,.quiz-restart { background:var(--surface); color:var(--text-primary); border:1px solid var(--border-strong); border-radius:var(--radius-pill); }
.theme-toggle:hover,.period-tab:hover,.quiz-back:hover:not(:disabled),.quiz-restart:hover { border-color:var(--accent); color:var(--text-primary); }
input,textarea,.recommend-form input,.manual-grid input,.feedback-form textarea { background:var(--card-bg); color:var(--text-primary); border:1px solid var(--border-strong); border-radius:var(--radius-md); }
input::placeholder,textarea::placeholder { color:var(--text-muted); opacity:1; }
input:focus,textarea:focus,.recommend-form input:focus,.manual-grid input:focus,.feedback-form textarea:focus { outline:3px solid var(--focus-ring); outline-offset:2px; border-color:var(--focus-ring); }
.card,.popular-card,.manual-fields,.recommendation-result,.quiz-summary { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:none; }
.card:nth-child(2) { background:var(--surface-alt); }
.card:hover,.popular-card:hover { box-shadow:var(--elevation); }
.archetype-result { background:var(--text-primary); color:var(--page-bg); border-radius:var(--radius-md); }
.archetype-result strong { color:var(--accent); }
.archetype-result span,.archetype-result small { color:var(--text-secondary); }
.result-specs,.specs,.ratings,.profile-list { border-color:var(--border); }
.result-spec,.spec { color:var(--text-primary); }
.result-spec b,.spec b { color:var(--text-primary); }
.spec-toggle { color:var(--text-primary); }
.spec-toggle small,.spec-status { color:var(--text-secondary); }
.spec-row { border-color:var(--border); border-radius:var(--radius-sm); }
.spec-row.is-open { background:var(--surface-alt); padding-inline:10px; }
.spec-explanation dt { color:var(--text-muted); }
.spec-explanation dd { color:var(--text-secondary); }
.quiz-option { background:var(--card-bg); color:var(--text-primary); border:2px solid var(--border); border-radius:var(--radius-md); }
.quiz-option:hover,.quiz-option:focus-visible { border-color:var(--focus-ring); color:var(--text-primary); }
.quiz-option.is-selected { background:var(--accent-soft); color:var(--text-primary); border-color:var(--focus-ring); box-shadow:inset 4px 0 0 var(--accent); }
.quiz-option.is-selected span { color:var(--accent-text); font-weight:700; }
.quiz-option:disabled,.quiz-continue:disabled,.button:disabled { background:var(--disabled-bg); color:var(--disabled-text); border-color:var(--border); opacity:1; }
.quiz-progress-track { background:var(--border); }
.quiz-progress-track i { background:var(--accent); }
.period-tab.is-active { background:var(--text-primary); color:var(--page-bg); border-color:var(--text-primary); font-weight:700; }
.data-state { background:var(--card-bg); color:var(--text-secondary); border:1px solid var(--border-strong); border-radius:var(--radius-md); }
.data-state.is-error { color:var(--error); border-color:var(--error); }
.feedback-status { color:var(--success); }
.beta { background:var(--accent-soft); color:var(--text-primary); border-radius:var(--radius-pill); padding:4px 7px; }
.popular-rank,.result-image-placeholder,.brand-mark { border-radius:var(--radius-pill); }
.popular-link { color:var(--text-primary); text-decoration:underline; text-underline-offset:3px; }
.popular-link:hover { color:var(--text-primary); }
.bar { background:var(--border); }
.bar i { background:var(--accent); }
.how-section { background:var(--text-primary); color:var(--page-bg); }
.how-section h2 { color:var(--page-bg); }
.how-section p:last-child,.how-section .eyebrow { color:var(--text-secondary); }


.hero-note,footer { color:var(--text-secondary); }
.quiz-back:disabled,.quiz-restart:disabled { opacity:1; background:var(--disabled-bg); color:var(--disabled-text); border-radius:var(--radius-md); padding-inline:12px; }
.quiz-progress-label,.progress-label { color:var(--text-secondary); }


.deals-section { padding:65px 6vw 80px; background:var(--surface); }
.affiliate-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.affiliate-card,.affiliate-action { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; }
.affiliate-card h3 { color:var(--text-primary); font:600 24px 'Space Grotesk',sans-serif; margin:12px 0 8px; }
.affiliate-card p,.affiliate-action p { color:var(--text-secondary); line-height:1.5; margin:0 0 16px; }
.partner-badge { display:inline-flex; border-radius:var(--radius-pill); background:var(--accent-soft); color:var(--text-primary); padding:5px 9px; font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.affiliate-button { display:inline-flex; margin-bottom:10px; }
.affiliate-card small,.affiliate-action small { display:block; color:var(--text-muted); font-size:11px; line-height:1.45; }
.affiliate-action { margin-top:24px; }
.affiliate-site-disclosure { color:var(--text-secondary); font-size:12px; line-height:1.5; margin:20px 0 0; max-width:650px; }
@media (max-width:760px) { .affiliate-grid { grid-template-columns:1fr; }.affiliate-button { width:100%; justify-content:space-between; } }


.paddle-detail { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; animation:result-enter var(--motion-slow) var(--ease-standard) both; }
.detail-top { display:flex; gap:18px; align-items:flex-start; }
.detail-image { width:82px; height:104px; border-radius:var(--radius-md); background:var(--text-primary); color:var(--accent); display:grid; place-items:center; font:700 32px 'Space Grotesk',sans-serif; flex:0 0 auto; overflow:hidden; }
.detail-image img { width:100%; height:100%; object-fit:contain; }
.detail-top h3 { margin:6px 0; font:600 clamp(25px,5vw,38px) 'Space Grotesk',sans-serif; letter-spacing:-1px; overflow-wrap:anywhere; }
.detail-beta,.detail-meta,.source-meta { color:var(--text-muted); font-size:11px; margin:6px 0; }
.detail-actions { display:flex; gap:10px; flex-wrap:wrap; margin:22px 0; padding-bottom:18px; border-bottom:1px solid var(--border); }
.detail-actions button { min-height:46px; padding:12px 16px; border-radius:var(--radius-md); cursor:pointer; font:600 12px 'DM Sans',sans-serif; }
.detail-save { background:var(--accent); color:var(--accent-text); border:1px solid var(--accent); }
.detail-compare,.detail-share { background:var(--card-bg); color:var(--text-primary); border:1px solid var(--border-strong); }
.detail-summary,.detail-score-state,.detail-specs,.detail-source,.detail-future { margin-top:26px; }
.detail-summary h4,.detail-score-state h4,.detail-specs h4,.detail-source h4,.detail-future h4 { color:var(--text-primary); font:600 17px 'Space Grotesk',sans-serif; margin:0 0 14px; }
.detail-summary-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.detail-summary-item { min-width:0; background:var(--surface); padding:13px; display:grid; gap:5px; }
.detail-summary-item span { color:var(--text-muted); font-size:11px; }
.detail-summary-item b { color:var(--text-primary); font-size:13px; overflow-wrap:anywhere; }
.detail-score-state,.detail-future { padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
.detail-score-state p,.detail-future p { color:var(--text-secondary); font-size:13px; line-height:1.5; }
.future-rating-list { display:flex; flex-wrap:wrap; gap:7px; }
.future-rating-list span { color:var(--text-muted); border:1px solid var(--border); border-radius:var(--radius-pill); padding:6px 9px; font-size:10px; }
.detail-spec-row { border-bottom:1px solid var(--border); }
.detail-spec-row:last-child { border-bottom:0; }
.detail-spec-toggle { width:100%; min-height:54px; padding:10px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; background:transparent; color:var(--text-primary); text-align:left; cursor:pointer; }
.detail-spec-toggle span { min-width:0; display:flex; justify-content:space-between; align-items:center; gap:15px; width:100%; }
.detail-spec-toggle small { color:var(--text-secondary); text-align:right; overflow-wrap:anywhere; }
.detail-spec-toggle i { color:var(--text-muted); font-style:normal; font-size:20px; transition:transform var(--motion-standard) var(--ease-standard); }
.detail-spec-row.is-open { background:var(--surface-alt); padding-inline:10px; border-radius:var(--radius-sm); }
.detail-spec-row.is-open .detail-spec-toggle i { transform:rotate(45deg); color:var(--accent); }
.detail-spec-panel { color:var(--text-secondary); padding:5px 0 16px; font-size:12px; line-height:1.5; }
.detail-spec-panel dl { display:grid; gap:8px; margin:8px 0 0; }
.detail-spec-panel dl div { display:grid; grid-template-columns:110px 1fr; gap:12px; }
.detail-spec-panel dt { color:var(--text-muted); font-weight:700; }
.detail-spec-panel dd { margin:0; }
.detail-glossary-link,.official-link { color:var(--text-primary); text-decoration:underline; text-underline-offset:3px; font-weight:700; }
.official-link { display:inline-flex; gap:8px; align-items:center; }
.glossary-section { padding:65px 6vw 80px; background:var(--surface); }
.glossary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.glossary-grid article { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px; scroll-margin-top:20px; }
.glossary-grid h3 { color:var(--text-primary); margin:0 0 8px; font:600 18px 'Space Grotesk',sans-serif; }
.glossary-grid p { color:var(--text-secondary); margin:0; font-size:12px; line-height:1.5; }
@media (max-width:760px) { .paddle-detail { padding:18px; }.detail-actions { display:grid; grid-template-columns:1fr; }.detail-actions button { width:100%; }.detail-spec-toggle span { align-items:flex-start; flex-direction:column; gap:4px; }.detail-spec-toggle small { text-align:left; }.detail-spec-panel dl div { grid-template-columns:1fr; gap:2px; }.glossary-grid { grid-template-columns:1fr; } }

.match-results{display:grid;gap:1rem;margin-top:1.25rem}.match-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card-bg);padding:1rem}.match-card-top{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:start}.match-card-top h4{margin:.15rem 0 0}.match-card-top strong{font-size:1.4rem;color:var(--accent)}.match-rank{font-weight:700}.match-confidence,.match-fields,.match-limitations{color:var(--text-secondary);font-size:.9rem}.match-card .button{display:inline-flex;margin-top:.5rem}@media(min-width:700px){.match-results{grid-template-columns:repeat(3,1fr)}}
body.modal-open{overflow:hidden}.feedback-floating{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:30;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--surface);color:var(--text-primary);padding:.75rem 1rem;font:inherit;font-weight:700;box-shadow:var(--elevation);cursor:pointer}.feedback-floating:focus-visible,.modal-close:focus-visible,.beta-modal a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}.beta-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:1rem;background:rgba(5,14,20,.78)}.beta-modal[hidden]{display:none}.beta-modal-surface{position:relative;overflow:hidden;width:min(100%,34rem);border:1px solid #29414b;border-radius:var(--radius-lg);background:#102631;color:#f7fbf7;padding:clamp(1.5rem,6vw,3rem);box-shadow:0 24px 70px rgba(0,0,0,.35)}.beta-modal-surface::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.08;background:repeating-linear-gradient(110deg,transparent 0 5px,#c9f24a 6px 7px,transparent 8px 14px)}.beta-modal-surface>*{position:relative;z-index:1}.modal-close{position:absolute;right:.75rem;top:.65rem;width:2.75rem;height:2.75rem;border:1px solid #78909a;border-radius:50%;background:transparent;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}.beta-modal-badge{display:inline-block;margin-bottom:1rem;border-radius:var(--radius-sm);background:#f3d34a;color:#102029;padding:.3rem .55rem;font-size:.7rem;font-weight:800;letter-spacing:.08em}.beta-modal h2{margin:.25rem 0 1rem;color:#fff;font-size:clamp(1.65rem,7vw,2.35rem);line-height:1.02}.beta-modal p{color:#e6efea;line-height:1.55}.beta-modal .button{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-top:1rem;min-height:3rem}.beta-modal small{display:block;margin-top:1rem;color:#c3d4cc;line-height:1.45}.feedback-sheet form{display:grid;gap:.9rem}.feedback-sheet label{display:grid;gap:.35rem;color:#f3f8f3;font-weight:700}.feedback-sheet textarea,.feedback-sheet select{width:100%;border:1px solid #617b84;border-radius:var(--radius-md);background:#0c1d25;color:#fff;padding:.75rem;font:inherit}.feedback-sheet textarea:focus,.feedback-sheet select:focus{border-color:#c9f24a;outline:3px solid rgba(201,242,74,.35)}.feedback-sheet fieldset{border:0;padding:0}.feedback-sheet legend{color:#f3f8f3;font-weight:700}.rating-options{display:none}.beta-modal-compact .button-secondary{display:block;border:1px solid #78909a;background:transparent;color:#fff}.beta-modal-compact .button-secondary:hover{background:#1b3845}.beta-modal-compact small{max-width:31rem}.beta-modal-compact .beta-modal-surface{max-width:31rem}@media(max-width:480px){.feedback-floating{right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));padding:.7rem .85rem}.beta-modal{align-items:end;padding:.5rem}.beta-modal-surface{border-radius:var(--radius-lg) var(--radius-lg) .75rem .75rem;padding:1.4rem 1.15rem 1.25rem;max-height:calc(100dvh - 1rem);overflow:auto}.beta-modal h2{font-size:1.65rem}}@media(prefers-reduced-motion:reduce){.beta-modal-surface{scroll-behavior:auto}}
.modal-open .feedback-floating{display:none}.quiz-app,.paddle-detail,.comparison-tray{scroll-margin-bottom:5rem}@media(max-width:480px){main{padding-bottom:4.5rem}}