/* 配色專屬的作品瀏覽方式：瑞士＝輸送帶、紙本＝花園、深海＝地圖 */
.alt{position:relative;overflow:hidden}
.alt[hidden]{display:none}
.alt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;max-width:1240px;margin:0 auto;padding:56px 24px 0}
.alt-head h2{font-size:clamp(34px,6vw,72px);line-height:.95;letter-spacing:-.03em}
.alt-head p{max-width:420px;font-size:15px}
.alt-k{display:block;font:600 12px "JetBrains Mono",monospace;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}

/* ---------- 瑞士：橫向作品輸送帶 ---------- */
.alt-conv{background:#fff;color:#111;background-image:radial-gradient(rgba(17,17,17,.13) 1px,transparent 1.2px);background-size:9px 9px;border-top:6px solid #111;border-bottom:6px solid #111}
.alt-conv .alt-head h2{font-family:"Noto Sans TC",sans-serif;font-weight:900}
.alt-conv .alt-k{color:#e3261b}
.alt-conv .alt-head p{color:#444}
.conv-wrap{position:relative;padding:20px 0 30px}
.conv-mark{position:absolute;left:50%;top:6px;transform:translateX(-50%);z-index:3;font:700 12px "JetBrains Mono",monospace;letter-spacing:.2em;color:#fff;background:#111;padding:4px 12px}
.conv-mark::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);border:7px solid transparent;border-bottom:0;border-top-color:#111}
.conv-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:64px calc(50% - 120px) 40px;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain}
.conv-track::-webkit-scrollbar{display:none}
.conv-track.drag{cursor:grabbing;scroll-snap-type:none}
.cv{all:unset;box-sizing:border-box;flex:none;width:240px;scroll-snap-align:center;cursor:pointer;background:#f4f4f1;border:2px solid #111;padding:16px;display:flex;flex-direction:column;gap:10px;transform-origin:50% 100%;will-change:transform;transition:background .25s,box-shadow .25s}
.cv:focus-visible{outline:3px solid #e3261b;outline-offset:3px}
.cv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.cv-cat{font:700 11px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase}
.cv-badge{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#111;color:#fff;font:900 22px "Noto Sans TC",sans-serif}
.cv-img{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid #111;background:#ddd}
.cv-img img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.35);transition:filter .3s}
.cv-img::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.35) 1px,transparent 1.3px);background-size:4px 4px;mix-blend-mode:multiply;transition:opacity .3s}
.cv h3{font:900 17px/1.35 "Noto Sans TC",sans-serif;min-height:2.7em}
.cv-n{font:900 40px/1 "Noto Sans TC",sans-serif;letter-spacing:-.04em}
.cv-n small{font-size:14px;font-weight:700;color:#777;margin-left:2px}
.cv-bar{height:10px;border:2px solid #111;background:repeating-linear-gradient(90deg,#fff 0 6px,#fff 6px 8px)}
.cv-bar i{display:block;height:100%;background:#111}
.cv.on{background:#fff;box-shadow:10px 10px 0 #111}
.cv.on .cv-img img{filter:none}
.cv.on .cv-img::after{opacity:0}
.cv.on .cv-badge{background:#e3261b}
.cv.on .cv-bar i{background:#e3261b}
.conv-ctl{display:flex;justify-content:center;align-items:center;gap:14px;padding:0 24px 40px;font:600 13px "Noto Sans TC",sans-serif;color:#444}
.conv-ctl button{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border:2px solid #111;background:#fff;font-size:20px}
.conv-ctl button:hover{background:#111;color:#fff}
.conv-ctl button:focus-visible{outline:3px solid #e3261b;outline-offset:2px}

/* ---------- 紙本：搖擺作品花園 ---------- */
.alt-garden{background:linear-gradient(#f4eee2,#efe6d4);color:#1f1b16;background-image:radial-gradient(rgba(120,88,40,.06) 1px,transparent 1.2px),linear-gradient(#f4eee2,#ece2cf);background-size:6px 6px,auto}
.alt-garden .alt-head h2{font-family:"Noto Serif TC",serif;font-weight:900}
.alt-garden .alt-k{color:#9a6a1c}
.alt-garden .alt-head p{color:#5b5348}
.garden-scroll{overflow-x:auto;scrollbar-width:thin}
.garden{position:relative;height:500px;min-width:1100px;max-width:1400px;margin:0 auto}
.ground{position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none}
.fl{all:unset;position:absolute;bottom:40px;width:120px;margin-left:-60px;display:flex;flex-direction:column;align-items:center;cursor:pointer;transform-origin:50% 100%;animation:sway var(--d,5s) ease-in-out var(--dl,0s) infinite alternate}
.fl:focus-visible .bloom{outline:3px solid #9a6a1c;outline-offset:4px;border-radius:50%}
@keyframes sway{from{transform:rotate(calc(var(--a,3deg) * -1))}to{transform:rotate(var(--a,3deg))}}
.fl:hover,.fl:focus-visible{animation-play-state:paused}
.bloom{position:relative;width:112px;height:112px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.bloom svg{width:100%;height:100%;overflow:visible}
.fl:hover .bloom,.fl:focus-visible .bloom{transform:scale(1.18) translateY(-6px)}
.stem{width:4px;border-radius:2px;background:linear-gradient(#5f9a4a,#4a7d39);position:relative;margin-top:-8px}
.stem::before,.stem::after{content:"";position:absolute;width:30px;height:14px;background:#6aa652;border-radius:0 100% 0 100%}
.stem::before{left:3px;top:38%;transform:rotate(-24deg)}
.stem::after{right:3px;top:62%;transform:scaleX(-1) rotate(-24deg)}
.fl-tag{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%,6px);opacity:0;pointer-events:none;white-space:nowrap;background:#1f1b16;color:#f4eee2;font:500 13px "Noto Sans TC",sans-serif;padding:6px 12px;border-radius:999px;transition:opacity .2s,transform .2s}
.fl-tag small{display:block;font:600 10px "JetBrains Mono",monospace;letter-spacing:.1em;color:#e8c37a}
.fl:hover .fl-tag,.fl:focus-visible .fl-tag{opacity:1;transform:translate(-50%,0)}
.garden-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;padding:18px 24px 44px;font:500 13px "Noto Sans TC",sans-serif;color:#5b5348}
.garden-legend span{display:inline-flex;align-items:center;gap:6px}
.garden-legend i{width:12px;height:12px;border-radius:50%}

/* ---------- 深海：地球人生地圖 ---------- */
.alt-map{background:#071022;color:#eaf0fb}
.alt-map .alt-head h2{font-family:"Noto Serif TC",serif;font-weight:900}
.alt-map .alt-k{color:#9cc3ff}
.alt-map .alt-head p{color:#9cadc9}
.map-wrap{display:grid;grid-template-columns:340px minmax(0,1fr);gap:0;max-width:1240px;margin:28px auto 56px;border:1px solid #1e2c48;border-radius:18px;overflow:hidden;background:#0a1730}
.map-list{list-style:none;max-height:640px;overflow-y:auto;border-right:1px solid #1e2c48}
.map-list li{border-bottom:1px solid #1e2c48}
.map-list button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;width:100%;padding:13px 18px}
.map-list button:hover{background:rgba(156,195,255,.06)}
.map-list button:focus-visible{outline:2px solid #9cc3ff;outline-offset:-2px}
.map-list .no{font:600 13px "JetBrains Mono",monospace;color:#5f6f8c}
.map-list b{display:block;font:600 15px/1.35 "Noto Sans TC",sans-serif}
.map-list small{font:500 11px "JetBrains Mono",monospace;letter-spacing:.08em;color:#7d8fb0}
.map-list .mdur{font:600 13px "JetBrains Mono",monospace;color:#9cadc9}
.map-list button[aria-current="true"]{background:#13264a}
.map-list button[aria-current="true"] .no{color:#e8c37a}
.map-list button[aria-current="true"] .no::before{content:"● ";color:#ef6b5e}
.map-box{position:relative;min-height:420px}
.map-box svg{display:block;width:100%;height:100%}
.pin{cursor:pointer}
.pin:focus{outline:none}
.pin:focus-visible circle.ring{stroke:#fff;stroke-width:3}
.pin .ring{transition:r .2s}
.pin:hover .ring{r:15}
.map-pop{position:absolute;z-index:3;width:250px;padding:12px;border-radius:14px;background:#0f1d38;border:1px solid #2a3d63;box-shadow:0 18px 40px rgba(0,0,0,.45);transform:translate(-50%,calc(-100% - 22px));opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.map-pop.show{opacity:1;pointer-events:auto;transform:translate(-50%,calc(-100% - 16px))}
.map-pop img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;display:block}
.map-pop small{display:block;margin-top:8px;font:600 11px "JetBrains Mono",monospace;letter-spacing:.1em;color:#e8c37a}
.map-pop b{display:block;font:600 15px/1.4 "Noto Sans TC",sans-serif;margin:2px 0 10px}
.map-pop button{all:unset;cursor:pointer;font:600 13px "Noto Sans TC",sans-serif;color:#071022;background:#e8c37a;padding:7px 14px;border-radius:999px}
.map-pop button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.map-hint{position:absolute;left:16px;bottom:14px;font:500 12px "Noto Sans TC",sans-serif;color:#7d8fb0;pointer-events:none}

@media (max-width:860px){
  .map-wrap{grid-template-columns:1fr;margin:24px 16px 40px}
  .map-list{max-height:260px;border-right:0;border-top:1px solid #1e2c48;order:2}
  .map-box{min-height:0}
  .alt-head{padding:44px 16px 0}
}
@media (prefers-reduced-motion:reduce){
  .fl{animation:none}
  .cv,.bloom,.map-pop{transition:none}
}

/* ---------- 動態：輸送帶 ---------- */
.conv-belt{position:relative;height:16px;margin:-34px 40px 0;border:2px solid #111;background:repeating-linear-gradient(90deg,#111 0 14px,#fff 14px 28px);animation:belt 1.4s linear infinite}
.conv-belt::before,.conv-belt::after{content:"";position:absolute;top:50%;width:26px;height:26px;border-radius:50%;border:2px solid #111;background:radial-gradient(circle,#111 0 3px,#fff 4px);transform:translateY(-50%);animation:roll 1.4s linear infinite}
.conv-belt::before{left:-14px}.conv-belt::after{right:-14px}
@keyframes belt{to{background-position:-28px 0}}
@keyframes roll{to{transform:translateY(-50%) rotate(-360deg)}}
.cv.on .cv-bar i{background:repeating-linear-gradient(-45deg,#e3261b 0 7px,#ff6b5f 7px 14px);background-size:19.8px 19.8px;animation:barflow .7s linear infinite}
@keyframes barflow{to{background-position:19.8px 0}}
.cv.on .cv-badge{animation:badge 1.6s ease-in-out infinite}
@keyframes badge{50%{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){.conv-belt,.conv-belt::before,.conv-belt::after,.cv.on .cv-bar i,.cv.on .cv-badge{animation:none}}

/* ---------- 動態：深海地圖 ---------- */
.alt-map .wave{animation:wave 3.2s ease-in-out infinite}
@keyframes wave{0%,100%{transform:translateX(-10px);opacity:.25}50%{transform:translateX(12px);opacity:.75}}
.alt-map .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.alt-map #mz-body{animation:bob 1.8s ease-in-out infinite}
.alt-map #mz.walking #mz-body{animation:none}
@keyframes bob{50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.alt-map .wave,.alt-map .pulse,.alt-map #mz-body{animation:none}}