/* Context belongs to the task, not to a one-size-fits-all hotspot template. */
.scene.contextual{aspect-ratio:auto;background:#f5efdf;border:1px solid #dfd4b9}
.contextual:after{display:none}.visual-stage{position:relative;overflow:hidden;isolation:isolate}
.contextual .scene-photo{position:absolute;inset:0;object-fit:contain;object-position:center;padding:0;background:#f5efdf}
.contextual .annotation{position:relative;inset:auto;margin:12px;border-color:#af995f4d;padding:16px;animation:annotation-in .55s 1.8s both}
.contextual .scene-call{background:#0c291b38;animation:call-away .8s 1.1s both}
.context-tabs{display:flex;gap:8px;padding:12px 12px 0}.context-tabs button{flex:1;min-width:0;min-height:44px;padding:9px;font-size:12px;text-wrap:balance;border-color:#cbbd96}
.context-tabs button[aria-pressed=true]{background:#e8d59b;border-color:#b59b54;color:#163c2b}
.contextual .lens{top:8%;right:5%;width:34%;background:none;box-shadow:0 5px 18px #152c2440;overflow:hidden;border:2px solid #e3c679;animation:lens-reveal .55s 1.65s both}
.contextual .lens.is-updated{animation:photo-reveal .25s both}.contextual .hotspot{width:38px;height:38px;background:#d7b75b12;box-shadow:0 0 12px #f9d56f33;animation:appear .5s 1.35s both}.contextual .hotspot:after{inset:12px}.contextual .hotspot[aria-pressed=true]{outline-width:1px;outline-offset:2px}
.contextual .connector path{stroke-width:.35;animation:draw .7s 1.4s forwards}
.context-label,.reading-guide,.integration-guide,.comparison-guide,.record-guide{position:absolute;z-index:2;bottom:18px;left:16px;right:16px;pointer-events:none;animation:context-rise .65s 1.35s both}
.context-label{width:fit-content;max-width:calc(100% - 32px);padding:10px 14px;color:#153c2b;background:#fff9ecee;border:1px solid #c9b37675;border-radius:11px;font:600 15px/1.3 Georgia,serif;box-shadow:0 3px 12px #6d562014}
.reading-guide{display:flex;align-items:center;gap:12px;width:fit-content;background:#fff9ecee;padding:12px 16px;border-radius:12px;color:#173d2b;border:1px solid #d3be8e}.reading-guide>span{font:600 26px Georgia,serif}.reading-guide small{font-size:11px;line-height:1.4}
.integration-guide{background:#fff9ecee;color:#3f553f;padding:12px;border:1px solid #cbbd96;border-radius:10px;font-size:11px;line-height:1.5}
.comparison-guide,.record-guide{display:flex;gap:12px;justify-content:space-between}.comparison-guide span,.record-guide span{background:#fff9ecee;padding:9px 12px;border:1px solid #c7b789;border-radius:9px;color:#173d2b;font-size:11px;animation:context-rise .45s both}.comparison-guide span:nth-child(2){animation-delay:1.9s}.record-guide span:nth-child(2){animation-delay:1.7s}.record-guide span:nth-child(3){animation-delay:2.1s}
.scene[data-focus-index="1"] .comparison-guide span:first-child{opacity:.5}.scene:not([data-focus-index="1"]) .comparison-guide span:nth-child(2){opacity:.5}
.photo-frame{position:absolute;inset:14% 10% 20%;pointer-events:none;animation:frame-find 1s 1.35s both;z-index:2}.photo-frame i{position:absolute;width:25px;height:25px;border:solid #fff8d5;filter:drop-shadow(0 1px 2px #193d2b77)}.photo-frame i:nth-child(1){top:0;left:0;border-width:2px 0 0 2px}.photo-frame i:nth-child(2){top:0;right:0;border-width:2px 2px 0 0}.photo-frame i:nth-child(3){bottom:0;left:0;border-width:0 0 2px 2px}.photo-frame i:nth-child(4){bottom:0;right:0;border-width:0 2px 2px 0}.mode-wide .photo-frame{inset:9% 6% 13%}
.mode-name .context-label{animation:context-write .9s 1.35s both}.mode-calendar .context-label{transform-origin:left center;animation:context-page .7s 1.35s both}.mode-timeline .context-label{animation:context-sweep .8s 1.35s both}.mode-inventory .context-label,.mode-equip .context-label{animation:context-rise .7s 1.35s both}.mode-milestone .context-label{animation:context-celebrate .8s 1.35s both}
@keyframes context-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes context-write{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes context-page{from{opacity:0;transform:rotateX(-65deg)}to{opacity:1;transform:none}}
@keyframes context-sweep{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes context-celebrate{0%{opacity:0;transform:translateY(8px)}70%{opacity:1;transform:translateY(-3px)}100%{opacity:1;transform:none}}
@keyframes frame-find{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.contextual *{animation:none!important;transition:none!important}.contextual .scene-call{display:none}}