/* Scoped additions: uses the existing site's typography, colors and surfaces. */
#appearance{scroll-margin-top:84px}
#appearance .sec-head h2{font-size:clamp(26px,3.2vw,40px);line-height:1.25}
.appearance-panel{display:grid;grid-template-columns:minmax(0,1fr) 306px;border:1px solid var(--line-2);border-radius:var(--r2,20px);overflow:hidden}
.appearance-preview{min-width:0;display:flex;flex-direction:column;background:var(--bg-2)}
.appearance-topline,.appearance-preview-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;color:var(--muted);font-size:12px}
.appearance-topline{border-bottom:1px solid var(--line)}
.appearance-indicator{display:flex;align-items:center;gap:7px;white-space:nowrap}
.appearance-indicator:before{content:"";width:6px;height:6px;background:#a78bfa;border-radius:50%}
.appearance-stage{position:relative;flex:1;min-height:330px;display:flex;flex-direction:column;justify-content:center;padding:40px 32px;background:radial-gradient(ellipse at 70% 30%,#7c5cff12,transparent 70%),linear-gradient(135deg,#0b1020,#111325 60%,#0a1820);color:#f3f5fb;overflow:hidden}
.appearance-scene-label{position:absolute;top:24px;left:32px;letter-spacing:2px;font-size:9px;color:#9da5bc}
.appearance-context{font-size:14px;color:#acb4cc;margin-bottom:22px}
.appearance-bubble{--bubble-bg:#6b39c4;--bubble-opacity:1;--text-color:#fff;--effect-color:#c4b5fd;--text-seconds:4s;position:relative;isolation:isolate;overflow:hidden;border-radius:18px;min-height:82px;width:100%;max-width:560px;border:1px solid #c4b5fd30;box-shadow:0 14px 40px #0002}
.appearance-surface,.appearance-water{position:absolute;inset:0;z-index:-1;pointer-events:none}
.appearance-surface{background:var(--bubble-bg);opacity:var(--bubble-opacity)}
.appearance-water{background:url('/assets/water-preview/poster.png') center/cover;opacity:calc(.62 * var(--bubble-opacity))}
.appearance-water canvas{display:block;width:100%;height:100%}
.appearance-message{display:flex;align-items:center;gap:14px;padding:12px 22px 12px 16px;min-height:80px;box-sizing:border-box}
.appearance-avatar{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#7c5cff35;color:#ded7ff;font-size:14px;font-weight:700;border:1px solid #b9a6ff35}
.appearance-copy{min-width:0}.appearance-name{font-size:12px;color:#f0ebfa;display:flex;align-items:center;gap:10px;margin-bottom:4px}
.appearance-name span{font-size:9px;background:#ddd6f0;color:#302442;border-radius:4px;padding:1px 5px}
.appearance-text{font-size:clamp(16px,1.6vw,19px);font-weight:600;line-height:1.65;color:var(--text-color);overflow-wrap:anywhere;margin:0}
.appearance-bubble[data-effect="sheen"] .appearance-text{color:transparent;background-image:linear-gradient(110deg,var(--text-color) 0%,var(--text-color) 38%,var(--effect-color) 50%,var(--text-color) 62%,var(--text-color) 100%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;animation:appearance-sheen calc(var(--text-seconds) * 1.25) linear infinite}
.appearance-bubble[data-effect="cycle"] .appearance-text{animation:appearance-cycle var(--text-seconds) ease-in-out infinite}
@keyframes appearance-sheen{0%{background-position:125% 0}80%,100%{background-position:-125% 0}}
@keyframes appearance-cycle{0%,100%{color:var(--text-color)}50%{color:var(--effect-color)}}
#appearance[data-motion="paused"] .appearance-text{animation-play-state:paused}
.appearance-stage-note{display:flex;gap:12px;align-items:center;margin-top:22px;color:#acb4cc;font-size:11px}
.appearance-stage-note span:nth-child(2){color:#bcaaff}
.appearance-preview-footer{border-top:1px solid var(--line);min-height:72px;font-size:11px;line-height:1.6}
.appearance-controls{padding:25px 24px;background:var(--glass);font-size:12px}
.site-pro-text .relative{position:relative}.site-pro-text .inline-block{display:inline-block}.site-pro-text .max-w-full{max-width:100%}.site-pro-text [style*="white-space: nowrap"]{white-space:normal!important}
.appearance-controls fieldset{border:0;padding:0;margin:0 0 23px;min-width:0}
.appearance-controls fieldset+fieldset{padding-top:20px;border-top:1px solid var(--line)}
.appearance-controls legend{font-size:14px;font-weight:600;margin-bottom:16px;color:var(--ink);padding:0}
.appearance-controls legend span{color:var(--faint);font-size:10px;margin-right:8px;font-family:var(--mono,monospace)}
.appearance-field-row,.appearance-range-label,.appearance-select-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;color:var(--muted)}
.appearance-range-label{margin-top:14px;margin-bottom:6px}.appearance-range-label output{font-variant-numeric:tabular-nums;color:var(--ink)}
.appearance-controls input[type="color"]{appearance:none;-webkit-appearance:none;width:36px;height:28px;padding:2px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:7px;cursor:pointer}
.appearance-controls input[type="color"]::-webkit-color-swatch-wrapper{padding:0}.appearance-controls input[type="color"]::-webkit-color-swatch{border:none;border-radius:4px}
.appearance-controls input[type="range"]{display:block;width:100%;height:24px;margin:0;accent-color:#9275ff;cursor:pointer}
.appearance-toggle{display:flex;gap:8px;align-items:center;color:var(--muted);margin-top:12px;min-height:30px;cursor:pointer}.appearance-toggle input{accent-color:#9275ff;width:15px;height:15px}
.appearance-controls select{font:inherit;color:var(--ink);background:var(--bg-2);border:1px solid var(--line-2);border-radius:7px;padding:8px 10px;max-width:65%}
.appearance-colors{display:grid;grid-template-columns:1fr 1fr;gap:18px}.appearance-colors label{display:flex;justify-content:space-between;align-items:center;gap:5px;color:var(--muted);font-size:11px}
.appearance-small-button{font:inherit;font-size:11px;color:var(--muted);border:1px solid var(--line-2);border-radius:8px;background:var(--glass);padding:8px 12px;cursor:pointer;white-space:nowrap;min-height:36px}
.appearance-small-button:hover{color:var(--ink);border-color:var(--accent)}
.appearance-reset{width:100%;margin-top:0}.appearance-footnote{color:var(--muted);font-size:11px;line-height:1.8;margin:17px 0 0;text-align:center}
.appearance-controls :focus-visible,.appearance-small-button:focus-visible,.quiz-actions button:focus-visible{outline:2px solid #a78bfa;outline-offset:4px}
.appearance-controls :disabled{opacity:.45;cursor:not-allowed}
.companion-quiz{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;margin-top:38px;padding-top:38px;border-top:1px solid var(--line)}
.quiz-kicker{font-size:11px;color:var(--accent);font-weight:600;letter-spacing:.4px}
.quiz-intro h3{font-size:clamp(21px,2.1vw,28px);line-height:1.4;margin:10px 0 14px;letter-spacing:-.5px}
.quiz-intro>p{color:var(--muted);font-size:13px;line-height:1.85}
.quiz-steps{list-style:none;padding:0;margin:22px 0;display:grid;gap:12px;font-size:12px;color:var(--ink)}
.quiz-steps li{display:flex;align-items:center;gap:12px}.quiz-steps span{font:10px var(--mono,monospace);color:var(--faint)}
.quiz-intro .quiz-note{font-size:11px;color:var(--muted);line-height:1.75;max-width:355px}
.quiz-demo{background:var(--glass);border:1px solid var(--line-2);border-radius:var(--r2,20px);padding:20px 24px;min-width:0}
.quiz-demo-top{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.quiz-demo h4{font-size:16px;font-weight:600;line-height:1.5;margin:19px 0 16px}
.quiz-arena{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;padding-bottom:50px;isolation:isolate}
.quiz-zone{border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2);height:124px;padding:13px 14px;transition:opacity .3s,transform .3s,border-color .3s;color:var(--muted);font-size:11px}
.quiz-zone[data-zone="A"]{background:linear-gradient(135deg,#7c5cff18,transparent),var(--bg-2)}
.quiz-zone[data-zone="B"]{background:linear-gradient(135deg,#38bdf811,transparent),var(--bg-2)}
.quiz-cats{display:flex;justify-content:flex-end;margin-top:5px}
.quiz-cats img,.quiz-player img{image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 5px 3px #0002)}
.quiz-cats img{width:54px;height:54px;opacity:.7}.quiz-player{position:absolute;left:calc(50% - 32px);top:94px;display:grid;justify-items:center;transition:left .4s ease,top .4s ease,opacity .35s,transform .5s;z-index:2}
.quiz-player img{width:64px;height:64px}.quiz-player span{background:var(--bg-2);color:var(--ink);font-size:9px;border:1px solid var(--line-2);border-radius:5px;padding:1px 6px}
.quiz-arena[data-choice="A"] .quiz-player{left:calc(22% - 32px);top:42px}.quiz-arena[data-choice="B"] .quiz-player{left:calc(74% - 32px);top:42px}
.quiz-arena[data-revealed="true"] [data-zone="A"]{border-color:#7ecca5;background:#35b17a12}.quiz-arena[data-revealed="true"] [data-zone="B"]{opacity:.28;transform:translateY(14px)}
.quiz-arena[data-revealed="true"][data-choice="B"] .quiz-player{opacity:.2;transform:translateY(30px)}
.quiz-actions{display:flex;flex-wrap:wrap;gap:8px}.quiz-actions button{font:inherit;font-size:11px;min-height:40px;padding:9px 12px;border:1px solid var(--line-2);border-radius:8px;color:var(--ink);background:var(--bg-2);cursor:pointer}
.quiz-actions button[aria-pressed="true"]{border-color:#a78bfa;background:#7c5cff22}.quiz-actions button[data-quiz-reveal]{margin-left:auto;color:#e8e1ff;background:#7c5cff44;border-color:#9275ff66}.quiz-actions button:disabled{opacity:.4;cursor:not-allowed}
.quiz-feedback{font-size:11px;color:var(--muted);line-height:1.7;min-height:38px;margin:13px 0 5px}
@media(max-width:850px){.appearance-panel{grid-template-columns:minmax(0,1fr) 280px}.appearance-stage{padding:40px 24px}.appearance-message{padding:20px;gap:10px}.appearance-avatar{display:none}.companion-quiz{gap:24px;grid-template-columns:1fr 1.2fr}.quiz-demo{padding:18px}.quiz-actions button[data-quiz-reveal]{margin-left:0}}
@media(max-width:680px){.appearance-panel{grid-template-columns:1fr}.appearance-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:22px}.appearance-controls fieldset{margin:0}.appearance-controls fieldset+fieldset{padding:0;border:0}.appearance-reset{grid-column:1/-1}.appearance-stage{min-height:295px;padding:54px 22px 28px}.appearance-scene-label{left:22px}.appearance-colors{grid-template-columns:1fr;gap:8px}.appearance-topline,.appearance-preview-footer{padding:15px 20px}.appearance-preview-footer{gap:10px}.appearance-footnote{text-align:left}.companion-quiz{grid-template-columns:1fr;gap:20px;margin-top:28px;padding-top:28px}.quiz-intro .quiz-note{max-width:none}.quiz-steps{margin:16px 0}.quiz-demo h4{font-size:15px}.quiz-actions button{flex:1;padding:8px}.quiz-actions button[data-quiz-reveal]{flex-basis:100%}.quiz-demo{padding:20px}.quiz-feedback{min-height:38px}}
@media(max-width:380px){.appearance-controls{grid-template-columns:1fr}.appearance-controls fieldset+fieldset{padding-top:16px;border-top:1px solid var(--line)}.appearance-colors{grid-template-columns:1fr 1fr}.appearance-text{font-size:16px}}
@media(prefers-reduced-motion:reduce){#appearance .appearance-text{animation:none!important;background:none!important;color:var(--text-color)!important}.companion-quiz *{transition:none!important}}
/* The quiz is shown in the product's full arena, with its stage lighting and decks. */
#companion-quiz{scroll-margin-top:90px;display:block}
#quiz-stage{scroll-margin-top:130px}
.quiz-intro{margin-bottom:24px}.quiz-intro>p{max-width:720px}.quiz-steps{display:flex;flex-wrap:wrap;gap:18px 32px}.quiz-intro .quiz-note{max-width:none}
.quiz-demo{position:relative;padding:0;overflow:hidden}.quiz-demo-top{padding:16px 24px;border-bottom:1px solid var(--line)}
.quiz-demo h4{position:absolute;z-index:3;top:69px;left:24px;right:24px;margin:0;text-align:center;color:#edf8ff;font-size:19px;text-shadow:0 2px 6px #000;pointer-events:none}
.quiz-arena.quiz-scene-stage{display:block;height:auto;aspect-ratio:16/9;padding:0;background:#060d1a;overflow:hidden;position:relative;isolation:isolate}
.quiz-world,.quiz-scene-actors{position:absolute;inset:0;pointer-events:none}.quiz-world canvas{width:100%;height:100%;display:block}
.quiz-scene-loading{position:absolute;z-index:4;inset:45% 0 auto;text-align:center;color:#bcd6e6;font-size:13px}
.quiz-scene-cat{position:absolute;top:0;left:0;will-change:transform;filter:drop-shadow(0 3px 2px #00102290)}
.quiz-scene-cat img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.quiz-scene-cat span{position:absolute;bottom:82%;left:50%;transform:translateX(-50%);white-space:nowrap;color:#d9eaf3;background:#061322d9;border-radius:3px;font-size:8px;padding:1px 4px;line-height:1.5}
.quiz-scene-cat.is-you span{background:#f1db91;color:#2c2436;font-weight:700;font-size:10px}.quiz-scene-cat.is-you{z-index:5}
.quiz-stage-options{position:absolute;z-index:3;bottom:22px;left:23%;right:23%;display:flex;justify-content:space-between;color:#e9f8ff;font-size:13px;pointer-events:none}
.quiz-stage-options span{background:#061322e8;border:1px solid #52d9ff77;border-radius:6px;padding:6px 14px}.quiz-stage-options span+span{border-color:#ff719a88}
.quiz-demo .quiz-actions{padding:18px 24px 0}.quiz-demo .quiz-feedback{margin:12px 24px 4px;min-height:20px}.quiz-demo>[data-quiz-reset]{margin:8px 24px 20px}
@media(max-width:680px){.quiz-intro{margin-bottom:20px}.quiz-steps{display:grid;gap:10px}.quiz-demo-top{padding:14px 16px}.quiz-demo h4{top:67px;left:16px;right:16px;font-size:14px}.quiz-arena.quiz-scene-stage{aspect-ratio:4/5;min-height:360px}.quiz-stage-options{left:0;right:0;top:38%;bottom:14%;flex-direction:column;align-items:center;font-size:12px}.quiz-scene-cat span{font-size:7px}.quiz-demo .quiz-actions{padding:16px 16px 0}.quiz-demo .quiz-feedback{margin:12px 16px 4px}.quiz-demo>[data-quiz-reset]{margin:8px 16px 16px}}
@media(max-width:480px){.appearance-controls{grid-template-columns:1fr;gap:22px}.appearance-controls fieldset+fieldset{padding-top:18px;border-top:1px solid var(--line)}.appearance-colors{grid-template-columns:1fr 1fr}.appearance-select-label{white-space:nowrap}}
/* Keep the new showcases aligned with the homepage's centered presentation. */
.quiz-intro,.quiz-feedback{text-align:center}
.quiz-intro>p{margin-inline:auto}
.quiz-steps,.quiz-steps li,.quiz-actions{justify-content:center}
.quiz-demo-top{justify-content:center;gap:24px}
.quiz-actions button[data-quiz-reveal]{margin-left:0}
.quiz-demo>[data-quiz-reset]{display:block;margin:12px auto 20px}
.appearance-stage{align-items:center;text-align:center}
.appearance-scene-label{left:0;right:0;text-align:center}
.appearance-message,.appearance-name,.appearance-stage-note{justify-content:center}
.appearance-copy{text-align:center}
.appearance-text .site-pro-text{text-align:center!important}
.appearance-topline,.appearance-preview-footer{justify-content:center;flex-wrap:wrap}
.appearance-controls legend{margin-inline:auto;text-align:center}
.appearance-footnote{text-align:center}
.quiz-demo h4{position:static;margin:0;padding:20px 24px;text-align:center;color:var(--ink);font-size:18px;text-shadow:none;background:var(--glass);pointer-events:auto}
@media(max-width:680px){.quiz-demo h4{padding:17px 20px;font-size:16px}.quiz-arena.quiz-scene-stage{aspect-ratio:4/5;min-height:360px}}