@layer components{.visual-guide{--vg-marker-bg:var(--sparx-accent);--vg-marker-ink:#fff;--vg-mat:color-mix(in srgb, var(--sparx-brand) 8%, var(--sparx-soft-blue));--vg-card:var(--sparx-soft)}[data-reading=dark] .visual-guide{--vg-marker-bg:var(--sparx-accent-light);--vg-marker-ink:#07101f;--vg-mat:color-mix(in srgb, var(--sparx-surface) 70%, #000);--vg-card:var(--sparx-soft)}.visual-guide{margin:2rem 0}.visual-guide__grid{gap:.9rem;display:grid}.visual-guide__item{border:1px solid var(--sparx-line);background:var(--vg-card);min-width:0;box-shadow:var(--sparx-shadow-soft);border-radius:1rem;overflow:hidden}.visual-guide__media{aspect-ratio:clamp(.72, var(--vg-num,1.3333), 1.7);background:var(--vg-mat);place-items:center;display:grid;position:relative;overflow:hidden;container-type:size}.visual-guide__frame{width:100%;height:100%;position:relative}.visual-guide__media[data-markers] .visual-guide__frame{width:min(100cqw, calc(var(--vg-num) * 100cqh));height:auto;aspect-ratio:var(--vg-ratio)}.visual-guide__image{object-fit:cover;width:100%;height:100%;box-shadow:none;border-radius:0;margin:0;display:block;transform:none}.visual-guide__media[data-markers] .visual-guide__image{object-fit:contain}.visual-guide__image:hover{box-shadow:none;transform:none}.visual-guide__sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.visual-guide__marker{z-index:1;width:3.5rem;height:3.5rem;color:var(--vg-marker-ink);cursor:pointer;background:0 0;border:0;padding:0;position:absolute;transform:translate(-50%,-50%)}.visual-guide__marker:before{content:"";z-index:1;background:color-mix(in srgb, var(--vg-marker-bg) 14%, transparent);width:2.25rem;height:2.25rem;box-shadow:0 0 0 3px color-mix(in srgb, var(--vg-marker-bg) 82%, transparent), inset 0 0 0 1px #07101f33, 0 5px 18px #00000061;border:2px solid #fff;border-radius:999px;animation:2.8s ease-in-out infinite vgTargetBreathe;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.visual-guide__marker:after{content:"";z-index:0;transform-origin:0;background:#fff;width:2.6rem;height:2px;position:absolute;top:50%;left:50%;box-shadow:0 1px 3px #000000b3}.visual-guide__marker[data-placement=down-right]:after{transform:rotate(45deg)}.visual-guide__marker[data-placement=down-left]:after{transform:rotate(135deg)}.visual-guide__marker[data-placement=up-right]:after{transform:rotate(-45deg)}.visual-guide__marker[data-placement=up-left]:after{transform:rotate(-135deg)}.visual-guide__marker[data-solo]:after{width:3.25rem}.visual-guide__marker[data-solo]:before{width:2.8rem;height:2.8rem}.visual-guide__target{z-index:2;pointer-events:none;border-radius:999px;width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.visual-guide__target:before{content:"";z-index:1;background:var(--vg-marker-bg);border:1px solid #fff;border-radius:999px;width:.38rem;height:.38rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 5px #0000008c}.visual-guide__target:after{content:"";border:2px solid color-mix(in srgb, var(--vg-marker-bg) 88%, #fff);width:2.25rem;height:2.25rem;box-shadow:0 0 0 .48rem color-mix(in srgb, var(--vg-marker-bg) 22%, transparent);border-radius:999px;animation:2.8s cubic-bezier(.22,.61,.36,1) infinite vgTargetHalo;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.visual-guide__marker[data-solo] .visual-guide__target:after{width:2.8rem;height:2.8rem}.visual-guide__badge{z-index:3;background:color-mix(in srgb, var(--vg-marker-bg) 88%, transparent);width:1.8rem;height:1.8rem;color:var(--vg-marker-ink);font-variant-numeric:tabular-nums;border:2px solid #fff;border-radius:999px;place-items:center;font-size:.78rem;font-weight:850;line-height:1;transition:background-color .18s,box-shadow .18s,transform .18s;display:grid;position:absolute;top:50%;left:50%;box-shadow:0 0 0 3px #07101f38,0 3px 14px #00000073}.visual-guide__item[data-vg-layout=measuring] .visual-guide__badge{transition:none}.visual-guide__marker[data-solo] .visual-guide__badge{display:none}.visual-guide__callout{z-index:4;box-sizing:border-box;width:max-content;max-width:min(11rem, var(--vg-callout-limit,52cqw));border:1px solid #ffffffe0;border-left:3px solid var(--vg-marker-bg);-webkit-backdrop-filter:blur(10px)saturate(1.12);color:#07101f;text-align:left;white-space:normal;overflow-wrap:anywhere;pointer-events:none;background:#ffffffe6;border-radius:.5rem .7rem .7rem .5rem;padding:.42rem .58rem .44rem .66rem;font-size:.72rem;font-weight:720;line-height:1.3;transition:background-color .18s,box-shadow .18s;display:none;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1px #07101f1a,0 5px 16px #0000003d}.visual-guide__marker[data-solo] .visual-guide__callout{display:block}.visual-guide__marker[data-solo][data-placement=down-right] .visual-guide__callout{transform:translate(calc(2.25rem + var(--vg-callout-nudge-x,0px)), calc(1.45rem + var(--vg-callout-nudge-y,0px)))}.visual-guide__marker[data-solo][data-placement=down-left] .visual-guide__callout{transform:translate(calc(-100% - 2.25rem + var(--vg-callout-nudge-x,0px)), calc(1.45rem + var(--vg-callout-nudge-y,0px)))}.visual-guide__marker[data-solo][data-placement=up-right] .visual-guide__callout{transform:translate(calc(2.25rem + var(--vg-callout-nudge-x,0px)), calc(-100% - 1.45rem + var(--vg-callout-nudge-y,0px)))}.visual-guide__marker[data-solo][data-placement=up-left] .visual-guide__callout{transform:translate(calc(-100% - 2.25rem + var(--vg-callout-nudge-x,0px)), calc(-100% - 1.45rem + var(--vg-callout-nudge-y,0px)))}.visual-guide__marker[data-placement=down-right] .visual-guide__badge{transform:translate(1.15rem,1.15rem)}.visual-guide__marker[data-placement=down-left] .visual-guide__badge{transform:translate(calc(-100% - 1.15rem),1.15rem)}.visual-guide__marker[data-placement=up-right] .visual-guide__badge{transform:translate(1.15rem,calc(-100% - 1.15rem))}.visual-guide__marker[data-placement=up-left] .visual-guide__badge{transform:translate(calc(-100% - 1.15rem),calc(-100% - 1.15rem))}.visual-guide__marker[data-vg-positioned]:after{width:var(--vg-connector-length);transform:rotate(var(--vg-connector-angle))}.visual-guide__marker[data-vg-positioned] .visual-guide__badge{transform:translate(calc(-50% + var(--vg-badge-x)), calc(-50% + var(--vg-badge-y)))}.visual-guide__badge:after{content:"";z-index:-1;background:var(--vg-marker-bg);border-radius:999px;animation:2.8s cubic-bezier(.22,.61,.36,1) infinite vgMarkerHalo;position:absolute;inset:0}.visual-guide__marker:nth-of-type(2) .visual-guide__badge:after{animation-delay:.32s}.visual-guide__marker:nth-of-type(3) .visual-guide__badge:after{animation-delay:.64s}.visual-guide__marker:nth-of-type(2) .visual-guide__target:after{animation-delay:.32s}.visual-guide__marker:nth-of-type(3) .visual-guide__target:after{animation-delay:.64s}@keyframes vgMarkerHalo{0%{opacity:.38;transform:scale(1)}80%,to{opacity:0;transform:scale(1.7)}}@keyframes vgTargetBreathe{0%,to{transform:translate(-50%,-50%)scale(1)}50%{transform:translate(-50%,-50%)scale(1.04)}}@keyframes vgTargetHalo{0%{opacity:.72;transform:translate(-50%,-50%)scale(1)}74%,to{opacity:0;transform:translate(-50%,-50%)scale(1.45)}}.visual-guide__marker:hover,.visual-guide__marker:focus-visible,.visual-guide__item:has(.visual-guide__markers li:first-child button:hover) .visual-guide__marker:first-of-type,.visual-guide__item:has(.visual-guide__markers li:nth-child(2) button:hover) .visual-guide__marker:nth-of-type(2),.visual-guide__item:has(.visual-guide__markers li:nth-child(3) button:hover) .visual-guide__marker:nth-of-type(3),.visual-guide__item[data-vg-active="1"] .visual-guide__marker:first-of-type,.visual-guide__item[data-vg-active="2"] .visual-guide__marker:nth-of-type(2),.visual-guide__item[data-vg-active="3"] .visual-guide__marker:nth-of-type(3){z-index:2;outline:none}.visual-guide__marker:hover .visual-guide__badge,.visual-guide__marker:focus-visible .visual-guide__badge,.visual-guide__item:has(.visual-guide__markers li:first-child button:hover) .visual-guide__marker:first-of-type .visual-guide__badge,.visual-guide__item:has(.visual-guide__markers li:nth-child(2) button:hover) .visual-guide__marker:nth-of-type(2) .visual-guide__badge,.visual-guide__item:has(.visual-guide__markers li:nth-child(3) button:hover) .visual-guide__marker:nth-of-type(3) .visual-guide__badge,.visual-guide__item[data-vg-active="1"] .visual-guide__marker:first-of-type .visual-guide__badge,.visual-guide__item[data-vg-active="2"] .visual-guide__marker:nth-of-type(2) .visual-guide__badge,.visual-guide__item[data-vg-active="3"] .visual-guide__marker:nth-of-type(3) .visual-guide__badge{background:var(--vg-marker-bg);box-shadow:0 0 0 6px color-mix(in srgb, var(--vg-marker-bg) 45%, transparent), 0 3px 14px #00000073}.visual-guide__marker:hover:before,.visual-guide__marker:focus-visible:before,.visual-guide__item[data-vg-active="1"] .visual-guide__marker:first-of-type:before,.visual-guide__item[data-vg-active="2"] .visual-guide__marker:nth-of-type(2):before,.visual-guide__item[data-vg-active="3"] .visual-guide__marker:nth-of-type(3):before{background:color-mix(in srgb, var(--vg-marker-bg) 23%, transparent);box-shadow:0 0 0 4px color-mix(in srgb, var(--vg-marker-bg) 92%, transparent), inset 0 0 0 1px #07101f40, 0 5px 22px #0000007a}.visual-guide__marker[data-solo]:hover .visual-guide__callout,.visual-guide__marker[data-solo]:focus-visible .visual-guide__callout,.visual-guide__item[data-vg-active] .visual-guide__marker[data-solo] .visual-guide__callout{box-shadow:0 0 0 2px color-mix(in srgb, var(--vg-marker-bg) 70%, transparent), 0 6px 20px #0000004d;background:#fffffff7}.visual-guide__marker:hover .visual-guide__badge:after,.visual-guide__marker:focus-visible .visual-guide__badge:after,.visual-guide__item[data-vg-active] .visual-guide__badge:after{opacity:0;animation:none}.visual-guide__body{padding:.85rem 1.1rem 1rem}.visual-guide__label{color:var(--sparx-ink);margin:0 0 .25rem;font-size:1.01rem;font-weight:600;line-height:1.375}.visual-guide__cue{color:var(--sparx-muted);margin:0;font-size:.94rem;line-height:1.625}.visual-guide__markers{gap:.3rem;margin:.8rem 0 0;padding:0;list-style:none;display:grid}.visual-guide__markers li{margin:0;padding:0}.visual-guide__markers li:before{content:none}.visual-guide__markers button{background:color-mix(in srgb, var(--sparx-soft-blue) 60%, transparent);width:100%;min-height:2.75rem;color:var(--sparx-ink-soft);text-align:left;cursor:pointer;border:1px solid #0000;border-radius:.6rem;grid-template-columns:1.5rem minmax(0,1fr);align-items:center;gap:.55rem;padding:.5rem .6rem;font-size:.85rem;line-height:1.5;transition:background-color .18s,border-color .18s;display:grid}.visual-guide__markers button:hover,.visual-guide__markers button:focus-visible,.visual-guide__item[data-vg-active="1"] li:first-child button,.visual-guide__item[data-vg-active="2"] li:nth-child(2) button,.visual-guide__item[data-vg-active="3"] li:nth-child(3) button{border-color:color-mix(in srgb, var(--vg-marker-bg) 45%, transparent);background:color-mix(in srgb, var(--vg-marker-bg) 12%, transparent);color:var(--sparx-ink);outline:none}.visual-guide__num{background:var(--vg-marker-bg);width:1.5rem;height:1.5rem;color:var(--vg-marker-ink);font-variant-numeric:tabular-nums;border-radius:999px;place-items:center;font-size:.7rem;font-weight:850;line-height:1;display:grid}.visual-guide__credit{color:var(--sparx-muted);margin-top:.75rem;font-size:.7rem;line-height:1.4;text-decoration:none;display:inline-block}.visual-guide__credit:hover{color:var(--sparx-brand);text-decoration:underline}.visual-guide :is(strong,code){color:var(--sparx-ink)}.visual-guide a:not(.visual-guide__credit){color:var(--sparx-brand);font-weight:650}@media (width>=680px){.visual-guide__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.visual-guide[data-items="1"]:not([data-orientation=landscape]) .visual-guide__item{grid-column:1/-1;grid-template-columns:minmax(0,1.05fr) minmax(14rem,.95fr);display:grid}.visual-guide[data-items="1"][data-orientation=landscape] .visual-guide__item{grid-column:1/-1}.visual-guide[data-items="3"] .visual-guide__item:last-child{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.visual-guide[data-items="1"]:not([data-orientation=landscape]) .visual-guide__body,.visual-guide[data-items="3"] .visual-guide__item:last-child .visual-guide__body{align-self:center;padding:1.25rem}.visual-guide[data-items="1"][data-orientation=landscape] .visual-guide__body{padding:1.15rem 1.25rem 1.25rem}.visual-guide[data-items="1"]:not([data-orientation=landscape]) .visual-guide__media,.visual-guide[data-items="3"] .visual-guide__item:last-child .visual-guide__media{height:100%}}@media (width<=679px){.visual-guide__grid{gap:.75rem}}}