.steps-brief{border-left:4px solid #187b70;padding:10px 14px;background:#eef8f5}.steps-brief p{margin:.4em 0}.steps-roles{display:flex;gap:8px;flex-wrap:wrap}.steps-roles span{background:white;border:1px solid #bddbd3;border-radius:6px;padding:6px 9px}.steps-roles code{font-weight:bold;margin-right:5px}.learning-steps{padding:14px;border-top:1px solid #bddbd3}.learning-steps summary{font-weight:bold;cursor:pointer}.steps-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.steps-code{max-height:240px;overflow:auto;background:#f3f7f6!important;color:#163a35!important;padding:8px!important;line-height:1.7}.steps-code span{display:block;white-space:pre}.steps-code b{display:inline-block;width:2em;color:#586f6b;font-weight:normal}.steps-code .current{background:#ffe6a2;outline:1px solid #bd8f25}.learning-steps table{width:100%;border-collapse:collapse}.learning-steps td,.learning-steps th{text-align:left;border-bottom:1px solid #d5e4e0;padding:7px;overflow-wrap:anywhere}.learning-steps td small{display:block}.learning-steps fieldset{border:1px solid #bddbd3;border-radius:8px;margin:14px 0;padding:12px;min-width:0}.learning-steps label{display:block;margin:8px 0}.learning-steps input[type=radio]{width:auto;min-height:0}.steps-state{font-weight:bold}.steps-check:empty{display:none}@media(max-width:650px){.steps-roles{display:grid}.learning-steps{padding:10px}.steps-code{font-size:12px}}

/* Keep the short check adjacent to output; detailed tracing is optional. */
.learning-steps{min-width:0;max-width:100%;box-sizing:border-box}
.steps-trace{margin-top:14px;border-top:1px solid #d5e4e0;padding-top:10px}
.steps-trace>summary{line-height:1.6;padding:8px 0}
.steps-check fieldset{margin:8px 0;max-width:100%;box-sizing:border-box}
.steps-check legend{font-weight:700;white-space:normal;overflow-wrap:anywhere;max-width:100%}
.steps-check label{display:flex;gap:8px;align-items:flex-start;overflow-wrap:anywhere;line-height:1.6}
.steps-check input[type=radio]{flex:0 0 auto;margin-top:.35em}
.learning-steps table{table-layout:fixed}
.learning-steps td,.learning-steps th{white-space:normal;overflow-wrap:anywhere;min-width:0}
.learning-steps td code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.learning-steps pre{max-width:100%;box-sizing:border-box;overflow:auto}
.steps-snapshot{min-width:0;max-width:100%}
.steps-controls button,.steps-check button{max-width:100%;white-space:normal}
.steps-check>p:last-child{font-size:.85rem;margin:6px 0}
.learning-steps #feedback:empty{display:none}
.workspace>*{min-width:0}
.run-result-guide,.run-follow,#feedback{overflow-wrap:anywhere}
#feedback .button,#feedback button{white-space:normal;max-width:100%;box-sizing:border-box}
@media(max-width:850px){.learning-steps{padding:10px}.learning-steps td,.learning-steps th{padding:6px;font-size:.9rem}}

.lesson-back{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:10px 0 0}.lesson-back span{font-size:.85rem;overflow-wrap:anywhere;min-width:0}.lesson-back .button{white-space:normal;max-width:100%;box-sizing:border-box}

.list-picture{margin:10px 0;background:white;padding:12px;border-radius:8px}.list-cells{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.list-cells span{border:2px solid #187b70;border-radius:6px;padding:8px 16px}.list-picture table{width:100%;table-layout:fixed;border-collapse:collapse}.list-picture td,.list-picture th{border:1px solid #bddbd3;padding:8px;text-align:center;overflow-wrap:anywhere}