/* Mini4WD picture-first workbench. One viewport, one scene, one tactile dock. */
.il-shell:has(.m4-lab)>.il-back{display:none}
.m4-lab{box-sizing:border-box;height:calc(100dvh - 24px);min-height:0;max-width:1440px;display:flex;flex-direction:column;color:#fff;background:#07172b;border:1px solid #9bdded66;border-radius:28px;font:16px/1.4 system-ui,sans-serif;isolation:isolate;box-shadow:0 12px 35px #0004}
.m4-lab *{box-sizing:border-box}.m4-lab [hidden]{display:none!important}.m4-lab h2,.m4-lab h3,.m4-lab p{margin:0;color:inherit}
.m4-lab button{font:inherit;color:#fff;min-width:44px;min-height:44px;border:1px solid #bceafa50;border-radius:50%;padding:9px;background:radial-gradient(ellipse at 30% 0,#8de5ec35,transparent 70%),#14364ac9;display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;touch-action:manipulation;box-shadow:0 3px 0 #030d2066;transition:transform .15s,box-shadow .15s,border-color .15s}
.m4-lab button:hover{border-color:#d7f9ff}.m4-lab button:active{transform:translateY(2px) scale(.96)}.m4-lab button:focus-visible{outline:3px solid #fff4b0;outline-offset:3px}.m4-lab button[aria-pressed=true]{border-color:#ffe6a3;box-shadow:0 0 0 2px #ffd68755,0 0 16px #eabf5540;background-color:#23515fd9}.m4-lab button:disabled{opacity:.43;cursor:default}.m4-lab svg{width:25px;height:25px;flex:none}.m4-lab img{object-fit:contain}.m4-lab img[src=""]{visibility:hidden}
.m4-header{display:flex;align-items:center;gap:10px;padding:8px 12px;min-height:62px;background:#081727bb;border-radius:28px 28px 0 0}.m4-header h2{font-size:19px;white-space:nowrap}.m4-header button{width:44px;height:44px;padding:9px}.m4-header .m4-nav{margin-left:auto;display:flex;gap:7px}.m4-helpers{display:flex;gap:7px;margin-left:14px}.m4-header button span,.m4-view-tools span,.m4-dock-actions>button:not(.m4-go) span,.m4-race-options span,.m4-two span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.m4-pencil{width:29px;height:29px}
.m4-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 138px;flex:1;min-height:0;padding:0 10px 10px;gap:9px}
.m4-scene{position:relative;min-width:0;min-height:0;border-radius:22px;border:1px solid #b5e3ed55;background:#123046 url('../images/experiments/mini4wd-v2/clubhouse.png') center 52%/cover no-repeat}
.m4-stage{position:absolute;inset:0;border-radius:22px}.m4-stage canvas{display:block;width:100%;height:100%;border-radius:22px;touch-action:none}.m4-scene-tag{position:absolute;top:16px;left:16px;font-size:13px;color:#e0f7ff;text-shadow:0 1px 6px #000;pointer-events:none}.m4-view-tools{position:absolute;left:12px;top:42px;display:flex;gap:6px}.m4-view-tools button{width:44px;height:44px;padding:8px;backdrop-filter:blur(8px)}
.m4-tools{display:flex;align-items:center;justify-content:center;gap:14px;min-width:0;min-height:0;padding:10px 18px;background:linear-gradient(115deg,#19384fc2,#0b1b35cc);border:1px solid #c5edf055;border-radius:26px;box-shadow:inset 0 1px #ffffff20,0 5px 20px #0003;backdrop-filter:blur(12px)}
.m4-tools p{font-size:14px}.m4-tools h3{font-size:18px}.m4-dock-actions{display:flex;gap:10px;align-items:center;margin-left:auto}.m4-dock-actions>button:not(.m4-go){width:54px;height:54px}.m4-go{width:92px;height:106px!important;flex-direction:column;border-radius:24px!important;background:linear-gradient(155deg,#e8b66a33,#0a53666b)!important}.m4-go img{width:64px;height:67px;filter:drop-shadow(0 3px 4px #0005)}.m4-go span{font-size:15px;font-weight:800}
.m4-lesson-cards,.m4-tune-cards,.m4-track-cards{display:flex;align-items:stretch;justify-content:center;gap:12px;min-width:0;flex:1}.m4-lab .m4-object-card{position:relative;flex:1;min-width:74px;max-width:220px;height:112px;padding:5px 12px 8px;display:flex;flex-direction:column;gap:0;border-radius:22px;border-color:#b4e1ed28;background:linear-gradient(145deg,#d3f2ff12,#7dc0e707);box-shadow:none}.m4-object-card>img,.m4-object-card>svg{width:100%;height:78px;min-height:0;object-fit:contain;filter:drop-shadow(0 4px 3px #0004)}.m4-object-card>span{font-size:15px;font-weight:700;white-space:nowrap}.m4-object-card[aria-pressed=true]::after{content:'✓';position:absolute;right:6px;top:4px;color:#ffe9b4;font-size:17px;font-weight:900}.m4-lesson-cards .m4-object-card{max-width:180px}.m4-track-cards .m4-object-card{max-width:205px}.m4-track-cards .m4-object-card img{height:76px;transform:scale(1.08)}
.m4-category-tabs{display:grid;grid-template-columns:repeat(3,58px);gap:5px;flex:none;padding-right:13px;border-right:1px solid #b0e6ee30}.m4-category-tabs button{width:58px;min-height:52px;padding:1px 3px 3px;border-radius:14px;flex-direction:column;gap:0;background:#17344655;box-shadow:none}.m4-category-tabs img{width:37px;height:28px}.m4-category-tabs span{font-size:12px;line-height:15px}.m4-tune-cards{max-width:590px}.m4-color-orb{display:block;width:62px;height:62px;margin:8px auto;background:radial-gradient(circle at 30% 22%,#ffffffdb,transparent 37%),var(--paint);border:2px solid #ffffff90;border-radius:50%;box-shadow:inset -5px -6px 12px #0004,0 5px 8px #0005}
.m4-race-options{display:grid;grid-template-columns:44px 44px;gap:7px}.m4-race-options button{padding:8px;width:44px;height:44px}.m4-race-options svg{width:23px;height:23px}
.m4-eyebrow{font-size:13px;color:#d3eef6;display:flex;flex-direction:column;gap:5px;flex:none}.m4-eyebrow b{font-size:20px;color:white}.m4-part-grid{display:flex;gap:10px;flex:1;min-width:0}.m4-part-grid button{position:relative;flex:1;min-width:70px;height:108px;border-radius:22px;display:flex;flex-direction:column;padding:6px;gap:0;touch-action:none;background:#8fc9eb12;box-shadow:none}.m4-part-grid img{width:100%;height:64px;pointer-events:none;min-height:0}.m4-part-grid span{font-size:13px;white-space:nowrap}.m4-part-grid small{position:absolute;top:2px;right:5px;background:#132b4388;border-radius:7px;padding:1px 4px;font-size:11px}.m4-pager{display:flex;align-items:center;gap:7px;flex:none}.m4-pager button{width:44px;height:44px;padding:8px}.m4-pager button span{display:none}.m4-pager>span{font-size:14px;color:#d9eff8}.m4-pager .m4-find-next{width:44px;font-size:0}.m4-find-next:after{content:'↪';font-size:26px}.m4-two{display:flex;gap:8px}.m4-two button{width:44px;height:44px;padding:8px}
.m4-sr,.m4-part-description{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;overflow:hidden;clip-path:inset(50%)}
.m4-snap{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);border-radius:20px!important;background:#126b76e8!important;padding:9px 16px!important}.m4-snap:active{transform:translateX(-50%) scale(.96)!important}.m4-drag{position:fixed;width:115px;height:80px;transform:translate(-50%,-65%);pointer-events:none;z-index:99999;filter:drop-shadow(0 6px 7px #0008)}
.m4-status{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:6px 14px;border-radius:15px;background:#06192dc9;font-size:13px;color:white;text-align:center;pointer-events:none;line-height:1.4;backdrop-filter:blur(8px)}
.m4-bom{position:absolute;right:10px;top:10px;z-index:4;background:#092037b8;border:1px solid #abdbe470;border-radius:22px;backdrop-filter:blur(14px);color:white}.m4-bom summary{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;font-size:24px;cursor:pointer;list-style:none}.m4-bom summary::-webkit-details-marker{display:none}.m4-bom[open]{width:206px}.m4-bom-body{padding:0 8px 8px}.m4-bom-body>button{display:flex;width:100%;margin-bottom:5px;justify-content:flex-start;border-radius:13px;font-size:13px;padding:4px 8px;background:#9dc9ec12;box-shadow:none}.m4-bom-body b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#acdfdf26}.m4-bom .m4-pager{justify-content:space-between}.m4-scene:has(.m4-bom[open]) .m4-stage{right:215px}.m4-balloon{position:absolute;pointer-events:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;background:#112438dc;border:2px solid #ffe296;box-shadow:0 0 12px #ffe29677;z-index:2}
.m4-hud{position:absolute;top:12px;left:12px;display:flex;gap:8px;pointer-events:none}.m4-hud>div{padding:7px 13px;background:#081b32c9;border:1px solid #b4e8f550;border-radius:18px}.m4-hud b{font-size:23px;line-height:1.1;display:block;font-variant-numeric:tabular-nums}.m4-hud small{font-size:11px;color:#d9f0f8}.m4-lab[data-page=race] .m4-scene-tag{display:none}.m4-countdown{position:absolute;inset:0;display:grid;place-items:center;font-size:100px;font-weight:900;color:#fff4b4;background:#071a3422;text-shadow:0 8px 35px #0009;pointer-events:none}
.m4-overlay{position:absolute;inset:0;border-radius:22px;padding:15px 32px;background:#061a32cc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;backdrop-filter:blur(12px)}.m4-overlay h3{font-size:21px;text-align:center}.m4-answer-grid{display:flex;gap:18px;width:80%;max-width:730px}.m4-answer-grid button{flex:1;min-width:0;height:114px;border-radius:24px;background:#81bbd520}.m4-answer-grid img{width:100%;height:96px}.m4-feedback{font-size:16px;color:#fff0b5!important}.m4-picture-prompt{display:flex;align-items:center;justify-content:center;height:110px;gap:20px}.m4-picture-prompt>img{width:115px;height:95px}.m4-picture-prompt b{display:grid;place-items:center;width:80px;height:80px;border:2px dashed #ffe8a4;border-radius:22px;font-size:45px;color:#ffdb7e;background:#80b9ce18}.m4-picture-prompt i{font-style:normal;font-size:33px;color:#7fe3de}.m4-rail-picture{display:flex;align-items:center;border-top:9px solid #e7a476;border-right:9px solid #e7a476;border-radius:0 40px 0 0;gap:15px}.m4-rail-picture img{width:130px;height:85px}.m4-rail-picture b{width:60px;height:60px;font-size:32px}
.m4-lab[data-page=quiz] .m4-stage,.m4-lab[data-page=notes] .m4-stage{visibility:hidden}.m4-lab[data-page=quiz] .m4-balloon,.m4-lab[data-page=notes] .m4-balloon,.m4-lab[data-page=quiz] .m4-scene-tag,.m4-lab[data-page=notes] .m4-scene-tag,.m4-lab[data-page=quiz] .m4-status,.m4-lab[data-page=notes] .m4-status{display:none}.m4-tools>button{border-radius:18px}.m4-record{width:95%;max-width:750px;border:1px solid #a7d5ec55;border-radius:20px;padding:12px 18px;background:#244b604a;display:grid;gap:3px}.m4-record>div{display:flex;gap:24px}.m4-record p{font-size:13px}.m4-record strong{font-size:24px}.m4-record small{font-size:13px}
@media(max-height:680px) and (min-width:761px){.m4-layout{grid-template-rows:minmax(0,1fr) 120px;gap:7px}.m4-header{min-height:56px;padding:6px 12px}.m4-tools{padding:6px 12px;gap:10px}.m4-lab .m4-object-card{height:103px}.m4-object-card>img,.m4-object-card>svg{height:69px}.m4-category-tabs{gap:3px}.m4-category-tabs button{min-height:48px}.m4-category-tabs img{height:25px}.m4-go{height:99px!important}.m4-part-grid button{height:98px}.m4-part-grid img{height:59px}.m4-picture-prompt{height:85px}.m4-picture-prompt>img{height:78px}.m4-picture-prompt b{height:64px;width:64px}.m4-answer-grid button{height:86px}.m4-answer-grid img{height:74px}.m4-overlay{gap:7px;padding:10px 25px}.m4-overlay h3{font-size:19px}}
@media(max-width:760px){.m4-lab{height:calc(100dvh - 12px)!important;min-height:0}.m4-header{flex-wrap:wrap;gap:5px;padding:6px 8px}.m4-header h2{font-size:16px}.m4-header .m4-nav{gap:4px}.m4-helpers{margin-left:auto;gap:5px}.m4-layout{grid-template-rows:minmax(240px,1fr) auto;padding:0 5px 5px;gap:6px}.m4-tools{flex-wrap:wrap;padding:8px;gap:8px}.m4-category-tabs{grid-template-columns:repeat(6,44px);border:0;padding:0;justify-content:center;width:100%}.m4-category-tabs button{width:44px;min-height:48px}.m4-tune-cards,.m4-track-cards,.m4-lesson-cards{gap:6px}.m4-lab .m4-object-card{min-width:56px;height:89px;padding:3px 5px}.m4-object-card>img,.m4-object-card>svg{height:57px}.m4-object-card>span{font-size:12px}.m4-go{width:62px;height:86px!important}.m4-go img{width:45px;height:48px}.m4-race-options{grid-template-columns:44px 44px}.m4-dock-actions{gap:5px}.m4-dock-actions>button:not(.m4-go){width:44px;height:44px}.m4-part-grid{width:100%;flex:auto}.m4-part-grid button{height:91px}.m4-part-grid img{height:53px}.m4-eyebrow{flex-direction:row;align-items:center}.m4-status{font-size:12px;max-width:95%}.m4-bom[open]{width:174px}.m4-scene:has(.m4-bom[open]) .m4-stage{right:180px}.m4-answer-grid{width:100%;gap:7px}.m4-overlay{padding:12px;gap:9px}.m4-overlay h3{font-size:16px}.m4-answer-grid button{height:88px}.m4-answer-grid img{height:73px}.m4-picture-prompt{gap:9px;height:80px}.m4-picture-prompt>img{width:75px;height:70px}.m4-picture-prompt b{width:52px;height:52px;font-size:30px}.m4-color-orb{width:48px;height:48px;margin:5px auto}.m4-tools h3{font-size:16px}.m4-tools>p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.m4-lab button{transition:none}}
.m4-object-card>.m4-track-profile{position:absolute;right:8px;bottom:23px;width:52px;height:21px;filter:drop-shadow(0 1px 2px #000)}
.m4-bom:not([open]) .m4-bom-body{display:none}
.m4-race-options:has([data-m4=ghost]){grid-template-columns:repeat(3,44px)}