/* Navigation hints (guide.js): the first-visit list under the title, the help button, the way back to the
   categories in the header, the filmstrip tab at the bottom edge, the line on the index and the film's key note. */
.guide{margin-top:14px;width:max-content;max-width:100%;background:#050f11c8;padding:12px 14px 10px;opacity:0;transition:opacity .9s 1.4s;font:500 var(--lab-size)/1.45 var(--label);letter-spacing:var(--lab-track);text-transform:uppercase;color:#e3ebe7}
.guide.on{opacity:1}body:not(.awake) .guide[data-woke]{opacity:0;pointer-events:none;transition-delay:0s;transition-duration:.4s}.guide:not(.on){transition-delay:0s;transition-duration:.35s}
.guide dl{display:grid;grid-template-columns:auto 1fr;gap:7px 18px;margin:0}
.guide dt{color:#fff;white-space:nowrap}.guide dd{margin:0;white-space:nowrap;color:#b9c7c2;text-transform:none;letter-spacing:0;font:400 14px/1.35 var(--serif)}
.guide .g-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding-top:9px;border-top:1px solid #ffffff22;color:#b9c7c2}
.guide button{background:none;border:1px solid #ffffff66;color:#fff;font:inherit;letter-spacing:inherit;text-transform:inherit;padding:6px 14px;min-height:32px;cursor:pointer}
.guide button:hover,.guide button:focus-visible{background:#ffffff1a;border-color:#fff}
.guide kbd,.rail-tab kbd{display:inline-block;font:500 10px var(--label);border:1px solid #ffffff66;border-bottom-width:2px;border-radius:4px;padding:1px 6px;min-width:20px;text-align:center;color:#fff}
.scene[data-ink=dark] .guide{background:#f6f7f2e0;color:#0b2023}.scene[data-ink=dark] .guide dt,.scene[data-ink=dark] .guide button,.scene[data-ink=dark] .guide kbd{color:#0b2023;border-color:#0b202366}.scene[data-ink=dark] .guide dd,.scene[data-ink=dark] .guide .g-foot{color:#34504b;border-top-color:#0b202322}
.watching .guide,.clean-view .guide,.carded .guide,.filming .guide{display:none}
@media(max-width:850px){.guide{width:auto;padding:10px 12px 8px}.guide dd{white-space:normal}.guide dl{gap:5px 14px}.guide dd{font-size:13px}}
.guide .g-short{margin:0;padding:0;border:0;gap:10px;text-transform:none;letter-spacing:0;font:400 14px/1.4 var(--serif)}
@media(max-height:560px) and (min-width:701px){.guide{display:none}}

/* header: the category goes back to the categories; ? opens the help */
.site-head .series{background:none;border:0;padding:0 2px;min-height:44px;cursor:pointer;font:inherit;font-family:var(--label);font-size:var(--lab-size);letter-spacing:var(--lab-track);text-transform:uppercase;color:var(--soft)}
.site-head .series .up{color:#ffffff99;border-bottom:1px solid transparent}.site-head .series:hover .up,.site-head .series:focus-visible .up{color:#fff;border-bottom-color:#fff}
.help-button{width:30px;height:30px;min-height:30px!important;padding:0!important;border:1px solid #ffffff55!important;border-radius:50%;display:grid;place-items:center;font:500 13px var(--label)!important;letter-spacing:0!important}
.help-button:hover,.help-button:focus-visible{border-color:#fff!important;background:#ffffff14}
body[data-topink=dark]:not(.at-home) .site-head .series .up{color:#0b2023aa}body[data-topink=dark]:not(.at-home) .site-head .series:hover .up{color:#0b2023;border-bottom-color:#0b2023}body[data-topink=dark]:not(.at-home) .help-button{border-color:#0b202366!important}

/* the filmstrip hides below the bottom edge on a computer: a small tab says it is there */
.rail-tab{position:fixed;z-index:19;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:#050f11b0;border:1px solid #ffffff2a;color:#e3ebe7;padding:6px 14px;min-height:32px;cursor:pointer;font:500 var(--lab-size) var(--label);letter-spacing:var(--lab-track);text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity var(--t2)}
.rail-tab i{width:7px;height:7px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:translateY(2px) rotate(45deg)}
.awake .rail-tab{opacity:1;pointer-events:auto}.rail-on .rail-tab,.watching .rail-tab,.clean-view .rail-tab,.holding .rail-tab,.carded .rail-tab,.at-home .rail-tab,.hunting .rail-tab{opacity:0!important;pointer-events:none!important}
.rail-tab:hover,.rail-tab:focus-visible{background:#050f11e0;border-color:#ffffff66}
@media(max-width:850px),(pointer:coarse){.rail-tab{display:none}}

/* the index: one quiet line on how to use it, until a category has been opened */
.ix-hint{margin:22px 0 0 calc(2.2em + 18px);font:400 15px/1.4 var(--serif);font-style:italic;color:#c9d5d0;text-shadow:0 1px 10px #000c}
@media(max-width:850px),(pointer:coarse){.ix-hint{display:none}}

/* the film: how to pause and stop, in the black bar at the bottom for the first seconds */
.fm-keys{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);margin:0;font:500 var(--lab-size) var(--label);letter-spacing:var(--lab-track);text-transform:uppercase;color:#a9bab5;opacity:0;white-space:nowrap;pointer-events:none}
.fm-keys.on{animation:fm-keys 7s ease both}
@keyframes fm-keys{0%,10%{opacity:0}20%,80%{opacity:.85}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.fm-keys.on{animation:none;opacity:.85}}

/* help dialog: moving around first, then the keys (not shown on a touch screen) */
.keys .k-sub{font:500 var(--lab-size) var(--label);letter-spacing:var(--lab-track);text-transform:uppercase;color:var(--soft);margin:22px 0 10px}
.keys .k-move dt{font:500 var(--lab-size)/1.9 var(--label);letter-spacing:var(--lab-track);text-transform:uppercase;color:var(--paper)}
@media(pointer:coarse){.keys .k-sub,.keys .k-keys{display:none}}
.guide:has(.g-short){margin-top:8px;padding:7px 10px}.guide .g-short button{min-height:28px;padding:4px 12px}