body.has-first-visit:not(.tour-paused){overflow:hidden}.tour-shade{position:fixed;inset:0;z-index:1080;background:rgba(16,23,18,.64);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);pointer-events:auto;animation:tour-dim-in 180ms ease-out both}.tour-shade[hidden]{display:none}
.first-visit{box-sizing:border-box;z-index:10000;color:#23382b;font:15px/1.45 Arial,sans-serif}.first-visit *{box-sizing:border-box}.tour-top{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.tour-progress{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#658066}.tour-skip{font:12px Arial;color:#658066;background:none;border:0;padding:8px;cursor:pointer}.first-visit h2{font:400 29px/1.08 'Canela Trial',Georgia,serif!important;color:#23382b!important;margin:0 0 12px!important}.first-visit h2:focus{outline:none}.tour-copy{margin:0 0 12px;max-width:55ch}.tour-waiting{font-size:12px;color:#5d6d5d;margin:0 0 16px}.tour-next{min-height:44px;font:600 13px Arial;background:#2f4936;color:white;border:0;border-radius:3px;padding:12px 16px;cursor:pointer}.tour-next:disabled{background:#e0e6da;color:#7b8476;cursor:default}.first-visit button:focus-visible{outline:3px solid #75966a;outline-offset:3px}.tour-up-next[hidden]{display:none}
body.has-first-visit:not(.tour-paused) .first-visit{position:fixed;top:var(--tour-top,18px);left:50%;transform:translateX(-50%);width:min(960px,calc(100% - 40px));padding:22px 26px;background:white;border:0;display:grid;grid-template-columns:1fr auto;column-gap:35px;border-bottom:1px solid #ddd;border-radius:6px 6px 0 0}body.has-first-visit:not(.tour-paused) .tour-progress,body.has-first-visit:not(.tour-paused) h2,body.has-first-visit:not(.tour-paused) .tour-copy{grid-column:1}body.has-first-visit:not(.tour-paused) .tour-waiting{grid-column:2;grid-row:2;align-self:end;max-width:200px}body.has-first-visit:not(.tour-paused) .tour-next{grid-column:2;grid-row:3;align-self:start}body.has-first-visit:not(.tour-paused) .tour-target .hp-rail{max-width:100%}body.has-first-visit:not(.tour-paused) .tour-target .fr-order{overflow-x:auto!important}
@media(max-width:700px){body.has-first-visit:not(.tour-paused) .first-visit{top:var(--tour-top,8px);width:calc(100% - 20px);padding:16px;display:block;font-size:13px}.first-visit h2{font-size:24px!important}.tour-top{margin-bottom:8px}.tour-waiting{max-width:none!important;margin-bottom:10px}.tour-next{font-size:12px}.first-visit{max-height:calc(100dvh - 80px);overflow:auto}}@media(prefers-reduced-motion:reduce){.tour-target,.first-visit{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* A short dim-first entrance; existing practice steps retain their geometry. */
body.has-first-visit:not(.tour-paused) .first-visit{box-shadow:0 -8px 50px #10201714}
body.has-first-visit:not(.tour-paused) .tour-target{box-shadow:0 18px 50px #10201724}
.tour-skip{min-height:40px;padding:9px 13px;border:1px solid #c7d0c1;border-radius:3px;background:#fff;color:#3f5742}
body.tour-entering .first-visit,body.tour-entering .tour-target{opacity:0;translate:0 10px;pointer-events:none!important;transition:opacity 320ms ease,translate 320ms cubic-bezier(.2,.7,.2,1)}
body.tour-entering.tour-revealing .first-visit,body.tour-entering.tour-revealing .tour-target{opacity:1;translate:0 0;pointer-events:auto!important}
@keyframes tour-dim-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.tour-shade{animation:none!important}body.tour-entering .first-visit,body.tour-entering .tour-target{opacity:1;translate:none;transition:none!important;pointer-events:auto!important}}

/* A dedicated welcome before the five native practice steps. */
.tour-meter{grid-column:1/-1;width:100%;height:3px;margin:0 0 20px;appearance:none;border:0;background:#e5e9e1;color:#657d59;accent-color:#657d59}.tour-meter::-webkit-progress-bar{background:#e5e9e1}.tour-meter::-webkit-progress-value{background:#657d59}.tour-meter::-moz-progress-bar{background:#657d59}.tour-meter[hidden],.tour-outline[hidden],.tour-waiting[hidden]{display:none!important}
body.has-first-visit:not(.tour-paused) .first-visit .tour-waiting{grid-row:3}body.has-first-visit:not(.tour-paused) .first-visit .tour-next{grid-row:4}
body.has-first-visit:not(.tour-paused) .first-visit.tour-intro{display:block;width:min(620px,calc(100% - 32px));padding:38px 42px;border-radius:9px;max-height:calc(100dvh - 24px);overflow:auto}.tour-intro .tour-top{margin-bottom:24px}.first-visit.tour-intro h2{font-size:36px!important;max-width:16ch}.tour-intro .tour-copy{font-weight:400;line-height:1.65;color:#59665b;margin-bottom:26px}.tour-outline{list-style:none;counter-reset:tour;display:grid;gap:18px;padding:0;margin:0 0 30px}.tour-outline li{counter-increment:tour;display:grid;grid-template-columns:30px 1fr;column-gap:12px;row-gap:3px}.tour-outline li:before{content:counter(tour,decimal-leading-zero);grid-row:1/3;font-size:11px;color:#74816e;padding-top:3px}.tour-outline strong{font-size:14px;font-weight:600}.tour-outline span{font-size:13px;color:#657064}.tour-intro .tour-next{width:100%;min-height:48px}
@media(max-width:700px){body.has-first-visit:not(.tour-paused) .first-visit.tour-intro{padding:26px 24px}.first-visit.tour-intro h2{font-size:30px!important}.tour-meter{margin-bottom:16px}.tour-intro .tour-copy{font-size:14px}.tour-outline{gap:16px}}

/* Visual quests use native controls; the miniature is a noninteractive demonstration. */
.tour-cue{grid-column:1/-1;display:flex;align-items:center;gap:16px;padding:14px 18px;margin-top:14px;background:#f0f3ec;border-radius:5px;min-height:58px}.tour-cue[hidden]{display:none!important}.tour-cue strong{font:600 13px/1.4 Arial,sans-serif}.tour-heart-goal{display:flex;gap:8px;font-size:30px;color:#9ba792;line-height:1}.tour-heart-goal .is-filled{color:#536e43}.tour-cue.is-complete{background:#e9f0e2;color:#38552e}.tour-check{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#587548;color:white}.tour-target .hp-heart.tour-action{outline:2px solid #78985d;outline-offset:5px;animation:tour-tap-cue 1.8s ease-out infinite}.tour-target [data-rank-id].tour-action{outline:2px dashed #78985d;outline-offset:4px;cursor:grab}.tour-target [data-rank-id].tour-action:active{cursor:grabbing}.tour-drag-demo{position:relative;width:105px;height:72px;flex-shrink:0;pointer-events:none}.tour-demo-card{position:absolute;top:4px;width:40px;height:58px;border-radius:3px;overflow:hidden;background:#d4dbc9;box-shadow:0 3px 6px #1b291c26;display:grid;place-items:center}.tour-demo-card img{width:100%;height:100%;object-fit:cover}.tour-demo-card:first-child{left:5px;animation:tour-card-yield 3.6s ease-in-out infinite}.tour-demo-card:nth-child(2){left:57px;z-index:2;animation:tour-card-drag 3.6s ease-in-out infinite}.tour-demo-hand{position:absolute;left:67px;top:43px;z-index:3;border-radius:50%;background:#fff;color:#30492b;box-shadow:0 1px 5px #15271333;font:20px Arial;width:27px;height:27px;text-align:center;animation:tour-hand-drag 3.6s ease-in-out infinite}.tour-drag-caption{display:grid;gap:4px}.tour-drag-caption>span{font:12px Arial;color:#66715f}
@keyframes tour-tap-cue{0%,100%{box-shadow:0 0 0 0 #829c6040}65%{box-shadow:0 0 0 9px #829c6000}}
@keyframes tour-card-drag{0%,18%,92%,100%{transform:none}30%{transform:translateY(-5px) rotate(-5deg)}60%,76%{transform:translate(-52px,-5px) rotate(-5deg)}82%{transform:translateX(-52px)}}
@keyframes tour-card-yield{0%,30%,92%,100%{transform:none}60%,82%{transform:translateX(52px)}}
@keyframes tour-hand-drag{0%,18%,92%,100%{transform:none;opacity:0}30%{transform:translateY(-5px);opacity:1}60%,76%{transform:translate(-52px,-5px);opacity:1}82%{transform:translateX(-52px);opacity:0}}
@media(prefers-reduced-motion:reduce){.tour-target .tour-action,.tour-demo-card,.tour-demo-hand{animation:none!important}.tour-demo-hand{opacity:1}}
@media(max-width:700px){.tour-cue{padding:12px;gap:12px}.tour-cue strong{font-size:12px}.tour-heart-goal{font-size:26px}}

/* Quiet demonstration: animation is the instruction. */
.tour-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.tour-cue,.tour-cue.is-complete{background:none;padding:0;min-height:80px;height:80px;margin:8px 0 0;justify-content:center;flex-shrink:0}.tour-check{width:32px;height:32px}.tour-heart-goal{font-size:34px;gap:15px}.tour-cue .tour-drag-demo{height:72px}.tour-intro .tour-copy{margin-bottom:26px}.first-visit.tour-intro h2{max-width:none}

/* The task lives in the next button; a dedicated example demonstrates it. */
.tour-cue,.tour-cue.is-complete{height:108px;min-height:108px;display:flex;flex-direction:column;gap:9px;border-top:1px solid #e8e9e4;padding-top:12px;margin-top:10px;justify-content:flex-start}.tour-example-label{font:10px/1 Arial,sans-serif;letter-spacing:.11em;text-transform:uppercase;color:#7b8076}.tour-next{min-width:200px}.tour-next:disabled{background:#eceee7;color:#4d5b44;border:1px solid #dce1d2;opacity:1}.tour-target .hp-heart.tour-action{outline:none;box-shadow:none;animation:tour-heart-invite 2.1s ease-in-out infinite}.tour-target [data-rank-id].tour-action{outline:none;animation:tour-poster-invite 2.8s ease-in-out infinite}.tour-target .tour-action:hover,.tour-target .tour-action:focus,.tour-target .tour-action:active{animation:none!important;translate:none;rotate:none}.tour-target .tour-action:focus-visible{outline:2px solid currentColor;outline-offset:3px}.tour-like-demo{position:relative;width:64px;height:68px;pointer-events:none}.tour-like-empty,.tour-like-filled{position:absolute;inset:0;display:grid;place-items:center;font:52px/1 Arial;color:#536049}.tour-like-filled{animation:tour-like-fill 2.6s ease-in-out infinite}.tour-tap-finger{position:absolute;right:0;bottom:0;width:22px;height:25px;background:#fff;border-radius:50%;box-shadow:0 1px 5px #15271324;text-align:center;animation:tour-like-tap 2.6s ease-in-out infinite}.tour-cue.is-complete *{animation-play-state:paused!important}
@keyframes tour-heart-invite{0%,65%,100%{scale:1}76%{scale:1.13}86%{scale:1}}
@keyframes tour-poster-invite{0%,60%,100%{translate:0 0;rotate:0deg}72%{translate:0 -5px;rotate:-2deg}84%{translate:3px -5px;rotate:1deg}}
@keyframes tour-like-fill{0%,35%,90%,100%{opacity:0;scale:1}45%{opacity:1;scale:1.12}55%,80%{opacity:1;scale:1}}
@keyframes tour-like-tap{0%,15%,90%,100%{opacity:0;translate:3px 5px}30%,65%{opacity:1;translate:-6px -7px}80%{opacity:0;translate:3px 5px}}
@media(prefers-reduced-motion:reduce){.tour-target .hp-heart.tour-action,.tour-target [data-rank-id].tour-action,.tour-like-filled,.tour-tap-finger{animation:none!important}.tour-like-filled{opacity:1}}
@media(max-width:700px){.tour-next{width:100%;min-width:0}}

/* Demonstrate the same poster + heart relationship as the actual film cards. */
.tour-cue.tour-poster-example{height:151px;min-height:151px}.tour-poster-like-demo{position:relative;width:72px;height:108px;pointer-events:none}.tour-example-art{width:72px;height:108px;object-fit:cover;display:block;border-radius:2px;box-shadow:0 3px 8px #17211826}.tour-example-heart{position:absolute;right:4px;bottom:5px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 1px 4px #15201326;animation:tour-poster-heart 3s ease-in-out infinite}.tour-example-heart svg{width:17px;height:17px;fill:transparent;stroke:#665d58;stroke-width:1.5;animation:tour-poster-fill 3s ease-in-out infinite}.tour-example-pointer{position:absolute;right:-4px;bottom:-8px;width:23px;height:27px;filter:drop-shadow(0 1px 2px #0003);animation:tour-poster-tap 3s ease-in-out infinite}.tour-example-pointer svg{width:100%;height:100%;fill:#fff;stroke:#363d36;stroke-width:1.3;stroke-linejoin:round}
@keyframes tour-poster-fill{0%,33%,94%,100%{fill:transparent;stroke:#665d58}42%,84%{fill:#aa344c;stroke:#aa344c}}
@keyframes tour-poster-heart{0%,32%,55%,100%{scale:1}40%{scale:.91}48%{scale:1.08}}
@keyframes tour-poster-tap{0%,12%,92%,100%{opacity:0;translate:7px 9px}28%,35%{opacity:1;translate:0 0}42%,62%{opacity:1;translate:0 -2px}78%{opacity:0;translate:7px 9px}}
@media(prefers-reduced-motion:reduce){.tour-example-heart,.tour-example-heart svg,.tour-example-pointer{animation:none!important}.tour-example-heart svg{fill:#aa344c;stroke:#aa344c}}

/* The demonstration now happens on the actual interactive control. */
.tour-inplace-pointer{position:absolute;right:-8px;bottom:-12px;width:26px;height:31px;z-index:5;pointer-events:none;filter:drop-shadow(0 2px 2px #0003);animation:tour-poster-tap 3s ease-in-out infinite}.tour-inplace-pointer svg{display:block;width:100%;height:100%;fill:white!important;stroke:#363d36!important;stroke-width:1.3;stroke-linejoin:round}.tour-target .hp-heart.tour-action>svg{animation:tour-poster-fill 3s ease-in-out infinite}.tour-inplace-pointer.is-drag{right:12px;bottom:22px;animation:tour-native-drag 2.8s ease-in-out infinite}.tour-target [data-rank-id].tour-action{position:relative;overflow:visible}.tour-action:hover>.tour-inplace-pointer,.tour-action:focus>.tour-inplace-pointer,.tour-action:active>.tour-inplace-pointer{display:none}.tour-target .hp-heart.tour-action:hover>svg,.tour-target .hp-heart.tour-action:focus>svg,.tour-target .hp-heart.tour-action:active>svg{animation:none}
@keyframes tour-native-drag{0%,55%,100%{opacity:0;translate:0 0}65%{opacity:1;translate:0 0}82%{opacity:1;translate:12px -5px}92%{opacity:0;translate:12px -5px}}
@media(prefers-reduced-motion:reduce){.tour-inplace-pointer,.tour-target .hp-heart.tour-action>svg{animation:none!important}.tour-inplace-pointer{opacity:1}}

/* Spotlight study: the live controls stay in their original document positions. */
body.has-first-visit.tour-spotlight:not(.tour-paused){overflow:auto}body.has-first-visit.tour-spotlight .tour-shade{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;animation:none}.tour-shield{position:fixed;background:rgba(16,23,18,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);pointer-events:auto}.tour-window{display:none}body.has-first-visit.tour-spotlight:not(.tour-paused) .first-visit{top:var(--spot-top,12px);left:var(--spot-left,12px);transform:none;width:min(360px,calc(100% - 24px));padding:20px 22px;display:block;border:1px solid #e3e6dc;border-radius:7px;box-shadow:0 12px 45px #0003;max-height:calc(100dvh - 24px);overflow:auto}body.has-first-visit.tour-spotlight .first-visit h2{font-size:25px!important}body.has-first-visit.tour-spotlight .tour-copy{font-size:13px;font-weight:400}body.has-first-visit.tour-spotlight .tour-next{width:100%;margin-top:5px}body.has-first-visit.tour-spotlight .tour-target{box-shadow:none!important}body.has-first-visit.tour-spotlight .tour-target{opacity:1!important;translate:none!important;transition:none!important;pointer-events:auto!important}

/* A stable instruction dock and one continuous journey between sections. */
body.has-first-visit.tour-spotlight:not(.tour-paused) .first-visit{width:min(480px,calc(100% - 24px));padding:18px 22px;transition:opacity .2s ease;box-shadow:0 12px 48px #0004}.tour-spotlight .tour-window{position:fixed;display:block;border:1px solid #ffffff40;border-radius:12px;pointer-events:none;box-sizing:border-box}.tour-travelling .tour-shade{background:rgba(16,23,18,.44)!important;backdrop-filter:blur(2px)!important;-webkit-backdrop-filter:blur(2px)!important}.tour-travelling .tour-shield,.tour-travelling .tour-window{visibility:hidden}.tour-travelling .tour-next{pointer-events:none}.tour-travelling .tour-inplace-pointer{visibility:hidden}.tour-spotlight .tour-top{margin-bottom:8px}.tour-spotlight .tour-meter{margin-bottom:12px}.tour-spotlight .first-visit h2{margin-bottom:8px!important}.tour-spotlight .tour-copy{margin-bottom:10px}

.tour-next.tour-quota{position:relative;overflow:hidden}.tour-next.tour-quota:disabled{background:linear-gradient(90deg,#dce7d2 var(--quest-progress,0%),#eceee7 var(--quest-progress,0%));color:#3e5036}.tour-next.tour-quota:after{content:'';position:absolute;bottom:0;left:0;height:4px;width:var(--quest-progress,0%);background:#688851;transition:width .3s cubic-bezier(.2,.8,.2,1)}.tour-next.tour-quota:not(:disabled):after{background:#a7c28a}@media(prefers-reduced-motion:reduce){.tour-next.tour-quota:after{transition:none}}

body.has-first-visit{overflow-anchor:none}.tour-target .films-add-tile.tour-action{animation:tour-poster-invite 2.8s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.tour-target .films-add-tile.tour-action{animation:none}}

.fr-tutorial-label{font:11px/1.4 Arial,sans-serif;color:#737a6c;margin:5px 0 18px}

.fr-tutorial-label{display:block;margin:6px 0 0;text-transform:none;letter-spacing:0;font-weight:400}

/* Keep the native drag affordance alive until actual pointer/keyboard takeover. */
.tour-target [data-rank-id].tour-action,.tour-target [data-rank-id].tour-action:hover{animation:tour-rank-rehearsal 3.2s ease-in-out infinite!important}.tour-target .fr-item:nth-child(odd) [data-rank-id].tour-action{animation-delay:.35s!important}
@keyframes tour-rank-rehearsal{0%,12%,100%{translate:0 0;rotate:0deg}28%,40%{translate:0 -7px;rotate:-2deg}62%,75%{translate:12px -7px;rotate:1deg}88%{translate:0 -3px;rotate:0deg}}
.tour-modal-coach{padding:14px 18px;margin:12px 0 20px;background:#f1f2ed;border-radius:5px;color:#3f4c39}.tour-modal-coach>span{font:10px/1.4 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}.tour-modal-coach p{font:14px/1.5 Arial,sans-serif;margin:5px 0 0}.tour-modal-target{animation:tour-field-invite 2.6s ease-in-out infinite}.tour-modal-target:focus-within{animation:none}
@keyframes tour-field-invite{0%,65%,100%{translate:0 0}76%{translate:0 -3px}88%{translate:0 0}}
@media(prefers-reduced-motion:reduce){.tour-target [data-rank-id].tour-action,.tour-target [data-rank-id].tour-action:hover,.tour-modal-target{animation:none!important}}