.demo-form{display:flex;flex-direction:column;gap:var(--space-6);width:100%;max-width:600px;margin:0 auto}.form-message{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:var(--font-medium);line-height:var(--leading-snug);animation:slide-in var(--transition-normal)}.form-message--error{background-color:var(--error-bg);color:var(--error);border:2px solid var(--error-border)}.form-message--success{background-color:var(--success-bg);color:var(--success);border:2px solid var(--success-border)}.form-message svg{flex-shrink:0}@keyframes slide-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.demo-form{gap:var(--space-4);padding:var(--space-4)}.form-message{padding:var(--space-3);font-size:var(--text-sm);gap:var(--space-2)}}@media (prefers-reduced-motion: reduce){.form-message{animation:none}}.textbox{position:relative;width:100%;margin-bottom:var(--space-4)}.textbox--area{min-height:120px}.textbox__label{position:absolute;left:var(--space-4);top:var(--space-4);color:var(--text-secondary);font-size:var(--text-base);font-weight:var(--font-medium);pointer-events:none;transition:all var(--transition-normal);z-index:1;background:transparent;padding:0 var(--space-1)}.textbox__label--floating{top:calc(-1 * var(--space-2));left:var(--space-3);font-size:var(--text-sm);color:var(--theme);background:var(--background)}.textbox--focused .textbox__label{color:var(--theme)}.textbox__label--required:after{content:" *";color:var(--error)}.textbox__field{position:relative;display:flex;align-items:center}.textbox__input{width:100%;background-color:var(--background);border:2px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);font-size:var(--text-base);font-weight:var(--font-normal);font-family:system-ui,sans-serif;color:var(--text);outline:none;box-shadow:var(--shadow-sm);transition:border-color var(--transition-normal),box-shadow var(--transition-normal),background-color var(--transition-fast)}.textbox__input:hover:not(:disabled){border-color:var(--border-hover)}.textbox__input:focus{border-color:var(--theme);box-shadow:var(--shadow-md),var(--glow-sm);background-color:var(--background-elevated)}.textbox__input::placeholder{color:var(--text-tertiary);font-weight:var(--font-normal);opacity:1}.textbox__input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--surface)}textarea.textbox__input{resize:vertical;min-height:100px;line-height:var(--leading-relaxed)}.textbox--area textarea.textbox__input{resize:none}.textbox__input--with-icon{padding-left:var(--space-12)}.textbox__input--with-clear{padding-right:var(--space-12)}.textbox--error .textbox__input{border-color:var(--error-border);background-color:var(--error-bg)}.textbox--error .textbox__input:focus{border-color:var(--error);box-shadow:var(--shadow-md),0 0 0 3px var(--error-bg)}.textbox--error .textbox__label{color:var(--error)}.textbox--success .textbox__input{border-color:var(--success-border);background-color:var(--success-bg)}.textbox--success .textbox__input:focus{border-color:var(--success);box-shadow:var(--shadow-md),0 0 0 3px var(--success-bg)}.textbox--success .textbox__label{color:var(--success)}.textbox--warning .textbox__input{border-color:var(--warning-border);background-color:var(--warning-bg)}.textbox--warning .textbox__input:focus{border-color:var(--warning);box-shadow:var(--shadow-md),0 0 0 3px var(--warning-bg)}.textbox--warning .textbox__label{color:var(--warning)}.textbox__icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);pointer-events:none;z-index:1}.textbox__icon img{width:20px;height:20px;object-fit:contain;opacity:.7}.textbox--focused .textbox__icon{color:var(--theme)}.textbox--focused .textbox__icon img{opacity:1}.textbox__clear{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--radius-full);color:var(--text-tertiary);cursor:pointer;transition:all var(--transition-fast);z-index:2}.textbox__clear:hover{color:var(--text);background-color:var(--surface-hover)}.textbox__clear:active{transform:translateY(-50%) scale(.9)}.textbox__clear:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}.textbox__clear svg{width:16px;height:16px}.textbox__state-icon{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;pointer-events:none;z-index:1}.textbox--error .textbox__state-icon{color:var(--error)}.textbox--success .textbox__state-icon{color:var(--success)}.textbox--warning .textbox__state-icon{color:var(--warning)}.textbox__state-icon svg{width:100%;height:100%}.textbox__input--with-clear~.textbox__state-icon{right:var(--space-12)}.textbox__footer{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2);margin-top:var(--space-2);font-size:var(--text-sm)}.textbox__message{flex:1;display:flex;align-items:center;gap:var(--space-1);line-height:var(--leading-snug)}.textbox__message--error{color:var(--error)}.textbox__message--success{color:var(--success)}.textbox__message--warning{color:var(--warning)}.textbox__message--default{color:var(--text-secondary)}.textbox__char-count{flex-shrink:0;color:var(--text-tertiary);font-size:var(--text-xs);font-weight:var(--font-medium);padding-top:var(--space-1)}@media (max-width: 768px){.textbox__input{padding:var(--space-3);font-size:var(--text-sm)}.textbox__label{font-size:var(--text-sm)}.textbox__label--floating{font-size:var(--text-xs)}.textbox__input--with-icon{padding-left:var(--space-10)}.textbox__input--with-clear{padding-right:var(--space-10)}.textbox__icon{left:var(--space-3)}.textbox__icon img{width:18px;height:18px}.textbox__clear,.textbox__state-icon{right:var(--space-3)}}@media (prefers-reduced-motion: reduce){.textbox__input,.textbox__label,.textbox__clear{transition:none}}@media (prefers-contrast: high){.textbox__input{border-width:3px}.textbox__input:focus{outline:3px solid var(--theme);outline-offset:2px}}html{background:linear-gradient(160deg,#0b88b8,#f97316);background-attachment:fixed}main[data-astro-cid-prwxh6m4]{display:flex;max-width:600px;margin:135px auto}