/* Guides: a keyed-out figure on the bottom-left edge and a plate that types. Slices arrive on twos and leave the
   same way; the hairline draws across the plate's top. Hidden with the interface in immersive mode. */
#osguides { position: fixed; right: 28px; bottom: 76px; z-index: 60; pointer-events: none; }
.guide { position: relative; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 14px; pointer-events: auto; opacity: 0; transform: translateY(12px); }
.guide.in { opacity: 1; transform: none; transition: opacity .28s var(--ease, ease), transform .36s var(--ease, ease); }
.guide.out { opacity: 0; transform: translateY(8px); transition: opacity .32s ease, transform .32s ease; }
.gd-fig { position: relative; margin: 0; height: 232px; flex: none; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5)); }
.gd-fig img { height: 232px; width: auto; display: block; }
.gd-fig img + img { position: absolute; left: 0; top: 0; }
.gd-fig.vec { height: auto; }
.guide:not(.still) .gd-fig img { opacity: 0; transform: translateX(calc((var(--i) - 3.5) * 6px)); }
.guide.in:not(.still) .gd-fig img { opacity: 1; transform: none; transition: transform .42s steps(4, end), opacity .2s steps(2, end); transition-delay: calc(var(--i) * 32ms); }
.guide.out:not(.still) .gd-fig img { opacity: 0; transform: translateX(calc((3.5 - var(--i)) * 10px)); transition: transform .3s steps(3, end), opacity .18s steps(2, end); transition-delay: calc((7 - var(--i)) * 18ms); }
.gd-plate { position: relative; max-width: 380px; padding: 12px 14px 10px; margin-bottom: 14px; background: rgba(14, 15, 18, .84); border: 1px solid var(--line); border-radius: 4px; backdrop-filter: blur(10px); color: var(--bone); }
.gd-plate::before { content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 1px; background: var(--bone); transform-origin: left; transform: scaleX(0); }
.guide.in .gd-plate::before { transform: scaleX(1); transition: transform .6s var(--ease, ease) .1s; }
.gd-plate .eyebrow { display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
.gd-plate .dot.b, .st-say .dot.b { background: #2E7BFF; }
.gd-line { margin: 8px 0 0; font: 700 17px/1.25 'Doto', var(--mono); color: var(--bone); min-height: 1.25em; }
.gd-line::after { content: ''; display: inline-block; width: .5em; height: 1em; vertical-align: -.15em; margin-left: 2px; background: var(--bone); animation: gd-caret 1s steps(2) infinite; }
.gd-line.done::after { display: none; }
.gd-sub { margin: 6px 0 0; font: 400 12px/1.45 var(--sans); color: var(--bone-70); opacity: 0; transform: translateY(3px); }
.gd-sub.on { opacity: 1; transform: none; transition: opacity .3s, transform .3s; }
.gd-foot { display: flex; align-items: center; gap: 14px; margin-top: 10px; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-45); }
.gd-foot b { color: var(--bone-70); font-weight: 500; border: 1px solid var(--line); border-radius: 3px; padding: 3px 5px; margin-right: 6px; }
.gd-prog { margin-left: auto; }
@keyframes gd-caret { 50% { opacity: 0; } }
/* TV hides guide plates to keep its screen clean (Codex's rule, kept). The dock's tip is the exception: it says how to
   leave TV at all, it is said once, and a Katari with no words would count as told. */
body.in-rotation-channel.gd-dock #osguides .gd-plate { display: block; }
/* while Katari points out where the dock rests, the line it waits on breathes */
body.gd-dock #dockhandle.show { animation: gd-handle 1.8s ease-in-out infinite; }
@keyframes gd-handle { 0%, 100% { filter: none; } 50% { filter: brightness(2.4) drop-shadow(0 0 6px rgba(255, 250, 248, .7)); } }
body.immersive #osguides, body.chart-open #osguides { opacity: 0; transition: opacity .6s; }
@media (max-width: 900px) { #osguides { right: 12px; bottom: 60px; } .gd-fig, .gd-fig img { height: 150px; } .gd-plate { max-width: 240px; } }
@media (prefers-reduced-motion: reduce) { .gd-fig img { transition: none !important; } .gd-line::after { animation: none; } body.gd-dock #dockhandle.show { animation: none; filter: brightness(2); } }