/* Hexvate stand builder (hexvate.com/stand-builder/), standalone and embeddable in an iframe.
   Dark, like hexvate.com: page #0E0F11, panels #1A1B1E, Inter, pill tags, the #C5FCFC pill button.
   Desktop (900 px and up): panel left, 3D view right, designed for a frame about 1200 to 1320 wide and 760 to 820 tall.
   Below 900 px: the 3D view first, then the elements, then the rest. html.is-embed is set before first paint when the
   page runs inside a frame (no outer padding, no viewport-based heights except --vh, which builder.js takes from the
   parent screen). Rule: spaces around + and - inside calc(), or the declaration is dropped. */
@font-face{font-family:'InterV';src:url(../fonts/InterVariable.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --bg:#0E0F11; --panel:#1A1B1E; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.2);
  --ink:#FFFFFF; --muted:rgba(255,255,255,.62); --dim:rgba(255,255,255,.5); --chip:rgba(255,255,255,.06);
  --aqua:#C5FCFC; --aqua-ink:#141414; --aqua-soft:rgba(197,252,252,.12);
  --glass:rgba(14,15,17,.74);
  --body:'InterV',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:20px; --pad:24px;
  --vh:1vh;
  color-scheme:dark;
}
@supports (height:1svh){:root{--vh:1svh}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html.touch .for-mouse,html:not(.touch) .for-touch{display:none}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;display:flow-root;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
html.is-sized,html.is-sized body{overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
input{font:inherit;color:inherit}
.fa{display:inline-block;height:1em;width:auto;flex:none;vertical-align:-.125em;fill:currentColor}
:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
::selection{background:var(--aqua);color:var(--aqua-ink)}

/* ---------- layout ---------- */
.booth{--bp:#111111;--ba:#FFFFFF;--bpt:#fff;--bat:#111;
  display:grid;grid-template-columns:clamp(340px,36%,448px) minmax(0,1fr);
  grid-template-areas:"a v" "b v" "c v";grid-template-rows:auto auto 1fr;column-gap:16px;row-gap:0;
  width:100%;max-width:1320px;margin:0 auto}
html.is-page body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:24px}
html.is-page .booth{flex:none}
.bt-a{grid-area:a}.bt-b{grid-area:b}.bt-c{grid-area:c}.bt-view{grid-area:v}

/* the panel: three blocks that read as one card on desktop */
.bt-panel{position:relative;min-width:0;background:var(--panel);border:1px solid var(--line);border-top:0;border-bottom:0;padding:18px var(--pad)}
.bt-a{border-top:1px solid var(--line);border-radius:var(--r) var(--r) 0 0;padding-top:24px;container-type:inline-size}
.bt-c{border-bottom:1px solid var(--line);border-radius:0 0 var(--r) var(--r);padding-bottom:var(--pad);display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.bt-b::before,.bt-c::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--line)}

/* ---------- header ---------- */
.kick{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 11.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 4px var(--aqua-soft);flex:none}
.bt-title{margin:0;font:800 23px/1.12 var(--body);font-size:clamp(19px,5.7cqi,28px);letter-spacing:-.025em;color:var(--ink)}
.bt-lead{margin:8px 0 0;font:400 14px/1.5 var(--body);color:var(--muted);max-width:44ch}

/* ---------- groups ---------- */
.bt-grp{margin-top:18px}
.bt-b .bt-grp{margin-top:0}
.bt-lbl{margin:0 0 9px;font:600 11px/1.2 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bt-note{margin:7px 0 0;font:400 12px/1.4 var(--body);color:var(--dim)}

/* stand type: a segmented pill; the selected type is aqua */
.bt-type{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:999px;border:1px solid var(--line-2);background:rgba(0,0,0,.18)}
.bt-type button{display:inline-flex;align-items:center;justify-content:center;gap:.32em;height:36px;padding:0 6px;border-radius:999px;font:600 13px/1 var(--body);color:var(--muted);white-space:nowrap;transition:background .25s,color .25s}
.bt-type small{font:inherit}
.bt-type small::before{content:"\00B7\00A0"}
.bt-type button.on{background:var(--aqua);color:var(--aqua-ink)}

/* identity: logo upload (stays on the device) and brand name */
.bt-id{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bt-up{position:relative;display:flex;align-items:center;gap:9px;min-width:0;height:44px;padding:0 16px;border-radius:999px;border:1px dashed rgba(255,255,255,.3);font:600 13.5px/1 var(--body);color:var(--ink);cursor:pointer;overflow:hidden;transition:border-color .2s,background .2s}
.bt-up .fa{height:14px;color:var(--aqua)}
.bt-up span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-up input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.bt-up:focus-within{outline:2px solid var(--aqua);outline-offset:2px}
.bt-name{min-width:0;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--ink);font:500 14px/1 var(--body);outline:none;transition:border-color .2s}
.bt-name::placeholder{color:var(--dim)}
.bt-name:focus{border-color:var(--aqua)}

/* colours: presets, then the two pickers */
.bt-cols{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bt-sw{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--p) 0 55%,var(--a) 55%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);transition:transform .2s,box-shadow .2s}
.bt-sw.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--aqua)}
.bt-div{width:1px;height:22px;margin:0 4px;background:var(--line-2)}
.bt-pick{position:relative;width:32px;height:32px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.3);cursor:pointer}
.bt-pick input{position:absolute;inset:-8px;width:48px;height:48px;border:0;padding:0;cursor:pointer;background:none}
.bt-pick .fa{position:absolute;left:50%;top:50%;height:13px;transform:translate(-50%,-50%);color:var(--ic,#FFFFFF);pointer-events:none}
.bt-pick:focus-within{outline:2px solid var(--aqua);outline-offset:3px}

/* elements: pill chips like the tags on hexvate.com */
.bt-pal{display:flex;flex-wrap:wrap;gap:8px 7px}
.bt-chip{position:relative;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 11px;border-radius:20px;border:1px solid var(--line-3);background:var(--chip);font:500 12.5px/1 var(--body);letter-spacing:.01em;text-transform:uppercase;color:var(--ink);white-space:nowrap;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:border-color .2s,background .2s,opacity .2s}
.bt-chip .ic{display:inline-grid;place-items:center;color:var(--aqua)}
.bt-chip .ic .fa{height:13px}
.bt-chip b{font-weight:500}
.bt-chip i{position:absolute;right:-5px;top:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--aqua);color:var(--aqua-ink);font:700 11px/18px var(--body);font-style:normal;text-align:center;letter-spacing:0;box-shadow:0 0 0 2px var(--panel)}
.bt-chip.full{opacity:.38;cursor:not-allowed}

/* actions on the stand: quiet ghost pills */
.bt-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:50px;font:600 16px/1.2 var(--body);white-space:nowrap;transition:background .25s,color .25s,border-color .25s,box-shadow .25s,opacity .25s}
.btn.ghost{height:38px;padding:0 15px;border:1px solid var(--line-2);font-size:13px;color:rgba(255,255,255,.86)}
.btn.ghost .fa{height:13px;color:var(--aqua)}
.btn.is-off{opacity:.35;pointer-events:none}
/* the two ways to send it: the site's signature pill, and its outline variant */
.btn.primary{width:100%;padding:16px 32px;background:var(--aqua);color:var(--aqua-ink)}
.btn.primary .fa{height:14px}
.btn.primary .tilt{transform:rotate(-45deg);transition:transform .25s}
.btn.outline{width:100%;padding:15px 32px;border:1px solid var(--aqua);color:var(--aqua)}
.btn.outline .fa{height:17px}

@media (hover:hover){
  .bt-up:hover{border-color:var(--aqua);background:var(--aqua-soft)}
  .bt-sw:hover{transform:scale(1.1)}
  .bt-type button:not(.on):hover{color:var(--ink)}
  .bt-chip:not(.full):hover{border-color:var(--aqua);background:var(--aqua-soft)}
  .btn.ghost:hover{border-color:rgba(255,255,255,.4);color:var(--ink)}
  .btn.primary:hover{box-shadow:0 0 0 5px rgba(197,252,252,.16)}
  .btn.primary:hover .tilt{transform:rotate(0deg)}
  .btn.outline:hover{background:var(--aqua-soft)}
}

/* ---------- the 3D view ---------- */
.bt-view{position:relative;min-width:0;min-height:600px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:radial-gradient(ellipse 60% 46% at 50% 42%,color-mix(in srgb,var(--bp) 12%,#202227) 0,#141518 55%,var(--bg) 100%);perspective:1500px;perspective-origin:50% 22%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;isolation:isolate}
.bt-view.grab{cursor:grabbing}
.booth.gl .bt-view{background:var(--bg)}
.bt-gl{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}

/* loading state, until three.js (or the CSS stand) is ready */
.bt-load{position:absolute;left:50%;top:50%;z-index:2;display:flex;align-items:center;gap:12px;margin:0;transform:translate(-50%,-50%);font:600 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);white-space:nowrap;pointer-events:none}
.bt-load i{width:8px;height:8px;border-radius:50%;background:var(--aqua);animation:btPulse 1.1s ease-in-out infinite}
@keyframes btPulse{50%{opacity:.25;transform:scale(.7)}}
.booth.ready .bt-load{display:none}

/* tools over the view */
.bt-tools{position:absolute;left:14px;right:14px;top:14px;z-index:3;display:flex;align-items:center;gap:8px;pointer-events:none}
.bt-tools > *{pointer-events:auto}
.booth:not(.ready) .bt-tools{display:none}
.booth:not(.gl) .bt-views,.booth:not(.gl) #btPeople,.booth:not(.gl) #btShot{display:none}
.bt-views{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.bt-views button{height:32px;padding:0 14px;border-radius:999px;font:600 13px/1 var(--body);color:rgba(255,255,255,.72);white-space:nowrap;transition:background .25s,color .25s}
.bt-views button.on{background:var(--aqua);color:var(--aqua-ink)}
.bt-tool{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:600 13px/1 var(--body);color:rgba(255,255,255,.86);white-space:nowrap;transition:background .25s,color .25s}
.bt-tool .fa{height:13px}
.bt-tool.on{background:var(--aqua);color:var(--aqua-ink);box-shadow:none}
#btShot{margin-left:auto}
@media (hover:hover){
  .bt-views button:not(.on):hover{color:var(--ink)}
  .bt-tool:not(.on):hover{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
}

/* hint and element count along the bottom */
.bt-ui{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;pointer-events:none}
.bt-ui *{pointer-events:none}
.bt-hint{margin:0;max-width:430px;padding:9px 15px;border-radius:16px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:400 12.5px/1.4 var(--body);color:rgba(255,255,255,.74)}
.bt-badge{flex:none;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);font:600 13px/1 var(--body);white-space:nowrap}
.bt-badge b{color:var(--aqua);font-weight:700}
.booth:not(.ready) .bt-ui{display:none}

#btToast{position:absolute;left:50%;top:68px;z-index:4;max-width:calc(100% - 28px);padding:10px 18px;border-radius:999px;background:var(--aqua);color:var(--aqua-ink);font:600 13px/1.3 var(--body);text-align:center;opacity:0;transform:translate(-50%,-8px);pointer-events:none;transition:opacity .25s,transform .25s}
#btToast.on{opacity:1;transform:translate(-50%,0)}

/* the element under the pointer while dragging */
#btGhost{position:fixed;left:0;top:0;z-index:95;display:flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 12px;margin:-19px 0 0 -22px;border-radius:999px;background:var(--aqua);color:var(--aqua-ink);font:600 13px/1 var(--body);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;box-shadow:0 18px 40px -12px rgba(197,252,252,.5)}
#btGhost.on{opacity:1}
#btGhost .ic{display:inline-grid;place-items:center}
#btGhost .fa{height:13px}
#btGhost b{font-weight:600}
html.touch #btGhost{margin:-70px 0 0 -30px}

/* ---------- CSS 3D fallback (booth.js): faces, the stand shell and the elements ---------- */
.bt-cam{position:absolute;left:50%;top:63%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.bt-scene{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.bt-scene *{transform-style:preserve-3d}
.bx,.grp,.el{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.f{position:absolute;left:0;top:0;display:block;background:var(--fc,#E9EAEC);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.f::after{content:"";position:absolute;inset:0;pointer-events:none}
.f.fr::after{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.1))}
.f.rt::after{background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.24))}
.f.lf::after{background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.38))}
.f.bk::after{background:rgba(0,0,0,.36)}
.f.tp::after{background:rgba(255,255,255,.1)}
.f.bt::after{background:rgba(0,0,0,.5)}
.pl{position:absolute;left:0;top:0;backface-visibility:visible}
.bt-venue{position:absolute;left:0;top:0;width:1600px;height:1600px;transform:translate(-50%,-50%) rotateX(90deg);background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 80px),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 80px);-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 62%);mask-image:radial-gradient(circle,#000 20%,transparent 62%)}
.bt-shadow{position:absolute;left:0;top:0;transform:translate(-50%,-50%) rotateX(90deg) translateZ(.5px);background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 68%)}
.plat .f{--fc:color-mix(in srgb,var(--bp) 16%,#191B1F)}
.plat .f.tp{--fc:color-mix(in srgb,var(--bp) 22%,#24272C)}
.carpet{position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0 2px,transparent 2px 7px)}
.wall .f{--fc:#F1F2F4}
.wall.back .f.fr{--fc:#F4F5F7}
.wallgfx{position:absolute;inset:0;background:linear-gradient(118deg,transparent 0 46%,var(--bp) 46% 72%,color-mix(in srgb,var(--bp) 70%,#000) 72% 78%,transparent 78%),linear-gradient(118deg,transparent 0 80%,var(--ba) 80%)}
.wallgfx.side{background:linear-gradient(180deg,transparent 0 62%,var(--bp) 62% 86%,var(--ba) 86%)}
.bt-logo{display:flex;align-items:center;justify-content:center;font:800 14px/1 'InterV',sans-serif;letter-spacing:.06em;text-align:center;white-space:nowrap;overflow:hidden}
.bt-logo img{max-width:100%;max-height:100%;object-fit:contain}
.bt-logo.lg-wm{position:absolute;left:5%;top:7%;width:34%;height:13%;color:#1A1C20;justify-content:flex-start}
.bt-logo.lg-wm img{object-position:left center}
.tower .f{--fc:var(--bp)}
.bt-logo.lg-tw{position:absolute;inset:14% 8%;color:var(--bpt);font-size:11px;writing-mode:vertical-rl}
.bt-logo.lg-tw img{writing-mode:horizontal-tb;max-height:none;max-width:100%}
.counter .f{--fc:var(--bp)}
.counter .f.tp{--fc:#F7F7F8}
.bt-logo.lg-ct{position:absolute;inset:14% 10% 26%;color:var(--bpt);font-size:15px}
.edge{position:absolute;left:0;right:0;bottom:6px;height:3px;background:var(--ba);box-shadow:0 0 10px var(--ba),0 0 22px var(--ba)}
.ctop{position:absolute;inset:0;border-bottom:3px solid var(--ba)}
.fascia .f{--fc:var(--bp)}
.bt-logo.lg-fs{position:absolute;inset:10% 6%;color:var(--bpt);font-size:16px}
.fascia.hang .f{--fc:var(--bp)}
.led{background:#08090B;border:4px solid #15171A;box-sizing:border-box;box-shadow:0 0 34px color-mix(in srgb,var(--bp) 45%,transparent)}
.scr{position:absolute;inset:0;overflow:hidden;background:linear-gradient(120deg,color-mix(in srgb,var(--bp) 70%,#000),#08090B 60%,color-mix(in srgb,var(--ba) 50%,#000))}
.scr .sweep{position:absolute;inset:-40%;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);animation:btSweep 3.6s linear infinite}
@keyframes btSweep{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
.bt-logo.lg-led{position:absolute;inset:22% 14%;color:#fff;font-size:20px;text-shadow:0 0 12px rgba(255,255,255,.4)}
.bt-logo.lg-led img{filter:drop-shadow(0 0 8px rgba(255,255,255,.35))}
.live{position:absolute;right:8px;top:7px;width:7px;height:7px;border-radius:50%;background:#FF4D4D;box-shadow:0 0 8px #FF4D4D;animation:btLive 1.2s ease-in-out infinite}
@keyframes btLive{50%{opacity:.3}}
.gfx{background:var(--ba)}
.gfxin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.bt-logo.lg-gf{width:80%;height:30%;color:var(--bat);font-size:11px}
.bars{display:block;width:60%;height:24px;background:repeating-linear-gradient(180deg,var(--bp) 0 4px,transparent 4px 9px)}
.rbase .f{--fc:#2B2E33}
.roll{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.rin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:10px;background:linear-gradient(180deg,#fff 0 58%,var(--bp) 58%)}
.bt-logo.lg-rl{width:84%;height:24px;color:#1A1C20;font-size:9px}
.r1,.r2{display:block;width:70%;height:6px;margin-top:10px;border-radius:3px;background:var(--ba)}
.r2{width:46%;margin-top:6px;opacity:.6}
.totem .f{--fc:#1A1C20}
.scr.t .sweep{animation-duration:2.8s}
.bt-logo.lg-tt{position:absolute;inset:30% 8%;color:#fff;font-size:8px;writing-mode:vertical-rl}
.bt-logo.lg-tt img{writing-mode:horizontal-tb}
.chair .f{--fc:#E7E8EA}
.chair.back .f{--fc:color-mix(in srgb,var(--bp) 80%,#fff)}
.cush{position:absolute;inset:3px;border-radius:4px;background:color-mix(in srgb,var(--bp) 80%,#fff)}
.leg .f{--fc:#2A2C30}
.table .f{--fc:#F2F3F5}
.ttop{position:absolute;inset:0;border-radius:50%;background:#fff}
.pot .f{--fc:#E9E9E9}
.leaf{background:radial-gradient(circle at 50% 62%,#3F9E5A 0 30%,transparent 31%),radial-gradient(circle at 30% 45%,#4CB36A 0 22%,transparent 23%),radial-gradient(circle at 70% 42%,#35894E 0 24%,transparent 25%),radial-gradient(circle at 50% 22%,#58BF74 0 20%,transparent 21%)}
.leaf.s{background:radial-gradient(circle at 50% 55%,#46A862 0 34%,transparent 35%),radial-gradient(circle at 35% 30%,#5CC578 0 22%,transparent 23%)}
.spot .f{--fc:#202226}
.cone{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 80%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);mix-blend-mode:screen;pointer-events:none}
/* slots and selection (CSS stand) */
.bt-scene .f,.bt-scene .pl,.bt-venue,.bt-shadow{pointer-events:none}
.bt-scene .el .f,.bt-scene .el .pl{pointer-events:auto}
.dragging .bt-scene .el .f,.dragging .bt-scene .el .pl{pointer-events:none}
.bt-slot{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .2s}
.bt-slot span{pointer-events:none;position:absolute;inset:0;border-radius:12px;border:2.5px dashed rgba(197,252,252,.9);background:rgba(197,252,252,.08)}
.bt-slot.floor{width:110px;height:90px}
.bt-slot.head{width:240px;height:80px}
.dragging .bt-slot.ok{opacity:1;pointer-events:auto}
.bt-slot.over span{background:rgba(197,252,252,.3);border-style:solid;box-shadow:0 0 30px rgba(197,252,252,.6)}
.bt-slot.hit{opacity:1}
.bt-slot.hit span{border-style:solid;background:rgba(197,252,252,.4);animation:btHit .5s ease-out forwards}
@keyframes btHit{to{opacity:0;transform:scale(1.25)}}
.el{cursor:grab}
.el.sel .f,.el.sel .pl{outline:2px solid var(--aqua);outline-offset:-2px}

/* ---------- embedded: the WordPress container gives the margins ---------- */
html.is-embed body{padding:0}

/* ---------- narrower desktops and tablets in landscape ---------- */
@media (max-width:1180px){
  :root{--pad:20px}
  .bt-hint{max-width:300px}
}

/* ---------- below 900 px: the 3D view first, then the elements, then the rest ---------- */
@media (max-width:899px){
  :root{--r:18px;--pad:18px}
  .booth{grid-template-columns:minmax(0,1fr);grid-template-areas:"v" "b" "a" "c";grid-template-rows:auto;row-gap:12px}
  html.is-page body{display:block;padding:12px}
  .bt-view{min-height:0;height:clamp(380px,calc(var(--vh) * 62),640px)}
  .bt-panel{border:1px solid var(--line);border-radius:var(--r);padding:var(--pad)}
  .bt-b::before{display:none}
  /* the identity card and the send buttons read as one card */
  .bt-a{border-bottom:0;border-radius:var(--r) var(--r) 0 0;padding-bottom:6px}
  .bt-c{border-top:0;border-radius:0 0 var(--r) var(--r);margin-top:-12px;padding-top:var(--pad)}
  .bt-c::before{top:0}
  .bt-acts{margin-top:14px}
}
@media (max-width:720px){
  .bt-hint{display:none}
  .bt-tools{left:10px;right:10px;top:10px;gap:6px}
  .bt-views{padding:3px;gap:2px}
  .bt-views button{height:32px;padding:0 11px;font-size:12.5px}
  .bt-tool{width:40px;height:40px;padding:0;justify-content:center}
  .bt-tool span:not(.fa){display:none}
  .bt-tool .fa{height:14px}
  .bt-ui{left:10px;right:10px;bottom:10px}
  #btToast{top:60px}
}
@media (max-width:479px){
  .bt-id{grid-template-columns:1fr}
  .bt-acts .btn{flex:1 1 auto}
  .bt-pal{display:grid;grid-template-columns:1fr 1fr}
  .bt-type button{flex-direction:column;gap:3px;height:46px}
  .bt-type small{font-size:11px;font-weight:500;opacity:.78}
  .bt-type small::before{content:none}
  .bt-cols{gap:6px}
  .bt-div{margin:0 1px}
}
/* touch screens: bigger chips and pills */
html.touch .bt-chip{height:40px;padding:0 14px 0 12px}
html.touch .btn.ghost{height:42px}
html.touch .bt-type button{min-height:40px}

@media (prefers-reduced-motion:reduce){
  .scr .sweep,.live,.bt-load i{animation:none}
  *{transition-duration:.01ms!important}
}