/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - Neural Network Playground                                - */
/* -                                                          - */
/* - Author: Claude                                           - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
#playground-canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
  background: var(--background-color-surface); }

.playground-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem; }

.control-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; }
  .control-group label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-color-muted); }
  .control-group select,
  .control-group input[type="range"] {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-color-surface);
    background: var(--background-color-surface);
    border: 1px solid var(--draw-color-surface);
    border-radius: 4px;
    cursor: pointer; }
    .control-group select:focus,
    .control-group input[type="range"]:focus {
      outline: none;
      border-color: var(--draw-color-primary); }
  .control-group input[type="range"] {
    padding: 0;
    height: 24px; }

.control-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; }
  .control-buttons .is-start {
    display: block; }
  .control-buttons .is-pause {
    display: none; }
  .control-buttons.is-running .is-start {
    display: none; }
  .control-buttons.is-running .is-pause {
    display: block; }

.lr-display {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-color-muted); }

.playground-stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; }
  .playground-stats .stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem; }
    .playground-stats .stat-row .stat-label {
      color: var(--text-color-muted); }
    .playground-stats .stat-row .stat-value {
      font-weight: 600;
      font-family: monospace;
      color: var(--text-color-surface); }

.playground-instructions {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-color-surface); }
  .playground-instructions p {
    margin-bottom: 0.75rem; }
  .playground-instructions ul {
    margin: 0;
    padding-left: 1.25rem; }
    .playground-instructions ul li {
      margin-bottom: 0.5rem; }
  .playground-instructions .key {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    font-size: 0.75rem;
    font-family: monospace;
    background: var(--draw-color-surface);
    border-radius: 3px; }
  .playground-instructions .class-1 {
    color: #3498db;
    font-weight: 600; }
  .playground-instructions .class-2 {
    color: #e67e22;
    font-weight: 600; }

@media (max-width: 768px) {
  .control-buttons {
    flex-direction: row;
    flex-wrap: wrap; }
    .control-buttons .button {
      flex: 1 1 auto;
      min-width: 100px; } }