@font-face {
  font-family:"Comic Neue";
  src:url("./fonts/comic-neue-bold.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}
.wq-style-reference { display:block; width:100%; height:auto; aspect-ratio:36 / 19; object-fit:contain; border-radius:9px; }
[data-group="style"] .wq-options { grid-template-columns:1fr; }
.wq-type--playful { font-family:"Comic Neue",cursive; font-weight:700; letter-spacing:0; }

/* Website journey: uses the existing paper, typography and soft shadows. */
/* No website-specific cube or panel geometry: all faces use styles.css. */
.wq { font-size:.91rem; line-height:1.55; padding:6px 3px 16px; max-width:850px; }
.wq button { cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent; }
.wq a { text-underline-offset:3px; }
.wq h2,.wq h3 { font-family:var(--font-display); color:var(--ink); letter-spacing:-.035em; }
.wq h2 { margin:30px 0 16px; font-size:1.6rem; line-height:1.25; }
.wq h3 { font-size:1.1rem; margin:0 0 8px; }
.wq p { margin:12px 0; }
.wq .wq-top { display:flex; align-items:center; flex-wrap:wrap; gap:10px; justify-content:space-between; margin-bottom:28px; color:var(--muted); font-size:.74rem; }
.wq-top a { text-decoration:none; }
.wq-top button { background:transparent; border:0; color:var(--ink); text-decoration:underline; }
.wq-eyebrow { display:block; color:#9e4949; font-size:.68rem; font-weight:700; letter-spacing:.13em; margin-bottom:14px; }
.wq .wq-hero h1 { color:var(--ink); font-size:clamp(2rem,3.8vw,3.65rem); line-height:1.1; letter-spacing:-.06em; }
.wq .wq-hero p { font-size:1rem; line-height:1.6; margin:20px 0 24px; }
.wq-packages { display:grid; grid-template-columns:1fr; gap:12px; }
.wq-package { border-radius:18px; padding:16px 18px; box-shadow:var(--shadow-raised); background:var(--paper); border:1px solid rgba(255,255,255,.85); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 8px; }
.wq-package--featured { border-color:#f2a2a2; }
.wq-package small { font-size:.8rem; font-weight:700; }
.wq-package strong { font-family:var(--font-display); font-size:1.8rem; letter-spacing:-.05em; margin:0; grid-column:2; grid-row:1 / 3; }
.wq-package span { font-size:.78rem; color:var(--muted); }
.wq .wq-package p { font-size:.75rem; margin:9px 0 0; }
.wq .wq-primary { display:inline-flex; align-items:center; justify-content:center; gap:18px; border:0; background:#f26d6d; color:#281616; min-height:49px; padding:14px 22px; border-radius:15px; font-weight:700; text-decoration:none; box-shadow:var(--shadow-accent); transition:transform .15s ease,background .15s ease; }
.wq-primary:hover { background:#ed8282; transform:translateY(-1px); }
.wq-primary:disabled { opacity:.65; cursor:wait; transform:none; }
.wq-secondary { display:block; min-height:46px; margin-top:14px; padding:12px 18px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:15px; text-decoration:none; }
.wq-back { background:none; border:0; padding:12px 0; min-height:44px; color:var(--muted); font-size:.83rem!important; }
.wq .wq-fine { font-size:.72rem; line-height:1.5; margin:13px 0 22px; }
.wq-details { border-top:1px solid var(--line); padding:16px 0; margin-top:14px; font-size:.84rem; }
.wq-details summary,.wq-help summary { cursor:pointer; font-weight:600; min-height:30px; }
.wq-details-packages { display:grid; grid-template-columns:1fr; gap:16px; padding-top:20px; }
.wq-details ul { padding-left:17px; font-size:.78rem; color:var(--muted); }
.wq-details li { margin:7px 0; }
.wq-how ol { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:0; list-style:none; counter-reset:steps; }
.wq-how li { counter-increment:steps; font-size:.79rem; }
.wq-how li::before { content:'0' counter(steps); display:block; color:#b86565; font-size:.7rem; margin-bottom:7px; }
.wq-how b,.wq-how span { display:block; }
.wq-how span { color:var(--muted); margin-top:5px; }
.wq-references { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.wq-references a { overflow:hidden; border-radius:16px; background:var(--paper); box-shadow:var(--shadow-small); text-decoration:none; }
.wq-references img { width:100%; aspect-ratio:1.5; display:block; object-fit:cover; object-position:top; }
.wq-references span { display:block; padding:12px; font-size:.8rem; }
.wq-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line); margin-top:38px; padding-top:17px; font-size:.7rem; color:var(--muted); }
.wq-progress-head { display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; margin-bottom:9px; }
.wq-progress { height:5px; border-radius:9px; background:#e4e8ed; overflow:hidden; margin-bottom:30px; }
.wq-progress i { display:block; height:100%; background:#f26d6d; transition:width .2s ease; }
.wq .wq-question { font-size:clamp(1.65rem,2.5vw,2.45rem); margin:0 0 11px; outline:none; }
.wq .wq-subtitle { margin:0 0 23px; font-size:.87rem; }
.wq-group { margin:0 0 22px; border:0; padding:0; min-width:0; }
.wq-group legend { font-weight:600; font-size:.87rem; padding:0; margin-bottom:13px; }
.wq-options { display:grid; grid-template-columns:1fr; gap:11px; }
.wq-options--compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wq-options--compact .wq-option { min-height:49px; padding:12px 17px; }
.wq-option { display:flex; align-items:center; gap:12px; position:relative; text-align:left; border:2px solid transparent; border-radius:17px; background:var(--paper); color:var(--ink); padding:16px; min-height:83px; box-shadow:var(--shadow-small); transition:border-color .15s ease,background .15s ease; }
.wq-option:hover { border-color:#d9c2c2; }
.wq-option.is-selected { border-color:#f26d6d; background:#fff6f5; }
.wq-icon { display:grid; place-items:center; background:#eceff3; width:40px; height:40px; flex-shrink:0; border-radius:12px; color:#8b5959; }
.wq-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.wq-option-label { display:block; min-width:0; font-size:.87rem; font-weight:600; padding-right:12px; }
.wq-option-label small { display:block; margin-top:4px; font-size:.72rem; font-weight:400; color:var(--muted); }
.wq-check { position:absolute; right:10px; top:10px; color:#899099; border:1px solid #d3d7dc; width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:11px; line-height:1; }
.is-selected .wq-check { background:#f26d6d; color:white; border-color:#f26d6d; }
.wq-options--visual .wq-option { flex-direction:column; align-items:stretch; padding:10px; gap:11px; }
.wq-options--visual .wq-option-label { padding:1px 7px 6px; }
.wq-options--visual .wq-check { box-shadow:0 0 0 4px var(--paper); top:15px; right:15px; background:var(--paper); }
.wq-options--visual .is-selected .wq-check { background:#f26d6d; }
.wq-options--palettes { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wq-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:25px; }
.wq-input-label { display:block; font-size:.82rem; font-weight:600; margin:22px 0; }
.wq-input-label input,.wq-input-label textarea { display:block; width:100%; font:inherit; font-weight:400; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid #d5d9e0; border-radius:13px; padding:14px; margin-top:8px; min-height:48px; }
.wq-input-label input:focus,.wq-input-label textarea:focus { outline:2px solid #b76565; outline-offset:2px; }
.wq-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(100%); }
.wq-help { font-size:.77rem; color:var(--muted); margin-bottom:12px; }
.wq-note { border-left:3px solid #ed9292; background:rgba(255,255,255,.5); border-radius:0 12px 12px 0; padding:15px 18px; margin:20px 0; }
.wq .wq-note p { margin:7px 0 0; font-size:.8rem; }
.wq-result { padding:24px; background:var(--paper); box-shadow:var(--shadow-small); border-radius:20px; margin:22px 0; }
.wq-result-price { display:flex; flex-direction:column; gap:4px; }
.wq-result-price strong { font-size:2.5rem; font-family:var(--font-display); letter-spacing:-.05em; }
.wq-result-price span { font-size:.75rem; color:var(--muted); }
.wq-result ul { list-style:none; padding:0; margin:18px 0 0; }
.wq-result li { padding:6px 0 6px 22px; position:relative; font-size:.86rem; }
.wq-result li::before { content:'✓'; position:absolute; left:0; color:#927064; }
.wq-briefing { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.wq-page-plan { margin:26px 0; padding:20px; border:1px solid var(--line); border-radius:16px; }
.wq-page-plan ul { padding-left:19px; font-size:.84rem; }
.wq-page-plan li { margin:7px 0; }
.wq-link-copy { display:block; width:100%; padding:10px; font:inherit; }
.wq-briefing div { padding:12px 0; border-top:1px solid var(--line); }
.wq-briefing small,.wq-briefing strong { display:block; }
.wq-briefing small { color:var(--muted); font-size:.72rem; margin-bottom:6px; }
.wq-briefing strong { font-size:.84rem; font-weight:500; }
.wq-moodboard { border-radius:20px; overflow:hidden; padding:12px; background:var(--paper); box-shadow:var(--shadow-small); margin:24px 0; }
.wq-moodboard .wq-preview { min-height:250px; }
.wq-moodboard .wq-preview-main strong { font-size:clamp(22px,2.6vw,30px); }
.wq-moodboard .wq-preview-main small { font-size:7px; }
.wq .wq-moodboard .wq-preview-main p { font-size:9px; }
.wq-moodboard .wq-preview-main em { font-size:8px; }
.wq-moodboard-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.wq-moodboard-tags span { font-size:.75rem; background:#eaeef2; border-radius:8px; padding:7px 10px; }
/* Code-native reference cards: identical content across all design directions. */
.wq-preview { background:var(--preview-bg); color:var(--preview-ink); border-radius:9px; width:100%; min-height:170px; padding:15px; overflow:hidden; font-family:'DM Sans',sans-serif; }
.wq-preview-nav { display:flex; align-items:center; gap:8px; border-bottom:1px solid color-mix(in srgb,var(--preview-ink) 15%,transparent); padding-bottom:9px; font-size:9px; }
.wq-preview-nav b { margin-right:auto; }
.wq-preview-nav i { width:15px; height:2px; background:var(--preview-ink); opacity:.5; }
.wq-preview-main { display:grid; grid-template-columns:1.25fr 1fr; gap:8px; padding:17px 0; align-items:center; }
.wq-preview-main small { display:block; font-size:5px; letter-spacing:.1em; margin-bottom:8px; }
.wq-preview-main strong { display:block; font-size:clamp(12px,1.3vw,18px); line-height:1.15; letter-spacing:-.035em; }
.wq .wq-preview-main p { font-size:6px; color:inherit; margin:8px 0; }
.wq-preview-main em { display:inline-block; font-size:6px; font-style:normal; padding:5px 8px; background:var(--preview-accent); border-radius:3px; }
.wq-preview-art { position:relative; height:70px; background:color-mix(in srgb,var(--preview-accent) 45%,var(--preview-bg)); border-radius:3px; overflow:hidden; }
.wq-preview-art i { position:absolute; width:45px; height:45px; border-radius:50%; background:var(--preview-accent); left:12%; top:14%; }
.wq-preview-art i:nth-child(2) { width:27px; height:50px; background:var(--preview-ink); left:43%; top:27%; border-radius:32px 32px 0 0; }
.wq-preview-art i:nth-child(3) { width:28px; height:28px; left:66%; top:9%; background:var(--preview-bg); }
.wq-preview-bottom { display:flex; gap:8px; }
.wq-preview-bottom i { width:33%; height:9px; background:color-mix(in srgb,var(--preview-ink) 9%,var(--preview-bg)); border-radius:2px; }
.wq-preview--warm { border-radius:18px; }
.wq-preview--warm .wq-preview-art { border-radius:40px 40px 6px 6px; }
.wq-preview--warm strong { font-family:Georgia,serif; }
.wq-preview--classic strong,.wq-preview--elegant strong { font-family:Georgia,serif; font-weight:400; }
.wq-preview--classic .wq-preview-art { border:2px solid var(--preview-accent); }
.wq-preview--elegant .wq-preview-main { padding:23px 0; }
.wq-preview--elegant .wq-preview-art { border-radius:60px 60px 0 0; }
.wq-preview--playful .wq-preview-art { border-radius:44% 40% 47% 35%; transform:rotate(-6deg); }
.wq-preview--playful strong { font-weight:800; }
.wq-preview--technical strong { font-family:monospace; }
.wq-preview--technical .wq-preview-art { border-radius:0; background:repeating-linear-gradient(0deg,transparent,transparent 9px,#ffffff50 10px),var(--preview-accent); }
.wq-swatches { display:flex; height:72px; overflow:hidden; border-radius:9px; }
.wq-swatches i { flex:1; }
.wq-type { padding:22px 10px; min-height:104px; line-height:1.2; font-size:24px; letter-spacing:-.04em; }
.wq-type--simple { font-family:'DM Sans',sans-serif; }
.wq-type--classic { font-family:Georgia,serif; }
.wq-type--bold { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; letter-spacing:-.06em; }
.wq-type--personal { font-family:'DM Sans',sans-serif; font-style:italic; font-weight:500; }
.wq-layout { display:block; background:#eceff3; padding:18px; min-height:125px; border-radius:9px; }
.wq-layout>i { display:block; width:28%; height:5px; background:#a8b4c5; margin-bottom:15px; }
.wq-layout>b { display:block; width:66%; height:8px; background:#68788e; margin-bottom:5px; }
.wq-layout>em { display:block; width:42%; height:5px; background:#bdc6d2; margin-top:10px; }
.wq-layout>div { display:flex; gap:7px; margin-top:18px; }
.wq-layout>div i { height:17px; background:#ced5df; flex:1; border-radius:3px; }
.wq-layout--compact { padding:12px; }
.wq-layout--compact>b { width:88%; height:5px; }
.wq-layout--compact>div { margin-top:8px; }
.wq-layout--compact>div i { height:48px; background:repeating-linear-gradient(0deg,#d0d7e2 0px,#d0d7e2 4px,#eceff3 4px,#eceff3 8px); }
.wq-scene { display:block; position:relative; min-height:96px; overflow:hidden; background:#e7ebe5; border-radius:9px; }
.wq-scene--people i { position:absolute; height:33px; width:29px; border-radius:50%; background:#b99273; left:26%; top:14px; }
.wq-scene--people i:nth-child(2) { height:50px; width:60px; border-radius:50% 50% 0 0; top:50px; left:16%; background:#63756c; }
.wq-scene--people i:nth-child(3) { left:65%; top:22px; background:#d3b49b; }
.wq-scene--people b { position:absolute; width:42px; height:43px; left:60%; top:53px; border-radius:50% 50% 0 0; background:#a7987c; }
.wq-scene--products { background:#efe8df; }
.wq-scene--products i { position:absolute; width:37px; height:55px; background:#cfbca2; left:25%; top:22px; border-radius:5px 5px 15px 15px; box-shadow:8px 8px 10px #00000015; }
.wq-scene--products i:nth-child(2) { left:50%; top:38px; height:39px; width:40px; background:#817365; }
.wq-scene--illustrations { background:#e9e6f1; }
.wq-scene--illustrations i { position:absolute; height:50px; width:50px; border-radius:50%; background:#baa9d2; left:19%; top:19px; }
.wq-scene--illustrations i:nth-child(2) { background:#738caf; left:44%; top:33px; border-radius:10px; transform:rotate(20deg); }
.wq-scene--illustrations i:nth-child(3) { background:#e4bba0; left:65%; top:11px; height:27px; width:27px; }
.wq-scene--none::after { content:'Aa'; display:block; font-size:40px; padding:10px; text-align:center; color:#56615a; }
.wq-legal { font-size:.86rem; line-height:1.6; max-width:680px; }
.wq-legal h1 { font-size:2rem; }
.wq-legal h2 { font-size:1.1rem; margin:22px 0 6px; }
@media (max-width:820px) {
  .wq-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wq-top { margin-bottom:24px!important; }
  .wq .wq-hero h1 { font-size:2.3rem; }
  .wq .wq-hero p { font-size:.88rem; }
  .wq-packages { gap:8px; }
  .wq-package { padding:15px 10px; border-radius:17px; }
  .wq-package strong { font-size:1.65rem; }
  .wq-package span { font-size:.65rem; }
  .wq .wq-package p { font-size:.65rem; }
  .wq .wq-primary { min-height:50px; }
  .wq-options { gap:10px; }
  .wq-option { padding:13px 10px; min-height:90px; gap:9px; }
  .wq-option-label { font-size:.79rem; }
  [data-group="functions"] .wq-option-label { padding-right:0; }
  .wq-icon { width:32px; height:32px; }
  .wq-icon svg { width:20px; }
  .wq .wq-question { font-size:1.75rem; }
  .wq-preview { min-height:153px; padding:11px; }
  .wq-preview-main { grid-template-columns:1fr; padding:13px 0; }
  .wq-preview-main strong { font-size:14px; }
  .wq-preview-art { position:absolute; opacity:.1; width:100%; inset:0; height:100%; }
  .wq-preview-main { position:relative; }
  .wq-preview-main>div:first-child { z-index:1; }
  .wq-options--palettes { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wq-type { font-size:20px; padding:17px 6px; }
  .wq-details-packages { grid-template-columns:1fr; }
  .wq-how ol { gap:12px; }
  .wq-references { gap:10px; }
  .wq-references span { font-size:.68rem; padding:10px; }
}
.wq-actions { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
.wq-actions .wq-secondary { margin:0; text-align:center; }
.wq .wq-hero h1 { font-size:2rem; margin-bottom:22px; }
.wq .wq-question { font-size:1.65rem; }
.wq-briefing { grid-template-columns:1fr; }
@media (max-width:380px) { .wq-package strong { font-size:1.35rem; } .wq-option { flex-direction:column; align-items:flex-start; } .wq-option-label { padding-right:0; } .wq-options--visual .wq-option-label { padding-right:9px; } }
@media (prefers-reduced-motion:reduce) { .wq-primary:hover { transform:none; } }

/* Each package owns its expandable scope. Native details works with keyboard. */
.wq-package { display:block; padding:0; }
.wq-package-header { display:grid; grid-template-columns:minmax(0,1fr) auto 18px; gap:4px 10px; align-items:center; padding:16px 18px; cursor:pointer; list-style:none; }
.wq-package-header::-webkit-details-marker { display:none; }
.wq-package-header strong { grid-column:2; grid-row:1 / 3; }
.wq-package-header .wq-package-toggle { grid-column:3; grid-row:1 / 3; font-size:1.1rem; text-align:center; color:#635c5c; }
.wq-package[open] .wq-package-toggle { transform:rotate(180deg); }
.wq-package-body { margin:0 18px; padding:4px 0 10px; border-top:1px solid var(--line); }
.wq-package-body ul { padding-left:17px; margin:12px 0; font-size:.78rem; color:var(--muted); }
.wq-package-body li { margin:6px 0; }
.wq-package-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:18px 0; }
.wq-package-picker button { display:flex; flex-direction:column; align-items:center; gap:4px; min-height:88px; padding:10px 4px; border:2px solid #d9dee5; background:var(--paper); color:var(--ink); border-radius:12px; font-size:.76rem; }
.wq-package-picker button span { font-weight:700; }
.wq-package-picker button small { font-size:.61rem; }
.wq-package-picker button.is-selected { border-color:#f26d6d; background:#fff6f5; }
.wq-result .wq-feature-list { margin:16px 0 0; }
.wq-result .wq-feature-list li { font-size:.78rem; padding:9px 0; border-top:1px solid var(--line); }
.wq-result .wq-feature-list li::before { content:none; }
.wq-feature-list small { display:block; margin-top:3px; font-size:.68rem; line-height:1.4; }
.wq-feature--optional { color:#26724a; }
.wq-feature--missing,.wq-missing-note { color:#b33838!important; }
.wq-feature--missing del,.wq-missing-note del { text-decoration-color:#b33838; text-decoration-thickness:2px; }
.wq-feature--review { color:#795921; }
.wq .wq-missing-note { font-size:.76rem; }
.wq-summary-group { border-top:1px solid var(--line); padding:18px 0 6px; }
.wq-summary-group h3 { font-size:1rem; margin:0 0 12px; }
.wq-summary-group dl { margin:0; font-size:.76rem; }
.wq-summary-group dl>div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:12px; margin:9px 0; }
.wq-summary-group dt { color:var(--muted); }
.wq-summary-group dd { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
@media (max-width:480px) { .wq-package-header { padding:15px 13px; gap:4px 7px; } .wq-result { padding:18px; } }
.wq .wq-result--compact { padding:16px; margin:15px 0; }
.wq-result--compact .wq-package-picker { margin:12px 0; }
.wq-result--compact .wq-package-picker button { min-height:70px; padding:8px 4px; }
.wq-result--compact .wq-fine,.wq-result--compact .wq-missing-note { margin:8px 0; }
.wq-result--compact .wq-details { margin-top:8px; padding:10px 0 0; }

/* Theme the interface, not the customer's style/color reference samples. */
[data-theme="dark"] .wq-package { border-color:rgba(255,255,255,.07); }
[data-theme="dark"] .wq-progress { background:#30343b; }
[data-theme="dark"] .wq-option:hover { border-color:#7d5555; }
[data-theme="dark"] .wq-option.is-selected,
[data-theme="dark"] .wq-package-picker button.is-selected { background:#332527; }
[data-theme="dark"] .wq-icon { background:#25292f; color:#e6aaaa; }
[data-theme="dark"] .wq-check { color:var(--muted); border-color:#626975; }
[data-theme="dark"] .is-selected .wq-check { color:#281616; border-color:#f26d6d; }
[data-theme="dark"] .wq-input-label input,
[data-theme="dark"] .wq-input-label textarea { background:#1b1e22; border-color:#454b55; }
[data-theme="dark"] .wq-input-label input:focus,
[data-theme="dark"] .wq-input-label textarea:focus { outline-color:#f59c9c; }
.wq-input-label :is(input,textarea)::placeholder { color:var(--muted); opacity:1; }
[data-theme="dark"] .wq-note { background:#242025; }
[data-theme="dark"] .wq-package-picker button { border-color:#454b55; }
[data-theme="dark"] .wq-package-picker button.is-selected { border-color:#f26d6d; }
[data-theme="dark"] .wq-package-header .wq-package-toggle { color:var(--muted); }
[data-theme="dark"] .wq-feature--optional { color:#8bdfb0; }
[data-theme="dark"] .wq-feature--missing,
[data-theme="dark"] .wq-missing-note { color:#ff9393!important; }
[data-theme="dark"] .wq-feature--missing del,
[data-theme="dark"] .wq-missing-note del { text-decoration-color:#ff9393; }
[data-theme="dark"] .wq-feature--review { color:#e5c17c; }
[data-theme="dark"] .wq-eyebrow,
[data-theme="dark"] .wq-how li::before,
[data-theme="dark"] .wq-result li::before { color:#e6aaaa; }
[data-theme="dark"] .wq-moodboard-tags span { background:#25292f; }