:root{
  color-scheme:dark;
  --bg:#090a09;
  --panel:#111310;
  --panel2:#151712;
  --line:#2d3129;
  --line2:#4a412e;
  --text:#ddd3bf;
  --muted:#9e947f;
  --gold:#d4ad59;
  --gold2:#f0d18d;
  --bad:#e07d73;
  --good:#8ca876
}
*{
  box-sizing:border-box
}
html,body{
  width:100%;
  height:100%;
  margin:0;
  overflow:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
.hidden{
  display:none!important
}
button,select,input{
  font:inherit
}
.v3dApp{
  height:100dvh;
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  grid-template-rows:58px minmax(0,1fr);
  grid-template-areas:"top top" "side view";
  background:#080908
}
.v3dTopbar{
  grid-area:top;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  background:rgba(14,16,13,.97);
  z-index:20
}
.v3dBrand{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:190px;
  color:var(--text);
  text-decoration:none
}
.v3dBrand img{
  width:39px;
  height:39px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid #3a3529
}
.v3dBrand span{
  display:grid;
  line-height:1.05
}
.v3dBrand b{
  color:var(--gold2);
  font-size:16px
}
.v3dBrand small{
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.09em
}
.v3dTopMain,.v3dTopView{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0
}
.v3dTopMain{
  flex:1
}
.v3dTopMain .v3dSelect{
  max-width:320px
}
.v3dTopView{
  margin-left:auto
}
.v3dBtn,.v3dSelect{
  min-height:34px;
  border:1px solid #373b33;
  border-radius:7px;
  background:#141613;
  color:#cfc4ae;
  padding:6px 9px
}
.v3dBtn{
  cursor:pointer;
  white-space:nowrap
}
.v3dBtn:hover,.v3dBtn.active{
  border-color:#826a34;
  background:#211b0f;
  color:#f4d995
}
.v3dBtn.primary{
  border-color:#7a622e;
  background:#241c0d;
  color:#ffd981
}
.v3dBtn.danger{
  border-color:#6c3733;
  color:#efa19a;
  background:#1a100f
}
.v3dBtn.icon{
  width:36px;
  padding:0;
  font-size:18px
}
.v3dBtn:disabled{
  opacity:.42;
  cursor:default
}
.v3dSelect{
  width:100%;
  outline:none;
  background-color:#111310
}
.v3dSelect:focus{
  border-color:#846b36;
  box-shadow:0 0 0 2px rgba(212,173,89,.08)
}
.v3dSidebar{
  grid-area:side;
  overflow:auto;
  overscroll-behavior:contain;
  padding:10px;
  border-right:1px solid var(--line);
  background:#0d0f0d;
  z-index:10;
  scrollbar-width:thin;
  scrollbar-color:#665630 #151515
}
.v3dPanel{
  margin-bottom:9px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(145deg,#121411,#0e100e)
}
.v3dPanel.compact{
  padding-bottom:8px
}
.v3dPanelTitle{
  margin-bottom:8px;
  color:var(--gold2);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}
.v3dButtonGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px
}
.v3dButtonGrid .v3dBtn{
  width:100%
}
.v3dCheck{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  color:#cec3ac;
  font-size:12.5px
}
.v3dCheck input[type=checkbox],.v3dLevelRow input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;
  width:15px;
  height:15px;
  min-width:15px;
  margin:0;
  border:1px solid #665b3b;
  border-radius:3px;
  background:#0a0c0a;
  box-shadow:inset 0 0 0 1px #151812;
  cursor:pointer
}
.v3dCheck input[type=checkbox]:checked,.v3dLevelRow input[type=checkbox]:checked{
  border-color:#d4ad59;
  background:#d4ad59;
  box-shadow:inset 0 0 0 3px #11140f
}
.v3dCheck input[type=checkbox]:focus-visible,.v3dLevelRow input[type=checkbox]:focus-visible{
  outline:2px solid #e8cb8b;
  outline-offset:2px
}
.v3dField{
  display:grid;
  gap:5px;
  margin-top:8px
}
.v3dField>span{
  color:#978b75;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.07em
}
.v3dField input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:20px;
  background:transparent;
  cursor:pointer
}
input[type=range]::-webkit-slider-runnable-track{
  height:5px;
  border-radius:3px;
  background:#2f3429;
  border:1px solid #3d4434
}
input[type=range]::-moz-range-track{
  height:5px;
  border-radius:3px;
  background:#2f3429;
  border:1px solid #3d4434
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  margin-top:-6px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#d8b464;
  border:1px solid #6d5626
}
input[type=range]::-moz-range-thumb{
  width:15px;
  height:15px;
  border:1px solid #6d5626;
  border-radius:50%;
  background:#d8b464
}
input[type=range]:focus-visible::-webkit-slider-thumb{
  outline:2px solid #e8cb8b;
  outline-offset:2px
}
.v3dHelp{
  display:inline-grid;
  place-items:center;
  width:16px;
  height:16px;
  border:1px solid #4a4336;
  border-radius:50%;
  font-size:10px;
  color:#c9b98f
}
.v3dHint{
  color:#bcb19a;
  font-size:12px;
  line-height:1.55
}
.v3dLevelList{
  display:grid;
  gap:5px
}
.v3dLevelRow{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:7px;
  align-items:center;
  padding:6px 7px;
  border:1px solid #2b2f28;
  border-radius:7px;
  background:#10120f
}
.v3dLevelRow button{
  border:0;
  background:none;
  color:#d0c4ab;
  text-align:left;
  cursor:pointer;
  padding:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.v3dLevelRow .v3dLevelRename{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border:1px solid #3b372b;
  border-radius:5px;
  color:#bda66e;
  text-align:center;
  font-size:14px;
  line-height:1
}
.v3dLevelRow .v3dLevelRename:hover,.v3dLevelRow .v3dLevelRename:focus-visible{
  border-color:#8b7139;
  background:#201b10;
  color:#f1d58f;
  outline:none
}
.v3dLevelRow.active{
  border-color:#715d32;
  background:#1b180f
}
.v3dLevelRow small{
  color:#746c5e
}
.v3dEmpty{
  padding:12px 8px;
  border:1px dashed #30332d;
  border-radius:8px;
  text-align:center;
  color:#7f7769;
  font-size:11px;
  line-height:1.5
}
.v3dActions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px
}
.v3dTotals{
  display:grid;
  gap:4px;
  max-height:230px;
  overflow:auto;
  padding-right:3px;
  scrollbar-width:thin;
  scrollbar-color:#665630 #151515
}
.v3dTotal{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:4px 0;
  border-bottom:1px solid #242722;
  font-size:11px
}
.v3dTotal b{
  color:#dfc680
}
.v3dViewportWrap{
  grid-area:view;
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:radial-gradient(circle at 50% 28%,#252a24 0,#111411 38%,#080908 100%)
}
.v3dViewport{
  position:absolute;
  inset:0;
  touch-action:none
}
.v3dViewport canvas{
  display:block;
  width:100%;
  height:100%;
  outline:none
}
.v3dOverlayCard{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:7;
  display:grid;
  gap:9px;
  min-width:240px;
  max-width:min(420px,80%);
  padding:16px;
  border:1px solid #49402d;
  border-radius:12px;
  background:rgba(12,14,12,.94);
  box-shadow:0 15px 50px rgba(0,0,0,.45);
  text-align:center;
  color:#c9bea8
}
.v3dOverlayCard b{
  color:var(--gold2)
}
.v3dOverlayCard span{
  font-size:12px;
  color:#938976
}
.v3dOverlayCard a{
  text-decoration:none
}
.v3dStatus{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:6;
  max-width:min(620px,calc(100% - 24px));
  padding:7px 9px;
  border:1px solid rgba(80,73,54,.55);
  border-radius:8px;
  background:rgba(9,11,9,.86);
  backdrop-filter:blur(5px);
  color:#cfc5ae;
  font-size:12px;
  pointer-events:none
}
.v3dSidebarToggle{
  display:none;
  position:absolute;
  left:10px;
  top:10px;
  z-index:12;
  width:40px;
  height:40px;
  border:1px solid #55482f;
  border-radius:9px;
  background:rgba(17,19,16,.92);
  color:#e4c881;
  font-size:20px
}
.v3dError{
  color:#ec968e
}
.v3dSupportGood{
  color:#9fbd89
}
.v3dSupportBad{
  color:#ef8d82
}
.v3dPieceMeta{
  display:grid;
  gap:4px;
  font-size:11px
}
.v3dPieceMeta b{
  color:#ebd29a
}
.v3dPieceMeta span{
  color:#968c79
}
@media(max-width:980px){
  .v3dApp{
    grid-template-columns:280px minmax(0,1fr)
  }
  .v3dBrand{
    min-width:150px
  }
  .v3dBrand small{
    display:none
  }
  .v3dTopMain .v3dBtn:not(.primary){
    display:none
  }
}
.v3dCompass{
  position:absolute;
  left:50%;
  top:10px;
  z-index:9;
  width:min(360px,calc(100% - 120px));
  height:44px;
  transform:translateX(-50%);
  pointer-events:none;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.65))
}
.v3dCompassTrack{
  position:relative;
  height:27px;
  overflow:hidden;
  border:1px solid rgba(111,94,54,.72);
  border-radius:7px;
  background:linear-gradient(180deg,rgba(12,14,12,.9),rgba(8,10,8,.74));
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)
}
.v3dCompassPoint{
  position:absolute;
  top:5px;
  transform:translateX(-50%);
  color:#aaa18e;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  transition:opacity .08s linear;
  white-space:nowrap
}
.v3dCompassPoint.cardinal{
  top:3px;
  color:#efd18c;
  font-size:13px;
  font-weight:900
}
.v3dCompassNeedle{
  position:absolute;
  left:50%;
  top:0;
  width:1px;
  height:27px;
  background:#f0c96d;
  box-shadow:0 0 6px rgba(240,201,109,.6)
}
.v3dCompassNeedle:after{
  content:'';
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:6px solid #f0c96d
}
.v3dCompass small{
  display:block;
  margin-top:2px;
  text-align:center;
  color:#b9aa8c;
  font-size:9px;
  font-variant-numeric:tabular-nums
}
@media(max-width:760px){
  .v3dApp{
    display:block;
    height:100dvh
  }
  .v3dTopbar{
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:54px;
    padding-left:58px;
    background:rgba(12,14,12,.94)
  }
  .v3dBrand{
    display:none
  }
  .v3dTopMain{
    min-width:0
  }
  .v3dTopMain .v3dSelect{
    min-width:0;
    max-width:none
  }
  .v3dTopMain .v3dBtn{
    display:none!important
  }
  .v3dTopView .v3dBtn:not(#orbitBtn):not(#editBtn){
    display:none
  }
  .v3dSidebar{
    position:absolute;
    left:0;
    top:54px;
    bottom:0;
    width:min(310px,88vw);
    z-index:15;
    transform:translateX(-105%);
    transition:transform .18s ease;
    box-shadow:15px 0 40px rgba(0,0,0,.35)
  }
  .v3dSidebar.open{
    transform:translateX(0)
  }
  .v3dViewportWrap{
    position:absolute;
    inset:0
  }
  .v3dSidebarToggle{
    display:block;
    top:7px
  }
  .v3dStatus{
    bottom:8px
  }
}
.v3dTotal.v3dTotalWarn{
  color:#f0a3a3
}
.v3dTotal.v3dTotalWarn b{
  color:#ff8f8f
}
.v3dLayerRow{
  display:grid;
  gap:2px;
  padding:6px 8px;
  border:1px solid #2c3128;
  border-radius:8px;
  background:#0f120f
}
.v3dLayerRow .v3dCheck{
  margin-top:4px
}
/* the tips panel should read like every other panel, just legible */
.v3dPanel.compact .v3dHint{
  color:#c8bda6
}
.v3dPanel.compact .v3dHint b{
  color:#e3c98d;
  font-weight:700
}
.v3dPanel.compact .v3dField{
  margin-top:10px
}
html,body,select,option,optgroup{
  color-scheme:dark
}
select.v3dSelect{
  background-color:#141613;
  color:#e2d8c2
}
select.v3dSelect option,select.v3dSelect optgroup{
  background-color:#141613;
  color:#e2d8c2
}
select.v3dSelect optgroup{
  color:#e3c98d;
  font-style:normal;
  font-weight:700
}
select.v3dSelect option{
  padding:4px 6px
}
.v3dSelectSource{
  display:none!important
}
.v3dPicker{
  position:relative;
  width:100%
}
.v3dPickerTrigger{
  width:100%;
  min-height:34px;
  padding:6px 32px 6px 9px;
  border:1px solid #373b33;
  border-radius:7px;
  background:#141613;
  color:#e2d8c2;
  text-align:left;
  cursor:pointer;
  position:relative
}
.v3dPickerTrigger:after{
  content:'▾';
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  color:#c7a760
}
.v3dPickerTrigger:hover,.v3dPickerTrigger:focus-visible{
  border-color:#846b36;
  outline:none
}
.v3dPickerMenu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 4px);
  z-index:40;
  max-height:310px;
  overflow:auto;
  padding:5px;
  border:1px solid #4b432f;
  border-radius:8px;
  background:#10120f;
  box-shadow:0 12px 28px rgba(0,0,0,.55);
  scrollbar-width:thin;
  scrollbar-color:#665630 #151515
}
.v3dPickerGroup{
  padding:7px 8px 4px;
  color:#e3c98d;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}
.v3dPickerOption{
  display:block;
  width:100%;
  padding:7px 8px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#d9cfbb;
  text-align:left;
  cursor:pointer
}
.v3dPickerOption:hover,.v3dPickerOption.active{
  background:#282419;
  color:#f3d995
}
.v3dPickerOption:disabled{
  position:relative;
  opacity:.34;
  background:#0d0f0d;
  color:#777268;
  cursor:not-allowed
}
.v3dPickerOption:disabled:hover{
  background:#0d0f0d;
  color:#777268;
  cursor:not-allowed
}
.v3dPickerOption:disabled:hover::after{
  content:'⊘';
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  color:#d75d55;
  font-size:17px;
  font-weight:900;
  line-height:1
}
.v3dInspectBtn,.v3dEraseBtn{
  width:100%;
  margin-top:9px
}
.v3dInspectBtn.active{
  border-color:#4d91d1;
  background:#11253a;
  color:#b9ddff
}
.v3dHotkey{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:18px;
  margin-left:5px;
  padding:0 4px;
  border:1px solid currentColor;
  border-radius:4px;
  font-size:10px;
  font-weight:800;
  opacity:.8
}
.v3dEraseBtn.active{
  background:#5d2a26;
  border-color:#b45e55;
  color:#ffd9d4
}
.v3dDimmed{
  opacity:.45
}
.v3dSidebar::-webkit-scrollbar,.v3dTotals::-webkit-scrollbar,.v3dPickerMenu::-webkit-scrollbar{
  width:8px;
  height:8px
}
.v3dSidebar::-webkit-scrollbar-track,.v3dTotals::-webkit-scrollbar-track,.v3dPickerMenu::-webkit-scrollbar-track{
  background:#151515
}
.v3dSidebar::-webkit-scrollbar-thumb,.v3dTotals::-webkit-scrollbar-thumb,.v3dPickerMenu::-webkit-scrollbar-thumb{
  background:#665630;
  border-radius:999px
}
.v3dLevelActions{
  display:flex;
  gap:6px;
  margin-top:8px
}
.v3dLevelActions .v3dBtn{
  flex:1
}
.v3dLevelHint{
  margin-top:8px;
  color:#948a77
}
.v3dTopMain>.v3dPicker{
  max-width:320px;
  flex:1;
  min-width:150px
}
/* Beam orientation wheel. It opens at the cursor while R is held. */
.v3dBeamRadial{
  position:absolute;
  z-index:30;
  width:286px;
  height:286px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.5))
}
.v3dBeamRadialRing{
  position:absolute;
  inset:38px;
  border:1px solid #796437;
  border-radius:50%;
  background:radial-gradient(circle,rgba(13,15,12,.96) 0 30%,rgba(18,20,16,.94) 31% 69%,rgba(8,10,8,.88) 70%);
  box-shadow:inset 0 0 0 1px rgba(231,198,126,.06)
}
.v3dBeamRadialCenter{
  position:absolute;
  left:50%;
  top:50%;
  width:82px;
  height:82px;
  transform:translate(-50%,-50%);
  display:grid;
  place-content:center;
  text-align:center;
  border:1px solid #65552f;
  border-radius:50%;
  background:#11130f;
  color:#f0d18d
}
.v3dBeamRadialCenter b{
  font-size:13px
}
.v3dBeamRadialCenter small{
  margin-top:2px;
  color:#958a74;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.07em
}
.v3dBeamRadialOption{
  position:absolute;
  display:grid;
  place-items:center;
  min-width:86px;
  min-height:34px;
  padding:6px 9px;
  border:1px solid #403b2d;
  border-radius:8px;
  background:rgba(18,20,16,.96);
  color:#cfc4ae;
  font-size:11px;
  font-weight:650;
  text-align:center;
  transition:transform .08s ease,border-color .08s ease,background .08s ease,color .08s ease
}
.v3dBeamRadialOption.active{
  border-color:#d4ad59;
  background:#332711;
  color:#ffe3a1;
  transform:scale(1.08)
}
.v3dBeamRadialOption.modeVertical{
  left:50%;
  top:8px;
  transform:translateX(-50%)
}
.v3dBeamRadialOption.modeVertical.active{
  transform:translateX(-50%) scale(1.08)
}
.v3dBeamRadialOption.modeHorizontal{
  left:12px;
  bottom:38px
}
.v3dBeamRadialOption.modeDiagonal{
  right:12px;
  bottom:38px
}
@media(max-width:760px){
  .v3dBeamRadial{
    width:250px;
    height:250px
  }
  .v3dBeamRadialOption{
    min-width:76px;
    font-size:10px
  }
  .v3dBeamRadialRing{
    inset:34px
  }
}
/* Planner confirmation stays inside the app instead of using the browser dialog. */
.v3dModal{
  position:absolute;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(4,5,4,.68);
  backdrop-filter:blur(4px)
}
.v3dModalCard{
  width:min(420px,calc(100% - 28px));
  padding:18px;
  border:1px solid #705b30;
  border-radius:12px;
  background:linear-gradient(145deg,#171913,#0e100e);
  box-shadow:0 24px 70px rgba(0,0,0,.62)
}
.v3dModalTitle{
  color:#f0d18d;
  font-size:16px;
  font-weight:800
}
.v3dModalText{
  margin-top:8px;
  color:#c7bda8;
  font-size:13px;
  line-height:1.45
}
.v3dModalField{
  display:block;
  margin-top:14px;
  color:#9e927b;
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase
}
.v3dTextInput{
  box-sizing:border-box;
  width:100%;
  margin-top:6px;
  padding:10px 11px;
  border:1px solid #474234;
  border-radius:7px;
  background:#090b09;
  color:#eee2c9;
  font:inherit;
  outline:none
}
.v3dTextInput:focus{
  border-color:#a58643;
  box-shadow:0 0 0 2px rgba(209,168,79,.12)
}
.v3dModalActions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px
}
/* Mobile devices stop here instead of starting the WebGL editor. */
.v3dMobileBlock{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:20px;
  background:radial-gradient(circle at 50% 22%,#252a24 0,#111411 38%,#080908 100%);
  overflow:auto
}
.v3dMobileBlockCard{
  width:min(520px,100%);
  padding:26px 22px;
  border:1px solid #6b5730;
  border-radius:16px;
  background:linear-gradient(145deg,#171913,#0d0f0d);
  box-shadow:0 28px 90px rgba(0,0,0,.64);
  text-align:center
}
.v3dMobileBlockLogo{
  width:62px;
  height:62px;
  border-radius:12px;
  border:1px solid #695632;
  object-fit:cover;
  box-shadow:0 8px 24px rgba(0,0,0,.35)
}
.v3dMobileBlockEyebrow{
  margin-top:12px;
  color:#b89a5a;
  font-size:11px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase
}
.v3dMobileBlockCard h1{
  margin:7px 0 10px;
  color:#f0d18d;
  font-size:clamp(22px,6vw,30px);
  line-height:1.1
}
.v3dMobileBlockCard p{
  margin:8px auto;
  max-width:440px;
  color:#c6bca7;
  font-size:14px;
  line-height:1.5
}
.v3dMobileBlockActions{
  display:flex;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
  margin-top:20px
}
.v3dMobileBlockActions .v3dBtn{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none
}
.v3dInspectDetails{
  display:grid;
  gap:7px;
  margin-top:13px
}
.v3dInspectRow{
  display:grid;
  grid-template-columns:minmax(80px,.7fr) minmax(0,1.3fr);
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid #292c25;
  font-size:12px
}
.v3dInspectRow span{
  color:#8f8675
}
.v3dInspectRow b{
  color:#e1d4bc;
  text-align:right;
  font-weight:650;
  overflow-wrap:anywhere
}
/* Comments are DOM labels projected over their saved anchor points in the 3D scene. */
.v3dCommentLayer{
  position:absolute;
  inset:0;
  z-index:8;
  overflow:hidden;
  pointer-events:none
}
.v3dCommentTag{
  position:absolute;
  left:0;
  top:0;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:220px;
  padding:5px 8px 5px 6px;
  border:1px solid #8a6c30;
  border-radius:8px;
  background:rgba(17,19,15,.94);
  box-shadow:0 5px 16px rgba(0,0,0,.55);
  color:#e8d5aa;
  font-size:11px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  pointer-events:auto;
  transform:translate(-50%,-115%)
}
.v3dCommentTag:hover,.v3dCommentTag:focus-visible{
  border-color:#e0b85b;
  background:#211b0f;
  color:#ffe0a0;
  outline:none
}
.v3dCommentPin{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#7f632a;
  color:#fff1c3;
  font-size:10px;
  font-weight:900
}
.v3dCommentText{
  overflow:hidden;
  text-overflow:ellipsis
}
.v3dCommentInput{
  min-height:112px;
  resize:vertical;
  line-height:1.45
}
.v3dEditKeyGuide{
  position:absolute;
  left:50%;
  bottom:12px;
  z-index:6;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 14px;
  max-width:min(920px,calc(100% - 40px));
  padding:8px 12px;
  border:1px solid rgba(119,96,47,.72);
  border-radius:9px;
  background:rgba(9,11,9,.92);
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  backdrop-filter:blur(5px);
  transform:translateX(-50%);
  color:#cfc5ae;
  font-size:11px;
  line-height:1.35;
  pointer-events:none
}
.v3dEditKeyGuide b{
  color:#e7c977;
  font-weight:800
}
.v3dEditKeyGuide.hidden{
  display:none
}
.v3dEditKeyGuide:not(.hidden)~.v3dStatus{
  bottom:52px
}
@media(max-width:1100px){
  .v3dEditKeyGuide{
    gap:3px 9px;
    max-width:calc(100% - 24px);
    font-size:10px
  }
  .v3dEditKeyGuide:not(.hidden)~.v3dStatus{
    bottom:70px
  }
}
.v3dPieceVariantOption{
  margin:0;
  min-width:92px;
  max-width:128px;
  white-space:normal;
  line-height:1.12;
  text-wrap:balance;
  transform:translate(-50%,-50%)
}
.v3dPieceVariantOption.active{
  transform:translate(-50%,-50%) scale(1.08)
}
.v3dPieceVariantRadial{
  width:350px;
  height:350px
}
.v3dPieceVariantRadial .v3dBeamRadialRing{
  inset:48px
}
/* Build material totals */
.v3dTotalsHeading{
  margin:9px 0 1px;
  padding-top:8px;
  border-top:1px solid #3b3324;
  color:#f0cf7c;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}
.v3dMaterialTotal b{
  color:#ffd166
}
.v3dTotalsNote{
  color:#8e856f;
  font-size:9px;
  line-height:1.45;
  padding:5px 0 1px
}
.v3dTotalsNoteWarn{
  color:#c99772
}
/* Grid sizing and Hold-R controls */
.v3dGridSizeFields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}
.v3dInput{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.13);
  border-radius:8px;
  background:rgba(8,13,19,.84);
  color:inherit;
  padding:8px 9px;
  font:inherit;
  outline:none
}
.v3dInput:focus{
  border-color:rgba(255,255,255,.34);
  box-shadow:0 0 0 2px rgba(255,255,255,.06)
}
@media(max-width:700px){
  .v3dGridSizeFields{
    grid-template-columns:1fr
  }
}
/* Compact ICARUS-style selector with larger Hold-R wheels for set pieces. */
.v3dInlineHint{
  margin-left:6px;
  color:#9d927d;
  font-size:9px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em
}
.v3dPieceVariantRadial.v3dPieceVariantRadialMedium{
  width:410px;
  height:410px
}
.v3dPieceVariantRadial.v3dPieceVariantRadialLarge{
  width:560px;
  height:560px
}
.v3dPieceVariantRadial.v3dPieceVariantRadialMedium .v3dBeamRadialRing{
  inset:66px
}
.v3dPieceVariantRadial.v3dPieceVariantRadialLarge .v3dBeamRadialRing{
  inset:78px
}
.v3dPieceVariantRadialMedium .v3dPieceVariantOption{
  min-width:98px;
  max-width:124px;
  padding:5px 7px;
  font-size:10px
}
.v3dPieceVariantRadialLarge .v3dPieceVariantOption{
  min-width:96px;
  max-width:126px;
  min-height:32px;
  padding:5px 7px;
  font-size:9.5px;
  line-height:1.08;
  overflow-wrap:anywhere
}
@media(max-width:980px){
  .v3dPieceVariantRadialLarge .v3dPieceVariantOption{
    min-width:78px;
    max-width:104px;
    font-size:9px
  }
}
/* Plan management and safer edit-camera capture. */
.v3dTopMain>.v3dPicker:has(select#planActions){
  max-width:210px;
  flex:0 1 210px;
  min-width:160px
}
.v3dPlanActions{
  max-width:210px
}
.v3dOverlayActions{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap
}
.v3dOverlayActions .v3dBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none
}
.v3dModalGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:5px
}
.v3dModalGrid .v3dField{
  margin-top:8px
}
.v3dMouseCaptureHint{
  position:absolute;
  left:50%;
  top:62px;
  z-index:35;
  transform:translateX(-50%);
  padding:7px 10px;
  border:1px solid #8b7139;
  border-radius:8px;
  background:rgba(13,15,12,.95);
  box-shadow:0 8px 24px rgba(0,0,0,.38);
  color:#f0d18d;
  font-size:11px;
  pointer-events:none
}
.v3dViewport.mouseCaptured{
  cursor:none
}
@media(max-width:1100px){
  .v3dTopMain>.v3dPicker:has(select#planActions){
    max-width:185px;
    min-width:145px
  }
  .v3dModalGrid{
    grid-template-columns:1fr
  }
}
/* Use clean text inputs so Chromium/Opera cannot paint white native number spinners. */
.v3dInput[type=number]{
  appearance:textfield;
  -moz-appearance:textfield
}
.v3dInput[type=number]::-webkit-inner-spin-button,.v3dInput[type=number]::-webkit-outer-spin-button{
  -webkit-appearance:none!important;
  appearance:none!important;
  margin:0!important;
  display:none!important
}
.v3dInput[inputmode=numeric]{
  background-image:none!important
}
/* Hide the Windows/Opera native white select-arrow button. */
select.v3dSelect{
  -webkit-appearance:none!important;
  appearance:none!important;
  padding-right:30px!important;
  background-image:linear-gradient(45deg,transparent 50%,#c7a760 50%),linear-gradient(135deg,#c7a760 50%,transparent 50%)!important;
  background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%!important;
  background-size:5px 5px,5px 5px!important;
  background-repeat:no-repeat!important
}
/* Checklist export and startup messages. */
.v3dChecklistExportPanel .v3dBtn{
  width:100%
}
.v3dChecklistExportPanel .v3dBtn + .v3dBtn{
  margin-top:8px
}
.v3dChecklistExportHint{
  margin-top:7px
}
.v3dBootTrace{
  max-width:720px;
  overflow-wrap:anywhere
}
.v3dBtn:focus-visible,
.v3dSelect:focus-visible,
.v3dBrand:focus-visible,
.v3dSidebarToggle:focus-visible,
a.v3dBtn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }
}

.v3dPlanHealth {
    margin-bottom: 10px;
    padding: 10px 11px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(10, 10, 10, 0.45);
}

.v3dPlanHealth > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.v3dPlanHealth span {
    color: #d9c7a3;
    font-weight: 700;
}

.v3dPlanHealth small {
    display: block;
    margin-top: 5px;
    color: #9d9588;
    line-height: 1.35;
}

.v3dPlanHealth.good {
    border-color: rgba(79, 132, 86, 0.45);
}

.v3dPlanHealth.warn {
    border-color: rgba(195, 145, 58, 0.5);
}

/* 1.8 planner polish: keep the canvas primary and move file/admin actions behind one Plan menu. */
.v3dTopMainCompact{
  overflow:visible
}
.v3dTopMainCompact>#buildSelect,
.v3dTopMainCompact>.v3dPicker[data-select-id="buildSelect"]{
  min-width:190px;
  max-width:300px
}
.v3dHistoryButtons{
  display:flex;
  gap:5px
}
.v3dPlanMenu{
  position:relative
}
.v3dPlanMenu>summary{
  list-style:none;
  display:flex;
  align-items:center;
  user-select:none
}
.v3dPlanMenu>summary::-webkit-details-marker{
  display:none
}
.v3dPlanMenu[open]>summary{
  border-color:#826a34;
  background:#211b0f;
  color:#f4d995
}
.v3dPlanMenuPanel{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:80;
  width:250px;
  display:grid;
  gap:7px;
  padding:10px;
  border:1px solid #494230;
  border-radius:10px;
  background:#10120f;
  box-shadow:0 18px 45px rgba(0,0,0,.46)
}
.v3dPlanMenuPanel .v3dBtn,
.v3dPlanMenuPanel .v3dPicker{
  width:100%
}
.v3dPanelFold{
  padding:0;
  overflow:clip
}
.v3dPanelFold>.v3dPanelTitle{
  position:relative;
  margin:0;
  padding:10px 30px 10px 10px;
  cursor:pointer;
  user-select:none
}
.v3dPanelFold>.v3dPanelTitle::after{
  content:'›';
  position:absolute;
  right:12px;
  top:8px;
  font-size:18px;
  line-height:1;
  transform:rotate(90deg);
  transition:transform .16s ease
}
.v3dPanelFold:not([open])>.v3dPanelTitle::after{
  transform:rotate(0deg)
}
.v3dPanelFold>*:not(summary){
  margin-left:10px;
  margin-right:10px
}
.v3dPanelFold>*:last-child{
  margin-bottom:10px
}
.v3dPanelFold>.v3dButtonGrid{
  margin-top:1px
}
@media (max-width:1180px){
  .v3dBrand{
    min-width:148px
  }
  .v3dBrand small{
    display:none
  }
  .v3dHistoryButtons .v3dBtn{
    font-size:0;
    width:36px
  }
  .v3dHistoryButtons .v3dBtn::first-letter{
    font-size:16px
  }
  .v3dTopMainCompact>#buildSelect,
  .v3dTopMainCompact>.v3dPicker[data-select-id="buildSelect"]{
    min-width:150px
  }
}
.v3dMaterialChoice{
  position:relative;
  padding-left:31px!important
}
.v3dMaterialChoice:before{
  content:'';
  position:absolute;
  left:9px;
  top:50%;
  width:13px;
  height:13px;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.28);
  border-radius:3px;
  background:var(--v3d-material,#8d805f);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)
}

.v3dBrightnessField{margin-top:8px}
.v3dBrightnessField>span{display:flex;justify-content:space-between;gap:8px}
.v3dBrightnessField>span b{color:#e3c98d;font-size:10px}

.v3dFieldNote{
  display:block;
  margin-top:4px;
  color:#8f9489;
  font-size:11px;
  line-height:1.3;
}


/* Power / water network planner ------------------------------------------------ */
.v3dUtilityToolGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:10px
}
.v3dUtilityToolGrid .v3dBtn{width:100%}
.v3dUtilityToolGrid #utilityStyleBtn{grid-column:1/-1}
.v3dUtilityHint{margin-top:8px}
.v3dUtilitySectionLabel{
  margin-top:12px;
  color:#b6a47e;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}
.v3dUtilitySummary{
  display:grid;
  gap:7px;
  margin-top:6px
}
.v3dUtilitySummaryCard{
  padding:9px;
  border:1px solid #2d332c;
  border-radius:9px;
  background:linear-gradient(180deg,#0e110e,#0a0c0a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  font-size:11px
}
.v3dUtilitySummaryEmpty{color:#8f988d}
.v3dUtilitySummaryHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px
}
.v3dUtilitySummaryHead b{color:var(--gold2)}
.v3dUtilityStatus{
  padding:2px 6px;
  border:1px solid #394039;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  white-space:nowrap
}
.v3dUtilityStatus.ok{color:#a8c58f;border-color:#40523a;background:#111a10}
.v3dUtilityStatus.bad{color:#efa19a;border-color:#5b3834;background:#1b1110}
.v3dUtilitySummaryMeta{
  margin-top:3px;
  color:#7f887e;
  font-size:10px
}
.v3dUtilitySummaryMetrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  margin-top:8px
}
.v3dUtilitySummaryMetrics span{
  min-width:0;
  padding:6px;
  border:1px solid #252b25;
  border-radius:7px;
  background:#0a0d0a
}
.v3dUtilitySummaryMetrics small,
.v3dUtilitySummaryMetrics em{
  display:block;
  color:#687168;
  font-size:8px;
  font-style:normal;
  line-height:1.2
}
.v3dUtilitySummaryMetrics strong{
  display:block;
  margin:2px 0;
  overflow:hidden;
  color:#d7dfd5;
  font-size:11px;
  text-overflow:ellipsis
}
.v3dUtilitySelected{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #30352d
}
.v3dUtilitySelectedTitle{
  color:var(--gold2);
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase
}
.v3dUtilityMetricGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 7px
}
.v3dUtilityMetricWide{grid-column:1/-1}
.v3dUtilityConnections{
  display:grid;
  gap:5px;
  margin-top:9px
}
.v3dUtilityConnectionRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  align-items:center;
  padding:6px 7px;
  border:1px solid #2b2f28;
  border-radius:7px;
  background:#10120f;
  font-size:11px
}
.v3dUtilityConnectionRow button{
  min-height:26px;
  padding:3px 7px
}
.v3dUtilityConnectionPending{
  border-color:#8f7338!important;
  box-shadow:0 0 0 2px rgba(212,173,89,.12)
}
.v3dTopView #powerBtn.active{border-color:#b8862f;background:#2a200f;color:#ffd77a}
.v3dTopView #waterBtn.active{border-color:#4c8da5;background:#10232a;color:#a9e7ff}
@media (max-width:1180px){
  .v3dTopView #powerBtn,.v3dTopView #waterBtn{padding-inline:7px}
}

.v3dUtilityRateNote{
  margin-top:7px;
  padding:7px 8px;
  border-left:2px solid #66552f;
  background:#12130f;
  border-radius:0 6px 6px 0
}


.v3dFlowMeterReadout{
  margin-top:10px;
  padding:9px;
  border:1px solid #31543b;
  border-radius:8px;
  background:linear-gradient(180deg,#08110b,#050b07);
  box-shadow:inset 0 0 18px rgba(77,145,91,.08);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
.v3dFlowMeterLabel{
  margin-bottom:7px;
  color:#79a985;
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase
}
.v3dFlowMeterRow + .v3dFlowMeterRow{
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid #1d3022
}
.v3dFlowMeterHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#b7d9bf;
  font-size:10px
}
.v3dFlowMeterHead .ok{color:#a9d9b3}
.v3dFlowMeterHead .bad{color:#d98f87}
.v3dFlowMeterStats{
  display:grid;
  gap:2px;
  margin-top:4px;
  color:#7fa289;
  font-size:9px;
  line-height:1.3
}

/* Favorites and active-piece visibility. */
.v3dFavoriteSelectRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px;
  gap:6px;
  align-items:stretch
}
.v3dFavoriteSelectRow>.v3dPicker{min-width:0;width:100%}
.v3dFavoriteToggle{
  width:38px;
  min-width:38px;
  min-height:34px;
  padding:0;
  border:1px solid #494234;
  border-radius:7px;
  background:#141613;
  color:#b8aa8f;
  font-size:20px;
  line-height:1;
  cursor:pointer
}
.v3dFavoriteToggle:hover,.v3dFavoriteToggle.active{
  border-color:#8c7138;
  background:#241d0e;
  color:#ffd87c
}
.v3dFavoriteBar{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:6px
}
.v3dFavoriteBar:empty{display:none}
.v3dFavoriteChip{
  min-height:28px;
  max-width:100%;
  padding:4px 8px;
  border:1px solid #3a372f;
  border-radius:999px;
  background:#10120f;
  color:#c9bea9;
  font-size:10px;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.v3dFavoriteChip:hover,.v3dFavoriteChip.active{
  border-color:#80662e;
  color:#f1d18a;
  background:#1f190d
}
.v3dFavoriteEmpty{
  color:#756f63;
  font-size:10px;
  line-height:1.35
}
.v3dActiveBrushBadge{
  position:absolute;
  left:12px;
  top:12px;
  z-index:32;
  max-width:min(520px,calc(100% - 24px));
  padding:7px 10px;
  border:1px solid #4f4632;
  border-radius:8px;
  background:rgba(12,14,12,.92);
  box-shadow:0 7px 22px rgba(0,0,0,.38);
  color:#d8c8a8;
  font-size:11px;
  font-weight:750;
  letter-spacing:.02em;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.v3dActiveBrushBadge[data-mode="power"]{border-color:#8d6d2c;color:#f3d27e}
.v3dActiveBrushBadge[data-mode="water"]{border-color:#3d7185;color:#a9e5f8}
.v3dActiveBrushBadge[data-mode="build"]{border-color:#665633;color:#e7cb8b}
.v3dActiveBrushBadge[data-mode="inspect"],.v3dActiveBrushBadge[data-mode="view"]{color:#aaa394}
@media(max-width:820px){
  .v3dActiveBrushBadge{top:60px;left:10px;max-width:calc(100% - 20px)}
}

/* Compact permanent device tags are intentionally smaller than the old prototype labels. */
.v3dUtilityNameNote{color:#8f846e;font-size:10px}

.v3dBrand img,.v3dMobileBlockLogo{image-rendering:auto!important;object-fit:contain!important;background:#050606!important;}


/* Walk Mode keeps the normal planner layout but makes the active camera mode obvious. */
.v3dTopView #walkBtn.active,
.v3dTopView #walkBtn[aria-pressed="true"]{
  border-color:#8a7440!important;
  background:#292214!important;
  color:#f3d995!important;
  box-shadow:inset 0 0 0 1px rgba(243,217,149,.24),0 0 16px rgba(138,116,64,.20)!important;
  outline:1px solid rgba(243,217,149,.22)!important;
  outline-offset:1px!important
}
.v3dViewport.walkActive{
  box-shadow:inset 0 0 0 1px rgba(138,116,64,.24)
}
.v3dViewport.walkActive canvas{
  cursor:crosshair
}
.v3dActiveBrushBadge[data-mode="walk"]{
  border-color:#5b6744;
  color:#cbd9ae
}
.v3dViewport.mouseCaptured canvas{
  cursor:none
}