*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:"Noto Sans Thai","Segoe UI",Tahoma,sans-serif;color:#17324d;background:linear-gradient(180deg,#f5fbff,#fffaf0)}button,select{font:inherit}.robot-shell{width:min(1500px,100%);margin:auto;padding:12px}.eyebrow{margin:0 0 4px;color:#4387b9;font-size:.68rem;font-weight:900;letter-spacing:.075em}.lab-intro{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 15px;margin-bottom:9px;border-radius:18px;background:linear-gradient(135deg,#fff,#eef8ff 58%,#fff6d9);border:1px solid #d9eaf4;box-shadow:0 8px 24px rgba(50,91,121,.06)}.lab-intro h1{margin:0 0 4px;font-size:clamp(1.2rem,2.2vw,1.7rem)}.lab-intro p:not(.eyebrow){margin:0;color:#61798d;font-size:.82rem}.concept-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.concept-badges span,.mission-concepts span{padding:5px 8px;border-radius:999px;background:#fff;border:1px solid #dbe9f3;color:#4e6c84;font-size:.65rem;font-weight:850;box-shadow:0 3px 9px rgba(45,82,111,.04)}.mission-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:0 0 9px}.mission-tab{min-width:0;display:grid;grid-template-columns:auto auto 1fr;align-items:center;justify-content:center;gap:5px;padding:8px 9px;border-radius:12px;border:1px solid #dce8f1;background:#fff;color:#557086;font-weight:850;cursor:pointer;transition:.16s ease}.mission-tab span{font-size:1rem}.mission-tab b{display:grid;place-items:center;width:21px;height:21px;border-radius:7px;background:#edf4f9;color:#48657b;font-size:.65rem}.mission-tab small{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mission-tab:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(44,84,113,.08)}.mission-tab.active{color:#fff;border-color:#5969e8;background:linear-gradient(135deg,#347fdc,#735fe4);box-shadow:0 8px 18px rgba(72,91,211,.2)}.mission-tab.active b{background:rgba(255,255,255,.18);color:#fff}.mission-card{display:flex;justify-content:space-between;gap:14px;padding:12px 14px;margin-bottom:9px;border-radius:17px;background:#fff;border:1px solid #dceaf3;box-shadow:0 8px 23px rgba(44,86,117,.055)}.mission-copy{min-width:0}.mission-kicker{display:flex;align-items:center;gap:7px}.level-chip{display:inline-flex;padding:3px 7px;border-radius:999px;background:#f1efff;border:1px solid #ded8ff;color:#6854ba;font-size:.61rem;font-weight:900}.mission-card h2{margin:0 0 4px;font-size:1.05rem}.mission-card .mission-copy>p:not(.eyebrow){margin:0;color:#657d90;font-size:.76rem;line-height:1.55}.mission-concepts{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.mission-stats{display:grid;grid-template-columns:repeat(3,minmax(82px,1fr));gap:6px;min-width:min(330px,36vw)}.mission-stats>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:6px;align-items:center;padding:8px 9px;border-radius:12px;background:#f8fbfd;border:1px solid #e2edf3}.mission-stats span{grid-row:1/3;font-size:1.1rem}.mission-stats strong{font-size:.78rem}.mission-stats small{font-size:.6rem;color:#8194a3}.lab-layout{display:grid;grid-template-columns:245px minmax(500px,1fr) 275px;gap:10px}.panel{background:rgba(255,255,255,.96);border:1px solid #dcebf4;border-radius:17px;box-shadow:0 8px 25px rgba(43,91,122,.06);overflow:hidden}.palette-panel{border-top:4px solid #4aa9ff}.world-panel{border-top:4px solid #7463e8}.program-panel{border-top:4px solid #ffb33b}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:11px 12px 6px}.panel-head h2{margin:0;font-size:.94rem}.hint{margin:0;padding:0 12px 8px;color:#778c9d;font-size:.67rem}.palette{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 9px}.cmd-btn{display:grid;grid-template-columns:33px 1fr;align-items:center;text-align:left;gap:7px;padding:7px;border-radius:11px;border:1px solid transparent;background:#f8fbfd;cursor:pointer;transition:.15s}.cmd-btn:hover{transform:translateY(-1px);box-shadow:0 6px 13px rgba(43,84,112,.08)}.cmd-btn.move{background:#eef9ff;border-color:#d0ecfb}.cmd-btn.turn{background:#f4f0ff;border-color:#e3dafc}.cmd-btn.action{background:#fff7df;border-color:#f4e4ae}.cmd-btn.line{background:#eafaf6;border-color:#cfeee4}.cmd-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#fff;box-shadow:0 2px 7px rgba(50,82,104,.07)}.cmd-btn strong,.cmd-btn small{display:block}.cmd-btn strong{font-size:.72rem}.cmd-btn small{font-size:.58rem;color:#7d91a1;margin-top:1px}.logic-box{margin:9px;padding:9px;border-radius:13px;border:1px solid}.loop-box{background:linear-gradient(135deg,#f2efff,#eef9ff);border-color:#ded9fa}.sensor-box{background:linear-gradient(135deg,#eefaf6,#f5f0ff);border-color:#d3eae1}.logic-title{display:flex;gap:7px;align-items:flex-start}.logic-title strong,.logic-title small{display:block}.logic-title strong{font-size:.74rem}.logic-title small{font-size:.59rem;color:#79899b;margin-top:1px}.loop-controls{display:grid;grid-template-columns:49px 1fr 1fr;gap:5px;margin-top:7px}.loop-controls select,.loop-controls button,.sensor-select,.if-controls button{min-width:0;border-radius:9px;padding:7px 5px;border:1px solid #d6d9ef;background:#fff;color:#4f5f84;font-weight:800;font-size:.63rem}.loop-controls button,.if-controls button{cursor:pointer}.sensor-label{display:block;margin:7px 0 3px;color:#63798b;font-size:.61rem;font-weight:900}.sensor-select{width:100%}.if-controls{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:5px}.if-controls button:first-child{background:#f0ebff;border-color:#d7cafa;color:#674fb7}.tip-card{display:flex;gap:7px;margin:0 9px 10px;padding:8px;border-radius:12px;background:#eefaf1;border:1px solid #d5ecda}.tip-card strong,.tip-card p{margin:0}.tip-card strong{font-size:.68rem}.tip-card p{font-size:.61rem;color:#6f8573;margin-top:2px}.world-panel{display:flex;flex-direction:column}.legend{display:flex;gap:7px;font-size:.6rem;color:#71889a}.legend span{display:flex;align-items:center;gap:3px}.dot{width:7px;height:7px;border-radius:50%}.dot.blue{background:#4b8ccf}.dot.green{background:#48b66b}.dot.purple{background:#8466e4}.canvas-wrap{position:relative;height:510px;min-height:0;background:linear-gradient(180deg,#caefff 0%,#eaf9ff 46%,#f2f4df 46.2%,#edf5dd 100%);overflow:hidden;border-top:1px solid #d9ecf5;border-bottom:1px solid #dce8ef}.canvas-wrap:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 17% 14%,rgba(255,255,255,.7),transparent 21%),radial-gradient(circle at 82% 17%,rgba(255,255,255,.5),transparent 17%);pointer-events:none}canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}.world-controls{display:flex;gap:7px;padding:9px 11px}.primary-btn,.secondary-btn,.danger-btn,.sample-btn{border-radius:10px;padding:9px 11px;font-weight:900;cursor:pointer;transition:.15s}.primary-btn{border:0;background:linear-gradient(135deg,#2588ff,#655eff);color:#fff;box-shadow:0 7px 17px rgba(67,103,255,.22)}.primary-btn:hover,.sample-btn:hover{transform:translateY(-1px)}.secondary-btn{background:#fff;border:1px solid #d8e5ee;color:#405f76}.danger-btn{background:#fff1ef;border:1px solid #ffd7d0;color:#a84b3f}.sample-btn{grid-column:1/-1;background:#eef8ff;border:1px solid #d1e9fa;color:#356b91}.run-btn{min-width:105px}.sensor-readout{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;max-width:280px;padding:9px 11px;border-radius:12px;background:rgba(255,255,255,.94);border:1px solid #d9e7f2;box-shadow:0 8px 22px rgba(35,73,107,.13);backdrop-filter:blur(8px)}.sensor-readout[hidden]{display:none}.sensor-readout.true{border-color:#bde7d0;background:rgba(239,252,246,.96)}.sensor-readout.false{border-color:#d9d1f6;background:rgba(247,244,255,.96)}.sensor-readout>span{font-size:1.2rem}.sensor-readout small,.sensor-readout strong{display:block}.sensor-readout small{font-size:.55rem;color:#7a90a2}.sensor-readout strong{font-size:.67rem;margin-top:1px}.program-list{margin:0 9px;min-height:340px;max-height:455px;overflow:auto;padding:7px;border:1px dashed #d8e4eb;border-radius:12px;background:#fbfdff}.empty-state{display:grid;place-items:center;text-align:center;min-height:270px;color:#8195a4}.empty-state div{font-size:2rem}.empty-state strong{color:#61798b}.empty-state p{font-size:.68rem;margin:2px 0}.program-item{display:grid;grid-template-columns:23px 1fr 20px;gap:6px;align-items:center;padding:7px;margin-bottom:5px;border-radius:9px;background:#fff;border:1px solid #e1eaf0;box-shadow:0 2px 7px rgba(50,86,111,.04);font-size:.66rem}.program-item.active{outline:3px solid rgba(75,128,255,.16);border-color:#7aa6ff;background:#f3f7ff}.program-item.loop-start,.program-item.loop-end{background:#f6f3ff;border-color:#ded8f7}.program-item.if-start,.program-item.if-end{background:#eefaf6;border-color:#cee9dd}.program-item.depth-1{margin-left:11px}.program-item.depth-2{margin-left:20px}.program-item.depth-3{margin-left:29px}.program-item .num{display:grid;place-items:center;width:21px;height:21px;border-radius:6px;background:#edf4f8;color:#60798b;font-size:.58rem;font-weight:900}.program-item .remove{border:0;background:transparent;color:#9aacb9;cursor:pointer}.program-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 9px}.status-box{display:flex;align-items:center;gap:8px;margin:2px 9px 10px;padding:9px;border-radius:12px;background:linear-gradient(135deg,#eef9ff,#f6f3ff);border:1px solid #dfeaf6}.status-box>span{font-size:1.35rem}.status-box small,.status-box strong{display:block}.status-box small{font-size:.6rem;color:#7890a2}.status-box strong{font-size:.7rem;margin-top:1px}.toast{position:absolute;left:50%;bottom:15px;transform:translate(-50%,15px);opacity:0;pointer-events:none;padding:8px 11px;border-radius:10px;background:rgba(20,43,61,.9);color:#fff;font-size:.68rem;font-weight:800;transition:.18s;z-index:5}.toast.show{opacity:1;transform:translate(-50%,0)}.success-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,47,65,.34);backdrop-filter:blur(3px);padding:14px;z-index:7}.success-overlay[hidden]{display:none}.success-card{width:min(390px,92%);padding:20px;border-radius:19px;background:#fff;text-align:center;box-shadow:0 22px 65px rgba(28,61,83,.25)}.success-emoji{font-size:2.7rem}.success-card h2{margin:4px 0 6px}.success-card p:not(.eyebrow){color:#668096}.success-card .primary-btn{margin-top:5px}

@media(max-width:1180px){.lab-layout{grid-template-columns:235px 1fr}.program-panel{grid-column:1/-1}.program-list{min-height:135px;max-height:200px}.empty-state{min-height:115px}.program-actions{grid-template-columns:auto auto}.program-actions .sample-btn{grid-column:auto}.status-box{max-width:430px}.mission-tabs{grid-template-columns:repeat(5,minmax(130px,1fr));overflow-x:auto;padding-bottom:3px}}
@media(max-width:760px){.lab-intro,.mission-card{display:block}.concept-badges{justify-content:flex-start;margin-top:9px}.mission-stats{min-width:0;margin-top:10px}.lab-layout{grid-template-columns:1fr}.palette{grid-template-columns:repeat(2,1fr)}.canvas-wrap{height:430px}.program-panel{grid-column:auto}.program-list{max-height:260px}.program-actions{grid-template-columns:1fr 1fr}.program-actions .sample-btn{grid-column:1/-1}.status-box{max-width:none}.mission-tabs{display:flex;overflow-x:auto;scroll-snap-type:x proximity}.mission-tab{flex:0 0 132px;scroll-snap-align:start}}
@media(max-width:480px){.robot-shell{padding:8px}.lab-intro{padding:11px}.mission-card{padding:11px}.mission-stats{grid-template-columns:1fr 1fr}.mission-stats>div:last-child{grid-column:1/-1}.palette{grid-template-columns:1fr}.canvas-wrap{height:390px}.legend{display:none}.world-controls{display:grid;grid-template-columns:1.2fr 1fr 1fr}.world-controls button{padding-inline:5px}.sensor-readout{left:8px;top:8px;max-width:calc(100% - 16px)}}

/* Embedded inside Coding Classroom: parent site owns header/footer */
body.is-embedded{background:linear-gradient(180deg,#f8fcff 0%,#f5faff 55%,#fffaf0 100%)}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}}

.mission-tab{position:relative}.mission-saved{position:absolute;right:5px;top:4px;min-width:25px;padding:2px 5px;border-radius:999px;background:#fff6c9;color:#8b6412;border:1px solid #f1d77a;font-size:.52rem;font-style:normal;font-weight:900;line-height:1.2;box-shadow:0 2px 6px rgba(91,65,12,.10)}.mission-tab.active .mission-saved{background:#fff;color:#6a55be;border-color:rgba(255,255,255,.65)}

button:focus-visible,select:focus-visible{outline:3px solid #68b7ff;outline-offset:3px}.mission-tab{min-height:44px}.world-controls button,.program-actions button,.cmd-btn{min-height:44px}@media(max-width:360px){.canvas-wrap{height:360px}.robot-shell{padding:5px}.world-controls{position:sticky;bottom:0;background:rgba(255,255,255,.94);z-index:8}}