*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:#2c1c24;font-family:Inter,ui-rounded,system-ui,sans-serif}button,input{font:inherit}#volcano-lab-root{position:relative;width:100%;height:100%;overflow:hidden;background:#f4b45f}#volcano-stage{position:absolute;left:0;top:0;width:1600px;height:900px;overflow:hidden;color:#35252a;background:linear-gradient(#90d7e9 0,#90d7e9 55%,#6d4132 55%)}#volcano-canvas,#volcano-canvas canvas{display:block;width:1600px;height:900px}#volcano-canvas{position:absolute;top:0;right:0;bottom:0;left:0}.topbar{position:absolute;z-index:5;left:26px;right:26px;top:22px;height:82px;display:flex;align-items:center;gap:28px;padding:12px 18px;border:2px solid rgba(255,255,255,.72);border-radius:24px;background:#fffbede0;box-shadow:0 12px 30px #46271f29;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;min-width:300px;gap:13px}.brand-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:#ffcf75;font-size:32px}.brand small,.dock-heading small{display:block;color:#9b4b37;font-size:13px;font-weight:900;letter-spacing:1.6px}.brand strong{display:block;font-size:29px;line-height:1}.eruption-badge{min-width:176px;padding:8px 16px;border-radius:15px;background:#573944;color:#fff;text-align:center}.eruption-badge span{display:block;color:#ffd589;font-size:11px;font-weight:800;letter-spacing:1.3px}.eruption-badge strong{font-size:20px}.instruction{margin:0 0 0 auto;max-width:520px;color:#664a48;font-size:18px;font-weight:650}.tool-group{display:flex;gap:10px}.trace-button{height:50px;padding:0 18px;border:0;border-radius:16px;background:#d9653b;box-shadow:0 6px 14px #3d222233;color:#fff;cursor:pointer;font-size:15px;font-weight:900}.trace-button span{display:inline-block;margin-right:6px;color:#ffe3a1;font-size:20px}.trace-button:hover,.trace-button:focus-visible{outline:4px solid rgba(245,134,66,.42);transform:translateY(-2px)}.trace-button[aria-pressed=true]{background:#573944}.tool-button{flex:0 0 50px;width:50px;height:50px;border:0;border-radius:16px;background:#573944;box-shadow:0 6px 14px #3d222233;color:#fff4d5;cursor:pointer;font-size:22px;font-weight:900}.tool-button:hover,.tool-button:focus-visible{outline:4px solid rgba(245,134,66,.42);transform:translateY(-2px)}.tool-button[aria-pressed=true]{background:#d9653b}.process-pill{position:absolute;z-index:4;min-width:178px;padding:10px 17px;border:2px solid rgba(255,255,255,.9);border-radius:18px;background:#452b30e6;box-shadow:0 8px 18px #2f191a38;color:#fff;cursor:pointer;text-align:left}.process-pill:hover,.process-pill:focus-visible{transform:translateY(-2px);outline:4px solid rgba(255,216,111,.55)}.process-pill span{display:block;color:#ffe3a1;font-size:12px;font-weight:900;letter-spacing:1px}.process-pill strong{display:block;margin-top:2px;font-size:20px}.process-popup{position:absolute;z-index:9;left:92px;top:142px;width:390px;padding:30px 32px 28px;border:3px solid rgba(255,255,255,.9);border-radius:28px;background:#fffae7f7;box-shadow:0 22px 55px #3d22224d;color:#4a3034}.process-popup[hidden]{display:none}.process-popup small{color:#a64d35;font-size:13px;font-weight:900;letter-spacing:1.6px}.process-popup h2{margin:7px 42px 10px 0;font-size:30px;line-height:1.08}.process-popup p{margin:0;color:#684c49;font-size:18px;font-weight:600;line-height:1.45}.popup-close{position:absolute;right:18px;top:16px;width:46px;height:46px;border:0;border-radius:15px;background:#573944;color:#fff;cursor:pointer;font-size:30px;line-height:1}.popup-close:focus-visible{outline:4px solid #ffbd55}.observation-prompt{margin-top:18px;padding:14px 16px;border-left:7px solid #f58642;border-radius:12px;background:#ffe8b9}.observation-prompt b,.observation-prompt span{display:block}.observation-prompt b{margin-bottom:4px;color:#8b3f31;font-size:14px;text-transform:uppercase}.observation-prompt span{font-size:16px;font-weight:700;line-height:1.35}.pressure-pill{left:350px;top:570px}.gas-pill{left:260px;top:390px}.ash-pill{left:1200px;top:145px}.lava-pill{left:1330px;top:500px}.control-dock{position:absolute;z-index:6;left:78px;right:78px;bottom:22px;height:112px;display:grid;grid-template-columns:265px repeat(3,1fr);align-items:center;gap:25px;padding:17px 28px;border:2px solid rgba(255,255,255,.55);border-radius:27px;background:#37242bf0;box-shadow:0 18px 42px #2e191d47;color:#fff;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.dock-heading strong{display:block;max-width:240px;margin-top:5px;font-size:20px;line-height:1.15}.control-dock label{display:block;padding-left:24px;border-left:1px solid rgba(255,255,255,.2)}.control-dock label>span{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.control-dock b{font-size:17px}.control-dock em{min-width:38px;padding:3px 7px;border-radius:9px;background:#ffca69;color:#4f3036;font-style:normal;font-weight:900;text-align:center}.control-dock input[type=range]{width:100%;height:12px;margin:0;border-radius:8px;accent-color:#ff8b3d;cursor:pointer}.control-dock input[type=range]::-webkit-slider-thumb{width:30px;height:30px}.loading-card{position:absolute;left:570px;top:380px;width:460px;padding:30px;border:2px solid rgba(255,255,255,.75);border-radius:26px;background:#fff9e5eb;box-shadow:0 18px 44px #46271f38;text-align:center}.loading-card strong{display:block;margin-bottom:8px;font-size:28px}.loading-card span{font-size:17px}