x-quiz{display:contents}@scope (x-quiz) to (:scope :is(x-base,x-footer,x-nav,x-quiz)>*){:scope{display:block}.quiz{max-width:40rem;margin-inline:auto}.quiz-head{margin-bottom:var(--space-6)}.quiz-step{margin:0 0 var(--space-3);font-size:var(--text-sm);font-weight:var(--font-bold);color:var(--color-text-tertiary);letter-spacing:var(--tracking-wide);text-transform:uppercase}.quiz-noscript{padding:var(--space-4);border:var(--border);border-radius:var(--radius);color:var(--color-text-secondary)}.q{margin-bottom:var(--space-8)}.quiz.ready .q{margin-bottom:0}.q[hidden]{display:none}.q legend{width:100%;margin-bottom:var(--space-5)}.q h2{font-size:var(--text-3xl);margin:0;outline:none}.answers{display:grid;gap:var(--space-3)}.answer{display:flex;align-items:center;gap:var(--space-4);min-height:64px;padding:var(--space-4) var(--space-5);border:var(--border-strong);border-radius:var(--radius);background:var(--color-bg-raised);font-size:var(--text-lg);line-height:1.3;cursor:pointer;transition:border-color var(--duration-fast) var(--ease),background var(--duration-fast) var(--ease),transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease)}.answer:hover{border-color:var(--color-text-tertiary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.answer:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-subtle)}.answer:has(input:focus-visible){outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.answer input:focus-visible{outline:none}.quiz-nav{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-6)}.quiz-nav .back[hidden]{visibility:hidden;display:inline-flex}.q.in-right{animation:quiz-in-right var(--duration-slow) var(--ease) both}.q.in-left{animation:quiz-in-left var(--duration-slow) var(--ease) both}.q.out-left{animation:quiz-out-left var(--duration) var(--ease-in-out) both}.q.out-right{animation:quiz-out-right var(--duration) var(--ease-in-out) both}@keyframes quiz-in-right{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}@keyframes quiz-in-left{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}@keyframes quiz-out-left{to{opacity:0;transform:translateX(-24px)}}@keyframes quiz-out-right{to{opacity:0;transform:translateX(24px)}}.result[hidden]{display:none}.result>*{animation:result-in var(--duration-slow) var(--ease) both}.result>:nth-child(2){animation-delay:80ms}.result>:nth-child(3){animation-delay:160ms}.result>:nth-child(4){animation-delay:240ms}.result>:nth-child(n+5){animation-delay:360ms}@keyframes result-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.result-name{font-size:var(--text-display);line-height:var(--leading-tight);outline:none;margin-bottom:var(--space-4)}.result-desc{font-size:var(--text-lg);color:var(--color-text-secondary);max-width:56ch}.result-chips{list-style:none;padding:0;margin:var(--space-5) 0 var(--space-7);display:flex;flex-wrap:wrap;gap:var(--space-2)}.result-chips li{margin:0;padding:var(--space-1) var(--space-3);border:var(--border-strong);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-text-secondary)}.result h3{font-size:var(--text-xl);margin-top:var(--space-7);padding-top:var(--space-5);border-top:var(--border)}.result-look{font-size:var(--text-base)}.result-notes{padding-left:1.2em;color:var(--color-text-secondary)}.result-notes li::marker,.result-why li::marker{color:var(--color-accent)}.result-notes:empty{display:none}.result-why{padding-left:1.2em}.result-why li{margin-bottom:var(--space-3)}.result-actions{margin-top:var(--space-6)}.share-row{display:flex;flex-wrap:wrap;gap:var(--space-3)}.share-status{margin:var(--space-3) 0 0;min-height:1.5em;font-size:var(--text-sm);color:var(--color-text-secondary)}.share-url{display:block;margin-top:var(--space-2);padding:var(--space-3);border:var(--border);border-radius:var(--radius-sm);font-size:var(--text-sm);word-break:break-all;user-select:all}.share-url[hidden]{display:none}.share-preview{margin-top:var(--space-4);display:grid;gap:var(--space-3);justify-items:start}.share-preview[hidden]{display:none}.share-img{width:min(100%,540px);height:auto;border:var(--border);border-radius:var(--radius);animation:result-in var(--duration-slow) var(--ease) both}.result-restart{margin-top:var(--space-7)}}