:root, [data-theme="light"] {
      --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
      --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
      --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
      --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
      --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
      --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
      --color-bg: #f7f6f2;
      --color-surface: #f9f8f5;
      --color-surface-2: #fbfbf9;
      --color-surface-offset: #f3f0ec;
      --color-border: #d4d1ca;
      --color-divider: #dcd9d5;
      --color-text: #28251d;
      --color-text-muted: #64625d;
      --color-text-faint: #93918a;
      --color-text-inverse: #f9f8f4;
      --color-primary: #8c1d40;
      --color-primary-hover: #701834;
      --color-primary-highlight: #ead8df;
      --color-success: #2f6a3d;
      --shadow-sm: 0 1px 2px rgba(17,17,17,.06);
      --shadow-md: 0 10px 30px rgba(17,17,17,.08);
      --radius-sm: .375rem; --radius-md: .6rem; --radius-lg: 1rem; --radius-xl: 1.25rem; --radius-full: 9999px;
      --font-display: 'Instrument Serif', Georgia, serif;
      --font-body: 'Inter', system-ui, sans-serif;
      --content-default: 1180px;
    }
    [data-theme="dark"] {
      --color-bg: #121110;
      --color-surface: #1a1917;
      --color-surface-2: #211f1d;
      --color-surface-offset: #26231f;
      --color-border: #3a3733;
      --color-divider: #2d2a27;
      --color-text: #f0ede7;
      --color-text-muted: #b9b4ac;
      --color-text-faint: #8c867d;
      --color-text-inverse: #171513;
      --color-primary: #df7c9d;
      --color-primary-hover: #e596b0;
      --color-primary-highlight: #35262c;
      --color-success: #7fcd92;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
      --shadow-md: 0 10px 30px rgba(0,0,0,.35);
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{-webkit-text-size-adjust:none;text-size-adjust:none;scroll-behavior:smooth}
    body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;background:var(--color-bg);color:var(--color-text)}
    img,svg{display:block;max-width:100%;height:auto}
    button,input,select,textarea{font:inherit;color:inherit}
    a,button,input,select{transition:all 180ms cubic-bezier(.16,1,.3,1)}
    :focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
    .container{max-width:var(--content-default);margin-inline:auto;padding-inline:var(--space-4)}
    .skip-link{position:absolute;left:-9999px;top:auto}.skip-link:focus{left:var(--space-4);top:var(--space-4);z-index:50;background:var(--color-surface);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border)}
    .site-header{position:sticky;top:0;z-index:20;background:color-mix(in srgb, var(--color-bg) 88%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-divider)}
    .header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) 0}
    .brand{display:flex;align-items:center;gap:var(--space-3);font-weight:800;text-decoration:none;color:var(--color-text)}
    .brand-mark{width:32px;height:32px;color:var(--color-primary)}
    .header-actions{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
    .control, .btn, .select, .input{min-height:44px;border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-md)}
    .control, .select{padding:0 var(--space-4)}
    .select{appearance:none}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:0 var(--space-5);font-weight:700;text-decoration:none;cursor:pointer}
    .btn-primary{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}
    .btn-primary:hover{background:var(--color-primary-hover)}
    .btn-secondary{background:var(--color-surface);color:var(--color-text)}
    .hero{padding:clamp(3rem,7vw,6rem) 0 var(--space-12)}
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-8);align-items:center}
    .eyebrow{font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.12em;color:var(--color-primary);font-weight:700;margin-bottom:var(--space-4)}
    h1{font-family:var(--font-display);font-size:clamp(3rem,6vw,5.6rem);line-height:.94;letter-spacing:-.04em;max-width:10ch}
    .hero-copy p{margin-top:var(--space-5);max-width:56ch;color:var(--color-text-muted);font-size:var(--text-lg)}
    .hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-6)}
    .hero-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:calc(var(--radius-xl) + 4px);box-shadow:var(--shadow-md);overflow:hidden}
    .hero-visual{aspect-ratio:4/3;background:radial-gradient(circle at top right, color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 35%), linear-gradient(135deg, var(--color-surface-offset), var(--color-surface-2));padding:var(--space-6);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
    .visual-panel{border-radius:var(--radius-lg);padding:var(--space-4);background:color-mix(in srgb, var(--color-surface) 78%, transparent);border:1px solid color-mix(in srgb, var(--color-text) 10%, transparent)}
    .visual-panel strong{font-size:var(--text-sm);display:block;margin-bottom:var(--space-2)}
    .visual-panel span{font-size:var(--text-xs);color:var(--color-text-muted)}
    .visual-panel.tall{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;background:var(--color-primary);color:var(--color-text-inverse);border-color:transparent}
    .visual-badges{display:flex;flex-wrap:wrap;gap:var(--space-2)}
    .chip{display:inline-flex;align-items:center;padding:.42rem .72rem;border-radius:var(--radius-full);background:var(--color-primary-highlight);color:var(--color-primary);font-size:var(--text-xs);font-weight:700;border:1px solid transparent}
    .section{padding:var(--space-10) 0}
    .section-title{display:flex;justify-content:space-between;gap:var(--space-4);align-items:end;margin-bottom:var(--space-6)}
    .section-title h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);line-height:1}
    .section-title p{max-width:60ch;color:var(--color-text-muted)}
    .card-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:var(--space-4)}
    .card{background:var(--color-surface);border:1px solid color-mix(in srgb, var(--color-text) 12%, transparent);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-sm)}
    .card h3{font-size:var(--text-lg);margin-bottom:var(--space-2)}
    .card p{color:var(--color-text-muted)}
    .form-shell{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-6);align-items:start}
    .form-panel,.results-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:calc(var(--radius-xl) + 2px);padding:var(--space-6);box-shadow:var(--shadow-sm)}
    .form-grid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--space-4)}
    .field{display:flex;flex-direction:column;gap:var(--space-2)}
    .field.full{grid-column:1/-1}
    label{font-size:var(--text-sm);font-weight:700}
    .input,.select{width:100%;padding:0 var(--space-4)}
    textarea.input{min-height:120px;padding:var(--space-4);resize:vertical}
    .hint{font-size:var(--text-xs);color:var(--color-text-muted)}
    .segmented{display:flex;flex-wrap:wrap;gap:var(--space-2)}
    .segmented button{border:1px solid var(--color-border);padding:.62rem .9rem;border-radius:var(--radius-full);background:var(--color-surface-2);font-size:var(--text-sm);font-weight:700}
    .segmented button.active{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}
    .results-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
    .results-list{display:grid;gap:var(--space-4)}
    .gift-card{padding:var(--space-5);border:1px solid color-mix(in srgb, var(--color-text) 11%, transparent);border-radius:var(--radius-lg);background:var(--color-surface-2)}
    .gift-top{display:flex;justify-content:space-between;gap:var(--space-4);align-items:start;margin-bottom:var(--space-3)}
    .gift-title{font-size:var(--text-lg);font-weight:800}
    .score{padding:.35rem .6rem;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:800;background:color-mix(in srgb, var(--color-success) 16%, transparent);color:var(--color-success);white-space:nowrap}
    .gift-meta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)}
    .gift-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
    .gift-actions a{color:var(--color-text);min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-4);border-radius:var(--radius-md);text-decoration:none;font-weight:700;border:1px solid var(--color-border);background:var(--color-surface)}
    .gift-actions a.primary-link{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}
    .footnote,.affiliate-note{font-size:var(--text-xs);color:var(--color-text-muted)}
    .affiliate-note{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-divider)}
    .region-pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}
    .region-pills span{padding:.46rem .8rem;border-radius:var(--radius-full);background:var(--color-surface-offset);font-size:var(--text-xs);font-weight:700}
    .footer{padding:var(--space-10) 0 var(--space-12);color:var(--color-text-muted)}
    .footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-4);align-items:start}
    .empty{padding:var(--space-8);text-align:center;border:1px dashed var(--color-border);border-radius:var(--radius-lg);color:var(--color-text-muted)}
    @media (max-width: 980px){
      .hero-grid,.form-shell,.footer-grid,.card-grid{grid-template-columns:1fr}
      h1{max-width:12ch}
      .form-grid{grid-template-columns:1fr}
    }
    @media (max-width: 640px){
      .header-inner,.results-head,.gift-top,.section-title{align-items:flex-start;flex-direction:column}
      .hero-actions,.gift-actions{width:100%}
      .hero-actions .btn,.gift-actions a{width:100%}
      .hero-visual{grid-template-columns:1fr}
    }