/* Chapter 32.6: free Robot and Turtle studios. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
kbd{display:inline-block;min-width:22px;padding:1px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--panel2);color:var(--ink);font:10px "JetBrains Mono",monospace;text-align:center}
.exs-studio{--exs-soft-cyan:color-mix(in srgb,var(--cyan) 11%,transparent);--exs-soft-amber:color-mix(in srgb,var(--amber) 12%,transparent);--exs-soft-green:color-mix(in srgb,var(--green) 11%,transparent);--exs-soft-red:color-mix(in srgb,var(--red) 11%,transparent);margin-top:20px;border:1px solid var(--line);border-radius:18px;background:var(--bg2);overflow:hidden;box-shadow:0 22px 55px color-mix(in srgb,var(--bg) 72%,transparent)}
.exs-studio button,.exs-studio input,.exs-studio select,.exs-studio textarea{font:inherit}
.exs-studio button:focus-visible,.exs-studio input:focus-visible,.exs-studio select:focus-visible,.exs-studio textarea:focus-visible,.exs-studio summary:focus-visible,.exs-block:focus-visible,.exs-robot-cell:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.exs-studio-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;border-bottom:1px solid var(--line);background:linear-gradient(120deg,var(--panel),var(--bg2))}
.exs-studio-head h3{margin:2px 0 0;color:var(--ink);font-size:20px;letter-spacing:-.02em}
.exs-eyebrow,.exs-kicker{display:block;color:var(--cyan);font:10px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
.exs-save{flex:0 0 auto;padding:7px 10px;border:1px solid color-mix(in srgb,var(--green) 45%,var(--line));border-radius:999px;background:var(--exs-soft-green);color:var(--green);font:10px "JetBrains Mono",monospace}
.exs-save.saving{border-color:color-mix(in srgb,var(--amber) 45%,var(--line));background:var(--exs-soft-amber);color:var(--amber)}
.exs-projectbar,.exs-configbar,.exs-blockbar{display:flex;align-items:end;gap:8px;flex-wrap:wrap;padding:12px 15px;border-bottom:1px solid var(--line);background:var(--panel)}
.exs-projectbar .btn-c,.exs-configbar .btn-c,.exs-blockbar .btn-c{min-height:42px;padding:9px 12px}
.exs-project-spacer{flex:1 1 20px}
.exs-field{display:grid;gap:4px;color:var(--muted);font:9px "JetBrains Mono",monospace;letter-spacing:.04em;text-transform:uppercase}
.exs-field input,.exs-field select{min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg2);color:var(--ink);font:12px "JetBrains Mono",monospace;text-transform:none}
.exs-field input{width:88px}
.exs-example-field select{min-width:225px}
.exs-file{display:none}
.exs-configbar{align-items:center;justify-content:space-between;background:var(--bg2)}
.exs-dimensions,.exs-limits{display:flex;align-items:end;gap:9px;flex-wrap:wrap}
.exs-limits span,.exs-limits-inline{padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font:9px "JetBrains Mono",monospace;text-transform:uppercase}

.exs-tools{display:flex;align-items:stretch;gap:7px;flex-wrap:wrap;margin:0;padding:12px 15px 14px;border:0;border-bottom:1px solid var(--line);background:var(--bg2)}
.exs-tools legend{width:100%;padding:0;color:var(--muted);font:9px "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.exs-tools button{display:flex;align-items:center;gap:7px;min-height:42px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .15s}
.exs-tools button:hover{border-color:var(--cyan);color:var(--ink);transform:translateY(-1px)}
.exs-tools button[aria-pressed="true"]{border-color:var(--cyan);background:var(--exs-soft-cyan);color:var(--cyan)}
.exs-tool-icon{display:grid;place-items:center;width:22px;height:22px;border:1px solid var(--line);border-radius:6px;font:700 10px "JetBrains Mono",monospace}
.exs-tool-icon.goal{color:var(--green)}.exs-tool-icon.wall{border-width:0;color:var(--muted);font-size:20px}.exs-tool-icon.initial{background:var(--amber)}.exs-tool-icon.target{background:repeating-linear-gradient(135deg,var(--violet) 0 3px,transparent 3px 6px)}.exs-tool-icon.erase{color:var(--red);font-size:16px}

.exs-robot-layout,.exs-turtle-layout{display:grid;grid-template-columns:minmax(340px,1.08fr) minmax(340px,.92fr);min-width:0}
.exs-turtle-layout{grid-template-columns:minmax(360px,.88fr) minmax(390px,1.12fr)}
.exs-panel{min-width:0;padding:17px;background:var(--bg2)}
.exs-panel+.exs-panel{border-left:1px solid var(--line)}
.exs-panel-title{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:10px}
.exs-panel-title h4{margin:3px 0 0;color:var(--ink);font-size:16px}
.exs-coordinate,.exs-shortcut,.exs-block-count{padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--muted);font:10px "JetBrains Mono",monospace}
.exs-help{margin:0 0 12px;color:var(--muted);font-size:11px;line-height:1.6}

.exs-robot-board-wrap{max-width:680px;margin:0 auto;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:auto;overscroll-behavior:contain}
.exs-robot-board{--exs-cols:8;display:grid;grid-template-columns:repeat(var(--exs-cols),minmax(34px,1fr));min-width:min(100%,calc(var(--exs-cols) * 38px));aspect-ratio:var(--exs-cols)/var(--exs-rows,6);border:3px solid var(--muted);background:var(--line)}
.exs-robot-cell{position:relative;display:grid;place-items:center;min-width:34px;min-height:34px;margin:0;padding:0;border:1px solid var(--line);border-radius:0;background:var(--panel2);color:var(--ink);cursor:crosshair;isolation:isolate;touch-action:manipulation}
.exs-robot-cell:hover{z-index:4;background:color-mix(in srgb,var(--panel2) 82%,var(--cyan))}
.exs-robot-cell.selected{z-index:5;box-shadow:inset 0 0 0 2px var(--cyan)}
.exs-robot-cell.wall-up{border-top:5px solid var(--muted)}.exs-robot-cell.wall-right{border-right:5px solid var(--muted)}.exs-robot-cell.wall-down{border-bottom:5px solid var(--muted)}.exs-robot-cell.wall-left{border-left:5px solid var(--muted)}
.exs-robot-cell.initial-painted{background:color-mix(in srgb,var(--amber) 34%,var(--panel2))}
.exs-robot-cell.target-painted::before{content:"";position:absolute;z-index:-1;inset:3px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--violet) 42%,transparent) 0 4px,transparent 4px 8px);pointer-events:none}
.exs-robot-cell.runtime-painted{background:color-mix(in srgb,var(--amber) 48%,var(--panel2))}
.exs-cell-goal{position:absolute;right:3px;bottom:1px;color:var(--green);font-size:18px;line-height:1}
.exs-cell-start{position:absolute;left:3px;top:2px;color:var(--muted);font:700 9px "JetBrains Mono",monospace}
.exs-cell-robot{position:relative;z-index:3;display:grid;place-items:center;width:58%;max-width:34px;aspect-ratio:1;border:1px solid var(--cyan);border-radius:7px;background:color-mix(in srgb,var(--cyan) 20%,var(--panel));color:var(--cyan);font:800 12px "JetBrains Mono",monospace;box-shadow:0 0 14px color-mix(in srgb,var(--cyan) 25%,transparent)}
.exs-robot-cell.refusal{animation:exs-refusal .35s ease-out 2;box-shadow:inset 0 0 0 3px var(--red)}
.exs-cell-fallback{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px;padding:9px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.exs-cell-fallback>span{color:var(--muted);font-size:11px}
.exs-cell-fallback .btn-c{min-height:38px;padding:7px 10px;font-size:11px}
.exs-edge-btn.outside{opacity:.45}
.exs-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:10px}
.exs-legend span{display:flex;align-items:center;gap:5px}.exs-legend i{display:inline-block;width:14px;height:14px;border:1px solid var(--line);border-radius:3px}.exs-legend i.initial{background:var(--amber)}.exs-legend i.target{background:repeating-linear-gradient(135deg,var(--violet) 0 3px,transparent 3px 6px)}.exs-legend i.goal{border-color:var(--green);border-radius:50%}.exs-legend i.wall{width:4px;border:0;border-radius:0;background:var(--muted)}

.exs-code-panel{display:flex;flex-direction:column}
.exs-source{width:100%;min-height:330px;max-height:650px;padding:13px;resize:vertical;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:12px/1.65 "JetBrains Mono",monospace;tab-size:2}
.exs-source:focus{border-color:var(--cyan)}
.exs-diagnostic{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:39px;margin-top:9px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font:11px/1.45 "JetBrains Mono",monospace}
.exs-diagnostic.ok{border-color:color-mix(in srgb,var(--green) 40%,var(--line));color:var(--green)}.exs-diagnostic.error{border-color:color-mix(in srgb,var(--red) 55%,var(--line));background:var(--exs-soft-red);color:var(--red)}
.exs-jump{flex:0 0 auto;padding:5px 8px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;font-size:10px;cursor:pointer}
.exs-language,.exs-generated{margin-top:9px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.exs-language summary,.exs-generated summary{padding:9px 11px;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer}
.exs-language>div{display:grid;gap:6px;padding:0 11px 11px}.exs-language code{display:block;padding:6px 8px;font-size:10px;white-space:normal}.exs-language span{color:var(--muted);font-size:10px;line-height:1.5}
.exs-runbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px}
.exs-runbar .btn-c{min-height:42px;padding:9px 12px}
.exs-feedback{min-height:43px;margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);font-size:11px;line-height:1.5}
.exs-feedback.success{border-color:color-mix(in srgb,var(--green) 45%,var(--line));background:var(--exs-soft-green);color:var(--green)}.exs-feedback.warning{border-color:color-mix(in srgb,var(--amber) 45%,var(--line));background:var(--exs-soft-amber);color:var(--amber)}.exs-feedback.failure{border-color:color-mix(in srgb,var(--red) 50%,var(--line));background:var(--exs-soft-red);color:var(--red)}
.exs-state-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.exs-state-grid>div{min-height:62px;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.exs-state-grid span{display:block;color:var(--muted);font:9px "JetBrains Mono",monospace;letter-spacing:.04em;text-transform:uppercase}.exs-state-grid strong{display:block;margin-top:5px;color:var(--ink);font:11px/1.45 "JetBrains Mono",monospace;overflow-wrap:anywhere}

.exs-trace-section{padding:0 15px 15px;border-top:1px solid var(--line);background:var(--bg2)}
.exs-trace-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px 8px}.exs-trace-title h4{margin:0;color:var(--ink);font-size:14px}.exs-trace-title span{color:var(--muted);font:10px "JetBrains Mono",monospace}
.exs-trace{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:var(--panel);scrollbar-color:var(--line) var(--panel);scrollbar-width:thin}
.exs-trace-empty{display:block;padding:24px 12px;color:var(--muted);font:11px "JetBrains Mono",monospace;text-align:center}
.exs-trace-table{width:100%;min-width:660px;border-collapse:collapse;table-layout:fixed;font:10px/1.45 "JetBrains Mono",monospace}
.exs-trace-table th{position:sticky;top:0;z-index:2;padding:8px;border-bottom:1px solid var(--line);background:var(--panel2);color:var(--muted);text-align:left;text-transform:uppercase}.exs-trace-table td{padding:7px 8px;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top;overflow-wrap:anywhere}.exs-trace-table tr.active td{background:var(--exs-soft-cyan);color:var(--cyan)}.exs-trace-table tr.refusal td,.exs-trace-table tr.limit td{background:var(--exs-soft-red);color:var(--red)}
.exs-trace-table .n{width:52px}.exs-trace-table .line{width:62px}.exs-trace-table .command{width:25%}

.exs-palette{display:flex;align-items:stretch;gap:7px;flex-wrap:wrap;padding:13px 15px;border-bottom:1px solid var(--line);background:var(--bg2)}
.exs-palette-label{align-self:center;margin-right:3px;color:var(--muted);font:9px "JetBrains Mono",monospace;text-transform:uppercase}
.exs-palette button{display:flex;align-items:center;gap:6px;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:11px;font-weight:700;cursor:pointer;transition:.15s}
.exs-palette button:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-1px)}.exs-palette button b{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--exs-soft-cyan);color:var(--cyan);font:14px "JetBrains Mono",monospace}
.exs-blockbar{align-items:center;background:var(--panel)}.exs-blockbar>span{flex:1 1 180px;color:var(--muted);font:10px "JetBrains Mono",monospace}.exs-blockbar .btn-c{min-height:38px;padding:7px 10px;font-size:11px}
.exs-block-tree{min-height:330px;max-height:650px;padding:10px;border:1px solid var(--line);border-radius:11px;background:var(--panel);overflow:auto;overscroll-behavior:contain}
.exs-block{position:relative;margin:0 0 7px;border-radius:9px}
.exs-block.selected>.exs-block-card{border-color:var(--cyan);box-shadow:0 0 0 2px var(--exs-soft-cyan)}
.exs-block-card{position:relative;display:flex;align-items:center;gap:8px;min-height:46px;padding:7px 9px;border:1px solid var(--line);border-left:4px solid var(--cyan);border-radius:8px;background:var(--panel2);color:var(--ink)}
.exs-block-card.turn{border-left-color:var(--violet)}.exs-block-card.pen{border-left-color:var(--green)}.exs-block-card.repeat{border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 6%,var(--panel2))}
.exs-drag-handle{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--muted);font:14px "JetBrains Mono",monospace;cursor:grab;touch-action:none}.exs-drag-handle:active{cursor:grabbing}
.exs-block-name{flex:1 1 auto;min-width:80px;font-size:12px;font-weight:800}.exs-block-card label{display:flex;align-items:center;gap:5px;color:var(--muted);font:9px "JetBrains Mono",monospace}.exs-block-card input{width:82px;min-height:34px;padding:6px 7px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);font:11px "JetBrains Mono",monospace}.exs-child-count{padding:3px 6px;border-radius:999px;background:var(--exs-soft-amber);color:var(--amber);font:9px "JetBrains Mono",monospace}
.exs-block-children{margin:5px 0 7px 19px;padding:6px 0 1px 12px;border-left:2px solid color-mix(in srgb,var(--amber) 38%,var(--line))}
.exs-dropzone{display:grid;place-items:center;min-height:34px;margin:3px 0 6px;padding:5px;border:1px dashed var(--line);border-radius:7px;color:var(--muted);font:9px "JetBrains Mono",monospace;text-align:center}
.exs-dropzone.root{min-height:48px;margin:7px 0 0}.exs-dropzone:only-child{min-height:54px}
.exs-dropzone.drop-inside,.exs-block.drop-inside>.exs-block-card{border-color:var(--cyan);background:var(--exs-soft-cyan)}
.exs-block.drop-before::before,.exs-block.drop-after::after{content:"";position:absolute;z-index:8;left:0;right:0;height:3px;border-radius:3px;background:var(--cyan)}.exs-block.drop-before::before{top:-5px}.exs-block.drop-after::after{bottom:-5px}
.exs-block.drag-source{opacity:.48}.exs-block-tree.pointer-dragging{cursor:grabbing;user-select:none}
.exs-generated pre{max-height:230px;margin:0;padding:11px;border-top:1px solid var(--line);overflow:auto;background:var(--bg2);color:var(--cyan);font:10px/1.55 "JetBrains Mono",monospace;white-space:pre-wrap}

.exs-turtle-canvas{display:block;width:100%;height:auto;aspect-ratio:5/3;border:1px solid var(--line);border-radius:11px;background:var(--panel);touch-action:pan-y}
.exs-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.exs-notes>div{padding:16px;border:1px solid var(--line);border-radius:11px;background:var(--panel)}.exs-notes h3{margin:0 0 6px;color:var(--cyan);font-size:14px}.exs-notes p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.rail a.cur.done{border-color:var(--cyan);background:linear-gradient(180deg,var(--exs-soft-cyan,rgba(34,211,238,.12)),var(--exs-soft-green,rgba(52,211,153,.06)))}

@keyframes exs-refusal{50%{transform:translateX(3px)}}
@media(max-width:980px){.exs-robot-layout,.exs-turtle-layout{grid-template-columns:1fr}.exs-panel+.exs-panel{border-left:0;border-top:1px solid var(--line)}.exs-source{min-height:280px}.exs-block-tree{min-height:300px;max-height:520px}.exs-turtle-canvas{max-height:520px}.exs-notes{grid-template-columns:1fr}}
@media(max-width:700px){.exs-studio{margin-left:-12px;margin-right:-12px;border-radius:13px}.exs-studio-head{align-items:flex-start;padding:15px}.exs-save{white-space:nowrap}.exs-projectbar,.exs-configbar,.exs-tools,.exs-palette,.exs-blockbar{padding-left:11px;padding-right:11px}.exs-project-spacer{display:none}.exs-projectbar .btn-c{flex:1 1 calc(50% - 8px);justify-content:center}.exs-example-field{width:100%}.exs-example-field select{width:100%;min-width:0}.exs-dimensions{width:100%}.exs-dimensions .exs-field{flex:1}.exs-dimensions .exs-field input{width:100%}.exs-dimensions .btn-c{flex:1 1 100%;justify-content:center}.exs-limits{width:100%}.exs-tools button{flex:1 1 calc(50% - 7px)}.exs-panel{padding:12px}.exs-robot-board-wrap{padding:6px}.exs-robot-board{min-width:calc(var(--exs-cols) * 34px)}.exs-cell-fallback .btn-c:first-child{flex-basis:100%;justify-content:center}.exs-state-grid{grid-template-columns:1fr}.exs-runbar .btn-c{flex:1 1 calc(33% - 7px);justify-content:center}.exs-trace-section{padding-left:11px;padding-right:11px}.exs-palette button{flex:1 1 calc(50% - 7px)}.exs-palette-label{flex-basis:100%}.exs-blockbar>span{flex-basis:100%}.exs-blockbar .btn-c{flex:1 1 calc(33% - 7px);justify-content:center}.exs-block-children{margin-left:10px;padding-left:8px}.exs-block-card{gap:6px;padding:6px}.exs-block-name{font-size:11px}.exs-drag-handle{width:36px;height:36px}.exs-turtle-canvas{aspect-ratio:4/3}}
@media(max-width:430px){.exs-studio-head{display:grid}.exs-save{width:max-content}.exs-tools button,.exs-palette button{flex-basis:100%}.exs-runbar .btn-c{flex-basis:calc(50% - 7px)}.exs-blockbar .btn-c{flex-basis:calc(50% - 7px)}.exs-panel-title{display:grid}.exs-coordinate,.exs-shortcut,.exs-block-count{width:max-content}.exs-block-card{flex-wrap:wrap}.exs-block-card .exs-block-name{min-width:calc(100% - 48px)}.exs-block-card label{margin-left:42px}.exs-child-count{margin-left:auto}.exs-cell-fallback .exs-edge-btn{flex:1 1 calc(50% - 7px);justify-content:center}}
@media(prefers-reduced-motion:reduce){.exs-tools button,.exs-palette button,.exs-robot-cell{transition:none}.exs-robot-cell.refusal{animation:none}}
@media print{.exs-projectbar,.exs-configbar,.exs-tools,.exs-runbar,.exs-palette,.exs-blockbar,.exs-cell-fallback{display:none}.exs-studio{box-shadow:none}.exs-robot-layout,.exs-turtle-layout{grid-template-columns:1fr}.exs-panel+.exs-panel{border-left:0;border-top:1px solid var(--line)}}

/* Soft state fills keep semantic borders without tinting their text. */
code{background:var(--bg2)}
.exs-tools button[aria-pressed="true"]{color:var(--ink)}
.exs-tool-icon.initial{color:var(--accent-ink)}
.exs-save,.exs-save.saving,.exs-diagnostic.ok,.exs-diagnostic.error{background:var(--panel)}
.exs-feedback.success,.exs-feedback.warning,.exs-feedback.failure{color:var(--ink)}
.exs-trace-table tr.active td,.exs-trace-table tr.refusal td,.exs-trace-table tr.limit td{color:var(--ink)}
.exs-child-count{background:var(--panel);color:var(--amber)}
.exs-palette button b{background:var(--panel);color:var(--cyan)}
.exs-block-card label{color:var(--ink)}
.exs-cell-robot{background:var(--panel);color:var(--cyan)}