/* Sighting compass: stationary bezel and lubber line, liquid-damped card. */
:root{--compass-h:calc(196px + env(safe-area-inset-bottom,0px))}
.studio-compass{position:absolute;z-index:6;inset:auto 0 0;height:var(--compass-h);padding:12px max(12px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-right,0px));background:linear-gradient(180deg,transparent,#031219 25%,#071f29);isolation:isolate}
.sc-body{width:min(100%,800px);margin-inline:auto}
.sc-instrument{padding:6px;border:1px solid #626b64;background:linear-gradient(150deg,#4c5b58,#12252c 30%,#3b4646 63%,#74674c);box-shadow:inset 0 1px 0 #ffebc059,0 5px 18px #0007;border-radius:48% 48% 17px 17px / 18px 18px 17px 17px;position:relative}
.sc-instrument::before,.sc-instrument::after{content:"";position:absolute;z-index:4;width:3px;height:3px;border-radius:50%;background:#b4b8a2;top:11px;pointer-events:none}
.sc-instrument::before{left:22px}.sc-instrument::after{right:22px}
.sc-lens{height:104px;border-radius:45% 45% 10px 10px / 13px 13px 10px 10px;background:radial-gradient(ellipse at 50% 115%,#174451,transparent 70%),linear-gradient(180deg,#030d11,#0b2732 52%,#061821);position:relative;box-shadow:inset 0 4px 12px #000f;border:1px solid #061015;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;perspective:700px}
.sc-lens.is-dragging{cursor:grabbing}
.sc-lens::after{content:"";position:absolute;pointer-events:none;inset:0;background:linear-gradient(90deg,#030d11e0,transparent 14%,transparent 86%,#030d11e0),linear-gradient(176deg,#b9e5e917,transparent 44%);z-index:2}
.sc-scale{position:absolute;inset:0;transform-origin:50% 48px}
.sc-surface{position:absolute;inset:-12px -20px 5px;border-bottom:1px solid #acd6d038;border-radius:0 0 48% 48% / 0 0 14px 14px;background:radial-gradient(ellipse at 50% 130%,#4c81893d,#173f4914 70%);box-shadow:0 8px 12px #010a0e3d;pointer-events:none}
.sc-sheen{position:absolute;inset:-16px -24px;pointer-events:none;z-index:2;background:linear-gradient(168deg,transparent 21%,#9bced212 23%,#9bced206 32%,transparent 47%);opacity:.7}
.sc-direction{position:absolute;top:10px;transform:translateX(-50%);color:#d1dcd8;white-space:nowrap;font:600 13px/24px var(--body);letter-spacing:.025em;pointer-events:none;text-shadow:0 1px 5px #0009}
.sc-direction.is-ordinal{font-size:16px;color:#e4e7de}
.sc-direction.is-cardinal{font-size:23px;font-weight:600;color:var(--amber)}
.sc-tick{position:absolute;width:1px;height:7px;background:#688e94;pointer-events:none;transform:translateX(-50%);top:78px}
.sc-tick.is-major{height:17px;background:var(--amber)}
.sc-tick.is-medium{height:12px;background:#a8b9ae}
.sc-cap{position:absolute;top:33px;width:48px;height:44px;transform:translateX(-50%);padding:0;border:0;background:transparent;color:#c4d2d0;font:400 14px/1 var(--mono);font-variant-numeric:tabular-nums;display:grid;place-items:center;border-radius:4px;touch-action:pan-y;cursor:pointer}
.sc-cap[aria-current="step"]{color:var(--amber);font-weight:700}
.sc-cap:hover{background:#efd4a114;color:var(--paper)}
.sc-cap:focus-visible{outline-offset:-3px}
.sc-scale [hidden]{display:none}
.sc-axis{width:1px;height:100%;background:linear-gradient(var(--amber) 0 7px,transparent 7px 75px,var(--amber) 75px);position:absolute;left:50%;top:0;z-index:3;pointer-events:none;box-shadow:0 0 12px #efd4a12e}
.sc-axis::before{content:"";position:absolute;left:-5px;top:0;width:11px;height:6px;background:var(--amber);clip-path:polygon(0 0,100% 0,50% 100%)}
.sc-controls{display:grid;grid-template-columns:minmax(44px,1fr) minmax(0,1.3fr) minmax(44px,1fr);align-items:center;gap:8px;padding-top:4px}
.sc-current{text-align:center;min-width:0;line-height:1.15}
.sc-current .deg{font:400 13px/1.3 var(--mono);color:var(--amber);font-variant-numeric:tabular-nums;letter-spacing:.05em;display:block}
.sc-current .name{font:400 22px/1.25 var(--display);color:var(--paper);display:block}
.sc-step{font:400 clamp(1rem,1.2vw,1.1875rem)/1.4 var(--body);display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:48px;padding:0 6px;border:0;color:#d0dcdd;background:transparent;text-align:left;cursor:pointer}
.sc-step:last-child{justify-content:flex-end;text-align:right}
.sc-step:hover{color:var(--amber)}
.sc-step svg{width:24px;height:24px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:520px){.sc-controls{grid-template-columns:44px minmax(0,1fr) 44px}.sc-step span{display:none}.sc-current .name{font-size:17px}.sc-direction{font-size:12px}.sc-direction.is-ordinal{font-size:15px}.sc-direction.is-cardinal{font-size:21px}}
@media(max-height:500px) and (min-width:600px){:root{--compass-h:calc(172px + env(safe-area-inset-bottom,0px))}.studio-compass{padding-top:5px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}.sc-lens{height:94px}.sc-body{max-width:680px}.sc-direction{line-height:21px}.sc-direction.is-cardinal{font-size:20px}.sc-controls{padding-top:0}.sc-current .name{font-size:16px}}
@media(prefers-reduced-motion:reduce){.sc-sheen{opacity:.3}}

/* Screen-edge navigation is kept outside the artwork on desktop. */
.sc-edge{display:none}
@media(min-width:1024px){
 .panel{padding-left:max(var(--gutter),88px);padding-right:max(var(--gutter),88px)}
 .sc-edge{position:absolute;z-index:4;top:calc((100% + var(--bar-h) - var(--compass-h))/2);transform:translateY(-50%);display:grid;place-items:center;width:56px;height:132px;padding:10px;border:1px solid transparent;border-radius:28px;background:transparent;color:#d2d5c8;cursor:pointer;touch-action:manipulation;transition:color .2s,background .2s,border-color .2s}
 .sc-edge-prev{left:max(12px,env(safe-area-inset-left,0px))}
 .sc-edge-next{right:max(12px,env(safe-area-inset-right,0px))}
 .sc-edge svg{width:30px;height:96px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
 .sc-edge:hover,.sc-edge:focus-visible{color:var(--amber);background:#efd4a10a;border-color:#efd4a12e}
 .sc-edge:active{background:#efd4a11a}
}
@media(max-width:760px){.slate{font-size:.875rem}.slate-body{gap:6px 14px;padding:14px 16px}.sc-current .name{font-size:18px}}
@media(prefers-reduced-motion:reduce){.sc-edge{transition:none}}

/* Quiet overview of the eight chapters; animation belongs to the existing compass. */
.sc-overview{display:none;width:128px;height:128px;pointer-events:none;user-select:none}
.sc-overview svg{display:block;width:100%;height:100%;overflow:visible}
.sc-overview-point{fill:#031219;stroke:#efd4a1;stroke-width:.65;opacity:.55}
.sc-overview-point.is-current{fill:var(--amber);stroke:var(--amber);stroke-width:1.8;opacity:1}
.sc-overview-needle{fill:var(--amber)}
.sc-overview-letter{fill:#f7f4ed;font:italic 11px Georgia,serif;text-anchor:middle;dominant-baseline:central}
@media(min-width:1024px) and (min-height:601px) and (pointer:fine){
 .bar .lang{position:relative}
 .sc-overview{display:block;position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%)}
 .panel{padding-top:calc(var(--bar-h) + 28px);padding-right:calc(var(--gutter) + 144px)}
}