/* Vela 介紹頁 · 剪紙帆影
   色紙、硬邊陰影、輕微旋轉，沿用 OnBoarding 設計稿的語彙。
   html.fx  ：JS 可用且未開啟「減少動態效果」，啟用隨捲動變化的裝飾
   html.pin ：fx 且視窗夠寬夠高，啟用釘住畫面的捲動段落 */
:root{
  --cream:#fbf4e4; --desk:#efe3ca; --cobalt:#1f4fd8; --sky:#9cc9ff; --sun:#ffc62e; --coral:#ff6b4a; --green:#1f9e8a; --ink:#131b45; --paper:#fffdf6;
  --sh:rgba(19,27,69,.14); --sh2:rgba(19,27,69,.35);
  --sans:Futura,"Avenir Next","Century Gothic","PingFang TC","Hiragino Sans","Microsoft JhengHei","Noto Sans TC",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --pad:clamp(20px,5vw,72px);
  --p:0;
}
html[lang="zh-CN"]{--sans:Futura,"Avenir Next","Century Gothic","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
html[lang="en"]{--sans:Futura,"Avenir Next","Century Gothic","Trebuchet MS",system-ui,sans-serif}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{background:var(--desk);color:var(--ink);font-family:var(--sans);line-height:1.7;overflow-x:clip;-webkit-font-smoothing:antialiased}
html[lang="en"] body{line-height:1.55}
html.i18n-pending body{visibility:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
code,tt,pre,kbd{font-family:var(--mono)}
code{font-size:.88em;background:rgba(19,27,69,.08);padding:1px 6px;border-radius:5px}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.deco{position:absolute;overflow:visible;pointer-events:none}
.deco *{filter:drop-shadow(4px 6px 0 var(--sh))}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}

/* ───── 共用色紙元件 ───── */
.c-cobalt{--bg:var(--cobalt);--fg:var(--cream)}
.c-sun{--bg:var(--sun);--fg:var(--ink)}
.c-green{--bg:var(--green);--fg:var(--cream)}
.c-coral{--bg:var(--coral);--fg:var(--cream)}
.c-sky{--bg:var(--sky);--fg:var(--ink)}
.c-ink{--bg:var(--ink);--fg:var(--cream)}
.c-paper{--bg:var(--paper);--fg:var(--ink)}
.c-cream{--bg:var(--desk);--fg:var(--ink)}

.chip{display:inline-block;background:var(--coral);color:var(--cream);font-size:13px;font-weight:700;padding:2px 12px;border-radius:7px;rotate:-2deg;margin-bottom:8px}
.chip.cr{background:var(--cream);color:var(--ink)}
.chip.b{background:var(--cobalt)}
.strip{background:var(--cream);color:var(--ink);border-radius:14px;padding:10px 16px;margin-bottom:12px;box-shadow:3px 4px 0 var(--sh2);rotate:var(--r,0deg)}
.strip b{display:block;font-size:17px;font-weight:600}
.strip span{display:block;font-size:13.5px;line-height:1.55;opacity:.8}
.tag{position:absolute;z-index:2;background:var(--coral);color:var(--cream);font-weight:700;font-size:15px;line-height:1.4;padding:6px 14px;border-radius:10px;
  rotate:var(--r,-4deg);box-shadow:3px 4px 0 var(--sh2);white-space:nowrap}
.tag.y{background:var(--sun);color:var(--ink)}.tag.b{background:var(--cobalt)}
.shot{border:10px solid var(--cream);border-radius:20px;overflow:hidden;box-shadow:9px 11px 0 rgba(19,27,69,.3);background:#fff}
.shot img{width:100%}
.pill{display:inline-block;font-size:15px;font-weight:600;padding:8px 20px;border-radius:999px;border:2px solid var(--ink);cursor:pointer;transition:.15s;white-space:nowrap}
.pill.sun{background:var(--sun);color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.pill.sun:hover{translate:0 3px;box-shadow:0 1px 0 var(--ink)}
.pill.sm{font-size:13px;padding:4px 14px}
.pill:not(.sun):hover{background:var(--ink);color:var(--cream)}
.link{font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;opacity:.8;cursor:pointer}
.link:hover{opacity:1}
.go{display:inline-block;background:var(--sun);color:var(--ink);font-size:clamp(18px,1.6vw,22px);font-weight:600;padding:15px 38px;border-radius:999px;
  box-shadow:0 7px 0 var(--ink);transition:.15s;cursor:pointer;white-space:nowrap}
.go:hover{translate:0 4px;box-shadow:0 3px 0 var(--ink)}
.go.blue{background:var(--cobalt);color:var(--cream)}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:999px;padding:3px;background:#fff8}
.seg a{padding:4px 16px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.seg a.on{background:var(--ink);color:var(--cream)}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.opt{position:relative;display:block;border:2px solid var(--ink);border-radius:16px;padding:9px 12px 10px;background:#fff8;cursor:pointer;transition:translate .15s,rotate .15s,box-shadow .15s,background .15s}
.opt b{display:block;font-size:26px;font-weight:700;line-height:1.25}
.opt span{font-size:12.5px;font-weight:600;opacity:.8}
.opt.on{background:var(--sun);color:var(--ink);box-shadow:0 5px 0 var(--ink);translate:0 -3px;rotate:-1.5deg}
.opt.on::after{content:"✓";position:absolute;right:-9px;top:-11px;width:27px;height:27px;border-radius:50%;background:var(--coral);color:var(--cream);
  font-size:15px;font-weight:700;display:grid;place-items:center;border:2px solid var(--ink)}
.opt.s{text-align:center;font-size:16px;font-weight:600;padding:8px 6px}
.lab{font-size:14.5px;font-weight:700;margin:22px 0 10px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.lab small{font-weight:500;opacity:.65;font-size:12.5px}
.lab.big{font-size:18px;margin-top:0}
.note{background:var(--sky);border-radius:14px;padding:12px 18px;font-size:14px;line-height:1.65;rotate:-.6deg;box-shadow:3px 4px 0 var(--sh);margin-top:24px;max-width:680px}
.note.y{background:var(--sun);rotate:.8deg}
.hint{font-size:13px;opacity:.7;margin-top:12px}
.box{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid currentColor;display:grid;place-items:center;font-size:12px;font-weight:700;font-style:normal;color:inherit}
.box.on{background:var(--coral);border-color:var(--ink);color:var(--cream)}
.ticket{background:var(--paper);border-radius:20px;padding:20px 26px 16px;rotate:var(--r,0deg);box-shadow:5px 7px 0 var(--sh)}
.ticket h4{display:flex;justify-content:space-between;font-size:17px;font-weight:700;padding-bottom:10px;border-bottom:3px dashed rgba(19,27,69,.2);margin-bottom:6px}
.ticket h4 .sub{opacity:.55;font-weight:600}
.ticket dl{display:grid;grid-template-columns:1fr 1fr;column-gap:30px}
.ticket dl div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:2px dashed rgba(19,27,69,.1);font-size:14px}
.ticket dt{opacity:.65}.ticket dd{font-weight:600;text-align:right}

/* 色紙落下 */
@keyframes drop{from{opacity:0;transform:translateY(-46px) rotate(-10deg) scale(.92)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-9px) rotate(1.4deg)}}
@keyframes drift{to{transform:translateX(-160px)}}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.fx .rv{opacity:0}
.fx .rv.in{animation:drop .8s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--d,0s)}
.cut{filter:drop-shadow(4px 6px 0 var(--sh));transform-box:fill-box;transform-origin:center;animation:drop .85s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--d,0s)}
.boat{transform-box:fill-box;transform-origin:50% 90%;animation:bob 6s ease-in-out infinite}
.drift{animation:drift 10s linear infinite}
.drift.slow{animation-duration:16s;animation-direction:reverse}
.fx .spin{transform-box:fill-box;transform-origin:center;transform:rotate(calc(var(--p) * 220deg))}

/* ───── 導覽 ───── */
.nav{position:fixed;top:14px;left:50%;translate:-50% 0;z-index:60;width:min(1180px,calc(100% - 28px));display:flex;align-items:center;gap:14px;
  padding:7px 8px 7px 16px;background:var(--cream);border:2px solid var(--ink);border-radius:999px;box-shadow:0 5px 0 var(--ink);transition:translate .3s}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;letter-spacing:.04em}
.mark{width:34px;height:34px;display:grid;place-items:center;flex:none}
.mark img{width:100%;height:100%;object-fit:contain}
.links{display:flex;gap:2px;margin:0 auto;font-size:14.5px;font-weight:600}
.links a{padding:5px 13px;border-radius:999px;transition:.15s;white-space:nowrap}
.links a:hover{background:rgba(19,27,69,.08)}
.links a.on{background:var(--ink);color:var(--cream)}
.nav .seg{margin-left:auto}
.links+.seg{margin-left:0}
.nav .seg a{padding:3px 11px;font-size:13px}

.fleet{position:fixed;right:14px;top:50%;translate:0 -50%;z-index:55;display:none;flex-direction:column;align-items:center;gap:11px}
.pin .fleet{display:flex}
.fleet a{position:relative;width:11px;height:11px;border-radius:50%;background:var(--ink);border:2px solid var(--cream);transition:.2s;display:grid;place-items:center}
.fleet a.done{background:var(--coral)}
.fleet a svg{display:none;width:18px;height:20px;filter:drop-shadow(0 0 0 var(--cream)) drop-shadow(1px 0 0 var(--cream)) drop-shadow(-1px 0 0 var(--cream)) drop-shadow(0 1px 0 var(--cream)) drop-shadow(0 -1px 0 var(--cream))}
.fleet a.on{width:18px;height:20px;background:none;border:0;border-radius:0}
.fleet a.on svg{display:block}
.fleet a span{position:absolute;right:26px;top:50%;translate:6px -50%;background:var(--ink);color:var(--cream);font-size:12px;font-weight:600;padding:2px 10px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s}
.fleet a:hover span{opacity:1;translate:0 -50%}

/* ───── 00 第一眼 ───── */
.hero{position:relative;--a:clamp(0,calc((var(--p) - .08)/.5),1);--b:clamp(0,calc((var(--p) - .46)/.3),1)}
.hero-stage{position:relative;background:var(--cream);overflow:hidden;padding-top:100vh}
.collage{position:absolute;right:0;top:0;width:50%;height:100vh;overflow:visible}
.hero-left{position:absolute;left:0;top:0;width:56.25%;height:100vh;z-index:2;transform-origin:0 100%}
.panel{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(6px 0 0 rgba(19,27,69,.12))}
.hello{position:absolute;left:var(--pad);top:50%;translate:0 -52%;width:min(76%,560px);color:var(--cream)}
.hello h1{font-size:clamp(46px,min(6.6vw,12vh),96px);font-weight:600;line-height:1.16;letter-spacing:.01em;white-space:nowrap}
.hello h1 span{color:var(--sun);font-weight:700}
.hello p{margin-top:22px;font-size:clamp(16px,1.5vw,20px);line-height:1.75;opacity:.92;max-width:450px}
.cta{display:flex;align-items:center;gap:18px 28px;margin-top:34px;flex-wrap:wrap}
.skip{font-size:16px;color:var(--cream);text-decoration:underline;text-underline-offset:5px;opacity:.85}
.skip:hover{opacity:1}
.tabs{position:absolute;left:var(--pad);bottom:max(26px,6vh);display:flex;gap:12px;font-size:15px;font-weight:600;flex-wrap:wrap;width:74%}
.tabs a{padding:8px 16px;border-radius:11px;border:2px solid rgba(251,244,228,.5);color:var(--cream);transition:.15s;white-space:nowrap}
.tabs a:hover{border-color:var(--cream)}
.tabs a.on{background:var(--cream);border-color:var(--cream);color:var(--ink);rotate:-2.5deg;box-shadow:3px 4px 0 rgba(19,27,69,.4)}
.origin{position:relative;z-index:1;padding:clamp(60px,10vh,110px) var(--pad);max-width:760px}
.origin h2{font-size:clamp(34px,4.4vw,62px);font-weight:600;line-height:1.2;margin:4px 0 16px}
.origin h2 span{color:var(--cobalt);font-weight:700}
.origin p{font-size:clamp(15px,1.25vw,17px);line-height:1.85;opacity:.85;margin-bottom:10px}
.cue{display:none}

.fx .par{transform-box:fill-box;transform-origin:center}
.fx .par-sun{transform:translate(calc(var(--p) * 46px),calc(var(--p) * -70px)) scale(calc(1 + var(--p) * .24))}
.fx .par-f1{transform:translateY(calc(var(--p) * -50px)) rotate(calc(var(--p) * -46deg))}
.fx .par-f2{transform:rotate(calc(var(--p) * 60deg))}
.fx .par-s1{transform:rotate(calc(var(--p) * 240deg))}
.fx .par-s2{transform:rotate(calc(var(--p) * -320deg))}
.fx .par-boat{transform:translateX(calc(var(--p) * -150px))}
.fx .par-w1{transform:translateX(calc(var(--p) * 100px))}
.fx .par-w2{transform:translateX(calc(var(--p) * -150px))}
.fx .par-w3{transform:translateX(calc(var(--p) * 210px))}

.pin .hero{height:215vh}
.pin .hero-stage{position:sticky;top:0;height:100vh;padding-top:0}
.pin .hero-left{transform:translateX(calc(var(--a) * -110%)) rotate(calc(var(--a) * -3deg));will-change:transform}
.pin .origin{position:absolute;left:0;top:46%;width:min(46%,620px);padding:0 0 0 var(--pad);opacity:var(--b);transform:translateY(calc(-50% + (1 - var(--b)) * 46px))}
.pin .cue{display:flex;align-items:center;gap:8px;position:absolute;right:26px;bottom:22px;z-index:3;font-size:13px;font-weight:600;background:var(--cream);padding:5px 14px;border-radius:999px;
  box-shadow:2px 3px 0 var(--sh2);opacity:calc(1 - var(--a) * 3)}
.cue i{width:8px;height:8px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);rotate:45deg;margin-top:-4px;animation:nudge 1.4s ease-in-out infinite}

/* ───── 01 Vela 是什麼 ───── */
.about{position:relative;background:var(--cobalt);color:var(--cream);padding:clamp(80px,13vh,150px) 0 clamp(90px,14vh,160px);overflow:clip}
.d-a1{right:6%;top:70px}
.say{font-size:clamp(25px,3.6vw,54px);font-weight:600;line-height:1.4;max-width:1100px;margin:16px 0 46px}
html[lang="en"] .say{line-height:1.25;font-size:clamp(25px,3.4vw,50px)}
.say em{font-style:normal;color:var(--sun)}
.fx .say .w{opacity:.24;transition:opacity .4s}
.fx .say .w.lit{opacity:1}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.key{background:var(--cream);color:var(--ink);border-radius:16px;padding:14px 18px 15px;box-shadow:3px 4px 0 var(--sh2);rotate:var(--r)}
.fx .key{translate:0 calc((var(--p) - .5) * var(--k) * 70px)}
.key b{display:block;font-size:26px;font-weight:700;line-height:1.3}
.key span{font-size:13.5px;font-weight:600;opacity:.8}
.bigshot{position:relative;margin:clamp(60px,10vh,120px) auto 0;width:min(1180px,calc(100% - var(--pad) * 2));--e:clamp(0,calc(var(--p)/.66),1)}
.shot-move{position:relative}
.fx .shot-move{transform:scale(calc(.8 + var(--e) * .2)) rotate(calc(-6deg + var(--e) * 4.9deg));transform-origin:50% 100%;will-change:transform}
html:not(.fx) .shot-move{rotate:-1.1deg}
.bigshot .t1{left:-16px;top:15%;--r:-4deg}
.bigshot .t2{right:-14px;top:34%;--r:3deg}
.bigshot .t3{left:20%;bottom:-16px;--r:-2deg}
.bigshot figcaption{text-align:center;font-size:13.5px;opacity:.8;margin-top:34px}

/* ───── 02 三張招牌色紙 ───── */
.stack{position:relative;background:var(--cobalt)}
.sheet{position:relative}
.sheet-move{position:relative;height:100%;transform-origin:0 0}
.sheet .edge{position:absolute;left:0;bottom:calc(100% - 1px);width:100%;height:30px;display:block;fill:var(--bg)}
.sheet-in{position:relative;height:100%;background:var(--bg);color:var(--fg);overflow:hidden;display:grid;grid-template-columns:minmax(300px,.8fr) 1.45fr;gap:clamp(28px,4.5vw,70px);align-items:center;
  padding:clamp(90px,13vh,124px) var(--pad) clamp(46px,8vh,76px)}
.sheet-in::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:calc(var(--out,0) * .3);pointer-events:none;z-index:5}
.sheet .txt{position:relative;z-index:2}
.sheet h2{font-size:clamp(36px,min(4.7vw,8.4vh),66px);font-weight:600;line-height:1.2;margin:4px 0 12px}
.sheet .txt>p{font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.8;opacity:.94;margin-bottom:20px;max-width:440px}
.sheet .strip{max-width:460px}
.shotwrap{position:relative;width:min(116%,calc((100vh - 210px) * 1.5));min-width:0}
.shotwrap .shot{rotate:-1.6deg}
.flip .sheet-in{grid-template-columns:1.45fr minmax(300px,.8fr)}
.flip .txt{order:2}
.flip .shotwrap{justify-self:end;margin-left:-16%}
.flip .shotwrap .shot{rotate:1.4deg}
.sheet .deco{z-index:1}
.d-s1{left:37%;top:92px}.d-s2{right:35%;top:88px}.d-s3{left:36%;top:84px}
.sheet .fine{position:absolute;left:var(--pad);bottom:16px;font-size:12px;opacity:.7;z-index:2;max-width:60%}

.pin .sheet{position:sticky;top:0;height:100vh}
.pin .sheet-move{transform:translateY(calc(var(--out,0) * -2.5vh)) scale(calc(1 - var(--out,0) * .045)) rotate(calc((1 - var(--p,1)) * 2.6deg));will-change:transform}
.pin .shotwrap{transform:translateY(calc((1 - var(--p,1)) * 90px))}

/* ───── 03 行囊 ───── */
.pack{position:relative;background:var(--cream);padding:clamp(96px,14vh,150px) 0 clamp(84px,12vh,130px);overflow:clip}
.d-p1{right:0;top:0}
.fx .d-p1 .rise{transform:translate(calc((1 - var(--p)) * 60px),calc((var(--p) - .3) * 120px))}
.head{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-bottom:44px;flex-wrap:wrap}
.head h2,.vhead h2{font-size:clamp(36px,4.8vw,62px);font-weight:600;line-height:1.2}
.head h2 span,.vhead h2 span{color:var(--cobalt);font-weight:700}
.head p{max-width:340px;font-size:16px;line-height:1.75;opacity:.8;margin-right:clamp(0px,13vw,190px)}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.tile{position:relative;border-radius:20px;padding:22px 22px 20px;box-shadow:3px 4px 0 var(--sh);rotate:var(--r,0deg);background:var(--bg);color:var(--fg);
  display:flex;flex-direction:column;transition:translate .18s,rotate .18s,box-shadow .18s;min-width:0}
.bento .tile:hover{translate:0 -5px;rotate:-1.2deg;box-shadow:5px 9px 0 rgba(19,27,69,.18)}
.w3{grid-column:span 3}.w4{grid-column:span 4}.w5{grid-column:span 5}.w6{grid-column:span 6}.w7{grid-column:span 7}
.tile .ic{display:block;width:40px;height:40px;margin-bottom:8px;flex:none}
.tile>b{display:block;font-size:21px;font-weight:600;line-height:1.3}
.tile>span{display:block;font-size:14.5px;line-height:1.62;opacity:.93;margin:4px 0 18px}
.tile>span:last-child{margin-bottom:0}
.tile code{background:rgba(19,27,69,.16)}
.c-cobalt code,.c-green code,.c-ink code,.c-coral code{background:rgba(251,244,228,.2)}
.mini{margin-top:auto;font-size:13px;font-weight:600}
.turns{display:flex;align-items:center;justify-content:space-between;position:relative;padding:28px 6px 4px}
.turns::before{content:"";position:absolute;left:14px;right:14px;bottom:13px;border-top:3px dashed rgba(251,244,228,.7)}
.turns i{position:relative;width:20px;height:20px;border-radius:50%;background:var(--cream);border:3px solid var(--ink)}
.turns i.on{background:var(--sun)}
.turns i.off{opacity:.45}
.turns em{position:absolute;left:50%;bottom:26px;translate:-50% 0;font-style:normal;white-space:nowrap;background:var(--ink);color:var(--cream);padding:2px 10px;border-radius:7px;rotate:-3deg;font-size:12px}
.inbox{display:grid;gap:7px}
.inbox div{display:flex;align-items:center;gap:9px;background:var(--paper);border-radius:10px;padding:6px 10px;min-width:0}
.inbox div>:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox u{text-decoration:none;font-size:11.5px;padding:0 8px;border-radius:5px;background:var(--desk);flex:none}
.inbox u.a{background:var(--coral);color:var(--cream)}.inbox u.q{background:var(--sun)}
.inbox tt{font-size:12.5px}
.opts3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.c-ink .opt{border-color:var(--cream);background:transparent}
.c-ink .opt.on{background:var(--sun);border-color:var(--sun);box-shadow:0 5px 0 var(--coral)}
.calc label{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px}
.calc output{font-size:26px;font-weight:700;line-height:1}
.calc input{-webkit-appearance:none;appearance:none;width:100%;height:26px;background:none;cursor:grab;margin:4px 0 8px}
.calc input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--ink)}
.calc input::-moz-range-track{height:6px;border-radius:3px;background:var(--ink)}
.calc input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:var(--coral);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.calc input::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--coral);border:3px solid var(--ink)}
.bars{display:flex;align-items:flex-end;gap:8px;height:64px;padding:0 2px;border-bottom:3px solid var(--ink)}
.bars i{flex:1;border-radius:6px 6px 0 0;background:var(--cobalt);height:calc(var(--h,20) * 1%);transition:height .35s cubic-bezier(.2,1.4,.4,1)}
.bars i:nth-child(3n+2){background:var(--coral)}.bars i:nth-child(3n){background:var(--green)}
.calc p{margin-top:9px;font-size:14px;font-weight:500}
.calc p b{font-size:20px;font-weight:700}
.lined{border-radius:12px;background:var(--paper) repeating-linear-gradient(transparent 0 30px,rgba(19,27,69,.12) 30px 32px);color:var(--ink);padding:3px 16px;font-size:14px;line-height:32px;height:102px;overflow:hidden;
  box-shadow:3px 4px 0 var(--sh2);rotate:.5deg;font-weight:500}
.lined .dim{opacity:.45}
.modes p{display:none;font-size:14.5px;line-height:1.65;font-weight:500;margin-top:12px;min-height:4.95em}
.modes p.on{display:block}
pre.code{background:rgba(19,27,69,.3);border-radius:12px;padding:10px 14px;font-size:12.5px;line-height:1.7;font-weight:500;white-space:pre-wrap;overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips i{font-style:normal;font-size:12.5px;padding:1px 11px;border-radius:999px;border:2px solid var(--ink)}
.chips i:first-child{background:var(--ink);color:var(--cream)}
.cron{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cron tt{background:var(--paper);color:var(--ink);padding:4px 12px;border-radius:9px;font-size:13.5px;font-weight:700;box-shadow:2px 3px 0 var(--sh2);rotate:-1deg}
.cron em{font-style:normal;font-size:12.5px;opacity:.8}

/* ───── 04 航程 ───── */
.voyage{position:relative;background:var(--sky)}
.voyage-stage{position:relative;overflow:hidden;padding:clamp(90px,13vh,124px) 0 190px}
.vhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;padding:0 var(--pad);flex-wrap:wrap}
.vhead p{max-width:360px;font-size:16px;line-height:1.75;opacity:.85;margin-right:clamp(0px,4vw,60px)}
.track{position:relative;z-index:2;display:flex;gap:26px;padding:34px var(--pad) 20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.stop{flex:none;scroll-snap-align:center;width:clamp(270px,25vw,350px);min-height:clamp(270px,40vh,350px);background:var(--bg,var(--cream));color:var(--fg,var(--ink));border-radius:22px;padding:20px 22px 22px;
  box-shadow:5px 7px 0 rgba(19,27,69,.22);rotate:var(--r,0deg);display:flex;flex-direction:column}
.no{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--cream);font-style:normal;font-weight:700;font-size:16px;margin-bottom:10px;rotate:-6deg}
.c-ink .no,.c-cobalt .no{background:var(--sun);color:var(--ink)}
.stop>b{font-size:23px;font-weight:600;line-height:1.3}
.stop>span{font-size:14.5px;line-height:1.62;opacity:.93;margin:4px 0 16px}
.mock{margin-top:auto;background:var(--paper);color:var(--ink);border-radius:13px;padding:11px 13px;font-size:13px;font-weight:600;box-shadow:2px 3px 0 var(--sh2);display:grid;gap:8px}
.say2{background:#dfe9fb;border-radius:11px;padding:7px 11px;font-weight:500;line-height:1.55}
.row2{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.row2 u{text-decoration:none;font-size:12px;padding:1px 10px;border-radius:999px;border:2px solid rgba(19,27,69,.25)}
.mock .li{display:flex;align-items:center;gap:9px}
.mock .li em{margin-left:auto;font-style:normal;font-size:11.5px;padding:0 8px;border-radius:5px;background:var(--desk);white-space:nowrap}
.mock .li em.ok{background:var(--green);color:var(--cream)}
.agents div{display:flex;align-items:center;gap:8px}
.agents i{width:9px;height:9px;border-radius:50%;background:var(--green)}
.agents tt{font-size:12.5px;font-weight:700}
.agents em{margin-left:auto;font-style:normal;font-size:11.5px;opacity:.7}
.ask tt{background:var(--ink);color:var(--cream);padding:6px 10px;border-radius:8px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pack2 dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.pack2 dt{font-size:11.5px;opacity:.7}
.pack2 dd{font-size:22px;font-weight:700;line-height:1.2}
.stop.end{background:none;box-shadow:none;justify-content:center;align-items:flex-start;width:clamp(240px,22vw,320px)}
.stop.end svg{filter:drop-shadow(4px 6px 0 var(--sh));margin-bottom:6px}
.stop.end b{font-size:clamp(40px,4.4vw,60px);font-weight:700;line-height:1.1}
.stop.end span{font-size:17px;font-weight:600;opacity:.85}
.vsea{position:absolute;left:0;bottom:-2px;width:100%;height:170px;pointer-events:none}
.vsea.front{z-index:1}
.vboat{position:absolute;left:4%;bottom:66px;pointer-events:none}
.vboat svg{display:block}

.pin .voyage-stage{position:sticky;top:0;height:100vh;padding-bottom:0;display:flex;flex-direction:column}
.pin .voyage{--q:clamp(0,calc((var(--p) - .04)/.9),1)}
.pin .track{overflow:visible;width:max-content;transform:translateX(calc(var(--q) * var(--tx,0px) * -1));will-change:transform}
.pin .vsea{height:max(150px,22vh)}
.pin .vboat{bottom:max(56px,9vh);transform:translateX(calc(var(--q) * 82vw));will-change:transform}
.pin .hero,.pin .stack,.pin .voyage{scroll-margin-top:-84px}
.fx .vw1{transform:translateX(calc(var(--p) * 120px))}
.fx .vw3{transform:translateX(calc(var(--p) * -200px))}

/* ───── 05 新到港 ───── */
.news{position:relative;background:var(--cobalt);color:var(--cream);padding:clamp(70px,11vh,120px) 0 clamp(80px,12vh,130px);overflow:clip}
.d-n1{right:4%;top:40px}
.news .hd{display:flex;align-items:center;gap:clamp(16px,3vw,44px)}
.news small{font-size:14.5px;font-weight:600;opacity:.8}
.news h2{font-size:clamp(52px,7.6vw,98px);font-weight:600;line-height:1.15}
.burst{width:clamp(110px,14vw,186px);height:auto;aspect-ratio:1;rotate:9deg;flex:none;filter:drop-shadow(4px 6px 0 rgba(19,27,69,.3))}
.news .sum{font-size:16.5px;line-height:1.75;opacity:.92;margin:8px 0 36px;max-width:640px}
.news-grid{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(250px,1fr);gap:34px;align-items:start}
.news-new{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.news-new .strip{margin:0;padding:15px 19px 17px}
.news-new .strip b{font-size:19px;margin-bottom:3px}
.news-new .strip span{font-size:14px;line-height:1.65}
.news-imp{background:var(--sky);color:var(--ink);border-radius:18px;padding:18px 22px;rotate:var(--r);box-shadow:4px 5px 0 var(--sh2)}
.news-imp h4{font-size:17px;font-weight:700;margin-bottom:6px}
.news-imp ul{list-style:none;margin-bottom:10px}
.news-imp li{padding:9px 0;border-top:2px dashed rgba(19,27,69,.22);font-size:13.5px;line-height:1.6}
.news .up{font-size:13.5px;opacity:.78;margin-top:34px}

/* ───── 06 調校 ───── */
.setup{position:relative;background:var(--cream);display:grid;grid-template-columns:clamp(270px,29vw,400px) minmax(0,1fr)}
.rail{position:sticky;top:0;height:100vh;min-height:560px;align-self:start;color:var(--cream)}
.railbg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(6px 0 0 rgba(19,27,69,.12))}
.rail-in{position:relative;height:100%;padding:clamp(96px,14vh,130px) 0 40px var(--pad);width:82%;display:flex;flex-direction:column;align-items:flex-start}
.bigno{font-size:clamp(96px,11vw,150px);font-weight:700;line-height:1;color:var(--sun);margin-top:10px}
.bigno small{font-size:26px;font-weight:600;color:var(--cream);opacity:.75;margin-left:6px}
.route{list-style:none;font-size:15px;font-weight:600;margin:22px 0 0 -12px}
.route a{display:flex;align-items:center;gap:10px;padding:5px 12px;margin-bottom:5px;border-radius:10px;opacity:.6;width:max-content;transition:.2s}
.route u{width:20px;height:20px;border-radius:50%;border:2px solid var(--cream);font-size:11px;text-decoration:none;display:grid;place-items:center;flex:none}
.route li.done a{opacity:.95}
.route li.done u{background:var(--coral);border-color:var(--coral)}
.route li.on a{opacity:1;background:var(--cream);color:var(--ink);rotate:-2.5deg;box-shadow:3px 4px 0 rgba(19,27,69,.4)}
.route li.on u{border-color:var(--ink)}
.rail-note{margin-top:auto;font-size:12.5px;line-height:1.6;opacity:.8;max-width:230px}
.steps{padding:0 var(--pad) 40px clamp(26px,4vw,60px);min-width:0}
.step{min-height:88vh;padding:clamp(96px,15vh,134px) 0 30px;max-width:840px}
.step h3{font-size:clamp(30px,3.4vw,44px);font-weight:600;line-height:1.25}
.lead{font-size:16.5px;line-height:1.75;opacity:.82;margin:6px 0 24px;max-width:680px}
.opt.pick{padding:15px 18px 17px}
.opt.pick b{font-size:22px}
.opt.pick span{display:block;font-size:13.5px;line-height:1.5;margin-top:2px}
.sheetp{background:var(--paper);border-radius:18px;padding:16px 22px;box-shadow:3px 4px 0 var(--sh);margin-top:22px;rotate:-.4deg;max-width:680px}
.sheetp p{display:none;font-size:15.5px;line-height:1.75}
.sheetp p.on{display:block}
.prov{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.pv{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:16px;padding:10px 12px;background:#fff8}
.pv u{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--cream);font-weight:700;font-size:17px;text-decoration:none;flex:none}
.pv b{font-size:15.5px;font-weight:600;white-space:nowrap}
.pv.add{border-style:dashed}
.pv.add u{background:none;color:var(--ink);border:2px dashed var(--ink)}
.sails{grid-template-columns:repeat(5,1fr);max-width:600px}
.sails .opt{display:grid;justify-items:center;align-content:end;height:104px;padding-bottom:8px}
.sails .opt b{font-size:16px;font-weight:600}
.look{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(230px,1fr);gap:40px;align-items:start}
.langs{grid-template-columns:repeat(5,1fr);gap:10px}
.langs .opt{padding:8px 9px 9px}
.langs .opt span{white-space:nowrap;font-size:11.5px}
.dots{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;font-weight:600}
.dots label{display:grid;justify-items:center;gap:7px;cursor:pointer}
.dots i{width:32px;height:32px;border-radius:50%;border:2px solid var(--ink);transition:.15s}
.dots i.on{outline:3px solid var(--coral);outline-offset:3px}
.pvwrap{position:relative;padding-top:24px}
.pvwrap .chip{position:absolute;left:-10px;top:8px;z-index:2}
.preview{--t0:#f4f7fb;--t1:#e6ecf5;--t2:#c3cde0;--t3:#dfe9fb;--t4:#fff;--t5:#1f4fd8;
  background:var(--t0);border-radius:16px;height:300px;rotate:1.4deg;box-shadow:6px 8px 0 rgba(19,27,69,.16);display:grid;grid-template-columns:78px 1fr;overflow:hidden;transition:background .3s}
.preview u{display:block;height:9px;border-radius:5px;background:var(--t2);text-decoration:none;transition:background .3s}
.preview .side{background:var(--t1);padding:40px 12px 0;display:grid;gap:9px;align-content:start;transition:background .3s}
.preview .side .hl{background:var(--t5)}
.preview .main{padding:34px 18px 16px;display:flex;flex-direction:column;gap:11px}
.preview .bub{height:44px;border-radius:14px;background:var(--t3);width:78%;align-self:flex-end}
.preview .box2{margin-top:auto;height:66px;border-radius:16px;background:var(--t4);border:2px solid var(--t2);position:relative;transition:.3s}
.preview .box2 i{position:absolute;right:10px;bottom:10px;width:24px;height:24px;border-radius:50%;background:var(--t5);transition:.3s}
.step .ticket{max-width:720px}

/* ───── 07 啟航 ───── */
.start{position:relative;background:var(--cream);display:grid;grid-template-columns:minmax(320px,41%) minmax(0,1fr);overflow:clip}
.start-left{position:relative;min-height:max(100vh,640px);display:flex;filter:drop-shadow(6px 0 0 rgba(19,27,69,.12))}
.start-panel{position:relative;flex:1;background:var(--sun);clip-path:url(#panelclip);overflow:hidden}
.done-txt{position:relative;z-index:2;padding:clamp(110px,17vh,150px) 15% 290px var(--pad)}
.done-txt h2{font-size:clamp(44px,5.6vw,76px);font-weight:600;line-height:1.18;margin-top:4px}
html[lang="en"] .done-txt h2{font-size:clamp(40px,4.5vw,62px)}
.done-txt>p{font-size:clamp(16px,1.4vw,18px);line-height:1.75;margin:14px 0 28px;opacity:.88;max-width:400px}
.done-txt .req{font-size:13px;margin-top:22px;opacity:.8}
.done-txt .req code{background:rgba(19,27,69,.12)}
.sea{position:absolute;left:0;bottom:0;width:100%;height:270px;z-index:1}
.fx .sboat{transform:translateX(calc((var(--p) - .5) * 160px))}
.start-right{position:relative;padding:clamp(100px,15vh,134px) var(--pad) 70px clamp(24px,4vw,56px);min-width:0}
.d-g1{right:26px;top:84px}
.tiles3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tiles3 .tile{padding:18px 20px 20px}
.tiles3 .tile>b{font-size:20px}
.tiles3 .tile>span{margin-bottom:0}
.two{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;margin-top:30px;align-items:start}
.term{background:var(--ink);color:var(--cream);border-radius:20px;padding:18px 22px 20px;rotate:var(--r);box-shadow:5px 7px 0 var(--sh)}
.term h4{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:700;margin-bottom:10px}
.copy{font-size:12.5px;font-weight:600;padding:2px 13px;border-radius:999px;border:2px solid var(--cream);cursor:pointer;transition:.15s}
.copy:hover,.copy.ok{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.term pre{font-size:13.5px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--sun)}
.term p{font-size:13px;line-height:1.65;opacity:.8;margin-top:12px}
.term code{background:rgba(251,244,228,.16)}
.keys2 dl{grid-template-columns:1fr}
kbd{display:inline-block;min-width:26px;text-align:center;padding:0 7px;border:2px solid var(--ink);border-radius:7px;background:#fff;font-size:12.5px;font-weight:700;box-shadow:0 2px 0 var(--ink);margin-left:5px;line-height:1.6}

/* ───── 08 問答 ───── */
.faq{background:var(--desk);padding:clamp(90px,13vh,140px) 0 clamp(90px,13vh,140px)}
.faq .wrap{display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.5fr);gap:clamp(30px,6vw,80px);align-items:start}
.faq-head{position:sticky;top:110px}
.faq-head h2{font-size:clamp(36px,4.6vw,60px);font-weight:600;line-height:1.2;margin:4px 0 14px}
.faq-head h2 span{color:var(--cobalt);font-weight:700}
.faq-head p{font-size:16px;line-height:1.75;opacity:.8;margin-bottom:20px;max-width:340px}
.qa details{background:var(--cream);border-radius:16px;margin-bottom:14px;box-shadow:3px 4px 0 var(--sh);rotate:var(--r,0deg);transition:background .2s}
.qa details[open]{background:var(--paper)}
.qa summary{list-style:none;cursor:pointer;padding:15px 54px 15px 22px;font-size:18px;font-weight:600;position:relative;line-height:1.45}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:16px;top:50%;translate:0 -50%;width:28px;height:28px;border-radius:50%;background:var(--sun);border:2px solid var(--ink);display:grid;place-items:center;
  font-size:18px;font-weight:700;line-height:1;transition:rotate .25s,background .2s}
.qa details[open] summary::after{rotate:45deg;background:var(--coral);color:var(--cream)}
.qa details p{padding:0 22px 18px;font-size:15px;line-height:1.8;opacity:.86;max-width:680px}

/* ───── 頁尾 ───── */
.foot{position:relative;background:var(--desk)}
.fsea{display:block;width:100%;height:150px;margin-bottom:-2px}
.fx .fboat{transform:translateX(calc(var(--p) * 1500px))}
.foot-in{background:var(--cobalt);color:var(--cream);padding:30px 0 30px}
.bye{font-size:clamp(38px,6vw,84px);font-weight:600;line-height:1.18;margin-bottom:54px}
.bye span{color:var(--sun);font-weight:700}
.cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;font-size:14.5px}
.cols h5{font-size:13px;font-weight:700;opacity:.7;margin-bottom:8px;letter-spacing:.06em}
.cols a:not(.brand){display:block;opacity:.88;padding:3px 0}
.cols a:not(.brand):hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.cols p{opacity:.8;margin-top:12px;max-width:260px}
.base{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:2px dashed rgba(251,244,228,.3);font-size:13px}
.base>span{opacity:.75}
.seg.lt{border-color:var(--cream);background:none}
.seg.lt a.on{background:var(--cream);color:var(--ink)}

/* ───── 版面隨寬度調整 ───── */
@media (max-width:1180px){
  .links a{padding:5px 9px}
  .w3,.w4{grid-column:span 6}.w5,.w7{grid-column:span 6}
  .bento .tile:last-child{grid-column:span 12}
  .news-grid{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .d-n1{display:none}
}
@media (max-width:960px){
  .links{display:none}
  .nav .seg{margin-left:auto}
  .hero-stage{padding-top:0;display:flex;flex-direction:column}
  .hero-left{order:-1;position:relative;width:100%;height:auto;background:var(--cobalt);padding:116px var(--pad) 46px}
  .panel{display:none}
  .hello{position:static;translate:none;width:auto}
  .hello h1{font-size:clamp(46px,13vw,84px)}
  .tabs{position:static;width:auto;margin-top:40px}
  .collage{position:relative;display:block;width:100%;height:auto;aspect-ratio:640/800;max-height:92vh}
  .origin{padding-top:20px}
  .keys{grid-template-columns:1fr 1fr}
  .fx .key{translate:none}
  .sheet-in,.flip .sheet-in{display:block;padding:90px var(--pad) 70px}
  .shotwrap,.flip .shotwrap{width:auto;margin:34px 0 0}
  .sheet .deco{left:auto;right:6%;top:40px}
  .sheet .fine{position:static;max-width:none;margin-top:34px}
  .head p,.vhead p{margin-right:0}
  .setup{grid-template-columns:1fr}
  .rail{position:relative;height:auto;min-height:0;background:var(--cobalt)}
  .railbg,.rail-note{display:none}
  .rail-in{width:auto;padding:90px var(--pad) 34px}
  .bigno{display:none}
  .route{display:flex;flex-wrap:wrap;gap:4px 6px;margin-left:-6px}
  .steps{padding:0 var(--pad) 40px}
  .step{min-height:0;padding:64px 0 20px}
  .start{grid-template-columns:1fr}
  .start-left{min-height:0;filter:none}
  .start-panel{clip-path:none}
  .done-txt{padding:96px var(--pad) 280px}
  .start-right{padding:60px var(--pad) 70px}
  .faq .wrap{grid-template-columns:1fr}
  .faq-head{position:static}
  .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .nav{padding-left:12px;gap:8px}
  .brand>span:last-child{display:none}
  .nav .dl{padding:6px 14px;font-size:14px}
  .w3,.w4,.w5,.w6,.w7{grid-column:span 12}
  .tag{font-size:12.5px;padding:4px 10px}
  .bigshot .t3{display:none}
  .shot{border-width:6px;border-radius:14px}
  .news-new{grid-template-columns:1fr}
  .opts:not(.sails):not(.langs):not(.opts3){grid-template-columns:1fr}
  .langs{grid-template-columns:repeat(3,1fr)}
  .look{grid-template-columns:1fr}
  .tiles3{grid-template-columns:1fr}
  .ticket dl{grid-template-columns:1fr}
  .stop{width:78vw}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cut,.boat,.drift,.cue i{animation:none}
}