.scenario-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin:0 0 18px; font-size:11px; }
.scenario-toolbar>div { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.scenario-toolbar button,.file-button { font-size:11px; }
.file-button { position:relative; display:inline-flex; align-items:center; cursor:pointer; border:1px solid var(--border); border-radius:7px; padding:9px 13px; background:var(--cor-cinza-claro); color:var(--cor-grafite); }
.file-button input { position:absolute; width:1px; height:1px; opacity:0; }
.file-button:focus-within { outline:3px solid var(--cor-teal); outline-offset:3px; }
.timeline-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 20px 0; }
.timeline-tools button { font-size:11px; }
.timeline-tools>span { font-size:10px; color:var(--cor-cinza-escuro); }
.timeline-tools button[aria-pressed="true"],.answer-options button[aria-pressed="true"] { border-color:var(--cor-teal); box-shadow:inset 0 -3px var(--cor-teal); }
.event-before-after { overflow-x:auto; margin-top:15px; }
.event-before-after caption { text-align:left; font-size:12px; font-weight:600; padding:4px 0 8px; }
.event-before-after table { min-width:300px; }
.event-before-after th,.event-before-after td { padding:7px 10px; }
.event-before-after .signal-changed td { font-weight:700; color:var(--cor-teal-escuro); }
.sampled-inputs { border-left:3px solid var(--cor-teal); padding:8px 12px; }
.schematic-wrap .expanded-gates { width:100%; min-width:800px; height:auto; }
.schematic-wrap .master-slave { min-width:1250px; }
.schematic-wrap .expanded-gates text { font-size:14px; }
.schematic-wrap .expanded-gates .gate-caption { font-size:10px; }
.schematic-wrap .expanded-gates .module-title { font-size:15px; font-weight:600; }
.schematic-wrap[data-representation="gates"] #schematic .pin.high { fill:#F8A024; }
.schematic-wrap.diagram-large svg { min-width:1450px; height:auto; }
.schematic-wrap:focus-visible,.wave-scroll:focus-visible { outline:2px solid var(--cor-teal); outline-offset:-2px; }
.comparison-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:20px; }
.comparison-controls label { display:flex; align-items:center; gap:7px; font-size:12px; }
.comparison-intro,.comparison-conclusion { margin:0 20px 18px; font-size:13px; }
.comparison-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 20px 18px; }
.comparison-cards article { border:1px solid var(--border); border-radius:8px; padding:18px; }
.comparison-cards h3 { margin:0 0 12px; font-size:15px; }
.comparison-q { font-size:20px; color:var(--cor-teal-escuro); }
.comparison-q strong { font-size:30px; }
.comparison-cards p { margin:10px 0 0; font-size:12px; }
.comparison-guide { margin:0 20px 20px; }
.comparison-guide summary { padding:15px 0; }
.comparison-guide li { font-size:13px; line-height:1.8; }
.comparison-panel .timeline-controls label { display:flex; gap:15px; align-items:center; flex:1; }
.comparison-panel .timeline-controls input { width:100%; }
.exercise-list { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.exercise-card { border:1px solid var(--border); border-radius:9px; padding:20px; }
.exercise-card h3 { margin-top:12px; }
.exercise-card p { font-size:12px; }
.stimulus-list { display:flex; flex-wrap:wrap; gap:5px 28px; padding-left:23px; }
.stimulus-list li { font-size:12px; }
.answer-options { display:flex; gap:8px; flex-wrap:wrap; }
.answer-options button { min-width:44px; min-height:40px; }
.exercise-feedback { margin-top:15px; border-top:1px solid var(--border); padding-top:15px; }
.exercise-feedback button { font-size:12px; }
[data-theme="dark"] :is(.file-button,.exercise-card,.comparison-cards article) { background:var(--cor-grafite); color:var(--cor-branco); }
[data-theme="dark"] :is(.comparison-q,.event-before-after .signal-changed td) { color:var(--cor-ciano); }
[data-theme="dark"] .timeline-tools>span { color:var(--cor-cinza-claro); }
@media(max-width:850px) { .exercise-list { grid-template-columns:1fr; } .scenario-toolbar>span { display:none; } }
@media(max-width:650px) {
 .topbar { height:auto; min-height:48px; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; gap:8px; }
 .scenario-toolbar { margin-top:8px; } .scenario-toolbar>div { gap:6px; }
 .scenario-toolbar button,.file-button { padding:9px; font-size:10px; }
 .comparison-cards { grid-template-columns:1fr; margin:0 12px 15px; }
 .comparison-controls { padding:12px; gap:8px; }
 .comparison-controls button { font-size:11px; }
 .comparison-panel .panel-header { flex-wrap:wrap; }
 .comparison-panel .panel-header button { font-size:11px; }
 .timeline-tools { padding:10px 12px 0; }
 .timeline-tools>span { width:100%; }
 .exercise-card { padding:14px; }
 .legend { flex-wrap:wrap; }
}
@media(max-width:400px) { .brand { font-size:17px; padding-left:0; } .brand-images,.brand-images img { width:38px; height:38px; } .brand-sub { font-size:6px; } .sidebar nav { right:8px; } .sidebar .nav-item { padding:8px 6px; } }
@media print { .scenario-toolbar,.timeline-tools,.comparison-controls,.answer-options { display:none; } .exercise-list,.comparison-cards { display:block; } .exercise-card { break-inside:avoid; margin-bottom:20px; } }

/* Keep the document fluid; only diagrams and tables scroll horizontally. */
.workspace, main, .lab-grid, .panel, .bottom-grid, .learning-grid, .exercise-list { min-width:0; }
.panel-header { flex-wrap:wrap; gap:12px; }
.page-heading, .toolbar, .state-panel { flex-wrap:wrap; }
.scenario-toolbar > div, .timeline-controls, .event-inspector-heading { min-width:0; }
.schematic-wrap, .wave-scroll, .event-before-after { max-width:100%; overscroll-behavior-x:contain; }
@media(max-width:850px){
 .sidebar { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
 .sidebar nav { position:static; display:flex; flex-wrap:wrap; gap:4px; margin-left:auto; }
 .sidebar .brand { flex:0 1 auto; max-width:100%; }
 .sidebar .nav-item { min-height:44px; }
}
@media(max-width:400px){
 .sidebar { padding:10px 12px; }
 .sidebar nav { width:100%; margin-left:0; justify-content:space-between; }
 .sidebar .nav-item { flex:1; justify-content:center; }
 .device-select { flex-wrap:wrap; min-width:0; flex-basis:100%; }
 .device-select select { min-width:0; max-width:100%; }
 .topbar { padding:8px 12px; }
 .topbar > div { min-width:0; display:flex; flex-wrap:wrap; gap:6px; }
 .timeline-controls { flex-wrap:wrap; }
 .timeline-controls input { flex-basis:100%; }
 .state-heading { width:100%; }
 .output-card { flex:1; min-width:0; }
}
@media(pointer:coarse){button,select,.file-button{min-height:44px}select,input{font-size:16px}}