html,body{width:100%;height:100%;overflow:hidden}
/* Project buttons follow selected red volumes as the camera orbits. */
#projectMarkers{position:absolute;inset:0;z-index:9;pointer-events:none}
.project-marker{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;border:0;padding:0;background:transparent;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;color:#fff;touch-action:manipulation}
.project-marker[hidden]{display:none}
.project-marker-number{width:29px;height:29px;display:grid;place-items:center;border:1px solid #ff6b74;background:#aa0e1de6;box-shadow:0 0 24px #ff243035;font-size:10px;letter-spacing:.04em;transition:background .2s,transform .2s}
.project-marker-label{position:absolute;left:calc(50% + var(--label-offset,0px));bottom:50px;transform:translateX(-50%) translateY(5px);width:max-content;max-width:240px;padding:12px 15px;border:1px solid #ff3b4760;background:#100c10ed;color:#f7f3f3;font-size:11px;line-height:1.3;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:.2s}
.project-marker:hover .project-marker-number,.project-marker:focus-visible .project-marker-number{background:#ee2839;transform:scale(1.14)}
.project-marker:hover .project-marker-label,.project-marker:focus-visible .project-marker-label{opacity:1;visibility:visible;transform:translateX(-50%)}
.project-marker:focus-visible{outline:1px solid #fff;outline-offset:2px}
.project-key{display:block;color:#b9b5b5;margin-bottom:12px;letter-spacing:.12em;font-size:9px}
.project-key::before,.red-square{content:"";display:inline-block;width:6px;height:6px;background:#ff2430;margin-right:8px;box-shadow:0 0 10px #ff243050}
.home-project-link{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;margin-top:25px;color:#b2b4b8;min-height:36px}
.home-project-link .red-square{margin:0}.home-project-link>span:last-child{margin-left:12px;color:#ff4a55}.home-project-link:hover{color:#fff}
@media(max-width:800px){.home-project-link{margin-top:15px}.project-marker-label{max-width:190px;font-size:10px}.project-marker-number{width:27px;height:27px}}
@media(prefers-reduced-motion:reduce){.project-marker *{transition:none}}
#environment{position:fixed;inset:0;width:100vw;height:100vh;height:100svh;height:100dvh;overflow:hidden;background:radial-gradient(circle at 60% 42%,rgba(120,0,0,.08),transparent 32%),linear-gradient(180deg,#0a0b0e,#07080a)}
#environment::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(circle at 50% 45%,transparent 35%,rgba(7,8,10,.16) 72%,rgba(7,8,10,.55) 100%),linear-gradient(180deg,rgba(0,0,0,.15),transparent 18%,transparent 78%,rgba(0,0,0,.30))}
#scene{position:absolute;inset:0;z-index:1;touch-action:none;pointer-events:auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#scene canvas{display:block;width:100%;height:100%;touch-action:none!important;pointer-events:auto!important}
.hero-copy{pointer-events:none;position:absolute;z-index:8;left:max(24px,calc(4.6vw + env(safe-area-inset-left)));bottom:max(32px,calc(5vh + env(safe-area-inset-bottom)));width:min(520px,42vw)}
.hero-copy .eyebrow{color:#8a8f97;font-size:9px;letter-spacing:.30em;text-transform:uppercase;margin-bottom:15px}
.hero-copy h1{margin:0;font-size:clamp(38px,4.8vw,78px);line-height:.94;letter-spacing:-.045em;font-weight:280}
.hero-copy h1 span{display:block;color:#777c84}
.hero-copy p{max-width:430px;margin:17px 0 0;color:#90959c;line-height:1.6;font-size:12px}
.helper{position:absolute;z-index:8;right:max(22px,calc(2.8vw + env(safe-area-inset-right)));bottom:max(26px,calc(3.2vh + env(safe-area-inset-bottom)));color:#6d7279;font-size:8px;letter-spacing:.22em;text-transform:uppercase;pointer-events:none}
/* PARAMETERS MOVED TO RIGHT BOTTOM */
.control-shell{position:absolute;z-index:20;right:max(20px,calc(2.8vw + env(safe-area-inset-right)));bottom:max(72px,calc(8vh + env(safe-area-inset-bottom)));width:min(360px,calc(100vw - 40px));display:flex;flex-direction:column;align-items:flex-end}
.control-trigger{min-width:148px;min-height:44px;padding:0 15px;border:1px solid rgba(255,255,255,.15);background:rgba(8,10,12,.18);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.trigger-icon{width:16px;height:16px;position:relative}.trigger-icon::before,.trigger-icon::after{content:"";position:absolute;left:2px;right:2px;top:7px;height:1px;background:#d2d4d7;transition:.22s}.trigger-icon::after{transform:rotate(90deg)}.control-shell.open .trigger-icon::after{transform:rotate(0)}
.control-panel{position:absolute;right:0;bottom:52px;width:100%;padding:17px;border:1px solid rgba(255,255,255,.12);background:rgba(8,10,12,.20);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:.22s}
.control-shell.open .control-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.panel-head{display:flex;justify-content:space-between;gap:16px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line-soft)}
.panel-kicker{color:#747981;font-size:8px;letter-spacing:.28em;text-transform:uppercase}.panel-title{margin-top:5px;font-size:14px}.live{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 12px rgba(255,32,40,.85)}
.controls{display:grid;gap:12px}.control{display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:center}.control label{color:#969aa1;font-size:9px;letter-spacing:.13em;text-transform:uppercase}.range-wrap{min-width:0;height:26px;display:flex;align-items:center}
input[type="range"]{--pct:50%;appearance:none;-webkit-appearance:none;width:100%;height:1px;margin:0;background:linear-gradient(90deg,var(--red) 0 var(--pct),rgba(255,255,255,.14) var(--pct) 100%);outline:none;cursor:pointer}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,.86);background:#090a0c}
input[type="range"]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,.86);background:#090a0c}
.panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.panel-actions button{min-height:40px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035);cursor:pointer;font-size:9px;letter-spacing:.13em;text-transform:uppercase}.panel-actions button:first-child{border-color:rgba(255,32,40,.35)}
@media(max-width:800px){.hero-copy{left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:max(22px,calc(3vh + env(safe-area-inset-bottom)));width:auto}.hero-copy h1{font-size:clamp(42px,12vw,66px)}.hero-copy p,.helper{display:none}.control-shell{right:max(14px,env(safe-area-inset-right));bottom:max(72px,calc(8vh + env(safe-area-inset-bottom)));width:min(340px,calc(100vw - 28px))}.control-trigger{min-width:140px;background:rgba(8,10,12,.22)}}
@media(max-height:520px) and (orientation:landscape){.control-shell{right:max(12px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:min(330px,42vw)}.control-panel{max-height:calc(100dvh - 76px);overflow:auto}.hero-copy{left:max(18px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:40vw}.hero-copy h1{font-size:clamp(30px,6.3vw,50px)}.hero-copy .eyebrow{display:none}}
/* Phone controls sit alongside the project link at the bottom edge. */
@media(max-width:800px){
  .control-shell{bottom:max(20px,env(safe-area-inset-bottom));right:max(14px,env(safe-area-inset-right))}
  .control-panel{max-height:calc(100dvh - 110px);overflow:auto;background:rgba(8,10,12,.75);backdrop-filter:blur(14px)}
}
@media(max-width:360px){.home-project-link{font-size:8px;letter-spacing:.09em;gap:7px}.home-project-link>span:last-child{margin-left:5px}}