/* Aziter — 夜明けの空の世界。土台は静かで小さく、色は状態にだけ使う。 */
:root{
  --bg:#f6f4ef; --card:#fffdf9; --ink:#20242e; --ink2:#4b5161; --ink3:#8a8fa0;
  --line:#e3ded2; --line2:#efeade;
  --deep:#141c3d; --deep2:#2b2f63; --amber:#e8a33d; --amber2:#f0b25c;
  --accent:#c96f2e; --good:#2e7d4f; --bad:#b3402e;
  --radius:14px; --ease:cubic-bezier(.22,.8,.24,1);
  --tab-h:56px; --top-h:48px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  font-size:15px; line-height:1.65; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit; cursor:pointer}
input,select,textarea{font:inherit}
a{color:var(--accent)}
#app{display:flex; flex-direction:column; height:100dvh; overflow:hidden}

/* --- 上部バー / タブバー（アプリの殻） --- */
#topbar{
  flex:none; height:calc(var(--top-h) + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top);
  display:flex; align-items:center; justify-content:space-between; padding-left:16px; padding-right:10px;
  background:linear-gradient(100deg,#141c3d 0%,#2b2f63 58%,#6d4470 82%,#b96a44 100%);
  color:#fff;
}
#topbar .brand{display:flex; align-items:center; gap:8px}
#topbar .brand img{border-radius:7px}
#topbar .brand-name{font-weight:700; letter-spacing:.04em; font-size:16px}
.iconbtn{background:transparent; border:none; color:#fff; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px}
.iconbtn:active{background:rgba(255,255,255,.14)}
#tabbar{
  flex:none; height:calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  display:flex; background:rgba(255,253,249,.96); border-top:1px solid var(--line);
}
#tabbar .tab{
  flex:1; background:none; border:none; color:var(--ink3);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; font-size:10.5px;
  transition:color .25s var(--ease);
}
#tabbar .tab.active{color:var(--ink)}
#tabbar .tab.active svg{color:var(--accent)}
#view{flex:1; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.viewbody{max-width:560px; margin:0 auto; padding:18px 16px 40px; animation:viewIn .5s var(--ease) both}
@keyframes viewIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* --- 汎用 --- */
h1.ptitle{font-size:21px; line-height:1.4; margin:2px 0 6px; font-weight:700}
.sub{color:var(--ink2); font-size:13.5px; margin:0 0 16px}
.small{font-size:12.5px} .muted{color:var(--ink3)} .center{text-align:center}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin:0 0 12px}
.card h2{font-size:15.5px; margin:0 0 8px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:12px 20px; border-radius:999px; border:1px solid transparent;
  background:var(--deep); color:#fff; font-weight:600; font-size:15px; text-decoration:none;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.btn:active{transform:scale(.985)}
.btn.primary{background:linear-gradient(120deg,#2b2f63,#7a4a6e 70%,#c96f2e); color:#fff}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.amber{background:var(--amber); color:#2a1c05}
.btn.block{display:flex; width:100%}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn.small{min-height:42px; padding:8px 16px; font-size:13.5px}
.field{margin:0 0 14px}
.field label{display:block; font-size:12.5px; color:var(--ink2); margin:0 0 6px; font-weight:600}
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:#fff; color:var(--ink);
  outline:none; transition:border-color .2s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--deep2)}
.err{background:#fbf0ec; border:1px solid #ecc9bc; color:var(--bad); border-radius:11px; padding:10px 12px; font-size:13px; margin:0 0 12px}
.note{background:#f3efe4; border:1px dashed #d8cfb4; border-radius:11px; padding:10px 12px; font-size:12.5px; color:var(--ink2); margin:0 0 12px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:6px 12px; font-size:12.5px; color:var(--ink2)}
.chip.on{background:var(--deep); color:#fff; border-color:var(--deep)}
.progressline{height:2px; background:var(--line2); position:relative; overflow:hidden; border-radius:2px}
.progressline i{position:absolute; inset:0; transform-origin:left; background:linear-gradient(90deg,var(--deep2),var(--amber)); animation:load 1.1s var(--ease) infinite}
@keyframes load{0%{transform:scaleX(0)}55%{transform:scaleX(.7)}100%{transform:scaleX(1); opacity:.4}}
.skel{border-radius:11px; background:linear-gradient(100deg,#eee9db 40%,#f7f3e8 50%,#eee9db 60%); background-size:200% 100%; animation:sk 1.4s linear infinite; height:64px; margin:0 0 10px}
@keyframes sk{to{background-position:-200% 0}}

/* パスワード強度ゲージ */
.gauge{display:flex; align-items:center; gap:8px; margin-top:7px}
.gauge .bars{display:flex; gap:4px}
.gauge .bars i{width:26px; height:4px; border-radius:2px; background:var(--line)}
.gauge .bars i.f1{background:#c2502e}.gauge .bars i.f2{background:var(--amber)}.gauge .bars i.f3{background:var(--good)}
.gauge .gtext{font-size:12px; color:var(--ink2)}
.pwwrap{position:relative}
.pwwrap input{padding-right:48px}
.pwwrap .eye{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center; color:var(--ink3)}

/* --- 初回フロー（ゲート・4コマ） --- */
.flowwrap{min-height:100%; display:flex; flex-direction:column; justify-content:center; padding:28px 22px 44px; max-width:520px; margin:0 auto; width:100%}
.flowhero{text-align:center; margin-bottom:22px}
.flowhero img{width:76px; height:76px; border-radius:19px; box-shadow:0 10px 28px rgba(20,28,61,.28)}
.flowhero .fname{font-size:23px; font-weight:800; letter-spacing:.03em; margin-top:12px}
.flowhero .ftag{color:var(--ink2); font-size:13px; margin-top:2px}
.fcard{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px 18px}
.fcard h1{font-size:19px; margin:0 0 10px; line-height:1.45}
.fcard p{font-size:14px; color:var(--ink2); margin:0 0 12px}
.fsteps{margin:0 0 16px; padding:0; list-style:none; counter-reset:st}
.fsteps li{position:relative; padding:0 0 14px 40px; font-size:14px; color:var(--ink2)}
.fsteps li::before{
  counter-increment:st; content:counter(st); position:absolute; left:0; top:1px;
  width:27px; height:27px; border-radius:50%; background:var(--deep); color:#fff; font-size:13.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.fsteps li b{color:var(--ink)}
.urlbox{display:flex; gap:8px; margin:0 0 14px}
.urlbox input{flex:1; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font-size:12px; color:var(--ink2); background:#fff; min-width:0}
.urlbox button{flex:none}
/* 4コマ */
.panel-dots{display:flex; gap:6px; justify-content:center; margin:16px 0 4px}
.panel-dots i{width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .3s var(--ease), transform .3s var(--ease)}
.panel-dots i.on{background:var(--accent); transform:scale(1.25)}
.panel-art{height:170px; border-radius:14px; margin:0 0 16px; display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(160deg,#141c3d, #2b2f63 55%, #7a4a6e 85%, #c96f2e);}
.panel-art svg{width:84px; height:84px}
.panel-title{font-size:18px; font-weight:700; margin:0 0 8px; text-align:center}
.panel-text{font-size:14px; color:var(--ink2); text-align:center; margin:0 0 6px; min-height:66px}
.flowrow{display:flex; gap:10px; margin-top:14px}
.flowrow .btn{flex:1}

/* --- ホーム --- */
.hero{
  border-radius:18px; padding:22px 18px; color:#fff; margin:0 0 14px; position:relative; overflow:hidden;
  background:linear-gradient(150deg,#141c3d 0%,#2b2f63 46%,#7a4a6e 78%,#d8804a 100%);
}
.hero h1{font-size:20px; margin:0 0 6px; line-height:1.45}
.hero p{font-size:13px; color:rgba(255,255,255,.82); margin:0 0 16px}
.hero .btn{background:#fff; color:var(--deep)}
.catgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 16px}
.catgrid button{
  background:var(--card); border:1px solid var(--line); border-radius:13px; padding:13px 12px; text-align:left;
  display:flex; flex-direction:column; gap:3px; transition:transform .25s var(--ease);
}
.catgrid button:active{transform:scale(.98)}
.catgrid .ct{font-weight:700; font-size:14px}
.catgrid .cs{font-size:11.5px; color:var(--ink3)}
.secttl{font-size:13px; font-weight:700; color:var(--ink2); margin:20px 0 10px; letter-spacing:.05em}

/* --- 旅程カード / タイムライン投稿 --- */
.tripcard{display:block; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin:0 0 10px; transition:transform .25s var(--ease)}
.tripcard:active{transform:scale(.99)}
.tripcard .tt{font-weight:700; font-size:15px; margin:0 0 2px}
.tripcard .tm{font-size:12.5px; color:var(--ink2)}
.tripcard .tags{margin-top:8px; display:flex; gap:6px; flex-wrap:wrap}
.tag{font-size:11px; border-radius:999px; padding:2px 9px; background:#f1ecdd; color:var(--ink2)}
.tag.pub{background:#e6f0e8; color:var(--good)}
.tag.src{background:#eceaf6; color:var(--deep2)}
.postcard{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; margin:0 0 12px}
.postcard .pauthor{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink2); margin:0 0 8px}
.avatar{width:26px; height:26px; border-radius:50%; background:linear-gradient(140deg,var(--deep2),#7a4a6e); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:none}
.postcard .pcap{font-size:14px; margin:0 0 10px}
.postcard .proute{font-size:16.5px; font-weight:700; margin:0 0 2px}
.empty{border:1px dashed var(--line); border-radius:var(--radius); padding:26px 16px; text-align:center; color:var(--ink3); font-size:13.5px; background:transparent}

/* --- 相談チャット --- */
.chatlog{display:flex; flex-direction:column; gap:10px; padding:4px 0 12px}
.msg{max-width:86%; padding:10px 13px; border-radius:15px; font-size:14px; line-height:1.6; animation:viewIn .4s var(--ease) both; white-space:pre-wrap; word-break:break-word}
.msg.ai{background:var(--card); border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:5px}
.msg.me{background:var(--deep); color:#fff; align-self:flex-end; border-bottom-right-radius:5px}
.tripstate{background:#f3efe2; border:1px solid #e2d9bf; border-radius:12px; padding:10px 12px; font-size:12.5px; color:var(--ink2); margin:0 0 10px}
.tripstate b{color:var(--ink)}
.chatbar{position:sticky; bottom:0; background:linear-gradient(transparent, var(--bg) 30%); padding:10px 0 4px; display:flex; gap:8px}
.chatbar input{flex:1; padding:12px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; outline:none; min-width:0}
.chatbar button{flex:none; width:48px; height:48px; border-radius:50%; border:none; background:var(--deep); color:#fff; display:flex; align-items:center; justify-content:center}
.chatbar button:active{transform:scale(.95)}

/* --- 提案（送客カード） --- */
.offercat{margin:0 0 18px}
.offercat h3{font-size:14px; margin:0 0 8px; display:flex; align-items:center; gap:7px}
.offercat h3 .dot{width:8px; height:8px; border-radius:50%; background:var(--amber)}
.offer{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:13px; padding:13px 14px; margin:0 0 9px; text-decoration:none; color:var(--ink); transition:transform .25s var(--ease)}
.offer:active{transform:scale(.99)}
.offer .oinfo{flex:1; min-width:0}
.offer .olabel{font-weight:700; font-size:14.5px}
.offer .onote{font-size:12px; color:var(--ink3)}
.offer .oprice{font-weight:800; font-size:16px; color:var(--accent); white-space:nowrap}
.offer .oarrow{color:var(--ink3); flex:none}
.pricecard{background:linear-gradient(120deg,#fff8ea,#fff); border:1px solid #ecd9ae}

/* --- 旅程タイムライン --- */
.tl{position:relative; margin:6px 0 0; padding:0 0 0 6px; list-style:none}
.tl::before{content:""; position:absolute; left:15px; top:12px; bottom:12px; width:2px; background:linear-gradient(var(--deep2), var(--amber)); border-radius:2px; opacity:.5}
.tl li{position:relative; padding:0 0 20px 42px}
.tl li::before{content:""; position:absolute; left:4px; top:3px; width:20px; height:20px; border-radius:50%; background:var(--card); border:2px solid var(--deep2)}
.tl li:last-child::before{border-color:var(--amber)}
.tl .lt{font-weight:700; font-size:14.5px}
.tl .lx{font-size:12.5px; color:var(--ink2)}
.tl .ld{font-size:11.5px; color:var(--ink3)}

/* --- マイページ --- */
.profhead{display:flex; align-items:center; gap:12px; margin:0 0 16px}
.profhead .avatar{width:48px; height:48px; font-size:19px}
.profhead .pn{font-size:16.5px; font-weight:700}
.profhead .pe{font-size:12.5px; color:var(--ink3)}
.rows{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0 0 14px}
.rows a,.rows button,.rows .rowitem{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:14px 16px; background:none; border:none; border-bottom:1px solid var(--line2);
  font-size:14.5px; color:var(--ink); text-decoration:none; text-align:left;
}
.rows>*:last-child{border-bottom:none}
.rows .rv{color:var(--ink3); font-size:12.5px}

#toast{
  position:fixed; left:50%; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 18px); transform:translateX(-50%) translateY(8px);
  background:var(--deep); color:#fff; font-size:13.5px; padding:11px 18px; border-radius:999px; z-index:60;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease); max-width:88vw; text-align:center;
  box-shadow:0 8px 24px rgba(20,28,61,.3);
}
#toast.show{opacity:1; transform:translateX(-50%)}
/* 提案の理由・出張の組み立て（試算表） */
.advlist{margin:0; padding:0 0 0 18px}
.advlist li{margin:0 0 7px; font-size:13.5px; color:var(--ink2); line-height:1.7}
.advlist li:last-child{margin-bottom:0}
.kigtable{width:100%; border-collapse:collapse; margin:0 0 10px; font-size:13.5px}
.kigtable th,.kigtable td{border:1px solid var(--line); padding:8px 10px; text-align:right}
.kigtable th{background:#f3efe4; color:var(--ink2); font-size:12px; font-weight:600; text-align:right}
.kigtable th:first-child,.kigtable td:first-child{text-align:left}
.kigtable td b{color:var(--accent)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* --- 5タブ構成（ホーム/タイムライン/リール/マップ/アカウント） --- */
#topbar .topnote{font-size:11px; color:rgba(255,255,255,.75); letter-spacing:.08em; padding-right:8px}
#tabbar .tab span{font-size:10px; letter-spacing:.02em}

/* --- リール（縦型没入フィード） --- */
#view.reels-mode{overflow:hidden}
.reels{height:100%; overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
.reel{
  position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px 20px 26px; color:#fff; overflow:hidden;
  background:linear-gradient(165deg,#141c3d 0%,#2b2f63 48%,#7a4a6e 80%,#d8804a 115%);
}
.reel:nth-child(3n+2){background:linear-gradient(165deg,#0e2a3d 0%,#175263 45%,#3d7a74 80%,#c9a44a 115%)}
.reel:nth-child(3n){background:linear-gradient(165deg,#241a3d 0%,#4a2f63 50%,#8a4a5e 82%,#e08a4a 115%)}
.reel .rscene{position:absolute; inset:0; pointer-events:none}
.reel .rscene svg{position:absolute; right:-30px; top:12%; width:230px; height:230px; opacity:.16; animation:drift 9s var(--ease) infinite alternate}
@keyframes drift{from{transform:translate(0,0) rotate(-2deg)} to{transform:translate(-16px,12px) rotate(2deg)}}
.reel .rdest{font-size:34px; font-weight:800; line-height:1.25; margin:0 0 4px; text-shadow:0 2px 18px rgba(0,0,0,.25); position:relative}
.reel .rroute{font-size:14px; color:rgba(255,255,255,.85); margin:0 0 6px; position:relative}
.reel .rcap{font-size:14.5px; line-height:1.6; margin:0 0 14px; position:relative; max-width:92%}
.reel .rmeta{font-size:12px; color:rgba(255,255,255,.7); margin:0 0 14px; position:relative}
.reel .ractions{display:flex; gap:9px; position:relative; flex-wrap:wrap}
.reel .ractions .btn{background:#fff; color:var(--deep)}
.reel .ractions .btn.ghost{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4)}
.reel .rtag{position:absolute; top:18px; left:20px; font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.75)}

/* --- マップ --- */
#view.map-mode{overflow:hidden; display:flex; flex-direction:column}
.mapwrap{flex:1; display:flex; flex-direction:column; min-height:0}
#map{flex:1; min-height:280px; background:#e8e4da; z-index:0}
.maplist{flex:none; max-height:38%; overflow-y:auto; padding:12px 16px 20px; background:var(--bg)}
/* ピンの意匠言語（全マップ統一）：ツヤのある丸いバブル。しずく型の既製マーカーは使わない */
.trip-pin{
  width:30px; height:30px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #ffe7c4, #f0a04b 58%, #d97f26);
  border:2px solid #fff; box-shadow:0 4px 10px rgba(20,28,61,.35), inset 0 -3px 6px rgba(120,53,0,.25);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.trip-pin::after{content:""; position:absolute; top:4px; left:6px; width:11px; height:7px; border-radius:50%; background:rgba(255,255,255,.7); transform:rotate(-18deg)}
.trip-pin.pub{background:radial-gradient(circle at 32% 28%, #cfeaff, #57a8f5 58%, #2f6fd0); box-shadow:0 4px 10px rgba(20,28,61,.35), inset 0 -3px 6px rgba(10,40,90,.25)}
.trip-pin i{width:9px; height:9px; border-radius:50%; background:#fff; display:block; box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.bub-pin{
  border-radius:50%; border:2px solid #fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12px; position:relative;
  box-shadow:0 3px 8px rgba(20,28,61,.35), inset 0 -2px 5px rgba(0,0,0,.15);
}
.bub-pin::after{content:""; position:absolute; top:3px; left:5px; width:9px; height:6px; border-radius:50%; background:rgba(255,255,255,.65); transform:rotate(-18deg)}
.bub-pin.go{width:28px; height:28px; background:radial-gradient(circle at 32% 28%, #ffffff, #dfe5f2 60%, #aebad6); color:#141c3d}
.bub-pin.arr{width:28px; height:28px; background:radial-gradient(circle at 32% 28%, #ffe7c4, #f0a04b 58%, #d97f26); color:#fff}
.bub-pin.sm{width:18px; height:18px}
/* 施設カテゴリピン：形・ツヤは共通、中身（色・アイコン）で判別する */
.bub-pin.cat{width:30px; height:30px}
.bub-pin.cat svg{width:16px; height:16px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1}
.bub-pin.cat-hotel{background:radial-gradient(circle at 32% 28%, #cfeaff, #57a8f5 58%, #2f6fd0)}
.bub-pin.cat-station{background:radial-gradient(circle at 32% 28%, #d2f4dd, #43b06b 58%, #2e9e5b)}
.bub-pin.cat-food{background:radial-gradient(circle at 32% 28%, #ffddd4, #ef7355 58%, #d63f24)}
.bub-pin.cat-sight{background:radial-gradient(circle at 32% 28%, #eadcff, #a678f7 58%, #7c46d8)}
.bub-pin.cat-airport{background:radial-gradient(circle at 32% 28%, #d2f2fb, #4cc2dd 58%, #0d92b8)}
.bub-pin.cat-shop{background:radial-gradient(circle at 32% 28%, #ffd9ec, #f27bb1 58%, #d64f8f)}
.foot-pin{
  width:34px; height:34px; border-radius:50%; overflow:hidden; position:relative;
  background:radial-gradient(circle at 32% 28%, #fff3df, #f6c177 60%, #e08a3c);
  border:2.5px solid #fff; box-shadow:0 4px 10px rgba(20,28,61,.35), inset 0 -3px 6px rgba(120,53,0,.2);
  display:flex; align-items:center; justify-content:center;
}
.foot-pin::after{content:""; position:absolute; top:3px; left:6px; width:12px; height:8px; border-radius:50%; background:rgba(255,255,255,.65); transform:rotate(-18deg); z-index:2}
.foot-pin span{font-weight:800; font-size:15px; color:#5b3a12}
.foot-pin img{width:100%; height:100%; object-fit:cover; display:block}
.leaflet-container{font:inherit}

/* 統計（カウントアップ）と進み具合バー */
.stats{display:flex; gap:10px; margin:0 0 16px}
.stat{flex:1; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 6px; text-align:center}
.stat .snum{display:block; font-size:22px; font-weight:800; color:var(--ink); line-height:1.15}
.stat .slab{display:block; font-size:10.5px; color:var(--ink3); margin-top:2px}
.card .stats{margin:0 0 10px}
.pbar{height:8px; border-radius:99px; background:var(--line); overflow:hidden}
.pbar i{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg, #f0a04b, #e08a3c); transition:width 1s cubic-bezier(.22,.8,.28,1)}

/* 段階案内（旅の流れ：大きなステップ＋矢印＋日別見出し） */
.jday{font-size:12.5px; font-weight:800; color:var(--amber); letter-spacing:.04em; margin:14px 0 8px}
.jday:first-child{margin-top:2px}
.jarrow{text-align:center; color:var(--ink3); font-size:15px; line-height:1; margin:5px 0 5px 21px; text-align:left; padding-left:0; width:26px; display:flex; justify-content:center}
.jstep{display:flex; gap:12px; align-items:flex-start; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:12px}
.jstep.done{opacity:.62}
.jstep.next{border-color:var(--amber); box-shadow:0 2px 10px rgba(224,138,60,.18)}
.jnum{flex:none; width:26px; height:26px; border-radius:50%; background:var(--deep); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center}
.jstep.done .jnum{background:var(--ink3)}
.jstep.next .jnum{background:var(--amber)}
.jbody{flex:1; min-width:0}
.jt{font-size:16px; font-weight:700; line-height:1.35}
.jx{font-size:12.5px; color:var(--ink2); margin-top:2px}
.jbadge{display:inline-block; margin-left:8px; font-size:10.5px; font-weight:800; color:#fff; background:var(--amber); border-radius:99px; padding:2px 8px; vertical-align:2px}
#d-map{height:220px; border-radius:12px; overflow:hidden; background:#e8e4da; z-index:0}

/* マップ表示切替（ルート／足跡） */
.maptools{position:relative; z-index:600; display:flex; justify-content:center; margin-bottom:-38px; pointer-events:none}
.segctl{display:flex; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:99px; padding:3px; pointer-events:auto; box-shadow:0 3px 10px rgba(20,28,61,.15); margin-top:8px}
.segctl button{border:0; background:transparent; font:inherit; font-size:13px; font-weight:700; color:var(--ink2); padding:6px 18px; border-radius:99px; cursor:pointer}
.segctl button.on{background:var(--deep); color:#fff}
.frate{margin-top:10px}
.frate-h{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink2); margin-bottom:5px}
.frate-h b{color:var(--ink)}
.chiprow{display:flex; flex-wrap:wrap; gap:6px}
.chip{font-size:12px; background:var(--bg); border:1px solid var(--line); border-radius:99px; padding:4px 10px; color:var(--ink2)}

/* 割り勘 */
.wrow{display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px dashed var(--line); font-size:14px}
.wrow:last-of-type{border-bottom:0}
.wrow .wamt{margin-left:auto; font-weight:700; white-space:nowrap}
.wrow .pos{color:#1d7a3a; font-size:12px; white-space:nowrap}
.wrow .neg{color:#b3541e; font-size:12px; white-space:nowrap}
.wdel{flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--ink3); font-size:14px; line-height:1; cursor:pointer}
.wform{margin-top:12px; border-top:1px solid var(--line); padding-top:12px}
.wgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.wform select{width:100%; font:inherit; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink)}

/* 印刷（しおりのPDF化） */
@media print{
  #topbar, #tabbar, #toast, .btn, .flowrow, #d-share, .maptools, .chatbar{display:none !important}
  body{background:#fff}
  #view{overflow:visible !important; height:auto !important}
  .card, .jstep{break-inside:avoid}
}

/* ===== スライス2（2026-10-30）：分からなさ改善＋全体意匠パス =====
   小さく・洗練／夜明けの世界の上演／第一画面の作り替え／スッとしたモーション／汎用テンプレ感の排除 */

/* --- 引き締め：寸法を一段、小さく静かに --- */
h1.ptitle{font-size:19px; margin:0 0 5px}
.sub{font-size:13px; margin-bottom:12px}
.viewbody{padding:16px 16px 36px; animation:none}
.card{padding:14px}
.card h2{font-size:15px}
.btn{min-height:48px; padding:11px 18px; font-size:14.5px; transition:transform .3s var(--ease), filter .3s var(--ease)}
.btn.small{min-height:40px}
.btn:active{transform:scale(.98); filter:brightness(1.07)}
.field{margin-bottom:12px}
.secttl{margin:16px 0 8px; font-size:12.5px}
.secttl::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:7px; vertical-align:1px; background:radial-gradient(circle at 35% 30%, #ffdca6, #e8a33d); box-shadow:0 0 0 2px rgba(232,163,61,.18)}
.tripcard{padding:12px 14px}
.postcard{padding:13px 14px}
.offer{padding:12px 13px}

/* --- 遷移：タブ=静かなスタッガードライズ／深く入る=右から／もどる=左から。長いイージングで統一 --- */
@keyframes riseIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes viewInR{from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none}}
@keyframes viewInL{from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none}}
#view[data-anim="r"] .viewbody{animation:viewInR .55s var(--ease) both}
#view[data-anim="l"] .viewbody{animation:viewInL .55s var(--ease) both}
#view:not([data-anim="r"]):not([data-anim="l"]) .viewbody>*{animation:riseIn .55s var(--ease) both}
#view:not([data-anim="r"]):not([data-anim="l"]) .viewbody>*:nth-child(2){animation-delay:.05s}
#view:not([data-anim="r"]):not([data-anim="l"]) .viewbody>*:nth-child(3){animation-delay:.1s}
#view:not([data-anim="r"]):not([data-anim="l"]) .viewbody>*:nth-child(4){animation-delay:.15s}
#view:not([data-anim="r"]):not([data-anim="l"]) .viewbody>*:nth-child(5){animation-delay:.2s}
#view:not([data-anim="r"]):not([data-anim="l"]) .viewbody>*:nth-child(6){animation-delay:.25s}
#view:not([data-anim="r"]):not([data-anim="l"]) .viewbody>*:nth-child(7){animation-delay:.3s}
#view:not([data-anim="r"]):not([data-anim="l"]) .viewbody>*:nth-child(n+8){animation-delay:.32s}
.flowwrap>*{animation:riseIn .55s var(--ease) both}
.flowwrap>*:nth-child(2){animation-delay:.07s}

/* --- 押した感と現在地：タブの選択状態を強く --- */
#tabbar .tab{position:relative; transition:color .3s var(--ease), background .3s var(--ease)}
#tabbar .tab:active{background:#f3eee1}
#tabbar .tab.active{font-weight:700}
#tabbar .tab.active::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:24px; height:3px; border-radius:0 0 4px 4px; background:linear-gradient(90deg, var(--amber), #e07f3c)}
.rows button:active, .rows a:active{background:#f6f1e4}
.catgrid button{transition:transform .3s var(--ease)}
.catgrid button:active{transform:scale(.975)}
.segctl button{transition:background .3s var(--ease), color .3s var(--ease)}

/* --- ヒーロー（第一画面）：夜明けの太陽と地平線、数字はヒーローの帯に載せる --- */
.hero{padding:24px 18px 16px; margin-bottom:16px; background:linear-gradient(155deg, #11182f 0%, #232a58 42%, #6d4470 74%, #d8804a 112%)}
.hero>*{position:relative; z-index:1}
.hero::before{content:""; position:absolute; width:210px; height:210px; border-radius:50%; right:-52px; bottom:-110px; background:radial-gradient(circle, #ffdca6 0%, rgba(240,178,92,.5) 45%, rgba(240,178,92,0) 70%); pointer-events:none}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:38px; background:linear-gradient(180deg, transparent, rgba(9,12,30,.38)); pointer-events:none}
.hero .kick{font-size:11px; letter-spacing:.22em; color:#f4c98a; font-weight:700; margin:0 0 8px}
.hero h1{font-size:23px; line-height:1.42; margin:0 0 8px}
.hero .btn.main{display:flex; width:100%; min-height:56px; font-size:16px; font-weight:700; color:#33200a; background:linear-gradient(120deg, #f2b45c, #e8873c); border:none; box-shadow:0 8px 22px rgba(232,135,60,.35)}
.hero .cap{font-size:11.5px; color:rgba(255,255,255,.78); text-align:center; margin:9px 0 0}
.hstats{display:flex; margin-top:16px; padding-top:13px; border-top:1px solid rgba(255,255,255,.22)}
.hstat{flex:1; text-align:center}
.hstat + .hstat{border-left:1px solid rgba(255,255,255,.16)}
.hstat .n{display:block; font-size:20px; font-weight:800; line-height:1.2}
.hstat .l{display:block; font-size:10.5px; color:rgba(255,255,255,.75); margin-top:1px}

/* --- カテゴリ：ピンの意匠言語（ツヤのある丸バブル＋色で判別）をホームに通す --- */
.catgrid{gap:9px; margin-bottom:14px}
.catgrid button{flex-direction:row; align-items:center; gap:10px; padding:11px 12px}
.catgrid .ctx{display:flex; flex-direction:column; gap:1px; min-width:0; text-align:left}
.catgrid .ct{font-size:13.5px}
.catgrid .cs{font-size:11px}
.cic{flex:none; width:36px; height:36px; border-radius:50%; border:2px solid #fff; display:flex; align-items:center; justify-content:center; position:relative; box-shadow:0 3px 8px rgba(20,28,61,.22), inset 0 -2px 5px rgba(0,0,0,.14)}
.cic::after{content:""; position:absolute; top:3px; left:6px; width:10px; height:6px; border-radius:50%; background:rgba(255,255,255,.65); transform:rotate(-18deg)}
.cic svg{width:18px; height:18px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; position:relative; z-index:1}
.cic-hotel{background:radial-gradient(circle at 32% 28%, #cfeaff, #57a8f5 58%, #2f6fd0)}
.cic-plane{background:radial-gradient(circle at 32% 28%, #d2f2fb, #4cc2dd 58%, #0d92b8)}
.cic-set{background:radial-gradient(circle at 32% 28%, #f3d9ec, #b4659e 58%, #7a4a6e)}
.cic-car{background:radial-gradient(circle at 32% 28%, #ffe7c4, #f0a04b 58%, #d97f26)}
.cic-flag{background:radial-gradient(circle at 32% 28%, #eadcff, #a678f7 58%, #7c46d8)}
.cic-ticket{background:radial-gradient(circle at 32% 28%, #ffddd4, #ef7355 58%, #d63f24)}
.cic-bag{background:radial-gradient(circle at 32% 28%, #ffd9ec, #f27bb1 58%, #d64f8f)}
.cic-daily, .cic-transit{background:radial-gradient(circle at 32% 28%, #d2f4dd, #43b06b 58%, #2e9e5b)}
.cic-bus{background:radial-gradient(circle at 32% 28%, #d8f7e9, #3fb598 58%, #1f8a6d)}
.cic-taxi{background:radial-gradient(circle at 32% 28%, #fff0bf, #eec93f 58%, #d9a514)}
.cic-shield{background:radial-gradient(circle at 32% 28%, #dfe3f5, #5a639f 58%, #2b2f63)}

/* --- 旅程カード：出バブル→破線→着バブルで「移動」を絵にする --- */
.troute{display:flex; align-items:center; gap:7px; margin:7px 0 3px}
.troute .rb{flex:none; width:17px; height:17px; border-radius:50%; border:1.5px solid #fff; font-size:8.5px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(20,28,61,.25)}
.troute .rb.go{background:radial-gradient(circle at 32% 28%, #ffffff, #dfe5f2 60%, #aebad6); color:#141c3d}
.troute .rb.arr{background:radial-gradient(circle at 32% 28%, #ffe7c4, #f0a04b 58%, #d97f26); color:#fff}
.troute .rl{flex:0 0 22px; border-top:2px dashed #dfa458}
.troute .rtx{font-weight:700; font-size:14px}
.tripcard .tm{margin-top:1px}

/* --- 世界の上演：初回フローを夜明けのタイトル画面に／読み込み・空状態も世界の色で --- */
.flowhero{background:linear-gradient(160deg, #141c3d 0%, #2b2f63 52%, #7a4a6e 82%, #d8804a 118%); border-radius:20px; padding:24px 16px 20px; margin:0 -4px 18px; box-shadow:0 14px 34px rgba(20,28,61,.25)}
.flowhero img{box-shadow:0 8px 22px rgba(0,0,0,.35)}
.flowhero .fname{color:#fff}
.flowhero .ftag{color:rgba(255,255,255,.82)}
.skel{background:linear-gradient(100deg, #e8e2f0 40%, #f7ead2 50%, #e8e2f0 60%); background-size:200% 100%}
.empty{background:radial-gradient(120px 60px at 50% -6px, rgba(232,163,61,.30), rgba(232,163,61,0) 70%), linear-gradient(165deg, #fdf6ea, #eef0f8); border:1px dashed #d9c9a8; color:var(--ink2)}

/* --- 新部品：もどる行／送信ボタン／会話の顔／考え中ドット --- */
.toprow{display:flex; justify-content:space-between; align-items:center; margin:0 0 2px; min-height:32px}
.backbtn{display:inline-flex; align-items:center; gap:2px; background:none; border:none; color:var(--ink2); font-size:13px; font-weight:700; padding:7px 10px 7px 2px; border-radius:8px}
.backbtn:active{color:var(--ink); background:#f1ebdb}
.backbtn.sub2{font-weight:600; color:var(--ink3); font-size:12.5px}
.chatbar .sendbtn{width:auto; height:48px; padding:0 17px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:14px}
.chatbar .sendbtn:active{transform:scale(.96)}
.msgrow{display:flex; gap:7px; align-items:flex-end}
.msgrow.me{justify-content:flex-end}
.msgrow .msg{max-width:79%}
.mavatar{flex:none; width:25px; height:25px; border-radius:50%; background:linear-gradient(140deg, #2b2f63, #7a4a6e 70%, #e08a3c); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(20,28,61,.25)}
/* 考え中ドット（2026-10-30 全社統一仕様）: 6px・gap 4px・周期1.3s・遅延0/.18/.36s・-3px上昇+明滅(.3→1)・ease-in-out。REPAIRMAN と同一モーション、色だけ夜明けのアンバー */
.tdots{display:inline-flex; gap:4px; margin-left:5px; vertical-align:2px}
.tdots i{width:6px; height:6px; border-radius:50%; background:var(--amber); animation:tdot 1.3s ease-in-out infinite}
.tdots i:nth-child(2){animation-delay:.18s}
.tdots i:nth-child(3){animation-delay:.36s}
@keyframes tdot{0%, 60%, 100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}
@media (prefers-reduced-motion: reduce){ .tdots i{animation:none; opacity:.55} }
.wdel{width:auto; height:auto; padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; color:var(--bad); border:1px solid #ecc9bc; background:#fdf3ef; cursor:pointer}
.wdel:active{background:#fbe7de}
.rhint{position:relative; font-size:12px; line-height:1.55; color:rgba(255,255,255,.88); background:rgba(10,14,34,.35); border:1px solid rgba(255,255,255,.25); border-radius:10px; padding:7px 10px; margin:0 0 10px; max-width:92%}
.mapcap{font-size:12px; color:var(--ink3); margin:0 0 10px; line-height:1.6}
@media print{ .toprow{display:none !important} }

/* ===== スライス3（2026-10-30）：リール実動画／実経路／スポット連携 ===== */
/* リールの実写映像：全面に敷き、文字の可読性は夜明け色のヴェールで担保する */
.reel .rvideo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0d1531}
.reel .vshade{position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(10,14,34,.34) 0%, rgba(10,14,34,0) 30%, rgba(10,14,34,.18) 58%, rgba(10,14,34,.78) 100%)}
.reel .rcredit{position:relative; font-size:10.5px; line-height:1.5; color:rgba(255,255,255,.78); margin:10px 0 0}
.reel .rcredit a{color:rgba(255,255,255,.92); text-decoration:underline}
/* 詳細マップの経路モード切替 */
.routemodes{display:flex; gap:6px; margin:0 0 10px; flex-wrap:wrap}
.routemodes button{border:1px solid var(--line); background:#fff; color:var(--ink2); font-size:12.5px; font-weight:700; border-radius:999px; padding:6px 13px; transition:background .3s var(--ease), color .3s var(--ease)}
.routemodes button.on{background:var(--deep); border-color:var(--deep); color:#fff}
.routemodes button:active{transform:scale(.97)}
/* スポット行（1日の予定・マップのスポット一覧・近くのスポット結果で共用） */
.cic-dot{flex:none; width:12px; height:12px; border-radius:50%; border:1.5px solid #fff; box-shadow:0 1px 4px rgba(20,28,61,.3); display:inline-block; vertical-align:-1px; margin-right:2px}
.cat-bg-hotel{background:#2f6fd0}.cat-bg-station{background:#2e9e5b}.cat-bg-food{background:#d63f24}
.cat-bg-sight{background:#7c46d8}.cat-bg-airport{background:#0d92b8}.cat-bg-shop{background:#d64f8f}
.sprow{display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px dashed var(--line)}
.sprow:last-child{border-bottom:0}
.sprow .spname{flex:1; min-width:0; font-size:13.5px; font-weight:600}
.sprow2{display:flex; align-items:center; gap:9px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:9px 11px; margin:0 0 7px}
.sprow2 .spmain{flex:1; min-width:0}
.spname2{font-size:14px; font-weight:700; line-height:1.4}
.sptime{flex:none; width:104px; padding:7px 8px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); font-size:13.5px}
.sptime-ro{flex:none; width:44px; font-weight:800; font-size:13.5px; color:var(--accent); text-align:center}
.legline{font-size:11.5px; color:var(--ink3); margin:1px 0 7px 26px}
.spotadd{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.sp-cats{margin-bottom:4px}
.sp-cats .chip{cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease)}
.sp-results .skel{height:44px}
/* マップの表示切替が3つになっても収まる寸法に */
.segctl button{padding:6px 14px}
@media print{ .routemodes, .spotadd, .sptime{display:none !important} }

/* ===== 生産セレモニー（2026-10-31、龍大指示）：成果物は「表示」でなく「生産」される =====
   旅程・プランという成果物が、チケットが発行されるように段階的に生まれてくるモーション言語。
   待ち時間は「待たされる時間」でなく「出てくるのを見る時間」にする。アニメーション自体が完了フィードバックを兼ねる。
   設計はトークン＋部品（.cer / .ticket）に集約し、場当たりのベタ書きを増やさない。 */
:root{
  --cer-dur:.62s;        /* 要素が姿を現す時間 */
  --cer-step:85ms;       /* 段階開示の刻み（JS が --d に換算して渡す） */
  --cer-base:140ms;      /* チケットの送り出しが進んでから最初の要素が出るまで */
  --cer-ease:cubic-bezier(.22,.8,.24,1); /* 家のイージング（--ease と同一値） */
}
@keyframes cerIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes ticketFeed{from{opacity:0; transform:translateY(10px); clip-path:inset(0 0 100% 0)} to{opacity:1; transform:none; clip-path:inset(0 0 0 0)}}
@keyframes markIn{from{opacity:0; transform:translateY(10px) scale(.86)} to{opacity:1; transform:none}}
@keyframes letterIn{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
/* 段階開示の部品：--d（遅延）を付けて並べると、順に生まれてくる */
.cer{animation:cerIn var(--cer-dur) var(--cer-ease) both; animation-delay:var(--d,0ms)}

/* チケット：提案の顔。夜明けの空の券面に、宣言文とルートを大きく載せ、ミシン目で「発行された1枚」にする */
.ticket{
  border-radius:16px; color:#fff; margin:0 0 16px; overflow:hidden; position:relative;
  background:linear-gradient(150deg,#141c3d 0%,#2b2f63 52%,#7a4a6e 84%,#d8804a 125%);
  box-shadow:0 12px 30px rgba(20,28,61,.22);
  animation:ticketFeed .85s var(--cer-ease) both;
}
.ticket .tk-main{padding:18px 18px 13px}
.ticket .tk-kick{font-size:10.5px; letter-spacing:.22em; color:#f4c98a; font-weight:700; margin:0 0 7px}
.ticket .tk-route{font-size:23px; font-weight:800; line-height:1.35; margin:0}
.ticket .tk-sub{font-size:12.5px; color:rgba(255,255,255,.84); margin:5px 0 0}
.ticket .tk-facts{font-size:11.5px; letter-spacing:.02em; color:#f4c98a; margin:7px 0 0; line-height:1.6}
.ticket .tk-perf{border-top:2px dashed rgba(255,255,255,.38); position:relative}
.ticket .tk-perf::before,.ticket .tk-perf::after{content:""; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--bg)}
.ticket .tk-perf::before{left:-9px}
.ticket .tk-perf::after{right:-9px}
.ticket .tk-stub{padding:11px 18px 14px; display:flex}
.ticket .tk-cell{flex:1; min-width:0}
.ticket .tk-cell + .tk-cell{border-left:1px solid rgba(255,255,255,.18); padding-left:12px; margin-left:12px}
.ticket .tk-l{display:block; font-size:10px; letter-spacing:.12em; color:rgba(255,255,255,.66)}
.ticket .tk-v{display:block; font-size:13.5px; font-weight:700; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* 旅程（しおり）の流れ：ステップが順に生まれ、最後に全体が収まる */
.journey>*{animation:cerIn .55s var(--cer-ease) both}
.journey>*:nth-child(2){animation-delay:.06s}
.journey>*:nth-child(3){animation-delay:.12s}
.journey>*:nth-child(4){animation-delay:.18s}
.journey>*:nth-child(5){animation-delay:.24s}
.journey>*:nth-child(6){animation-delay:.30s}
.journey>*:nth-child(7){animation-delay:.36s}
.journey>*:nth-child(8){animation-delay:.42s}
.journey>*:nth-child(9){animation-delay:.48s}
.journey>*:nth-child(10){animation-delay:.54s}
.journey>*:nth-child(11){animation-delay:.60s}
.journey>*:nth-child(12){animation-delay:.66s}
.journey>*:nth-child(n+13){animation-delay:.72s}

/* 相談の聞き取り状態：条件が足されるたびに、静かに生まれ直す */
.tripstate{animation:cerIn .5s var(--cer-ease) both}

/* ブート（初回フローの顔）：マークが組み上がり、名前が1文字ずつ灯り、最後にタグラインが収まる */
.flowhero img{animation:markIn .7s var(--cer-ease) both}
/* 本社ロゴ先行（2026-10-31）：夜明けの地は暗いので白抜きで、静かに・小さく・自マークより先に */
.flowhero .hqline{display:block; font-size:10px; font-weight:600; letter-spacing:.42em; text-indent:.42em; color:rgba(255,255,255,.66); margin:0 auto 12px; animation:cerIn .5s var(--cer-ease) both}
.flowhero img.appmark{animation-delay:.18s}
.flowhero .fl{display:inline-block; animation:letterIn .5s var(--cer-ease) both; animation-delay:calc(.16s + var(--d,0ms))}
.flowhero .ftag{animation:cerIn .6s var(--cer-ease) .55s both}

@media (prefers-reduced-motion: reduce){
  .cer,.ticket,.journey>*,.tripstate,.flowhero img,.flowhero .hqline,.flowhero .fl,.flowhero .ftag{animation:none !important}
}
@media print{ .ticket{animation:none} }