.story-sequence{height:calc(var(--viewport-height) + var(--story-travel));position:relative;background:#171c21}
.scene{height:var(--viewport-height);position:sticky;top:0;overflow:hidden;isolation:isolate;color:#fff}
.hero-visual{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-photo{height:100%;width:100%;max-width:none;object-fit:cover;object-position:65% 50%;transform-origin:67% 48%;will-change:transform}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,24,.87) 0%,rgba(12,18,24,.76) 20%,rgba(12,18,24,.35) 48%,rgba(12,18,24,.06) 75%),linear-gradient(0deg,rgba(9,15,20,.56),transparent 23%,transparent 80%,rgba(9,15,20,.33))}
.hero-shade-extra{position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,rgba(10,16,23,.18),transparent 70%)}
.ambient-note{position:absolute;top:calc(var(--header-height) + 27px);right:var(--page-pad);display:flex;gap:9px;align-items:center;font-size:10px;letter-spacing:.16em;font-weight:500;color:#fff9}
.status-dot{width:5px;height:5px;border-radius:50%;background:#fff9;box-shadow:0 0 0 4px #fff1}
.story-content{position:absolute;inset:calc(var(--header-height) + 38px) auto 134px var(--page-pad);width:min(560px,43vw)}
.story-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;opacity:0;visibility:hidden;will-change:opacity,transform;pointer-events:none}
.story-panel.is-active{pointer-events:auto}
.intro-panel{opacity:1;visibility:visible;pointer-events:auto}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.19em;line-height:1.4;font-weight:600;color:rgba(255,255,255,.65);margin-bottom:23px}
.tiny-line{width:22px;height:1px;background:#fff7}
.intro-panel h1{font-size:clamp(42px,4.17vw,66px);font-weight:730;line-height:1.32;letter-spacing:-.06em;white-space:nowrap}
.intro-panel h1 span{color:#dfefff}
.intro-description{font-size:16px;line-height:1.9;color:rgba(255,255,255,.72);margin-top:27px;letter-spacing:-.02em;font-weight:400}
.hero-cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:13px;margin-top:33px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:30px;border-radius:50px;padding:17px 25px;font-size:14px;font-weight:650;transition:transform .2s,box-shadow .2s;min-height:54px}
.button:hover{transform:translateY(-3px);box-shadow:0 12px 28px #0002}
.button-white{background:#fff;color:#171d22}
.button .icon{width:19px;height:19px}
.intro-categories{display:flex;gap:20px;margin-top:36px;padding-top:22px;border-top:1px solid #ffffff26;color:#fff9}
.intro-categories span{font-size:10px;display:flex;align-items:center;gap:7px;white-space:nowrap}
.intro-categories .icon{width:16px;height:16px}
.story-panel h2{font-size:clamp(34px,3.1vw,47px);font-weight:690;line-height:1.34;letter-spacing:-.055em;margin-bottom:25px}
.chapter-eyebrow{margin-bottom:17px;font-size:10px}
.chapter-number{font-size:10px;border:1px solid #fff4;border-radius:5px;padding:2px 5px;letter-spacing:.04em;color:#fff}
.chat-composition{width:min(450px,100%)}
.user-bubble{background:linear-gradient(125deg,#4c92fb,#3677e5);padding:20px 24px 13px;border-radius:22px 22px 5px 22px;max-width:365px;margin-left:auto;box-shadow:0 16px 50px #101d3c22;border:1px solid #ffffff2e}
.user-bubble p{font-size:19px;line-height:1.65;letter-spacing:-.03em;font-weight:480}
.message-meta{display:flex;align-items:center;justify-content:flex-end;gap:7px;font-size:10px;color:#ffffffa6;margin-top:8px}
.message-meta .icon{width:12px;height:12px}
.assistant-row{display:flex;align-items:flex-start;gap:10px;margin-top:17px}
.agent-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:#14191f;border:1px solid #ffffff25;flex-shrink:0;box-shadow:0 3px 8px #0001}
.agent-avatar img{width:25px;height:auto}
.agent-avatar.small{width:28px;height:28px;border-radius:9px}
.agent-avatar.small img{width:19px}
.glass{color:var(--ink);background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.9);border-radius:var(--radius);box-shadow:0 18px 65px rgba(8,15,23,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.assistant-bubble{padding:16px 20px 18px;border-radius:5px 20px 20px 20px;flex:1}
.agent-name{font-size:10px;letter-spacing:.025em;font-weight:700;color:#818791;display:block;margin-bottom:7px}
.assistant-bubble p{font-size:15px;line-height:1.7;letter-spacing:-.03em}
.search-chips{margin-top:16px;margin-left:48px;display:flex;gap:6px;flex-wrap:wrap}
.search-chips>span{display:flex;align-items:center;gap:6px;font-size:10px;padding:7px 9px;border-radius:9px;color:#fff;background:rgba(255,255,255,.11);border:1px solid #ffffff26;backdrop-filter:blur(10px)}
.search-chips .icon{width:13px;height:13px}
.static-spinner{width:11px;height:11px;border:1.5px solid #fff5;border-top-color:#fff;border-right-color:#fff;border-radius:50%;display:inline-block;transform:rotate(35deg)}
.booking-card{width:min(475px,100%);padding:19px 22px 13px;border-radius:23px}
.card-heading{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:-.03em}
.card-heading>strong{font-weight:650}
.mini-label{font-size:8px;letter-spacing:.06em;color:#8c939b;font-weight:500;border:1px solid #dfe3e7;border-radius:4px;line-height:1;padding:4px 5px;margin-left:auto;white-space:nowrap}
.ticket{margin-top:17px;padding-bottom:17px;border-bottom:1px dashed #dce0e5}
.ticket-label{display:flex;align-items:center;gap:10px}
.icon-tile{display:grid;place-items:center;flex-shrink:0;width:35px;height:35px;border-radius:11px}
.icon-tile .icon{width:20px;height:20px}
.icon-tile.blue{color:#3675db;background:#e9f0fd}
.icon-tile.amber{color:#b47b26;background:#faf0dd}
.ticket-label>div>strong{display:block;font-size:12px;font-weight:650}
.ticket-label>div>span{display:block;font-size:10px;color:#9097a0;margin-top:4px}
.selection-check{background:#3581f4;border-radius:50%;width:17px;height:17px;display:grid;place-items:center;color:#fff;margin-left:auto}
.selection-check .icon{width:11px;height:11px;stroke-width:2.6}
.route-times{display:flex;align-items:center;gap:16px;margin-top:14px;padding-left:3px}
.route-times>div>strong{display:block;font-size:28px;font-weight:600;letter-spacing:-.04em;line-height:1.3;font-variant-numeric:tabular-nums}
.route-times>div>span{display:block;font-size:10px;color:#939ba5;margin-top:3px}
.route-connector{width:70px;text-align:center;margin:0 1px;align-self:flex-start;padding-top:8px;flex-shrink:0}
.route-connector span{font-size:8px!important}
.route-connector>div{height:1px;background:#cfd4db;position:relative;margin-top:9px}
.route-connector>div:before,.route-connector>div:after{content:"";width:4px;height:4px;border-radius:50%;background:#cfd4db;position:absolute;top:-1.5px}
.route-connector>div:before{left:0}.route-connector>div:after{right:0}
.ticket-price{font-size:15px;margin-left:auto;align-self:center;letter-spacing:-.03em;white-space:nowrap;font-weight:650}
.ticket-price span{font-size:11px;font-weight:400;margin-left:2px}
.restaurant-row{display:flex;align-items:center;gap:12px;padding:17px 0;border-bottom:1px solid #e5e8ec}
.restaurant-row>img{width:50px;height:43px;object-fit:cover;border-radius:9px}
.restaurant-row>div>strong{display:block;font-size:12px;font-weight:650}
.restaurant-row>div>span{display:block;font-size:10px;color:#8c949e;margin-top:5px}
.pay-later{font-size:10px;color:#8c949e;margin-left:auto;white-space:nowrap}
.approval-footer{display:flex;align-items:center;gap:7px;padding-top:13px}
.approval-note{display:flex;align-items:center;gap:5px;font-size:10px;color:#7b8590;white-space:nowrap}
.approval-note .icon{width:13px;height:13px}
.approve-button{display:flex;align-items:center;gap:13px;justify-content:center;background:#171c23;color:#fff;border-radius:10px;padding:12px 16px;font-size:11px;font-weight:550;margin-left:auto;transition:background .2s;white-space:nowrap;min-height:42px}
.approve-button:hover{background:#3678e4}
.approve-button .icon{width:14px;height:14px}
.sample-note{font-size:8px;color:#8b949e;line-height:1.5;margin-top:10px;text-align:right}
.panel-hint{color:#fff8;font-size:9px;line-height:1.5;margin-top:12px}
.execution-card{width:min(450px,100%);padding:21px 24px 18px}
.approved-stamp{margin:17px 0 0;display:flex;align-items:center;gap:6px;background:#e9f2ed;color:#448365;padding:7px 10px;border-radius:7px;font-size:10px}
.approved-stamp .icon{width:12px;height:12px}
.approved-stamp span{margin-left:auto;opacity:.65;font-size:9px}
.execution-list{list-style:none;padding:0;margin:22px 0 23px;display:grid;gap:21px}
.execution-list li{display:flex;align-items:center;gap:11px;position:relative}
.execution-list li:not(:last-child):after{position:absolute;content:"";top:29px;left:11px;height:27px;width:1px;background:#e2e7ec}
.task-status{border:1.5px solid #c7d0d8;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;color:white;flex-shrink:0;transition:background .2s,border-color .2s}
.task-status .icon{width:13px;height:13px;stroke-width:2.3;opacity:0}
.execution-list li.is-complete .task-status{background:#3479e9;border-color:#3479e9}
.execution-list li.is-complete .task-status .icon{opacity:1}
.execution-list li.is-running .task-status{border-color:#3479e9;background:#eaf1fe;box-shadow:0 0 0 4px #3479e912}
.execution-list li.is-running .task-status:before{content:"";width:7px;height:7px;border-radius:50%;background:#3479e9}
.execution-list li.is-running .task-status .icon{display:none}
.execution-list li>div>strong{display:block;font-size:12px;font-weight:600}
.execution-list li>div>span{display:block;font-size:10px;color:#939ba4;margin-top:4px}
.task-tag{font-size:9px;margin-left:auto;color:#a6aeb7}
.is-complete .task-tag{color:#477ed2}
.is-running .task-tag{color:#4787ec}
.execution-progress{height:3px;background:#e6ebf1;border-radius:5px;overflow:hidden}
.execution-progress>span{display:block;transform-origin:left;width:100%;height:100%;background:#4b88ec;transform:scaleX(0)}
.execution-caption{font-size:10px;color:#9099a2;text-align:center;margin-top:13px}
.success-card{width:min(455px,100%);padding:23px 23px 0}
.success-title{display:flex;align-items:center;gap:13px;margin-bottom:21px}
.success-check{display:grid;place-items:center;background:#e0f2e8;border-radius:50%;width:42px;height:42px;color:#389767;flex-shrink:0}
.success-check .icon{width:22px;height:22px;stroke-width:2}
.success-title>div>strong{font-size:16px;font-weight:650;letter-spacing:-.035em;display:block}
.success-title>div>span{font-size:10px;color:#858f99;display:block;margin-top:5px}
.completion-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid #e4e9ee}
.completion-item>div>strong{font-size:12px;display:block;font-weight:600}
.completion-item>div>span{font-size:10px;color:#8b959e;display:block;margin-top:5px}
.completion-badge{color:#43866a;font-size:9px;background:#eaf3ee;padding:4px 7px;border-radius:5px;margin-left:auto}
.success-bottom{border-top:1px solid #e4e9ee;padding:13px 0 14px;font-size:11px;color:#818d98;display:flex;align-items:center;gap:7px}
.success-bottom .icon{width:14px;height:14px}
.more-link{display:flex;align-items:center;gap:14px;font-size:12px;color:#ffffffe0;margin:19px 0 0 4px}
.more-link .icon{width:16px;height:16px}
.story-footer{position:absolute;bottom:37px;left:var(--page-pad);right:var(--page-pad);display:flex;justify-content:space-between;align-items:flex-end;gap:50px}
.chapter-controls{width:350px}
.chapter-meta{display:flex;align-items:center;gap:16px;font-size:9px;color:#fffa;letter-spacing:.03em;margin-bottom:12px}
#chapter-counter{font-size:9px;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:#fff6}
.chapter-nav{display:flex;gap:8px}
.chapter-nav button{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:9px;background:transparent;color:#ffffff73;font-size:10px;line-height:1;padding:8px 0 6px;text-align:left}
.chapter-nav button>span{height:2px;width:100%;background:#ffffff26;border-radius:2px;position:relative;overflow:hidden}
.chapter-nav button>span:after{position:absolute;content:"";inset:0;background:#fff;transform-origin:left;transform:scaleX(var(--step-fill,0))}
.chapter-nav button.active{color:#fff}
.chapter-nav button:hover{color:#fff}
.scroll-caption{font-size:9px;letter-spacing:.14em;color:#fffb;display:flex;align-items:center;gap:14px;position:relative;padding-bottom:25px}
.scroll-caption>.icon{height:27px;width:17px}
.scroll-caption small{position:absolute;bottom:0;right:0;font-size:8px;letter-spacing:.01em;white-space:nowrap;color:#fff7}