/* Chapter-two illustrations: a compact, original Studio teaching environment. */
.st-lab { width:100%; overflow:hidden; border:2px solid #385675; border-radius:22px; background:#142940; box-shadow:0 7px 0 #0a1b2c,0 18px 36px #07172d25; color:#eaf5ff; text-align:left; }
.st-chrome { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 16px; border-bottom:1px solid #34506c; background:#203b57; }
.st-chrome strong { font-size:13px; font-weight:400; }
.st-chrome > span:last-child { margin-left:auto; font-size:10px; color:#b9d5e7; }
.st-logo { color:#76defa; font-size:24px; line-height:1; }
.st-demo-body { display:grid; grid-template-columns:minmax(150px,.85fr) minmax(190px,1.2fr); min-height:214px; }
.st-panel-label { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:34px; padding:8px 12px; color:#b4d5e6; font-family:inherit; font-size:11px; line-height:1.35; }
.st-explorer,.st-properties { min-width:0; border-right:1px solid #34506c; background:#14283d; }
.st-tree { padding:2px 0 8px; }
.st-tree-row { display:flex; align-items:center; gap:7px; min-height:29px; padding:5px 8px 5px calc(9px + var(--depth)*12px); font:11px/1.45 ui-monospace,Consolas,monospace; color:#d2e4f3; overflow-wrap:anywhere; border-left:3px solid transparent; }
.st-tree-glyph { flex:none; color:#82d1f8; }.st-tree-glyph.is-Script { color:#bdadff; }.st-tree-glyph.is-Folder,.st-tree-glyph.is-ServerStorage {color:#ffda8b;}
.st-tree-row.is-selected { background:#25516b; border-left-color:#67dcfa; color:#fff; }
.st-tree-row.is-path { background:#25475b; color:#bbf1ff; }
.st-tree-row b { margin-left:auto; font-size:20px; line-height:.6; color:#ffe49b; }
.st-reference { display:grid; gap:5px; padding:8px 12px; border-top:1px solid #34506c; }.st-reference small {font-size:10px;color:#b4d5e6;}.st-reference code {font-size:12px;color:#ffdd96;overflow-wrap:anywhere;}
.st-world { position:relative; min-width:0; min-height:214px; overflow:hidden; background:radial-gradient(ellipse at 65% 23%,#375984,#203451 64%,#192d46); }
.st-world svg { display:block; width:100%; height:214px; overflow:visible; }
.st-world-label { position:absolute; top:10px; left:12px; z-index:1; color:#c8e3f6; font-size:10px; }
.st-world-badge { position:absolute; right:10px; bottom:10px; padding:5px 9px; border:1px solid #4c8494; border-radius:7px; color:#c1f2df; background:#193b4b; font:11px/1.4 ui-monospace,Consolas,monospace; }
.st-world.is-playing { background:radial-gradient(ellipse at 50% 10%,#37607b,#203451 70%); }
.st-part { animation:stMaterialize .48s calc(var(--entry,0)*.09s) both; transform-origin:0 30px; }
.st-part.is-falling { animation:stFall 1.1s .25s cubic-bezier(.5,.05,.7,.6) both; }.st-part.is-ghost { opacity:.25!important; }
.st-selection { animation:stSelection 1.2s ease-in-out 2; }
.st-properties dl { margin:0; padding:0 10px 12px; }
.st-properties dl > div { display:grid; grid-template-columns:minmax(65px,.9fr) minmax(65px,1.1fr); gap:8px; padding:9px 2px; border-top:1px solid #2a445e; font:11px/1.5 ui-monospace,Consolas,monospace; }
.st-properties dt { color:#bed9e9;overflow-wrap:anywhere; }.st-properties dd { margin:0;color:#fff;overflow-wrap:anywhere; }
.st-code { min-width:0; background:#0f2136; border-top:1px solid #34506c; }
.st-demo-body>.st-code { border-top:0;border-right:1px solid #34506c; }
.st-code pre { padding:2px 0 12px; margin:0; overflow:auto; text-align:left; scrollbar-width:thin; }
.st-code-line { display:flex; padding:4px 12px 4px 0; min-height:24px; color:#e9f3ff; font:12px/1.55 ui-monospace,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.st-code-line i { flex:0 0 29px; text-align:center; color:#7b9db7; font-style:normal; user-select:none; }
.st-code-line > span {min-width:0;}
.st-code-line b {font-weight:400;}.st-token-keyword {color:#e3b8ff;}.st-token-string {color:#a4efc1;}.st-token-number {color:#ffd69a;}.st-token-comment {color:#a6bac9;}
.st-code-line.is-active { background:#194862;border-left:3px solid #65dfff; }.st-code-line.is-error { background:#512a42; border-left:3px solid #ff93ac; }
.st-output { border-top:1px solid #34506c; background:#10263b; }.st-output pre { margin:0; padding:0 14px 12px; color:#a4f1cf; font:12px/1.6 ui-monospace,Consolas,monospace; white-space:pre-wrap;overflow-wrap:anywhere;animation:stOutput .3s ease-out; }.st-output.is-error pre {color:#ffb3c6;}
.st-caption { margin:0; padding:13px 16px; min-height:49px; border-top:1px solid #34506c; color:#d9eefa; font-size:13px; line-height:1.55; background:#19334c; }
.st-controls { display:flex; gap:7px; padding:10px; background:#13263b; border-top:1px solid #34506c; }
.st-controls button { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:44px; padding:8px; border:1px solid #496780; border-radius:10px; background:#243e57; color:#d9ebf8; font:11px/1.35 'Fredoka One',sans-serif; cursor:pointer; box-shadow:0 3px 0 #0c1b2b; }
.st-controls button>span { display:grid; place-items:center; flex:0 0 18px; height:18px; border-radius:50%; background:#ffffff12; font-size:10px; }
.st-controls button[aria-pressed=true] { background:#126086; border-color:#69d9ff; color:#fff; }
.st-controls button:hover { background:#31516b; }.st-controls button:focus-visible,.st-script-overview summary:focus-visible { outline:3px solid #ffe3a0;outline-offset:3px; }
.st-conversion { display:flex; align-items:center; justify-content:center; gap:12px; padding:18px 12px; grid-column:1/-1; background:#223d57; }
.st-conversion code { padding:8px 12px;border:1px solid #6a769d;border-radius:9px;color:#e5ddff;font:13px/1.4 ui-monospace,Consolas,monospace;overflow-wrap:anywhere;min-width:0; }
.st-flow-arrow {color:#91ddf5;}
.st-demonstration.is-types .st-demo-body {grid-template-columns:1fr;min-height:0;}
.st-demonstration.is-types .st-properties dl>div {grid-template-columns:1fr 1fr;}
.st-demonstration.is-world-only .st-world {grid-column:1/-1;}
.st-demonstration.is-types .st-properties {border-right:0;border-left:1px solid #34506c;}
.st-gauge {display:flex;align-items:center;gap:10px;padding:15px;color:#d3e9f5;font:12px/1.4 ui-monospace,Consolas,monospace;background:#183048;}
.st-gauge>div {position:relative;flex:1;height:8px;border-radius:10px;background:#446278;}.st-gauge i {position:absolute;left:var(--gauge);top:50%;width:17px;height:17px;transform:translate(-50%,-50%);border:3px solid #e0faff;border-radius:50%;background:#33b8e6;}.st-gauge strong {padding-left:10px;color:#99ebcd;}
.st-boundaries {display:grid;grid-template-columns:1fr 35px 1fr;grid-column:1/-1;gap:5px;align-items:center;padding:18px 12px;background:radial-gradient(ellipse at top,#304f79,#192d46);}
.st-boundary {display:grid;justify-items:center;gap:10px;padding:13px 8px;border:1px solid #607599;border-radius:15px;background:#263852;min-height:186px;text-align:center;min-width:0;}.st-boundary.is-client {background:#203e4c;border-color:#438592;}
.st-device {font-size:26px;color:#b2bdff;}.st-boundary.is-client .st-device {color:#a2e9ec;}.st-boundary strong {font-size:13px;font-weight:400;}.st-storage {font:11px/1.4 ui-monospace,Consolas,monospace;color:#b9d5e9;overflow-wrap:anywhere;}.st-boundary-item {padding:8px 12px;border-radius:8px;background:#43506a;color:#ffe2a2;font:12px/1.4 ui-monospace,Consolas,monospace;animation:stOutput .4s ease-out;}.st-empty-object {font-size:25px;color:#709399;}.st-boundary-link {font-size:28px;text-align:center;color:#f7b0c2;}.st-boundary-link.is-shared {color:#9bf3d4;}
.st-script-overview {border-top:1px solid #34506c;}.st-script-overview summary {padding:13px 16px;min-height:44px;font-size:12px;cursor:pointer;color:#9fddf6;}.st-script-overview .st-code {max-height:260px;overflow:auto;}
.ll-exercise .st-exercise-context {margin:0 0 12px;padding:9px 13px;border:1px solid #47728e;border-radius:10px;background:#1e3b52;color:#d7ebf6;font-size:12px;line-height:1.5;}
.lesson-lab[data-lesson-id^="roblox-studio-"] .ll-visual {width:min(680px,100%);margin-inline:auto;}
.lesson-lab[data-lesson-id^="roblox-studio-"] .ll-stage.is-aside {--ll-visual-width:680px;}
.lesson-lab[data-lesson-id^="roblox-studio-"] .ll-code-lines {font-size:14px;}
@keyframes stMaterialize {from{transform:translateY(-12px) scale(.88);opacity:0;}to{transform:translateY(0) scale(1);}}
@keyframes stFall {from{transform:translateY(-32px);}to{transform:translateY(50px);}}
@keyframes stSelection {50%{stroke-opacity:.45;}}
@keyframes stOutput {from{opacity:.2;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media(max-width:767px) {
 .st-lab {border-radius:16px;}.st-chrome {padding:8px 11px;}.st-chrome>span:last-child {font-size:9px;}
 .st-demo-body {grid-template-columns:minmax(118px,1fr) minmax(136px,1.05fr);min-height:184px;}
 .st-world,.st-world svg {min-height:184px;height:184px;}.st-tree-row {font-size:9px;padding-left:calc(4px + var(--depth)*8px);gap:4px;}.st-tree-row b {display:none;}
 .st-properties dl {padding-inline:6px;}.st-properties dl>div {font-size:9px;grid-template-columns:minmax(50px,.9fr) minmax(45px,1.1fr);gap:5px;}
 .st-code-line {font-size:11px;}.st-code-line i {flex-basis:23px;}.st-caption {font-size:12px;padding:11px 12px;}
 .st-controls {gap:5px;padding:8px;}.st-controls button {font-size:10px;padding:7px 5px;gap:4px;}.st-controls button>span {display:none;}
 .st-conversion {gap:7px;padding:12px 8px;}.st-conversion code {font-size:11px;padding:7px;}.st-output pre {font-size:11px;}
 .st-demonstration.is-code .st-demo-body,.st-demonstration.is-debug .st-demo-body,.st-demonstration.is-output .st-demo-body,.st-demonstration.is-test .st-demo-body {grid-template-columns:1fr;}
 .st-demonstration.is-code .st-world,.st-demonstration.is-debug .st-world,.st-demonstration.is-output .st-world,.st-demonstration.is-test .st-world {display:none;}
 .st-demonstration.is-mission:not(.is-transfer) .st-demo-body {grid-template-columns:1fr;}
 .st-demonstration.is-mission:not(.is-transfer) .st-world,.st-demonstration.is-mission:not(.is-transfer) .st-properties,.st-demonstration.is-mission:not(.is-transfer) .st-explorer {display:none;}
 .lesson-lab[data-lesson-id^="roblox-studio-"] .ll-code-lines {font-size:12px;}
}
@media(prefers-reduced-motion:reduce) {.st-lab * {animation:none!important;transition:none!important;}.st-part.is-falling {transform:translateY(50px);}}