@layer properties,theme,base;@layer components{.n8pC8W_root{gap:calc(var(--spacing) * 6);flex-direction:column;display:flex}.n8pC8W_srOnly{width:1px;height:1px;margin:calc(var(--spacing) * -.25);clip-path:inset(50%);white-space:nowrap;border-width:0;padding:0;position:absolute;overflow:hidden}.n8pC8W_target{width:100%;height:calc(var(--spacing) * 48);border-radius:var(--radius-xl);justify-content:center;align-items:center;display:flex}.n8pC8W_targetHex{font-size:var(--font-size-lg);line-height:var(--line-height-lg);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-normal)}.n8pC8W_result{text-align:center}.n8pC8W_verdict{font-size:var(--font-size-lg);line-height:var(--line-height-lg);font-weight:var(--font-weight-bold)}.n8pC8W_comparison{gap:calc(var(--spacing) * 4);margin-top:calc(var(--spacing) * 4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.n8pC8W_comparisonItem{gap:calc(var(--spacing) * 2);flex-direction:column;display:flex}.n8pC8W_comparisonLabel{color:var(--color-fg-mute);text-align:center;font-size:var(--font-size-sm);line-height:var(--line-height-sm)}.n8pC8W_swatch{height:calc(var(--spacing) * 24);border-radius:var(--radius-xl);justify-content:center;align-items:center;display:flex}.n8pC8W_swatchHex{font-size:var(--font-size-sm);line-height:var(--line-height-sm);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-normal)}.n8pC8W_options{gap:calc(var(--spacing) * 4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.n8pC8W_option{height:calc(var(--spacing) * 14);border-style:solid;border-width:1px;border-color:var(--color-border-base);border-radius:var(--radius-xl);background-color:var(--color-bg-base);font-family:var(--font-family-mono);font-size:var(--font-size-sm);line-height:var(--line-height-sm);letter-spacing:var(--letter-spacing-normal);transition:all var(--duration-fast) var(--easing-in-out);justify-content:center;align-items:center;display:flex;position:relative}.n8pC8W_selectable{cursor:pointer}@media (hover:hover){.n8pC8W_selectable:hover{background-color:var(--color-bg-mute)}}.n8pC8W_selected{outline:2px solid var(--color-primary-border)}.n8pC8W_correct{outline:2px solid var(--color-border-success)}.n8pC8W_wrong{outline:2px solid var(--color-border-error)}.n8pC8W_badge{top:var(--spacing);right:var(--spacing);position:absolute}}@layer utilities;
@layer properties,theme,base;@layer components{.c0tsfa_root{gap:calc(var(--spacing) * 6);flex-direction:column;display:flex}.c0tsfa_srOnly{width:1px;height:1px;margin:calc(var(--spacing) * -.25);clip-path:inset(50%);white-space:nowrap;border-width:0;padding:0;position:absolute;overflow:hidden}.c0tsfa_question{text-align:center}.c0tsfa_targetHex{font-family:var(--font-family-mono);font-size:var(--font-size-3xl);line-height:var(--line-height-3xl);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-normal)}.c0tsfa_verdict{margin-top:calc(var(--spacing) * 2);font-size:var(--font-size-lg);line-height:var(--line-height-lg);font-weight:var(--font-weight-bold)}.c0tsfa_options{gap:calc(var(--spacing) * 4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.c0tsfa_option{height:calc(var(--spacing) * 28);border-radius:var(--radius-xl);transition:all var(--duration-fast) var(--easing-in-out);justify-content:center;align-items:center;display:flex;position:relative}.c0tsfa_selectable{cursor:pointer}@media (hover:hover){.c0tsfa_selectable:hover{opacity:.8}}.c0tsfa_selected{outline:4px solid var(--color-primary-border)}.c0tsfa_correct{outline:4px solid var(--color-border-success)}.c0tsfa_wrong{outline:4px solid var(--color-border-error)}.c0tsfa_optionHex{font-size:var(--font-size-sm);line-height:var(--line-height-sm);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-normal)}.c0tsfa_badge{top:calc(var(--spacing) * 2);right:calc(var(--spacing) * 2);position:absolute}}@layer utilities;
@layer properties,theme,base;@layer components{.bTqawq_root{padding:calc(var(--spacing) * 5);border-radius:var(--radius-xl);background-color:var(--color-bg-raised)}@media (min-width:40rem){.bTqawq_root{padding:calc(var(--spacing) * 6)}}}@layer utilities;