:root{--color-bg:var(--HL-LIGHT);--color-surface:#fff8ff;--color-border:#e8d5e8;--color-text:var(--HL-DARK);--color-text-secondary:#5a3d5c}[data-theme=dark].svelte-yzhnh5{--color-bg:var(--HL-DARK);--color-surface:#2d1e31;--color-border:#453d48;--color-text:var(--HL-LIGHT);--color-text-secondary:#b8a0ba}.test-container.svelte-yzhnh5{background-color:var(--color-bg);min-height:100vh;color:var(--color-text);font-family:var(--HL-Montserrat);transition:background-color .3s,color .3s}.test-header.svelte-yzhnh5{z-index:100;background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:1.5rem 2rem;position:sticky;top:0;box-shadow:0 2px 8px #00000014}.header-content.svelte-yzhnh5{justify-content:space-between;align-items:center;gap:2rem;max-width:1440px;margin:0 auto;display:flex}.header-content.svelte-yzhnh5 h1:where(.svelte-yzhnh5){flex:1;min-width:0;margin:0}.header-controls.svelte-yzhnh5{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.75rem;display:flex}.btn-control.svelte-yzhnh5{border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text);cursor:pointer;white-space:nowrap;border-radius:6px;padding:.625rem 1rem;font-size:14px;font-weight:600;transition:all .2s}.btn-control.svelte-yzhnh5:hover,.component-selector.svelte-yzhnh5:hover{background:var(--color-border);transform:translateY(-1px)}.component-selector.svelte-yzhnh5{border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text);cursor:pointer;border-radius:6px;padding:.625rem 1rem;font-size:14px;font-weight:600;transition:all .2s}.component-selector.svelte-yzhnh5:focus{border-color:var(--HL-RED);outline:none}.controls-panel.svelte-yzhnh5{border-bottom:1px solid var(--color-border);background:var(--color-surface);max-width:1440px;margin:0 auto;padding:2rem}.controls-inner.svelte-yzhnh5{background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;padding:1.5rem}.controls-inner.svelte-yzhnh5 fieldset:where(.svelte-yzhnh5){border:none;flex-wrap:nowrap;align-items:center;gap:1.5rem;margin:0;padding:0;display:flex}.controls-inner.svelte-yzhnh5 legend:where(.svelte-yzhnh5){margin-bottom:1rem}.control-group.svelte-yzhnh5{align-items:center;gap:1rem;display:flex}.control-group.svelte-yzhnh5:last-child{margin-bottom:0}.group-label.svelte-yzhnh5{text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);margin-right:var(--spacing-sm);font-size:13px;font-weight:600;display:inline-block}.radio-group.svelte-yzhnh5{flex-wrap:nowrap;align-items:center;gap:.75rem;display:flex}.radio-label.svelte-yzhnh5{cursor:pointer;color:var(--color-text);-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;font-size:14px;display:flex}.radio-label.svelte-yzhnh5:hover span:where(.svelte-yzhnh5){text-decoration:underline}.radio-label.svelte-yzhnh5 input[type=radio]:where(.svelte-yzhnh5){cursor:pointer;accent-color:var(--HL-RED)}.test-content.svelte-yzhnh5{max-width:1440px;margin:0 auto;padding:3rem 2rem}.test-section.svelte-yzhnh5{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:2.5rem;transition:all .3s}.test-section.svelte-yzhnh5:hover{border-color:var(--HL-RED);box-shadow:0 4px 12px #c8202d1a}.test-section.svelte-yzhnh5 h2:where(.svelte-yzhnh5){color:var(--color-text);flex-wrap:wrap;align-items:center;gap:1rem;margin:0 0 2rem;font-size:18px;font-weight:600;display:flex}.variation-label.svelte-yzhnh5{background:var(--HL-RED);color:#fff;letter-spacing:.5px;border-radius:4px;padding:.375rem .75rem;font-size:14px;font-weight:700}.variation-grid.svelte-yzhnh5{flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem;min-height:120px;padding:2rem 0 0;display:flex}@media (width<=768px){.header-content.svelte-yzhnh5{flex-direction:column;align-items:flex-start;gap:1rem}.header-controls.svelte-yzhnh5{justify-content:flex-start;width:100%}.test-content.svelte-yzhnh5{padding:2rem 1rem}.test-section.svelte-yzhnh5{padding:1.5rem}.test-section.svelte-yzhnh5 h2:where(.svelte-yzhnh5){font-size:16px}.variation-label.svelte-yzhnh5{width:100%}.controls-inner.svelte-yzhnh5 fieldset:where(.svelte-yzhnh5){gap:var(--spacing-md);flex-direction:column;display:flex}.control-group.svelte-yzhnh5{align-items:flex-start;gap:var(--spacing-sm)}}