.project-preview{width:min(760px,100%);margin:24px 0 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.project-preview article{padding:18px;text-align:left;background:#eef5fb;border:1px solid #d3e1ed;border-radius:12px}.project-preview article>span{display:block;margin-bottom:10px;font-size:30px}.project-preview strong{display:block;color:#233d58;font:700 18px 'Space Grotesk'}.project-preview p{margin:6px 0 0;color:#60768c;font-size:13px;line-height:1.45}.project-badge{display:inline-flex;margin:0 0 16px 6px;padding:7px 10px;color:#116b62;background:#e1f8f4;border:1px solid #a8e5dc;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase}
.robot-workspace{display:grid;grid-template-columns:145px minmax(190px,1fr) 300px;grid-template-areas:'palette code stage' 'palette actions stage' 'palette feedback stage';gap:12px;align-items:start}.scratch-stage{grid-area:stage;overflow:hidden;background:white;border:1px solid #c6d7e5;border-radius:8px;box-shadow:5px 5px 0 #d5e2ec}.stage-bar{min-height:42px;padding:0 10px;display:flex;align-items:center;gap:9px;color:#405b73;background:#edf4f9;font-size:11px}.stage-bar strong{margin-right:auto}.green-flag{display:grid;width:27px;height:27px;place-items:center;color:white;background:#37b75d;border-radius:50%;font-size:17px}.scratch-stage .robot-grid{position:relative;width:100%;margin:0;aspect-ratio:1;border:5px solid white;box-shadow:none}.programmer{grid-area:code;min-height:245px;margin:0;border-radius:8px}.program-blocks{min-height:190px;align-content:flex-start;transition:background .15s}.program-blocks.drop-ready{background:#17375e;box-shadow:inset 0 0 0 3px var(--cyan)}.command-palette{grid-area:palette;margin:0;padding:42px 10px 12px;display:flex;flex-direction:column;align-items:stretch;gap:8px;position:relative;background:#eef3f7;border:1px solid #d1dee9;border-radius:8px}.command-palette::before{content:'Blokken';position:absolute;top:13px;left:13px;color:#526a80;font:700 12px 'Space Grotesk';text-transform:uppercase;letter-spacing:1px}
.command-button{position:relative;width:100%;min-height:45px;padding:8px 10px;color:white!important;background:#4c97ff!important;border:0!important;border-bottom:4px solid #3373bf!important;border-radius:5px 10px 10px 5px;text-align:left;font-size:12px;line-height:1.25}.command-button.loop{background:#ffab19!important;border-bottom-color:#cf7f00!important}.command-button.condition{background:#ffbf00!important;border-bottom-color:#d18a00!important}.command-button.function,.command-button.looks{background:#9966ff!important;border-bottom-color:#6f46bd!important}.program-block{position:relative;border:0;border-bottom:4px solid #3373bf;border-radius:5px 10px 10px 5px;background:#4c97ff}.program-block.loop{background:#ffab19;border-bottom-color:#cf7f00}.program-block.condition{background:#ffbf00;border-bottom-color:#d18a00}.program-block.function,.program-block.looks{background:#9966ff;border-bottom-color:#6f46bd}.program-block::after,.command-button::after{content:'';position:absolute;right:13px;bottom:-4px;width:22px;height:5px;background:inherit;border-radius:0 0 5px 5px}.code-actions{grid-area:actions}.code-feedback{grid-area:feedback;margin:0}.run-button{color:white;background:#37b75d;box-shadow:5px 5px 0 #23823f}
.robot-grid[data-project='animation']{background:linear-gradient(#bce7ff 0 58%,#93dc82 59%)}.robot-grid[data-project='game']{background:radial-gradient(circle at 50% 42%,#263b78,#111936)}.robot-grid[data-project='game'] .grid-cell{background:rgba(55,102,171,.22);border-color:rgba(116,193,255,.22)}.robot-grid[data-project='story']{background:linear-gradient(#f8c8dc 0 55%,#d8b0ed 56%)}.robot-grid[data-project='story'] .grid-cell{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.3)}.robot-grid.is-talking::before{content:'Missie gelukt!';position:absolute;z-index:5;top:12px;right:12px;padding:9px 12px;color:#303c50;background:white;border:2px solid #7a55d8;border-radius:14px 14px 14px 3px;box-shadow:0 4px 12px rgba(0,0,0,.14);font-weight:700}
@media(max-width:1100px){.game-stage{grid-template-columns:1fr}.mission-panel{padding:0 0 20px;border:0;border-bottom:1px solid #dbe6f1}}
@media(max-width:820px){.robot-workspace{grid-template-columns:145px 1fr;grid-template-areas:'palette code' 'palette actions' 'stage stage' 'feedback feedback'}.scratch-stage{width:min(420px,100%);margin:6px auto}}
@media(max-width:560px){.project-preview{grid-template-columns:1fr}.robot-workspace{grid-template-columns:1fr;grid-template-areas:'palette' 'code' 'stage' 'actions' 'feedback'}.command-palette{display:grid;grid-template-columns:repeat(2,1fr)}.command-palette::before{grid-column:1/-1}.program-blocks{min-height:150px}.project-badge{margin-left:0}}