*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#10151a;color:#dce5ea;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input,select{font:inherit;color:inherit;cursor:pointer}button{border:0;touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #a6c9da;outline-offset:3px}button:hover{filter:brightness(1.2)}button:active{transform:scale(.96)}[hidden]{display:none!important}#app{max-width:1060px;margin:auto;background:#192128;padding:28px 30px 16px;min-height:100dvh}header{display:flex;align-items:center;gap:11px;padding-bottom:23px}.mark{width:43px;height:43px;display:grid;place-items:center;color:#e5c478;font-size:32px;background:#2a3034;border-radius:13px}.brand{flex:1}.brand>span{font-size:8px;letter-spacing:1.7px;color:#72818c}.brand h1{font-size:19px;margin:6px 0 0;letter-spacing:-.6px;font-weight:650}header button{background:#252f37;border:1px solid #33404a;width:36px;height:36px;border-radius:11px;font-size:20px;color:#aebec8}#pause{color:#ebce85}.experiment-bar{display:flex;align-items:center;gap:9px;margin-bottom:16px}.experiment-bar>span{font-size:9px;color:#6d7d87;margin-right:4px}.experiment-bar button{background:#232d35;color:#8ea1ae;border:1px solid #33404a;font-size:10px;padding:7px 12px;border-radius:18px}.workspace{display:grid;grid-template-columns:1fr 225px;gap:20px}.tank{height:640px;min-height:0;position:relative;border:1px solid #3b4853;border-radius:20px;overflow:hidden;background-color:#10191f;background-image:radial-gradient(#8295a013 .8px,transparent .8px);background-size:15px 15px;box-shadow:inset 0 0 70px #07131b65}canvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;image-rendering:pixelated}.tank-hud{position:absolute;left:15px;right:15px;top:14px;display:flex;justify-content:space-between;pointer-events:none;font-size:9px;color:#74848e}.tank-hud>span{display:flex;align-items:center;gap:6px;background:#111b22b8;padding:5px 8px;border-radius:10px}#status-dot{width:4px;height:4px;border-radius:50%;background:#86bd9b;box-shadow:0 0 7px #86bd9b55}.tank-hud b{font-variant-numeric:tabular-nums;font-weight:400}.tank-label{position:absolute;bottom:14px;left:17px;pointer-events:none;font:7px ui-monospace,monospace;letter-spacing:1.5px;color:#475c6b}#hint{pointer-events:none;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#81919c;transition:opacity .5s}.orbit{font-size:50px;color:#c8b37d;margin-bottom:4px}#hint h2{font-size:17px;letter-spacing:-.4px;font-weight:500}#hint p{font-size:10px;color:#556e7d;text-align:center;line-height:1.8;max-width:250px}#paused-badge{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);font-size:10px;border:1px solid #e0c4744a;border-radius:16px;padding:7px 13px;background:#28291fbd;color:#dbc98b;pointer-events:none}.materials{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.material{min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 4px 11px;border:1px solid #33424c;border-radius:14px;background:#212b33;color:#869aa8;font-size:10px}.material i{height:19px;width:19px;border-radius:5px;background:var(--color);box-shadow:inset 0 -3px 0 #0002,0 3px 9px #0003}.material.selected{border-color:var(--color);background:color-mix(in srgb,var(--color) 12%,#212b33);color:var(--color)}.material[data-material="7"] i{border-radius:50%;position:relative}.material[data-material="7"] i:after{content:'';position:absolute;width:7px;height:5px;border-top:2px solid #ead090;top:-5px;left:9px;transform:rotate(-35deg)}.material[data-material="0"] i{background:none;border:1px dashed #8d9ca7;box-shadow:none;border-radius:50%}.selection{display:flex;gap:11px;padding:20px 4px 10px;min-height:93px}.selection>span{width:7px;height:7px;flex-shrink:0;border-radius:50%;margin-top:5px}.selection strong{font-size:12px;font-weight:500}.selection p{font-size:10px;color:#6f8795;line-height:1.75;margin-top:6px}.sliders{border-top:1px solid #2c3a44;padding:15px 3px}.sliders label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:5px 0 16px;font-size:10px;color:#859ca9;gap:12px}.sliders output{color:#d5e0e5;font:11px ui-monospace,monospace}.sliders input{width:100%;accent-color:#b0c6d3;height:4px;margin:5px 0}.sliders select{background:#24333f;border:1px solid #394c5a;border-radius:7px;font-size:10px;padding:5px 13px}.save-controls{display:flex;gap:8px}.save-controls button{flex:1;border:1px solid #3a4a57;background:#263640;font-size:11px;padding:10px 0;border-radius:10px;color:#a1b9c6}footer{display:flex;justify-content:space-between;gap:12px;color:#607583;font-size:9px;padding:17px 1px 0;min-height:30px}#notice{color:#8d9c95}dialog{border:1px solid #415768;border-radius:23px;background:#24333f;color:#cbdbe4;padding:27px;width:330px;max-width:90vw}dialog::backdrop{background:#030d16aa;backdrop-filter:blur(5px)}dialog h2{font-size:19px}dialog p{font-size:12px;color:#8ea7b5}dialog>div{display:flex;justify-content:flex-end;gap:10px;margin-top:26px}dialog button{background:#354c5c;border-radius:20px;font-size:12px;padding:10px 17px}dialog #confirm{background:#bd9c69;color:#172631}@media(min-width:900px){#app{margin:25px auto;min-height:0;border:1px solid #2a3740;border-radius:27px;box-shadow:0 25px 80px #0002}}@media(max-width:750px){#app{padding:20px 16px 14px}.workspace{grid-template-columns:1fr;gap:14px}.tank{height:clamp(270px,49dvh,650px);border-radius:16px}header{padding-bottom:17px;gap:7px}.brand>span{font-size:7px;letter-spacing:1px}.brand h1{font-size:18px}header button{width:33px;height:33px;font-size:18px}.experiment-bar{gap:7px;margin-bottom:12px}.experiment-bar button{padding:6px 10px;font-size:9px}.materials{grid-template-columns:repeat(6,1fr);gap:6px}.material{padding:9px 2px 7px;gap:5px;border-radius:10px;font-size:9px}.material i{height:15px;width:15px}.selection{padding:10px 2px 0;min-height:48px}.selection p{margin:3px 0 0;font-size:10px}.selection strong{font-size:11px}.sliders{display:flex;gap:22px;padding:10px 1px 2px;border-top:0}.sliders label:first-child{flex:1;gap:3px}.sliders label{margin:0 0 7px;font-size:9px}.sliders input{height:3px}.sliders select{padding:5px 7px}.save-controls{display:flex;position:relative;margin-top:5px}.save-controls button{padding:7px;font-size:10px}footer{flex-direction:column;gap:5px;padding-top:12px;font-size:8px}footer>span:first-child{display:none}}@media(max-height:720px) and (max-width:750px){#app{padding-top:12px}header{padding-bottom:10px}.tank{height:42dvh;min-height:230px}.materials{gap:5px}.material{padding-top:7px}.selection{min-height:42px}.save-controls{margin-top:0}.experiment-bar{margin-bottom:9px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(orientation:landscape) and (max-height:550px){#app{padding:12px 18px;min-height:100dvh;max-width:1160px;margin:0 auto;border-radius:0}header{padding-bottom:10px}.experiment-bar{margin-bottom:10px}.workspace{grid-template-columns:1fr 225px;gap:15px}.tank{height:calc(100dvh - 124px);min-height:160px}aside{max-height:calc(100dvh - 124px);overflow-y:auto;padding-right:5px;scrollbar-width:thin}.materials{grid-template-columns:repeat(4,1fr);gap:5px}.material{padding:7px 3px;font-size:9px;gap:4px}.material i{width:13px;height:13px}.selection{min-height:0;padding:12px 2px 4px}.sliders{padding:7px 1px}.sliders label{margin:4px 0 8px}.save-controls button{padding:7px}footer{display:none}}