:root{--ink:#172033;--muted:#566176;--bg:#f5f7fa;--surface:#fff;--border:#c7cfdb;--primary:#075985;--primary-dark:#06466a;--accent:#e9f4fa;--danger:#a61b1b;--warning:#8a4b00;--warning-bg:#fff4d8;--success:#146c43;--focus:#ffbf47;--shadow:0 2px 10px #14203314;color:var(--ink);background:var(--bg);font-family:Arial,Helvetica Neue,sans-serif;line-height:1.55}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin:0}.site-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:10;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem clamp(1rem,4vw,2rem);display:flex;position:sticky;top:0}.brand{align-items:center;gap:.7rem;display:flex}.brand-mark{object-fit:contain;width:4.5rem;height:2.5rem}.brand span:last-child{color:var(--muted);font-size:.8rem;display:block}.status-chip{border:1px solid var(--border);background:#fff;border-radius:999px;align-items:center;gap:.45rem;padding:.45rem .7rem;font-size:.9rem;display:flex}.status-dot{background:#687386;border-radius:50%;width:.7rem;height:.7rem}.status-chip.connected .status-dot{background:var(--success)}.status-chip.scanning .status-dot{background:var(--warning)}.app-shell{grid-template-columns:15rem 1fr;max-width:1440px;min-height:calc(100vh - 8rem);margin:auto;display:grid}.main-nav{border-right:1px solid var(--border);background:#eef2f6;padding:1.25rem}.nav-button{text-align:left;width:100%;color:var(--ink);background:0 0;border:0;border-radius:.5rem;align-items:center;gap:.7rem;margin-bottom:.3rem;padding:.75rem;display:flex}.nav-button span{border:1px solid var(--border);background:#fff;border-radius:50%;place-items:center;width:1.75rem;height:1.75rem;display:grid}.nav-button:hover{background:#dde7ef}.nav-button.is-active{background:var(--primary);color:#fff;font-weight:700}.nav-button.is-active span{color:var(--primary);border-color:#fff}main{min-width:0;padding:clamp(1rem,3vw,2.5rem)}.screen{max-width:1100px;margin:auto}.hero{margin-bottom:1.5rem}.hero h1{margin:.2rem 0 .55rem;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.15}.hero p:last-child{max-width:48rem;color:var(--muted);font-size:1.08rem}.eyebrow{text-transform:uppercase;letter-spacing:.08em;color:var(--primary);margin:0;font-size:.8rem;font-weight:700}.grid{gap:1rem;display:grid}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.status-layout{grid-template-columns:1fr 1fr}.log-card{grid-column:1/-1}.card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:.8rem;padding:clamp(1rem,2vw,1.4rem)}.card h2{margin-top:0;font-size:1.25rem}.card h3{font-size:1.05rem}.primary-card{border-top:5px solid var(--primary)}.card-heading{justify-content:space-between;align-items:start;gap:1rem;display:flex}.card-heading h2,.card-heading p{margin:0}.button{border:2px solid #0000;border-radius:.45rem;justify-content:center;align-items:center;min-height:44px;margin:.2rem .25rem .2rem 0;padding:.62rem 1rem;font-weight:700;text-decoration:none;display:inline-flex}.button.primary{background:var(--primary);color:#fff}.button.primary:hover{background:var(--primary-dark)}.button.secondary{color:var(--ink);background:#fff;border-color:#617189}.button.warning{background:var(--warning-bg);color:#603500;border-color:#c07a12}.button.danger-outline{border-color:var(--danger);color:var(--danger);background:#fff}.button.compact{min-height:36px;padding:.35rem .7rem;font-size:.9rem}.button:disabled{cursor:not-allowed;opacity:.45}.message{background:#eef1f4;border-left:5px solid #687386;margin-top:1rem;padding:.8rem}.message.success{border-color:var(--success);background:#e8f6ef}.message.error{border-color:var(--danger);background:#fff0f0}.hint{color:var(--muted);font-size:.9rem}.muted{color:var(--muted)}.field,fieldset{margin-bottom:1rem}label,legend{margin-bottom:.35rem;font-weight:700;display:block}input,select,textarea{width:100%;min-height:44px;color:var(--ink);background:#fff;border:2px solid #7a879a;border-radius:.35rem;outline:none;padding:.5rem}textarea{resize:vertical;min-height:auto;line-height:1.45}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:4px solid var(--focus);outline-offset:0;border-color:var(--primary)}fieldset{border:1px solid var(--border);border-radius:.5rem;padding:1rem}.radio{align-items:center;gap:.55rem;margin:.4rem 0;font-weight:400;display:flex}.radio input{width:1.25rem;height:1.25rem;min-height:auto}.inline{gap:.5rem;display:flex}.button-row{flex-wrap:wrap;gap:.35rem;display:flex}.summary-list{margin:0}.summary-list>div{border-bottom:1px solid var(--border);justify-content:space-between;gap:1rem;padding:.65rem 0;display:flex}.summary-list dt{font-weight:700}.summary-list dd{margin:0}.steps{padding-left:1.3rem}.steps li{margin:.45rem 0}.empty{text-align:center;color:var(--muted);background:#f7f8fa;border:1px dashed #9ba6b5;border-radius:.5rem;padding:2rem}.badge{border-radius:999px;padding:.25rem .65rem;font-size:.85rem;font-weight:700;display:inline-block}.badge.success{color:#0d5735;background:#dff3e9}.badge.warning{background:var(--warning-bg);color:#603500}.badge.danger{color:var(--danger);background:#fff0f0}.badge.info{background:var(--accent);color:var(--primary)}.control-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;display:grid}.device-control{min-height:130px;color:var(--ink);background:#fff;border:2px solid #718096;border-radius:.7rem;flex-direction:column;justify-content:center;align-items:center;gap:.3rem;padding:1rem;display:flex}.device-control:hover{background:var(--accent);border-color:var(--primary)}.device-control.shock{background:#fff5f5;border-color:#bd5656}.device-control:disabled{cursor:not-allowed;opacity:.45}.control-icon{font-size:1.8rem;font-weight:700}.device-control small{color:var(--muted);font-size:.9rem}.step-banner{background:var(--accent);border:1px solid var(--border);border-radius:.5rem;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;padding:.7rem 1rem;display:flex}.led-list{grid-template-columns:repeat(2,1fr);gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.led-list li{border:1px solid var(--border);background:#fff;border-radius:.4rem;align-items:center;gap:.6rem;padding:.55rem;display:flex}.led-light{background:#fff;border:2px solid #4e5969;border-radius:50%;flex-shrink:0;width:1rem;height:1rem}.led-light.on{background:#1d8c58;border-color:#0c5734}.led-button{border:1px solid var(--border);text-align:left;background:#fff;border-radius:.4rem;width:100%}.led-button:hover{background:var(--accent)}.led-button:disabled{cursor:not-allowed;opacity:.5}.chip-grid{flex-wrap:wrap;gap:.55rem;margin-bottom:1rem;display:flex}.chip-button{background:#fff;border:2px solid #66758a;border-radius:.45rem;min-height:44px;padding:.5rem .8rem}.chip-button[aria-pressed=true]{color:#0d5735;background:#dff3e9;border-color:#146c43;font-weight:700}.chip-button:disabled{cursor:not-allowed;opacity:.45}.toggle-button{background:#fff;border:2px solid #66758a;border-radius:999px;align-items:center;gap:.7rem;min-height:48px;padding:.5rem 1rem;display:flex}.toggle-indicator{background:#687386;border-radius:50%;width:1.2rem;height:1.2rem}.toggle-button[aria-pressed=true] .toggle-indicator{background:#198754}.toggle-button:disabled{cursor:not-allowed;opacity:.5}.log-list{max-height:280px;margin:1rem 0 0;padding-left:1.8rem;overflow:auto}.log-list li{border-bottom:1px solid var(--border);padding:.45rem}.log-time{font-variant-numeric:tabular-nums;color:var(--muted);margin-right:.6rem}.empty-log{color:var(--muted);list-style:none}.log-ok{color:var(--success)}.log-err{color:var(--danger)}.log-warn{color:var(--warning)}.editor{border-top:1px solid var(--border);margin-top:1rem;padding-top:1rem}.step-editor{border:1px solid var(--border);background:#f7f9fb;border-radius:.5rem;margin-bottom:.6rem;padding:.8rem}.step-row{grid-template-columns:auto 1fr;gap:.5rem;display:grid}.move-buttons{flex-direction:column;gap:.25rem;display:flex}.field-row{grid-template-columns:8rem minmax(0,1fr);align-items:start;gap:.6rem;margin-bottom:.55rem;display:grid}.field-row .field-label{padding-top:.5rem;font-size:.9rem;font-weight:700}.audio-entry{border:1px solid var(--border);background:#fff;border-radius:.4rem;align-items:center;gap:.5rem;margin-bottom:.35rem;padding:.35rem .6rem;display:flex}details{border-top:1px solid var(--border);margin-top:1rem;padding-top:.8rem}summary{cursor:pointer;font-weight:700}.details-body{padding-top:.8rem}.link-button{color:#fff;background:0 0;border:0;padding:.5rem;text-decoration:underline}footer{color:#fff;background:#253044;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 2rem;display:flex}.aed-photo{border:1px solid var(--border);-webkit-user-select:none;user-select:none;background:#fff;border-radius:.7rem;width:100%;position:relative;overflow:hidden}.aed-photo img{width:100%;height:auto;display:block}.hotspot{color:#fff;text-shadow:0 1px 2px #000c;background:#ffffff2e;border:2px solid #1720338c;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;min-height:0;padding:0;transition:box-shadow .2s,background .2s;display:flex;position:absolute;transform:translate(-50%,-50%)}.hotspot-wide{border-radius:.6rem;flex-direction:row;gap:.35rem}.hotspot-wide .hotspot-icon{font-size:.9rem}.hotspot:hover{background:#fff6}.hotspot-icon{font-size:1.2rem;font-weight:700;line-height:1.1}.hotspot-label{font-size:.58rem;font-weight:700;line-height:1.2}.hotspot.pressed{color:var(--ink);text-shadow:none;background:#fffc}.hotspot.led-on{border-color:var(--glow);background:color-mix(in srgb, var(--glow) 55%, #fff3);box-shadow:0 0 14px 2px var(--glow)}.hotspot.expected{animation:1.2s ease-in-out infinite hotspot-pulse}@keyframes hotspot-pulse{0%,to{box-shadow:0 0 #ffbf47e6}50%{box-shadow:0 0 0 10px #ffbf4700}}.hotspot-arrow{color:#fff;text-shadow:0 0 6px #000,0 0 2px #000;pointer-events:none;font-size:1.6rem;font-weight:700;position:absolute;transform:translate(-50%,-50%)}.led-marker{aspect-ratio:1;pointer-events:none;background:#ffffff24;border:1px solid #fff9;border-radius:50%;transition:background .2s,box-shadow .2s;position:absolute;transform:translate(-50%,-50%)}.led-marker.on{background:var(--glow,#ffffffe6);border-color:var(--glow,#0c5734);box-shadow:0 0 16px 3px var(--glow,#fffffff2)}.led-marker.blink.on{animation:1.1s infinite led-blink}@keyframes led-blink{0%,54%{opacity:1}55%,to{opacity:.15}}.dialog-overlay{z-index:50;background:#0000008c;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.dialog-box{width:100%;max-width:34rem;box-shadow:0 15px 60px #00000059}.hidden{display:none!important}.sr-only{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}.timer{font-variant-numeric:tabular-nums;font-size:1.4rem;font-weight:700}.timer.urgent{color:var(--danger)}:focus-visible{outline:4px solid var(--focus);outline-offset:3px}@media (width>=1100px){:root{font-size:112.5%}.screen{max-width:1200px}.oefenen-grid{grid-template-columns:1.25fr 1fr}}@media (width>=1500px){.screen{max-width:1320px}}@media (width<=800px){.site-header{align-items:flex-start;position:static}.app-shell{display:block}.main-nav{z-index:8;border-right:0;border-bottom:1px solid var(--border);padding:.55rem;display:flex;position:sticky;top:0;overflow-x:auto}.nav-button{min-width:max-content;margin:0 .2rem}.grid.two,.status-layout{grid-template-columns:1fr}.control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.log-card{grid-column:auto}}@media (width<=480px){.brand span:last-child{display:none}.status-chip{font-size:.78rem}.nav-button span{display:none}main{padding:1rem}.control-grid{grid-template-columns:1fr}.inline,.card-heading,footer{flex-direction:column;align-items:stretch}.led-list,.field-row{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.led-marker.blink.on{animation:1.1s infinite led-blink!important}}@media (forced-colors:active){.status-dot,.led-light,.toggle-indicator{forced-color-adjust:none;border:2px solid canvastext}.led-light.on,.toggle-button[aria-pressed=true] .toggle-indicator{background:highlight}}