:root {
  

  
  --corn-primary: #8b5cf6;
  --corn-primary-hover: #a78bfa;
  --corn-primary-active: #7c3aed;
  --corn-secondary: #6366f1;
  --corn-secondary-hover: #818cf8;
  --corn-secondary-active: #4f46e5;

  
  --corn-success: #10b981;
  --corn-success-light: #d1fae5;
  --corn-warning: #f59e0b;
  --corn-warning-light: #fef3c7;
  --corn-danger: #ef4444;
  --corn-danger-light: #fee2e2;
  --corn-info: #3b82f6;
  --corn-info-light: #dbeafe;

  
  --corn-text-primary: #1a1a1a;
  --corn-text-secondary: #666666;
  --corn-text-tertiary: #999999;
  --corn-text-inverse: #ffffff;

  
  --corn-bg-primary: #ffffff;
  --corn-bg-secondary: #f9f9f9;
  --corn-bg-tertiary: #f0f0f0;

  
  --corn-border-light: #e5e5e5;
  --corn-border-primary: #d0d0d0;
  --corn-border-secondary: #a0a0a0;

  
  --corn-spacing-xs: 4px;
  --corn-spacing-sm: 8px;
  --corn-spacing-md: 16px;
  --corn-spacing-lg: 24px;
  --corn-spacing-xl: 32px;

  
  --corn-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --corn-font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New',
    monospace;

  --corn-font-size-xs: 11px;
  --corn-font-size-sm: 12px;
  --corn-font-size-base: 14px;
  --corn-font-size-lg: 16px;
  --corn-font-size-xl: 18px;

  --corn-font-weight-regular: 400;
  --corn-font-weight-medium: 500;
  --corn-font-weight-bold: 700;

  --corn-line-height: 1.4;

  
  --corn-radius-sm: 4px;
  --corn-radius-md: 6px;
  --corn-radius-lg: 8px;

  
  --corn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --corn-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --corn-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  
  --corn-transition-fast: 100ms ease-in-out;
  --corn-transition-base: 200ms ease-in-out;
  --corn-transition-slow: 300ms ease-in-out;

  
  
  --corn-bp-sm: 640px;
  --corn-bp-md: 960px;
  --corn-bp-lg: 1280px;

  
  
  --corn-focus-ring-width: 3px;
  --corn-focus-ring-color: rgba(139, 92, 246, 0.15);
  --corn-focus-ring-error-color: rgba(239, 68, 68, 0.15);
  --corn-focus-ring: 0 0 0 var(--corn-focus-ring-width) var(--corn-focus-ring-color);
  --corn-focus-ring-error: 0 0 0 var(--corn-focus-ring-width) var(--corn-focus-ring-error-color);

  --corn-backdrop: rgba(0, 0, 0, 0.5);
  --corn-shadow-color: rgba(0, 0, 0, 0.15);
}


@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --corn-focus-ring-color: color-mix(in srgb, var(--corn-primary) 15%, transparent);
    --corn-focus-ring-error-color: color-mix(in srgb, var(--corn-danger) 15%, transparent);
  }
}
[data-theme='dark'] {
  

  
  --corn-primary: #a78bfa;
  --corn-primary-hover: #c4b5fd;
  --corn-primary-active: #8b5cf6;
  --corn-secondary: #818cf8;
  --corn-secondary-hover: #a5b4fc;
  --corn-secondary-active: #6366f1;

  
  --corn-success: #34d399;
  --corn-success-light: #064e3b;
  --corn-warning: #fbbf24;
  --corn-warning-light: #78350f;
  --corn-danger: #f87171;
  --corn-danger-light: #7f1d1d;
  --corn-info: #60a5fa;
  --corn-info-light: #0c2340;

  
  --corn-text-primary: #ffffff;
  --corn-text-secondary: #e0e0e0;
  --corn-text-tertiary: #b0b0b0;
  --corn-text-inverse: #1a1a1a;

  
  --corn-bg-primary: #0f172a;
  --corn-bg-secondary: #1a2332;
  --corn-bg-tertiary: #2a3342;

  
  --corn-border-light: #3a4554;
  --corn-border-primary: #4a5568;
  --corn-border-secondary: #7a8a9a;

  
  --corn-backdrop: rgba(0, 0, 0, 0.7);
  --corn-shadow-color: rgba(0, 0, 0, 0.4);
}
.corn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--corn-spacing-xs);
  border: 1px solid transparent;
  border-radius: var(--corn-radius-sm);
  font-family: var(--corn-font-family);
  font-weight: var(--corn-font-weight-medium);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--corn-transition-fast),
    border-color var(--corn-transition-fast),
    color var(--corn-transition-fast),
    box-shadow var(--corn-transition-fast);
  white-space: nowrap;
  user-select: none;
}



.corn-button--sm {
  font-size: var(--corn-font-size-sm);
  padding: 4px var(--corn-spacing-sm);
}

.corn-button--md {
  font-size: var(--corn-font-size-base);
  padding: 6px var(--corn-spacing-md);
}

.corn-button--lg {
  font-size: var(--corn-font-size-lg);
  padding: 10px var(--corn-spacing-lg);
}



.corn-button--primary {
  background: var(--corn-primary);
  color: var(--corn-text-inverse);
}

.corn-button--primary:hover:not(:disabled) {
  background: var(--corn-primary-hover);
}

.corn-button--primary:active:not(:disabled) {
  background: var(--corn-primary-active);
}

.corn-button--secondary {
  background: var(--corn-secondary);
  color: var(--corn-text-inverse);
}

.corn-button--secondary:hover:not(:disabled) {
  background: var(--corn-secondary-hover);
}

.corn-button--secondary:active:not(:disabled) {
  background: var(--corn-secondary-active);
}

.corn-button--success {
  background: var(--corn-success);
  color: var(--corn-text-inverse);
}

.corn-button--success:hover:not(:disabled) {
  filter: brightness(1.1);
}

.corn-button--danger {
  background: var(--corn-danger);
  color: var(--corn-text-inverse);
}

.corn-button--danger:hover:not(:disabled) {
  filter: brightness(1.1);
}

.corn-button--warning {
  background: var(--corn-warning);
  color: var(--corn-text-inverse);
}

.corn-button--warning:hover:not(:disabled) {
  filter: brightness(1.1);
}

.corn-button--ghost {
  background: transparent;
  color: var(--corn-primary);
  border-color: var(--corn-primary);
}

.corn-button--ghost:hover:not(:disabled) {
  background: var(--corn-primary);
  color: var(--corn-text-inverse);
}



.corn-button:disabled,
.corn-button--loading {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.corn-button:focus-visible {
  outline: 2px solid var(--corn-primary);
  outline-offset: 2px;
}



.corn-button--loading::before {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: corn-spin 0.6s linear infinite;
  flex-shrink: 0;
}

@keyframes corn-spin {
  to { transform: rotate(360deg); }
}
.corn-stack {
  display: flex;
  gap: var(--corn-stack-gap, var(--corn-spacing-md));
  align-items: var(--corn-stack-align, stretch);
  justify-content: var(--corn-stack-justify, flex-start);
}



.corn-stack--vertical  { flex-direction: column; }
.corn-stack--horizontal { flex-direction: row; }



.corn-stack--gap-xs { --corn-stack-gap: var(--corn-spacing-xs); }
.corn-stack--gap-sm { --corn-stack-gap: var(--corn-spacing-sm); }
.corn-stack--gap-md { --corn-stack-gap: var(--corn-spacing-md); }
.corn-stack--gap-lg { --corn-stack-gap: var(--corn-spacing-lg); }
.corn-stack--gap-xl { --corn-stack-gap: var(--corn-spacing-xl); }



.corn-stack--align-start   { --corn-stack-align: flex-start; }
.corn-stack--align-center  { --corn-stack-align: center; }
.corn-stack--align-end     { --corn-stack-align: flex-end; }
.corn-stack--align-stretch { --corn-stack-align: stretch; }



.corn-stack--justify-start   { --corn-stack-justify: flex-start; }
.corn-stack--justify-center  { --corn-stack-justify: center; }
.corn-stack--justify-end     { --corn-stack-justify: flex-end; }
.corn-stack--justify-between { --corn-stack-justify: space-between; }
.corn-stack--justify-around  { --corn-stack-justify: space-around; }
.corn-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--corn-group-gap, var(--corn-spacing-sm));
  align-items: var(--corn-group-align, center);
  justify-content: var(--corn-group-justify, flex-start);
}



.corn-group--nowrap { flex-wrap: nowrap; }



.corn-group--gap-xs { --corn-group-gap: var(--corn-spacing-xs); }
.corn-group--gap-sm { --corn-group-gap: var(--corn-spacing-sm); }
.corn-group--gap-md { --corn-group-gap: var(--corn-spacing-md); }
.corn-group--gap-lg { --corn-group-gap: var(--corn-spacing-lg); }
.corn-group--gap-xl { --corn-group-gap: var(--corn-spacing-xl); }



.corn-group--align-start    { --corn-group-align: flex-start; }
.corn-group--align-center   { --corn-group-align: center; }
.corn-group--align-end      { --corn-group-align: flex-end; }
.corn-group--align-baseline { --corn-group-align: baseline; }



.corn-group--justify-start   { --corn-group-justify: flex-start; }
.corn-group--justify-center  { --corn-group-justify: center; }
.corn-group--justify-end     { --corn-group-justify: flex-end; }
.corn-group--justify-between { --corn-group-justify: space-between; }
.corn-group--justify-around  { --corn-group-justify: space-around; }
.corn-box {
  box-sizing: border-box;
}



.corn-box--p-xs { padding: var(--corn-spacing-xs); }
.corn-box--p-sm { padding: var(--corn-spacing-sm); }
.corn-box--p-md { padding: var(--corn-spacing-md); }
.corn-box--p-lg { padding: var(--corn-spacing-lg); }
.corn-box--p-xl { padding: var(--corn-spacing-xl); }



.corn-box--px-xs { padding-left: var(--corn-spacing-xs); padding-right: var(--corn-spacing-xs); }
.corn-box--px-sm { padding-left: var(--corn-spacing-sm); padding-right: var(--corn-spacing-sm); }
.corn-box--px-md { padding-left: var(--corn-spacing-md); padding-right: var(--corn-spacing-md); }
.corn-box--px-lg { padding-left: var(--corn-spacing-lg); padding-right: var(--corn-spacing-lg); }
.corn-box--px-xl { padding-left: var(--corn-spacing-xl); padding-right: var(--corn-spacing-xl); }



.corn-box--py-xs { padding-top: var(--corn-spacing-xs); padding-bottom: var(--corn-spacing-xs); }
.corn-box--py-sm { padding-top: var(--corn-spacing-sm); padding-bottom: var(--corn-spacing-sm); }
.corn-box--py-md { padding-top: var(--corn-spacing-md); padding-bottom: var(--corn-spacing-md); }
.corn-box--py-lg { padding-top: var(--corn-spacing-lg); padding-bottom: var(--corn-spacing-lg); }
.corn-box--py-xl { padding-top: var(--corn-spacing-xl); padding-bottom: var(--corn-spacing-xl); }



.corn-box--bg-primary   { background: var(--corn-bg-primary); }
.corn-box--bg-secondary { background: var(--corn-bg-secondary); }
.corn-box--bg-tertiary  { background: var(--corn-bg-tertiary); }



.corn-box--border { border: 1px solid var(--corn-border-light); }



.corn-box--radius-sm { border-radius: var(--corn-radius-sm); }
.corn-box--radius-md { border-radius: var(--corn-radius-md); }
.corn-box--radius-lg { border-radius: var(--corn-radius-lg); }
.corn-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--corn-spacing-lg);
  padding-right: var(--corn-spacing-lg);
  box-sizing: border-box;
}

.corn-container--sm     { max-width: 640px; }
.corn-container--md     { max-width: 960px; }
.corn-container--lg     { max-width: 1280px; }
.corn-container--fluid  { max-width: 100%; }


@media (max-width: 640px) {
  .corn-container {
    padding-left: var(--corn-spacing-md);
    padding-right: var(--corn-spacing-md);
  }
}
.corn-grid {
  display: grid;
}

.corn-grid--cols {
  grid-template-columns: repeat(var(--corn-grid-cols, 12), minmax(0, 1fr));
}


.corn-grid--gap-xs { gap: var(--corn-spacing-xs); }
.corn-grid--gap-sm { gap: var(--corn-spacing-sm); }
.corn-grid--gap-md { gap: var(--corn-spacing-md); }
.corn-grid--gap-lg { gap: var(--corn-spacing-lg); }
.corn-grid--gap-xl { gap: var(--corn-spacing-xl); }


.corn-grid--row-gap-xs { row-gap: var(--corn-spacing-xs); }
.corn-grid--row-gap-sm { row-gap: var(--corn-spacing-sm); }
.corn-grid--row-gap-md { row-gap: var(--corn-spacing-md); }
.corn-grid--row-gap-lg { row-gap: var(--corn-spacing-lg); }
.corn-grid--row-gap-xl { row-gap: var(--corn-spacing-xl); }

.corn-grid--col-gap-xs { column-gap: var(--corn-spacing-xs); }
.corn-grid--col-gap-sm { column-gap: var(--corn-spacing-sm); }
.corn-grid--col-gap-md { column-gap: var(--corn-spacing-md); }
.corn-grid--col-gap-lg { column-gap: var(--corn-spacing-lg); }
.corn-grid--col-gap-xl { column-gap: var(--corn-spacing-xl); }


@media (max-width: 640px) {
  .corn-grid--cols {
    grid-template-columns: minmax(0, 1fr);
  }
}
.corn-divider--horizontal {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--corn-border-light);
}

.corn-divider--vertical {
  width: 0;
  min-height: 1em;
  margin: 0;
  border: none;
  border-left: 1px solid var(--corn-border-light);
  
  align-self: stretch;
}


.corn-divider--horizontal.corn-divider--labelled {
  display: flex;
  align-items: center;
  gap: var(--corn-spacing-sm);
  height: auto;
  border-top: none;
}

.corn-divider--horizontal.corn-divider--labelled::before,
.corn-divider--horizontal.corn-divider--labelled::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--corn-border-light);
}

.corn-divider__label {
  font-family: var(--corn-font-family);
  font-size: var(--corn-font-size-sm);
  color: var(--corn-text-secondary);
  white-space: nowrap;
}
.corn-text-input {
  display: block;
  width: auto;
  font-family: var(--corn-font-family);
  font-size: var(--corn-font-size-base);
  line-height: var(--corn-line-height);
  color: var(--corn-text-primary);
  background: var(--corn-bg-primary);
  border: 1px solid var(--corn-border-primary);
  border-radius: var(--corn-radius-sm);
  transition: border-color var(--corn-transition-fast), box-shadow var(--corn-transition-fast);
  box-sizing: border-box;
  appearance: none;
}

.corn-text-input::placeholder { color: var(--corn-text-tertiary); }

.corn-text-input:hover:not(:disabled) {
  border-color: var(--corn-border-secondary);
}

.corn-text-input:focus {
  outline: none;
  border-color: var(--corn-primary);
  box-shadow: var(--corn-focus-ring);
}



.corn-text-input--sm {
  font-size: var(--corn-font-size-sm);
  padding: 4px var(--corn-spacing-sm);
}

.corn-text-input--md {
  font-size: var(--corn-font-size-base);
  padding: 6px var(--corn-spacing-md);
}

.corn-text-input--lg {
  font-size: var(--corn-font-size-lg);
  padding: 10px var(--corn-spacing-md);
}



.corn-text-input--error {
  border-color: var(--corn-danger);
}

.corn-text-input--error:focus {
  box-shadow: var(--corn-focus-ring-error);
}

.corn-text-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--corn-bg-secondary);
}



.corn-text-input--full-width { width: 100%; }
.corn-select {
  display: block;
  width: auto;
  font-family: var(--corn-font-family);
  font-size: var(--corn-font-size-base);
  line-height: var(--corn-line-height);
  color: var(--corn-text-primary);
  background: var(--corn-bg-primary);
  border: 1px solid var(--corn-border-primary);
  border-radius: var(--corn-radius-sm);
  transition: border-color var(--corn-transition-fast), box-shadow var(--corn-transition-fast);
  box-sizing: border-box;
  cursor: pointer;
  
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--corn-spacing-sm) center;
  padding-right: var(--corn-spacing-xl);
}

.corn-select:hover:not(:disabled) {
  border-color: var(--corn-border-secondary);
}

.corn-select:focus {
  outline: none;
  border-color: var(--corn-primary);
  box-shadow: var(--corn-focus-ring);
}



.corn-select--sm { font-size: var(--corn-font-size-sm);  padding: 4px var(--corn-spacing-xl) 4px var(--corn-spacing-sm); }
.corn-select--md { font-size: var(--corn-font-size-base); padding: 6px var(--corn-spacing-xl) 6px var(--corn-spacing-md); }
.corn-select--lg { font-size: var(--corn-font-size-lg);  padding: 10px var(--corn-spacing-xl) 10px var(--corn-spacing-md); }



.corn-select--error { border-color: var(--corn-danger); }
.corn-select--error:focus { box-shadow: var(--corn-focus-ring-error); }

.corn-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--corn-bg-secondary);
}

.corn-select--full-width { width: 100%; }
.corn-textarea {
  display: block;
  width: auto;
  min-height: 80px;
  font-family: var(--corn-font-family);
  font-size: var(--corn-font-size-base);
  line-height: var(--corn-line-height);
  color: var(--corn-text-primary);
  background: var(--corn-bg-primary);
  border: 1px solid var(--corn-border-primary);
  border-radius: var(--corn-radius-sm);
  transition: border-color var(--corn-transition-fast), box-shadow var(--corn-transition-fast);
  box-sizing: border-box;
  appearance: none;
}

.corn-textarea::placeholder { color: var(--corn-text-tertiary); }

.corn-textarea:hover:not(:disabled) { border-color: var(--corn-border-secondary); }

.corn-textarea:focus {
  outline: none;
  border-color: var(--corn-primary);
  box-shadow: var(--corn-focus-ring);
}



.corn-textarea--sm { font-size: var(--corn-font-size-sm);  padding: 4px var(--corn-spacing-sm); }
.corn-textarea--md { font-size: var(--corn-font-size-base); padding: 6px var(--corn-spacing-md); }
.corn-textarea--lg { font-size: var(--corn-font-size-lg);  padding: 10px var(--corn-spacing-md); }



.corn-textarea--resize-none       { resize: none; }
.corn-textarea--resize-vertical   { resize: vertical; }
.corn-textarea--resize-horizontal { resize: horizontal; }
.corn-textarea--resize-both       { resize: both; }



.corn-textarea--error { border-color: var(--corn-danger); }
.corn-textarea--error:focus { box-shadow: var(--corn-focus-ring-error); }

.corn-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--corn-bg-secondary);
  resize: none;
}

.corn-textarea--full-width { width: 100%; }
.corn-checkbox {
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  background: var(--corn-bg-primary);
  border: 2px solid var(--corn-border-primary);
  border-radius: var(--corn-radius-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color var(--corn-transition-fast),
    border-color var(--corn-transition-fast),
    box-shadow var(--corn-transition-fast);
  position: relative;
}


.corn-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  width: 35%;
  height: 55%;
  border: 2px solid var(--corn-text-inverse);
  border-top: none;
  border-left: none;
  transform: translate(-50%, -55%) rotate(45deg);
}

.corn-checkbox:checked {
  background: var(--corn-primary);
  border-color: var(--corn-primary);
}

.corn-checkbox:hover:not(:disabled):not(:checked) {
  border-color: var(--corn-primary);
}

.corn-checkbox:focus-visible {
  outline: none;
  box-shadow: var(--corn-focus-ring);
}



.corn-checkbox--sm { width: 14px; height: 14px; }
.corn-checkbox--md { width: 16px; height: 16px; }
.corn-checkbox--lg { width: 20px; height: 20px; }



.corn-checkbox--error { border-color: var(--corn-danger); }
.corn-checkbox--error:checked { background: var(--corn-danger); border-color: var(--corn-danger); }
.corn-checkbox--error:focus-visible { box-shadow: var(--corn-focus-ring-error); }

.corn-checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.corn-radio {
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  background: var(--corn-bg-primary);
  border: 2px solid var(--corn-border-primary);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background-color var(--corn-transition-fast),
    border-color var(--corn-transition-fast),
    box-shadow var(--corn-transition-fast);
  position: relative;
}


.corn-radio:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45%;
  height: 45%;
  border-radius: 50%;
  background: var(--corn-text-inverse);
  transform: translate(-50%, -50%);
}

.corn-radio:checked {
  background: var(--corn-primary);
  border-color: var(--corn-primary);
}

.corn-radio:hover:not(:disabled):not(:checked) {
  border-color: var(--corn-primary);
}

.corn-radio:focus-visible {
  outline: none;
  box-shadow: var(--corn-focus-ring);
}



.corn-radio--sm { width: 14px; height: 14px; }
.corn-radio--md { width: 16px; height: 16px; }
.corn-radio--lg { width: 20px; height: 20px; }



.corn-radio--error { border-color: var(--corn-danger); }
.corn-radio--error:checked { background: var(--corn-danger); border-color: var(--corn-danger); }
.corn-radio--error:focus-visible { box-shadow: var(--corn-focus-ring-error); }

.corn-radio:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}



.corn-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--corn-spacing-sm);
}
.corn-switch {
  appearance: none;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  position: relative;
  background: var(--corn-border-primary);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color var(--corn-transition-fast),
    box-shadow var(--corn-transition-fast);
}


.corn-switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  background: var(--corn-text-inverse);
  border-radius: 50%;
  transition: left var(--corn-transition-fast);
}

.corn-switch:checked {
  background: var(--corn-primary);
}

.corn-switch:hover:not(:disabled):not(:checked) {
  background: var(--corn-border-secondary);
}

.corn-switch:focus-visible {
  outline: none;
  box-shadow: var(--corn-focus-ring);
}



.corn-switch--sm { width: 28px; height: 16px; }
.corn-switch--sm::after { width: 12px; height: 12px; }
.corn-switch--sm:checked::after { left: calc(100% - 14px); }

.corn-switch--md { width: 36px; height: 20px; }
.corn-switch--md::after { width: 16px; height: 16px; }
.corn-switch--md:checked::after { left: calc(100% - 18px); }

.corn-switch--lg { width: 44px; height: 24px; }
.corn-switch--lg::after { width: 20px; height: 20px; }
.corn-switch--lg:checked::after { left: calc(100% - 22px); }



.corn-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.corn-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
}

.corn-slider:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}



.corn-slider::-webkit-slider-runnable-track {
  height: var(--corn-slider-track, 4px);
  background: var(--corn-border-primary);
  border-radius: 999px;
}

.corn-slider::-moz-range-track {
  height: var(--corn-slider-track, 4px);
  background: var(--corn-border-primary);
  border-radius: 999px;
}



.corn-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--corn-slider-thumb, 16px);
  height: var(--corn-slider-thumb, 16px);
  margin-top: calc((var(--corn-slider-track, 4px) - var(--corn-slider-thumb, 16px)) / 2);
  background: var(--corn-primary);
  border: 2px solid var(--corn-bg-primary);
  border-radius: 50%;
  box-shadow: 0 1px 2px var(--corn-shadow-color);
  transition: box-shadow var(--corn-transition-fast);
}

.corn-slider::-moz-range-thumb {
  width: var(--corn-slider-thumb, 16px);
  height: var(--corn-slider-thumb, 16px);
  background: var(--corn-primary);
  border: 2px solid var(--corn-bg-primary);
  border-radius: 50%;
  box-shadow: 0 1px 2px var(--corn-shadow-color);
  transition: box-shadow var(--corn-transition-fast);
}

.corn-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--corn-focus-ring);
}

.corn-slider:focus-visible::-moz-range-thumb {
  box-shadow: var(--corn-focus-ring);
}

.corn-slider:focus { outline: none; }



.corn-slider--sm { --corn-slider-track: 3px; --corn-slider-thumb: 12px; }
.corn-slider--md { --corn-slider-track: 4px; --corn-slider-thumb: 16px; }
.corn-slider--lg { --corn-slider-track: 6px; --corn-slider-thumb: 20px; }
.corn-combobox {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 320px;
}



.corn-combobox__input {
  display: block;
  width: 100%;
  font-family: var(--corn-font-family);
  line-height: var(--corn-line-height);
  color: var(--corn-text-primary);
  background: var(--corn-bg-primary);
  border: 1px solid var(--corn-border-primary);
  border-radius: var(--corn-radius-sm);
  transition: border-color var(--corn-transition-fast), box-shadow var(--corn-transition-fast);
  box-sizing: border-box;
  appearance: none;
}

.corn-combobox__input::placeholder { color: var(--corn-text-tertiary); }

.corn-combobox__input:hover:not(:disabled) { border-color: var(--corn-border-secondary); }

.corn-combobox__input:focus {
  outline: none;
  border-color: var(--corn-primary);
  box-shadow: var(--corn-focus-ring);
}

.corn-combobox__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--corn-bg-secondary);
}

.corn-combobox__input--sm { font-size: var(--corn-font-size-sm); padding: 4px var(--corn-spacing-sm); }
.corn-combobox__input--md { font-size: var(--corn-font-size-base); padding: 6px var(--corn-spacing-md); }
.corn-combobox__input--lg { font-size: var(--corn-font-size-lg); padding: 10px var(--corn-spacing-md); }



.corn-combobox__listbox {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 8000;
  margin: 0;
  padding: var(--corn-spacing-xs);
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background: var(--corn-bg-primary);
  border: 1px solid var(--corn-border-light);
  border-radius: var(--corn-radius-md);
  box-shadow: var(--corn-shadow-lg);
}

.corn-combobox__option {
  padding: var(--corn-spacing-sm) var(--corn-spacing-md);
  border-radius: var(--corn-radius-sm);
  font-size: var(--corn-font-size-base);
  color: var(--corn-text-primary);
  cursor: pointer;
}

.corn-combobox__option--active {
  background: var(--corn-bg-tertiary);
}

.corn-combobox__option--selected {
  font-weight: 600;
  color: var(--corn-primary);
}

.corn-combobox__empty {
  padding: var(--corn-spacing-sm) var(--corn-spacing-md);
  font-size: var(--corn-font-size-sm);
  color: var(--corn-text-tertiary);
}
.corn-form {
  display: flex;
  flex-direction: column;
  gap: var(--corn-spacing-md);
}



.corn-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--corn-spacing-xs);
}



.corn-form__error {
  display: none;
  color: var(--corn-danger);
  font-size: var(--corn-font-size-sm);
  line-height: var(--corn-line-height);
}

.corn-form__error--visible {
  display: block;
}
.corn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  font-family: var(--corn-font-family);
  font-weight: var(--corn-font-weight-medium);
  line-height: 1;
  white-space: nowrap;
}



.corn-badge--sm {
  font-size: var(--corn-font-size-xs);
  padding: 2px 6px;
}

.corn-badge--md {
  font-size: var(--corn-font-size-sm);
  padding: 3px 8px;
}

.corn-badge--lg {
  font-size: var(--corn-font-size-base);
  padding: 4px 10px;
}



.corn-badge--default {
  background: var(--corn-bg-tertiary);
  color: var(--corn-text-primary);
}

.corn-badge--primary {
  background: var(--corn-primary);
  color: var(--corn-text-inverse);
}

.corn-badge--success {
  background: var(--corn-success-light);
  color: var(--corn-success);
}

.corn-badge--warning {
  background: var(--corn-warning-light);
  color: var(--corn-warning);
}

.corn-badge--danger {
  background: var(--corn-danger-light);
  color: var(--corn-danger);
}

.corn-badge--info {
  background: var(--corn-info-light);
  color: var(--corn-info);
}



.corn-badge--dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.corn-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--corn-bg-tertiary);
  color: var(--corn-text-secondary);
  font-family: var(--corn-font-family);
  font-weight: var(--corn-font-weight-medium);
  flex-shrink: 0;
  user-select: none;
}

.corn-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}



.corn-avatar--xs {
  width: 24px;
  height: 24px;
  font-size: var(--corn-font-size-xs);
}

.corn-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--corn-font-size-sm);
}

.corn-avatar--md {
  width: 40px;
  height: 40px;
  font-size: var(--corn-font-size-base);
}

.corn-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: var(--corn-font-size-lg);
}

.corn-avatar--xl {
  width: 72px;
  height: 72px;
  font-size: var(--corn-font-size-xl);
}



.corn-avatar--circle {
  border-radius: 50%;
}

.corn-avatar--square {
  border-radius: var(--corn-radius-sm);
}
.corn-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--corn-radius-none, 0);
}


.corn-image--ratio-square,
.corn-image--ratio-video,
.corn-image--ratio-portrait,
.corn-image--ratio-wide {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.corn-image--ratio-square   { aspect-ratio: 1 / 1; }
.corn-image--ratio-video    { aspect-ratio: 16 / 9; }
.corn-image--ratio-portrait { aspect-ratio: 3 / 4; }
.corn-image--ratio-wide     { aspect-ratio: 21 / 9; }


.corn-image--cover    { object-fit: cover; }
.corn-image--contain  { object-fit: contain; }

.corn-image--radius-sm { border-radius: var(--corn-radius-sm); }
.corn-image--radius-md { border-radius: var(--corn-radius-md); }
.corn-image--radius-lg { border-radius: var(--corn-radius-lg); }
.corn-image--circle    { border-radius: 50%; }

.corn-image--full-width { width: 100%; }

.corn-image--bordered {
  border: 1px solid var(--corn-border-light);
}


.corn-image--placeholder {
  background-color: var(--corn-bg-tertiary);
}
.corn-heading {
  font-family: var(--corn-font-family);
  color: var(--corn-text-primary);
  margin: 0;
  font-weight: var(--corn-font-weight-bold);
}

.corn-heading--1 { font-size: 2rem;    line-height: 1.2;  letter-spacing: -0.02em; }
.corn-heading--2 { font-size: 1.5rem;  line-height: 1.25; letter-spacing: -0.01em; }
.corn-heading--3 { font-size: 1.25rem; line-height: 1.3; }
.corn-heading--4 { font-size: 1rem;    line-height: 1.35; }
.corn-heading--5 { font-size: 0.875rem; line-height: 1.4; }
.corn-heading--6 { font-size: 0.75rem;  line-height: 1.4; }

.corn-heading--medium   { font-weight: var(--corn-font-weight-medium); }
.corn-heading--muted    { color: var(--corn-text-secondary); }
.corn-heading--truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



.corn-text {
  font-family: var(--corn-font-family);
  font-size: var(--corn-font-size-base);
  font-weight: var(--corn-font-weight-regular);
  color: var(--corn-text-primary);
  line-height: var(--corn-line-height);
  margin: 0;
}

.corn-text--sm { font-size: var(--corn-font-size-sm); }
.corn-text--lg { font-size: var(--corn-font-size-lg); }
.corn-text--xl { font-size: var(--corn-font-size-xl); }

.corn-text--medium { font-weight: var(--corn-font-weight-medium); }
.corn-text--bold   { font-weight: var(--corn-font-weight-bold); }

.corn-text--muted    { color: var(--corn-text-secondary); }
.corn-text--truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }



.corn-label {
  font-family: var(--corn-font-family);
  font-size: var(--corn-font-size-sm);
  font-weight: var(--corn-font-weight-medium);
  color: var(--corn-text-primary);
  letter-spacing: 0.01em;
  line-height: var(--corn-line-height);
}

.corn-label--muted { color: var(--corn-text-secondary); }



.corn-caption {
  font-family: var(--corn-font-family);
  font-size: var(--corn-font-size-xs);
  font-weight: var(--corn-font-weight-regular);
  color: var(--corn-text-secondary);
  line-height: var(--corn-line-height);
}

.corn-caption--muted { color: var(--corn-text-tertiary); }



.corn-code {
  font-family: var(--corn-font-family-mono);
  font-size: 0.9em;
  background: var(--corn-bg-tertiary);
  padding: 1px 5px;
  border-radius: var(--corn-radius-sm);
  color: var(--corn-text-primary);
}

.corn-code--block {
  display: block;
  padding: var(--corn-spacing-md);
  border-radius: var(--corn-radius-md);
  white-space: pre;
  overflow-x: auto;
  font-size: var(--corn-font-size-sm);
}
.corn-paper {
  background: var(--corn-bg-primary);
  box-sizing: border-box;
}



.corn-paper--shadow-none { box-shadow: none; }
.corn-paper--shadow-sm   { box-shadow: var(--corn-shadow-sm); }
.corn-paper--shadow-md   { box-shadow: var(--corn-shadow-md); }
.corn-paper--shadow-lg   { box-shadow: var(--corn-shadow-lg); }



.corn-paper--p-none { padding: 0; }
.corn-paper--p-xs   { padding: var(--corn-spacing-xs); }
.corn-paper--p-sm   { padding: var(--corn-spacing-sm); }
.corn-paper--p-md   { padding: var(--corn-spacing-md); }
.corn-paper--p-lg   { padding: var(--corn-spacing-lg); }
.corn-paper--p-xl   { padding: var(--corn-spacing-xl); }



.corn-paper--radius-none { border-radius: 0; }
.corn-paper--radius-sm   { border-radius: var(--corn-radius-sm); }
.corn-paper--radius-md   { border-radius: var(--corn-radius-md); }
.corn-paper--radius-lg   { border-radius: var(--corn-radius-lg); }



.corn-paper--border {
  border: 1px solid var(--corn-border-light);
}
.corn-spinner {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--corn-border-primary);
  border-top-color: var(--corn-primary);
  animation: corn-spinner-rotate 0.6s linear infinite;
}

@keyframes corn-spinner-rotate {
  to { transform: rotate(360deg); }
}



.corn-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.corn-spinner--md { width: 20px; height: 20px; border-width: 2px; }
.corn-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
.corn-spinner--xl { width: 40px; height: 40px; border-width: 4px; }

@media (prefers-reduced-motion: reduce) {
  .corn-spinner { animation-duration: 1.6s; }
}
.corn-progress {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--corn-bg-tertiary);
  border-radius: 999px;
}

.corn-progress__bar {
  height: 100%;
  background: var(--corn-primary);
  border-radius: inherit;
  transition: width 200ms ease;
}



.corn-progress--sm { height: 4px; }
.corn-progress--md { height: 8px; }
.corn-progress--lg { height: 12px; }



.corn-progress--indeterminate .corn-progress__bar {
  width: 40%;
  animation: corn-progress-indeterminate 1.2s ease-in-out infinite;
}

@keyframes corn-progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .corn-progress--indeterminate .corn-progress__bar { animation-duration: 2.4s; }
}
.corn-skeleton {
  display: block;
  background: var(--corn-bg-tertiary);
  border-radius: var(--corn-radius-sm);
  animation: corn-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes corn-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}



.corn-skeleton--text {
  width: 100%;
  height: 1em;
  border-radius: var(--corn-radius-sm);
}

.corn-skeleton--rectangular {
  border-radius: var(--corn-radius-sm);
}

.corn-skeleton--circular {
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .corn-skeleton { animation: none; }
}
.corn-list {
  margin: 0;
  padding: 0;
  font-family: var(--corn-font-family);
  font-size: var(--corn-font-size-base);
  line-height: var(--corn-line-height);
  color: var(--corn-text-primary);
}

.corn-list--unordered {
  list-style: disc;
  padding-left: var(--corn-spacing-lg);
}

.corn-list--ordered {
  list-style: decimal;
  padding-left: var(--corn-spacing-lg);
}

.corn-list--unstyled {
  list-style: none;
  padding-left: 0;
}

.corn-list__item {
  margin: 0;
}


.corn-list--spacing-sm > .corn-list__item + .corn-list__item {
  margin-top: var(--corn-spacing-xs);
}

.corn-list--spacing-md > .corn-list__item + .corn-list__item {
  margin-top: var(--corn-spacing-sm);
}

.corn-list--spacing-lg > .corn-list__item + .corn-list__item {
  margin-top: var(--corn-spacing-md);
}


.corn-list--divided > .corn-list__item + .corn-list__item {
  margin-top: var(--corn-spacing-sm);
  padding-top: var(--corn-spacing-sm);
  border-top: 1px solid var(--corn-border-light);
}


.corn-list--description {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--corn-spacing-sm) var(--corn-spacing-md);
  padding-left: 0;
  list-style: none;
}

.corn-list__term {
  margin: 0;
  font-weight: var(--corn-font-weight-medium);
  color: var(--corn-text-secondary);
}

.corn-list__detail {
  margin: 0;
}
.corn-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.corn-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--corn-font-family);
  font-size: var(--corn-font-size-base);
  color: var(--corn-text-primary);
}

.corn-table th,
.corn-table td {
  padding: var(--corn-spacing-sm) var(--corn-spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--corn-border-light);
}

.corn-table thead th {
  font-weight: var(--corn-font-weight-bold);
  color: var(--corn-text-secondary);
  font-size: var(--corn-font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--corn-border-primary);
  background: var(--corn-bg-secondary);
}

.corn-table tbody tr:last-child td {
  border-bottom: none;
}

.corn-table--hoverable tbody tr:hover td {
  background: var(--corn-bg-secondary);
}

.corn-table--striped tbody tr:nth-child(even) td {
  background: var(--corn-bg-secondary);
}

.corn-table--bordered th,
.corn-table--bordered td {
  border: 1px solid var(--corn-border-light);
}

.corn-table--sticky-header thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.corn-table__th--sortable {
  cursor: pointer;
  user-select: none;
}

.corn-table__th--sortable::after {
  content: ' ↕';
  opacity: 0.4;
}

.corn-table__th--sort-asc::after {
  content: ' ↑';
  opacity: 1;
}

.corn-table__th--sort-desc::after {
  content: ' ↓';
  opacity: 1;
}
.corn-tabs {
  display: flex;
  flex-direction: column;
}



[role="tablist"].corn-tabs__tablist,
.corn-tabs [role="tablist"] {
  display: flex;
  align-items: center;
  gap: 0;
}



.corn-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--corn-spacing-xs);
  padding: var(--corn-spacing-sm) var(--corn-spacing-md);
  font-family: var(--corn-font-family);
  font-size: var(--corn-font-size-base);
  font-weight: var(--corn-font-weight-medium);
  color: var(--corn-text-secondary);
  cursor: pointer;
  border: none;
  background: none;
  transition:
    color var(--corn-transition-fast),
    background-color var(--corn-transition-fast);
  user-select: none;
  white-space: nowrap;
}

.corn-tabs__tab:hover:not([disabled]) {
  color: var(--corn-text-primary);
}

.corn-tabs__tab[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.corn-tabs__tab:focus-visible {
  outline: 2px solid var(--corn-primary);
  outline-offset: -2px;
  border-radius: var(--corn-radius-sm);
}



.corn-tabs--line [role="tablist"] {
  border-bottom: 2px solid var(--corn-border-light);
}

.corn-tabs--line .corn-tabs__tab {
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
  border-radius: var(--corn-radius-sm) var(--corn-radius-sm) 0 0;
}

.corn-tabs--line .corn-tabs__tab--active {
  color: var(--corn-primary);
  border-bottom-color: var(--corn-primary);
}



.corn-tabs--pills [role="tablist"] {
  gap: var(--corn-spacing-xs);
  padding: var(--corn-spacing-xs);
  background: var(--corn-bg-secondary);
  border-radius: var(--corn-radius-md);
}

.corn-tabs--pills .corn-tabs__tab {
  border-radius: var(--corn-radius-sm);
}

.corn-tabs--pills .corn-tabs__tab--active {
  background: var(--corn-bg-primary);
  color: var(--corn-text-primary);
  box-shadow: var(--corn-shadow-sm);
}



.corn-tabs__panel {
  padding-top: var(--corn-spacing-md);
}

.corn-tabs__panel[hidden] {
  display: none;
}
.corn-bar {
  display: flex;
  align-items: center;
  padding: 0 var(--corn-spacing-lg);
  min-height: var(--corn-bar-height, 56px);
  background: var(--corn-bg-primary);
  font-family: var(--corn-font-family);
  box-sizing: border-box;
}

.corn-bar--top {
  border-bottom: 1px solid var(--corn-border-light);
}

.corn-bar--bottom {
  border-top: 1px solid var(--corn-border-light);
}

.corn-bar--sticky {
  position: sticky;
  z-index: var(--corn-z-bar, 100);
}

.corn-bar--top.corn-bar--sticky {
  top: 0;
}

.corn-bar--bottom.corn-bar--sticky {
  bottom: 0;
}
.corn-nav {
  font-family: var(--corn-font-family);
}

.corn-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.corn-nav--horizontal .corn-nav__list {
  flex-direction: row;
  align-items: center;
  gap: var(--corn-spacing-xs);
}

.corn-nav--vertical .corn-nav__list {
  flex-direction: column;
  gap: 0;
}


.corn-nav__item {
  display: contents;
}

.corn-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--corn-spacing-xs);
  border-radius: var(--corn-radius-sm);
  color: var(--corn-text-secondary);
  text-decoration: none;
  font-size: var(--corn-font-size-base);
  font-weight: var(--corn-font-weight-medium);
  line-height: var(--corn-line-height);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--corn-transition-fast), color var(--corn-transition-fast);
}

.corn-nav--horizontal .corn-nav__link {
  padding: var(--corn-spacing-xs) var(--corn-spacing-sm);
}

.corn-nav--vertical .corn-nav__link {
  width: 100%;
  padding: var(--corn-spacing-sm) var(--corn-spacing-md);
}

.corn-nav__link:hover {
  background: var(--corn-bg-tertiary);
  color: var(--corn-text-primary);
}

.corn-nav__link:focus-visible {
  outline: 2px solid var(--corn-primary);
  outline-offset: 2px;
}

.corn-nav__link--active {
  color: var(--corn-primary);
  background: var(--corn-bg-secondary);
  font-weight: var(--corn-font-weight-bold);
}

.corn-nav--vertical .corn-nav__link--active {
  border-left: 2px solid var(--corn-primary);
  border-radius: 0 var(--corn-radius-sm) var(--corn-radius-sm) 0;
}

.corn-nav__link--active:hover {
  background: var(--corn-bg-tertiary);
}

.corn-nav__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 1em;
}


@media (max-width: 640px) {
  .corn-nav--horizontal .corn-nav__list {
    flex-wrap: wrap;
  }
}
.corn-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--corn-bg-primary);
  font-family: var(--corn-font-family);
  box-sizing: border-box;
}

.corn-layout__header,
.corn-layout__footer {
  flex-shrink: 0;
}

.corn-layout__body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.corn-layout__left-nav,
.corn-layout__right-nav {
  flex-shrink: 0;
  width: var(--corn-layout-side-nav-width, 240px);
  overflow-y: auto;
  background: var(--corn-bg-secondary);
}

.corn-layout__left-nav {
  border-right: 1px solid var(--corn-border-light);
}

.corn-layout__right-nav {
  border-left: 1px solid var(--corn-border-light);
}

.corn-layout__main {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}


@media (max-width: 960px) {
  .corn-layout__body {
    flex-direction: column;
  }

  .corn-layout__left-nav,
  .corn-layout__right-nav {
    width: auto;
    border-right: 0;
    border-left: 0;
  }

  .corn-layout__left-nav {
    border-bottom: 1px solid var(--corn-border-light);
  }

  .corn-layout__right-nav {
    border-top: 1px solid var(--corn-border-light);
  }
}
.corn-markdown__blockquote {
  border-left: 3px solid var(--corn-info);
  background: var(--corn-info-light);
  padding: var(--corn-spacing-sm) var(--corn-spacing-md);
  border-radius: var(--corn-radius-md);
}

.corn-markdown__list {
  padding-left: var(--corn-spacing-lg);
  margin: 0;
}

.corn-markdown__list--ul {
  list-style: disc;
}

.corn-markdown__list--ol {
  list-style: decimal;
}

.corn-markdown__item {
  padding-left: var(--corn-spacing-xs);
}

.corn-markdown__link {
  color: var(--corn-primary);
  text-decoration: underline;
}

.corn-markdown__link:hover {
  color: var(--corn-primary-hover);
}

.corn-markdown__divider {
  border: none;
  border-top: 1px solid var(--corn-border-light);
  margin: 0;
}

.corn-markdown__strong {
  font-weight: var(--corn-font-weight-bold);
}

.corn-markdown__em {
  font-style: italic;
}

.corn-markdown__del {
  text-decoration: line-through;
  color: var(--corn-text-tertiary);
}

.corn-markdown__img {
  max-width: 100%;
  height: auto;
  border-radius: var(--corn-radius-md);
}

.corn-markdown__table-wrap {
  overflow-x: auto;
}

.corn-markdown__table {
  width: 100%;
  border-collapse: collapse;
}

.corn-markdown__th,
.corn-markdown__td {
  padding: var(--corn-spacing-sm) var(--corn-spacing-md);
  text-align: left;
  border-bottom: 1px solid var(--corn-border-light);
}

.corn-markdown__th {
  border-bottom-color: var(--corn-border-primary);
}
.corn-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  
}