linear-classifier-demo {
  --lcd-bg: var(--pst-color-surface, #fff);
  --lcd-panel: var(--pst-color-background, #f5f7fa);
  --lcd-text: var(--pst-color-text-base, #172033);
  --lcd-muted: #64748b;
  --lcd-border: var(--pst-color-border, #cbd5e1);
  --lcd-grid: #dbe2ea;
  --lcd-class-0: #2563eb;
  --lcd-class-1: #dc6b22;
  --lcd-boundary: #111827;
  display: block;
  width: 100%;
  margin: 1.5rem auto;
  color: var(--lcd-text);
}

@media (prefers-color-scheme: dark) {
  linear-classifier-demo {
    --lcd-bg: #191b1f;
    --lcd-panel: #111318;
    --lcd-text: #f1f5f9;
    --lcd-muted: #a7b0bd;
    --lcd-border: #3c424c;
    --lcd-grid: #303640;
    --lcd-class-0: #60a5fa;
    --lcd-class-1: #fb923c;
    --lcd-boundary: #f8fafc;
  }
}

.force-dark linear-classifier-demo {
  --lcd-bg: #191b1f;
  --lcd-panel: #111318;
  --lcd-text: #f1f5f9;
  --lcd-muted: #a7b0bd;
  --lcd-border: #3c424c;
  --lcd-grid: #303640;
  --lcd-class-0: #60a5fa;
  --lcd-class-1: #fb923c;
  --lcd-boundary: #f8fafc;
}

.force-light linear-classifier-demo {
  --lcd-bg: #fff;
  --lcd-panel: #f5f7fa;
  --lcd-text: #172033;
  --lcd-muted: #64748b;
  --lcd-border: #cbd5e1;
  --lcd-grid: #dbe2ea;
  --lcd-class-0: #2563eb;
  --lcd-class-1: #dc6b22;
  --lcd-boundary: #111827;
}

.lcd-widget,
.lcd-widget * { box-sizing: border-box; }

.lcd-widget {
  padding: 1rem;
  border: 1px solid var(--lcd-border);
  border-radius: .75rem;
  background: var(--lcd-bg);
}

.lcd-layout { display: grid; gap: 1rem; }
.lcd-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; align-items: end; }
.lcd-field { display: grid; gap: .3rem; margin: 0; font-size: .88rem; font-weight: 650; }
.lcd-controls > .lcd-field { grid-template-rows: 1.25rem 2.25rem; align-items: center; }
.lcd-controls > .lcd-field > select,
.lcd-controls > .lcd-field > input { height: 2.25rem; }
.lcd-field select,
.lcd-field input { width: 100%; min-height: 2.25rem; padding: .35rem .5rem; border: 1px solid var(--lcd-border); border-radius: .4rem; background: var(--lcd-bg); color: var(--lcd-text); }
.lcd-field input[type="range"] { min-height: auto; padding: 0; }
.lcd-field-row { display: flex; justify-content: space-between; gap: .5rem; }
.lcd-field output { font-variant-numeric: tabular-nums; }
.lcd-playback { grid-column: 1 / -1; display: grid; grid-template-columns: 72px 72px minmax(0, 1fr); align-items: end; gap: .4rem; }
.lcd-playback .lcd-speed-field { width: 120px; justify-self: end; font-size: .78rem; }
.lcd-button { min-height: 2rem; padding: .25rem .45rem; border: 1px solid var(--lcd-border); border-radius: .42rem; background: var(--lcd-bg); color: var(--lcd-text); font-size: .82rem; cursor: pointer; }
.lcd-button:hover:not(:disabled) { background: var(--lcd-panel); }
.lcd-button--primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.lcd-button--primary:hover:not(:disabled) { background: #1d4ed8; }
.lcd-button:disabled { cursor: default; opacity: .5; }
.lcd-button:focus-visible,
.lcd-field :focus-visible,
.lcd-canvas:focus-visible { outline: 2px solid var(--lcd-class-0); outline-offset: 2px; }
.lcd-validation { margin: 0; color: var(--lcd-muted); font-size: .78rem; line-height: 1.4; }
.lcd-validation { grid-column: 1 / -1; min-height: 0; color: #b45309; }
.lcd-validation:empty { display: none; }
.lcd-figures { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(210px, .8fr); align-items: stretch; gap: .8rem; min-width: 0; }
.lcd-card { min-width: 0; margin: 0; padding: .7rem; border: 1px solid var(--lcd-border); border-radius: .55rem; background: var(--lcd-panel); }
.lcd-card h4 { margin: 0 0 .35rem; font-size: .9rem; }
.lcd-canvas { display: block; width: 100%; height: 360px; border-radius: .35rem; background: var(--lcd-bg); touch-action: none; }
.lcd-model-card { display: flex; flex-direction: column; }
.lcd-metrics { flex: 1; display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: .35rem; margin: 0; }
.lcd-metric { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 0; padding: .35rem .5rem; border-radius: .4rem; background: var(--lcd-bg); }
.lcd-metric dt { color: var(--lcd-muted); font-size: .76rem; }
.lcd-metric dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.lcd-legend { display: flex; flex-wrap: wrap; gap: .7rem; font-size: .76rem; color: var(--lcd-muted); }
.lcd-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.lcd-dot, .lcd-square { width: .75rem; height: .75rem; background: var(--lcd-class-0); }
.lcd-dot { border-radius: 50%; }
.lcd-square { background: var(--lcd-class-1); }
.lcd-line { width: 1.2rem; border-top: 2px solid var(--lcd-boundary); }
.lcd-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 680px) {
  .lcd-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lcd-playback { grid-column: 1 / -1; }
  .lcd-figures { grid-template-columns: 1fr; }
  .lcd-canvas { height: 320px; }
}

@media (max-width: 400px) {
  .lcd-widget { padding: .7rem; }
  .lcd-controls { grid-template-columns: 1fr; }
  .lcd-playback { grid-column: 1; grid-template-columns: 1fr 1fr; }
  .lcd-playback .lcd-speed-field { grid-column: 1 / -1; grid-row: 2; width: 120px; justify-self: start; }
  .lcd-canvas { height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .lcd-widget * { scroll-behavior: auto !important; transition: none !important; }
}