*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:24px 16px;background:var(--color-canvas);color:var(--color-text);font:16px/1.55 system-ui,sans-serif}.card{max-width:560px;margin:0 auto;padding:24px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface)}h1{margin:0 0 16px;font-size:24px}h2{margin:28px 0 12px;font-size:18px}:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px}.theme-switch{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 20px;padding:12px 14px;border:1px solid var(--color-border);border-radius:8px}.theme-switch legend{padding:0 4px;font-weight:600}.theme-switch label{display:inline-flex;align-items:center;gap:6px;min-height:24px}.theme-switch input{width:20px;height:20px;margin:0;accent-color:var(--color-primary)}.field{display:flex;flex-direction:column;gap:6px}.field label{font-weight:600}.field__hint{margin:0;color:var(--color-text-muted);font-size:14px}.field input{min-height:44px;padding:8px 12px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);color:var(--color-text);font:inherit}.field input[aria-invalid=true]{border:2px solid var(--color-danger-text)}.field__error{display:flex;align-items:center;gap:6px;margin:0;color:var(--color-danger-text);font-size:14px;font-weight:600}.actions{display:flex;gap:10px;margin-top:18px}.button{min-height:44px;padding:8px 18px;border-radius:8px;font:600 15px system-ui,sans-serif;cursor:pointer}.button--primary{border:1px solid var(--color-primary);background:var(--color-primary);color:var(--color-on-primary)}.button--primary:hover{border-color:var(--color-primary-hover);background:var(--color-primary-hover)}.button--secondary{border:1px solid var(--color-border);background:transparent;color:var(--color-text)}.message{display:flex;align-items:flex-start;gap:10px;margin-top:12px;border-radius:8px}.message:not(:empty){padding:10px 12px;border:1px solid currentColor}.message p{margin:0;color:var(--color-text)}.message--success{background:var(--color-success-surface);color:var(--color-success-text)}.message--warning{background:var(--color-warning-surface);color:var(--color-warning-text)}.message--danger{background:var(--color-danger-surface);color:var(--color-danger-text)}.message--info{background:var(--color-info-surface);color:var(--color-info-text)}.message:empty{margin:0;background:none}.states{display:flex;flex-direction:column}.icon{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}@media(forced-colors:active){.button--primary{border-color:ButtonText}}