/* Interactive hero; the portfolio and existing navigation keep their layout. */
.page>.viewer{position:absolute;inset:120px 0 28px 36%;overflow:hidden;min-width:0;z-index:0}
.page>.main{position:relative;z-index:1;pointer-events:none}
.page .intro a,.page .intro button{pointer-events:auto}
.viewer .canvas-host,.viewer .fallback{position:absolute;inset:0;width:100%;height:100%}
.viewer .fallback{object-fit:cover;object-position:right;opacity:.8}
.viewer .canvas-host canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.viewer .canvas-host canvas:active{cursor:grabbing}
.viewer canvas:focus-visible{outline:2px solid #eee;outline-offset:-6px}
.viewer:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#111213 0%,transparent 12%,transparent 94%,#111213 100%),linear-gradient(180deg,#111213 0%,transparent 15%,transparent 84%,#111213 100%)}
.scene-label,.view-controls,.view-hint{position:absolute;z-index:2}
.scene-label{top:15px;left:12%;right:calc(max(0px,(100vw - 1800px)/2) + clamp(30px,6.8vw,128px));display:flex;justify-content:space-between;gap:15px;pointer-events:none;font-size:10px;letter-spacing:.03em;color:#858b8e}
.view-controls{bottom:45px;left:50%;transform:translateX(-50%);display:flex;white-space:nowrap;border:1px solid #ffffff24;padding:5px;border-radius:6px;background:#141618db;backdrop-filter:blur(10px);box-shadow:0 12px 24px #0003}
.view-controls button{min-height:42px;padding:11px 16px;border:0;background:transparent;border-radius:3px;text-transform:uppercase;font-size:10px;letter-spacing:.03em;color:#b4b7b8;display:flex;align-items:center;gap:14px}
.view-controls button span{font-size:18px}
.view-controls button:hover{background:#ffffff09;color:#fff}
.view-controls button[aria-pressed=true]{background:#e1e3df;color:#111}
.view-hint{bottom:8px;width:100%;margin:0;padding:0 16px;text-align:center;color:#858b8e;font-size:11px}
.viewer:not(.ready) .canvas-host,.viewer:not(.ready) .view-controls{visibility:hidden}
.viewer.ready .fallback{display:none}
.viewer.unavailable .view-hint{background:#111213b0;padding:12px}
@media(max-width:1100px) and (min-width:801px){.page>.viewer{left:38%;top:100px}.view-controls button{padding:10px 12px;font-size:9px}}
@media(max-width:1150px) and (min-width:801px){.scene-label{right:5vw}}
@media(max-width:800px){.page>.viewer{position:relative;inset:auto;order:2;width:100%;height:460px;flex:none;margin:16px 0 0}.viewer:after{background:linear-gradient(90deg,#111213,transparent 5%,transparent 95%,#111213),linear-gradient(180deg,#111213,transparent 16%,transparent 82%,#111213)}.scene-label{top:18px;left:24px;right:24px;font-size:9px}.view-controls{bottom:46px;width:max-content;max-width:calc(100% - 24px);padding:4px}.view-controls button{font-size:9px;padding:10px 12px;gap:8px;min-height:44px}.view-controls button span{font-size:16px}.view-hint{bottom:15px;font-size:10px}.viewer .fallback{object-position:right}}
@media(max-width:360px){.scene-label{right:18px}}