:root{--dark-green: #012f33;--dark-green-hover: #02474d;--aqua-green: #66cccc;--grey-green: #ddebec;--orange: #e78f5c;--yellow: #fefe7d;--yellow-light: #ffffb5;--yellow-border: #e6e64d;--sand: #fff7ee}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:transparent}.app{position:relative;display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden}.split{display:flex;flex:1 1 auto;min-height:0}.pane{display:flex;flex-direction:column;flex:1 1 50%;min-width:0}.pane.hidden{display:none}.pane header{display:flex;align-items:center;justify-content:center;padding:.5rem .75rem .25rem;background:var(--dark-green);color:#fff;font-size:.85rem;white-space:nowrap;overflow:hidden;font-weight:500;font-size:1.15rem}.pane.active header{background:var(--dark-green)}.pane.locked header{background:#4f6b6e}.pane.color-coded{--frame-color: var(--aqua-green)}.pane.color-coded.patient{--frame-color: var(--orange)}.pane.color-coded header,.pane.color-coded.active header,.pane.color-coded.locked header{background:var(--frame-color);color:var(--dark-green)}.pane.color-coded .frame-wrap{border:6px solid var(--frame-color)}.pane header .label{font-weight:500;font-size:1.15rem}.frame-wrap{position:relative;flex:1 1 auto;min-height:0}.pane iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:#012f3366;-webkit-backdrop-filter:grayscale(.6) blur(1px);backdrop-filter:grayscale(.6) blur(1px);display:flex;align-items:flex-start;justify-content:center;padding-top:1.25rem;cursor:not-allowed}.overlay-badge{display:inline-flex;align-items:center;gap:.5rem;background:#000000bf;color:#fff;padding:.5rem .9rem;border-radius:999px;font-size:.85rem;font-weight:500}.overlay-badge .lock{font-size:1rem}.pos-provider{left:0;width:50%}.pos-patient{left:50%;width:50%}.pos-both{left:0;width:100%}.pos-none{left:0;right:0;width:auto;max-width:620px;margin-left:auto;margin-right:auto}.guide{position:static;width:100%;z-index:4;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:.5rem 1.1rem;background:linear-gradient(180deg,var(--yellow-light) 0%,var(--yellow) 100%);border:2px solid var(--yellow-border);transform-origin:bottom center;transition:left .35s ease,width .35s ease}.guide.overlay-mode{position:absolute;bottom:0}.guide:not(.overlay-mode).pos-provider,.guide:not(.overlay-mode).pos-patient{position:relative;width:50%;left:auto}.guide:not(.overlay-mode).pos-provider{align-self:flex-start}.guide:not(.overlay-mode).pos-patient{align-self:flex-end}.guide:not(.overlay-mode).pos-provider:after,.guide:not(.overlay-mode).pos-patient:before{content:"";position:absolute;top:-2px;bottom:-2px;width:100%;background:#000;z-index:1;animation:unbounce 1s ease-in-out 1}.guide:not(.overlay-mode).pos-provider:after{left:100%}.guide:not(.overlay-mode).pos-patient:before{right:100%}.guide{animation:bounceUp 1s ease-in-out 1}.guide.no-bounce{animation:none}@keyframes bounceUp{0%{transform:translateY(0)}30%{transform:translateY(-16px)}55%{transform:translateY(0)}75%{transform:translateY(-6px)}to{transform:translateY(0)}}@keyframes unbounce{0%{transform:translateY(0)}30%{transform:translateY(16px)}55%{transform:translateY(0)}75%{transform:translateY(6px)}to{transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.guide,.guide:before,.guide:after{animation:none}}.guide-text{display:flex;align-items:flex-start;gap:.75rem;min-width:0;flex:1}.instruction-body{min-width:0}.guide-text strong{display:block;font-size:1rem;color:var(--dark-green)}.guide-text p{margin:.15rem 0 0;font-size:.9rem;color:#1a3d40}.guide-foot{display:flex;align-items:center;justify-content:flex-end;gap:1rem;flex-shrink:0}.guide-actions{display:flex;align-items:center;gap:.5rem}.guide-actions button{padding:.55rem 1.1rem;border:none;border-radius:8px;background:var(--dark-green);color:#fff;font-size:.9rem;cursor:pointer}.guide-actions button:hover{background:var(--dark-green-hover)}.guide-actions .secondary{background:#012f331f;color:var(--dark-green)}.guide-actions .secondary:hover:not(:disabled){background:#012f3333}.guide-actions button:disabled{opacity:.5;cursor:default}.feedback-inline{margin-right:auto;gap:.33rem!important}.feedback-inline>button{padding:.5rem!important}.feedback-inline>button>svg{width:20px!important;height:20px!important}.landing{display:flex;align-items:center;justify-content:center;height:100vh;background:var(--sand);padding:1rem}.card{max-width:460px;width:100%;background:#fff;border:1px solid var(--grey-green);border-radius:12px;padding:2rem;box-shadow:0 4px 24px #0000000f}.card h1{margin-top:0;color:var(--dark-green)}.card form{display:flex;gap:.5rem;margin:1.25rem 0 .75rem}.card input{flex:1;padding:.6rem .75rem;border:1px solid var(--grey-green);border-radius:8px;font-size:1rem}.card button{padding:.6rem 1rem;border:none;border-radius:8px;background:var(--dark-green);color:#fff;font-size:1rem;cursor:pointer;white-space:nowrap}.card button:hover{background:var(--dark-green-hover)}.hint{font-size:.8rem;color:#57606a}.hint code{background:var(--sand);padding:.1rem .3rem;border-radius:4px;margin-left:.25rem}
