*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0b0f14;color:#d9e2ec;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{overflow:hidden}.app{height:100vh;display:flex;flex-direction:column}.header{height:64px;border-bottom:1px solid #26313d;background:#111821;display:flex;align-items:center;justify-content:space-between;padding:0 18px}.header strong{display:block;font-size:1rem;letter-spacing:.02em}.header span{display:block;color:#7f8fa3;font-size:.78rem;margin-top:3px}.layout{flex:1;min-height:0;display:grid;grid-template-columns:1fr 340px}.viewport{position:relative;min-width:0;background:#05070a}#labCanvas{width:100%;height:100%;display:block}.side{border-left:1px solid #26313d;background:#0f151d;padding:14px;overflow:auto}.card{border:1px solid #26313d;background:#151d27;border-radius:12px;padding:14px;margin-bottom:12px}.card h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.15em;color:#91a4bb;margin:0 0 12px}.card p{color:#aeb9c7;font-size:.9rem;line-height:1.45;margin:0 0 12px}.card code{display:block;background:#0b1017;border:1px solid #26313d;border-radius:8px;padding:9px 10px;margin:7px 0;color:#d7e8f8;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem}.values div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #23303d}.values div:last-child{border-bottom:0}.values span{color:#7f8fa3}.values strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#eef6ff}.controls label{display:block;color:#aeb9c7;font-size:.82rem;margin:13px 0}.controls input{display:block;width:100%;margin-top:7px;accent-color:#4cc9f0}.controls button,.header button{border:1px solid #3a4a5c;background:#182231;color:#eaf3ff;border-radius:8px;padding:9px 12px;font-weight:700;cursor:pointer}.controls button{width:100%;margin-top:8px}.legend{position:absolute;left:18px;bottom:18px;border:1px solid #26313d;background:rgba(15,21,29,.88);border-radius:10px;padding:10px 12px;color:#b6c2d0;font-size:.8rem}.legend div{display:flex;align-items:center;gap:8px;margin:5px 0}.legend i{width:22px;height:3px;display:inline-block;border-radius:4px}.legend .e{background:#4cc9f0}.legend .b{background:#ffd166}.legend .s{background:#c8d3df}.note{color:#78889a;font-size:.76rem;line-height:1.35;padding:0 4px}@media(max-width:860px){body{overflow:auto}.app{height:auto;min-height:100vh}.header{height:auto;min-height:62px}.layout{display:block}.viewport{height:62vh;min-height:430px}.side{border-left:0;border-top:1px solid #26313d}.legend{left:10px;bottom:10px;font-size:.72rem}.card{padding:12px}}

.header-actions{display:flex;gap:8px;align-items:center}
#aboutBtn{background:#172332;border-color:#34495f}

.modal{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.modal.open{display:flex}
.modal-card{position:relative;width:min(680px,100%);border:1px solid #33475c;background:#111821;border-radius:18px;padding:26px;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.modal-brand{margin:0 0 10px;color:#4cc9f0;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase}
.modal-card h2{margin:0 0 16px;color:#eef6ff;font-size:1.7rem;line-height:1.15}
.modal-card p{color:#c1ccd8;line-height:1.55;margin:0 0 14px}
.modal-note{border-left:3px solid #4cc9f0;padding-left:12px;color:#9dafc1!important}
.modal-copy{color:#7f8fa3;font-size:.82rem;margin-top:8px}
.modal-close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:#d9e2ec;font-size:1.8rem;cursor:pointer}
.modal-primary{width:100%;margin-top:18px;border:1px solid #4cc9f0;background:#173247;color:#eef6ff;border-radius:10px;padding:12px 14px;font-weight:800;cursor:pointer}
@media(max-width:860px){.header-actions{gap:6px}.header-actions button{padding:8px 10px}.modal-card{padding:22px 18px}.modal-card h2{font-size:1.45rem}}