:root{--font-scale: 1;--bg: #eef2f7;--panel: #ffffff;--panel-2: #f8fafc;--border: #cbd5e1;--text: #0f172a;--text-soft: #475569;--primary: #2563eb;--primary-dark: #1d4ed8;--success: #16a34a;--warning: #f59e0b;--danger: #dc2626;--accent: #7c3aed;--radius: 14px;--shadow: 0 2px 6px rgba(15, 23, 42, .08);--toolbar-h: 46px;--radius-sm: 9px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Sarabun,Noto Sans Thai,Leelawadee UI,Tahoma,system-ui,sans-serif;font-size:calc(16px * var(--font-scale));color:var(--text);background:var(--bg);-webkit-text-size-adjust:100%}button{font-family:inherit;font-size:inherit}.app{display:flex;flex-direction:column;height:100%;overflow:hidden}.toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:3px 8px;min-height:var(--toolbar-h);background:linear-gradient(180deg,#fff,#f1f5f9);border-bottom:3px solid var(--border);box-shadow:var(--shadow);z-index:5}.toolbar__brand{display:flex;align-items:center;gap:6px;padding-right:8px;margin-right:2px;border-right:2px solid var(--border)}.toolbar__logo{width:26px;height:26px;flex:none}.toolbar__title{font-size:.82em;font-weight:700;line-height:1.15;white-space:nowrap}.toolbar__subtitle{font-size:.6em;color:var(--text-soft);white-space:nowrap}.toolbar__version{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--primary);color:#fff;font-size:.85em;font-weight:800;letter-spacing:.02em;vertical-align:1px}.toolbar__group{display:flex;align-items:center;gap:3px;padding:0 5px;border-right:2px solid var(--border)}.toolbar__group:last-child{border-right:none}.toolbar__spacer{flex:1 1 auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:32px;min-width:32px;padding:3px 8px;font-size:.82em;border:2px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:var(--text);font-weight:600;cursor:pointer;transition:transform .08s ease,background .12s ease,box-shadow .12s ease;white-space:nowrap}.btn:hover:not(:disabled){background:#eff6ff;box-shadow:var(--shadow)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:focus-visible{outline:4px solid #93c5fd;outline-offset:2px}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--icon{padding:8px 10px}.btn--primary{background:var(--primary);border-color:var(--primary-dark);color:#fff}.btn--primary:hover:not(:disabled){background:var(--primary-dark)}.btn--success{background:var(--success);border-color:#15803d;color:#fff}.btn--success:hover:not(:disabled){background:#15803d}.btn--warning{background:var(--warning);border-color:#d97706;color:#1f2937}.btn--danger{background:var(--danger);border-color:#b91c1c;color:#fff}.btn--danger:hover:not(:disabled){background:#b91c1c}.btn__emoji{font-size:1.15em;line-height:1}.select,.input{min-height:30px;padding:2px 6px;font-size:.82em;border:2px solid var(--border);border-radius:10px;background:#fff;font-family:inherit;font-size:inherit;color:var(--text)}.select:focus-visible,.input:focus-visible{outline:4px solid #93c5fd;outline-offset:1px}.workspace{display:flex;flex:1;min-height:0;overflow:hidden}.pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel)}.pane--left{border-right:1px solid var(--border)}.splitter{flex:none;width:10px;cursor:col-resize;background:linear-gradient(180deg,#e2e8f0,#cbd5e1);border-left:1px solid var(--border);border-right:1px solid var(--border);position:relative}.splitter:after{content:"";position:absolute;top:50%;left:50%;width:4px;height:46px;transform:translate(-50%,-50%);border-radius:3px;background:#94a3b8}.splitter:focus-visible{outline:3px solid var(--primary)}.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px 8px 0;background:var(--panel-2);border-bottom:2px solid var(--border)}.tab{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:3px 8px;font-size:.85em;border:2px solid var(--border);border-bottom:none;border-radius:12px 12px 0 0;background:#e2e8f0;color:var(--text-soft);font-weight:600;cursor:pointer;white-space:nowrap}.tab[aria-selected=true]{background:#fff;color:var(--primary-dark);border-color:var(--primary);box-shadow:0 -2px 0 var(--primary) inset}.tab:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.tab-panel{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.blockly-host{flex:1;min-height:0;position:relative}.blockly-host>div{position:absolute;top:0;right:0;bottom:0;left:0}.blocklyToolboxDiv{padding-top:6px}.blocklyTreeLabel{font-family:inherit!important;font-size:calc(15px * var(--font-scale))!important;font-weight:600!important}.blocklyText{font-family:inherit!important;font-size:calc(13px * var(--font-scale))!important}.blockly-hint{padding:6px 12px;background:#fef9c3;border-bottom:2px solid #fde047;font-size:.88em;color:#713f12}.code-view{flex:1;min-height:0;overflow:auto;margin:0;padding:14px 16px;background:#0f172a;color:#e2e8f0;font-family:Cascadia Mono,Consolas,Courier New,monospace;font-size:calc(14px * var(--font-scale));line-height:1.7;white-space:pre;-moz-tab-size:4;tab-size:4}.code-view--light{background:#fffbeb;color:#1f2937;font-family:inherit;white-space:pre-wrap}.code-view .code-line--active{display:block;background:#facc1547;border-radius:4px}.simulator{flex:1;min-height:0;display:flex;flex-direction:column;background:#e6edf5}.simulator__canvas{flex:1;min-height:0;position:relative;overflow:hidden;touch-action:none;cursor:grab}.simulator__canvas:active{cursor:grabbing}.simulator__canvas svg{display:block;width:100%;height:100%}.simulator__canvas--3d{cursor:grab;background:#c5d4e4}.simulator3d{position:absolute;top:0;right:0;bottom:0;left:0}.simulator3d canvas{display:block;width:100%;height:100%}.simulator3d__hint{position:absolute;right:12px;top:12px;z-index:2;padding:6px 12px;border-radius:999px;background:#ffffffeb;border:2px solid var(--border);font-size:13px;font-weight:700;box-shadow:var(--shadow);pointer-events:none}.simulator3d__controls{position:absolute;left:12px;bottom:12px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;max-width:360px}.simulator__controls{position:absolute;left:12px;bottom:12px;display:flex;flex-direction:row;gap:6px}.simulator__badge{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:#fffffff0;border:2px solid var(--border);font-weight:700;box-shadow:var(--shadow)}.status{border-top:2px solid var(--border);background:var(--panel);max-height:40%;overflow:auto}.status__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:4px;padding:5px 6px}.stat{display:flex;flex-direction:column;gap:0;padding:2px 6px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);line-height:1.25}.stat__label{font-size:.62em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-soft);display:flex;align-items:center;gap:4px}.stat__value{font-size:.92em;font-weight:700}.board{display:flex;align-items:stretch;gap:8px;padding:0 6px 5px}.board__screen{flex:0 1 190px;border:3px solid var(--border);border-radius:10px;background:#0b1220;overflow:hidden;line-height:0}.board__screen svg{width:100%;height:auto;display:block}.board__side{display:flex;flex-direction:column;justify-content:center;gap:8px}.board__reading{font-size:.72em;font-weight:700;color:var(--text-soft);white-space:nowrap}.board__buttons{display:flex;gap:10px}.board__button{width:58px;height:58px;border-radius:50%;border:4px solid #b45309;background:linear-gradient(180deg,#fcd34d,#f59e0b);color:#1f2937;font-weight:900;font-size:1.5em;line-height:1;cursor:pointer;box-shadow:0 4px #b45309,0 6px 10px #0f172a40;transition:transform .08s ease,box-shadow .08s ease}.board__prompt{margin:0 0 6px;padding:6px 10px;border-radius:10px;background:#fef3c7;border:2px solid #f59e0b;color:#78350f;font-weight:700;font-size:.9em;text-align:center}.board__button--waiting{animation:board-button-pulse 1s ease-in-out infinite}@keyframes board-button-pulse{0%,to{box-shadow:0 4px #b45309,0 6px 10px #0f172a40,0 0 #f59e0bb3}50%{box-shadow:0 4px #b45309,0 6px 10px #0f172a40,0 0 0 12px #f59e0b00}}@media(prefers-reduced-motion:reduce){.board__button--waiting{animation:none;outline:3px solid #f59e0b;outline-offset:3px}}.board__button:hover{background:linear-gradient(180deg,#fde68a,#fbbf24)}.board__button:active{transform:translateY(3px);box-shadow:0 1px #b45309,0 2px 5px #0f172a40}.board__button:focus-visible{outline:4px solid #2563eb;outline-offset:3px}.sensor-row{display:flex;gap:3px;padding:0 6px 5px;flex-wrap:wrap}.sensor-dot{width:20px;height:20px;border-radius:6px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:#fff;color:var(--text-soft)}.sensor-dot--dark{background:#0f172a;color:#fff;border-color:#0f172a}.log{padding:6px 10px 12px}.log__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto}.log__item{display:flex;gap:8px;align-items:flex-start;padding:6px 10px;border-radius:10px;background:var(--panel-2);border-left:6px solid var(--border);font-size:.88em}.log__item--success{border-left-color:var(--success);background:#f0fdf4}.log__item--warning{border-left-color:var(--warning);background:#fffbeb}.log__item--error{border-left-color:var(--danger);background:#fef2f2}.log__time{flex:none;color:var(--text-soft);font-variant-numeric:tabular-nums}.panel{padding:14px 16px;overflow:auto;flex:1;min-height:0}.panel h2{margin:0 0 6px;font-size:1.15em}.panel h3{margin:16px 0 6px;font-size:1em}.card{border:2px solid var(--border);border-radius:var(--radius);background:var(--panel-2);padding:12px 14px;margin-bottom:12px}.card--info{background:#eff6ff;border-color:#93c5fd}.card--warning{background:#fffbeb;border-color:#fcd34d}.card--danger{background:#fef2f2;border-color:#fca5a5}.card--success{background:#f0fdf4;border-color:#86efac}.list-plain{margin:6px 0 0;padding-left:22px}.list-plain li{margin-bottom:4px}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:2px solid var(--border);background:#fff;font-size:.85em;font-weight:600;margin:0 6px 6px 0}.chip--green{border-color:#16a34a;background:#dcfce7}.chip--yellow{border-color:#eab308;background:#fef9c3}.chip--red{border-color:#dc2626;background:#fee2e2}.field-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}.field-row label{min-width:170px;font-weight:600}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a8c;display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}.modal{width:min(760px,100%);max-height:88vh;display:flex;flex-direction:column;background:var(--panel);border-radius:18px;border:3px solid var(--border);box-shadow:0 18px 40px #0f172a47;overflow:hidden}.modal__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--panel-2);border-bottom:2px solid var(--border)}.modal__title{margin:0;font-size:1.2em}.modal__body{padding:16px;overflow:auto}.modal__footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:2px solid var(--border);background:var(--panel-2)}.stars{font-size:2.4em;letter-spacing:6px;text-align:center;margin:6px 0 12px}.score-table{width:100%;border-collapse:collapse}.score-table th,.score-table td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left}.score-table td:last-child,.score-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}@media(max-width:1500px){.toolbar__subtitle,.btn span.btn__text{display:none}.btn--keep-text span.btn__text{display:inline}}@media(max-width:820px){.toolbar__brand,.btn--keep-text span.btn__text{display:none}}@media(max-width:900px){.workspace{flex-direction:column}.splitter{width:auto;height:10px;cursor:row-resize}.splitter:after{width:46px;height:4px}.pane{flex:1 1 50%!important;width:auto!important}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.reduce-motion .robot-sprite,.reduce-motion .can-sprite{transition:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mission-tabs{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#ecfdf5;border-bottom:2px solid #a7f3d0;overflow-x:auto;flex:none}.mission-tabs__label{font-size:.68em;font-weight:700;color:#047857;padding-right:4px;white-space:nowrap}.mission-tabs__spacer{flex:1 1 auto}.mission-tabs__count{font-size:.7em;font-weight:700;color:#047857;white-space:nowrap;padding:0 2px}.mission-tab{display:inline-flex;align-items:center;min-height:26px;padding:2px 9px;border:2px solid #6ee7b7;border-radius:999px;background:#fff;color:#065f46;font-family:inherit;font-size:.78em;font-weight:700;cursor:pointer;white-space:nowrap}.mission-tab:hover:not(:disabled){background:#d1fae5}.mission-tab[aria-selected=true]{background:#17a589;border-color:#0f766e;color:#fff}.mission-tab--empty{border-style:dashed;color:#6b7280}.mission-tab--end{border-color:#fbbf24;color:#92400e}.mission-tab--end[aria-selected=true]{background:#f59e0b;border-color:#b45309;color:#1f2937}.mission-tab--tool{border-color:var(--border);color:var(--text-soft);background:var(--panel-2)}.mission-tab:disabled{opacity:.4;cursor:not-allowed}.about{max-width:720px}.about__hero{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-bottom:16px;border-radius:var(--radius);background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;box-shadow:var(--shadow)}.about__badge{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#ffffff38;border:2px solid rgba(255,255,255,.5);font-size:1.8em}.about__app-name{font-size:1.15em;font-weight:800;line-height:1.25}.about__app-sub{font-size:.82em;opacity:.9}.about__version{display:inline-block;margin-top:6px;padding:2px 10px;border-radius:999px;background:#ffffffe6;color:var(--primary-dark);font-size:.78em;font-weight:800}.about__card{border-left:6px solid var(--primary)}.about__card--ai{border-left-color:var(--accent);background:#faf5ff;border-color:#d8b4fe}.about__card-title{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:.95em;color:var(--text-soft);font-weight:700}.about__name{margin:0 0 10px;font-size:1.25em;font-weight:800;line-height:1.3}.about__vendor{font-size:.7em;font-weight:600;color:var(--text-soft)}.about__list{margin:0;display:grid;gap:6px}.about__row{display:flex;flex-wrap:wrap;gap:4px 10px;padding-bottom:6px;border-bottom:1px dashed var(--border)}.about__row:last-child{padding-bottom:0;border-bottom:none}.about__row dt{flex:none;min-width:96px;color:var(--text-soft);font-weight:700;font-size:.9em}.about__row dd{margin:0;flex:1 1 220px;font-weight:600}.about__note{margin:0;line-height:1.6}.about__thanks{margin:4px 0 0;padding:12px 14px;border-radius:var(--radius);background:var(--panel-2);border:2px dashed var(--border);color:var(--text-soft);line-height:1.6;font-size:.92em}@media(max-width:640px){.about__hero{flex-direction:column;align-items:flex-start}.about__row dt{min-width:0;flex-basis:100%}}.map-editor{display:flex;flex-direction:column;gap:10px;padding:10px;overflow:auto;height:100%}.map-editor__status{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius);border:3px solid var(--border);font-size:.95em}.map-editor__status--ok{background:#f0fdf4;border-color:var(--success)}.map-editor__status--error{background:#fef2f2;border-color:var(--danger)}.map-editor__status-sub{font-size:.8em;color:var(--text-soft)}.map-editor__notice{padding:8px 12px;border-radius:var(--radius-sm);background:#eff6ff;border:2px solid var(--primary)}.map-editor__toolbar{display:flex;flex-wrap:wrap;gap:6px}.map-editor__row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.map-editor__field{display:flex;flex-direction:column;gap:3px;font-size:.82em;font-weight:600;color:var(--text-soft);flex:1 1 160px}.map-editor__field--small{flex:0 0 110px}.map-editor__field input{padding:6px 8px;border:2px solid var(--border);border-radius:var(--radius-sm);font:inherit;font-size:.95em}.map-editor__mode{font-size:.82em;color:var(--text-soft);padding-bottom:8px}.palette{display:flex;flex-direction:column;gap:8px}.palette__group{border:2px solid var(--border);border-radius:var(--radius);padding:8px;background:var(--panel-2)}.palette__title{margin:0 0 6px;font-size:.85em;color:var(--text-soft)}.palette__items{display:flex;flex-wrap:wrap;gap:6px}.palette__item{display:flex;flex-direction:column;align-items:center;gap:2px;width:78px;padding:4px;border:2px solid var(--border);border-radius:var(--radius-sm);background:#fff;cursor:grab;font:inherit}.palette__item:hover:not(:disabled){background:#eff6ff;box-shadow:var(--shadow)}.palette__item:disabled{opacity:.45;cursor:not-allowed}.palette__item--active{border-color:var(--primary);background:#dbeafe;box-shadow:0 0 0 3px #bfdbfe}.palette__label{font-size:.62em;line-height:1.15;text-align:center;color:var(--text-soft)}.map-editor__inspector{border:2px solid var(--primary);border-radius:var(--radius);padding:8px;background:#f8fbff}.map-editor__inspector-body{display:flex;gap:10px;align-items:flex-start;font-size:.85em}.map-editor__cans{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:4px}.btn--small{min-height:24px;padding:1px 6px;font-size:.75em}.map-editor__boundary{margin-top:6px;padding:6px;background:#fffbeb;border:2px solid var(--warning);border-radius:var(--radius-sm)}.map-editor__checkbox{display:flex;align-items:center;gap:6px;cursor:pointer}.map-editor__facing-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px;padding:6px 8px;background:#eff6ff;border:2px solid #2563eb;border-radius:var(--radius-sm)}.map-editor__facing-label{font-weight:700;color:#1d4ed8}.map-editor__facing-tip{color:var(--text-soft);font-size:.9em}.map-editor__facing{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:4px}.map-editor__hint{margin-top:4px;color:var(--text-soft);font-size:.9em}.map-editor__issues{border:2px solid var(--border);border-radius:var(--radius);padding:8px}.map-editor__ok{margin:0;color:var(--success);font-weight:600}.map-editor__issue-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto}.map-editor__issue{display:flex;gap:8px;align-items:flex-start;width:100%;text-align:right;padding:6px 8px;border-radius:var(--radius-sm);border:2px solid transparent;background:transparent;font:inherit;font-size:.85em;cursor:pointer;text-align:start}.map-editor__issue--error{background:#fef2f2;border-color:#fecaca;color:#991b1b}.map-editor__issue--warning{background:#fffbeb;border-color:#fde68a;color:#92400e}.map-editor__issue:hover{box-shadow:var(--shadow)}.map-editor__help{margin:0;font-size:.8em;color:var(--text-soft);line-height:1.6}.simulator__canvas--editing{cursor:crosshair;background:#f1f5f9}.robot-led--lost{animation:robot-led-blink .7s steps(1,end) infinite}@keyframes robot-led-blink{0%,49%{opacity:1}50%,to{opacity:.2}}.reduce-motion .robot-led--lost{animation:none!important;opacity:1}