@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&family=Space+Mono:wght@700&display=swap');
:root{--ink:#f7fbff;--muted:#92a4b8;--line:#ffffff18;--cyan:#5ce8ff;--orange:#ff8b4d;--blue:#4d8dff;--steel:#b9cad8;--yellow:#ffd45c}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050a10;color:var(--ink);font-family:Nunito,system-ui,sans-serif}.physics-app{position:relative;width:100%;height:100%;min-height:560px;overflow:hidden;background:radial-gradient(circle at 50% 42%,#152939,#09121c 50%,#04070c)}.physics-stage,.physics-stage canvas,.stage-shade{position:absolute;inset:0;width:100%;height:100%}.physics-stage canvas{display:block;touch-action:none;cursor:grab}.physics-stage canvas:active{cursor:grabbing}.stage-shade{z-index:2;pointer-events:none;background:linear-gradient(180deg,#03070da8,transparent 17%,transparent 72%,#03070dbd)}.glass-panel{position:absolute;z-index:8;background:linear-gradient(145deg,#172534eb,#0b131deb);border:1px solid var(--line);box-shadow:0 18px 48px #0009,inset 0 1px #ffffff0e;backdrop-filter:blur(18px);border-radius:22px}.physics-brand{top:18px;left:18px;height:62px;display:flex;align-items:center;padding:9px 14px 9px 9px;gap:11px}.brand-mark{width:43px;height:43px;border-radius:15px;background:linear-gradient(135deg,#63efff,#3976e8);display:grid;place-items:center;color:white;box-shadow:0 10px 25px #3da6ff4d}.brand-mark svg{width:23px}.brand-copy{color:white;text-decoration:none;display:flex;flex-direction:column;line-height:1}.brand-copy b{font-size:17px;letter-spacing:.03em}.brand-copy small{font-size:10px;color:#9eb0c4;letter-spacing:.15em;margin-top:6px}.viewer-tools{top:18px;left:50%;transform:translateX(-50%);height:52px;padding:6px;display:flex;gap:3px;border-radius:17px}.viewer-tools button{border:0;background:transparent;color:#8194a9;border-radius:11px;width:38px;display:grid;place-items:center;cursor:pointer}.viewer-tools button:hover,.viewer-tools button.active{background:#58ddff25;color:white}.viewer-tools button svg{width:18px}.viewer-tools .audio-toggle{width:auto;padding:0 9px;display:flex;gap:7px}.viewer-tools .audio-toggle span{font-size:11px}.physics-prompt{position:absolute;z-index:7;left:22px;top:100px;display:flex;align-items:center;gap:10px;color:#dfe9f4}.physics-prompt>i{width:38px;height:38px;border-radius:14px;background:#56e6ff16;border:1px solid #56e6ff32;color:#65ecff;display:grid;place-items:center}.physics-prompt svg{width:19px}.physics-prompt span{display:flex;flex-direction:column}.physics-prompt b{font-size:15px}.physics-prompt small{font-size:11px;color:#8094a8}.machine-panel{right:18px;top:18px;width:280px;padding:15px}.panel-heading span{display:flex;flex-direction:column;gap:3px}.panel-heading small,.experiment-top small,.ribbon-title small,.part-heading{font:700 9px Space Mono;letter-spacing:.12em;color:#8095aa}.panel-heading b{font-size:15px}.machine-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.machine-button{min-height:60px;border:1px solid #ffffff0c;background:#ffffff06;color:#8c9db0;border-radius:15px;padding:8px;display:flex;align-items:center;gap:9px;text-align:left;font-family:Nunito;cursor:pointer}.machine-button>i{width:33px;height:33px;border-radius:11px;background:#ffffff09;display:grid;place-items:center}.machine-button svg{width:18px}.machine-button span{display:flex;flex-direction:column}.machine-button b{font-size:13px}.machine-button small{font-size:10px}.machine-button.active{color:white;border-color:#57e7ff55;background:#57e7ff15}.machine-button.active>i{background:#57e7ff20;color:#65edff}.part-heading{display:flex;justify-content:space-between;margin:14px 3px 7px}.part-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}.part-button{border:1px solid #ffffff0d;background:#ffffff06;color:#b6c4d3;border-radius:11px;padding:8px 9px;text-align:left;font:800 11px Nunito;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.part-button:hover,.part-button.active{color:white;border-color:#56e6ff44;background:#56e6ff14}.experiment-panel{right:18px;top:245px;width:280px;padding:15px}.experiment-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.experiment-top>span{display:flex;flex-direction:column;gap:3px}.experiment-top b{font-size:15px}.run-button{border:0;border-radius:13px;background:linear-gradient(135deg,#65efff,#347ae9);color:#07101a;padding:9px 12px;display:flex;align-items:center;gap:6px;font:900 12px Nunito;cursor:pointer;box-shadow:0 9px 25px #3b9dff35}.run-button.running{background:linear-gradient(135deg,#ffca5c,#ff7550)}.run-button svg{width:15px}.power-control{display:block;margin-top:14px}.power-control>span{display:flex;justify-content:space-between;font-size:11px;color:#a8b7c6}.power-control strong{color:white}.power-control input{width:100%;margin-top:8px;accent-color:#5ce8ff}.gauge-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.gauge-grid>div,.gauge-grid>button{min-height:54px;border:1px solid #ffffff0d;background:#060c13aa;border-radius:12px;padding:8px;text-align:left;color:white}.gauge-grid small{display:block;font:700 8px Space Mono;color:#72889d;letter-spacing:.1em}.gauge-grid b{font-size:14px}.gauge-grid i{display:block;height:3px;background:#ffffff0c;border-radius:5px;margin-top:6px;overflow:hidden}.gauge-grid i span{display:block;width:0;height:100%;background:linear-gradient(90deg,#58e7ff,#ffb34f);transition:width .2s}.gauge-grid>button{grid-column:1/-1;display:flex;align-items:center;gap:9px;font-family:Nunito;cursor:pointer}.gauge-grid>button>i{width:31px;height:31px;margin:0;border-radius:10px;background:#ffffff0b;display:grid;place-items:center;color:#86a4bf}.gauge-grid button svg{width:16px}.gauge-grid button[aria-pressed="true"]{border-color:#ffbd5645;background:#ffbd5610}.system-ribbon{left:50%;bottom:18px;transform:translateX(-50%);width:min(700px,calc(100% - 36px));height:86px;padding:10px 12px;display:grid;grid-template-columns:130px 1fr;align-items:center;gap:10px;border-radius:27px}.ribbon-title{display:flex;align-items:center;gap:9px;padding-left:5px}.ribbon-title>i{width:35px;height:35px;display:grid;place-items:center;border-radius:13px;background:#5ce8ff18;color:#63ecff}.ribbon-title svg{width:18px}.ribbon-title span{display:flex;flex-direction:column}.ribbon-title b{font-size:14px}.system-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.system-toggle{height:60px;border:1px solid transparent;background:#ffffff05;color:#718599;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-family:Nunito;cursor:pointer}.system-toggle i{width:9px;height:9px;border-radius:50%;background:#68829b;box-shadow:0 0 11px currentColor}.system-toggle:nth-child(1) i{background:var(--steel);color:var(--steel)}.system-toggle:nth-child(2) i{background:var(--orange);color:var(--orange)}.system-toggle:nth-child(3) i{background:var(--cyan);color:var(--cyan)}.system-toggle:nth-child(4) i{background:var(--yellow);color:var(--yellow)}.system-toggle b{font-size:11px}.system-toggle.active{color:white;background:#ffffff0e;border-color:#ffffff17;transform:translateY(-2px)}.fact-panel{left:18px;bottom:122px;width:300px;padding:18px 20px;transition:.25s}.fact-panel h2{font-size:23px;line-height:1.05;margin:7px 28px 7px 0}.fact-system{margin:0;color:#7eeaff;font:700 9px Space Mono;letter-spacing:.14em}.fact-panel>p:not(.fact-system){font-size:14px;color:#c4cfda;line-height:1.42;margin:0}.fact-close{display:none;position:absolute;right:11px;top:11px;border:0;background:#ffffff0b;color:white;border-radius:10px;width:34px;height:34px}.fact-chip{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:7px 10px;background:#56e6ff13;color:#c6f8ff;border:1px solid #56e6ff29;border-radius:10px;font-size:11px;font-weight:800}.fact-chip svg{width:13px}.machine-label{--label:#5ce8ff;border:1px solid color-mix(in srgb,var(--label) 58%,transparent);border-radius:99px;background:#07101bee;color:#fff;padding:7px 11px 7px 22px;font:700 9px Space Mono;letter-spacing:.06em;white-space:nowrap;box-shadow:0 8px 24px #0009,0 0 14px color-mix(in srgb,var(--label) 20%,transparent);cursor:pointer;pointer-events:auto}.machine-label:before{content:"";position:absolute;left:8px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--label);transform:translateY(-50%);box-shadow:0 0 9px var(--label)}.machine-label.active{border-color:white;transform:scale(1.06)}.machine-label.hidden{display:none}.control-hint{position:absolute;z-index:7;bottom:110px;left:50%;transform:translateX(-50%);display:flex;gap:13px;color:#788b9f;font-size:11px;white-space:nowrap}.control-hint b{color:#dce6ef;background:#ffffff0b;border:1px solid #ffffff12;padding:3px 6px;border-radius:6px;margin-right:3px}.load-status{position:absolute;z-index:20;inset:0;background:#06101a;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:14px;transition:.5s}.load-status.done{opacity:0;pointer-events:none}.load-status span{width:46px;height:46px;border-radius:50%;border:3px solid #ffffff16;border-top-color:#5ce8ff;animation:spin .8s linear infinite}.load-status b{font:700 10px Space Mono;letter-spacing:.11em;color:#a8b8c8}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:980px){.machine-panel,.experiment-panel{width:245px}.fact-panel{width:250px}.system-ribbon{width:min(620px,calc(100% - 36px))}}
@media(max-width:760px){.physics-app{min-height:520px}.physics-brand{top:10px;left:10px;width:50px;height:50px;border-radius:15px;padding:7px}.brand-mark{width:35px;height:35px;border-radius:11px}.brand-copy,.physics-prompt{display:none}.viewer-tools{top:9px;left:auto;right:9px;transform:none;height:52px}.viewer-tools button{width:33px}.viewer-tools .audio-toggle{width:33px;padding:0}.viewer-tools .audio-toggle span,.viewer-tools #auto-rotate{display:none}.machine-panel{top:70px;right:10px;width:170px;padding:9px;border-radius:17px}.panel-heading{display:none}.machine-grid{margin:0;gap:5px}.machine-button{min-height:42px;padding:5px;justify-content:center}.machine-button>i{width:29px;height:29px}.machine-button span small{display:none}.part-heading,.part-list{display:none}.experiment-panel{left:10px;right:10px;top:auto;bottom:89px;width:auto;padding:10px 12px;border-radius:18px}.experiment-top b{font-size:13px}.power-control{margin-top:8px}.gauge-grid{display:none}.system-ribbon{left:10px;right:10px;bottom:10px;transform:none;width:auto;height:70px;padding:7px;border-radius:20px;display:block}.ribbon-title{display:none}.system-grid{height:100%;gap:4px}.system-toggle{height:100%;border-radius:13px}.system-toggle.active{transform:none}.system-toggle b{font-size:9px}.fact-panel{left:10px;right:10px;bottom:188px;width:auto;padding:14px 44px 14px 16px;transform:translateY(calc(100% + 230px));opacity:0;border-radius:18px}.fact-panel.is-open{transform:none;opacity:1}.fact-close{display:grid;place-items:center}.fact-panel h2{font-size:18px;margin:5px 0}.fact-panel>p:not(.fact-system){font-size:11px}.fact-chip{display:none}.machine-label{font-size:8px;padding:6px 8px 6px 17px}.machine-label:before{left:6px;width:5px;height:5px}.control-hint{bottom:164px;font-size:9px}.control-hint span:nth-child(2){display:none}}
@media(max-width:390px){.viewer-tools button{width:30px}.machine-panel{width:148px}.machine-button>i{display:none}.system-toggle b{font-size:8px}}@media(prefers-reduced-motion:reduce){.load-status span{animation:none}}

/* Focused car explorer */
.system-ribbon{width:min(880px,calc(100% - 36px))}.system-grid{grid-template-columns:repeat(6,1fr)}.system-toggle:nth-child(2) i{background:#79dfff;color:#79dfff}.system-toggle:nth-child(3) i{background:var(--orange);color:var(--orange)}.system-toggle:nth-child(4) i{background:var(--cyan);color:var(--cyan)}.system-toggle:nth-child(5) i{background:#bd8cff;color:#bd8cff}.system-toggle:nth-child(6) i{background:#ff5d6f;color:#ff5d6f}.machine-panel{top:18px}.experiment-panel{top:240px}.part-button{padding:9px}.viewer-tools #hood-toggle.active{background:#ff9b5228;color:#ffb06e}.opacity-dock{top:80px;left:50%;transform:translateX(-50%);width:235px;padding:9px 12px;border-radius:15px;display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px;transition:.2s}.opacity-dock span{display:flex;flex-direction:column;line-height:1}.opacity-dock small{font:700 8px Space Mono;letter-spacing:.12em;color:#7f94a9}.opacity-dock b{font-size:12px;margin-top:5px}.opacity-dock input{width:100%;accent-color:#70dcff}.opacity-dock.disabled{opacity:.45}
@media(max-width:760px){.machine-panel{display:none}.experiment-panel{top:auto;bottom:89px}.opacity-dock{top:69px;width:205px;padding:7px 10px}.system-grid{grid-template-columns:repeat(6,1fr)}.system-toggle b{font-size:8px}}
