/* Homepage storybook. Stage = fixed 1100x640 CSS px (Inter, the app's real text sizes), scaled uniformly by --k when the slot is narrower. */
:root{--paper:#f7f8f5;--card:#ffffff;--ink:#17241f;--mute:#65716c;--line:#dfe4df;--line-dk:#cdd4ce;--green:#146341;--green-dk:#0d4930;--green-soft:#e8f1eb;--slate:#172b23;--green-on-dark:#8fc09f;--r-pill:999px;--shadow-card:0 8px 26px rgb(23 36 31 / .06);--scene-font:Inter,'Inter Fallback',system-ui,sans-serif;
--spool:cubic-bezier(.65,0,.35,1);--enter:cubic-bezier(.2,.8,.2,1);--panel-shadow:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1)}
.scene{position:relative;font-family:var(--scene-font);color:var(--ink);-webkit-font-smoothing:antialiased}
.story{max-width:1100px;margin-inline:auto}
.scene__win{position:relative;width:100%;aspect-ratio:1100/640;background:#e5e7eb;border-radius:20px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 28px 65px rgb(23 36 31 / .11)}
.scene__stage,.scene__stage *{box-sizing:border-box}
.scene__stage{position:absolute;left:0;top:0;width:1100px;height:640px;transform:scale(var(--k,1));transform-origin:0 0;font-size:13px}
.scene--seeking .scene__stage *,.scene--seeking.scene__win,.scene--static .scene__stage *{transition:none!important;animation:none!important}
.world{position:absolute;inset:0}
/* chapter layers: the incoming one fades in over the move (map: 30-90 %) or crossfades with a slight scale (others); the outgoing one stays until it ends */
.ch{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 0s}
.ch.is-flat{transform:scale(.98)}
.ch.cur{opacity:1;visibility:visible;z-index:2}
.ch.is-map.cur{transition:opacity calc(var(--tr) * .6) linear calc(var(--tr) * .3)}
.ch.is-flat.cur{transform:none;transition:opacity 900ms var(--spool),transform 900ms var(--spool)}
.ch.prev{opacity:1;visibility:visible;z-index:1}
.ch.is-flat.prev{transform:none}   /* the outgoing layer keeps its size: no 2 % snap */
.ch.noanim,.ch.noanim *{transition:none!important;animation:none!important}
.ch.prev :is(.pn,.cc,.pill,.cursor,.capcard,.mk__svg,.mcp__body){opacity:0!important;transition:opacity 350ms linear!important}
/* real captures */
.fr{position:absolute;left:0;top:0;width:1100px;height:640px;max-width:none;transform-origin:50% 50%;will-change:transform;transition:opacity 1100ms linear}
.pn{position:absolute;max-width:none;border-radius:12px;transition:opacity 350ms linear,transform 350ms linear}
/* caption cards (inside the stage) */
.capcard{position:absolute;max-width:300px;padding:14px;background:var(--card);border:1px solid #e5e7eb;border-radius:12px;box-shadow:var(--panel-shadow);opacity:0;transition:opacity 350ms linear;z-index:6}
.ch.cur .capcard{opacity:1;transition:opacity 600ms var(--enter) calc(var(--tr) * .7)}
.capcard b{display:block;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink)}
.capcard span{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--mute)}
.pos-bl{left:16px;bottom:16px}.pos-br{right:16px;bottom:16px}.pos-tl{left:16px;top:16px}.pos-tr{right:16px;top:16px}
/* chapter bar, credit, single pause control (page UI under the window) */
.story__bar{display:flex;justify-content:flex-end;align-items:center;margin-top:12px}
.scene-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.credit{margin-top:6px;text-align:right;font-size:11px;color:var(--mute)}
.credit a{color:inherit}
.scene--static .scene-toggle{display:none}
.scene-toggle{flex:none;width:32px;height:32px;padding:0;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.scene-toggle svg{width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.scene-toggle .ic-pause{fill:none}
.scene-toggle[aria-pressed="false"] .ic-play,.scene-toggle[aria-pressed="true"] .ic-pause{display:none}
/* cursor: x on the spool curve, y on a slightly different one, so the path arcs; the tap ripple is a short animation */
.cursor{position:absolute;left:0;top:0;z-index:5;transform:translateX(var(--x,0px));transition:transform 1100ms var(--spool),opacity 350ms linear}
.cursor .cy{display:block;transform:translateY(var(--y,0px));transition:transform 1100ms cubic-bezier(.45,0,.25,1)}
.cursor svg{display:block;width:18px;height:22px;fill:var(--ink);stroke:var(--card);stroke-width:1.2;stroke-linejoin:round;overflow:visible}
.cursor svg.pen{width:22px;height:22px;fill:var(--card);stroke:var(--ink);stroke-width:1.4;margin:-20px 0 0 -2px}
.cursor__tap{position:absolute;left:-14px;top:-14px;width:32px;height:32px;border-radius:50%;background:#0080a0;opacity:0}
@keyframes lw-tap{0%{opacity:.35;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
.tap-on .cursor__tap{animation:lw-tap 700ms ease-out both}
/* search pill, text segments, dots */
.pill{position:absolute;display:flex;align-items:center;background:var(--card);border:1px solid #e5e7eb;border-radius:var(--r-pill);padding:10px 20px;box-shadow:var(--shadow-card);font-size:14px;font-weight:500;white-space:nowrap;transition:opacity 350ms linear,transform 350ms linear}
.seg{transition:opacity 120ms linear;white-space:pre}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
/* Landware Connect card (app panel: white, 1px grey border, 12px radius, shadow-xl) over a dimmed map capture */
.dim{position:absolute;inset:0;background:rgb(0 0 0 / .15)}
.cc{position:absolute;left:360px;top:60px;width:380px;background:var(--card);border:1px solid #e5e7eb;border-radius:12px;box-shadow:var(--panel-shadow);color:#1f2937;font-size:13px;overflow:hidden;transition:opacity 350ms linear,transform 350ms linear}
.cc__h{padding:12px 16px;border-bottom:1px solid #f3f4f6;font-size:14px;font-weight:600}
.cc__r{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid #f3f4f6}
.cc__r span:last-child{display:flex;align-items:center;gap:8px;color:#1f2937}
.cc .dot{background:var(--green)}
.cc__btn{display:block;position:relative;overflow:hidden;margin:12px 16px 16px;padding:9px 0;border-radius:6px;background:#0080a0;color:var(--card);font-size:13px;font-weight:600;text-align:center}
@media (prefers-reduced-motion:reduce){.scene__stage *{transition:none!important;animation:none!important}.scene-toggle{display:none}}