/* A spatial camera study with the same open rhythm as the sound section. */
.camera-design{padding:64px var(--page-gutter);position:relative;overflow:hidden;color:var(--deep)}
.camera-design::before{content:"";position:absolute;inset:0 var(--page-gutter) auto;border-top:1px solid #17122044;pointer-events:none}
.camera-heading{margin-bottom:34px}
.camera-heading h2{font-size:clamp(64px,6.7vw,96px);line-height:.96;max-width:10ch;width:68%}
.camera-heading p{font-size:16px;line-height:1.6;max-width:29ch}
.camera-stage{display:grid;grid-template-columns:minmax(0,1fr) 210px;column-gap:38px;position:relative}
.camera-viewport{position:relative;min-width:0;width:100%;height:370px;overflow:hidden;isolation:isolate;touch-action:pan-y pinch-zoom}
.camera-viewport::before{content:"";position:absolute;inset:36px 0 30px;pointer-events:none;border:1px solid #4f2bab4a;z-index:2;clip-path:polygon(0 0,14px 0,14px 1px,calc(100% - 14px) 1px,calc(100% - 14px) 0,100% 0,100% 14px,calc(100% - 1px) 14px,calc(100% - 1px) calc(100% - 14px),100% calc(100% - 14px),100% 100%,calc(100% - 14px) 100%,calc(100% - 14px) calc(100% - 1px),14px calc(100% - 1px),14px 100%,0 100%,0 calc(100% - 14px),1px calc(100% - 14px),1px 14px,0 14px)}
.camera-viewport:focus-visible{outline:2px solid var(--purple);outline-offset:4px}
.camera-viewport[data-camera-ready=true]{cursor:grab}
.camera-viewport[data-camera-dragging=true]{cursor:grabbing}
#camera-canvas{position:absolute;inset:12px 0 16px;width:100%;height:calc(100% - 28px);display:block;touch-action:pan-y pinch-zoom;opacity:0;cursor:inherit}
.camera-viewport[data-camera-ready=true] #camera-canvas{opacity:1}
.camera-space-label{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;color:var(--purple);font:500 11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.025em}
.camera-study-mode{display:inline-flex;gap:8px;align-items:center}
.camera-study-mode i{width:5px;height:5px;background:currentColor;border-radius:50%;flex:none}
.camera-axis{position:absolute;font:500 9px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#655577;pointer-events:none}
.camera-axis-left{left:7px;top:50%;writing-mode:vertical-rl;transform:rotate(180deg)}
.camera-axis-bottom{left:50%;bottom:9px;transform:translateX(-50%);white-space:nowrap}
.camera-fallback{position:absolute;inset:44px 22px 40px;color:var(--purple);pointer-events:none}
.camera-fallback svg{display:block;width:100%;height:100%;opacity:.8}
.camera-viewport[data-camera-ready=true] .camera-fallback{display:none}
.camera-analysis{padding-top:37px;display:flex;flex-direction:column;gap:28px;min-width:0;color:var(--purple)}
.camera-analysis h3{font:500 11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.025em;margin-bottom:10px}
#camera-path-chart{display:block;width:100%;height:70px;overflow:visible}
.camera-path-baseline{stroke:#4f2bab25;stroke-width:1;fill:none}
[data-camera-path]{stroke:var(--purple);stroke-width:1.2;fill:none}
#camera-path-dot{fill:#8a611e;stroke:var(--sand);stroke-width:1.2}
.camera-lens{padding-top:20px;border-top:1px solid #4f2bab33}
.camera-lens-value{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 20px/1.4 var(--mono);font-variant-numeric:tabular-nums}
.camera-lens-value span+span{font-size:13px}
.camera-focus-line{height:1px;background:#4f2bab33;position:relative;margin:17px 0 10px}
[data-camera-focus-meter]{position:absolute;inset:0 auto 0 0;width:100%;height:1px;background:#8a611e;transform-origin:left center;transform:scaleX(.38)}
.camera-focus-distance{display:flex;justify-content:space-between;gap:12px;font:500 10px/1.5 var(--mono);color:#655577;font-variant-numeric:tabular-nums}
.camera-analysis-note{font:400 13px/1.55 var(--body);max-width:23ch;color:#51445e}
.camera-transport{grid-column:1/-1;display:flex;align-items:center;gap:32px;padding-top:20px;border-top:1px solid #17122044;margin-top:8px}
.camera-move-choices{display:flex;align-items:center;gap:24px;flex-shrink:0}
.camera-move-choices button{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:9px 0;background:transparent;border:0;border-bottom:1px solid transparent;color:#51445e;font:500 14px/1.5 var(--body);transition:color .2s,border-color .2s}
.camera-move-choices button[aria-pressed=true]{color:var(--purple);border-bottom-color:var(--purple)}
.camera-move-choices button:hover{color:var(--purple)}
.camera-move-choices button:focus-visible{outline:2px solid var(--purple);outline-offset:4px}
.camera-status{font:400 13px/1.5 var(--body);color:#51445e;margin:0}
.camera-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:34px}
.camera-principles>div{border-top:1px solid #17122044;padding-top:13px}
.camera-principles h3{font:500 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.025em}
.camera-principles p{font:400 14px/1.6 var(--body);margin-top:5px;color:#51445e}
@media(min-width:1600px){.camera-viewport{height:400px}}
@media(max-width:1000px){.camera-design{padding:56px var(--mobile-edge-left);padding-right:var(--mobile-edge-right)}.camera-design::before{left:var(--mobile-edge-left);right:var(--mobile-edge-right)}.camera-stage{grid-template-columns:minmax(0,1fr) 170px;column-gap:24px}.camera-viewport{height:330px}.camera-analysis{gap:22px}.camera-heading h2{font-size:clamp(64px,8vw,86px)}.camera-principles{gap:20px}}
@media(max-width:700px){.camera-design{padding-top:48px;padding-bottom:44px}.camera-heading{display:block;margin-bottom:26px}.camera-heading h2{width:100%;font-size:clamp(58px,16vw,84px);max-width:none}.camera-heading p{max-width:34ch;font-size:16px;margin-top:18px}.camera-stage{grid-template-columns:minmax(0,1fr);gap:0}.camera-viewport{height:260px}.camera-space-label{font-size:10px}.camera-axis-left{font-size:8px}.camera-analysis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding-top:5px;padding-bottom:16px}.camera-analysis h3{font-size:10px;margin-bottom:9px}#camera-path-chart{height:58px}.camera-lens{border-top:0;padding-top:0}.camera-lens-value{font-size:18px}.camera-lens-value span+span{font-size:12px}.camera-focus-distance{font-size:9px;gap:6px}.camera-focus-line{margin:12px 0 9px}.camera-analysis-note{display:none}.camera-transport{flex-wrap:wrap;align-items:flex-start;gap:8px 22px;padding-top:12px;margin-top:0}.camera-move-choices{gap:26px}.camera-status{font-size:12px;padding-top:2px;flex:1 1 145px}.camera-principles{gap:14px;margin-top:26px}.camera-principles h3{font-size:10px;line-height:1.6}.camera-principles p{display:none}}
@media(max-width:350px){.camera-viewport{height:240px}.camera-analysis{gap:20px}.camera-focus-distance{flex-wrap:wrap;gap:2px 8px}.camera-principles{gap:12px}.camera-principles h3{font-size:9px}}
@media(max-width:1000px) and (max-height:500px) and (orientation:landscape){.camera-heading{display:flex;gap:28px}.camera-heading h2{width:60%;font-size:58px}.camera-heading p{width:40%;margin-top:0;max-width:28ch}.camera-stage{grid-template-columns:minmax(0,1fr) 170px}.camera-viewport{height:250px}.camera-analysis{display:flex;padding-top:36px;gap:18px}.camera-principles{margin-top:24px}}
/* Retain the existing short-screen navigation layout. */
@media(max-width:700px) and (max-height:700px){.menu-panel:not([hidden]){display:flex;flex-direction:column;gap:24px;padding-top:calc(104px + var(--mobile-safe-top));padding-bottom:calc(20px + var(--mobile-safe-bottom))}.menu-panel nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;width:100%;gap:16px 20px}.menu-panel nav a{font-size:clamp(26px,7vw,34px);line-height:1;justify-content:center;text-align:center;min-height:44px}.menu-panel .menu-foot{position:static;inset:auto;bottom:auto;width:100%;margin-top:auto;gap:4px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.camera-move-choices button{transition:none}}
@media(forced-colors:active){.camera-design::before,.camera-viewport::before,.camera-transport,.camera-principles>div{border-color:CanvasText}.camera-analysis,.camera-space-label,.camera-axis,.camera-focus-distance,.camera-status,.camera-principles p{color:CanvasText}.camera-move-choices button{color:ButtonText}.camera-move-choices button[aria-pressed=true]{color:Highlight;border-bottom-color:Highlight}[data-camera-path],.camera-path-baseline{stroke:CanvasText}.camera-focus-line{background:CanvasText}[data-camera-focus-meter]{border-color:CanvasText;background:Canvas}#camera-path-dot{fill:CanvasText}}