/* The default experience asks for one behavior. The library is an optional reference. */
[hidden]{display:none!important}
.practice-options{margin-left:auto;position:relative}.practice-options summary{cursor:pointer;padding:10px 14px}.practice-options>div{position:absolute;right:0;top:45px;z-index:10;min-width:240px;background:#fff;border:1px solid #cbd5e1;border-radius:12px;padding:12px;box-shadow:0 8px 30px #17255412;display:grid;gap:10px}.practice-options a{padding:8px}
body.focus{background:#f7f8fa}body.focus header{max-width:1120px;margin:auto;padding:16px 24px;border:0}body.focus main{max-width:1120px;padding:0 24px 40px;margin:auto}body.focus .brand{font-size:14px;color:#667085}body.focus .intro,body.focus .curriculum,body.focus .evidence,body.focus .session-bar,body.focus .timer,body.focus #stage,body.focus #why,body.focus #main,body.focus footer,body.focus #next-exercise,body.focus #review-status{display:none}body.focus .studio{display:block;border:0;background:transparent;box-shadow:none}body.focus .workbench{padding:0}body.focus .exercise-heading{padding:18px 0 20px}body.focus #title{font-size:29px;line-height:1.25;letter-spacing:-.6px;margin:0}body.focus .panes{grid-template-columns:minmax(240px,.8fr) minmax(0,1.4fr);gap:24px}body.focus .brief-pane,body.focus .code-pane{border:1px solid #dfe3e9;border-radius:12px;background:#fff;padding:20px;min-width:0}body.focus .brief-pane>h3{display:none}body.focus #brief h1{font-size:20px}body.focus #brief p{font-size:16px;line-height:1.65}body.focus #editor{min-height:300px;height:360px;font-size:15px;line-height:1.65;border-radius:8px}body.focus #notice{padding:10px 0;min-height:0;font-size:15px;line-height:1.5;color:#475569;background:transparent;border:0}body.focus #notice:empty{display:none}body.focus .actions{gap:8px}body.focus #stop:disabled{display:none}body.focus .output-heading{display:none}body.focus #first-feedback{font-size:15px;line-height:1.5;overflow-wrap:anywhere}body.focus #full-output{margin-top:12px}body.focus #full-output summary{font-size:14px;color:#475569;cursor:pointer}body.focus #output{max-height:220px;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}body.focus #journey-feedback{margin:20px 0;background:#edf5ff;border:1px solid #bdd5f3;border-radius:12px;padding:20px}body.focus #journey-feedback p{margin:0 0 12px;font-size:17px}body.focus .personal-notes{margin-top:20px;color:#475569}body.focus .personal-notes summary{cursor:pointer}body.focus .reflection{border:0;padding:12px 0}body.focus .reflection h3,body.focus .reflection-footer{display:none}body.focus #rescue{display:none}body.focus .file-bar{font-size:13px}body.focus #editor-help{font-size:12px}body.focus #hint-details{margin-top:18px}body.focus #hint-details summary{min-height:40px;display:flex;align-items:center;cursor:pointer}body.focus button{min-height:44px}body.focus #syntax{order:2}body.focus #run{order:1}body.focus #stop{order:3}
body:not(.focus) #full-output{display:block}body:not(.focus) #full-output>summary{display:none}
@media(max-width:760px){body.focus header{padding:12px 16px}body.focus .brand{display:none}body.focus main{padding:0 16px 24px}body.focus .panes{grid-template-columns:1fr;gap:14px}body.focus .exercise-heading{padding:12px 0}body.focus #title{font-size:25px}body.focus .brief-pane,body.focus .code-pane{padding:16px}body.focus #editor{height:320px;min-height:240px}.practice-options>div{right:0;min-width:210px}}

body.focus .file-bar,body.focus #save-status,body.focus #editor-help{color:#475569}body.focus #runtime-state{color:#475569}body.focus #editor{font-size:14px;line-height:1.55}
.practice-options{margin-top:0;border:0;padding:0}