@import '../../assets/css/experiment-lab.css';

:root { --course-accent: #6d7cff; --course-soft: #dfe3ff; --course-dark: #252c78; --orange: #6d7cff; --lime: #c9f45b; --teal: #252c78; --blue: #3949d8; }

.css-controls { display: flex; flex-wrap: wrap; gap: 16px; margin-block: 24px; }
.css-controls label { display: grid; gap: 8px; font-weight: 800; min-width: 0; flex: 1 1 220px; }
.css-controls select { width: 100%; min-width: 0; padding: 12px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font: inherit; }
.css-task, .css-editor-panel, .css-preview-panel { min-width: 0; padding: 20px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper-raised); box-shadow: 4px 4px 0 var(--ink); }
.css-task { margin-bottom: 24px; }
.css-task h2, .css-preview-panel h2 { font-size: 24px; margin: 0 0 12px; }
.css-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.css-workspace label { display: block; font-weight: 800; margin-bottom: 12px; }
#css-editor { width: 100%; min-width: 0; min-height: 280px; resize: vertical; padding: 14px; background: var(--paper); color: var(--ink); font: 13px/1.7 var(--mono); border: 2px solid var(--ink); tab-size: 2; }
.css-task pre, .css-solution pre { max-width: 100%; overflow: auto; padding: 16px; background: var(--paper); border: 1px solid var(--ink); font: 13px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.css-task summary, .css-solution summary { cursor: pointer; font-weight: 800; }
.css-solution { padding-top: 16px; border-top: 2px solid var(--ink); }
.css-preview-scroll { width: 100%; overflow: auto; border: 2px dashed var(--ink); background: var(--course-soft); margin-block: 16px; }
.css-preview-scroll iframe { display: block; max-width: none; height: 450px; border: 0; background: white; }
.css-status { min-height: 3em; font-size: 13px; }
.css-measurements { margin-top: 24px; }
[data-css-focus][hidden] { display: none; }
.css-workspace, .css-task { overflow-wrap: anywhere; }
@media (min-width: 1300px) { .css-workspace { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
@media (max-width: 380px) { .css-task, .css-editor-panel, .css-preview-panel { padding: 12px; } }

@media (max-width: 760px) {
  .hero h1 { font-size: clamp(44px, 13vw, 56px); }
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { width: 100%; min-width: 0; white-space: normal; text-align: center; }
  .skill-visual { max-width: calc(100vw - 76px); }
  .skill-visual__card { padding: 18px; box-shadow: 7px 8px 0 var(--ink); }
  .skill-visual__row { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding-inline: 10px; }
  .skill-visual__row b { width: 38px; }
}