
/* ATLAS v3.8: native shared-renderer 3D and Canvas2D VFX studies. */
.scene.scene-p38,.term-card .scene.scene-p38{height:352px!important;display:block!important;position:relative;z-index:2;overflow:hidden;background:#0f1b32!important;pointer-events:auto}
.p38{position:relative;width:100%;height:100%;min-height:288px;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 40% 35%,#203657,#0d182c);color:#eef3ff;font:14px/1.5 system-ui,-apple-system,sans-serif}
.p38 *,.p38 *::before{box-sizing:border-box;font-size:14px}
.p38 canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.p38-label{position:absolute;left:12px;top:10px;color:#d5e4ff;font-size:14px;font-weight:700;z-index:4;pointer-events:none;text-shadow:0 1px 4px #061020}
.p38-control{position:absolute;z-index:5;left:10px;right:10px;bottom:12px;display:grid;gap:6px;grid-template-columns:1fr auto;align-items:center;background:#101e35d9;border:1px solid #8599b144;border-radius:12px;padding:10px;min-width:0;backdrop-filter:blur(7px)}
.p38-control label{grid-column:1/-1;font-size:14px;line-height:1.4;color:#dae4ff}
.p38-control input[type=range]{width:100%;min-width:0;accent-color:#91b8ff;min-height:30px}
.p38-control select{max-width:100%;border:1px solid #9aafc9;border-radius:7px;min-height:36px;padding:6px;background:#1c2d4d;color:#fff}
.p38-output{font-size:14px;color:#e1ecff;white-space:nowrap;min-width:44px;text-align:right}
.p38-options{grid-column:1/-1;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.p38 button{font:600 14px/1.35 system-ui,sans-serif;min-height:36px;min-width:42px;padding:6px 10px;border-radius:8px;border:1px solid #7189b6;background:#2e4b84;color:#fff;cursor:pointer}
.p38 button[aria-pressed=true],.p38 button:hover{background:#5676c2}
.p38 button:focus-visible,.p38 input:focus-visible,.p38 select:focus-visible{outline:3px solid #ffdb85;outline-offset:3px}
.p38-info{font-size:14px;color:#cbd9f0;overflow-wrap:anywhere}
.p38 .lab{height:100%;background:transparent!important;color:#fff;min-height:0}
.p38.lab .lab-action{inset:40px 10px 155px;min-height:40px;touch-action:pan-y;z-index:1}
.p38 .lab-zoom{right:11px;top:12px;z-index:6}
.p38.lab canvas{z-index:0}
.p38 .lab-loading{position:absolute;left:0;right:0;top:43%;text-align:center}
.p38 .lab-hint{display:none}
.p38.p38-webgl .p38-control{bottom:8px}
.p38.p38-vfx .p38-output{font-variant-numeric:tabular-nums}
.p38.p38-vfx canvas{touch-action:pan-y}
.p38-hud{position:absolute;right:12px;top:12px;background:#172640bf;border-radius:6px;padding:5px 7px;color:#e5edff;font-size:14px;pointer-events:none}
.p38-status{position:absolute;top:38px;left:12px;right:12px;color:#dce8ff;font-size:14px;text-shadow:0 2px 4px #111;text-align:left;pointer-events:none;z-index:3}
.p38-marker{position:absolute;left:50%;top:31%;border:1px solid #ffffff65;border-radius:50%;width:70px;height:70px;transform:translate(-50%,-50%);pointer-events:none}
.p38.p38-3d .lab-action,.p38.p38-webgl .lab-action{color:transparent;border:0;background:transparent;box-shadow:none}
.doc-demo:has(.p38){height:405px;max-width:760px}
@media(max-width:740px){.term-card .scene.scene-p38{height:375px!important}.doc-demo:has(.p38){height:420px}.p38-control{padding:9px}.p38-label{font-size:14px}}
@media(prefers-reduced-motion:reduce){.p38{scroll-behavior:auto}.p38 *{animation:none!important;transition-duration:.01ms!important}}

.p38.p38-webgl .lab-action{position:absolute;inset:42px 10px 155px;z-index:2;cursor:grab;touch-action:pan-y;color:transparent;min-width:0}
.p38.p38-webgl .lab-zoom{position:absolute;z-index:6;right:10px;top:12px;display:flex;gap:5px}
.p38.p38-webgl .lab-zoom button{font-size:18px;background:#243858;color:#fff;border:1px solid #8196ca;min-width:38px;min-height:38px}
.p38.p38-webgl .lab-loading{position:absolute;z-index:1;top:40%;width:100%;left:0;text-align:center}
.p38.p38-webgl[data-ready=true] .lab-loading{display:none}
