@import url("./vendor/photoswipe.css");
/* 健行（hike.js）的畫面。每一條都限定在 #hike 底下，不碰地球的樣式。
 * ⚠️ #hike 墊在名牌（#plate，z-index 7）底下：名牌停在左上角時就是退回地球的那顆鈕，蓋住它讀者就出不去。 */
#hike { --ink:#d9d3c7; --dim:#8a8478; --c:#fb817a; position:absolute; inset:0; z-index:6; color:var(--ink); font:15px/1.8 -apple-system, "PingFang TC", sans-serif; pointer-events:none; }
#hike > * { position:absolute; }
#hike .hk-tint, #hike .hk-dim, #hike .hk-ov, #hike .hk-labs, #hike .hk-lead { inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
#hike .hk-tint { opacity:0; mix-blend-mode:multiply; }
#hike .hk-dim { background:#0b0b0a; opacity:0; }
/* 捲動層：整頁鎖著不捲，所以故事在這一層裡捲。透明、蓋滿，收指標 */
#hike .hk-scroll { inset:0; overflow-y:auto; overscroll-behavior:contain; pointer-events:auto; scrollbar-width:none; }
#hike .hk-scroll::-webkit-scrollbar { display:none; }
#hike .spacer, #hike .sheet { pointer-events:none; }
#hike .lab { position:absolute; transform:translate(-50%, -100%); white-space:nowrap; text-align:center; transition:opacity .4s; }
#hike .lab .n { font-size:14px; text-shadow:0 1px 3px #000, 0 0 8px #000; }
#hike .lab .e { font:11px ui-monospace, Menlo, monospace; color:#c9c2b4; text-shadow:0 1px 3px #000; }
#hike .lab .stem { width:1px; height:26px; background:rgba(217,211,199,.7); margin:2px auto 0; }
#hike .lab.ctx .n { font-size:13px; letter-spacing:.12em; color:#2f2c26; text-shadow:0 0 3px #efe9dc, 0 0 6px #efe9dc; } #hike .lab.ctx .stem, #hike .lab.ctx .e { display:none; }
#hike .lab.ctx.dest .n { color:#fff; font-size:15px; text-shadow:0 1px 3px #000, 0 0 8px #000; } #hike .lab.ctx.dest .stem { display:block; background:#fb817a; height:30px; }
/* 一站的照片組：不收指標（收的話滑鼠停在照片上捲不動），點擊由捲動層判斷 */
#hike .hk-float { left:0; top:0; opacity:0; will-change:transform, opacity; }
#hike .hk-float .grid { position:relative; box-sizing:content-box; padding:6px; border-radius:10px; background:rgba(14,14,13,.5); -webkit-backdrop-filter:blur(24px) saturate(1.1); backdrop-filter:blur(24px) saturate(1.1); }
/* 第一次點：那張在照片組的框裡放大到蓋滿整組，其他張淡掉 */
#hike .hk-float .grid.focused figure { opacity:.14 !important; transition:opacity .3s; }
#hike .hk-float .grid .focus { position:absolute; z-index:20; border-radius:6px; overflow:hidden; box-shadow:0 24px 60px -18px rgba(0,0,0,.9); outline:2px solid var(--c); outline-offset:-1px; }
#hike .hk-float .grid .focus img { display:block; width:100%; height:100%; object-fit:cover; }
#hike .hk-float .grid figure { position:absolute; margin:0; transform-origin:center; will-change:transform, opacity; }
#hike .hk-float .grid img { display:block; width:100%; height:100%; object-fit:cover; border-radius:4px; box-shadow:0 14px 36px -14px rgba(0,0,0,.8); outline:2px solid transparent; outline-offset:-1px; transition:outline-color .3s; }
#hike .hk-float .grid figure.on img { outline-color:var(--c); }
#hike .hk-float .grid .n { position:absolute; right:6px; top:6px; font:10px ui-monospace, Menlo, monospace; background:rgba(0,0,0,.6); padding:0 5px; border-radius:3px; }
#hike .hk-float .cap { margin-top:8px; padding:8px 12px 9px; border-radius:6px; background:rgba(14,14,13,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
#hike .hk-float .cap p { margin:0; font-size:14px; line-height:1.7; }
/* 全螢幕：收指標，蓋在捲動層上面 */
#hike .hk-lb { inset:0; z-index:30; background:rgba(10,10,9,.62); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); display:none; pointer-events:auto; }
#hike .hk-lb.on { display:block; }
#hike .hk-lb img { position:absolute; border-radius:4px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); transform-origin:center; will-change:transform, clip-path; }
#hike .hk-lb .cap { position:absolute; left:0; right:0; font-size:13px; color:#d9d3c7; text-align:center; padding:0 16px; text-shadow:0 1px 3px #000; }
#hike .hk-lb .cap span { font:12px ui-monospace, Menlo, monospace; color:var(--dim); margin-left:8px; }
#hike .hk-lb button { position:absolute; background:none; border:0; color:#d9d3c7; font-size:30px; cursor:pointer; padding:16px; }
#hike .hk-lb .x { top:6px; right:8px; font-size:26px; } #hike .hk-lb .pv { left:4px; top:50%; transform:translateY(-50%); } #hike .hk-lb .nx { right:4px; top:50%; transform:translateY(-50%); }
/* 章節標題：換章時大字在畫面中間 */
#hike .hk-chap { left:50%; top:38%; transform:translateX(-50%); text-align:center; pointer-events:none; transition:opacity .5s; text-shadow:0 1px 3px #000, 0 0 12px #000; opacity:0; }
#hike .hk-chap h2 { font-weight:500; font-size:32px; margin:0; } #hike .hk-chap h2 span { color:var(--c); padding:0 .3em; }
#hike .hk-chap .meta { color:#c9c2b4; font:13px ui-monospace, Menlo, monospace; }
/* 這一站的站名：換站時從模糊淡入，讓讀者知道這裡換場了 */
#hike .hk-here { left:0; top:0; white-space:nowrap; text-shadow:0 1px 3px #000, 0 0 10px #000; opacity:0; transition:opacity .3s; }
#hike .hk-here.show { opacity:1; } #hike .hk-here b { display:block; font-weight:600; font-size:20px; color:#fff; } #hike .hk-here span { display:block; font-size:12px; color:#d9d3c7; }
#hike.mobile .hk-here b { font-size:19px; }
#hike .hk-here.in b { animation:hk-here-in .7s cubic-bezier(.2,.8,.2,1); }
@keyframes hk-here-in { from { filter:blur(10px); opacity:0; letter-spacing:.35em; } to { filter:blur(0); opacity:1; letter-spacing:0; } }
/* 結尾：照片在畫面上半一張接一張，地圖上的拍攝點與剖面跟著亮（Relive 的回放、Polarsteps 的旅程回顧） */
#hike .hk-finshade { inset:0; opacity:0; transition:opacity .8s; background:linear-gradient(rgba(10,10,9,.92), rgba(10,10,9,.75) 38%, transparent 62%); }
#hike .hk-finshade.on { opacity:1; }
#hike.mobile .hk-finshade { background:linear-gradient(rgba(10,10,9,.97), rgba(10,10,9,.9) 46%, transparent 70%); }
#hike .hk-fin { left:50%; top:max(4vh, 112px); transform:translateX(-50%); opacity:0; transition:opacity .6s; }
#hike .hk-fin.on { opacity:1; }
#hike .hk-fin .ph { position:relative; border-radius:6px; overflow:hidden; box-shadow:0 30px 80px -24px rgba(0,0,0,.85); }
#hike .hk-fin .ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s; }
#hike .hk-fin .cap { text-align:center; margin-top:10px; text-shadow:0 1px 3px #000, 0 0 10px #000; } #hike .hk-fin .cap b { font-weight:500; font-size:17px; } #hike .hk-fin .cap span { font:12px ui-monospace, Menlo, monospace; color:#c9c2b4; margin-left:10px; }
#hike .hk-finend { left:50%; top:30vh; transform:translateX(-50%); text-align:center; opacity:0; transition:opacity .8s; text-shadow:0 1px 3px #000, 0 0 14px #000; }
#hike .hk-finend.on { opacity:1; pointer-events:auto; } #hike .hk-finend .st b { display:block; font-size:30px; font-weight:500; } #hike .hk-finend .st span { font:13px ui-monospace, Menlo, monospace; color:#c9c2b4; }
#hike .hk-finend button { margin-top:18px; font:inherit; font-size:13px; color:var(--ink); background:rgba(14,14,13,.6); border:1px solid #4a463e; border-radius:999px; padding:6px 16px; cursor:pointer; }
/* 剖面：底邊、全寬，可以點、可以拖 */
#hike .hk-prof { left:0; right:0; bottom:0; height:var(--ph); padding:0 16px 4px; background:linear-gradient(transparent, rgba(14,14,13,.9) 30%); transition:opacity .5s; --ph:112px; }
#hike.mobile .hk-prof { --ph:92px; padding:0 10px 4px; }
#hike .hk-prof svg { display:block; width:100%; height:100%; overflow:visible; pointer-events:auto; cursor:pointer; touch-action:none; font-family:-apple-system, "PingFang TC", sans-serif; }
#hike .hk-prof .ax { font:10px ui-monospace, Menlo, monospace; fill:#8a8478; }
#hike .hk-prof .tn { font-size:11px; fill:#8a8478; cursor:pointer; } #hike .hk-prof .tn.cur { fill:#e6e0d4; } #hike .hk-prof .tn:hover { fill:#fff; }
#hike .hk-prof .yl { font:11px ui-monospace, Menlo, monospace; fill:#fff; paint-order:stroke; stroke:#0e0e0d; stroke-width:3px; }
#hike .hk-prof .hov { stroke:rgba(255,255,255,.35); stroke-width:1; }
/* 捲動提示：下緣中間，滑鼠的滾輪往下動（手機是往上滑的箭頭），讀者一捲就淡出 */
#hike .hk-cue { left:50%; bottom:calc(var(--ph, 112px) + 22px); width:24px; height:40px; margin-left:-12px; opacity:0; transition:opacity .8s; }
#hike.mobile .hk-cue { bottom:118px; }
#hike .hk-cue.on { opacity:.85; }
#hike .hk-cue svg { width:100%; height:100%; fill:none; stroke:#f1ece2; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 3px rgba(0,0,0,.8)); overflow:visible; }
#hike .hk-cue circle { fill:#f1ece2; stroke:none; animation:hk-wheel 1.6s ease-in-out infinite; }
#hike.mobile .hk-cue path { animation:hk-swipe 1.6s ease-in-out infinite; } #hike.mobile .hk-cue path + path { animation-delay:.18s; }
@keyframes hk-wheel { 0% { transform:translateY(0); opacity:1; } 70% { transform:translateY(9px); opacity:0; } 100% { transform:translateY(0); opacity:0; } }
@keyframes hk-swipe { 0%, 100% { opacity:.25; transform:translateY(4px); } 50% { opacity:1; transform:translateY(-2px); } }
/* 名牌（地球的 #plate）在健行時一律淺色字加陰影：地球的紙色底圖上它用深色字，
   而健行的地形是中間調的棕色、結尾上半又壓暗，深色字在那裡讀不到——它是退回地球的鈕，不能看不見 */
#journey.in-hike #plate b, #journey.in-hike #plate i, #journey.in-hike #plate span { color:#f4f2ec !important; text-shadow:0 1px 3px #000, 0 0 10px #000 !important; }

/* 閱讀時照片有實體操作區；縱向與原生雙指縮放交給瀏覽器。 */
#hike .hk-float.on .grid { pointer-events:auto; touch-action:pan-y pinch-zoom; cursor:grab; background:rgba(14,14,13,.92); backdrop-filter:none; -webkit-backdrop-filter:none; }
#hike .hk-float .cap { backdrop-filter:none; -webkit-backdrop-filter:none; }
#hike .hk-float:not(.on) .grid { pointer-events:none; }
#hike[data-view="focus"] .grid figure img { object-fit:contain; background:#111; }
#hike .hk-group { font-weight:600; }
#hike .hk-progress { color:#c9c2b4; font-size:12px; }
#hike .hk-load { top:50%; left:50%; transform:translate(-50%,-50%); background:#171717; padding:12px 20px; border-radius:8px; }
#hike .hk-load:empty { display:none; }
#hike .hk-scroll { touch-action:pan-y pinch-zoom; }
.pswp .pswp__button--fit { width:auto; padding:0 12px; font:14px sans-serif; color:white; }
.pswp .pswp__group-caption { position:absolute; bottom:16px; left:5%; width:90%; color:#eee; text-align:center; font:14px/1.5 sans-serif; max-height:64px; overflow:auto; }
@media (prefers-reduced-motion:reduce) { #hike *, .pswp * { animation-duration:0.01ms!important; transition-duration:0.01ms!important; } }

#hike .hk-strip { position:absolute; left:0; right:0; display:flex; gap:6px; height:48px; }
#hike .hk-strip button { flex:0 1 66px; min-width:0; padding:0; border:2px solid transparent; background:transparent; cursor:pointer; }
#hike .hk-strip button[aria-pressed="true"] { border-color:var(--c); }
#hike .hk-strip button img { width:100%; height:44px; object-fit:cover; box-shadow:none; outline:none; }

/* 降落改播影片時（hike-video.js）：影片墊在健行其他元素底下；播的時候其他元素都藏起來，只留捲動提示——
   色調層也藏，影片錄進去的畫面已經帶著色調，再疊一次會變深 */
#hike .hk-video { inset:0; pointer-events:auto; }
#hike .hk-video video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#hike .hk-video video { opacity:0; }
#hike .hk-video.playing video { opacity:1; }   /* 第一格畫出來才顯示，見 hike-video.js */
#hike .hk-video .hk-labs { position:absolute; inset:0; }
#hike .hk-video .lab { transition:none; }   /* 錄下來的不透明度已經含淡入進度 */
#hike .hk-video.fit { background:#000; } #hike .hk-video.fit video { object-fit:contain; }   /* 播放中轉向：完整顯示、補黑邊 */
#hike.hk-v > :not(.hk-video):not(.hk-cue) { visibility:hidden !important; }
/* 轉完地球影片還沒能順順播完時，底部一條細線顯示下載進度；不寫字 */
#hike .hk-video .bar { position:absolute; left:0; right:0; bottom:0; height:2px; opacity:0; transition:opacity .4s; background:rgba(255,255,255,.08); }
#hike .hk-video .bar.on { opacity:1; }
#hike .hk-video .bar i { display:block; height:100%; width:0; background:rgba(241,236,226,.7); transition:width .2s linear; }

/* 照片模式（?photos=step）：卡片上的提示與操作，都是讀者熟悉的樣子，不寫說明文字
   進度條（Instagram 限時動態）、兩側露出前後張（iOS 相簿的卡片輪播）、滑到卡片上才出現的箭頭（Airbnb 房源照片）、播放鈕 */
#hike.photos .hk-fin { pointer-events:auto; transition:opacity .6s, top .45s cubic-bezier(.2,.8,.2,1); }
#hike .hk-fin .seg { display:flex; gap:4px; margin:0 0 10px; }
#hike .hk-fin .seg i { flex:1; height:2px; border-radius:1px; background:rgba(241,236,226,.25); position:relative; overflow:hidden; }
#hike .hk-fin .seg i.done { background:rgba(241,236,226,.75); }
#hike .hk-fin .seg i.cur::after { content:""; position:absolute; inset:0; background:rgba(241,236,226,.95); transform-origin:left; }
#hike .hk-fin.auto .seg i.cur::after { animation:hk-seg var(--each) linear forwards; }
@keyframes hk-seg { from { transform:scaleX(0); } to { transform:scaleX(1); } }
#hike .hk-fin .row { position:relative; }
#hike .hk-fin .pk { position:absolute; top:15%; height:70%; width:44px; object-fit:cover; border-radius:4px; opacity:0; filter:brightness(.65); transition:opacity .4s; pointer-events:none; }
#hike .hk-fin .pk.l { left:-54px; } #hike .hk-fin .pk.r { right:-54px; }
#hike.mobile .hk-fin .pk { width:10px; } #hike.mobile .hk-fin .pk.l { left:-14px; } #hike.mobile .hk-fin .pk.r { right:-14px; }   /* 手機：卡片幾乎滿版，只在螢幕邊緣露出一條 */
#hike .hk-fin .pk.on { opacity:.6; }
#hike .hk-fin .ph { cursor:zoom-in; transition:width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1); }
#hike .hk-fin.big .ph { cursor:zoom-out; }
#hike .hk-fin .ph button { position:absolute; border:0; padding:0; border-radius:50%; background:rgba(14,14,13,.45); cursor:pointer; z-index:1; }
#hike .hk-fin .ex { right:8px; top:8px; width:28px; height:28px; opacity:.8; }
#hike .hk-fin .ex::before, #hike .hk-fin .ex::after { content:""; position:absolute; width:7px; height:7px; border:solid #f1ece2; }
#hike .hk-fin .ex::before { right:7px; top:7px; border-width:1.6px 1.6px 0 0; }
#hike .hk-fin .ex::after { left:7px; bottom:7px; border-width:0 0 1.6px 1.6px; }
#hike .hk-fin.big .ex::before { right:auto; top:auto; left:9px; bottom:9px; border-width:1.6px 1.6px 0 0; }   /* 放大時改成往內收 */
#hike .hk-fin.big .ex::after { left:auto; bottom:auto; right:9px; top:9px; border-width:0 0 1.6px 1.6px; }
#hike .hk-fin .ar { top:50%; width:36px; height:36px; margin-top:-18px; opacity:0; transition:opacity .2s; }
#hike .hk-fin .ar.l { left:10px; } #hike .hk-fin .ar.r { right:10px; }
#hike .hk-fin .ar::before { content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; border:solid #f1ece2; border-width:0 2px 2px 0; }
#hike .hk-fin .ar.l::before { transform:translate(-35%, -50%) rotate(135deg); } #hike .hk-fin .ar.r::before { transform:translate(-65%, -50%) rotate(-45deg); }
@media (hover:hover) { #hike .hk-fin:hover .ar { opacity:.85; } }
#hike .hk-fin .pl { display:block; margin:8px auto 0; width:30px; height:30px; border-radius:50%; border:1px solid #4a463e; background:rgba(14,14,13,.5); cursor:pointer; position:relative; }
#hike .hk-fin .pl::before { content:""; position:absolute; left:11px; top:8px; border:solid transparent; border-width:7px 0 7px 11px; border-left-color:#f1ece2; }   /* ▶ */
#hike .hk-fin.auto .pl::before { left:10px; top:9px; width:3px; height:11px; border:0; background:#f1ece2; box-shadow:6px 0 0 #f1ece2; }   /* ❚❚ */
/* 長大填滿：卡片長到剖面上方的整個區域，背景整片壓暗；剖面留著，一樣可以左右換 */
#hike .hk-fin.big { top:max(10px, env(safe-area-inset-top)); }   /* 實際位置由 sizeFin 算：頂端到剖面之間置中 */
#hike .hk-fin.big .pk { opacity:0; }
#hike .hk-finshade.big { opacity:1; background:rgba(10,10,9,.9); }
/* 燈條原型（?bar=all｜story）：燈條與播放鈕同一列（Instagram 限時動態的位置），寬度跟螢幕走，直幅照片時不跟著變窄 */
#hike .hk-fin .bar { display:flex; align-items:center; gap:10px; width:max(100%, min(92vw, 760px)); margin:0 0 10px calc((100% - max(100%, min(92vw, 760px))) / 2); }
#hike .hk-fin .bar .seg { flex:1; margin:0; gap:7px; }
#hike .hk-fin.bar-all .seg .g { display:flex; gap:2px; opacity:.55; transition:opacity .3s; }
#hike .hk-fin.bar-all .seg .g.on { opacity:1; }
#hike .hk-fin .bar .seg i { height:3px; }
#hike .hk-fin.bar-story .seg { gap:3px; }
#hike .hk-fin .bar .pl { flex:none; margin:0; width:24px; height:24px; border:0; background:none; }
#hike .hk-fin .bar .pl::before { left:7px; top:5px; }
#hike .hk-fin.auto .bar .pl::before { left:7px; top:6px; }
#plate { transition:opacity .3s; }
/* 退出、倒著播降落影片時（main.js 的 applyState）：照片卡、剖面、地名一按就淡出，不等影片蓋滿——
   留著的話按了退出之後畫面停在照片模式一兩秒，看起來像沒反應。底下的即時地圖與影片取景相同，淡出時看不出換手 */
#hike.hk-leaving { opacity:0; transition:opacity .2s ease; }
/* 前後張原型（?peek=card｜flow）：.ph 只留當作中間那張的框與按鈕，照片畫在 .sl 槽位裡，換張時槽位移動與縮放 */
#hike .hk-fin[class*="peek-"] .ph { background:none; box-shadow:none; overflow:visible; z-index:20; }   /* 疊在照片槽位上面：點擊與箭頭都由框接 */
#hike .hk-fin[class*="peek-"] .ph > img, #hike .hk-fin[class*="peek-"] .pk { display:none; }
#hike .hk-fin .sl { position:absolute; left:50%; top:50%; border-radius:6px; overflow:hidden; cursor:pointer; background:#1a1917;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.85); will-change:transform;
  transition:width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1); }   /* 位置、大小、亮度由 hike.js 每格算，不用 CSS 過場 */
#hike .hk-fin .sl.c { cursor:zoom-in; }
#hike .hk-fin .sl img { display:block; width:100%; height:100%; object-fit:cover; transform-origin:center; }
/* 卡片上置中那張慢慢推近（Ken Burns）；自動播放時照每張的秒數推完，放大檢視時靜止 */
#hike .hk-fin:not(.big) .sl.c img { animation:hk-kb 9s ease-out forwards; }
#hike .hk-fin.auto:not(.big) .sl.c img { animation:hk-kb var(--each) linear forwards; }
@keyframes hk-kb { from { transform:scale(1); } to { transform:scale(1.06); } }
#hike .hk-fin.big .ph { cursor:zoom-out; }
#hike .hk-fin.big, #hike .hk-fin.big * { touch-action:none; }
#hike .hk-finshade.big { pointer-events:auto; cursor:zoom-out; }
#hike .hk-diag { position:absolute; left:6px; bottom:120px; z-index:40; margin:0; padding:6px 8px; font:10px/1.4 ui-monospace, Menlo, monospace; color:#9f9; background:rgba(0,0,0,.72); border-radius:4px; pointer-events:none; white-space:pre; }
/* 版面收斂：兩側已經露出前後張，不放箭頭、放大鈕與關閉鈕；點照片進出全螢幕，Esc、點暗處、手機往下滑也能離開 */
#hike .hk-fin[class*="peek-"] .ex, #hike .hk-fin[class*="peek-"] .ar { display:none; }
/* 播放鈕住在剖面左端：剖面就是整趟的進度條；播放中換成暫停，不消失 */
#hike .hk-prof .pl { position:absolute; left:14px; top:calc(50% - 14px); width:28px; height:28px; margin:0; border:1px solid #4a463e; border-radius:50%; background:rgba(14,14,13,.6); pointer-events:auto; cursor:pointer; }
#hike.mobile .hk-prof .pl { left:8px; }
#hike .hk-prof svg { margin-left:auto; }
#hike.photos .hk-prof { padding-left:52px; }
#hike.photos.mobile .hk-prof { padding-left:44px; }
#hike .hk-prof .pl::before { content:""; position:absolute; left:10px; top:8px; width:0; height:0; border:solid transparent; border-width:5.5px 0 5.5px 9px; border-left-color:#f1ece2; background:none; box-shadow:none; }
#hike:has(.hk-fin.auto) .hk-prof .pl::before { left:9px; top:8.5px; width:3px; height:10px; border:0; background:#f1ece2; box-shadow:5px 0 0 #f1ece2; }
/* 照片下方的圓點（?bar=dots，Instagram 貼文輪播）：只數這一站的場景 */
#hike .hk-fin.bar-dots .seg { justify-content:center; gap:6px; margin:8px 0 0; }
#hike .hk-fin.bar-dots .seg i { flex:none; width:5px; height:5px; border-radius:50%; background:rgba(241,236,226,.3); transition:background .3s, transform .3s; }
#hike .hk-fin.bar-dots .seg i.done { background:rgba(241,236,226,.3); }
#hike .hk-fin.bar-dots .seg i.cur { background:#f1ece2; transform:scale(1.25); }
#hike .hk-fin.bar-dots .seg i.cur::after { display:none; }
#hike .hk-fin.bar-dots .seg:has(i:only-child) { visibility:hidden; }
#hike .hk-fin.bar-none .bar { display:none; }