.component-workbench{--wb-ink:#203941;--wb-paper:#fbf9f2;box-sizing:border-box;width:min(1420px,96vw);height:min(850px,94dvh);max-width:none;max-height:none;padding:0;border:1px solid #829495;border-radius:18px;background:var(--wb-paper);color:var(--wb-ink);overflow:hidden;box-shadow:0 25px 110px #0008;font:16px/1.5 'Confyra Learning',Arial,sans-serif}.component-workbench::backdrop{background:#10242ddd;backdrop-filter:blur(5px)}.component-workbench *{box-sizing:border-box}.wb-header{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 24px;border-bottom:1px solid #c8d3cd;background:#fbf9f2}.wb-header p{margin:0 0 4px;font-size:11px;letter-spacing:.12em;font-weight:700;color:#956326}.wb-header h2{font-size:clamp(21px,2.2vw,30px);line-height:1.15;margin:0}.component-workbench button,.component-workbench select{font:inherit;min-height:44px;padding:9px 13px;border:1px solid #a6b7b5;border-radius:8px;background:#fffefa;color:#203941;cursor:pointer}.component-workbench button:hover{border-color:#4a787e;background:#e7efeb}.component-workbench button:focus-visible,.component-workbench input:focus-visible,.component-workbench select:focus-visible,.component-workbench summary:focus-visible{outline:3px solid #a36b21;outline-offset:3px}.component-workbench button[aria-pressed=true]{background:#284e54;color:#fff;border-color:#284e54}.component-workbench button:disabled{opacity:.45;cursor:default}.wb-back{white-space:nowrap;font-weight:700!important}.wb-layout{height:calc(100% - 88px);display:grid;grid-template-columns:minmax(0,1.7fr) minmax(340px,1fr)}.wb-visual{min-width:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at 45% 40%,#415762,#26343d 70%);color:#eef5f3}.wb-stage{position:relative;flex:1;min-height:240px;overflow:hidden}.wb-stage canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.wb-stage canvas[hidden]{display:none}.wb-fallback{position:absolute;inset:30px 12px;display:flex;align-items:center}.wb-fallback[hidden]{display:none}.wb-fallback svg{width:100%;height:auto}.wb-graphics-status{position:absolute;left:16px;top:12px;right:16px;color:#d2e1e3;font-size:12px;pointer-events:none}.wb-labels{position:absolute;inset:0;pointer-events:none}.wb-labels span{position:absolute;transform:translate(-50%,-100%);padding:5px 9px;border-radius:6px;background:#172e36e8;color:white;font-size:12px;max-width:160px;box-shadow:0 2px 10px #0003}.wb-view-actions{display:flex;justify-content:center;gap:8px;padding:12px;flex-wrap:wrap}.wb-view-actions button{background:#304c56;color:#fff;border-color:#6e8990;font-size:13px}.wb-caption{text-align:center;color:#bdcdd0;font-size:12px;margin:0;padding:0 16px 16px}.wb-panel{overflow-y:auto;padding:22px;min-width:0;border-left:1px solid #c6d1cc}.wb-instruction{margin:0 0 16px;font-size:17px}.wb-controls{display:grid;gap:16px}.wb-tabs,.wb-options{display:flex;flex-wrap:wrap;gap:7px}.wb-tabs button{flex:1 1 auto;font-size:14px}.wb-range{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font-size:14px;font-weight:700}.wb-range input{grid-column:1/-1;width:100%;height:30px;accent-color:#2e5c61;cursor:pointer}.wb-range output{grid-column:2;grid-row:1;font-variant-numeric:tabular-nums;color:#76624a}.wb-nudge{display:flex;gap:8px;margin-top:-8px}.wb-nudge button{flex:1;font-size:13px}.wb-options button{font-size:14px}.wb-select{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}.wb-wave{background:#263b45;border-radius:9px;padding:8px;color:#cddbdd;font-size:11px}.wb-wave svg{width:100%;height:auto}.wb-reading{margin:20px 0;padding:15px 16px;background:#edf1e9;border-left:3px solid #be8b43;border-radius:0 8px 8px 0}.wb-reading strong{font-size:18px}.wb-reading p{margin:6px 0 0;font-size:16px}.wb-selection{padding-top:8px;border-top:1px solid #b9c7bf}.wb-technical,.wb-audio{border-top:1px solid #c5d1c9}.component-workbench summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:700;font-size:14px}.component-workbench details p{font-size:14px}.wb-audio button{font-size:13px;margin:0 5px 5px 0}.wb-audio-status{display:block;font-size:13px}.component-workbench[open]{animation:wb-enter .2s ease-out}@keyframes wb-enter{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}@media(max-width:760px){.component-workbench{width:100vw;height:100dvh;border-radius:0;border:0;overflow-y:auto}.wb-header{position:sticky;top:0;z-index:4;padding:12px 14px;gap:10px}.wb-header h2{font-size:21px}.wb-header p{font-size:9px}.wb-back{font-size:12px!important;white-space:normal;max-width:125px}.wb-layout{height:auto;display:flex;flex-direction:column}.wb-stage{height:clamp(260px,39svh,410px);flex:none}.wb-panel{padding:18px;overflow:visible;border-left:0}.wb-view-actions{padding:7px}.wb-caption{padding:0 12px 10px}.wb-instruction{font-size:16px}.wb-tabs button{min-height:46px}.wb-range input{height:36px}.component-workbench select{font-size:16px}}@media(prefers-reduced-motion:reduce){.component-workbench[open]{animation:none}}
.component-workbench[open]{display:flex;flex-direction:column}.wb-header{flex:0 0 auto}.wb-layout{height:auto;flex:1;min-height:0}.wb-view-actions[hidden],.wb-legend[hidden]{display:none}.wb-legend{font-size:12px;line-height:1.4;color:#d0dfe0;text-align:center;margin:0;padding:8px 18px 0;min-height:25px}.wb-panel{overscroll-behavior:contain}.wb-selection{color:#214750}.wb-graphics-status{line-height:1.45;max-width:650px}.wb-state-title{display:block}.wb-reading[aria-live]{overflow-wrap:break-word}@media(max-width:760px){.component-workbench[open]{display:block}.wb-layout{min-height:auto}.wb-legend{padding:6px 12px 0;font-size:11px}.wb-panel{overflow:visible}}@media(max-width:380px){.wb-panel{padding:14px}.wb-controls{gap:13px}.wb-options button{flex:1 1 130px}.wb-select{align-items:flex-start;flex-direction:column}.wb-select select{width:100%}.wb-nudge{flex-wrap:wrap}.wb-nudge button{min-width:125px}}
/* R77: studio surface uses CSS rather than another GPU background pass. */
.wb-stage{background:radial-gradient(ellipse at 48% 44%,#506369 0%,#334951 52%,#22333c 100%)}
.wb-stage canvas{position:absolute;inset:0}
.wb-graphics-status{color:#ecf2f0;text-shadow:0 1px 4px #172a30;padding:4px 7px;border-radius:5px;width:fit-content;background:#20343b70}
.wb-reading{background:linear-gradient(135deg,#edf2ed,#f3f2e9);border-left-color:#c99748}
.wb-visual{border-right:1px solid #63767c}
@media(min-width:761px){.component-workbench{height:min(800px,94dvh)}.wb-layout{grid-template-columns:minmax(0,1.8fr) minmax(330px,1fr)}}
.component-workbench[data-preparing] .wb-stage::after{content:"";position:absolute;left:calc(50% - 18px);top:calc(50% - 18px);width:36px;height:36px;border:3px solid #91aeb14d;border-top-color:#e6af52;border-radius:50%;animation:wb-prepare .8s linear infinite}
@keyframes wb-prepare{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.component-workbench[data-preparing] .wb-stage::after{animation:none;border-color:#e6af52}}
/* Base dialog styles otherwise constrain this 3D workspace to 880 px. */
.diesel-app dialog.component-workbench{width:min(1420px,96vw);max-width:none;height:min(800px,94dvh);max-height:none;overflow:hidden;background:#fbf9f2}
.diesel-app dialog.component-workbench[open]{animation:none}
.diesel-app dialog.component-workbench .wb-header h2{font-size:clamp(21px,2.2vw,30px)}
@media(max-width:760px){.diesel-app dialog.component-workbench{width:100vw;height:100dvh;border:0;border-radius:0;overflow-y:auto}.diesel-app dialog.component-workbench .wb-header{padding:12px 14px}.diesel-app dialog.component-workbench .wb-header h2{font-size:21px}}
.component-workbench .wb-view-actions button:hover,.component-workbench .wb-view-actions button:focus-visible{background:#45646d;color:#fff;border-color:#a3bec4}
/* Readable active mode and an intact 3D badge on narrow screens. */
body#diesel-learning.diesel-app .mode-nav .feature-badge{flex:0 0 auto;white-space:nowrap}
body#diesel-learning.diesel-app .mode-nav button[aria-pressed="true"]{background:#294e55;color:#fff;border-color:#294e55}
body#diesel-learning.diesel-app .mode-nav button[aria-pressed="false"]{background:#f6f2e9;color:#26343d;border-color:#aebdbb}
body#diesel-learning.diesel-app .mode-nav button[aria-pressed="true"] .feature-badge{background:#e6af52;color:#26343d}
@media(max-width:420px){body#diesel-learning.diesel-app .mode-nav button{font-size:14px;gap:5px;padding-inline:8px;white-space:nowrap}}