@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
*{box-sizing:border-box}body{margin:0;background:#f5f3ef;color:#292b35;font-family:'DM Sans',sans-serif}button,input,a{font:inherit}button,a{cursor:pointer}header{height:90px;border-bottom:1px solid #deddd8;display:flex;align-items:center;padding:0 40px;gap:28px;background:#faf9f6}.brand{text-decoration:none;color:inherit;font-size:24px;font-weight:700;display:flex;align-items:center;gap:10px}.brand b{color:#8667e4;font-size:40px}.brand span{font-size:10px;letter-spacing:2px;border-left:1px solid #ccc;padding-left:20px;margin-left:10px}.live{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px}.live i,.team-note i{width:7px;height:7px;background:#49a88b;border-radius:50%}.phase{font-size:10px;letter-spacing:1px;background:#e9e5f2;padding:9px;border-radius:6px;color:#776691}main{display:grid;grid-template-columns:minmax(0,1fr) 310px;min-height:calc(100vh - 90px)}.office{position:relative;min-height:700px;overflow:hidden}.intro{position:absolute;top:35px;left:40px;z-index:2;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:2px;color:#8a7b9d;font-weight:700}h1{font-family:Manrope,sans-serif;font-size:34px;letter-spacing:-1.5px;margin:10px 0}p{color:#83828a;font-size:13px;line-height:1.6;margin:8px 0}#scene{position:absolute;inset:70px 0 0}#scene canvas{display:block;width:100%;height:100%;touch-action:none}aside{padding:35px 25px;background:#fcfbf8;border-left:1px solid #deddd8}h2{font:700 23px Manrope,sans-serif;letter-spacing:-.7px;margin:12px 0}#qr-wrap{margin:22px auto 15px;padding:9px;background:white;border:1px solid #e8e4ec;border-radius:18px;width:190px;height:190px;display:grid;place-items:center}#qr{width:170px!important;height:170px!important}.primary{display:block;width:100%;border:0;border-radius:9px;padding:14px;background:#8260d9;color:white;text-align:center;text-decoration:none;font-weight:600;font-size:13px}.small{font-size:11px;color:#8e8b94}#network-note{text-align:center}details{font-size:11px;color:#81778f;margin:15px 0}input{width:100%;padding:12px;border:1px solid #d6cfe0;border-radius:8px;margin:8px 0 14px;background:white}button{border:1px solid #ded8e7;background:white;border-radius:8px;padding:9px 13px;color:#6d607b}.divider{height:1px;background:#e6e2e9;margin:26px 0}.list-heading{font-size:10px;letter-spacing:1px;font-weight:700;display:flex;justify-content:space-between}.list-heading span{font-size:10px;letter-spacing:0;color:#999}#people{max-height:180px;overflow:auto;padding-top:13px}.person{display:flex;align-items:center;gap:10px;font-size:12px;padding:8px 0}.person b{border-radius:50%;width:28px;height:28px;display:grid;place-items:center;background:#eee5fb;color:#8460bd}.person span{margin-left:auto;color:#55a38a;font-size:10px}.team-note{margin-top:25px;border-radius:12px;background:#f1eee7;padding:14px;display:flex;gap:9px;align-items:center}.team-note strong{font-size:11px}.team-note p{font-size:10px;margin:4px 0 0}.view-tools{position:absolute;bottom:65px;left:35px;display:flex;align-items:center;gap:15px;font-size:10px;color:#999}.legend{position:absolute;bottom:25px;left:40px;display:flex;gap:20px;font-size:10px;color:#817c8b}.legend i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px}.purple{background:#8b6bdd}.orange{background:#ee9264}#labels{position:absolute;inset:0;pointer-events:none}.label{position:absolute;font-size:10px;white-space:nowrap;background:#fffdf6ed;padding:4px 8px;border-radius:6px;transform:translate(-50%,-100%);border:1px solid #e6dfeb}.label.visitor{background:#8062d9;color:white;border:0}#visitor-panel{position:fixed;bottom:20px;left:20px;z-index:5;width:300px;padding:24px;background:#fffdf9f5;border:1px solid #ded8e7;border-radius:20px;box-shadow:0 12px 60px #34304722}#controls{text-align:center}#joystick{touch-action:none;width:120px;height:120px;border-radius:50%;background:#e9e2f6;margin:15px auto;display:grid;place-items:center;border:1px solid #d9cbed}#stick{width:48px;height:48px;background:#8966dc;border-radius:50%;box-shadow:0 5px 12px #6746a333}#controls .small{display:block;margin-top:10px}#error{color:#b54d4d}body.visiting aside{display:none}body.visiting main{grid-template-columns:1fr}body.visiting .intro{display:none}@media(max-width:700px){header{height:65px;padding:0 18px}.brand{font-size:20px}.brand span,.phase{display:none}main{display:block}.office{height:65vh;min-height:450px}.intro{left:20px;top:24px}h1{font-size:26px}.intro p{max-width:220px}aside{border-left:0;border-top:1px solid #ddd;padding:25px}.aside-title{text-align:center}.view-tools span{display:none}.view-tools{bottom:50px;left:20px}.legend{left:20px;bottom:20px}body.visiting .office{height:calc(100dvh - 65px);min-height:0}body.visiting #scene{inset:0 0 130px}#visitor-panel{bottom:12px;left:12px;width:calc(100% - 24px);padding:16px}body.visiting .view-tools,body.visiting .legend{display:none}#controls{display:grid;grid-template-columns:1fr 130px;align-items:center}#controls[hidden]{display:none}#controls .small{display:none}#joystick{grid-column:2;grid-row:1/3;margin:0}#leave{justify-self:center}}

body.visiting #scene{inset:0}body.visiting #visitor-panel{background:#fffdf9ed}body.visiting #controls p{font-size:11px}body.visiting #labels .label{font-size:12px}body.visiting #scene::after{content:"+";position:absolute;left:50%;top:44%;color:#fff9;pointer-events:none;font-size:20px;text-shadow:0 1px 3px #333}body.visiting .office{min-height:calc(100dvh - 90px)}@media(max-width:700px){body.visiting .office{min-height:calc(100dvh - 65px)}}

body.visiting .view-tools,body.visiting .legend{display:none}

.brand-logo{width:29px;height:43px;object-fit:contain;flex-shrink:0}@media(max-width:700px){.brand-logo{width:23px;height:34px}}

.chat-bubble{max-width:210px;white-space:normal;text-align:center;background:#fffdf5;color:#544664;border:1px solid #cdbbdd;border-radius:12px 12px 12px 2px;padding:8px 11px;font-size:11px;box-shadow:0 3px 12px #43394d18}body.visiting #labels .chat-bubble{font-size:12px;max-width:230px}

/* Visitor HUD: walking on the left, exit on the right; scene remains touchable. */
body.visiting #visitor-panel:has(#controls:not([hidden])){left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:auto;padding:0;background:none;border:0;box-shadow:none;pointer-events:none}
body.visiting #controls:not([hidden]){display:grid;grid-template-columns:120px 1fr minmax(140px,230px);grid-template-rows:auto auto;align-items:end;gap:8px 16px;text-align:right}
body.visiting #controls>div:first-child{grid-column:3;grid-row:1;padding:10px 12px;background:#fffdf9e8;border-radius:12px;pointer-events:none}
body.visiting #controls #joystick{grid-column:1;grid-row:1/3;margin:0;pointer-events:auto;background:#eee7f4db;box-shadow:0 4px 20px #33244220}
body.visiting #controls #leave{grid-column:3;grid-row:2;justify-self:end;min-height:44px;padding:11px 18px;pointer-events:auto;background:#fffdf9ed;box-shadow:0 3px 12px #33244216}
body.visiting #controls .small{display:none}
@media(max-width:700px){body.visiting #visitor-panel:has(#controls:not([hidden])){left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}body.visiting #controls:not([hidden]){grid-template-columns:120px 1fr minmax(120px,170px);gap:8px}body.visiting #controls>div:first-child{font-size:12px}body.visiting #controls p{margin:4px 0 0;font-size:10px}}
