/* Cinematic viewing keeps the 3D scene at the centre of the experience. */
#cv{z-index:2;outline-offset:-4px}
#cv:focus-visible{outline:2px solid #e4c293}
#cinemaCanvas{z-index:1;pointer-events:none!important}
#app>header{background:#050b13e8;border-color:#8cb8ca19;box-shadow:none}
.brand b{letter-spacing:.28em}.brand span{color:#8195aa}
.presentation-hero{position:absolute;z-index:3;left:38px;top:60px;width:320px;pointer-events:none}
.scene-kicker{display:flex;align-items:center;gap:9px;font:9px var(--mono);letter-spacing:.15em;color:#a0bdcc}
.scene-kicker>span{width:5px;height:5px;border-radius:50%;background:#f5c58a;box-shadow:0 0 12px #ffd897}
.presentation-hero h1{margin:22px 0 20px;font:600 clamp(40px,4.6vw,72px)/1.02 var(--sans);letter-spacing:-.065em;color:#f4f5f5;text-shadow:0 3px 22px #000}
.presentation-hero h1 em{font-style:normal;font-weight:400;color:#e6b785}
#sceneDescription{max-width:255px;font-size:13px;line-height:1.8;color:#91a7b8;text-shadow:0 2px 9px #02050b}
.scene-gesture{font:8px var(--mono);letter-spacing:.12em;color:#708b9f;margin-top:28px}.scene-gesture span{padding:0 7px;color:#dbb98a}


.presentation-hero[hidden],.scene-dock[hidden]{display:none}
.scene-dock{position:absolute;z-index:8;left:50%;bottom:26px;transform:translateX(-50%);width:min(640px,calc(100% - 540px));min-width:440px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:7px;border:1px solid #aac4d525;border-radius:14px;background:#0a131edb;backdrop-filter:blur(20px);box-shadow:0 12px 50px #0008}
.scene-dock button{min-width:0;min-height:66px;display:flex;align-items:center;gap:12px;padding:10px;border:1px solid transparent;border-radius:9px;background:transparent;text-align:left;color:#b0c1cc;cursor:pointer;transition:background .2s,border-color .2s}
.scene-dock button:hover{background:#a3b9c80a}.scene-dock button[aria-pressed="true"]{background:#a8956f13;border-color:#b8a07860;color:#f3e1c7}
.scene-dock small{display:block;font:7px var(--mono);letter-spacing:.08em;color:#72899c;margin-bottom:6px;white-space:nowrap}.scene-dock b{font-size:12px;font-weight:550;white-space:nowrap}
.scene-dock>p{position:absolute;top:calc(100% + 7px);left:0;width:100%;text-align:center;font:8px var(--mono);color:#7990a0;pointer-events:none;white-space:nowrap}
.scene-orb{flex:none;width:28px;height:28px;border:1px solid #ffc68599;border-radius:50%;background:radial-gradient(circle,#020305 35%,#d49a5a 43%,#ffd59a 47%,#9b512519 63%,transparent 68%);box-shadow:0 0 14px #f3b86422}
.orb-binary{background:radial-gradient(circle at 28% 55%,#071019 15%,#8feaff 19%,transparent 36%),radial-gradient(circle at 70% 40%,#071019 15%,#efb878 20%,transparent 36%);border-color:#64aabc4d}
.orb-deep{background:radial-gradient(circle at 50% 50%,#83ccdf 2%,transparent 15%),radial-gradient(circle at 22% 65%,#efbb6d 2%,transparent 15%),radial-gradient(circle at 78% 30%,#92d0ff 2%,transparent 15%);border-color:#64aabc4d}
.cinematic-mode #hud{top:120px;right:18px;background:#09131cb8;border-color:#7194a52e}.cinematic-mode #tip{display:none}
.cinematic-mode #tools{top:14px;right:18px}
.cinematic-mode #panel.collapsed{top:auto;bottom:26px;left:24px;width:225px;border-color:#839eaf37;background:#0d1722d9}
.cinematic-mode #panel.collapsed .ptitle{min-height:60px;background:none}
.cinematic-mode #panel.collapsed .panel-eyebrow{color:#bea27e}.cinematic-mode #panel.collapsed h2{font-size:12px}
.cinematic-mode #viewSw{left:50%;right:auto;top:14px;transform:translateX(-50%);background:#0b1622b8}
.cinematic-mode #fact{z-index:15}
.cinematic-mode .diagram-only,.cinematic-mode label:has(#cAxes),.cinematic-mode .slice-controls{display:none}
.presentation-hero h1{font-size:clamp(40px,4.2vw,66px)}

.scene-dock button:focus-visible{outline:2px solid #f1c28a;outline-offset:3px}
@media(min-width:781px) and (max-width:1100px){
  .presentation-hero{left:28px;top:75px;width:240px}.presentation-hero h1{font-size:48px}#sceneDescription{font-size:12px;max-width:205px}
  .scene-dock{left:auto;right:16px;transform:none;width:calc(100% - 285px);min-width:0}.scene-dock button{gap:7px}.scene-dock small{font-size:6px}
}
@media(max-width:780px),(max-width:900px) and (max-height:520px){
  .presentation-hero{left:18px;top:126px;width:270px}.scene-kicker{font-size:7px;letter-spacing:.12em}.presentation-hero h1{font-size:39px;margin:13px 0;letter-spacing:-.06em}
  #sceneDescription,.scene-gesture{display:none}
  .cinematic-mode #hud{display:none}.cinematic-mode #tools{left:10px;right:auto;top:10px}
  .cinematic-mode #viewSw{left:10px;top:66px;transform:none}
  .scene-dock{left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom));transform:none;width:auto;min-width:0;padding:5px;gap:3px;border-radius:12px}
  .scene-dock button{min-height:57px;flex-direction:column;gap:6px;padding:6px 2px;text-align:center}.scene-dock small{display:none}.scene-dock b{font-size:10px}.scene-orb{width:20px;height:20px}.scene-dock>p{font-size:6px;letter-spacing:0}
  .cinematic-mode #panel.collapsed{width:100%;left:0;bottom:0;border-radius:16px 16px 0 0}.cinematic-mode #panel.collapsed .ptitle{min-height:60px}
  #panel:not(.collapsed){z-index:12}.cinematic-mode #fact{bottom:170px;top:auto;max-height:calc(100% - 230px)}
}
@media(max-width:900px) and (max-height:520px){
  .presentation-hero{top:66px;left:20px;width:220px}.presentation-hero h1{font-size:30px;margin-top:9px}.scene-kicker{font-size:6px}
  .cinematic-mode #tools{top:8px;left:auto;right:10px}.cinematic-mode #viewSw{top:8px;left:10px}
  .scene-dock{left:auto;right:12px;bottom:16px;width:340px}.scene-dock button{flex-direction:row;min-height:44px;gap:7px}.scene-dock>p{display:none}
  .cinematic-mode #panel.collapsed{left:12px;bottom:16px;width:205px;border-radius:12px}.cinematic-mode #panel.collapsed .ptitle{min-height:52px}
}
@media(prefers-reduced-motion:reduce){.scene-dock button{transition:none}}
@media(max-width:600px) and (min-height:521px){
  .cinematic-3d .presentation-hero{width:145px}
  .cinematic-3d .presentation-hero h1{font-size:32px;letter-spacing:-.05em;margin:0}
  .cinematic-3d .scene-kicker{display:none}
}
@media(min-width:700px) and (max-width:900px) and (max-height:520px){
  #app>header{flex-wrap:nowrap;min-height:64px;gap:8px}
  #app>header nav{margin-left:auto;width:auto;max-width:calc(100% - 305px)}
  #app>header nav button{padding:6px 9px;font-size:10px}
  #cm-back{left:146px!important;right:auto!important;width:max-content}
}