.simulator{padding-block:55px 80px}.sim-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:32px}.sim-intro h1{font-size:clamp(2.75rem,4.6vw,4.5rem);line-height:1.12;margin:18px 0}.sim-intro p{max-width:600px;font-size:1.125rem;line-height:1.6}.sim-intro-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}.sim-notice{display:flex;align-items:center;gap:16px;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:18px 22px;font-size:1rem}.sim-notice>p{flex:1;font-size:1rem}.sim-notice>a{min-height:44px;display:flex;align-items:center;flex-shrink:0;color:var(--brand)}
.gateway-path{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 14px}.gateway-path>div{display:grid;grid-template-columns:38px 1fr;gap:5px 12px;align-items:center;min-width:0}.path-number{grid-row:1/3;border:1px solid var(--line);background:var(--surface);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-size:.875rem;color:var(--brand)}.gateway-path strong{font-size:1rem}.gateway-path>div>span:last-child{font-size:.875rem;color:var(--muted)}.path-arrow{color:var(--muted);font-size:1.5rem}
.sim-device-grid{display:grid;grid-template-columns:1fr 1fr 1.12fr;gap:20px}.sim-device{display:flex;flex-direction:column;min-width:0;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:10px}.pump-device{background:var(--brand-soft)}.sim-device-heading{display:flex;justify-content:space-between;gap:10px;align-items:start;flex-wrap:wrap}.sim-device-heading .eyebrow{font-size:.875rem;line-height:1.5;letter-spacing:.02em}.sim-device-heading .badge{font-size:.875rem}.sim-device-visual{height:210px;position:relative;margin-block:12px 10px;display:grid;place-items:center}.sim-device-visual>img{width:100%;max-width:220px;height:210px;object-fit:contain}.device-address{position:absolute;bottom:8px;inset-inline-end:0;font-size:.875rem;color:var(--muted);direction:ltr}.sim-device h2{font-size:1.5rem;margin-bottom:10px}.sim-device>p{font-size:1rem;line-height:1.6;min-height:78px;color:var(--muted)}.device-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:20px}.device-actions .button{font-size:1rem;min-height:48px;padding-inline:16px;white-space:normal;flex:1}.radio-visual{align-content:center;gap:8px;background:var(--soft);border-radius:6px}.radio-symbol{width:64px;height:64px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;margin-bottom:6px;color:var(--brand)}.radio-symbol .icon{width:30px;height:30px}.radio-visual>strong{font-size:1.25rem}.radio-visual>span:not(.device-address){font-size:.9375rem;color:var(--muted)}.radio-visual .device-address{inset-inline-end:12px}.device-actions button:disabled{opacity:.5;cursor:not-allowed}.device-actions button:disabled:hover{transform:none}
.guard-feedback{margin-top:24px;display:flex;align-items:center;gap:18px;padding:24px;border:1px solid var(--line);background:var(--warning-bg);border-radius:8px}.guard-feedback.ready{background:var(--brand-soft)}.guard-feedback>div{flex:1}.guard-feedback h2{font-size:1.25rem;margin-bottom:4px}.guard-feedback p{font-size:1rem}.guard-feedback>.badge{flex-shrink:0;font-size:.875rem}.sim-last-response{min-height:30px;margin-top:10px;color:var(--brand);font-size:1rem}
.sim-bottom{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-block:42px 60px}.sim-bottom h2{font-size:1.75rem;margin:12px 0}.sim-scenarios>p{font-size:1rem;color:var(--muted);margin-bottom:22px}.scenario-buttons{display:flex;flex-direction:column}.scenario-buttons>button{display:flex;align-items:center;gap:16px;padding:18px 0;border:0;border-top:1px solid var(--line);background:transparent;font:inherit;color:var(--ink);text-align:start;cursor:pointer;min-height:76px}.scenario-buttons>button>span:nth-child(2){flex:1;font-size:1rem}.scenario-buttons small{display:block;font-size:.875rem;color:var(--muted);margin-top:3px}.scenario-buttons>button:hover{color:var(--brand)}.clock-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:22px}.clock-controls>span{flex-basis:100%;font-size:.9375rem;color:var(--muted);margin-bottom:4px}.clock-controls .button{font-size:1rem;min-height:48px;padding-inline:16px}.sim-log-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.sim-log-heading .badge{font-size:.875rem}.sim-log>ol{list-style:none;margin:20px 0;padding:0;max-height:372px;overflow-y:auto}.sim-log li{display:flex;gap:16px;padding-block:14px;border-top:1px solid var(--line)}.sim-log time{font-size:.875rem;color:var(--muted);padding-top:3px;font-variant-numeric:tabular-nums}.sim-log li>div{min-width:0}.sim-log li strong{display:block;font-size:1rem}.sim-log li span{display:block;font-size:.875rem;color:var(--muted);margin-top:4px;direction:ltr;text-align:start;overflow-wrap:anywhere}.sim-log .empty-log{font-size:1rem;color:var(--muted);padding-block:22px}.protocol-details{border-top:1px solid var(--line);padding-top:6px}.protocol-details summary{min-height:48px;cursor:pointer;font-size:1rem;align-content:center;color:var(--brand)}.protocol-details pre{font-size:.875rem;background:var(--soft);border:1px solid var(--line);border-radius:5px;padding:16px;white-space:pre-wrap;overflow-wrap:anywhere;margin-block:10px}.protocol-details p{font-size:.9375rem;color:var(--muted);line-height:1.6}.sim-guide{border-top:1px solid var(--line);padding-top:32px}.sim-guide h2{font-size:1.75rem;margin-bottom:26px}.sim-guide ol{list-style:none;display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;margin:0;padding:0;counter-reset:guide}.sim-guide li{position:relative;padding-inline-start:34px;counter-increment:guide;font-size:1rem}.sim-guide li:before{content:counter(guide)'.';position:absolute;inset-inline-start:0;color:var(--brand)}.sim-guide li>strong{display:block;margin-bottom:8px}.sim-guide li>span{font-size:.9375rem;color:var(--muted);line-height:1.6}
html[lang=ar] .sim-intro p,html[lang=ar] .sim-device>p,html[lang=ar] .sim-notice p,html[lang=ar] .sim-bottom p{font-size:1.25rem}html[lang=ar] .sim-device-heading .eyebrow,html[lang=ar] .gateway-path strong,html[lang=ar] .simulator .button,html[lang=ar] .sim-log li strong,html[lang=ar] .scenario-buttons>button>span:nth-child(2){font-size:1.125rem}html[lang=ar] .sim-device-visual{direction:ltr}html[lang=ar] .sim-intro h1{font-size:clamp(3rem,4.6vw,4.5rem)}[dir=rtl] .path-arrow{transform:rotate(180deg)}
@media(max-width:1000px){.sim-device-grid{gap:12px}.sim-device{padding:18px}.sim-intro-actions{max-width:220px}.sim-bottom{gap:30px}.gateway-path{gap:12px;padding-inline:0}.gateway-path>div{gap:4px 7px;grid-template-columns:30px 1fr}.path-number{width:28px;height:28px}.gateway-path>div>span:last-child{font-size:.8125rem}.sim-device>p{min-height:110px}.device-actions .button{flex-basis:100%}.sim-intro{align-items:start}.sim-intro h1{font-size:3.25rem}}
@media(max-width:760px){.simulator{padding-block:32px 50px}.sim-intro{flex-direction:column;gap:20px}.sim-intro-actions{flex-direction:row;align-items:center;max-width:none;flex-wrap:wrap;gap:14px}.sim-intro h1{font-size:2.75rem}.sim-notice{flex-wrap:wrap;padding:18px;gap:10px}.sim-notice>p{min-width:calc(100% - 35px)}.sim-notice>a{margin-inline-start:28px;font-size:1rem}.gateway-path{flex-direction:column;align-items:stretch;gap:10px;padding-block:24px}.gateway-path>div{grid-template-columns:38px 1fr}.path-number{width:34px;height:34px}.gateway-path>div>span:last-child{font-size:.875rem}.path-arrow{align-self:center;transform:rotate(90deg);font-size:1.25rem;line-height:1}[dir=rtl] .path-arrow{transform:rotate(90deg)}.sim-device-grid{grid-template-columns:1fr;gap:16px}.sim-device{padding:22px}.sim-device-visual{height:185px}.sim-device-visual>img{height:185px}.sim-device>p{min-height:0}.device-actions .button{flex-basis:auto}.radio-visual{height:210px}.guard-feedback{flex-wrap:wrap;padding:20px;gap:12px}.guard-feedback>div{min-width:calc(100% - 35px)}.guard-feedback>.badge{margin-inline-start:28px}.sim-bottom{grid-template-columns:1fr;gap:40px;margin-block:25px 40px}.sim-guide ol{grid-template-columns:1fr;gap:22px}.sim-log>ol{max-height:350px}html[lang=ar] .sim-intro h1{font-size:3rem}}