/* Runa Portfolio
   底色：深海軍藍（串流平台常見的深色底）
   色票（取自 Runa 的色票卡）：Sunshine #EA8913 活潑的主色｜Sand #E4CBA9 文字與輔色
   Terracotta #AF5031 年份與標籤｜Sky Blue #7FC7CC 即將上映 */
:root{
  --sea:#0B1B2B; --sea-deep:#07121D; --sea-2:#11263A; --sea-3:#183249; --line:#2A4560;
  --sun:#EA8913; --sun-soft:#F4B25A; --sand:#E4CBA9; --sky:#7FC7CC; --terra:#AF5031; --terra-soft:#E08A69;
  --text:#FBF3E8; --muted:#D3C0A4; --dim:#93A9BD;
  --display:"Bebas Neue", "Arial Narrow", sans-serif;
  --body:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --gutter:max(20px, 4vw);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
html,body{margin:0;background:var(--sea);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px}
[hidden]{display:none!important}
.icon{width:20px;height:20px;flex:none}

/* 品牌字：小太陽 + RUNA PORTFOLIO */
.wordmark{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);letter-spacing:2px;color:var(--sun);text-decoration:none;white-space:nowrap}
.wordmark::before{content:"";width:.62em;height:.62em;border-radius:50%;background:var(--sun);box-shadow:0 0 0 .14em rgba(234,137,19,.25)}

/* ---------- 開場 ---------- */
.intro{position:fixed;inset:0;z-index:50;background:radial-gradient(circle at 50% 42%,var(--sea-3) 0%,var(--sea) 55%,var(--sea-deep) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .6s ease}
.intro.out{opacity:0;transform:scale(3.2);pointer-events:none;transition:opacity .75s ease .12s, transform .85s cubic-bezier(.6,0,.2,1)}
.intro-logo{position:absolute;top:28px;left:var(--gutter);margin:0;font-size:34px}
.intro-q{margin:0;font-size:clamp(28px,4vw,48px);font-weight:500;letter-spacing:.06em}
.profile{display:flex;flex-direction:column;align-items:center;gap:14px;transition:transform .5s ease}
.profile-pic{width:clamp(130px,15vw,180px);aspect-ratio:1;border-radius:14px;overflow:hidden;border:4px solid transparent;transition:border-color .2s, transform .15s}
.profile-pic img{width:100%;height:100%;object-fit:cover}
.profile-name{margin:0;color:var(--muted);font-size:20px;transition:color .2s}
.profile.hover .profile-pic{border-color:var(--sun)}
.profile.hover .profile-name{color:var(--text)}
.profile.press .profile-pic{transform:scale(.94)}
.profile.zoom{transform:scale(1.25)}
.cursor{position:fixed;width:30px;height:30px;left:0;top:0;transform:translate(110vw,110vh);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));pointer-events:none;transition:opacity .2s}
.intro-skip{position:absolute;right:var(--gutter);bottom:28px;background:none;border:1px solid var(--line);color:var(--muted);padding:8px 16px;border-radius:999px;font-size:14px}
.intro-skip:hover{color:var(--text);border-color:var(--sun)}

/* ---------- 導覽列 ---------- */
.app{min-height:100vh}
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:14px var(--gutter);background:rgba(11,27,43,.94);backdrop-filter:blur(8px);border-bottom:1px solid rgba(42,69,96,.6)}
.logo{font-size:28px}
.cats-wrap{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.cats-label{font-size:13px;color:var(--terra-soft);letter-spacing:.12em;white-space:nowrap;padding-right:10px;border-right:1px solid var(--line)}
.cats{position:relative;display:flex;gap:4px;flex-wrap:wrap;min-width:0}
.cat-ind{position:absolute;left:0;top:0;width:0;height:0;border-radius:999px;background:var(--sun);transition:left .4s cubic-bezier(.3,.8,.3,1),top .4s cubic-bezier(.3,.8,.3,1),width .4s cubic-bezier(.3,.8,.3,1);pointer-events:none}
.cat{position:relative;z-index:1;background:none;border:none;color:var(--muted);font-size:15px;padding:6px 14px;border-radius:999px;white-space:nowrap;transition:background .2s,color .25s}
.cat:hover{color:var(--text);background:rgba(255,255,255,.08)}
.cat[aria-pressed="true"]{color:var(--sea);background:transparent;font-weight:700}
.cat[aria-pressed="true"]:hover{background:transparent;color:var(--sea)}
.me{width:36px;height:36px;border-radius:10px;overflow:hidden;border:2px solid var(--sun);flex:none}
.me img{width:100%;height:100%;object-fit:cover}

/* 共用：區塊標題 */
.section-title{margin:0;font-size:clamp(26px,2.8vw,34px);font-weight:900;display:flex;align-items:center;gap:12px}
.section-title::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--sun);flex:none}
.section-title small{font-size:15px;font-weight:400;color:var(--dim)}

/* 共用：圓形 icon 按鈕 */
.icon-links{display:flex;gap:10px}
.icon-btn{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--sand);text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.icon-btn:hover{border-color:var(--sun);color:var(--sun);background:rgba(234,137,19,.08)}

/* ---------- 關於 Runa ---------- */
.about{padding:32px var(--gutter) 0;display:flex;flex-direction:column;gap:18px}
.about-inner{background:var(--sea-2);border-radius:22px;padding:32px 36px;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:40px;align-items:start}
.portrait{position:relative;margin-top:8px}
.portrait::before{content:"";position:absolute;inset:-10px auto auto -10px;width:70%;height:70%;border-radius:50%;background:var(--sun)}
.portrait img{position:relative;width:100%;aspect-ratio:1;object-fit:cover;border-radius:22px}
.about-text{display:flex;flex-direction:column;gap:18px;min-width:0}
.name-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.name-row h1{margin:0;font-size:clamp(30px,3.6vw,44px);font-weight:900}
.hashtags{display:flex;flex-wrap:wrap;gap:10px}
.hashtag{margin:0;padding:6px 16px;border-radius:999px;background:rgba(234,137,19,.14);color:var(--sun-soft);font-size:15px;font-weight:700}
.about-intro{margin:0;font-size:17px;line-height:1.85;color:var(--muted);max-width:68ch}
.abilities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ability{background:var(--sea);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ability-label{font-size:14px;font-weight:700;color:var(--terra-soft)}
.ability b{font-family:var(--display);font-size:46px;font-weight:400;line-height:1;color:var(--sun);letter-spacing:1px}
.ability b small{font-family:var(--body);font-size:16px;margin-left:4px;color:var(--text)}
.ability-note{font-size:13px;color:var(--dim)}
@media (max-width:1000px){.abilities{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 技能與工具（獨立區塊） ---------- */
.skills-sec{padding:16px var(--gutter) 0;display:flex;flex-direction:column;gap:20px}
.skills-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px}
.skills-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;background:var(--sea-2);border-radius:20px;padding:26px 28px}
.skill-group{display:flex;flex-direction:column;gap:12px;min-width:0}
.skill-label{font-size:15px;font-weight:700;color:var(--terra-soft);letter-spacing:.06em}
.skill-chips{display:flex;flex-direction:column;gap:8px}
.skill-chip{font-size:15px;color:var(--text);display:flex;align-items:center;gap:8px}
.skill-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sun);flex:none}
.tools{background:var(--sea-2);border-radius:20px;padding:26px 28px;display:flex;flex-direction:column;gap:16px}
.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 12px}
.tool{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;text-align:center}
.tool-icon,.tool-letter{width:52px;height:52px;border-radius:14px;background:var(--sea);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:transform .2s,border-color .2s}
.tool-icon{background:var(--sand);-webkit-mask-size:58%;mask-size:58%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;border:none}
.tool-letter{font-family:var(--display);font-size:30px;color:var(--sand);padding-top:3px}
.tool:hover .tool-icon{background:var(--sun);transform:translateY(-3px)}
.tool:hover .tool-letter{color:var(--sun);border-color:var(--sun);transform:translateY(-3px)}
.tool-name{font-size:13px;color:var(--muted);line-height:1.3}
@media (max-width:1000px){.skills-grid{grid-template-columns:1fr}}
@media (max-width:640px){.skills-groups{grid-template-columns:1fr}.tool-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.about-inner{grid-template-columns:1fr;padding:22px;gap:24px}.portrait{max-width:170px}}

/* ---------- 今日熱門 ---------- */
.hero{position:relative;height:min(76vh,700px);min-height:480px;margin-top:36px;overflow:hidden;scroll-margin-top:72px}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.hero-slide.on{opacity:1}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,18,29,.98) 0%,rgba(9,22,35,.92) 30%,rgba(11,27,43,.55) 52%,rgba(11,27,43,.05) 78%),linear-gradient(0deg,var(--sea) 0%,rgba(11,27,43,0) 35%),linear-gradient(180deg,var(--sea) 0%,rgba(11,27,43,0) 18%)}
.hero-body{position:absolute;left:var(--gutter);bottom:16%;max-width:min(640px,88vw);display:flex;flex-direction:column;gap:16px}
.hero-kicker{display:flex;align-items:center;gap:12px;font-size:17px;color:var(--sand);letter-spacing:.08em}
.rank{font-family:var(--display);font-size:26px;background:var(--sun);color:var(--sea);padding:2px 12px;border-radius:999px;letter-spacing:1px}
.hero-title{margin:0;font-size:clamp(44px,6.2vw,84px);font-weight:900;line-height:1.08;text-wrap:balance}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:16px;color:var(--muted)}
.meta .year{color:var(--terra-soft);font-weight:700}
.meta .tag{background:rgba(255,255,255,.08);color:var(--sand);padding:2px 12px;border-radius:999px}
.hero-log{margin:0;font-size:clamp(18px,1.7vw,22px);line-height:1.7;color:var(--text)}
.hero-actions{display:flex;gap:12px;margin-top:6px}
.btn{display:inline-flex;align-items:center;gap:10px;border:none;border-radius:999px;padding:13px 28px;font-size:18px;font-weight:700;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-main{background:var(--sun);color:var(--sea)}
.btn-main:hover{background:var(--sun-soft)}
.timecode{position:absolute;top:28px;right:var(--gutter);font-family:var(--display);font-size:24px;letter-spacing:2px;color:var(--text);background:var(--terra);padding:4px 16px;border-radius:999px}
.dots{position:absolute;right:var(--gutter);bottom:16%;display:flex;gap:6px}
.dot{width:24px;height:6px;border:none;border-radius:3px;background:rgba(251,243,232,.3);padding:0;transition:width .3s,background .3s}
.dot.on{background:var(--sun);width:40px}
.poster-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:8vw;background:radial-gradient(circle at 75% 45%,rgba(234,137,19,.35) 0%,rgba(175,80,49,.25) 25%,var(--sea) 65%);font-family:var(--display);font-size:clamp(60px,12vw,180px);color:rgba(244,178,90,.35);letter-spacing:4px}
.poster-bg.soon{background:radial-gradient(circle at 75% 45%,rgba(127,199,204,.25) 0%,var(--sea) 60%);color:rgba(127,199,204,.35)}

/* ---------- 片單：每排同樣大小，一次 4 張，可左右切換 ---------- */
.rows{display:flex;flex-direction:column;gap:56px;padding:8px var(--gutter) 64px}
.row{display:flex;flex-direction:column;gap:16px}
.carousel{position:relative;--per:4;--gap:16px}
.shelf{display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 18px;cursor:grab;scrollbar-width:thin;scrollbar-color:var(--sun) var(--sea-2)}
.shelf.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.shelf::-webkit-scrollbar{height:6px}
.shelf::-webkit-scrollbar-track{background:var(--sea-2);border-radius:3px}
.shelf::-webkit-scrollbar-thumb{background:var(--sun);border-radius:3px}
.item{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;min-width:0}
.tile{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--sea-3);border:2px solid transparent;padding:0;text-align:left;transition:transform .2s ease, box-shadow .2s ease, border-color .2s}
.tile:hover,.tile:focus-visible{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,.45);border-color:var(--sun)}
.tile{background:linear-gradient(110deg,var(--sea-3) 30%,#1D3A55 50%,var(--sea-3) 70%)}
.tile img{width:100%;height:100%;object-fit:cover;pointer-events:none;filter:brightness(.86) saturate(.95);transition:filter .25s, transform .4s}
.tile:hover img{filter:none;transform:scale(1.04)}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);background:linear-gradient(0deg,rgba(7,18,29,.35),rgba(7,18,29,0) 45%);pointer-events:none}
.tile-poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 16px;background:radial-gradient(circle at 82% 18%,rgba(175,80,49,.55) 0%,rgba(175,80,49,0) 55%),linear-gradient(160deg,#17324B 0%,#0D2033 100%);font-family:var(--display);font-size:clamp(30px,3.2vw,46px);letter-spacing:2px;color:var(--sun-soft)}
.tile-poster::before,.tile-poster::after{content:"";position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 8px,transparent 8px 20px);background-size:20px 6px;background-repeat:repeat-x;background-position:4px center;opacity:.7}
.tile-poster::before{top:6px}
.tile-poster::after{bottom:6px}
.tile-poster.alt{background:radial-gradient(circle at 82% 18%,rgba(234,137,19,.55) 0%,rgba(234,137,19,0) 55%),linear-gradient(160deg,#17324B 0%,#0D2033 100%);color:var(--sun)}
.tile-poster.soon{background:radial-gradient(circle at 82% 18%,rgba(127,199,204,.35) 0%,rgba(127,199,204,0) 55%),linear-gradient(160deg,#17324B 0%,#0D2033 100%);color:var(--sky)}
.tile-year{position:absolute;top:10px;right:10px;font-family:var(--display);font-size:17px;letter-spacing:1px;background:var(--terra);color:var(--text);padding:1px 10px;border-radius:999px}
.tile-badge{position:absolute;top:10px;left:10px;font-size:12px;font-weight:700;background:var(--sky);color:var(--sea);padding:2px 10px;border-radius:999px}
.item-text{display:flex;flex-direction:column;gap:8px;background:none;border:none;padding:0;text-align:left;color:inherit}
.item-title{margin:0;font-size:18px;font-weight:700;line-height:1.35}
.hooks{display:flex;flex-wrap:wrap;gap:6px}
.hook{font-size:13px;font-weight:700;color:var(--sun-soft);background:rgba(234,137,19,.12);padding:2px 10px;border-radius:999px}
.item-text:hover .item-title{color:var(--sun)}

/* 滑過片單卡片時的放大預覽：像今日熱門的縮小版 */
.preview{position:absolute;z-index:30;cursor:pointer;background:var(--sea-2);border-radius:14px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.6);border:1px solid var(--line);transform-origin:center top;animation:pop .22s ease}
@keyframes pop{from{transform:scale(.92)}}
.pv-media{position:relative;aspect-ratio:16/9;background:var(--sea-3)}
.pv-media img{width:100%;height:100%;object-fit:cover}
.pv-media .tile-poster{font-size:44px}
.pv-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--sea-2) 0%,rgba(17,38,58,0) 45%)}
.pv-body{padding:4px 18px 18px;display:flex;flex-direction:column;gap:10px}
.pv-title{margin:0;font-size:22px;font-weight:900}
.pv-log{margin:0;font-size:15px;line-height:1.7;color:var(--text)}
.pv-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.pv-actions .btn{padding:9px 20px;font-size:15px}
.arrow{position:absolute;z-index:4;top:6px;width:48px;border:none;border-radius:12px;background:rgba(7,18,29,.78);color:var(--text);font-size:26px;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .2s, background .2s}
.carousel:hover .arrow,.arrow:focus-visible{background:rgba(7,18,29,.9)}
.arrow:hover{background:var(--sun);color:var(--sea)}
.arrow[disabled]{display:none}
.arrow.prev{left:-8px}
.arrow.next{right:-8px}
@media (max-width:1100px){.carousel{--per:3}}
@media (max-width:820px){.carousel{--per:2}}
@media (max-width:520px){.carousel{--per:1.25}.arrow{display:none}}
@media (hover:none){.arrow{opacity:1}}

/* 專欄（Medium）卡片，目前不顯示 */
.col-card{flex:0 0 calc((100% - 3 * 16px) / 4);display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:150px;padding:18px;border-radius:12px;background:var(--sand);color:var(--sea);text-decoration:none}
.col-card b{font-size:17px;line-height:1.5}
.col-card span{font-size:13px;color:#5B4A35}

/* ---------- 片尾 ---------- */
.credits{padding:80px var(--gutter) 70px;text-align:center;display:flex;flex-direction:column;gap:26px;align-items:center}
.credits h2{margin:0;font-size:clamp(26px,3.4vw,42px);font-weight:900;line-height:1.4;text-wrap:balance}
.credits h2 em{font-style:normal;color:var(--sun)}
.contact-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;border:1px solid var(--line);background:var(--sea-2);color:var(--text);text-decoration:none;font-size:16px;transition:border-color .2s,transform .15s}
.pill:hover{border-color:var(--sun);transform:translateY(-2px)}
.pill .icon{color:var(--sun)}

/* ---------- Footer ---------- */
.footer{padding:28px var(--gutter) 30px;background:var(--sea-deep);border-top:1px solid var(--line)}
.footer-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.footer-logo{margin:0;font-size:26px}
.footer-tag{margin:8px 0 0;font-size:14px;color:var(--muted);letter-spacing:.06em}
.footer-actions{display:flex;align-items:center;gap:18px}
.to-top{font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap;background:none;border:1px solid var(--line);border-radius:999px;padding:9px 16px}
.to-top:hover{border-color:var(--sun)}
.to-top:hover{color:var(--sun)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:18px;font-size:13px;color:var(--dim);letter-spacing:.04em}
.footer-bottom p{margin:0}

/* ---------- 作品頁（之後再一起調整） ---------- */
.detail{position:fixed;inset:0;z-index:40;background:rgba(4,10,18,.8);overflow-y:auto;padding:4vh var(--gutter)}
.detail-card{max-width:960px;margin:0 auto;background:var(--sea-2);border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:rise .3s ease}
@keyframes rise{from{transform:translateY(24px)}}
.d-head{position:relative;aspect-ratio:16/7;background:var(--sea-3)}
.d-head img{width:100%;height:100%;object-fit:cover}
.d-head .tile-poster{font-size:clamp(40px,7vw,90px)}
.d-head::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--sea-2) 0%,rgba(17,38,58,0) 60%)}
.d-close{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;border:none;background:var(--sun);color:var(--sea);font-size:18px;font-weight:700}
.d-titlebox{position:absolute;left:32px;bottom:18px;z-index:2;right:32px}
.d-titlebox h2{margin:0;font-size:clamp(28px,4vw,46px);font-weight:900}
.d-body{padding:8px 32px 36px;display:flex;flex-direction:column;gap:22px}
.d-body h3{margin:0;font-size:18px}
.d-log{margin:0;font-size:18px;line-height:1.7}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:rgba(234,137,19,.14);border:1px solid rgba(234,137,19,.5);color:var(--sun-soft);padding:5px 14px;border-radius:999px;font-size:14px;font-weight:500}
.sb-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sb{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.frame{background:var(--sea);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.frame-no{font-family:var(--display);font-size:15px;letter-spacing:2px;color:var(--dim)}
.frame-label{font-size:13px;font-weight:700;color:var(--terra-soft)}
.frame p{margin:0;font-size:15px;line-height:1.65}
.frame.end{border-color:var(--sun);background:linear-gradient(160deg,rgba(234,137,19,.16),var(--sea) 70%)}
.frame.end .frame-label{color:var(--sun)}
@media (max-width:820px){.sb{grid-template-columns:1fr}}
.note-toggle{background:none;border:1px solid var(--line);color:var(--muted);padding:6px 14px;border-radius:999px;font-size:14px}
.note-toggle[aria-pressed="true"]{color:var(--sea);background:var(--sand);border-color:var(--sand)}
.note{margin:0;border-left:4px solid var(--sun);padding:6px 16px;font-size:17px;line-height:1.7;color:var(--sand)}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.g-item{display:block;width:100%;padding:0;border:none;border-radius:12px;background:var(--sea-3);cursor:zoom-in;overflow:hidden;transition:transform .2s, box-shadow .2s}
.g-item:hover,.g-item:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 2px var(--sun)}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:12px;background:var(--sea-3)}
.soon-msg{margin:0;color:var(--muted)}

@media (max-width:860px){
  .nav{flex-wrap:wrap;gap:10px}
  .nav{flex-wrap:nowrap}
  .logo{margin-right:auto}
  .burger{display:flex;order:3}
  .cats-wrap{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:8px;padding:14px var(--gutter) 18px;background:rgba(11,27,43,.98);border-bottom:1px solid var(--line);box-shadow:0 16px 30px rgba(0,0,0,.4)}
  .nav.open .cats-wrap{display:flex}
  .cats-label{border-right:none;padding-right:0}
  .cats{flex-direction:column;flex-wrap:nowrap;gap:4px}
  .cat{text-align:left;font-size:17px;padding:10px 16px}
  .hero{height:72vh}
  .hero-body{bottom:12%}
  .dots{bottom:5%}
  .d-body{padding:8px 18px 28px}
  .d-titlebox{left:18px}
}
@media (max-height:560px){.intro{gap:16px}.intro-logo{position:static}.profile-pic{width:110px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* 作品頁：STAR 連續敘述 + 我學到的 */
.star{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--line);margin-left:6px}
.star-p{margin:0;display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;padding:12px 0 12px 22px;position:relative}
.star-p::before{content:"";position:absolute;left:-7px;top:19px;width:12px;height:12px;border-radius:50%;background:var(--sea-2);border:2px solid var(--terra-soft)}
.star-p.result::before{background:var(--sun);border-color:var(--sun)}
.star-k{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--terra-soft);font-weight:700;padding-top:2px}
.star-k b{font-family:var(--display);font-size:24px;font-weight:400;letter-spacing:1px;line-height:1}
.star-p.result .star-k{color:var(--sun)}
.star-t{font-size:17px;line-height:1.8;color:var(--text)}
.star-p.result .star-t{font-weight:700}
.learned{background:rgba(234,137,19,.1);border-radius:14px;padding:16px 20px;display:flex;flex-direction:column;gap:6px}
.learned-k{font-size:14px;font-weight:700;color:var(--sun)}
.learned p{margin:0;font-size:17px;line-height:1.75;color:var(--sand)}
@media (max-width:640px){.star-p{grid-template-columns:1fr;gap:4px}}

/* 作品頁：一整段敘述（內在是 STAR 結構） */
.story{margin:0;font-size:18px;line-height:1.95;color:var(--text);max-width:70ch}
.story strong{color:var(--sun-soft);font-weight:700}
.d-note{margin:0;padding:12px 16px;border-left:3px solid var(--sun-soft);font-size:16px;line-height:1.8;color:var(--text);max-width:70ch;background:rgba(255,255,255,.04);border-radius:0 10px 10px 0}
.d-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.lk{display:flex;flex-direction:column;background:var(--sea-3);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .2s, box-shadow .2s}
.lk:hover,.lk:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 2px var(--sun)}
.lk-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:rgba(255,255,255,.04)}
.lk-img img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.lk-text{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px}
.lk-kick{font-size:12px;color:var(--sun-soft);letter-spacing:.04em}
.lk-title{font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lk-go{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- 動畫 ---------- */
/* 今日熱門：背景慢慢推近，文字依序進場 */
.hero-slide.on .hero-bg{animation:kenburns 9s ease-out both}
@keyframes kenburns{from{transform:scale(1.1)}to{transform:scale(1)}}
.hero-slide.on .hero-body>*{animation:rise-in .8s cubic-bezier(.2,.7,.2,1) both}
.hero-slide.on .hero-body>*:nth-child(2){animation-delay:.1s}
.hero-slide.on .hero-body>*:nth-child(3){animation-delay:.2s}
.hero-slide.on .hero-body>*:nth-child(4){animation-delay:.3s}
.hero-slide.on .hero-body>*:nth-child(5){animation-delay:.42s}
.hero-slide.on .timecode{animation:rise-in .7s .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise-in{from{opacity:0;transform:translateY(28px)}}

/* 捲動到才浮現（只有 JS 加上 .rv 時才會先藏起來） */
.rv{opacity:0;transform:translateY(40px);transition:opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.row.rv{transform:none}
.row.rv .section-title{transition-delay:0s}
.row.rv .item{opacity:0;transform:translateY(30px);transition:opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 80ms + 100ms)}
.row.rv.in .item{opacity:1;transform:none}

/* ---------- 關於 Runa：麥克風開講 ---------- */
.stage{position:relative;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:24px 40px;align-items:center;min-height:600px;padding:12px 0 0}
.stage-figure{position:relative;align-self:end}
.spot{position:absolute;left:50%;top:46%;width:130%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(234,137,19,.42) 0%,rgba(234,137,19,.12) 38%,rgba(234,137,19,0) 66%);pointer-events:none}
.runa-cut{position:relative;width:100%;height:auto;
  filter:drop-shadow(3px 0 0 var(--text)) drop-shadow(-3px 0 0 var(--text)) drop-shadow(0 3px 0 var(--text)) drop-shadow(0 -3px 0 var(--text)) drop-shadow(0 22px 34px rgba(0,0,0,.45));
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
  animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
.sparks{position:absolute;inset:0;pointer-events:none}
/* 麥克風位置大約在人像寬 35%、高 28% */
.mic-wave{position:absolute;left:35%;top:27%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--sun);opacity:0}
.stage.talking .mic-wave{animation:wave 1.4s ease-out infinite}
.stage.talking .mic-wave:nth-child(2){animation-delay:.45s}
.stage.talking .mic-wave:nth-child(3){animation-delay:.9s}
@keyframes wave{0%{transform:scale(.6);opacity:.9}100%{transform:scale(4.2);opacity:0}}
.spark{position:absolute;left:35%;top:27%;width:14px;height:14px;margin:-7px 0 0 -7px;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

.bubbles{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;padding-bottom:40px}
.bubble{position:relative;background:var(--sea-2);border:1px solid var(--line);border-radius:24px 24px 24px 6px;padding:16px 24px;max-width:100%;box-shadow:0 14px 30px rgba(0,0,0,.25)}
.b-hi{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--sun-soft)}
.b-name .name-row h1{font-size:clamp(34px,4vw,52px)}
.typing{margin:0;font-size:clamp(20px,2.2vw,28px);font-weight:900}
.type-word{color:var(--sun)}
.caret{display:inline-block;width:3px;height:1em;margin-left:4px;vertical-align:-0.12em;background:var(--sun);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.bubble-row{display:flex;flex-wrap:wrap;gap:10px}
.bubble-row .hashtag{font-size:16px;padding:9px 18px;background:var(--sun);color:var(--sea);transform:rotate(var(--r,0deg));box-shadow:0 10px 22px rgba(0,0,0,.25)}
.b-intro{max-width:620px}
.b-intro .about-intro{color:var(--text);font-size:17px}
.stage .abilities{width:100%;max-width:760px}
.stage .ability{transform:rotate(var(--r,0deg));background:var(--sea-2);box-shadow:0 12px 26px rgba(0,0,0,.25)}

/* 依序冒出：只有 JS 加上 .armed 時才先藏起來；沒有 JS 也能看到全部內容 */
/* 輪到之前先藏起來（data-pending 由 JS 加上，沒有 JS 就不會藏） */
.stage [data-pending]{opacity:0;transform:translate(-50px,24px) scale(.5) rotate(-6deg);transform-origin:left bottom}
body:not(.v2) .stage .bubbles>.bubble,body:not(.v2) .stage .bubble-row .hashtag,body:not(.v2) .stage .ability{transition:opacity .35s ease, transform .6s cubic-bezier(.3,1.5,.5,1)}

.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px auto 0;width:max-content;color:var(--muted);text-decoration:none;font-size:15px}
.scroll-cue span{font-size:22px;color:var(--sun);animation:nudge 1.6s ease-in-out infinite}
.scroll-cue:hover{color:var(--text)}
@keyframes nudge{50%{transform:translateY(8px)}}

@media (max-width:900px){
  .stage{grid-template-columns:1fr;min-height:0}
  .stage-figure{max-width:300px;margin:0 auto}
  .bubbles{align-items:stretch}
  .bubble{border-radius:24px 6px 24px 24px}
}

/* =========================================================
   新版（?v=2）：參考影片做的 1・2・3
   ========================================================= */
.giant{display:none}

/* ---- 1. 關於 Runa：大字在後、人像在前，泡泡噴向四周 ---- */
@media (min-width:1001px){
  .v2 .about{padding-top:20px}
  .v2 .stage{display:block;position:relative;height:min(90vh,860px);min-height:700px;padding:0}
  .v2 .giant{display:block;position:absolute;left:50%;top:2%;transform:translateX(-50%);
    font-family:var(--display);font-size:clamp(220px,31vw,520px);line-height:.85;letter-spacing:.03em;white-space:nowrap;pointer-events:none;
    color:transparent;-webkit-text-stroke:2px rgba(228,203,169,.4);
    background:linear-gradient(180deg,rgba(234,137,19,.22),rgba(175,80,49,0) 80%);-webkit-background-clip:text;background-clip:text;
    animation:giant-in 1.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes giant-in{from{transform:translateX(-50%) translateY(60px);letter-spacing:.25em}}
  .v2 .stage-figure{position:absolute;left:50%;bottom:0;transform:translateX(-46%);width:min(36vw,480px);z-index:2}
  .v2 .spot{width:150%}
  .v2 .bubbles{position:absolute;inset:0;display:block;padding:0;z-index:3;pointer-events:none}
  .v2 .bubbles>*,.v2 .bubble-row .hashtag{pointer-events:auto}
  .v2 .bubble{position:absolute;max-width:420px}
  .v2 .b-name{left:3%;top:22%}
  .v2 .b-type{left:6%;top:44%;--r:-2deg;transform:rotate(var(--r))}
  .v2 .bubble-row{position:static}
  .v2 .bubble-row .hashtag{position:absolute;font-size:17px;padding:10px 20px}
  .v2 .bubble-row .hashtag:nth-child(1){right:7%;top:18%}
  .v2 .bubble-row .hashtag:nth-child(2){right:3%;top:30%}
  .v2 .bubble-row .hashtag:nth-child(3){right:11%;top:42%}
  .v2 .b-intro{right:3%;top:55%;max-width:380px;border-radius:24px 24px 6px 24px}
  .v2 .stage .abilities{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:min(1120px,96%);max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;pointer-events:none}
  .v2 .stage .ability{pointer-events:auto;background:rgba(17,38,58,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .v2 .stage .ability:nth-child(2),.v2 .stage .ability:nth-child(3){margin-top:-26px}
}

/* ---- 2. 今日熱門：右側小卡，輪到的那張放大成整片背景 ---- */
.hx-bg{position:absolute;inset:0}
.hx-bg img,.hx-bg .poster-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-bg img{animation:kenburns 9s ease-out both}
.hx-cards{position:absolute;right:var(--gutter);bottom:14%;display:flex;gap:14px;z-index:3;perspective:900px}
.hx-card{position:relative;width:170px;aspect-ratio:3/4;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.25);padding:0;background:rgba(255,255,255,.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 18px 40px rgba(0,0,0,.35);text-align:left;transition:transform .35s cubic-bezier(.2,.7,.2,1), border-color .2s}
.hx-card:hover{transform:translateY(-8px) rotateY(-6deg);border-color:var(--sun)}
.hx-card img,.hx-card .tile-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.hx-card .tile-poster{font-size:30px}
.hx-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,18,29,.9) 0%,rgba(7,18,29,0) 60%)}
.hx-card span{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;font-size:16px;font-weight:900;line-height:1.3}
.hx-card small{display:block;font-family:var(--display);font-size:15px;font-weight:400;letter-spacing:1px;color:var(--sun-soft);margin-bottom:2px}
.hx-card.leaving{opacity:0;transform:scale(.9)}
.hx-grow{position:absolute;z-index:2;overflow:hidden;border-radius:16px;pointer-events:none}
.hx-grow img,.hx-grow .poster-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hx-body-anim>*{animation:rise-in .8s cubic-bezier(.2,.7,.2,1) both}
.hx-body-anim>*:nth-child(2){animation-delay:.08s}
.hx-body-anim>*:nth-child(3){animation-delay:.16s}
.hx-body-anim>*:nth-child(4){animation-delay:.24s}
.hx-body-anim>*:nth-child(5){animation-delay:.34s}
.hx-progress{position:absolute;left:var(--gutter);right:var(--gutter);bottom:7%;height:3px;background:rgba(251,243,232,.15);border-radius:2px;z-index:3;overflow:hidden}
.hx-progress i{position:absolute;inset:0;background:var(--sun);transform-origin:left;transform:scaleX(0)}
.hx-progress i.run{animation:hxbar 7s linear both}
@keyframes hxbar{to{transform:scaleX(1)}}
@media (max-width:900px){.hx-cards{display:none}}

/* ---- 3. 代表作：中間大、兩側小的輪播 ---- */
.cf-row{display:flex;flex-direction:column;gap:22px;align-items:center}
.cf-row .section-title{align-self:flex-start}
.cf-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cf-chip{background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 18px;font-size:15px;transition:all .2s}
.cf-chip:hover{border-color:var(--sun);color:var(--text)}
.cf-chip[aria-pressed="true"]{background:var(--sun);border-color:var(--sun);color:var(--sea);font-weight:700}
.cf-stage{position:relative;width:100%;height:clamp(300px,34vw,440px);perspective:1400px;overflow:hidden}
.cf-card{position:absolute;left:50%;top:50%;width:min(560px,62vw);aspect-ratio:16/10;border-radius:18px;overflow:hidden;border:none;padding:0;background:var(--sea-3);box-shadow:0 24px 50px rgba(0,0,0,.45);
  transition:transform .65s cubic-bezier(.2,.7,.2,1), opacity .5s, filter .5s;transform-style:preserve-3d}
.cf-card img,.cf-card .tile-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cf-card .tile-poster{font-size:48px}
.cf-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 22px 18px;background:linear-gradient(0deg,rgba(7,18,29,.95),rgba(7,18,29,0));text-align:left;opacity:0;transition:opacity .4s}
.cf-card.center .cf-cap{opacity:1}
.cf-cap b{display:block;font-size:24px;font-weight:900;margin-bottom:8px}
.cf-card:not(.center){filter:brightness(.55) saturate(.8)}
.cf-card.center:hover{box-shadow:0 0 0 2px var(--sun),0 24px 50px rgba(0,0,0,.45)}
.cf-nav{display:flex;gap:14px}
.cf-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--sea-2);color:var(--text);font-size:22px;transition:all .2s}
.cf-btn:hover{border-color:var(--sun);background:var(--sun);color:var(--sea)}

/* 版本切換鈕 */
.ver-switch{position:fixed;left:16px;bottom:16px;z-index:45;display:flex;gap:4px;padding:4px;border-radius:999px;background:rgba(7,18,29,.9);border:1px solid var(--line);font-size:13px}
.ver-switch a{padding:6px 12px;border-radius:999px;color:var(--muted);text-decoration:none}
.ver-switch a[aria-current="true"]{background:var(--sun);color:var(--sea);font-weight:700}

/* =========================================================
   整併版（2026-10-29）：現有版本的閱讀順序 ＋ 新版的衝擊力
   人像在左、泡泡在右錯落排開，最下面是軟硬實力
   ========================================================= */
.stage{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0 20px;min-height:min(78vh,720px);align-items:center;padding-top:0}
.stage-figure{align-self:end;justify-self:end;width:min(100%,500px)}
.runa-cut{filter:drop-shadow(2px 0 0 var(--text)) drop-shadow(-2px 0 0 var(--text)) drop-shadow(0 2px 0 var(--text)) drop-shadow(0 -2px 0 var(--text)) drop-shadow(0 26px 40px rgba(0,0,0,.45));
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 86%,transparent 100%)}
.pose-point{position:absolute;left:0;top:0;opacity:0}
.runa-cut.pose-talk,.runa-cut.pose-point{transition:opacity .5s ease}
.stage-figure.pointing .pose-talk{opacity:0}
.stage-figure.pointing .pose-point{opacity:1}
/* 3D 插畫的麥克風大約在寬 51%、高 23% */
.mic-wave{left:51%;top:23%}
.spark{left:51%;top:23%}
.spot{top:40%;width:120%}

.bubbles{gap:16px;padding-bottom:20px}
.b-name{margin-left:-70px}
.b-name .name-row h1{font-size:clamp(40px,4.4vw,62px)}
.b-hi{font-size:18px}
.b-type{margin-left:10px}
.typing{font-size:clamp(24px,2.6vw,34px)}
.bubble-row{margin-left:-40px}
.bubble-row .hashtag{font-size:17px;padding:10px 20px}
.b-intro{margin-left:30px;max-width:560px}
.b-intro .about-intro{font-size:18px;line-height:1.85}

.skill-strip{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;margin-top:-10px;position:relative;z-index:3}
.skill-strip .skills-groups,.skill-strip .tools{background:rgba(17,38,58,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line)}
.skill-strip [data-pending]{opacity:0;transform:translateY(18px) scale(.9)}
.skill-strip .skill-group,.skill-strip .tool{transition:opacity .45s ease, transform .55s cubic-bezier(.3,1.5,.5,1)}
.skill-strip .tool.pop .tool-icon,.skill-strip .tool.pop .tool-letter{animation:tool-bounce .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes tool-bounce{40%{transform:translateY(-10px) scale(1.08)}}

.scroll-cue{margin-top:28px}
.scroll-cue.ready{color:var(--sun-soft)}
.scroll-cue.ready span{animation:nudge 1s ease-in-out infinite}

/* 片尾：打字進場 */
.cr-caret{height:.9em;width:4px;vertical-align:-.08em}
.credits h2.typed-done .cr-caret{display:none}
.contact-pills [data-pending]{opacity:0;transform:translateY(16px)}
.contact-pills .pill{transition:opacity .4s ease, transform .5s cubic-bezier(.3,1.5,.5,1), border-color .2s}

@media (max-width:900px){
  .stage{grid-template-columns:1fr}
  .stage-figure{justify-self:center;max-width:320px}
  .b-name,.b-type,.bubble-row,.b-intro{margin-left:0}
  .skill-strip{grid-template-columns:1fr;margin-top:16px}
}
/* 3D 插畫頭像墊橘色底 */
.profile-pic{background:linear-gradient(160deg,var(--sun) 0%,var(--terra) 100%)}
.profile-pic img{object-fit:cover;object-position:center 15%}
.me{background:linear-gradient(160deg,var(--sun),var(--terra))}

/* 能力板：四張小卡。上排 硬實力｜軟實力｜語言，下排 常用工具 */
.skill-strip{display:block}
.skill-board{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.45fr) minmax(0,1.15fr);gap:16px}
.sk-card{background:rgba(17,38,58,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:18px;padding:20px 24px 22px}
.sk-card .skill-label{margin:0 0 14px;font-size:16px;letter-spacing:.08em}
.sk-tools{grid-column:1/-1}
/* 硬實力、軟實力：文字標籤 */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chip{font-size:16px;font-weight:500;line-height:1;padding:10px 16px;border-radius:999px;color:var(--text);background:rgba(228,203,169,.08);border:1px solid rgba(228,203,169,.35)}
.chips.soft .chip{background:rgba(127,199,204,.08);border-color:rgba(127,199,204,.4)}
.chip:hover{border-color:var(--sun);color:var(--sun-soft)}
/* 語言：三個小方塊，左邊語言、右邊程度 */
.langs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lang{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;border-radius:12px;background:rgba(228,203,169,.06);border:1px solid var(--line);border-left:3px solid var(--sun)}
.lang-name{font-size:19px;font-weight:500;color:var(--text);letter-spacing:.02em}
.lang-level{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--sand)}
.lang-level em{font-style:normal;font-size:13px;font-weight:700;color:var(--sun-soft);border:1px solid rgba(234,137,19,.55);border-radius:999px;padding:3px 9px;letter-spacing:.03em}
/* 硬實力、軟實力的小分類 */
.sub-groups{display:flex;flex-direction:column;gap:14px}
.sub-group{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:center}
.sub-cat{font-size:15px;font-weight:700;color:var(--sand);letter-spacing:.04em}
/* 常用工具：依類別分三組 */
.tool-groups{display:flex;flex-wrap:wrap;gap:18px 0}
.tool-group{display:flex;flex-direction:column;gap:12px;padding:0 28px;border-left:1px solid var(--line)}
.tool-group:first-child{padding-left:0;border-left:none}
.tool-cat{font-size:16px;font-weight:700;color:var(--sand);letter-spacing:.08em}
.tool-row{display:flex;flex-wrap:wrap;gap:12px 8px}
.skill-board .tool{width:76px}
.skill-board .tool-icon{width:52px;height:52px;border-radius:14px}
.skill-board .tool-name{font-size:14px;color:var(--text);opacity:.85}
/* 依序彈出 */
.skill-strip .skill-label,.skill-strip .sk-item{transition:opacity .45s ease, transform .55s cubic-bezier(.3,1.5,.5,1)}
.skill-strip .chip.pop,.skill-strip .lang.pop,.skill-strip .tool.pop .tool-icon{animation:chip-pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes chip-pop{40%{transform:translateY(-6px) scale(1.06)}}
@media (max-width:1100px){.skill-board{grid-template-columns:repeat(2,minmax(0,1fr))}.sk-lang{grid-column:1/-1}.langs{flex-direction:row;flex-wrap:wrap}.lang{flex:1 1 200px}}
@media (max-width:640px){.skill-board{grid-template-columns:1fr}.tool-group{padding:0;border-left:none;width:100%}}

/* 自我介紹兩段＋重點數字 */
.about-intro p{margin:0}
.about-intro p+p{margin-top:.7em}
.about-intro b{color:var(--sun-soft);font-weight:700}
.b-intro{max-width:600px}
.b-intro .about-intro{font-size:17px;line-height:1.8}

/* 指尖魔法：換成手指往下的姿勢時，指尖發光並灑下星光 */
.fingertip{position:absolute;left:77%;top:52.6%;width:0;height:0;z-index:4;opacity:0;transition:opacity .5s ease .35s;pointer-events:none}
.stage-figure.pointing .fingertip{opacity:1}
.ft-glow{position:absolute;left:-34px;top:-34px;width:68px;height:68px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,250,230,.95) 0%,rgba(250,196,110,.75) 22%,rgba(234,137,19,.28) 50%,rgba(234,137,19,0) 72%);
  animation:ft-pulse 1.6s ease-in-out infinite}
.ft-star{position:absolute;left:-16px;top:-16px;width:32px;height:32px;background:#FFF6DF;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:ft-spin 3.2s linear infinite}
@keyframes ft-pulse{0%,100%{transform:scale(.85);opacity:.85}50%{transform:scale(1.25);opacity:1}}
@keyframes ft-spin{0%{transform:rotate(0) scale(.8)}50%{transform:rotate(180deg) scale(1.1)}100%{transform:rotate(360deg) scale(.8)}}
.magic{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.magic.dot{clip-path:none;border-radius:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
.fingertip{filter:drop-shadow(0 0 6px rgba(250,196,110,.9))}
.stage-figure .sparks,.stage-figure{overflow:visible}
@media (prefers-reduced-motion:reduce){.ft-glow,.ft-star{animation:none}}

/* 文字作品：文章封面卡 */
.writing{padding-top:24px;padding-bottom:0}
.cf-article{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:30px 34px;text-decoration:none;color:var(--sea);text-align:left;
  background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 45%),linear-gradient(150deg,var(--sun-soft) 0%,var(--sun) 100%)}
.cf-article.sky{background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 45%),linear-gradient(150deg,#A9DCE0 0%,var(--sky) 100%)}
.cf-article.terra{color:var(--text);background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 45%),linear-gradient(150deg,#C8653C 0%,var(--terra) 100%)}
.cf-kicker{font-size:14px;font-weight:700;letter-spacing:.08em;opacity:.8}
.cf-title{font-size:clamp(22px,2.4vw,32px);font-weight:900;line-height:1.35;text-wrap:balance}
.cf-excerpt{font-size:15px;line-height:1.7;opacity:.85}
.cf-foot{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;border-top:1px solid currentColor;padding-top:12px;opacity:.85}
.cf-read{opacity:0;transition:opacity .3s}
.cf-card.center .cf-read{opacity:1}
.cf-article:not(.center){filter:brightness(.6) saturate(.85)}

/* 片單卡片下方：名稱＋兩個 hashtag 在同一行，下面一句亮點 */
.item-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.item-head .item-title{font-size:18px;font-weight:700;line-height:1.35;margin-right:2px}
.item-head .hook{font-size:12px;padding:2px 8px}
.item-hook{font-size:15px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item-text:hover .item-hook{color:var(--text)}

/* 最新上架：年份時間軸 */
.timeline .shelf{padding-top:4px}
.tl-mark{position:relative;height:46px;margin-bottom:-2px}
.tl-mark::before{content:"";position:absolute;left:0;right:calc(-1 * var(--gap));top:36px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(234,137,19,.85),rgba(234,137,19,.3));transform-origin:left center}
.item:last-child .tl-mark::before{right:0;background:linear-gradient(90deg,rgba(234,137,19,.3),rgba(234,137,19,0))}
.tl-dot{position:absolute;left:0;top:30px;width:14px;height:14px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 4px rgba(234,137,19,.22),0 0 14px rgba(234,137,19,.6)}
.tl-year{position:absolute;left:0;top:0;font-family:var(--display);font-size:28px;line-height:1;letter-spacing:1.5px;color:var(--sun-soft);white-space:nowrap}
.timeline .tile-year{display:none}
/* 進場：線從左往右畫出來，圓點和年份依序亮起，卡片跟在後面 */
.timeline.rv .tl-mark::before{transform:scaleX(0);transition:transform .45s cubic-bezier(.4,0,.2,1);transition-delay:calc(var(--i) * 160ms)}
.timeline.rv .tl-dot,.timeline.rv .tl-year{opacity:0;transform:scale(.3);transition:opacity .35s ease, transform .5s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i) * 160ms)}
.timeline.rv .tl-year{transform:translateY(8px)}
.timeline.rv .tile,.timeline.rv .item-text{opacity:0;transform:translateY(26px);transition:opacity .55s ease, transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i) * 160ms + 180ms)}
.timeline.rv .item{opacity:1;transform:none;transition:none}
.timeline.rv.in .tl-mark::before{transform:scaleX(1)}
.timeline.rv.in .tl-dot,.timeline.rv.in .tl-year,.timeline.rv.in .tile,.timeline.rv.in .item-text{opacity:1;transform:none}

/* 文字作品：右上角的平台標記 */
.cf-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cf-src{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:13px;font-weight:700;letter-spacing:.04em;padding:4px 11px;border-radius:999px;border:1px solid currentColor;opacity:.8}
.cf-src i{width:14px;height:14px;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.cf-why{display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.7;opacity:.9}
.cf-why small{font-size:12px;font-weight:700;letter-spacing:.12em;opacity:.75}

/* 左右滑片單時，不要觸發瀏覽器的上一頁／下一頁 */
html,body{overscroll-behavior-x:none}

/* 素材放大檢視 */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(3,8,14,.92);display:flex;align-items:center;justify-content:center;padding:56px 72px}
.lightbox[hidden]{display:none}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.lb-fig img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-fig figcaption{color:var(--muted);font-size:14px;text-align:center}
.lb-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.12);color:var(--text);font-size:20px;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:72px;border:none;border-radius:12px;background:rgba(255,255,255,.1);color:var(--text);font-size:32px;cursor:pointer}
.lb-nav:hover,.lb-close:hover{background:var(--sun);color:var(--sea)}
.lb-prev{left:14px}
.lb-next{right:14px}
@media (max-width:600px){.lightbox{padding:56px 12px}.lb-nav{width:40px;height:56px;font-size:26px}}

/* 能力分類頁：完整列出，不左右滑 */
.grid-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 16px}
.grid-list .item{flex:none;width:auto;scroll-snap-align:none}
@media (max-width:1100px){.grid-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.grid-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid-list{grid-template-columns:1fr}}

/* 手機版：漢堡按鈕（電腦版不顯示） */
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 9px;background:none;border:1px solid var(--line);border-radius:10px;flex:none}
.burger span{display:block;height:2px;border-radius:2px;background:var(--text);transition:transform .25s,opacity .25s}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* 手機版：文字作品卡片放大，文字不被切 */
@media (max-width:640px){
  .cf-stage{height:460px}
  .cf-card{width:82vw;aspect-ratio:auto;height:400px}
  .cf-article{padding:22px 20px;gap:10px}
  .cf-title{font-size:20px}
  .cf-why,.cf-excerpt{font-size:14px;line-height:1.65}
  .cf-kicker,.cf-foot{font-size:13px}
}
@media (max-width:860px){.burger{display:flex}}