*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--color-bg:#faf8f5;--color-surface:#ffffff;--color-surface-alt:#f0ebe4;--color-text:#2c2420;--color-text-muted:#6b5d54;--color-text-light:#9a8b7e;--color-primary:#8b5e3c;--color-primary-hover:#6d4830;--color-primary-light:#f5ebe0;--color-accent:#c4784a;--color-success:#4a7c59;--color-danger:#b85c5c;--color-border:#e0d5c8;--color-border-light:#ede6dc;--shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 12px rgba(0,0,0,.08);--shadow-lg:0 8px 32px rgba(0,0,0,.1);--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--font-sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;--font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;--max-width:1120px;--header-height:64px}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}
img,svg{max-width:100%;height:auto}
a{color:var(--color-primary);text-decoration:none}
a:hover{color:var(--color-primary-hover);text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:2px solid transparent;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:15px;font-weight:600;cursor:pointer;transition:all .15s ease;text-decoration:none;line-height:1.3}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn-secondary{background:var(--color-surface);color:var(--color-primary);border-color:var(--color-primary)}
.btn-secondary:hover{background:var(--color-primary-light)}
.btn-danger{background:var(--color-surface);color:var(--color-danger);border-color:var(--color-danger)}
.btn-danger:hover{background:#fdf2f2}
.btn-sm{padding:6px 14px;font-size:13px}
.btn-lg{padding:14px 28px;font-size:17px}
.site-header{position:sticky;top:0;z-index:100;background:var(--color-surface);border-bottom:1px solid var(--color-border-light);height:var(--header-height)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;color:var(--color-text);text-decoration:none}
.logo:hover{text-decoration:none;color:var(--color-primary)}
.main-nav{display:flex;gap:8px}
.main-nav a{padding:6px 12px;font-size:14px;font-weight:500;color:var(--color-text-muted);border-radius:var(--radius-sm);transition:all .15s}
.main-nav a:hover{color:var(--color-text);background:var(--color-surface-alt);text-decoration:none}
@media(max-width:768px){
.main-nav{display:none}
}
.hero-section{padding:80px 0 60px;text-align:center;background:linear-gradient(180deg,var(--color-primary-light) 0%,var(--color-bg) 100%)}
.hero-section h1{font-size:clamp(28px,5vw,44px);font-weight:800;line-height:1.2;margin-bottom:16px;color:var(--color-text)}
.hero-sub{font-size:clamp(16px,2.5vw,20px);color:var(--color-text-muted);max-width:560px;margin:0 auto 32px}
.section-intro{font-size:16px;color:var(--color-text-muted);max-width:640px;margin-bottom:32px}
.visualizer-section{padding:64px 0}
.visualizer-section h2{font-size:28px;font-weight:700;margin-bottom:8px}
.matcher-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:24px}
@media(max-width:900px){
.matcher-layout{grid-template-columns:1fr}
}
.matcher-controls{display:flex;flex-direction:column;gap:24px}
.control-group{border:none;padding:0}
.control-group legend{font-size:16px;font-weight:600;margin-bottom:12px;color:var(--color-text)}
.option-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:500px){
.option-cards{grid-template-columns:1fr}
}
.option-card{display:flex;flex-direction:column;gap:4px;padding:14px;border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all .15s;background:var(--color-surface)}
.option-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
.option-card input{position:absolute;opacity:0;width:0;height:0}
.option-card:has(input:checked){border-color:var(--color-primary);background:var(--color-primary-light);box-shadow:0 0 0 1px var(--color-primary)}
.card-icon{font-size:20px;line-height:1}
.card-swatch{width:24px;height:24px;border-radius:50%;border:2px solid var(--color-border)}
.card-label{font-size:14px;font-weight:600;color:var(--color-text)}
.card-desc{font-size:12px;color:var(--color-text-muted);line-height:1.4}
.matcher-results{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;min-height:300px}
.results-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:250px;text-align:center;color:var(--color-text-light);gap:16px}
.results-empty svg{color:var(--color-border)}
.results-content{display:flex;flex-direction:column;gap:20px}
.results-header h3{font-size:18px;font-weight:700}
.results-summary{font-size:14px;color:var(--color-text-muted)}
.method-list{display:flex;flex-direction:column;gap:16px;list-style:none;padding:0}
.method-card{padding:16px;background:var(--color-surface-alt);border-radius:var(--radius-md);border-left:4px solid var(--color-primary)}
.method-card.rank-1{border-left-color:var(--color-success)}
.method-card.rank-2{border-left-color:var(--color-accent)}
.method-card h4{font-size:15px;font-weight:600;margin-bottom:4px}
.method-card .method-supplies{font-size:13px;color:var(--color-text-muted);margin-bottom:8px}
.method-card .method-steps{font-size:14px;line-height:1.7}
.method-card .method-steps li{margin-bottom:4px}
.method-card .method-expect{font-size:13px;color:var(--color-text-muted);margin-top:8px;font-style:italic}
.results-actions{display:flex;gap:8px;flex-wrap:wrap}
.saved-profiles{border-top:1px solid var(--color-border-light);padding-top:16px}
.saved-profiles h4{font-size:14px;font-weight:600;margin-bottom:8px}
.saved-profiles ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.saved-profiles li{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:8px 12px;background:var(--color-surface-alt);border-radius:var(--radius-sm)}
.saved-profiles li button{background:none;border:none;color:var(--color-primary);cursor:pointer;font-size:13px;padding:2px 6px}
.saved-profiles li button:hover{text-decoration:underline}
.guide-section{padding:64px 0;background:var(--color-surface)}
.guide-section h2{font-size:28px;font-weight:700;margin-bottom:8px}
.depth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:24px}
.depth-card{background:var(--color-bg);border:1px solid var(--color-border-light);border-radius:var(--radius-md);padding:20px}
.depth-visual{height:80px;border-radius:var(--radius-sm);margin-bottom:12px;display:flex;align-items:flex-end;padding:10px}
.depth-visual.surface{background:linear-gradient(135deg,#e8ddd3 0%,#d4c4b0 100%);background-image:repeating-linear-gradient(90deg,transparent,transparent 8px,rgba(255,255,255,.3) 8px,rgba(255,255,255,.3) 10px)}
.depth-visual.deep{background:linear-gradient(135deg,#c4a882 0%,#8b6f47 100%);background-image:repeating-linear-gradient(90deg,transparent,transparent 15px,rgba(0,0,0,.15) 15px,rgba(0,0,0,.15) 18px)}
.depth-visual.ring{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.3) 40%,transparent 70%),linear-gradient(135deg,#d4c4b0,#e8ddd3)}
.depth-visual.discolor{background:linear-gradient(90deg,#d4c4b0 0%,#c9b89e 50%,#d4c4b0 100%)}
.depth-label{font-size:12px;font-weight:600;color:var(--color-text-muted);background:rgba(255,255,255,.8);padding:2px 8px;border-radius:4px}
.depth-card h3{font-size:16px;font-weight:600;margin-bottom:8px}
.depth-card p{font-size:14px;color:var(--color-text-muted);line-height:1.6}
.depth-test{margin-top:8px;font-size:13px}
.cheatsheet-section{padding:64px 0}
.cheatsheet-section h2{font-size:28px;font-weight:700;margin-bottom:8px}
.items-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:24px}
.item-card{background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-md);padding:20px}
.item-card h3{font-size:16px;font-weight:600;margin-bottom:6px}
.item-use{font-size:13px;color:var(--color-primary);font-weight:500;margin-bottom:8px}
.item-card p{font-size:14px;color:var(--color-text-muted);line-height:1.6}
.checklist-section{padding:64px 0;background:var(--color-surface)}
.checklist-section h2{font-size:28px;font-weight:700;margin-bottom:8px}
.checklist-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;margin-top:24px}
@media(max-width:768px){
.checklist-layout{grid-template-columns:1fr}
}
.checklist{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5}
.checklist input[type=checkbox]{width:18px;height:18px;accent-color:var(--color-primary);flex-shrink:0;margin-top:3px}
.checklist-note{font-size:13px;color:var(--color-text-light);margin-top:16px}
.checklist-sidebar{background:var(--color-bg);border-radius:var(--radius-md);padding:20px}
.checklist-sidebar h3{font-size:16px;font-weight:600;margin-bottom:12px}
.dont-list{display:flex;flex-direction:column;gap:12px}
.dont-list dt{font-size:13px;font-weight:600;color:var(--color-danger)}
.dont-list dd{font-size:13px;color:var(--color-text-muted);line-height:1.5}
.affiliate-section{padding:48px 0}
.affiliate-card{background:linear-gradient(135deg,var(--color-primary-light),#fdf6ee);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:32px;text-align:center}
.affiliate-card h3{font-size:20px;font-weight:700;margin-bottom:8px}
.affiliate-card p{font-size:15px;color:var(--color-text-muted);margin-bottom:20px;max-width:500px;margin-left:auto;margin-right:auto}
.faq-section{padding:64px 0}
.faq-section h2{font-size:28px;font-weight:700;margin-bottom:24px}
.faq-list{display:flex;flex-direction:column;gap:20px}
.faq-list dt{font-size:16px;font-weight:600;margin-bottom:4px}
.faq-list dd{font-size:15px;color:var(--color-text-muted);line-height:1.7}
.site-footer{background:var(--color-text);color:rgba(255,255,255,.7);padding:48px 0 24px;margin-top:32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:32px}
@media(max-width:768px){
.footer-grid{grid-template-columns:1fr}
}
.footer-grid strong{color:#fff;font-size:14px;display:block;margin-bottom:8px}
.footer-grid p{font-size:14px;line-height:1.6}
.footer-links{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.footer-links a{color:rgba(255,255,255,.7);font-size:14px}
.footer-links a:hover{color:#fff}
.footer-bottom{font-size:13px;color:rgba(255,255,255,.4);text-align:center;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom a{color:rgba(255,255,255,.6)}
.footer-bottom a:hover{color:#fff}
@media print{
.site-header,.site-footer,.affiliate-section,.results-actions,.saved-profiles,.checklist-section,.faq-section{display:none}
.matcher-controls{page-break-after:always}
body{background:#fff;color:#000}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:2px}


/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}