:root{--bg:#eae6df;--surface:#f3efe9;--ink:#1a1715;--dim:#756d64;--line:#d5cfc6;--accent:#a4652b;--hover:#e2dcd3;color-scheme:light;font:15px/1.45 'Albert Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg)}
:root.dark{--bg:#141210;--surface:#1e1a17;--ink:#ece6df;--dim:#aaa096;--line:#39312a;--accent:#d9955a;--hover:#28221c;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
button,a,summary{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
button{border:1px solid var(--line);background:transparent;border-radius:999px;min-height:40px;padding:8px 15px}
button:hover:not(:disabled){background:var(--hover)}
.demo-header{height:72px;padding:0 26px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;border-bottom:1px solid var(--line)}
.demo-brand{display:flex;align-items:baseline;gap:13px;width:max-content;text-decoration:none}
.demo-brand>span:first-child{font:italic 29px/1 'Newsreader',Georgia,serif}
.demo-label{font-size:12px;color:var(--dim)}
.tool-picker,.mode-picker{display:flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:999px;gap:3px;width:max-content}
.tool-picker button{border:0;min-width:87px;padding:8px 20px;font-weight:500;letter-spacing:.025em}
.tool-picker button[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.appearance-switch{justify-self:end;display:flex;align-items:center;gap:9px;font-size:13px;padding:7px 13px;color:var(--dim)}
.appearance-icon{font-size:19px;line-height:1;color:var(--ink)}
.workspace{height:calc(100dvh - 72px);min-height:560px;padding:20px;display:grid;grid-template-columns:minmax(0,1fr) 386px;gap:20px;align-items:stretch}
.workspace[data-tool=iride]{grid-template-columns:minmax(0,1.05fr) minmax(440px,1fr)}
.surface{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.hospital-panel,.iride-panel{display:flex;flex-direction:column;min-width:0;min-height:0}
.panel-heading{height:48px;min-height:48px;padding:0 19px;display:flex;justify-content:space-between;align-items:center;gap:15px;border-bottom:1px solid var(--line)}
h1,h2{margin:0;font-size:13px;font-weight:500;letter-spacing:.015em}
.connection{margin:0;font-size:12px;color:var(--dim);text-align:right}
iframe{display:block;border:0;background:var(--surface);width:100%;min-width:0;min-height:0}
.hospital-panel>iframe,.iride-panel>iframe{flex:1;height:100%}
.startup{padding:35px 24px;color:var(--dim);font-size:15px}
.startup p{margin:0 0 18px}
.viva-panel{display:flex;flex-direction:column;min-width:0;min-height:0}
.tool-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:0 0 13px}
.tool-heading h2{padding-left:4px}
.mode-picker{padding:2px;gap:1px;background:var(--bg)}
.mode-picker button{font-size:12px;min-height:34px;padding:7px 11px;border:0;white-space:nowrap}
.mode-picker button[aria-pressed=true]{background:var(--surface);box-shadow:0 1px 5px #1a17151a;color:var(--ink)}
.embedded-phone{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;padding:0 14px 4px}
.phone-frame{height:100%;max-height:780px;min-height:460px;width:354px;max-width:100%;position:relative;overflow:hidden;border:7px solid #26221f;border-radius:39px;background:#26221f;box-shadow:0 7px 20px #1a171514}
.phone-frame iframe{height:100%;border-radius:30px;background:#f4f0ea}
.phone-camera{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:72px;height:16px;border-radius:999px;background:#26221f;pointer-events:none}
.phone-home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:90px;height:4px;border-radius:4px;background:#7d766e80;pointer-events:none}
.phone-pairing{padding:30px 24px;align-self:stretch;text-align:center;overflow:auto;flex:1}
.phone-pairing h3{font:400 27px/1.2 'Newsreader',Georgia,serif;margin:3px 0 12px}
.pairing-intro,.pairing-hint,.pair-expiry,.pair-local{color:var(--dim);font-size:13px;line-height:1.5}
.pairing-intro{margin:0 0 25px}
.pair-status{font-size:14px;margin:0 0 18px;overflow-wrap:anywhere}
.pair-qr{display:block;width:230px;max-width:100%;aspect-ratio:1;margin:0 auto;background:#fff;border:10px solid #fff;border-radius:10px}
.pair-expiry{margin:17px auto 22px;max-width:240px}
.pair-local{padding:12px;border:1px solid var(--line);border-radius:6px;text-align:left}
.pair-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.pair-links button,.action-button{font-size:13px;min-height:40px}
.action-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:var(--surface);padding:8px 15px;text-decoration:none}
.action-button:hover{opacity:.85}
.text-button{padding:6px 9px;border:0;border-radius:5px;font-size:13px;text-decoration:underline;text-underline-offset:3px;color:var(--dim)}
.pairing-hint{border-top:1px solid var(--line);padding-top:20px;margin:26px 0 0}
#session-change{width:410px;max-width:calc(100vw - 32px);padding:28px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 60px #0003}
#session-change::backdrop{background:#14121080}
#session-change h2{font:400 28px/1.2 'Newsreader',Georgia,serif;letter-spacing:0;margin:0 0 15px}
#session-change p{font-size:15px;line-height:1.55;color:var(--dim);margin:0 0 24px}
#session-reload{background:var(--ink);color:var(--surface);border-color:var(--ink)}
#session-reload:hover{opacity:.85}
.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;clip:rect(0,0,0,0);white-space:nowrap}
[hidden]{display:none!important}
@media(min-width:1600px){.workspace{padding:26px;gap:26px;grid-template-columns:minmax(0,1fr) 426px}.demo-header{padding:0 32px}.phone-frame{width:374px}.embedded-phone{padding-bottom:8px}}
@media(max-width:1200px) and (min-width:800px){.workspace{padding:16px;gap:16px;grid-template-columns:minmax(0,1fr) 332px}.workspace[data-tool=iride]{grid-template-columns:minmax(0,1.05fr) minmax(340px,1fr)}.embedded-phone{padding:0 2px 4px}.phone-frame{width:328px;border-width:6px;border-radius:35px}.phone-frame iframe{border-radius:28px}.tool-heading{gap:5px}.mode-picker button{font-size:11px;padding:7px 9px}.phone-pairing{padding:26px 18px}}
@media(max-width:799px){.workspace,.workspace[data-tool=iride]{height:auto;min-height:0;grid-template-columns:minmax(0,1fr);padding:16px;gap:24px}.hospital-panel{height:560px}.viva-panel{min-height:0}.tool-heading{width:386px;max-width:100%;margin:0 auto;padding-bottom:16px}.embedded-phone{flex:none;padding:0}.phone-frame{height:680px;max-height:none;min-height:0}.phone-pairing{width:386px;max-width:100%;margin:0 auto;padding:28px 24px;flex:none}.iride-panel{height:720px}}
@media(max-width:600px){.demo-header{height:116px;padding:14px 16px;grid-template-columns:1fr auto;gap:10px}.demo-brand{gap:10px}.demo-brand>span:first-child{font-size:27px}.appearance-switch{grid-column:2;grid-row:1;font-size:12px;gap:7px;padding:6px 11px}.tool-picker{grid-row:2;grid-column:1/-1;justify-self:center}.tool-picker button{min-height:34px;min-width:96px;padding:6px 18px;font-size:14px}.workspace,.workspace[data-tool=iride]{padding:12px;gap:23px}.hospital-panel{height:520px}.panel-heading{height:44px;min-height:44px;padding:0 14px}.connection{font-size:11px}.tool-heading{padding-bottom:14px}.mode-picker button{font-size:12px;padding:7px 10px}.phone-frame{width:354px;height:640px;max-width:100%;border-width:6px;border-radius:35px}.phone-frame iframe{border-radius:28px}.iride-panel{height:680px}.phone-pairing{padding:24px 20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}