:root{
  --rail:376px;
  --ref-accent:#E0A03A;
  --ref-accent-soft:rgba(224,160,58,.18);
  --ref-glass:rgba(20,21,15,.92);
  --ref-radius:5px;
}

html,body,#app{height:100%;height:100dvh}
body{overflow:hidden}
button,a{touch-action:manipulation}

.ref-icon{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:1.8}

/* ---------- reference / build-plan rail ---------- */
#sched{
  min-width:0;overflow-x:hidden;scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent;
}
.ref-rail-intro{padding:12px 12px 0}
.ref-eyebrow{
  margin:0 0 4px;color:var(--build);font-family:var(--mono);font-size:9px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.ref-rail-intro h1{
  margin:0;font-family:var(--disp);font-size:17px;line-height:1.05;
  letter-spacing:.04em;text-transform:uppercase;
}
.ref-rail-intro p{
  margin:5px 0 0;color:var(--muted);font-family:var(--mono);
  font-size:9.5px;line-height:1.45;
}

.plan-panel{padding:10px 12px 12px;border-bottom:1px solid var(--rule)}
.plan-bar{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.plan-bar h2{
  margin:0;flex:1;font-family:var(--disp);font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
}
.plan-count{color:var(--muted);font-family:var(--mono);font-size:9.5px}
.plan-main{
  position:relative;display:block;width:100%;height:190px;padding:0;
  overflow:hidden;border:1px solid var(--rule);border-radius:var(--ref-radius);
  background:#0c0d09;cursor:zoom-in;
}
.plan-main:hover{border-color:var(--build)}
.plan-main:focus-visible{outline:2px solid var(--build);outline-offset:2px}
.plan-main img{width:100%;height:100%;display:block;object-fit:contain}
.plan-main::after{
  content:"Koppints a nagyításhoz";position:absolute;right:7px;bottom:7px;
  padding:4px 6px;border:1px solid rgba(255,255,255,.2);border-radius:2px;
  color:#f5f0df;background:rgba(10,10,8,.78);font-family:var(--mono);
  font-size:8.5px;letter-spacing:.04em;
}
.plan-actions{display:flex;align-items:center;gap:6px;margin-top:7px}
.plan-arrow{
  width:38px;height:36px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid var(--rule);border-radius:3px;background:var(--surface2);
  color:var(--ink);cursor:pointer;font-size:17px;
}
.plan-arrow:hover{border-color:var(--build);color:var(--build)}
.plan-arrow:focus-visible{outline:2px solid var(--build);outline-offset:2px}
.plan-thumbs{
  min-width:0;display:flex;gap:5px;overflow-x:auto;padding:1px;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.plan-thumbs::-webkit-scrollbar{display:none}
.plan-thumb{
  flex:0 0 53px;height:36px;padding:0;overflow:hidden;scroll-snap-align:start;
  border:1px solid var(--rule);border-radius:2px;background:#0c0d09;cursor:pointer;
}
.plan-thumb[aria-current="true"]{border:2px solid var(--build)}
.plan-thumb:focus-visible{outline:2px solid var(--build);outline-offset:1px}
.plan-thumb img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}

.ref-directory{padding:11px 12px 13px;border-bottom:1px solid var(--rule)}
.ref-directory-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.ref-directory-head h2{
  margin:0;font-family:var(--disp);font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
}
.ref-directory-head span{color:var(--muted);font-family:var(--mono);font-size:8.5px}
.outside-reference{
  display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:6px;
  margin-bottom:6px;
}
.outside-reference-label{
  color:var(--muted);font-family:var(--mono);font-size:7.5px;line-height:1.25;
  letter-spacing:.06em;text-transform:uppercase;
}
.ref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ref-card{
  position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);
  align-items:center;gap:7px;min-width:0;min-height:50px;padding:5px;
  border:1px solid var(--rule);border-radius:var(--ref-radius);
  background:var(--surface2);color:var(--ink);text-align:left;cursor:pointer;
}
.ref-card:hover{border-color:var(--build);background:var(--ref-accent-soft)}
.ref-card:focus-visible{outline:2px solid var(--build);outline-offset:2px}
.ref-card img{display:block;width:48px;height:38px;object-fit:cover;border-radius:2px;background:#0b0c09}
.ref-card-copy{min-width:0}
.ref-card strong{
  display:block;color:var(--ink);font-family:var(--disp);font-size:9.5px;
  line-height:1.08;letter-spacing:.035em;text-transform:uppercase;white-space:normal;
}
.ref-card small{display:block;margin-top:3px;color:var(--muted);font-family:var(--mono);font-size:8px}
.ref-card.featured-ref{grid-column:1/-1}

.build-notes{border-bottom:1px solid var(--rule)}
.build-notes summary{
  display:flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;
  list-style:none;cursor:pointer;color:var(--ink);font-family:var(--disp);
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.build-notes summary::-webkit-details-marker{display:none}
.build-notes summary::after{content:"+";margin-left:auto;color:var(--build);font-family:var(--mono);font-size:15px}
.build-notes[open] summary::after{content:"−"}
.build-notes summary:focus-visible{outline:2px solid var(--build);outline-offset:-2px}
.build-notes .sched-head{display:none}
.build-notes table{table-layout:fixed;font-size:10px}
.build-notes th,.build-notes td{
  padding:6px 8px;white-space:normal;overflow-wrap:anywhere;line-height:1.32;
}
.build-notes th{font-size:8px}
.build-notes th:nth-child(1),.build-notes td:nth-child(1){width:45%}
.build-notes th:nth-child(2),.build-notes td:nth-child(2){width:36%}
.build-notes th:nth-child(3),.build-notes td:nth-child(3){width:19%;padding-left:3px;padding-right:4px}
.build-notes td.nm{font-size:10px}
.build-notes td.nm>div{font-size:8.5px!important;line-height:1.35}
.build-notes td.dim{font-size:9px;white-space:normal}
.build-notes .chip{font-size:7.5px;padding:2px 3px}
.build-notes .note{max-width:none;padding:9px 12px 13px;font-size:9.5px;line-height:1.5}
.build-notes .note code{font-size:9px}

/* ---------- header refinements ---------- */
#app > header{min-width:0;padding-left:12px;padding-right:12px}
#app > header .mark{min-width:0}
#app > header .spec{font-size:9.5px}
#app > header .tgl{min-height:34px;padding:6px 8px;font-size:9.5px}

/* ---------- scene preview markers ---------- */
#refMarkers{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}
#views{z-index:12}
.scene-cue{
  position:absolute;transform:translate(-50%,-50%);padding:4px 7px;
  border:1px solid rgba(224,160,58,.58);border-radius:3px;
  background:rgba(20,21,15,.84);color:#f0c66c;box-shadow:0 4px 16px rgba(0,0,0,.3);
  font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.07em;
  line-height:1;text-transform:uppercase;white-space:nowrap;pointer-events:none;
}
.scene-cue[hidden]{display:none}
.scene-ref{
  --pin-x:0px;--pin-y:22px;--line-length:22px;--line-angle:0deg;
  position:absolute;transform:translate(-50%,-100%);
  width:104px;padding:4px;border:1px solid rgba(224,160,58,.72);
  border-radius:4px;background:var(--ref-glass);color:#f1eddd;
  box-shadow:0 6px 24px rgba(0,0,0,.38);cursor:pointer;pointer-events:auto;
  text-align:left;transition:transform .15s,border-color .15s,opacity .18s;
}
.scene-ref::after{
  content:"";position:absolute;left:50%;top:100%;height:var(--line-length);width:1px;
  background:linear-gradient(var(--build),transparent);transform-origin:top center;
  transform:rotate(var(--line-angle));
}
.scene-ref::before{
  content:"";position:absolute;left:calc(50% + var(--pin-x) - 3px);
  top:calc(100% + var(--pin-y) - 3px);
  width:7px;height:7px;border:1px solid var(--build);border-radius:50%;background:var(--ground);
}
.scene-ref[data-edge]::before{background:var(--build)}
.scene-ref:hover{transform:translate(-50%,-100%) scale(1.04);border-color:var(--build)}
.scene-ref:focus-visible{outline:2px solid #fff;outline-offset:2px}
.scene-ref img{display:block;width:94px;height:50px;object-fit:cover;border-radius:2px;background:#0b0c09}
.scene-ref span{
  display:block;padding:5px 3px 2px;
  font-family:var(--disp);font-size:9px;font-weight:700;letter-spacing:.055em;
  line-height:1.05;text-align:center;text-transform:uppercase;white-space:normal;
}
.scene-ref[hidden]{display:none}
.scene-hint{
  position:absolute;top:62px;right:12px;z-index:8;padding:6px 8px;
  border:1px solid var(--rule);border-radius:3px;background:rgba(20,21,15,.8);
  color:#d3cfbd;font-family:var(--mono);font-size:8.5px;pointer-events:none;
}

/* ---------- full gallery ---------- */
.ref-dialog{
  width:min(1160px,calc(100vw - 28px));height:min(780px,calc(100dvh - 28px));
  max-width:none;max-height:none;margin:auto;padding:0;overflow:hidden;
  border:1px solid #4b4d3c;border-radius:7px;background:#11120d;color:#edead9;
  box-shadow:0 24px 90px rgba(0,0,0,.7);
}
.ref-dialog::backdrop{background:rgba(5,6,4,.82);backdrop-filter:blur(6px)}
.ref-dialog-shell{
  width:100%;height:100%;min-width:0;display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
}
.ref-dialog[data-plan] .ref-dialog-shell{grid-template-rows:auto auto minmax(0,1fr) auto}
.gallery-head{
  position:relative!important;inset:auto!important;width:auto!important;
  order:0!important;flex:0 0 auto;transform:none;transition:none;
  display:flex;flex-wrap:nowrap;align-items:center;gap:10px;min-width:0;max-width:100%;padding:10px 12px;
  border-bottom:1px solid #343629;background:#191a14;
}
.gallery-heading{min-width:0;flex:1}
.gallery-heading h2{
  margin:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--disp);
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.gallery-heading p{margin:3px 0 0;color:#8e8b76;font-family:var(--mono);font-size:9px}
.gallery-close{
  width:44px;height:44px;min-width:44px;min-height:44px;display:grid;place-items:center;flex:0 0 44px;
  border:1px solid #434536;border-radius:4px;background:#25271d;color:#edead9;
  cursor:pointer;font-size:23px;line-height:1;
}
.gallery-close:hover{border-color:var(--build);color:var(--build)}
.gallery-close:focus-visible,.gallery-nav:focus-visible,.gallery-thumb:focus-visible{
  outline:2px solid var(--build);outline-offset:2px;
}
.gallery-tools{
  display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;
  padding:5px 8px;border-bottom:1px solid #343629;background:#151610;
  overflow-x:auto;scrollbar-width:none;
}
.gallery-tools::-webkit-scrollbar{display:none}
.gallery-tools[hidden]{display:none!important}
.gallery-tool{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;padding:0 10px;border:1px solid #434536;border-radius:4px;
  background:#25271d;color:#edead9;font-family:var(--mono);font-size:9px;
  font-weight:700;letter-spacing:.04em;text-decoration:none;text-transform:uppercase;cursor:pointer;
}
.gallery-tool:hover,.gallery-tool[aria-pressed="true"]{border-color:var(--build);color:var(--build)}
.gallery-tool:focus-visible{outline:2px solid var(--build);outline-offset:2px}
.gallery-tool:disabled,.gallery-tool[aria-disabled="true"]{opacity:.38;cursor:default}
.gallery-tool-icon{padding:0;font-size:18px}
.gallery-zoom-value{
  min-width:50px;color:#a8a490;font-family:var(--mono);font-size:9px;text-align:center;
}
.gallery-original{min-width:56px}
.gallery-stage{
  position:relative;width:100%;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;
  background:#090a07;
}
.gallery-pan{
  position:absolute;inset:0;overflow:hidden;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#565847 #11120d;
}
.gallery-canvas{
  position:relative;width:100%;height:100%;min-width:0;min-height:0;
  display:grid;place-items:center;overflow:hidden;
}
.gallery-image{
  width:100%;height:100%;display:block;object-fit:contain;user-select:none;
  -webkit-user-drag:none;transition:opacity .12s;
}
.gallery-pan.is-zoomed{overflow:auto;touch-action:pan-x pan-y;cursor:grab}
.gallery-pan.is-zoomed .gallery-canvas{overflow:visible}
.gallery-pan.is-zoomed.is-dragging{cursor:grabbing;scroll-behavior:auto}
.gallery-pan.is-zoomed .gallery-image{
  position:static;width:auto;height:auto;max-width:none;max-height:none;object-fit:fill;flex:none;
}
.gallery-image.is-loading{opacity:.3}
.gallery-pan:not(.is-zoomed) .gallery-image{position:absolute;inset:0}
.gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:64px;border:1px solid rgba(255,255,255,.24);border-radius:4px;
  background:rgba(17,18,13,.82);color:#fff;cursor:pointer;font-size:28px;
}
.gallery-nav:hover{border-color:var(--build);color:var(--build)}
.gallery-stage[data-zoomed] .gallery-nav{opacity:0;pointer-events:none}
.gallery-prev{left:10px}.gallery-next{right:10px}
.gallery-empty{
  display:none;max-width:34ch;padding:20px;color:#aaa58f;text-align:center;
  font-family:var(--mono);font-size:11px;line-height:1.6;
}
.gallery-footer{width:100%;min-width:0;max-width:100%;display:flex;flex-direction:column;max-height:max(160px,38dvh);overflow:hidden;padding:8px 10px 10px;border-top:1px solid #343629;background:#191a14}
.gallery-filmstrip{
  width:100%;min-width:0;max-width:100%;display:flex;flex:0 0 auto;gap:6px;overflow-x:auto;padding:2px;scrollbar-width:thin;
  scroll-snap-type:x proximity;
}
.gallery-thumb{
  flex:0 0 78px;height:52px;padding:0;overflow:hidden;scroll-snap-align:center;
  border:1px solid #3f4133;border-radius:3px;background:#0a0b08;cursor:pointer;
}
.gallery-thumb[aria-current="true"]{border:2px solid var(--build)}
.gallery-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ref-dialog[data-plan] .gallery-thumb img{object-fit:contain;background:#fff}
.gallery-help{flex:0 0 auto;margin:7px 1px 0;color:#777462;font-family:var(--mono);font-size:8.5px;text-align:center}

/* ---------- responsive layout ---------- */
@media (min-width:900px){
  #sched{flex:0 0 var(--rail);width:var(--rail)}
  #app > header{left:var(--rail)}
}

@media (max-width:1400px) and (min-width:900px){
  :root{--rail:350px}
  #app > header .spec{display:none}
  #app > header{gap:7px}
  #app > header .mark{flex:0 0 auto;font-size:13px}
  #app > header .mark span{display:none}
}

@media (max-width:899px){
  #app{position:fixed;inset:0;display:flex;flex-direction:column}
  .gallery-head{padding:calc(8px + env(safe-area-inset-top)) calc(9px + env(safe-area-inset-right)) 8px calc(9px + env(safe-area-inset-left))}
  .gallery-footer{padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right));padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  #app > header{order:1;flex:0 0 auto;gap:7px;padding:calc(8px + env(safe-area-inset-top)) 10px 8px}
  #app > header .spec,#app > header .grow{display:none}
  #stage{order:2;flex:1 1 52dvh;min-height:34dvh}
  #sched{
    order:3;flex:0 0 min(39dvh,360px);height:auto;max-height:min(39dvh,360px);
    border-top:1px solid var(--rule);border-right:0;padding-bottom:env(safe-area-inset-bottom);
  }
  .ref-rail-intro{display:none}
  #app > header .tgl{min-height:44px}
  #views .view{min-height:44px}
  .plan-panel{padding:8px 10px 9px}
  .plan-main{height:118px}
  .plan-bar{margin-bottom:6px}
  .plan-actions{margin-top:6px}
  .plan-arrow{width:44px;height:44px}
  .plan-thumb{height:44px}
  .ref-directory{padding:9px 10px 10px}
  .ref-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:1px}
  .ref-card,.ref-card.featured-ref{grid-column:auto}
  .build-notes summary{min-height:44px;padding:0 10px}
  .scene-hint{top:8px;right:8px}
}

@media (max-width:720px){
  #app > header{flex-wrap:wrap}
  #app > header .mark{flex:1 1 auto;font-size:12.5px}
  #app > header .mark span{display:none}
  #app > header .spec,#app > header .grow{display:none}
  #app > header .tgl{flex:1 1 29%;min-width:0;min-height:44px;padding:6px 4px;font-size:8.5px}
  #views{left:7px;bottom:7px;max-width:calc(100% - 14px);gap:4px}
  #views{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #views::-webkit-scrollbar{display:none}
  #views .view{flex:0 0 auto;min-height:44px;padding:6px 8px;font-size:8.5px}
  .plan-arrow{width:44px;height:44px}
  .plan-thumb{height:44px}
  .build-notes summary{min-height:44px}
  .scene-ref{width:82px;padding:3px}
  .scene-ref img{width:74px;height:40px}
  .scene-ref span{font-size:7.5px;padding:4px 2px 1px}
  .scene-hint{font-size:7.5px;padding:5px 6px}
  .ref-dialog{
    width:100vw;height:100dvh;border:0;border-radius:0;margin:0;
  }
  .gallery-tools{gap:3px;padding:4px}
  .gallery-tool{padding-left:7px;padding-right:7px}
  .gallery-zoom-value{min-width:46px}
  .gallery-original{min-width:52px}
  .gallery-heading h2{font-size:13px}
  .gallery-close{width:44px;height:44px}
  .gallery-nav{width:46px;height:58px}
  .ref-dialog[data-plan] .gallery-nav{display:none}
  .gallery-prev{left:6px}.gallery-next{right:6px}
  .gallery-footer{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .gallery-thumb{flex-basis:68px;height:46px}
}

@media (max-width:420px){
  .scene-hint{display:none}
}

@media (max-height:650px) and (max-width:899px){
  #app > header{padding-top:6px;padding-bottom:6px}
  #app > header .tgl{min-height:44px}
  #sched{flex-basis:34dvh;max-height:34dvh}
  .plan-main{height:88px}
}

@media (prefers-reduced-motion:reduce){
  .scene-ref,.gallery-image{transition:none}
}

@supports not (background:color-mix(in srgb,#000 50%,transparent)){
  #app > header,#views .view{background:var(--surface)}
}

/* rotatable 3D preview inside the gallery (.glb entries) */
.gallery-model{position:absolute;inset:0;display:block;background:radial-gradient(ellipse at 50% 60%,#2a2d26 0%,#0f100c 75%)}
.gallery-model[hidden]{display:none}
.gallery-model-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.gallery-model-canvas:active{cursor:grabbing}
.gallery-model-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);margin:0;padding:6px 10px;
  border-radius:3px;background:rgba(17,18,13,.82);color:#d9d4bd;font-family:var(--mono);font-size:11px;
  letter-spacing:.04em;white-space:nowrap;pointer-events:none;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
.gallery-thumb.is-model{position:relative}
.gallery-thumb.is-model::after{content:"3D";position:absolute;right:4px;top:4px;font:700 9px/1 var(--disp);letter-spacing:.08em;
  padding:3px 4px;border-radius:2px;background:var(--build);color:#14150f}

/* per-image text (REFERENCE_IMAGES/<folder>/captions.json) */
.gallery-caption{
  flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  margin:0 0 8px; padding:8px 12px; border-left:2px solid var(--build); background:rgba(224,160,58,.10);
  color:#edead9; font-family:var(--mono); font-size:12.5px; line-height:1.55; letter-spacing:.01em; overflow-wrap:anywhere;
}
.gallery-caption[hidden]{display:none}
@media (max-width:720px){ .gallery-caption{font-size:11.5px; padding:7px 10px} }

/* ---------- phones: the 3D stage fills the screen; header and rail become drawers ---------- */
.drawer-tab,.drawer-close,.drawer-scrim{display:none}
@media (max-width:899px){
  #app{display:block}
  #stage{position:absolute;inset:0;height:100dvh;min-height:0;flex:none;order:0;padding:0}
  #app > header{
    position:absolute;top:0;left:0;right:0;z-index:40;order:0;
    padding:calc(10px + env(safe-area-inset-top)) 10px 12px;
    border-bottom:1px solid var(--rule);box-shadow:0 12px 30px rgba(0,0,0,.45);
    transform:translateY(-100%);transition:transform .28s ease;
  }
  body.top-open #app > header{transform:none}
  #app > header .drawer-tab{
    display:grid;position:absolute;left:50%;top:100%;transform:translateX(-50%);
    width:64px;height:36px;place-items:center;margin-top:8px;
    border:1px solid var(--rule);border-radius:6px;background:var(--ref-glass);color:var(--build);
    cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4);
  }
  #app > header .drawer-tab .ref-icon{width:20px;height:20px;transition:transform .2s}
  body.top-open #app > header .drawer-tab .ref-icon{transform:rotate(180deg)}
  #sched{
    position:absolute;left:0;right:0;bottom:0;top:auto;order:0;flex:none;z-index:40;
    height:min(86dvh,100%);max-height:none;border-top:1px solid var(--rule);border-right:0;
    box-shadow:0 -12px 30px rgba(0,0,0,.45);padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(100%);transition:transform .3s ease;
  }
  body.bottom-open #sched{transform:none}
  #sched .drawer-close{
    display:flex;position:sticky;top:0;z-index:5;align-items:center;justify-content:center;gap:8px;
    min-height:44px;border-bottom:1px solid var(--rule);background:var(--surface);color:var(--build);
    font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
  }
  #sched .drawer-close .ref-icon{width:18px;height:18px}
  .drawer-tab.bottom{
    display:grid;position:absolute;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));transform:translateX(-50%);
    z-index:36;width:64px;height:36px;place-items:center;
    border:1px solid var(--rule);border-radius:6px;background:var(--ref-glass);color:var(--build);
    cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4);
  }
  .drawer-tab.bottom .ref-icon{width:20px;height:20px;transform:rotate(180deg)}
  body.bottom-open .drawer-tab.bottom{display:none}
  .drawer-scrim{position:absolute;inset:0;z-index:35;background:rgba(0,0,0,.38)}
  body.top-open .drawer-scrim,body.bottom-open .drawer-scrim{display:block}
  #views{left:8px;right:8px;bottom:calc(54px + env(safe-area-inset-bottom));max-width:none}
  .scene-hint{top:calc(10px + env(safe-area-inset-top));right:8px}
  #refMarkers{pointer-events:none}
  #refMarkers .scene-ref{pointer-events:auto}
}