@import "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap";*{box-sizing:border-box;margin:0;padding:0}:root{--red:#ee202e;--red-dark:#702220;--red-light:#ffeaea;--charcoal:#363435;--white:#fff;--border:#e8e8e8;--muted:#666;--green:#2eaa4a;--gold:#f0a500;--blue:#4a9eff}html,body,#root{height:100%;overflow:hidden}body{color:var(--white);-webkit-font-smoothing:antialiased;touch-action:manipulation;background:#222;font-family:Barlow,Arial,sans-serif}.app-shell{flex-direction:column;height:100vh;display:flex}.app-header{background:var(--charcoal);border-bottom:3px solid var(--red);z-index:10;flex-shrink:0;align-items:center;gap:12px;min-height:52px;padding:0 16px;display:flex}.header-text{flex-direction:column;flex:1;justify-content:center;padding:8px 0;display:flex}.header-title{text-transform:uppercase;letter-spacing:1px;font-family:Barlow Condensed,sans-serif;font-size:1.1rem;font-weight:800;line-height:1}.header-title span{color:var(--red)}.header-flow{text-transform:uppercase;letter-spacing:1.5px;color:#ffffff73;margin-top:2px;font-family:Barlow Condensed,sans-serif;font-size:.75rem;font-weight:600}.back-btn{letter-spacing:1px;text-transform:uppercase;color:#fff9;cursor:pointer;background:0 0;border:1px solid #fff3;border-radius:6px;padding:5px 14px;font-family:Barlow Condensed,sans-serif;font-size:.85rem;font-weight:700;transition:all .15s}.back-btn:hover{color:#fff;border-color:#ffffff80}.screen{flex-direction:column;flex:1;display:flex;overflow:hidden}.screen-select{background:#222;padding:24px 16px;overflow-y:auto}.select-eyebrow{letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:6px;font-family:Barlow Condensed,sans-serif;font-size:.8rem;font-weight:700}.select-title{text-transform:uppercase;margin-bottom:24px;font-family:Barlow Condensed,sans-serif;font-size:2rem;font-weight:800;line-height:1}.flow-grid{grid-template-columns:1fr 1fr;gap:10px;max-width:600px;display:grid}@media (width<=480px){.flow-grid{grid-template-columns:1fr}}.flow-card{cursor:pointer;background:#2a2a2a;border:1.5px solid #3a3a3a;border-radius:12px;padding:16px;transition:all .15s;position:relative;overflow:hidden}.flow-card:before{content:"";background:#3a3a3a;width:4px;transition:background .15s;position:absolute;top:0;bottom:0;left:0}.flow-card:hover{border-color:#ee202e66}.flow-card:hover:before{background:var(--red)}.flow-card.emergency{border-color:#ee202e40}.flow-card.emergency:before{background:#ee202e80}.flow-number{letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-bottom:4px;font-family:Barlow Condensed,sans-serif;font-size:.75rem;font-weight:700}.flow-name{text-transform:uppercase;font-family:Barlow Condensed,sans-serif;font-size:1.1rem;font-weight:800;line-height:1.1}.flow-steps{color:var(--muted);margin-top:6px;font-size:.75rem}.emergency-tag{letter-spacing:1px;text-transform:uppercase;color:var(--red);background:var(--red-light);border-radius:4px;margin-top:6px;padding:2px 6px;font-family:Barlow Condensed,sans-serif;font-size:.65rem;font-weight:700;display:inline-block}.screen-mode{background:#222;justify-content:center;align-items:flex-start;gap:16px;padding:24px 16px}.mode-flow-name{text-transform:uppercase;margin-bottom:8px;font-family:Barlow Condensed,sans-serif;font-size:2rem;font-weight:800}.mode-step-count{color:var(--muted);margin-bottom:32px;font-size:.9rem}.mode-cards{flex-direction:column;gap:12px;width:100%;max-width:400px;display:flex}.mode-card{cursor:pointer;background:#2a2a2a;border:1.5px solid #3a3a3a;border-radius:14px;align-items:center;gap:16px;padding:20px;transition:all .15s;display:flex}.mode-card:hover{background:#2f2f2f;border-color:#ee202e80}.mode-icon{background:#3a3a3a;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.4rem;display:flex}.mode-title{text-transform:uppercase;font-family:Barlow Condensed,sans-serif;font-size:1.1rem;font-weight:800}.mode-desc{color:var(--muted);margin-top:2px;font-size:.8rem}.screen-overview{background:#222;justify-content:center;align-items:center;padding:20px 16px}.ov-card-wrap{width:100%;max-width:420px}.ov-card{background:#232323;border:1.5px solid #3a3a3a;border-radius:14px;flex-direction:column;max-height:75vh;display:flex;overflow:hidden}.ov-card-header{background:var(--charcoal);border-bottom:2px solid var(--red);flex-shrink:0;padding:10px 14px}.ov-card-eyebrow{letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:2px;font-family:Barlow Condensed,sans-serif;font-size:.7rem;font-weight:700}.ov-card-title{text-transform:uppercase;font-family:Barlow Condensed,sans-serif;font-size:1.3rem;font-weight:800}.ov-card-body{flex:1;padding:8px 10px;overflow-y:auto}.ov-list{flex-direction:column;gap:3px;display:flex}.ov-step{border-radius:6px;align-items:center;gap:7px;padding:5px 8px;display:flex}.ov-step:nth-child(odd){background:#ffffff08}.ov-num{color:var(--red);text-align:right;flex-shrink:0;min-width:18px;font-family:Barlow Condensed,sans-serif;font-size:.7rem;font-weight:800}.ov-item{text-transform:uppercase;color:var(--blue);flex-shrink:0;font-family:Barlow Condensed,sans-serif;font-size:.85rem;font-weight:700}.ov-sep{color:#444;flex-shrink:0;font-size:.75rem}.ov-action{text-transform:uppercase;color:#aaa;white-space:nowrap;text-overflow:ellipsis;font-family:Barlow Condensed,sans-serif;font-size:.8rem;font-weight:600;overflow:hidden}.ov-card-footer{border-top:1px solid #3a3a3a;flex-shrink:0;padding:10px 14px}.ov-begin-btn{letter-spacing:1px;text-transform:uppercase;background:var(--red);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;padding:11px;font-family:Barlow Condensed,sans-serif;font-size:1rem;font-weight:800;transition:background .15s}.ov-begin-btn:hover{background:var(--red-dark)}.screen-learn,.screen-test{background:#1c1c1c}.panel-wrap{flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.panel-viewer{width:100%;height:100%;position:relative;overflow:hidden}.panel-viewer svg{cursor:grab}.panel-viewer svg:active{cursor:grabbing}.panel-highlight-rect{pointer-events:none;animation:1s ease-in-out infinite hlPulse}.panel-highlight-rect--red{stroke:var(--red);filter:drop-shadow(0 0 30px var(--red))}.panel-highlight-rect--green{stroke:var(--green);filter:drop-shadow(0 0 24px var(--green))}@keyframes hlPulse{0%,to{opacity:1}50%{opacity:.55}}.floating-label{border:2.5px solid var(--blue);pointer-events:none;z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0a0a0af5;border-radius:12px;max-width:240px;padding:12px 18px;position:absolute;box-shadow:0 0 24px #4a9eff66,0 4px 20px #0009}.floating-label-item{text-transform:uppercase;color:var(--blue);font-family:Barlow Condensed,sans-serif;font-size:1.4rem;font-weight:800;line-height:1.1}.floating-label-action{color:#fff;text-transform:uppercase;letter-spacing:.5px;margin-top:4px;font-family:Barlow Condensed,sans-serif;font-size:1rem;font-weight:700}.floating-label-note{color:var(--gold);margin-top:4px;font-size:.75rem;font-style:italic}@media (width<=600px){.floating-label{border-width:1.5px;border-radius:8px;max-width:150px;padding:7px 10px}.floating-label-item{font-size:.85rem}.floating-label-action{margin-top:2px;font-size:.7rem}.floating-label-note{margin-top:2px;font-size:.6rem}}.step-bar{background:var(--charcoal);border-top:2px solid #2a2a2a;flex-shrink:0;padding:10px 12px}.step-progress{gap:3px;margin-bottom:10px;display:flex}.step-dot{background:#3a3a3a;border-radius:2px;flex:1;height:3px;transition:background .2s}.step-dot.done{background:var(--green)}.step-dot.active{background:var(--red)}.step-info{align-items:baseline;gap:8px;min-height:28px;margin-bottom:10px;display:flex}.step-info-item{text-transform:uppercase;color:var(--blue);font-family:Barlow Condensed,sans-serif;font-size:1.1rem;font-weight:800;line-height:1}.step-info-sep{color:#444;font-family:Barlow Condensed,sans-serif;font-size:1rem;font-weight:700}.step-info-action{text-transform:uppercase;color:#fff;flex:1;font-family:Barlow Condensed,sans-serif;font-size:1rem;font-weight:700;line-height:1}.step-info-num{letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-shrink:0;font-family:Barlow Condensed,sans-serif;font-size:.7rem;font-weight:700}.step-controls{align-items:center;gap:8px;display:flex}.step-spacer{flex:1}.step-nav{gap:6px;display:flex}.nav-btn{letter-spacing:1px;text-transform:uppercase;cursor:pointer;border:none;border-radius:8px;padding:9px 16px;font-family:Barlow Condensed,sans-serif;font-size:.85rem;font-weight:700;transition:all .15s}.nav-btn.prev{color:var(--muted);background:#2a2a2a}.nav-btn.prev:hover{color:#fff;background:#3a3a3a}.nav-btn.next{background:var(--red);color:#fff}.nav-btn.next:hover{background:var(--red-dark)}.nav-btn:disabled{opacity:.4;cursor:not-allowed}.test-feedback{text-transform:uppercase;text-align:center;flex-shrink:0;min-height:26px;padding:6px 16px 0;font-family:Barlow Condensed,sans-serif;font-size:.9rem;font-weight:700}.test-feedback.correct{color:var(--green)}.test-feedback.wrong{color:var(--red)}.test-step-bar{background:var(--charcoal);border-top:2px solid #2a2a2a;flex-shrink:0;padding:10px 12px}.test-hint-row{align-items:center;gap:10px;min-height:36px;margin-bottom:8px;display:flex}.test-step-counter{letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap;flex-shrink:0;font-family:Barlow Condensed,sans-serif;font-size:.7rem;font-weight:700}.test-hint-area{flex:1;justify-content:center;align-items:center;display:flex}.hint-btn{letter-spacing:1px;text-transform:uppercase;color:var(--gold);border:1.5px solid var(--gold);cursor:pointer;background:#f0a50026;border-radius:8px;padding:6px 16px;font-family:Barlow Condensed,sans-serif;font-size:.85rem;font-weight:700;transition:all .15s}.hint-btn:hover{background:#f0a5004d}.hint-revealed{text-align:center}.hint-item{text-transform:uppercase;color:var(--blue);font-family:Barlow Condensed,sans-serif;font-size:1rem;font-weight:700}.hint-sep{color:#444;font-size:.9rem}.hint-action{text-transform:uppercase;color:#fff;font-family:Barlow Condensed,sans-serif;font-size:.9rem;font-weight:600}.test-step-progress{gap:3px;display:flex}.test-step-dot{background:#3a3a3a;border-radius:2px;flex:1;height:3px;transition:background .2s}.test-step-dot.done{background:var(--green)}.test-step-dot.active{background:var(--gold)}.screen-results{text-align:center;background:#222;justify-content:center;align-items:center;gap:16px;padding:32px 24px}.result-icon{font-size:3rem}.result-title{text-transform:uppercase;font-family:Barlow Condensed,sans-serif;font-size:2.2rem;font-weight:800}.result-score{text-transform:uppercase;color:var(--muted);font-family:Barlow Condensed,sans-serif;font-size:1rem;font-weight:700}.result-score span{color:var(--green)}.result-btns{flex-direction:column;gap:10px;width:100%;max-width:280px;margin-top:8px;display:flex}.result-btn{letter-spacing:1px;text-transform:uppercase;cursor:pointer;border:none;border-radius:10px;padding:14px;font-family:Barlow Condensed,sans-serif;font-size:1rem;font-weight:700;transition:all .15s}.result-btn.primary{background:var(--red);color:#fff}.result-btn.primary:hover{background:var(--red-dark)}.result-btn.secondary{color:#fff;background:#2a2a2a}.result-btn.secondary:hover{background:#3a3a3a}.lc-overlay{z-index:100;background:#000000bf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.lc-card{text-align:center;background:#232323;border:1.5px solid #3a3a3a;border-radius:16px;width:calc(100% - 48px);max-width:320px;padding:28px 24px}.lc-icon{margin-bottom:10px;font-size:2.5rem}.lc-title{text-transform:uppercase;margin-bottom:4px;font-family:Barlow Condensed,sans-serif;font-size:1.8rem;font-weight:800}.lc-sub{text-transform:uppercase;color:var(--muted);margin-bottom:20px;font-family:Barlow Condensed,sans-serif;font-size:.9rem;font-weight:600}.lc-btns{flex-direction:column;gap:8px;display:flex}.lc-btn{letter-spacing:1px;text-transform:uppercase;cursor:pointer;border:none;border-radius:8px;padding:12px;font-family:Barlow Condensed,sans-serif;font-size:1rem;font-weight:800;transition:all .15s}.lc-btn.primary{background:var(--red);color:#fff}.lc-btn.primary:hover{background:var(--red-dark)}.lc-btn.secondary{color:#ccc;background:#2a2a2a}.lc-btn.secondary:hover{color:#fff;background:#3a3a3a}