:root{
  --plum:#33264F; --plum-2:#47386A; --lav:#B7A5E0; --lav-deep:#6A54A6; --mist:#EEE9F8; --enamel:#F7F6FA; --gold:#C4A46A;
  --ink:#1F1A26; --muted:#5F5870; --line:#DED7EB; --wa:#1B7F4B;
  --shadow:0 14px 40px rgba(51,38,79,.20);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Figtree,system-ui,sans-serif;color:var(--ink);overflow:hidden;background:linear-gradient(#f6f2fc,#e9e2f5)}
#stage,#labels{position:fixed;inset:0}
#stage canvas{display:block}
body.looking #stage canvas{cursor:grab}
#labels{pointer-events:none}

.top{position:fixed;top:12px;left:12px;right:12px;min-height:72px;display:flex;align-items:center;gap:16px;padding:0 12px 0 14px;z-index:5;
  background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:18px;box-shadow:0 6px 22px rgba(51,38,79,.12)}
.top .home{display:flex}
.top img{width:48px;height:48px;border-radius:13px}
/* the clinic's name: alone in the bar, large, whole, never cut short */
.brand{font:400 34px/1.1 Marcellus,Georgia,serif;color:var(--plum);letter-spacing:.005em}
.tour-note{position:fixed;top:92px;left:28px;margin:0;z-index:4;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--lav-deep)}
body.plain .tour-note,body:not(.ready) .tour-note{display:none}
.call{margin-left:auto;background:var(--plum);color:#fff;text-decoration:none;font-weight:600;font-size:16px;padding:14px 20px;border-radius:14px;white-space:nowrap}

/* the receptionist's card */
.card{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);width:min(520px,calc(100vw - 24px));max-height:62vh;overflow:auto;z-index:6;
  background:rgba(255,255,255,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:22px;box-shadow:var(--shadow);padding:18px 20px 16px}
.card small{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lav-deep)}
.card h2{font:400 26px/1.15 Marcellus,Georgia,serif;margin:6px 0 4px;color:var(--plum)}
.card p{margin:0 0 4px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.card .note{color:var(--plum);font-weight:600;margin-top:8px}
.card .rate{margin-top:10px;color:var(--ink)}
.card .rate b{font:400 21px Marcellus,Georgia,serif;color:var(--gold);margin-right:4px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 4px}
.opt{border:1px solid var(--line);background:var(--enamel);border-radius:14px;padding:15px 14px;text-align:left;font:600 15px Figtree,sans-serif;color:var(--plum);cursor:pointer;
  transition:transform .15s,background .15s,border-color .15s}
.opt:hover,.opt:focus-visible{background:var(--mist);border-color:var(--lav);transform:translateY(-2px);outline:0}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.b{border:1px solid var(--line);background:#fff;color:var(--plum);text-decoration:none;font:600 14px Figtree,sans-serif;padding:11px 15px;border-radius:12px;cursor:pointer;display:inline-block}
.b.solid{background:var(--plum);border-color:var(--plum);color:#fff}
.b.wa{background:var(--wa);border-color:var(--wa);color:#fff}
.b.ghost{border-color:transparent;background:none;color:var(--lav-deep);padding-left:4px}
.b:focus-visible{outline:3px solid var(--lav);outline-offset:2px}
.list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.list li{display:grid;gap:1px;padding:9px 12px;background:var(--enamel);border-radius:12px}
.list b{font-size:14.5px;color:var(--plum)}
.list span{font-size:13px;color:var(--muted);line-height:1.35}
.doc{display:flex;gap:14px;align-items:center;margin-top:8px}
.doc img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--mist)}
.doc h2{margin:0 0 3px}

/* labels in the scene */
.tag{font:700 10.5px Figtree,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--plum-2);background:rgba(255,255,255,.82);padding:3px 8px;border-radius:7px;white-space:nowrap}
.sign{font:400 26px/1.1 Marcellus,Georgia,serif;color:#fff;background:var(--plum);padding:10px 22px;border-radius:12px;white-space:nowrap;box-shadow:0 8px 20px rgba(51,38,79,.3)}
.who{font:800 11px Figtree,sans-serif;letter-spacing:.08em;color:#fff;background:var(--plum);padding:4px 10px;border-radius:99px;white-space:nowrap;box-shadow:0 4px 12px rgba(51,38,79,.3)}
.who.quiet{display:none}
body.inside:not(.looking) .sign{display:none}          /* once inside, the name over the door would hide the visitor */
body.far .tag{display:none}

/* on a wide screen the card sits to the right, so it never covers the visitor */
@media (min-width:900px){.card{left:auto;right:24px;bottom:24px;transform:none;width:440px;max-height:calc(100vh - 120px)}}
@media (max-width:560px){
  .top{min-height:60px;gap:10px;padding:0 10px}.top img{width:40px;height:40px;border-radius:11px}.call span{display:none}.brand{font-size:22px}.call{font-size:15px;padding:12px 16px}.sign{font-size:20px;padding:8px 16px}.tour-note{top:78px;left:24px;font-size:11px}
  .card{padding:16px 16px 14px;max-height:56vh}.card h2{font-size:22px}.opt{padding:13px 12px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){.opt{transition:none}}

/* before the clinic has been drawn */
.loading{position:fixed;inset:0;margin:0;display:none;place-items:center;padding:24px;text-align:center;font:400 22px/1.3 Marcellus,Georgia,serif;color:var(--plum);z-index:4}
body.opening .loading,.loading.shown{display:grid}
body.ready .loading{display:none}
body:not(.ready) .card{display:none}

/* the plain list, for a phone or browser that cannot draw the clinic */
body.plain{overflow:auto}
body.plain #stage,body.plain #labels{display:none}
body.plain .card{position:static;transform:none;width:min(560px,calc(100vw - 24px));max-height:none;margin:104px auto 24px}