[hidden] { display: none !important; }
main { max-width: 1250px; padding-bottom: 80px; }
nav { flex-wrap: wrap; }
h1 { font-size: clamp(28px,4.5vw,46px); letter-spacing: -1px; }
.workspace { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
.workspace > section { min-width: 0; }
#taskText { font-size: 19px; line-height: 1.65; margin: 12px 0 20px; }
.it-settings { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; margin: 24px 0; }
.it-settings label { margin: 0; min-width: 150px; }
.it-settings select, .it-settings input { display: block; margin-top: 7px; font: inherit; max-width: 100%; color: #214b72; border: 2px solid #b5cddd; background: white; border-radius: 11px; padding: 9px 12px; }
.it-settings select { width: 100%; }
.it-settings input { width: 110px; }
.it-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.it-actions button, .it-link-button { font-size: 14px; }
.it-link-button { display: inline-block; background: #ffffffb8; border: 2px solid white; border-radius: 16px; padding: 12px 18px; color: #214b72; text-decoration: none; font-weight: bold; box-shadow: 0 4px 12px #24567e12; }
#fields input { width: 150px; max-width: 100%; }
#fields .result { display: block; margin-top: 6px; }
.question:has(input.correct) .result { color: #187858; }
.data-values { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; margin: 18px 0; }
.data-values span { text-align: center; font-size: 18px; font-weight: bold; background: #e5f1fa; border-radius: 9px; padding: 9px 4px; overflow-wrap: anywhere; }
textarea { display: block; width: 100%; resize: vertical; min-height: 100px; font: 16px Consolas, monospace; color: #214b72; background: white; border: 2px solid #b5cddd; border-radius: 12px; padding: 12px; }
.field-help { font-size: 13px; line-height: 1.6; color: #477b8f; }
#guide-steps { padding-left: 23px; }
#guide-steps li { line-height: 1.6; margin: 12px 0; overflow-wrap: anywhere; }
.it-results, .ggb-card { margin-top: 24px; min-width: 0; }
#frequency-table { overflow-x: auto; }
.it-data-table { border-collapse: collapse; width: 100%; margin: 20px 0; }
.it-data-table caption { font-weight: bold; padding-bottom: 12px; text-align: left; }
.it-data-table th, .it-data-table td { text-align: left; padding: 9px 7px; border-bottom: 1px solid #d3e3ee; font-size: 14px; }
.it-data-table thead { background: #e5f1fa; }
#boxplot svg { display: block; width: 100%; max-width: 750px; margin: 24px auto; }
#boxplot text { fill: #214b72; font: 13px 'Trebuchet MS',sans-serif; }
.command-form { margin: 22px 0; }
.command-form > div { display: flex; gap: 10px; flex-wrap: wrap; }
#ggb-command { flex: 1; min-width: 180px; font: 17px Consolas,monospace; width: auto; }
#ggb-element { width: 100%; min-height: 500px; border: 1px solid #c6dce9; border-radius: 16px; overflow: hidden; background: #f9fcff; }
#ggb-status { padding: 12px; background: #e5f1fa; border-radius: 12px; }
#ggb-feedback { white-space: pre-line; line-height: 1.6; font-weight: bold; }
.it-actions .check { width: auto; margin-top: 0; }
@media(max-width:850px) { .workspace { grid-template-columns: 1fr; } }
@media(max-width:600px) { #taskText { font-size: 17px; } .tabs button { font-size: 14px; padding: 10px 12px; } .it-settings { gap: 12px; } .it-settings label { min-width: 0; flex: 1 1 135px; } .it-settings select { font-size: 14px; } .command-form > div { display: block; } #ggb-command { width: 100%; min-width: 0; } #send-command { margin-top: 10px; width: 100%; } .it-data-table { min-width: 360px; } }