.guide-image-open{--guide-cursor-x: 50%;--guide-cursor-y: 50%;position:relative;display:block;width:100%;padding:0;color:inherit;text-align:left;background:transparent;border:0;border-radius:var(--radius);cursor:pointer}.guide-image-open--portrait{width:min(100%,26rem);margin-inline:auto}.guide-image-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.guide-image-open img{display:block;width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-sunken)}.guide-image-open__action{position:absolute;right:.75rem;bottom:.75rem;padding:.4rem .65rem;color:var(--bg);font-size:.75rem;font-weight:600;background:color-mix(in srgb,var(--fg) 88%,transparent);border-radius:999px;opacity:0;transform:translateY(.25rem);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}.guide-image-open:hover .guide-image-open__action,.guide-image-open:focus-visible .guide-image-open__action{opacity:1;transform:translateY(0)}.guide-image-open__cursor{display:none}@media(hover:hover)and (pointer:fine){.guide-image-open{cursor:none}.guide-image-open__cursor{position:absolute;z-index:2;left:var(--guide-cursor-x);top:var(--guide-cursor-y);display:grid;place-items:center;width:3.25rem;height:3.25rem;color:var(--bg);background:color-mix(in srgb,var(--fg) 86%,transparent);border:1px solid color-mix(in srgb,var(--bg) 42%,transparent);border-radius:50%;box-shadow:0 .65rem 2rem #00000038;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.72);transition:opacity .18s var(--ease),transform .22s var(--ease)}.guide-image-open__cursor svg{width:1.35rem;height:1.35rem;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.guide-image-open:hover .guide-image-open__cursor{opacity:1;transform:translate(-50%,-50%) scale(1)}.guide-image-open:hover .guide-image-open__action{opacity:0}}.guide-viewer{position:fixed;inset:0;width:min(92vw,100rem);max-width:none;height:min(86vh,62rem);max-height:none;margin:auto;padding:0;color:var(--fg);background:var(--bg-raised);border:1px solid var(--line-strong);border-radius:var(--radius);box-shadow:0 1.5rem 5rem #00000059}.guide-viewer[open]{animation:guide-viewer-in .56s cubic-bezier(.16,1,.3,1) both}.guide-viewer[data-mode=mobile]{width:min(92vw,34rem);height:min(90vh,64rem)}.guide-viewer[data-mode=mobile] .guide-viewer__shell,.guide-viewer[data-mode=mobile] .guide-viewer__bar,.guide-viewer[data-mode=mobile] .guide-viewer__stage{min-width:0}.guide-viewer[data-mode=mobile] .guide-viewer__stage{padding-inline:clamp(.6rem,2vw,1rem)}.guide-viewer::backdrop{background:#141210b8;backdrop-filter:blur(9px)}.guide-viewer[open]::backdrop{animation:guide-backdrop-in .64s ease-out both}.guide-viewer.is-closing{animation:guide-viewer-out .28s ease-in both}.guide-viewer.is-closing::backdrop{animation:guide-backdrop-out .28s ease-in both}@keyframes guide-viewer-in{0%{opacity:0;transform:translateY(2.5rem) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes guide-backdrop-in{0%{background:#14121000;backdrop-filter:blur(0)}to{background:#141210b8;backdrop-filter:blur(9px)}}@keyframes guide-viewer-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(1.5rem) scale(.98)}}@keyframes guide-backdrop-out{0%{background:#141210b8;backdrop-filter:blur(9px)}to{background:#14121000;backdrop-filter:blur(0)}}.guide-viewer__shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:100%}.guide-viewer__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border-bottom:1px solid var(--line)}.guide-viewer__title{min-width:0;margin:0;overflow:hidden;font-size:.875rem;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.guide-viewer__controls{display:flex;flex:none;align-items:center;gap:.35rem}.guide-viewer__controls button,.guide-viewer__controls output{display:grid;place-items:center;min-width:2.25rem;min-height:2.25rem;padding:.35rem .55rem;color:inherit;font:inherit;font-size:.8125rem;background:var(--bg-sunken);border:1px solid var(--line);border-radius:999px}.guide-viewer__controls button{cursor:pointer}.guide-viewer__controls button:hover{border-color:var(--line-strong)}.guide-viewer__close svg{width:1rem;height:1rem;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.guide-viewer__stage{display:block;overflow:auto;padding:1rem;background:var(--bg-sunken)}.guide-viewer__stage img{display:block;width:100%;max-width:none;height:auto;margin-inline:auto;border:0;border-radius:0;background:var(--bg)}.guide-viewer[data-shape=portrait] .guide-viewer__stage img{width:min(100%,42rem)}.guide-viewer[data-mode=mobile] .guide-viewer__stage img{width:100%}.guide-viewer__hint{margin:0;padding:.6rem .9rem;color:var(--fg-faint);font-size:.75rem;text-align:center;border-top:1px solid var(--line)}@media(max-width:40rem){.guide-viewer{width:96vw;height:88vh}.guide-viewer__title,.guide-viewer__reset,.guide-viewer__hint{display:none}}:root[data-theme=light] .guide-viewer,:root[data-theme=light] .guide-viewer__stage,:root[data-theme=light] .guide-viewer__controls button,:root[data-theme=light] .guide-viewer__controls output{background:var(--bg)}@media(prefers-reduced-motion:reduce){.guide-viewer[open],.guide-viewer[open]::backdrop,.guide-viewer.is-closing,.guide-viewer.is-closing::backdrop{animation:none}.guide-image-open{cursor:pointer}.guide-image-open__cursor{display:none}}
