fragrance-quiz{display:block;--fq-ink:#000;--fq-paper:#fffdf9;--fq-line:color-mix(in srgb,currentColor 18%,transparent);--fq-muted:color-mix(in srgb,currentColor 62%,transparent)}
fragrance-quiz [hidden]{display:none!important}
.fq-wrap{max-width:1100px;margin-inline:auto;padding-inline:20px}
.fq-intro,.fq-q,.fq-status{max-width:720px;margin-inline:auto;text-align:center}
.fq-title{font-size:clamp(1.5rem,3.2vw,2.125rem);line-height:1.2;margin:0 0 .5em}
.fq-sub{margin:0 auto 1.5em;max-width:46ch;color:var(--fq-muted);line-height:1.6}
.fq-btn{appearance:none;border:1px solid var(--fq-ink);background:var(--fq-ink);color:var(--fq-paper);font:inherit;font-size:1rem;padding:.85em 1.8em;border-radius:2px;cursor:pointer;transition:opacity .2s}
fragrance-quiz button{-webkit-tap-highlight-color:transparent}
.fq-btn[disabled]{opacity:.35;cursor:default}
.fq-btn--line{background:transparent;color:var(--fq-ink);width:100%}
.fq-link{appearance:none;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:.6em .4em}
fragrance-quiz button:focus-visible,fragrance-quiz a:focus-visible{outline:2px solid var(--fq-ink);outline-offset:3px}
.fq-progress{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:22px;font-size:.8125rem;color:var(--fq-muted)}
.fq-progress i{display:block;width:160px;height:2px;background:var(--fq-line);position:relative}
.fq-progress i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--fq-p)*100%);background:var(--fq-ink)}
.fq-q-title{font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.3;margin:0 0 .4em;outline:none}
.fq-q-hint{margin:0 0 1.2em;color:var(--fq-muted);font-size:.9375rem}
.fq-opts{display:grid;gap:10px;max-width:420px;margin:18px auto 0}
.fq-opt{appearance:none;font:inherit;font-size:1rem;color:inherit;background:transparent;border:1px solid var(--fq-line);border-radius:2px;padding:1em 1.2em;cursor:pointer;transition:border-color .2s,background .2s}
.fq-opt[aria-pressed="true"]{background:var(--fq-ink);color:var(--fq-paper);border-color:var(--fq-ink)}
.fq-blotters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:22px auto 0;max-width:640px}
.fq-blotter{appearance:none;border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer;filter:drop-shadow(0 0 .6px rgba(0,0,0,.55))}
.fq-paper{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:210px;padding:22px 10px 0;background:var(--fq-paper);clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),50% 100%,0 calc(100% - 26px));overflow:hidden}
.fq-paper::after{content:"";position:absolute;inset-inline:0;bottom:0;height:34%;background:linear-gradient(to bottom,transparent,var(--fq-tone) 45%);opacity:.9;transition:height .45s ease}
.fq-blotter[aria-pressed="true"] .fq-paper::after{height:72%}
.fq-b-label{position:relative;z-index:1;font-size:1.0625rem}
.fq-b-hint{position:relative;z-index:1;font-size:.8125rem;line-height:1.45;color:var(--fq-muted);max-width:14ch}
.fq-blotter[aria-pressed="true"] .fq-b-label{font-weight:600}
@media (hover:hover){.fq-btn:hover{opacity:.86}.fq-opt:hover{border-color:var(--fq-ink)}.fq-blotter:hover .fq-paper::after{height:42%}.fq-size:hover{border-color:var(--fq-ink)}
.fq-q[data-fresh] .fq-opt:hover{border-color:var(--fq-line)}.fq-q[data-fresh] .fq-blotter:hover .fq-paper::after{height:34%}}
.fq-nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 20px;margin-top:26px}
.fq-status{padding:40px 0;color:var(--fq-muted)}
.fq-results{text-align:center}
.fq-cards{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:start}
.fq-card{display:flex;flex-direction:column}
.fq-card-img{display:block;aspect-ratio:1;background:var(--fq-paper);margin-bottom:14px}
.fq-card-img img{width:100%;height:100%;object-fit:contain;display:block}
.fq-card-vendor{margin:0;font-size:.8125rem;color:var(--fq-muted)}
.fq-card-name{font-size:1.125rem;color:inherit;text-decoration:none;margin:2px 0 8px}
.fq-card-why{margin:0;font-size:.9375rem;line-height:1.5}
.fq-card-kind{margin:2px 0 0;font-size:.8125rem;color:var(--fq-muted)}
.fq-sizes{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.fq-size{appearance:none;font:inherit;font-size:.8125rem;color:inherit;background:transparent;border:1px solid var(--fq-line);border-radius:999px;padding:.35em .9em;cursor:pointer}
.fq-size[aria-pressed="true"]{background:var(--fq-ink);border-color:var(--fq-ink);color:var(--fq-paper)}
.fq-card-price{margin:10px 0 12px;font-size:1rem}
.fq-card .fq-btn{margin-top:auto}
.fq-msg{min-height:1.4em;margin:10px 0 0;font-size:.9375rem}
.fq-strip{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;border:1px solid var(--fq-line);padding:16px 20px;border-radius:2px}
.fq-strip-title{margin:0;font-size:1.0625rem}
.fq-strip-sub{margin:2px 0 0;font-size:.875rem;color:var(--fq-muted)}
.fq-strip .fq-btn{padding:.7em 1.4em;font-size:.9375rem}
.fq-dialog{border:0;padding:0;width:min(940px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:var(--fq-bg,#fff);color:inherit}
.fq-dialog::backdrop{background:rgba(0,0,0,.45)}
.fq-dialog .fq-stage{padding:44px 20px 32px;overflow:auto}
.fq-close{position:absolute;inset-inline-end:10px;top:8px;appearance:none;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:inherit;padding:6px 10px}
@media (max-width:749px){
.fq-blotters{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fq-paper{min-height:170px}
.fq-cards{grid-template-columns:1fr;gap:28px}
.fq-card{display:grid;grid-template-columns:112px 1fr;column-gap:14px;align-items:start}
.fq-card-img{grid-row:1 / span 8;margin:0}
.fq-card .fq-btn{grid-column:2}
.fq-strip{padding:14px 16px}
.fq-strip .fq-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){fragrance-quiz *{transition:none!important}}