/* ========================================
   CV-Site — HOME 页样式
   ======================================== */

:root {
  --purple-deep:#6e2fd5; --purple:#8738e0; --purple-mid:#a66de6;
  --purple-light:#d2b5f2; --pink-soft:#eca1ca; --pink-magenta:#b988c5;
  --pink-deep:#a146b3; --text-dark:#2D3047; --text-mid:#5A5D72;
  --text-light:#aca1c7; --white:#FFFFFF;
  --illustration-ink:#5f4b50; --illustration-text:#59484c;
  --illustration-paper:#fffaf0; --illustration-sky:#dff1f7;
  --illustration-blue:#a9d9ed; --illustration-pink:#f8d2dc;
  --illustration-green:#c3db7f; --illustration-yellow:#fff0ab;
  --illustration-line:#7a6569;
  --font-heading:'Arial Black','Helvetica Neue',Arial,sans-serif;
  --font-body:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --font-tag:'Helvetica Neue','Segoe UI',Arial,sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}
html{font-size:clamp(13px,1.5vw,16px)}
body{
  font-family:var(--font-body);color:var(--text-dark);
  background:
    radial-gradient(ellipse 70% 50% at 25% 25%,rgba(210,181,242,.18) 0%,transparent 55%),
    radial-gradient(ellipse 60% 45% at 72% 28%,rgba(236,161,202,.14) 0%,transparent 55%),
    radial-gradient(ellipse 55% 40% at 50% 75%,rgba(210,181,242,.12) 0%,transparent 55%),
    var(--white);
  -webkit-font-smoothing:antialiased;line-height:1.6
}

/* ===== 全屏滚动容器 ===== */
.scroll-container{
  height:100vh;overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.page-section{
  height:100vh;overflow:hidden;
  scroll-snap-align:start;
  position:relative;
}

/* ===== HOME 页 ===== */
#home{
  display:flex;flex-direction:column;
  padding-top:6.5vh;
}

/* ===== About Me 页 ===== */
#about{
  display:grid;
  grid-template-rows:auto auto 1fr;
  background:transparent;
  padding:8vh 3vw 2.4vh;
  isolation:isolate;
}
#about::before{
  content:'';
  position:absolute;
  inset:-10vh -8vw;
  z-index:-1;
  background:transparent;
  pointer-events:none;
}

/* ---- Header ---- */
.about-header{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.28rem;
  padding-top:.2vh;
}
.about-main-title{
  font-family:var(--font-heading);
  font-size:clamp(2.15rem,4.4vw,3.8rem);
  font-weight:900;
  letter-spacing:.035em;
  background:linear-gradient(102deg,#8f7df4 0%,#9fc9ff 36%,#e99ad6 73%,#ffc1df 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#9f82ed;
  line-height:.98;
  text-shadow:0 14px 34px rgba(166,145,236,.08);
}
/* ---- 时间线 ---- */
.about-timeline{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  padding:2.2vh 2vw 1.4vh;
}
.timeline-label{
  font-family:var(--font-tag);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9a8ec0;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(206,188,255,.45);
  box-shadow:0 8px 20px rgba(166,134,225,.08);
  border-radius:999px;
  padding:.25rem .8rem;
}
.timeline-track{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  width:min(100%,980px);
  padding:1rem 0 .55rem;
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
}
/* 横向细线 */
.timeline-track::before{
  content:'';
  position:absolute;
  top:1.58rem;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,rgba(140,178,255,.14),rgba(207,181,250,.55),rgba(255,168,213,.14));
}
.timeline-node{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:5px;
  background:none;border:none;
  cursor:pointer;
  font-family:var(--font-tag);
  padding:0 .25rem;
  flex:1 1 0;
  min-width:0;
}
.timeline-dot{
  width:12px;height:12px;
  border-radius:50%;
  border:2px solid rgba(175,158,220,.58);
  background:var(--white);
  transition:transform .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.timeline-node.active .timeline-dot{
  transform:scale(1.22);
  background:linear-gradient(135deg,#7fa4ff,#d56bd1 58%,#ff9bd0);
  border-color:transparent;
  box-shadow:0 0 0 6px rgba(207,181,250,.22),0 0 18px rgba(215,115,205,.28);
}
.timeline-period{
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.04em;
  color:#8d86a8;
  white-space:nowrap;
}
.timeline-node.active .timeline-period{ color:#40395d; }
.timeline-location{
  font-size:.5rem;
  font-weight:400;
  color:#b0a8c8;
  white-space:nowrap;
  max-width:9.5rem;
  overflow:hidden;
  text-overflow:ellipsis;
}
.timeline-node.active .timeline-location{ color:#756c91; }

/* ---- 3D 环绕轮播 ---- */
.about-cards{
  display:flex;align-items:center;justify-content:center;
  min-height:0;
  perspective:1800px;
  perspective-origin:50% 46%;
  overflow:hidden;
  cursor:grab;
  -webkit-user-select:none;user-select:none;
  padding:0 0 1vh;
}
.about-cards:active{ cursor:grabbing; }
.about-cards.dragging{ cursor:grabbing; }

.carousel-wrapper{
  position:relative;
  width:100%;height:100%;
  transform-style:preserve-3d;
  display:flex;align-items:center;justify-content:center;
  will-change:transform;
}

.about-card{
  position:absolute;
  width:clamp(220px,18vw,270px);
  height:clamp(300px,42vh,380px);
  border-radius:8px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(207,190,246,.34);
  box-shadow:0 12px 38px rgba(111,96,158,.1);
  overflow:hidden;
  display:flex;flex-direction:column;
  transform-style:preserve-3d;
  transition:box-shadow .4s ease,filter .4s ease;
  backdrop-filter:blur(12px);
}
.about-card.front{
  box-shadow:0 24px 62px rgba(116,101,168,.18),0 0 0 1px rgba(255,255,255,.72),0 0 34px rgba(219,143,214,.16);
  filter:saturate(1.04);
}

/* 卡片图片 */
.card-image-wrap{
  position:relative;
  width:100%;
  height:68%;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(229,241,255,.7),rgba(255,235,247,.62));
  flex-shrink:0;
}
.card-image-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
/* 图片底部渐隐 */
.card-image-wrap::after{
  content:'';
  position:absolute;
  bottom:-1px;left:0;right:0;
  height:30%;
  background:linear-gradient(to bottom,transparent 0%,rgba(255,255,255,.62) 48%,rgba(255,255,255,.98) 100%);
}
/* 左上角分类标签 */
.card-category{
  position:absolute;
  top:12px;left:12px;
  z-index:1;
  font-family:var(--font-tag);
  font-size:.58rem;
  font-weight:750;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#7865c8;
  background:linear-gradient(135deg,rgba(247,244,255,.74),rgba(255,239,249,.7));
  border:1px solid rgba(218,201,250,.52);
  backdrop-filter:blur(8px);
  padding:.34em .72em;
  border-radius:999px;
  box-shadow:0 8px 18px rgba(112,90,172,.08),inset 0 0 0 1px rgba(255,255,255,.48);
}
.card-number{
  position:absolute;
  right:13px;
  top:12px;
  z-index:1;
  font-family:var(--font-heading);
  font-size:.65rem;
  color:rgba(111,88,173,.48);
  background:rgba(255,255,255,.62);
  border-radius:999px;
  padding:.25em .52em;
  backdrop-filter:blur(10px);
}

/* 卡片内容区 */
.card-body{
  flex:1 1 auto;
  margin-top:-1.75rem;
  padding:0 1rem .56rem;
  display:flex;flex-direction:column;
  gap:.38rem;
  position:relative;
  z-index:2;
}
.card-head{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:.56rem;
}
.card-head-icon{
  width:1.1rem;height:1.1rem;
  color:#7f65df;
  flex-shrink:0;
}
.card-logo-wrap,
.card-icon-wrap{
  width:2.25rem;
  height:2.25rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(211,195,248,.62);
  box-shadow:0 10px 24px rgba(108,94,150,.12);
}
.card-logo{
  width:1.45rem;
  height:1.45rem;
  max-width:1.45rem;
  object-fit:contain;
}
.card-title{
  font-family:var(--font-heading);
  font-size:clamp(.84rem,1.08vw,1rem);
  font-weight:850;
  letter-spacing:0;
  color:#36334e;
  line-height:1.08;
}
.card-subtitle{
  font-family:var(--font-tag);
  margin-top:.18rem;
  font-size:.62rem;
  font-weight:600;
  color:#8b82a7;
}
.card-items{
  display:flex;flex-wrap:wrap;gap:.25rem .3rem;
  align-content:flex-start;
  max-height:4.8rem;
  overflow:hidden;
}
.about-card[data-card-id="base-info"] .card-items{max-height:6.5rem}
.card-tag{
  font-family:var(--font-tag);
  font-size:.56rem;
  font-weight:650;
  color:#7d60d6;
  background:linear-gradient(135deg,rgba(232,225,255,.72),rgba(255,233,247,.7));
  border:1px solid rgba(218,197,248,.58);
  padding:.24em .58em;
  border-radius:999px;
  white-space:nowrap;
}
.about-card[data-card-id="base-info"] .card-items{
  gap:5px;
}
.about-card[data-card-id="base-info"] .card-tag{
  font-size:.5rem;
  padding:.2em .54em;
}
.about-card[data-card-id="base-info"]{
  overflow:visible;
}
.about-card[data-card-id="base-info"] .card-image-wrap{
  border-radius:8px 8px 0 0;
}
.card-tag-private{
  position:relative;
  cursor:help;
}
.card-tag-private::after{
  content:attr(data-private-value);
  position:absolute;
  z-index:20;
  left:50%;
  top:calc(100% + .28rem);
  transform:translate(-50%,-3px);
  width:max-content;
  max-width:11rem;
  white-space:normal;
  text-align:center;
  color:#5f4aa8;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(190,166,245,.42);
  border-radius:8px;
  box-shadow:0 12px 28px rgba(107,83,170,.14);
  padding:.38rem .52rem;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.card-tag-private:hover::after,
.card-tag-private:focus::after,
.card-tag-private:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0);
}
.card-info-list{
  display:flex;flex-direction:column;gap:3px;
}
.card-info-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:6px;
  font-size:.58rem;
  color:#756f8d;
  min-width:0;
}
.card-info-item i{
  width:.68rem;height:.68rem;
  color:#ad9bea;
  flex-shrink:0;
}
.card-info-value{
  color:#39344f;
  font-weight:700;
  text-align:right;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 卡片操作按钮 */
.card-action{
  margin-top:.1rem;
  padding-top:.15rem;
}
.card-action-btn{
  display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--font-tag);
  font-size:.48rem;
  font-weight:750;
  color:#745ad8;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(174,150,232,.36);
  border-radius:999px;
  padding:.24em .68em;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.card-action-btn:hover{
  transform:translateY(-1px);
  background:rgba(248,244,255,.95);
  border-color:rgba(160,130,210,.52);
}
.card-action-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}
.card-action-btn i{
  width:.62rem;height:.62rem;
}
.about-card[data-card-id="base-info"] .card-action-btn{
  font-size:.42rem;
  padding:.18em .52em;
}
.about-card[data-card-id="base-info"] .card-action-btn i{
  width:.54rem;
  height:.54rem;
}

/* 移动到 About Me 时隐藏 HOME 左右提示 (由 JS IntersectionObserver 控制) */
.interact-hint.is-hidden-by-about,
.easter-egg-hint.is-hidden-by-about{
  opacity:0;pointer-events:none;
}
a{text-decoration:none;color:inherit}ul{list-style:none}

/* ===== 彩带 ===== */
.ribbons-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.ribbon{position:absolute;top:-8%;border-radius:2px;opacity:0;will-change:top,transform;animation:ribbonFloat linear infinite}
@keyframes ribbonFloat{
  0%{top:-8%;opacity:0;transform:translateX(0) rotate(0deg)}
  8%{opacity:.4}
  85%{opacity:.25}
  100%{top:105%;opacity:0;transform:translateX(var(--drift)) rotate(var(--spin))}
}

/* ===== 导航 ===== */
.navbar{position:fixed;top:0;left:0;width:100%;z-index:1000;display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);border-bottom:1px solid rgba(135,56,224,.06);padding:0 3vw}
.nav-list{display:flex;justify-content:flex-end;align-items:center;gap:2.5vw;height:6.5vh;list-style:none;margin:0;padding:0}
.nav-item{position:relative;display:inline-block;font-size:.78rem;font-weight:500;color:var(--text-mid);letter-spacing:.06em;text-transform:uppercase;padding:.3em 0;transition:color .3s ease;cursor:pointer}
.nav-item::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--purple);transition:width .3s ease}
.nav-item:hover{color:var(--purple)}
.nav-item:hover::after{width:100%}

.nav-tear-wrap{position:relative;display:inline-block}
.nav-tear-original{display:inline-block;transition:opacity .15s ease}
.nav-tear-wrap:hover .nav-tear-original{opacity:.3}
.nav-tear-half{position:absolute;top:0;left:0;display:inline-block;white-space:nowrap;color:var(--purple);pointer-events:none;opacity:0;transition:opacity .1s ease}
.nav-tear-wrap:hover .nav-tear-half{opacity:1}
.nav-tear-top{clip-path:polygon(0% 0%,4% 85%,8% 100%,12% 80%,16% 95%,20% 78%,24% 92%,28% 82%,32% 98%,36% 76%,40% 94%,44% 80%,48% 96%,52% 74%,56% 90%,60% 82%,64% 96%,68% 78%,72% 92%,76% 80%,80% 94%,84% 76%,88% 90%,92% 82%,96% 95%,100% 85%,100% 0%);animation:nv-up .35s cubic-bezier(.25,.46,.45,.94) forwards}
.nav-tear-bottom{clip-path:polygon(0% 100%,4% 85%,8% 100%,12% 80%,16% 95%,20% 78%,24% 92%,28% 82%,32% 98%,36% 76%,40% 94%,44% 80%,48% 96%,52% 74%,56% 90%,60% 82%,64% 96%,68% 78%,72% 92%,76% 80%,80% 94%,84% 76%,88% 90%,92% 82%,96% 95%,100% 85%,100% 100%,0% 100%);animation:nv-down .35s cubic-bezier(.25,.46,.45,.94) forwards}
@keyframes nv-up{from{transform:translateY(0);opacity:0}to{transform:translateY(-3px);opacity:1}}
@keyframes nv-down{from{transform:translateY(0);opacity:0}to{transform:translateY(3px);opacity:1}}
.nav-tear-wrap:not(:hover) .nav-tear-top{animation:nv-up-rev .25s ease forwards}
.nav-tear-wrap:not(:hover) .nav-tear-bottom{animation:nv-down-rev .25s ease forwards}
@keyframes nv-up-rev{from{transform:translateY(-3px);opacity:1}to{transform:translateY(0);opacity:0}}
@keyframes nv-down-rev{from{transform:translateY(3px);opacity:1}to{transform:translateY(0);opacity:0}}

/* ===== Hero ===== */
.hero{flex:0 0 auto;text-align:center;padding:3.2vh 2rem 1.5vh;background:transparent}
.hero-name{
  font-family:var(--font-heading);
  font-size:clamp(3.4rem,7.4vw,6.4rem);
  font-weight:900;
  letter-spacing:.075em;
  line-height:.95;
  background:linear-gradient(102deg,#6533dd 0%,#7557ed 27%,#9637e1 49%,#bd2fd3 73%,#dd2fb6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#8738e0;
}
.hero-subtitle{
  margin-top:.78rem;
  font-family:var(--font-tag);
  font-size:clamp(.78rem,1.15vw,1rem);
  color:#a292c9;
  font-weight:500;
  letter-spacing:.035em;
}

/* ===== 角色区 ===== */
.character-area{flex:1 1 auto;display:flex;justify-content:center;align-items:center;background:transparent;overflow:visible;position:relative}
.character-container{position:relative;width:min(700px,75vw);height:min(520px,60vh)}
.three-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;cursor:grab}
.three-canvas:active{cursor:grabbing}
.three-canvas.is-hidden{opacity:0;pointer-events:none}
.character-fallback-image{
  position:absolute;
  left:50%;
  bottom:0;
  z-index:2;
  width:auto;
  height:82%;
  max-width:46%;
  object-fit:contain;
  transform:translateX(-50%);
  mix-blend-mode:multiply;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .35s ease;
}
.character-fallback-image.is-visible{opacity:1;visibility:visible}
.interact-hint.is-hidden{opacity:0;visibility:hidden}
.easter-egg-hint.is-hidden{opacity:0;visibility:hidden}
.model-status{
  position:absolute;
  left:50%;
  bottom:4%;
  z-index:4;
  transform:translateX(-50%);
  font-family:var(--font-tag);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.04em;
  color:#a292c9;
  white-space:nowrap;
  pointer-events:none;
  opacity:.78;
  transition:opacity .35s ease;
}
.model-status.is-hidden{opacity:0}
.model-status.is-error{color:#bd3ec8}

/* ---- Loading spinner（人物头部高度，ENFP ↔ Creative 标签中间） ---- */
.loading-spinner{
  position:absolute;
  top:27%;left:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.55rem;
  transition:opacity .35s ease;
  pointer-events:none;
}
.loading-spinner.is-hidden{
  opacity:0;
}
.spinner-ring{
  position:relative;
  width:28px;height:28px;
}
/* 外圈（静止光环） */
.spinner-ring::before{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:1.5px solid rgba(180,150,220,.18);
}
/* 内圈（旋转弧线） */
.spinner-ring::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:#b896e8;
  border-right-color:rgba(200,170,245,.5);
  animation:spinnerSpin .75s linear infinite;
  filter:drop-shadow(0 0 6px rgba(180,140,230,.35));
}
@keyframes spinnerSpin{ to{ transform:rotate(360deg); } }
.spinner-text{
  font-family:var(--font-tag);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.16em;
  color:#a898d4;
  text-transform:uppercase;
}

/* ---- 拉绳提示（暗黑模式中） ---- */
.pull-chain-hint{
  position:fixed;
  z-index:10003;
  top:92px;
  right:28px;
  font-family:var(--font-tag);
  font-size:.58rem;
  font-weight:400;
  letter-spacing:.08em;
  color:rgba(200,175,240,.7);
  text-align:right;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .5s ease 1s, transform .5s ease 1s;
  pointer-events:none;
}
.easter-egg-overlay.dark .pull-chain-hint{
  opacity:1;
  transform:translateY(0);
}

/* ===== 标签 ===== */
.character-tags{position:absolute;z-index:5;top:0;left:0;width:100%;height:100%;pointer-events:none}
.tag{position:absolute;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 3px 7px rgba(126,79,224,.13));transition:filter .25s ease}
.tag:hover{filter:drop-shadow(0 5px 12px rgba(126,79,224,.22))}

.tag-inner{
  display:inline-block;
  font-family:var(--font-tag);
  font-size:clamp(.68rem,1vw,.84rem);
  font-weight:600;
  letter-spacing:0;
  line-height:1.2;
  white-space:nowrap;
  padding:.5em 1.18em;
  border-radius:999px;
  border:1px solid;
  backdrop-filter:blur(5px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.68);
  transform:rotate(var(--rot));
  transition:transform .25s ease,box-shadow .25s ease;
}
.tag:hover .tag-inner{transform:rotate(var(--rot)) scale(1.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 4px 13px rgba(122,74,222,.12)}

/* 颜色 */
.tags-left .tag:nth-child(1) .tag-inner{color:#7c43e8;border-color:#d7c4fb;background:rgba(250,247,255,.88)}
.tags-left .tag:nth-child(2) .tag-inner{color:#8f37e3;border-color:#e2c8fa;background:rgba(253,248,255,.9)}
.tags-left .tag:nth-child(3) .tag-inner{color:#7650df;border-color:#d9ccfa;background:rgba(249,247,255,.9)}
.tags-left .tag:nth-child(4) .tag-inner{color:#bd3ec8;border-color:#efc6e8;background:rgba(255,248,253,.91)}
.tags-left .tag:nth-child(5) .tag-inner{color:#7745df;border-color:#d7c7f8;background:rgba(250,248,255,.9)}
.tags-right .tag:nth-child(1) .tag-inner{color:#8650e6;border-color:#ddcef9;background:rgba(250,248,255,.9)}
.tags-right .tag:nth-child(2) .tag-inner{color:#c146c3;border-color:#f0cce7;background:rgba(255,248,253,.91)}
.tags-right .tag:nth-child(3) .tag-inner{color:#7445dc;border-color:#d7c8f7;background:rgba(250,248,255,.9)}
.tags-right .tag:nth-child(4) .tag-inner{color:#d164b2;border-color:#f2d2e5;background:rgba(255,249,253,.91)}
.tags-right .tag:nth-child(5) .tag-inner{color:#8957e5;border-color:#dfd1fa;background:rgba(250,248,255,.9)}

/* S 弧线位置 */
.tags-left .tag:nth-child(1){left:8%;top:11%;--rot:0deg}
.tags-left .tag:nth-child(2){left:2%;top:27%;--rot:0deg}
.tags-left .tag:nth-child(3){left:7%;top:43%;--rot:0deg}
.tags-left .tag:nth-child(4){left:0;top:59%;--rot:0deg}
.tags-left .tag:nth-child(5){left:10%;top:76%;--rot:0deg}
.tags-right .tag:nth-child(1){right:8%;top:11%;--rot:0deg}
.tags-right .tag:nth-child(2){right:2%;top:27%;--rot:0deg}
.tags-right .tag:nth-child(3){right:5%;top:43%;--rot:0deg}
.tags-right .tag:nth-child(4){right:1%;top:59%;--rot:0deg}
.tags-right .tag:nth-child(5){right:7%;top:76%;--rot:0deg}

/* ---- 撕碎 ---- */
.tag-orig { display:inline-block; }
.tag-shard {
  position:absolute; top:0; left:0;
  display:inline-block; white-space:nowrap;
  font-family:var(--font-tag); font-size:inherit; font-weight:600;
  letter-spacing:0;
  padding:.5em 1.18em; border-radius:999px;
  border:1px solid;
  background:#fff;
  pointer-events:none; opacity:0;
}

/* 撕裂激活 */
.tag-inner.tearing .tag-orig { opacity:0; }
.tag-inner.tearing .shard-L {
  clip-path: polygon(0% 0%,52% 0%,38% 10%,56% 22%,42% 34%,55% 46%,38% 58%,53% 70%,44% 82%,54% 94%,0% 100%);
  animation: ripL .55s cubic-bezier(.32,0,.67,0) forwards;
}
.tag-inner.tearing .shard-R {
  clip-path: polygon(100% 0%,52% 0%,68% 16%,48% 28%,62% 40%,49% 52%,64% 64%,46% 76%,58% 88%,50% 96%,100% 100%);
  animation: ripR .6s cubic-bezier(.32,0,.67,0) forwards;
}

/* 撕完后原框消失（碎片已自行消失） */
.tag-inner.torn {
  border-color:transparent!important;
  background:transparent!important;
}

@keyframes ripL {
  0%   { transform:translate(0,0) rotate(0deg); opacity:1; }
  40%  { transform:translate(-5px,20px) rotate(-4deg); opacity:.9; }
  100% { transform:translate(-16px,60px) rotate(-15deg); opacity:0; }
}
@keyframes ripR {
  0%   { transform:translate(0,0) rotate(0deg); opacity:1; }
  40%  { transform:translate(6px,18px) rotate(5deg); opacity:.9; }
  100% { transform:translate(18px,55px) rotate(16deg); opacity:0; }
}

/* ===== 底部 ===== */
.footer{flex:0 0 auto;background:transparent;text-align:center;padding:2vh 2rem;display:flex;align-items:center;justify-content:center}
.footer-text{font-family:var(--font-heading);font-size:clamp(.65rem,.9vw,.8rem);font-weight:600;letter-spacing:.14em;color:var(--text-light);text-transform:uppercase}

/* ========================================
   彩蛋系统 — 撕碎所有标签触发
   ======================================== */

/* ---- 左侧交互提示 ---- */
.interact-hint {
  position: fixed;
  left: 2.2vw;
  top: 42%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 550;
  color: var(--text-mid);
  letter-spacing: .06em;
  opacity: .78;
  pointer-events: none;
  transition: opacity .6s ease;
}
/* 右侧动态箭头 → 指向角色 */
.interact-hint::after {
  content: '';
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid var(--purple-light);
  animation: arrowBounceRight 2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(160,120,220,.35));
}

/* ---- 右侧彩蛋提示 ---- */
.easter-egg-hint {
  position: fixed;
  right: 2.2vw;
  top: 42%;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-tag);
  font-size: .72rem;
  font-weight: 550;
  color: var(--text-mid);
  letter-spacing: .06em;
  writing-mode: horizontal-tb;
  opacity: .78;
  pointer-events: none;
  transition: opacity .6s ease;
}
/* 左侧动态箭头 ← 指向角色 */
.easter-egg-hint::after {
  content: '';
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 11px solid var(--purple-light);
  animation: arrowBounceLeft 2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(160,120,220,.35));
}
/* 所有标签撕完后提示消失 */
.easter-egg-hint.all-torn {
  opacity: 0;
  transition: opacity .3s ease;
}

/* ---- 箭头动画 ---- */
@keyframes arrowBounceRight {
  0%, 100% { transform: translateX(0); opacity: .5; }
  50%      { transform: translateX(8px); opacity: 1; }
}
@keyframes arrowBounceLeft {
  0%, 100% { transform: translateX(0); opacity: .5; }
  50%      { transform: translateX(-8px); opacity: 1; }
}

/* ---- 全屏遮罩层 ---- */
.easter-egg-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.easter-egg-overlay.active {
  pointer-events: auto;
}

/* ---- Blink 眼睑 ---- */
.blink-lid {
  position: fixed;
  left: 0;
  width: 100%;
  height: 52vh;
  z-index: 10001;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.blink-lid-top {
  top: 0;
  transform: translateY(-105%);
}
.blink-lid-bottom {
  bottom: 0;
  transform: translateY(105%);
}
.blink-lid.closed .blink-lid-top,
.blink-lid-top.closing {
  transform: translateY(0);
}
.blink-lid.closed .blink-lid-bottom,
.blink-lid-bottom.closing {
  transform: translateY(0);
}
.blink-lid-top::after,
.blink-lid-bottom::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #07050f;
}

/* ---- 倒计时（在人物背后） ---- */
.countdown-display {
  position: absolute;
  z-index: 1;
  top: 36%;
  left: 6%;
  transform: translate(0, -50%);
  font-family: var(--font-heading);
  font-size: clamp(5.5rem, 11vw, 13rem);
  font-weight: 900;
  color: #c8b0f0;
  text-shadow: 0 0 50px rgba(160,120,220,.5), 0 0 100px rgba(160,120,220,.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
.countdown-display.show {
  opacity: 1;
}
/* 数字出现微放大 */
.countdown-display.pop {
  animation: countPop .35s cubic-bezier(.16,1,.3,1);
}
@keyframes countPop {
  0%   { transform: translate(0,-50%) scale(.6); opacity: 0; }
  100% { transform: translate(0,-50%) scale(1); opacity: 1; }
}

/* ---- 倒计时粉尘粒子 ---- */
.countdown-particle {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  animation: particleBurst .75s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes particleBurst {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  30%  { opacity: .9; }
  100% { transform: translate(var(--px),var(--py)) scale(0); opacity: 0; }
}

/* ---- Slogan ---- */
/* Slogan — 左右分列，不被中间人物遮挡 */
.easter-egg-slogan {
  position: fixed;
  z-index: 10002;
  top: 50%;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem,2.2vw,1.9rem);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .07em;
  color: #d4c0f8;
  text-shadow: 0 0 40px rgba(180,140,240,.4), 0 0 80px rgba(160,120,220,.15);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease .6s, transform 1s ease .6s;
}
.slogan-left {
  left: 5%;
  text-align: left;
  transform: translateY(-50%) translateX(-12px);
}
.slogan-right {
  right: 5%;
  text-align: right;
  transform: translateY(-50%) translateX(12px);
}
.easter-egg-overlay.dark .easter-egg-slogan {
  opacity: 1;
}
.easter-egg-overlay.dark .slogan-left {
  transform: translateY(-50%) translateX(0);
}
.easter-egg-overlay.dark .slogan-right {
  transform: translateY(-50%) translateX(0);
}

/* ---- 暗黑粒子特效 ---- */
.dark-particles {
  position: fixed;
  z-index: 10001;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease .8s;
}
.easter-egg-overlay.dark .dark-particles {
  opacity: 1;
}
.dark-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: darkParticleFloat 6s ease-in-out infinite;
}
@keyframes darkParticleFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  15%  { opacity: .7; }
  50%  { opacity: .5; transform: translateY(-60px) scale(1.3); }
  85%  { opacity: .1; }
  100% { transform: translateY(-120px) scale(.6); opacity: 0; }
}

/* ---- 拉绳开关 ---- */
.pull-chain {
  position: fixed;
  z-index: 10003;
  top: 18px;
  right: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-28px);
  transition: opacity .5s ease .8s, transform .5s ease .8s;
  animation: none;
}
.easter-egg-overlay.dark .pull-chain {
  opacity: 1;
  transform: translateY(0);
  animation: chainSwing 4s ease-in-out infinite;
  animation-delay: 1.5s;
}
/* 拉绳线 */
.chain-line {
  width: 2px;
  height: 52px;
  background: linear-gradient(to bottom, #c8b0f0, #a080d0 40%, #c8b0f0 70%, #a080d0);
  border-radius: 1px;
}
/* 拉绳手柄 */
.chain-handle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #c8b0f0;
  background: transparent;
  margin-top: 4px;
  box-shadow: 0 0 12px rgba(180,140,240,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pull-chain:hover .chain-handle {
  transform: scale(1.25);
  box-shadow: 0 0 22px rgba(200,170,250,.55);
}
.pull-chain:active .chain-handle {
  transform: scale(.9) translateY(6px);
}
/* 拉绳微摆 */
@keyframes chainSwing {
  0%,100% { transform: translateY(0) rotate(0deg); }
  15%     { transform: translateY(0) rotate(2.5deg); }
  30%     { transform: translateY(0) rotate(-2deg); }
  45%     { transform: translateY(0) rotate(1.5deg); }
  60%     { transform: translateY(0) rotate(-.8deg); }
  75%     { transform: translateY(0) rotate(0deg); }
}

/* ===== 响应式 ===== */
@media(max-width:768px){
  .nav-list{gap:3vw;justify-content:center}
  .nav-item{font-size:.62rem}
  .hero-name{font-size:clamp(2.4rem,8vw,3.6rem)}
  .hero-subtitle{font-size:.72rem}
  .character-container{width:92vw;height:50vh}
  .character-fallback-image{height:80%;max-width:58%}
  .tag-inner{font-size:.5rem;padding:.3em .6em}
  .tags-left .tag:nth-child(1){left:6%;top:14%}
  .tags-left .tag:nth-child(2){left:2%;top:30%}
  .tags-left .tag:nth-child(3){left:3%;top:46%}
  .tags-left .tag:nth-child(4){left:1%;top:62%}
  .tags-left .tag:nth-child(5){left:5%;top:78%}
  .tags-right .tag:nth-child(1){right:6%;top:14%}
  .tags-right .tag:nth-child(2){right:2%;top:30%}
  .tags-right .tag:nth-child(3){right:3%;top:46%}
  .tags-right .tag:nth-child(4){right:1%;top:62%}
  .tags-right .tag:nth-child(5){right:5%;top:78%}
  /* 左右提示缩小 */
  .interact-hint,.easter-egg-hint{font-size:.56rem;opacity:.65;left:3vw;right:3vw}
  .interact-hint::after,.easter-egg-hint::after{border-width:5px;border-left-width:8px;border-right-width:8px}
  /* 暗黑模式 slogan 收窄 */
  .slogan-left{left:3%;font-size:.85rem}
  .slogan-right{right:3%;font-size:.85rem}
  /* 拉绳提示调整 */
  .pull-chain-hint{top:82px;right:16px;font-size:.5rem}
  /* 倒计时适配 */
  .countdown-display{left:4%;font-size:clamp(3.5rem,9vw,8rem)}
  /* loading spinner */
  .loading-spinner{top:30%}
  /* About Me */
  #about{padding:7.2vh 4vw 2.2vh;grid-template-rows:auto auto 1fr}
  #about,.about-header,.about-timeline,.about-cards{width:100%;max-width:100vw}
  .about-main-title{font-size:clamp(1.75rem,8vw,2.55rem)}
  .about-timeline{padding:1.5vh 0 1vh;gap:.48rem}
  .timeline-label{font-size:.52rem;padding:.2rem .62rem}
  .timeline-track{
    justify-content:flex-start;
    gap:1rem;
    overflow-x:auto;
    padding:.78rem .85rem .5rem;
    border-radius:0;
    scrollbar-width:none;
  }
  .timeline-track::-webkit-scrollbar{display:none}
  .timeline-track::before{left:1.2rem;right:1.2rem;top:1.36rem}
  .timeline-node{flex:0 0 7.6rem;padding:0}
  .timeline-period{font-size:.5rem}
  .timeline-location{font-size:.46rem;max-width:7.4rem}
  .about-cards{
    perspective:none;
    justify-content:flex-start;
    align-items:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    padding:4vh 0 .5vh;
    cursor:grab;
    scrollbar-width:none;
  }
  .about-cards::-webkit-scrollbar{display:none}
  .carousel-wrapper{
    position:relative;
    width:max-content;
    min-width:100%;
    height:100%;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:1rem;
    padding:0 13vw;
    transform:none!important;
    transform-style:flat;
  }
  .about-card{
    position:relative;
    flex:0 0 min(66vw,230px);
    width:min(66vw,230px);
    height:min(48vh,330px);
    transform:none!important;
    opacity:1!important;
  }
  .card-image-wrap{height:66%}
  .card-body{margin-top:-1.45rem;padding:0 .78rem .48rem;gap:.24rem}
  .card-logo-wrap,.card-icon-wrap{width:1.95rem;height:1.95rem}
  .card-logo{width:1.25rem;height:1.25rem;max-width:1.25rem}
  .card-title{font-size:.76rem}
  .card-subtitle,.card-action-btn{font-size:.54rem}
  .card-tag{font-size:.48rem}
  .card-info-item{font-size:.5rem;gap:5px}
  /* 极窄屏 < 560px：进一步压缩 */
  .about-main-title{font-size:clamp(1.5rem,9vw,2rem)}
  .about-timeline{padding:1vh 0 .8vh;gap:.4rem;position:relative}
  .timeline-label{font-size:.48rem;padding:.18rem .55rem;letter-spacing:.14em}
  .timeline-track{gap:.7rem;padding:.6rem .8rem .45rem}
  .timeline-track::before{left:1rem;right:1rem;top:1.2rem}
  .timeline-node{flex:0 0 6.4rem;gap:3px}
  .timeline-period{font-size:.46rem}
  .timeline-location{font-size:.42rem;max-width:6.2rem}
  .about-cards{padding:3vh 0 .4vh}
  .carousel-wrapper{padding:0 8vw;gap:.6rem}
  .about-card{flex:0 0 min(78vw,210px);width:min(78vw,210px);height:min(52vh,310px)}
  .card-image-wrap{height:58%}
  .card-body{margin-top:-1.2rem;padding:0 .55rem .4rem;gap:.2rem}
  .card-logo-wrap,.card-icon-wrap{width:1.6rem;height:1.6rem}
  .card-logo{width:1rem;height:1rem;max-width:1rem}
  .card-title{font-size:.68rem}
  .card-subtitle,.card-action-btn{font-size:.5rem}
  .card-tag{font-size:.44rem;padding:.16em .5em}
  .card-info-item{font-size:.46rem;gap:4px}
  /* 时间线左右淡出遮罩（提示可横滑） */
  .about-timeline::before,
  .about-timeline::after{
    content:'';position:absolute;top:50%;transform:translateY(-50%);
    width:22px;height:62%;pointer-events:none;z-index:3;
  }
  .about-timeline::before{left:0;background:linear-gradient(90deg,#faf7fd 0%,transparent 100%)}
  .about-timeline::after{right:0;background:linear-gradient(270deg,#faf7fd 0%,transparent 100%)}
  /* 卡片容器左右淡出 */
  .about-cards::before,
  .about-cards::after{
    content:'';position:absolute;top:0;bottom:0;
    width:18px;pointer-events:none;z-index:3;
  }
  .about-cards::before{left:0;background:linear-gradient(90deg,#faf7fd 0%,transparent 100%)}
  .about-cards::after{right:0;background:linear-gradient(270deg,#faf7fd 0%,transparent 100%)}
  .about-cards{position:relative}
}

.nav-home{display:flex;align-items:center;flex-shrink:0;height:6.5vh;padding:1.05vh 0}

/* ===== Internship 页 ===== */
.internship-section{
  padding-top:6.5vh; /* 导航占位 */
  background:
    radial-gradient(circle,rgba(95,75,80,.07) .7px,transparent .8px) 0 0/18px 18px,
    radial-gradient(ellipse 52% 46% at 26% 20%,rgba(169,217,237,.24) 0%,transparent 62%),
    radial-gradient(ellipse 48% 44% at 78% 74%,rgba(248,210,220,.28) 0%,transparent 64%),
    linear-gradient(135deg,#fbfdff 0%,var(--illustration-paper) 49%,#fff7fb 100%);
}
.internship-stage{
  height:calc(100vh - 6.5vh);
  width:100%;
  position:relative;
  overflow:hidden;
}
.internship-stage::before{
  content:'';
  position:absolute;
  inset:-8vh -6vw;
  background:
    linear-gradient(120deg,rgba(169,217,237,.26),transparent 42%),
    linear-gradient(300deg,rgba(248,210,220,.3),transparent 48%);
  opacity:.055;
  filter:saturate(.78) brightness(1.12);
  pointer-events:none;
}
.internship-meteors{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  opacity:.4;
}
.internship-meteor{
  position:absolute;
  top:var(--top);
  left:var(--left);
  width:clamp(46px,7vw,96px);
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,transparent 0%,hsla(var(--hue),62%,72%,.55) 52%,var(--illustration-paper) 100%);
  filter:none;
  transform:translate3d(-18vw,-14vh,0) rotate(-28deg);
  animation:intMeteorFall var(--dur) ease-in-out infinite;
  animation-delay:var(--delay);
  will-change:transform,opacity;
}
.internship-meteor::after{
  content:'';
  position:absolute;
  right:-2px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:45% 55% 48% 52%;
  border:1px solid var(--illustration-ink);
  background:var(--illustration-yellow);
  box-shadow:2px 2px 0 rgba(95,75,80,.14);
  transform:translateY(-50%);
}
@keyframes intMeteorFall{
  0%{opacity:0;transform:translate3d(-18vw,-14vh,0) rotate(-28deg)}
  10%{opacity:.82}
  34%{opacity:.46}
  58%,100%{opacity:0;transform:translate3d(34vw,42vh,0) rotate(-28deg)}
}

/* ---- 标题 ---- */
.internship-header{
  position:absolute;
  top:clamp(1.25rem, 3.2vh, 2.4rem);
  left:0;right:0;
  z-index:10;
  text-align:center;
  pointer-events:none;
  transition:opacity .65s ease,transform .65s ease;
}
.internship-main-title{
  font-family:var(--font-heading);
  font-size:clamp(2.2rem, 5vw, 4.4rem);
  font-weight:900;
  letter-spacing:.08em;
  color:var(--illustration-text);
  -webkit-text-fill-color:var(--illustration-text);
  margin:0 0 .18rem;
  line-height:.98;
  text-shadow:3px 3px 0 rgba(169,217,237,.72),6px 6px 0 rgba(248,210,220,.62);
}
.internship-subtitle{
  font-family:var(--font-body);
  font-size:clamp(.62rem, 1vw, .8rem);
  color:#806d72;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0;
}

.internship-stage.is-detail::before{
  opacity:.075;
}

/* 卡片容器 */
.internship-cards{
  position:absolute;
  top:53%;left:50%;
  transform:translate(-50%,-50%);
  width:90vw;
  max-width:1100px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(24px,3.8vw,66px);
  pointer-events:none;
  opacity:0;
  transition:opacity .85s ease .25s;
  perspective:1500px;
  z-index:6;
}
.internship-stage.is-cards .internship-cards{
  pointer-events:auto;
  opacity:1;
}

/* 单张卡片 */
.internship-card{
  --card-tilt:0deg;
  --split-from-x:0px;
  --split-from-scale-x:2.45;
  --split-from-scale-y:.82;
  --card-accent:var(--illustration-blue);
  --card-accent-soft:var(--illustration-sky);
  width:clamp(185px,19vw,275px);
  aspect-ratio:5/7;
  position:relative;
  cursor:pointer;
  transform:rotate(var(--card-tilt));
  transition:transform .62s cubic-bezier(.18,.86,.24,1),filter .35s ease,opacity .5s ease;
  border-radius:8px;
  pointer-events:auto;
  flex-shrink:0;
  filter:none;
}
.internship-card:nth-child(1){
  --card-tilt:-5deg;
  --split-from-x:102%;
  --card-accent:var(--illustration-blue);
  --card-accent-soft:var(--illustration-sky);
}
.internship-card:nth-child(2){
  --card-tilt:0deg;
  --split-from-x:0;
  --card-accent:var(--illustration-pink);
  --card-accent-soft:#fde8ed;
}
.internship-card:nth-child(3){
  --card-tilt:5deg;
  --split-from-x:-102%;
  --card-accent:var(--illustration-green);
  --card-accent-soft:#e9f1c9;
}
.internship-stage.is-cards .internship-card{
  animation:intCardSplit 1.35s cubic-bezier(.2,.88,.24,1) both;
}
.internship-stage.is-cards .internship-card:nth-child(1){animation-delay:.06s}
.internship-stage.is-cards .internship-card:nth-child(2){animation-delay:.16s}
.internship-stage.is-cards .internship-card:nth-child(3){animation-delay:.26s}
@keyframes intCardSplit{
  0%{opacity:0;transform:translateX(var(--split-from-x)) translateY(1.2vh) scaleX(var(--split-from-scale-x)) scaleY(var(--split-from-scale-y)) rotate(0deg);filter:blur(6px) saturate(.84)}
  18%{opacity:1}
  62%{opacity:1;transform:translateX(0) translateY(-.4vh) scale(1.035) rotate(var(--card-tilt));filter:blur(0) saturate(1.04)}
  100%{opacity:1;transform:translateX(0) translateY(0) scale(1) rotate(var(--card-tilt));filter:blur(0) saturate(1)}
}
.internship-card:hover{
  transform:translateY(-8px) rotate(var(--card-tilt));
  filter:saturate(1.03);
}
.internship-card:focus-visible{
  outline:3px solid rgba(122,167,233,.56);
  outline-offset:6px;
}
.internship-card:hover .internship-card-front,
.internship-card:hover .internship-card-back{
  box-shadow:9px 10px 0 rgba(95,75,80,.17),0 18px 34px rgba(95,75,80,.13);
}
.internship-card-inner{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transition:transform 1.02s cubic-bezier(.2,.86,.25,1);
  border-radius:8px;
  will-change:transform;
}
.internship-card.is-flipped .internship-card-inner{
  transform:rotateY(180deg);
}

/* ---- 翻转卡片 → detail 过渡动画 ---- */
.internship-card.is-flipping .internship-card-inner{
  animation:cardFlipOut .55s cubic-bezier(.22,.61,.36,1) forwards;
  pointer-events:none;
}
@keyframes cardFlipOut{
  0%  { transform:rotateY(180deg) scale(1); opacity:1; }
  30% { transform:rotateY(270deg) scale(1.08); opacity:.65; }
  100%{ transform:rotateY(360deg) scale(1.15); opacity:0; }
}

/* detail 面板翻转进场（针对整体容器） */
.internship-stage.is-opening-detail .internship-detail{
  animation:detailFlipIn .62s cubic-bezier(.18,.86,.24,1) both;
}
@keyframes detailFlipIn{
  0%  { transform:perspective(1000px) rotateY(-180deg) scale(.82); opacity:0; }
  50% { transform:perspective(1000px) rotateY(-90deg) scale(.9); opacity:.4; }
  100%{ transform:perspective(1000px) rotateY(0deg) scale(1); opacity:1; }
}

/* 卡片正面（图片面） */
.internship-card-front,
.internship-card-back{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border:2px solid var(--illustration-ink);
  border-radius:8px;
  overflow:hidden;
  box-shadow:6px 7px 0 rgba(95,75,80,.15),0 14px 28px rgba(95,75,80,.1);
  transition:box-shadow .3s ease;
}
.internship-card-front{
  background:var(--illustration-paper);
}
.internship-card-front img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.internship-card-front::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 56%,rgba(255,250,240,.86) 100%);
  pointer-events:none;
}
.card-front-number{
  position:absolute;
  right:.65rem;
  bottom:.62rem;
  z-index:2;
  font-family:var(--font-heading);
  font-size:clamp(.7rem,1.2vw,.95rem);
  line-height:1;
  color:var(--illustration-text);
  background:var(--illustration-paper);
  border:1px solid var(--illustration-ink);
  border-radius:4px;
  padding:.28em .45em;
  box-shadow:2px 2px 0 rgba(95,75,80,.14);
}

/* 卡片背面（信息面） */
.internship-card-back{
  background:
    radial-gradient(circle,rgba(95,75,80,.1) .7px,transparent .8px) 0 0/13px 13px,
    var(--illustration-paper);
  transform:rotateY(180deg);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(.82rem,1.35vw,1.08rem);
  gap:.34rem;
}
.internship-card-back::before{
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:27%;
  background:
    radial-gradient(circle at 14% 66%,var(--illustration-paper) 0 9%,transparent 9.8%),
    radial-gradient(circle at 25% 62%,var(--illustration-paper) 0 13%,transparent 13.8%),
    radial-gradient(circle at 77% 64%,var(--illustration-paper) 0 11%,transparent 11.8%),
    radial-gradient(circle at 88% 68%,var(--illustration-paper) 0 8%,transparent 8.8%),
    linear-gradient(180deg,var(--card-accent) 0 70%,var(--illustration-green) 70% 100%);
  border-bottom:2px solid var(--illustration-ink);
  z-index:0;
}
.internship-card-back::after{
  content:'';
  position:absolute;
  inset:.42rem;
  border:1px dashed rgba(95,75,80,.38);
  border-radius:4px;
  z-index:1;
  pointer-events:none;
}
.internship-card-back > *{
  position:relative;
  z-index:2;
}
.internship-card-back .card-back-logo{
  width:auto;
  height:clamp(1.4rem,2.6vh,2rem);
  object-fit:contain;
  align-self:flex-start;
  margin-bottom:.15rem;
}
.internship-card-back .card-back-icon{
  color:rgba(255,255,255,.72);
  align-self:flex-start;
  margin-bottom:.15rem;
  stroke-width:1.8;
}
.internship-card-back .card-back-kicker{
  align-self:flex-start;
  font-family:var(--font-tag);
  font-size:clamp(.45rem,.62vw,.54rem);
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--illustration-text);
  padding:.24rem .48rem;
  border-radius:4px;
  background:var(--illustration-paper);
  border:1px solid var(--illustration-ink);
  box-shadow:2px 2px 0 rgba(95,75,80,.14);
  margin-bottom:auto;
}
.internship-card-back .card-back-company{
  font-family:var(--font-heading);
  font-size:clamp(1.08rem,1.85vw,1.58rem);
  font-weight:800;
  color:var(--illustration-text);
  letter-spacing:0;
  line-height:1.02;
  display:flex;
  align-items:center;
  gap:.32rem;
  text-shadow:2px 2px 0 rgba(169,217,237,.48);
}
.internship-card-back .card-back-company-icon{
  width:.9rem;
  height:.9rem;
  flex:0 0 auto;
  color:#7aa7a0;
  stroke-width:2.2;
}
.internship-card-back .card-back-role{
  font-family:var(--font-body);
  font-size:clamp(.58rem,.82vw,.68rem);
  color:#765d66;
  font-weight:700;
  letter-spacing:0;
}
.internship-card-back .card-back-period{
  font-family:var(--font-tag);
  font-size:clamp(.48rem,.64vw,.56rem);
  color:#8a7479;
  font-weight:700;
}
.internship-card-back .card-back-summary{
  font-family:var(--font-body);
  font-size:clamp(.52rem,.72vw,.6rem);
  color:#6b595d;
  line-height:1.45;
  margin:.12rem 0 .08rem;
}
.internship-card-back .card-back-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.28rem;
}
.internship-card-back .card-back-tags span{
  font-family:var(--font-tag);
  font-size:clamp(.4rem,.54vw,.48rem);
  padding:.22em .62em;
  border-radius:4px;
  background:var(--card-accent-soft);
  border:1px solid var(--illustration-line);
  color:var(--illustration-text);
  font-weight:700;
  white-space:nowrap;
}
.internship-card-back .card-back-action{
  margin-top:.25rem;
  display:flex;
  align-items:center;
  gap:.3rem;
  font-family:var(--font-tag);
  font-size:clamp(.48rem,.62vw,.55rem);
  color:var(--illustration-text);
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  cursor:pointer;
  padding-top:.32rem;
  border-top:1px dashed rgba(95,75,80,.42);
}
.internship-card-back .card-back-action-icon{
  width:.65rem;
  height:.65rem;
  stroke-width:2.5;
}

/* ---- 状态：detail ---- */
.internship-stage.is-detail .internship-header{
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px);
}
.internship-stage.is-detail .internship-cards{
  opacity:0;
  pointer-events:none;
  transform:translate(-54%,-50%) scale(.96);
}

.internship-detail{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(24px,5vw,64px);
  padding:clamp(2rem,5vh,3.5rem) clamp(1.5rem,3vw,3rem);
  pointer-events:none;
  opacity:0;
  transition:opacity .62s ease;
  z-index:8;
}
.internship-stage.is-detail .internship-detail{
  pointer-events:auto;
  opacity:1;
}

/* 详情左侧主卡 */
.internship-detail-card{
  position:relative;
  flex-shrink:0;
  width:clamp(200px,24vw,300px);
  aspect-ratio:5/7;
  border-radius:8px;
  overflow:hidden;
  background:var(--illustration-paper);
  border:2px solid var(--illustration-ink);
  box-shadow:7px 8px 0 rgba(95,75,80,.15),0 18px 34px rgba(95,75,80,.11);
  display:flex;
  flex-direction:column;
  animation:detailCardFloatIn .78s cubic-bezier(.18,.86,.24,1) both;
}
.internship-detail-card .card-image-wrap{
  position:relative;
  width:100%;
  height:60%;
  overflow:hidden;
  background:linear-gradient(135deg,var(--illustration-sky),#fde8ed);
  flex-shrink:0;
  border-bottom:2px solid var(--illustration-ink);
}
.internship-detail-card .card-image-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.internship-detail-card .card-image-wrap::after{
  height:24%;
  background:linear-gradient(to bottom,transparent 0%,rgba(255,250,240,.9) 100%);
}
.internship-detail-card .card-number{
  top:.65rem;
  right:.65rem;
  color:var(--illustration-text);
  background:var(--illustration-paper);
  border:1px solid var(--illustration-ink);
  border-radius:4px;
  padding:.25em .48em;
  backdrop-filter:none;
  box-shadow:2px 2px 0 rgba(95,75,80,.14);
}
.internship-detail-card .card-body{
  flex:1 1 auto;
  margin-top:0;
  padding:.72rem .85rem 3rem;
  display:flex;flex-direction:column;
  gap:.36rem;
  position:relative;
  z-index:2;
  background:
    radial-gradient(circle,rgba(95,75,80,.09) .7px,transparent .8px) 0 0/13px 13px,
    var(--illustration-paper);
}
.internship-detail-card .card-body .card-head-icon{
  width:1.2rem;height:1.2rem;
  color:var(--illustration-text);
  margin-bottom:.1rem;
}
.internship-detail-card .card-logo-wrap,
.internship-detail-card .card-icon-wrap{
  width:2.2rem;
  height:2.2rem;
  border:2px solid var(--illustration-ink);
  border-radius:5px;
  background:var(--illustration-sky);
  box-shadow:3px 3px 0 rgba(95,75,80,.13);
}
.internship-detail-card .card-title{color:var(--illustration-text);}
.internship-detail-card .card-subtitle{color:#806d72;}
.internship-detail-card .card-items{gap:.28rem;}
.internship-detail-card .card-tag{
  color:var(--illustration-text);
  background:#fde8ed;
  border:1px solid var(--illustration-line);
  border-radius:4px;
  font-weight:700;
}

/* 详情右侧面板 */
.internship-detail-panel{
  flex:1;
  max-width:min(58vw,720px);
  background:
    radial-gradient(circle,rgba(95,75,80,.1) .7px,transparent .8px) 0 0/14px 14px,
    var(--illustration-paper);
  backdrop-filter:none;
  border-radius:8px;
  border:2px solid var(--illustration-ink);
  box-shadow:8px 9px 0 rgba(95,75,80,.15),0 20px 38px rgba(95,75,80,.12);
  padding:clamp(1.2rem,2.5vh,2rem) clamp(1.3rem,2.5vw,2.2rem);
  display:flex;
  flex-direction:column;
  gap:clamp(.6rem,1.2vh,.9rem);
  max-height:75vh;
  overflow-y:auto;
  animation:detailSlideIn .78s cubic-bezier(.18,.86,.24,1) both;
}
@keyframes detailSlideIn{
  from{opacity:0;transform:translateX(38px) translateY(6px)}
  to{opacity:1;transform:translateX(0) translateY(0)}
}
@keyframes detailCardFloatIn{
  from{opacity:0;transform:translateX(-32px) translateY(8px) rotate(-2deg)}
  to{opacity:1;transform:translateX(0) translateY(0) rotate(0)}
}
.internship-detail-panel .detail-company{
  font-family:var(--font-heading);
  font-size:clamp(1.1rem,1.8vw,1.5rem);
  font-weight:800;
  color:var(--illustration-text);
  letter-spacing:0;
  display:flex;
  align-items:center;
  padding-bottom:.55rem;
  border-bottom:2px solid var(--illustration-pink);
}
.internship-detail-panel .detail-company-icon{
  width:1.1rem;
  height:1.1rem;
  margin-right:.38rem;
  color:#7aa7a0;
  stroke-width:2.2;
}
.internship-detail-panel .detail-role-period{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.internship-detail-panel .detail-role{
  font-family:var(--font-body);
  font-size:clamp(.7rem,.95vw,.82rem);
  color:var(--illustration-text);
  font-weight:800;
  background:var(--illustration-sky);
  border:1px solid var(--illustration-line);
  border-radius:4px;
  padding:.22em .58em;
}
.internship-detail-panel .detail-period{
  font-family:var(--font-tag);
  font-size:.6rem;
  color:#7a686c;
  font-weight:800;
}
.internship-detail-panel .detail-location{
  font-family:var(--font-tag);
  font-size:.58rem;
  color:#806d72;
  display:flex;
  align-items:center;
  gap:.25rem;
}
.internship-detail-panel .detail-summary{
  font-family:var(--font-body);
  font-size:clamp(.58rem,.78vw,.68rem);
  color:#665458;
  line-height:1.55;
}
.internship-detail-panel .detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}
.internship-detail-panel .detail-tags span{
  font-family:var(--font-tag);
  font-size:.5rem;
  padding:.2em .6em;
  border-radius:4px;
  background:#fde8ed;
  color:var(--illustration-text);
  border:1px solid var(--illustration-line);
  font-weight:700;
}
.internship-detail-panel .detail-section h4{
  font-family:var(--font-heading);
  font-size:.7rem;
  font-weight:700;
  color:var(--illustration-text);
  margin:0 0 .35rem;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:.22rem .48rem;
  border:1px solid var(--illustration-line);
  border-radius:4px;
  background:var(--illustration-yellow);
}
.internship-detail-panel .detail-section + .detail-section h4{background:var(--illustration-sky);}
.internship-detail-panel .detail-section + .detail-section + .detail-section h4{background:#fde8ed;}
.internship-detail-panel .detail-section-icon{
  width:.75rem;
  height:.75rem;
  margin-right:.3rem;
  color:var(--illustration-text);
  stroke-width:2.3;
}
.internship-detail-panel .detail-section ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.18rem;
}
.internship-detail-panel .detail-section li{
  font-family:var(--font-body);
  font-size:clamp(.58rem,.72vw,.65rem);
  color:#665458;
  padding-left:1.15em;
  position:relative;
  line-height:1.48;
}
.internship-detail-panel .detail-section li::before{
  content:'✦';
  position:absolute;
  left:0;
  color:#d67f96;
  font-weight:700;
  font-size:.5rem;
}
.internship-detail-card .internship-card-back-btn{
  position:absolute;
  left:.75rem;
  bottom:.7rem;
  z-index:4;
  display:flex;
  align-items:center;
  gap:.35rem;
  font-family:var(--font-body);
  font-size:.62rem;
  font-weight:600;
  color:var(--illustration-text);
  background:var(--illustration-sky);
  border:2px solid var(--illustration-ink);
  border-radius:5px;
  padding:.45em 1em;
  cursor:pointer;
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease;
  box-shadow:3px 3px 0 rgba(95,75,80,.14);
}
.internship-detail-card .internship-card-back-btn:hover{
  background:#c9e6f1;
  transform:translateY(-1px);
  box-shadow:4px 4px 0 rgba(95,75,80,.14);
}
.internship-detail-card .detail-back-icon{
  width:.65rem;
  height:.65rem;
  stroke-width:2.5;
}

/* ---- prefers-reduced-motion ---- */
@media(prefers-reduced-motion:reduce){
  .internship-card{transition:none}
  .internship-card.is-flipping .internship-card-inner{animation:none;opacity:0}
  .internship-detail-panel{animation:none}
  .internship-detail-card{animation:none}
  .internship-stage.is-opening-detail .internship-detail{animation:none}
  .internship-meteor{animation:none;opacity:.18}
}

/* ---- 简历下载弹框 ---- */
.resume-dialog-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(20,14,38,.62);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .32s ease;
}
.resume-dialog-overlay.is-open{
  opacity:1;pointer-events:auto;
}
.resume-dialog{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  border-radius:20px;
  border:1px solid rgba(207,190,246,.34);
  box-shadow:0 24px 64px rgba(80,56,140,.18);
  padding:2rem 2rem 1.6rem;
  width:min(380px,88vw);
  text-align:center;
  position:relative;
  animation:dialogPopIn .38s cubic-bezier(.18,.86,.24,1) both;
}
@keyframes dialogPopIn{
  from{transform:scale(.88) translateY(18px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}
.resume-dialog-close{
  position:absolute;top:.65rem;right:.65rem;
  width:2rem;height:2rem;
  border-radius:50%;border:none;
  background:rgba(135,56,224,.06);
  color:var(--text-light);
  cursor:pointer;
  display:grid;place-items:center;
  transition:background .2s ease,color .2s ease;
}
.resume-dialog-close:hover{background:rgba(135,56,224,.14);color:var(--purple)}
.resume-dialog-title{
  font-family:var(--font-heading);
  font-size:1.15rem;font-weight:800;
  color:var(--text-dark);
  margin-bottom:.25rem;
}
.resume-dialog-sub{
  font-family:var(--font-body);
  font-size:.62rem;
  color:var(--text-light);
  margin-bottom:1.2rem;
}
.resume-dialog-options{
  display:flex;flex-direction:column;
  gap:.6rem;
}
.resume-dialog-option{
  display:flex;align-items:center;gap:.7rem;
  padding:.85rem 1rem;
  border-radius:14px;
  border:1px solid rgba(207,190,246,.4);
  background:rgba(248,245,255,.55);
  text-decoration:none;color:inherit;
  cursor:pointer;
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.resume-dialog-option:not(.is-disabled):hover{
  background:rgba(232,220,255,.5);
  border-color:rgba(175,148,240,.6);
  box-shadow:0 6px 18px rgba(135,56,224,.08);
}
.resume-dialog-option.is-disabled{
  opacity:.48;cursor:not-allowed;
}
.resume-dialog-option i{color:var(--purple);flex-shrink:0}
.resume-dialog-option.is-disabled i{color:var(--text-light)}
.resume-opt-lang{
  font-family:var(--font-heading);
  font-size:.85rem;font-weight:700;
  flex:1;text-align:left;
}
.resume-opt-hint{
  font-family:var(--font-tag);
  font-size:.52rem;color:var(--text-light);
}

/* ---- 移动端 ---- */
@media(max-width:768px){
  .internship-cards{
    flex-direction:column;
    gap:clamp(12px,2vh,20px);
    top:52%;
    perspective:none;
  }
  .internship-card{
    width:clamp(160px,38vw,220px);
  }
  .internship-stage.is-cards .internship-cards{
    /* 移动端卡片纵向可滑动 */
    overflow-y:auto;
    max-height:70vh;
    padding:1rem 0;
  }
  .internship-detail{
    flex-direction:column;
    gap:clamp(12px,2vh,20px);
    padding:clamp(1rem,3vh,1.8rem) 1rem;
  }
  .internship-detail-card{
    width:clamp(140px,30vw,200px);
  }
  .internship-detail-card .card-image-wrap{height:50%;}
  .internship-detail-card .card-body{padding:.55rem .65rem 2.6rem;gap:.22rem;}
  .internship-detail-card .internship-card-back-btn{
    left:.58rem;
    bottom:.52rem;
    max-width:calc(100% - 1.16rem);
    padding:.4em .65em;
    font-size:.54rem;
    white-space:nowrap;
  }
  .internship-detail-panel{
    max-width:100%;
    max-height:50vh;
    padding:1rem;
  }
  .internship-meteor:nth-child(n+4){
    display:none;
  }
}

/* ---- Projects falling physics orbs ---- */
.projects-section{
  padding:0;
  background:#a8d6ea;
}
.projects-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  isolation:isolate;
}
.projects-scene-shell{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  touch-action:pan-y;
  background:#a8d6ea;
}
.projects-scene-shell::before{
  content:'';
  position:absolute;
  z-index:4;
  bottom:0;
  left:0;
  right:0;
  height:6px;
  pointer-events:none;
  background:rgba(255,248,225,.86);
}
.projects-scene-shell::after{
  content:'';
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:url('../assets/projects/chiikawa-spring.jpg') center center / cover no-repeat;
  opacity:.62;
  filter:saturate(.94) brightness(1.02);
}
.projects-physics-layer{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
  transition:filter .42s ease,opacity .42s ease,transform .42s ease;
}
.project-physics-orb{
  --orb-color:#79aef8;
  --orb-light:#edf7ff;
  --orb-dark:#4e78c8;
  --orb-glow:rgba(121,174,248,.32);
  --orb-angle:0rad;
  --orb-shape:50%;
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  display:block;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  pointer-events:none;
  will-change:transform;
  contain:layout style;
}
.project-physics-orb-visual{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  border:2px solid #5f4b50;
  border-radius:var(--orb-shape);
  background:
    radial-gradient(circle at 31% 27%,rgba(255,255,255,.9) 0 5%,transparent 6%),
    linear-gradient(155deg,var(--orb-light) 0 12%,var(--orb-color) 13% 76%,var(--orb-dark) 77% 100%);
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.25),
    inset -4px -5px 0 rgba(91,68,72,.08),
    0 4px 0 rgba(77,60,63,.14),
    0 8px 13px rgba(77,60,63,.1);
  transform:rotate(var(--orb-angle));
  transition:transform .24s ease,box-shadow .24s ease,filter .24s ease;
}
.project-physics-orb-visual::before{
  content:'';
  position:absolute;
  top:17%;
  left:20%;
  width:30%;
  height:16%;
  border-top:3px solid rgba(255,255,255,.78);
  border-radius:50%;
  background:transparent;
  transform:rotate(-24deg);
}
.project-physics-orb-visual::after{
  content:'';
  position:absolute;
  inset:6%;
  border:1px dashed rgba(95,75,80,.12);
  border-radius:var(--orb-shape);
}
.project-physics-orb.is-active{
  z-index:5;
  pointer-events:auto;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.project-physics-orb.is-active .project-physics-orb-visual{
  animation:projectOrbGlow 2.35s ease-in-out infinite;
  box-shadow:
    inset 3px 3px 0 rgba(255,255,255,.3),
    inset -4px -5px 0 rgba(91,68,72,.08),
    0 4px 0 rgba(77,60,63,.14),
    0 0 0 4px rgba(255,255,255,.8),
    0 0 0 8px var(--orb-glow),
    0 0 32px var(--orb-glow),
    0 8px 14px rgba(77,60,63,.12);
}
.project-physics-orb.is-active:hover .project-physics-orb-visual,
.project-physics-orb.is-active:focus-visible .project-physics-orb-visual,
.project-physics-orb.is-active.is-selected .project-physics-orb-visual{
  transform:rotate(var(--orb-angle)) scale(1.04);
  filter:saturate(1.04) brightness(1.03);
}
.project-physics-orb.is-active:focus-visible{outline:none}
.project-physics-orb.is-active:focus-visible::after{
  content:'';
  position:absolute;
  inset:-7px;
  border:2px solid rgba(68,100,224,.7);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,255,255,.82);
}
.project-physics-orb-star{
  position:absolute;
  z-index:3;
  top:50%;
  left:50%;
  color:#fffdf5;
  font-family:Georgia,serif;
  font-size:clamp(1rem,1.8vw,1.45rem);
  line-height:1;
  text-shadow:0 1px 0 rgba(95,75,80,.48);
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation:projectOrbStarTwinkle 1.65s ease-in-out infinite;
}
.project-physics-orb-star::before,
.project-physics-orb-star::after{
  content:'✦';
  position:absolute;
  color:#fffdf5;
  font-size:.42em;
  text-shadow:0 1px 0 rgba(95,75,80,.42);
}
.project-physics-orb-star::before{right:130%;bottom:88%;}
.project-physics-orb-star::after{left:128%;top:82%;}
@keyframes projectOrbStarTwinkle{
  0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.82;}
  50%{transform:translate(-50%,-50%) scale(1.08);opacity:1;}
}
.project-physics-orb-label{
  position:absolute;
  z-index:8;
  top:calc(100% + 10px);
  left:50%;
  width:max-content;
  max-width:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.18rem;
  padding:.4rem .54rem;
  border:1px solid rgba(101,126,191,.18);
  border-radius:5px;
  background:rgba(255,255,255,.9);
  box-shadow:0 10px 28px rgba(63,84,146,.14);
  opacity:0;
  color:#4f6291;
  text-align:center;
  transform:translate(-50%,5px);
  transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;
}
.project-physics-orb-label small{
  color:#b26491;
  font-family:var(--font-tag);
  font-size:.43rem;
  font-weight:800;
  letter-spacing:.13em;
  line-height:1.2;
}
.project-physics-orb-label strong{
  font-family:var(--font-heading);
  font-size:.68rem;
  line-height:1.22;
  letter-spacing:0;
}
.project-physics-orb.is-active:hover .project-physics-orb-label,
.project-physics-orb.is-active:focus-visible .project-physics-orb-label,
.project-physics-orb.is-active.is-selected .project-physics-orb-label{
  opacity:1;
  transform:translate(-50%,0);
}
@keyframes projectOrbGlow{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.1);}
}
.projects-header{
  position:absolute;
  top:24%;
  left:50%;
  right:auto;
  width:min(760px,calc(100vw - 3rem));
  text-align:center;
  transform:translate(-50%,-50%);
  z-index:6;
  pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;
}
.projects-header::before{
  content:'PROJECT ARCHIVE  /  02 LIVE';
  display:inline-block;
  margin-bottom:.5rem;
  padding-bottom:.16rem;
  border-bottom:2px solid rgba(232,128,185,.65);
  color:#7182ad;
  font-family:var(--font-tag);
  font-size:.48rem;
  font-weight:800;
  letter-spacing:.18em;
}
.projects-main-title{
  font-family:var(--font-heading);
  font-weight:900;
  max-width:none;
  margin:0 0 .52rem;
  font-size:clamp(2rem,3vw,3.2rem);
  line-height:.92;
  letter-spacing:0;
  white-space:nowrap;
  background:linear-gradient(102deg,#3d61d8 0%,#6f8bf0 43%,#df70b2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 12px 36px rgba(84,107,184,.12);
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.82));
}
.projects-tagline{
  font-family:var(--font-tag);
  color:#7685a9;
  font-size:clamp(.72rem,1vw,.9rem);
  font-weight:500;
  letter-spacing:.06em;
  text-transform:none;
  margin:0;
}
.project-morph-origin{
  position:absolute;
  width:60px;
  height:120px;
  pointer-events:none;
  z-index:5;
  opacity:0;
}
.projects-stage.is-expanded .projects-physics-layer{
  filter:blur(4px) saturate(.72) brightness(.98);
  opacity:.58;
  transform:scale(1.012);
}
.projects-stage.is-expanded .project-physics-orb.is-active{
  pointer-events:none;
}
.projects-physics-layer.is-static-fallback .project-physics-orb{
  position:absolute;
}

@media(max-width:700px){
  .projects-header{
    top:24%;
    left:50%;
    width:calc(100vw - 1.5rem);
  }
  .projects-header::before{margin-bottom:.55rem;font-size:.42rem}
  .projects-main-title{
    width:100%;
    max-width:none;
    margin-left:auto;
    margin-right:auto;
    font-size:clamp(1.55rem,7.8vw,2.15rem);
    line-height:.92;
    white-space:nowrap;
  }
  .projects-tagline{font-size:.58rem}
  .projects-scene-shell::after{
    background-size:auto 100%;
    background-position:center center;
    opacity:.62;
  }
  .project-physics-orb-label{max-width:138px;padding:.32rem .4rem}
  .project-physics-orb-label small{font-size:.34rem}
  .project-physics-orb-label strong{font-size:.52rem}
}

@media(prefers-reduced-motion:reduce){
  .projects-physics-layer,.project-physics-orb-visual,.project-physics-orb-label{transition:none}
  .project-physics-orb.is-active .project-physics-orb-visual{animation:none}
}

/* ---- 展开遮罩 ---- */
.projects-expand-overlay{
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
  opacity:0;
  background:rgba(255,249,233,.42);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transition:opacity .4s ease;
}
.projects-stage.is-expanded + .projects-expand-overlay{
  pointer-events:auto;
  opacity:1;
}
.projects-stage.is-expanded .projects-header{
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,calc(-50% - 10px));
}

/* ---- 展开面板 ---- */
.project-detail-panel{
  --project-accent:#8f7df4;
  position:fixed;
  z-index:60;
  background:#fffaf0;
  border-radius:8px;
  border:2px solid #5f4b50;
  box-shadow:8px 8px 0 rgba(95,75,80,.2),0 18px 42px rgba(76,61,65,.2);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  opacity:0;
  pointer-events:none;
  transition:
    opacity .45s ease .15s,
    transform .55s cubic-bezier(.22,.61,.36,1);
  max-height:82vh;
  color:#59484c;
}
.project-detail-panel.is-open{
  opacity:1;
  pointer-events:auto;
}
.project-detail-panel.is-dragging{
  user-select:none;
  box-shadow:11px 11px 0 rgba(95,75,80,.18),0 22px 46px rgba(76,61,65,.22);
}
.project-detail-dragbar{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.42rem .48rem .42rem .7rem;
  border-bottom:2px solid #5f4b50;
  background:color-mix(in srgb,var(--project-accent) 28%,#f8d2dc);
  cursor:grab;
  touch-action:none;
  flex-shrink:0;
}
.project-detail-panel.is-dragging .project-detail-dragbar{cursor:grabbing;}
.project-detail-drag-label{
  display:flex;
  align-items:center;
  gap:.42rem;
  color:#59484c;
  font-family:var(--font-tag);
  font-size:.52rem;
  font-weight:900;
  letter-spacing:.13em;
}
.project-detail-drag-label svg{width:16px;height:16px;stroke-width:2.4;}
.project-detail-window-code{
  margin-left:auto;
  color:#6d5a5e;
  font-family:var(--font-tag);
  font-size:.46rem;
  font-weight:800;
  letter-spacing:.1em;
}
.project-detail-panel .detail-top-image{
  width:100%;
  height:clamp(112px,16vh,158px);
  object-fit:cover;
  flex-shrink:0;
  display:block;
  border-bottom:2px solid #5f4b50;
}
.project-detail-panel .detail-illustration{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 82%,#fffaf0 0 12%,transparent 12.5%),
    radial-gradient(circle at 29% 84%,#fffaf0 0 17%,transparent 17.5%),
    radial-gradient(circle at 78% 78%,#fffaf0 0 15%,transparent 15.5%),
    radial-gradient(circle at 91% 82%,#fffaf0 0 11%,transparent 11.5%),
    linear-gradient(180deg,#a9d9ed 0 58%,#f3bdc8 58% 73%,#c3db7f 73% 100%);
}
.detail-illustration-code{
  position:absolute;
  top:.55rem;
  left:.7rem;
  padding:.18rem .38rem;
  border:1px solid #5f4b50;
  border-radius:4px;
  background:#fffaf0;
  color:#59484c;
  font-family:var(--font-tag);
  font-size:.44rem;
  font-weight:900;
  letter-spacing:.12em;
}
.detail-illustration-initial{
  display:grid;
  width:64px;
  height:64px;
  place-items:center;
  border:2px solid #5f4b50;
  border-radius:48% 52% 49% 51% / 51% 48% 52% 49%;
  background:color-mix(in srgb,var(--project-accent) 58%,#fffaf0);
  color:#fffaf0;
  font-family:var(--font-heading);
  font-size:2rem;
  font-weight:900;
  text-shadow:0 2px 0 rgba(95,75,80,.38);
  box-shadow:4px 4px 0 rgba(95,75,80,.16);
}
.detail-illustration-star{
  position:absolute;
  color:#fffaf0;
  font-family:Georgia,serif;
  text-shadow:0 1px 0 rgba(95,75,80,.5);
}
.detail-illustration-star-one{left:28%;top:30%;font-size:1rem;}
.detail-illustration-star-two{right:27%;bottom:22%;font-size:.7rem;}
.project-detail-panel .detail-body{
  padding:clamp(.85rem,1.8vh,1.35rem) clamp(1rem,2.2vw,1.6rem);
  display:flex;
  flex-direction:column;
  gap:clamp(.38rem,.7vh,.58rem);
  overflow-y:auto;
  flex:1;
  background:
    radial-gradient(circle,rgba(95,75,80,.12) .7px,transparent .8px) 0 0/14px 14px,
    #fffaf0;
}
.project-detail-panel .detail-title{
  font-family:var(--font-heading);
  font-size:clamp(1.2rem,1.7vw,1.55rem);
  font-weight:900;
  color:#59484c;
}
.project-detail-panel .detail-meta{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.project-detail-panel .detail-tagline{
  font-family:var(--font-body);
  font-size:clamp(.72rem,.95vw,.86rem);
  color:#855d72;
  font-style:italic;
  line-height:1.5;
  margin:0 0 .3rem;
  opacity:.85;
}
.project-detail-panel .detail-role{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-tag);
  font-size:.68rem;
  color:#6b595d;
  margin:.2rem 0;
}
.project-detail-panel .detail-status{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-family:var(--font-tag);
  font-size:.65rem;
  color:#665458;
  padding:.55em .85em;
  background:color-mix(in srgb,var(--project-accent) 16%,#fffaf0);
  border-radius:4px;
  border-left:3px solid #5f4b50;
  margin-top:.4rem;
}
.project-detail-panel .detail-status b{color:#59484c;}
.project-detail-panel .detail-techstack{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
}
.project-detail-panel .detail-techstack span{
  font-family:var(--font-tag);
  font-size:.58rem;
  padding:.2em .7em;
  border-radius:4px;
  background:color-mix(in srgb,var(--project-accent) 18%,#fffaf0);
  color:#59484c;
  border:1px solid #7a6569;
  letter-spacing:.02em;
}
.project-detail-panel .detail-section{
  margin-top:.5rem;
}
.project-detail-panel .detail-section h4{
  display:flex;
  align-items:center;
  font-family:var(--font-tag);
  font-size:.68rem;
  font-weight:600;
  color:#59484c;
  margin:0 0 .35rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.project-detail-panel .detail-category{
  font-family:var(--font-tag);
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#59484c;
  background:color-mix(in srgb,var(--project-accent) 22%,#fffaf0);
  padding:.2em .7em;
  border:1px solid #7a6569;
  border-radius:4px;
}
.project-detail-panel .detail-period{
  font-family:var(--font-tag);
  font-size:.64rem;
  color:#7a686c;
}
.project-detail-panel .detail-desc{
  font-family:var(--font-body);
  font-size:clamp(.7rem,.9vw,.8rem);
  color:#665458;
  line-height:1.6;
}
.project-detail-panel .detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
}
.project-detail-panel .detail-tags span{
  font-family:var(--font-tag);
  font-size:.58rem;
  padding:.16em .6em;
  border-radius:4px;
  background:#f9dfe5;
  color:#59484c;
  border:1px solid #7a6569;
}
.project-detail-panel .detail-links{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.project-detail-panel .detail-link-btn{
  display:flex;
  align-items:center;
  gap:.35rem;
  font-family:var(--font-body);
  font-size:.66rem;
  font-weight:600;
  color:#59484c;
  background:#dff1f7;
  border:2px solid #5f4b50;
  border-radius:5px;
  padding:.4em .9em;
  cursor:pointer;
  text-decoration:none;
  transition:all .25s ease;
}
.project-detail-panel .detail-link-btn:hover{
  background:#c9e6f1;
  transform:translateY(-1px);
}
.project-detail-panel .detail-highlights{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.project-detail-panel .detail-highlights li{
  font-family:var(--font-body);
  font-size:.66rem;
  color:#665458;
  padding-left:1em;
  position:relative;
  line-height:1.45;
}
.project-detail-panel .detail-highlights li::before{
  content:'✦';
  position:absolute;
  left:0;
  color:#d67f96;
  font-size:.62rem;
}
.project-detail-panel .detail-close-btn{
  position:relative;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  border:2px solid #5f4b50;
  background:#fffaf0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  transition:all .25s ease;
  color:#59484c;
  font-size:.9rem;
  line-height:1;
}
.project-detail-panel .detail-close-btn:hover{
  background:#f8d2dc;
  transform:translateY(-1px);
  box-shadow:0 2px 0 rgba(95,75,80,.15);
}
.project-detail-panel .detail-close-btn svg{width:16px;height:16px;stroke-width:2.8;}

@media(max-width:700px){
  .project-detail-dragbar{min-height:38px;padding:.35rem .4rem .35rem .55rem;}
  .project-detail-drag-label{font-size:.44rem;}
  .project-detail-window-code{display:none;}
  .project-detail-panel .detail-close-btn{margin-left:auto;}
  .project-detail-panel .detail-top-image{height:104px;}
  .detail-illustration-initial{width:54px;height:54px;font-size:1.65rem;}
}

/* ---- 光球在展开状态下的行为 ---- */

/* ===== Skills & Learning - Flip Deck ===== */
.skills-learning-section{
  padding-top:6.5vh;
  isolation:isolate;
  background:
    radial-gradient(circle at 18% 20%,rgba(190,222,250,.5) 0,transparent 28%),
    radial-gradient(circle at 78% 24%,rgba(248,193,218,.4) 0,transparent 30%),
    linear-gradient(135deg,#fbfdff 0%,#f4faff 42%,#fff7fb 100%);
}
.skills-learning-section::before{
  content:'';
  position:absolute;
  inset:6.5vh 0 0;
  z-index:-2;
  opacity:.35;
  background-image:radial-gradient(rgba(97,101,130,.22) .7px,transparent .7px);
  background-size:13px 13px;
  pointer-events:none;
}
.skills-learning-section::after{
  content:'';
  position:absolute;
  left:0;right:0;top:6.5vh;height:10px;
  z-index:-1;
  background:linear-gradient(90deg,#a8d9f1 0 34%,#f3b7d3 34% 68%,#d7c2ef 68%);
  opacity:.68;
}
.skills-learning-sparkles{
  position:absolute;
  inset:6.5vh 0 0;
  z-index:0;
  pointer-events:none;
}
.skills-learning-sparkles span{
  position:absolute;
  left:var(--x);top:var(--y);
  color:#e49fbd;
  font-family:Georgia,serif;
  font-size:clamp(1rem,1.5vw,1.5rem);
  font-weight:700;
  transform:rotate(var(--r));
  text-shadow:15px 9px 0 rgba(126,190,220,.65);
}
.skills-learning-layout{
  position:relative;
  z-index:1;
  width:min(1180px,94vw);
  height:calc(93.5vh - 10px);
  margin:10px auto 0;
  display:grid;
  grid-template-columns:minmax(170px,.72fr) minmax(460px,1.7fr) minmax(190px,.75fr);
  align-items:center;
  gap:clamp(1rem,2.4vw,2.2rem);
}
.skills-learning-copy{
  align-self:center;
  padding-left:clamp(.2rem,1vw,1rem);
}
.skills-learning-kicker{
  display:inline-block;
  margin-bottom:.7rem;
  font-family:var(--font-tag);
  font-size:.58rem;
  font-weight:800;
  color:#7387a9;
  letter-spacing:.16em;
  border-bottom:3px solid #f1b2d0;
}
.skills-learning-title{
  font-family:var(--font-heading);
  font-size:clamp(1.8rem,2.9vw,2.6rem);
  line-height:.92;
  letter-spacing:0;
  color:#3e5872;
  text-shadow:3px 3px 0 rgba(172,217,239,.7),6px 6px 0 rgba(244,189,215,.38);
}
.skills-learning-title-second{white-space:nowrap}
.skills-learning-tagline{
  width:min(17rem,100%);
  margin-top:1.15rem;
  font-family:var(--font-tag);
  font-size:clamp(.67rem,.82vw,.78rem);
  line-height:1.65;
  color:#7c7790;
}
.skills-learning-counts{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.38rem;
  margin-top:1.35rem;
  font-family:var(--font-tag);
  font-size:.56rem;
  color:#8b829e;
  text-transform:uppercase;
}
.skills-learning-counts span{
  display:flex;
  align-items:baseline;
  gap:.45rem;
}
.skills-learning-counts b{
  min-width:1.45rem;
  font-family:var(--font-heading);
  font-size:.92rem;
  color:#6e7fa0;
}
.skills-board-wrap{
  width:100%;
  max-width:610px;
  justify-self:center;
  padding:clamp(.85rem,1.8vw,1.25rem);
  border:1px solid rgba(92,143,174,.24);
  border-radius:6px;
  background:rgba(107,180,207,.72);
  box-shadow:8px 9px 0 rgba(235,163,198,.58),0 24px 55px rgba(76,127,162,.16);
}
.skills-board-labels{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:clamp(.55rem,1.1vw,.85rem);
  margin-bottom:.7rem;
  font-family:var(--font-tag);
  font-size:.54rem;
  font-weight:800;
  letter-spacing:.14em;
  color:rgba(255,255,255,.92);
}
.skills-board-labels span{
  padding:.12rem .2rem .28rem;
  border-bottom:1px solid rgba(255,255,255,.45);
}
.skills-board-label-learning{text-align:center}
.skills-board{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.55rem,1.1vw,.85rem);
}
.skill-flip-card{
  position:relative;
  width:100%;
  aspect-ratio:1;
  border:0;
  border-radius:4px;
  padding:0;
  background:transparent;
  cursor:pointer;
  perspective:900px;
  color:inherit;
  font:inherit;
  -webkit-tap-highlight-color:transparent;
}
.skill-flip-card:focus-visible{
  outline:3px solid rgba(255,255,255,.96);
  outline-offset:4px;
}
.skill-flip-inner{
  position:absolute;
  inset:0;
  display:block;
  transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.2,.75,.25,1);
}
.skill-flip-card.is-flipped .skill-flip-inner{transform:rotateY(180deg)}
.skill-flip-face{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.88);
  border-radius:4px;
  box-shadow:0 5px 12px rgba(45,93,123,.14);
}
.skill-flip-front{
  align-items:center;
  justify-content:center;
  color:#6f7e97;
  background:
    linear-gradient(45deg,rgba(255,255,255,.5) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.5) 75%),
    linear-gradient(45deg,rgba(255,255,255,.5) 25%,#fff8cf 25%,#fff8cf 75%,rgba(255,255,255,.5) 75%);
  background-size:14px 14px;
  background-position:0 0,7px 7px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.skill-flip-card:hover .skill-flip-front{
  transform:translateY(-3px) rotate(-.6deg);
  box-shadow:0 10px 18px rgba(45,93,123,.19);
}
.skill-card-type{
  font-family:var(--font-tag);
  font-size:clamp(.43rem,.62vw,.56rem);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.skill-flip-front .skill-card-type{
  position:absolute;
  top:8%;left:8%;
  color:#8d8b9d;
}
.skill-card-question{
  font-family:Georgia,serif;
  font-size:clamp(2.4rem,4.2vw,4.1rem);
  font-weight:800;
  line-height:1;
  color:rgba(107,113,135,.45);
  text-shadow:2px 2px 0 rgba(255,255,255,.9);
}
.skill-card-index{
  position:absolute;
  right:8%;bottom:7%;
  min-width:1.55rem;
  padding:.12rem .28rem;
  border:1px solid color-mix(in srgb,var(--card-accent) 55%,white);
  background:rgba(255,255,255,.72);
  color:var(--card-accent);
  font-family:var(--font-heading);
  font-size:clamp(.48rem,.7vw,.62rem);
  line-height:1.1;
}
.skill-flip-back{
  justify-content:flex-start;
  gap:clamp(.35rem,.7vw,.62rem);
  padding:clamp(.7rem,1.35vw,1.05rem);
  transform:rotateY(180deg);
  text-align:left;
  background:linear-gradient(155deg,#fff 0%,color-mix(in srgb,var(--card-accent) 13%,white) 100%);
  border-color:color-mix(in srgb,var(--card-accent) 45%,white);
}
.skill-flip-back::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;height:5px;
  background:var(--card-accent);
}
.skill-flip-back .skill-card-type{color:var(--card-accent)}
.skill-flip-back strong{
  font-family:var(--font-heading);
  font-size:clamp(.68rem,1.05vw,.92rem);
  line-height:1.08;
  letter-spacing:0;
  color:#3f4b64;
}
.skill-card-description{
  font-family:var(--font-tag);
  font-size:clamp(.48rem,.66vw,.59rem);
  line-height:1.45;
  color:#66677b;
}
.skill-showcase-mark{
  align-self:flex-start;
  margin-top:auto;
  padding:.16rem .38rem;
  border:1px solid color-mix(in srgb,var(--card-accent) 55%,white);
  color:var(--card-accent);
  background:rgba(255,255,255,.62);
  font-family:var(--font-heading);
  font-size:.43rem;
  letter-spacing:.08em;
}
.skill-play-card .skill-flip-front{
  background:
    radial-gradient(circle at 25% 26%,rgba(255,255,255,.75) 0 3px,transparent 4px),
    linear-gradient(145deg,#fff7bd,#ffe593);
}
.skills-chiikawa{
  align-self:center;
  min-width:0;
  text-align:center;
}
.skills-chiikawa-label{
  display:inline-block;
  font-family:var(--font-tag);
  font-size:.55rem;
  font-weight:800;
  letter-spacing:.14em;
  color:#c07d9e;
  background:#fff8be;
  padding:.18rem .5rem;
  transform:rotate(-2deg);
}
.skills-chiikawa-crop{
  position:relative;
  width:100%;
  aspect-ratio:1.06;
  margin:.8rem auto .2rem;
  overflow:hidden;
  background:rgba(255,255,255,.5);
  border:1px solid rgba(239,173,204,.42);
  box-shadow:5px 6px 0 rgba(180,216,236,.5);
}
.skills-chiikawa-crop img{
  position:absolute;
  width:185%;
  max-width:none;
  height:auto;
  left:-76%;
  top:-50%;
  display:block;
  mix-blend-mode:multiply;
}
.skills-chiikawa-note{
  margin-top:.75rem;
  font-family:Georgia,serif;
  font-size:clamp(.7rem,.9vw,.82rem);
  line-height:1.45;
  color:#6d7187;
}

@media(max-width:980px){
  .skills-learning-layout{
    width:min(94vw,820px);
    grid-template-columns:minmax(135px,.55fr) minmax(430px,1.65fr);
    gap:clamp(.8rem,2vw,1.4rem);
  }
  .skills-chiikawa{
    position:absolute;
    right:0;
    bottom:2vh;
    width:125px;
    opacity:.78;
  }
  .skills-chiikawa-label,.skills-chiikawa-note{display:none}
}

@media(max-width:700px){
  .skills-learning-layout{
    width:94vw;
    height:calc(93.5vh - 10px);
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    align-content:start;
    gap:.55rem;
    padding:1.5vh 0 1vh;
  }
  .skills-learning-copy{
    display:block;
    padding:0 .2rem;
  }
  .skills-learning-kicker{margin-bottom:.28rem;font-size:.45rem}
  .skills-learning-title{font-size:clamp(1.45rem,7.5vw,1.9rem);line-height:.9}
  .skills-learning-title br{display:none}
  .skills-learning-title-second{margin-left:.16em}
  .skills-learning-tagline{display:none}
  .skills-learning-counts{
    flex-direction:row;
    align-items:center;
    gap:.8rem;
    margin:.42rem 0 .1rem;
    font-size:.42rem;
  }
  .skills-learning-counts span{gap:.18rem}
  .skills-learning-counts b{min-width:auto;font-size:.68rem}
  .skills-board-wrap{
    align-self:start;
    width:100%;
    max-width:none;
    padding:.62rem;
    box-shadow:5px 6px 0 rgba(235,163,198,.55),0 14px 34px rgba(76,127,162,.13);
  }
  .skills-board-labels{margin-bottom:.42rem;font-size:.43rem;gap:.42rem}
  .skills-board{gap:.42rem}
  .skill-flip-face{border-width:1px}
  .skill-flip-back{gap:.26rem;padding:.52rem}
  .skill-flip-back strong{font-size:clamp(.57rem,2.75vw,.75rem)}
  .skill-card-description{font-size:clamp(.4rem,2vw,.52rem);line-height:1.32}
  .skill-showcase-mark{font-size:.36rem;padding:.1rem .25rem}
  .skills-chiikawa{
    right:-1vw;
    bottom:.8vh;
    width:78px;
    opacity:.48;
    pointer-events:none;
  }
  .skills-chiikawa-crop{box-shadow:none;border:0;background:transparent}
  .skills-learning-sparkles span:nth-child(n+4){display:none}
}

@media(max-height:700px) and (min-width:701px){
  .skills-learning-layout{transform:scale(.9);transform-origin:center}
}

@media(prefers-reduced-motion:reduce){
  .skill-flip-inner{transition-duration:.01ms}
  .skill-flip-card:hover .skill-flip-front{transform:none}
}

/* ===== Skills Showcase Window ===== */
.skill-showcase-window{
  position:fixed;
  left:50%;
  top:50%;
  z-index:1200;
  width:min(520px,calc(100vw - 32px));
  max-height:min(76vh,620px);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:scale(.94);
  transform-origin:center;
  border:1px solid rgba(129,157,190,.36);
  border-radius:8px;
  background:rgba(255,255,255,.94);
  box-shadow:0 24px 70px rgba(63,91,127,.22),8px 9px 0 rgba(235,163,198,.52);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  transition:opacity .28s ease,visibility .28s ease,transform .28s ease;
}
.skill-showcase-window.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:scale(1);
}
.skill-showcase-window.is-dragging{transition:none;user-select:none}
.skill-showcase-titlebar{
  height:42px;
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:0 .7rem;
  border-bottom:1px solid rgba(130,165,194,.22);
  background:linear-gradient(90deg,rgba(214,239,249,.82),rgba(255,226,238,.82));
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.skill-showcase-window.is-dragging .skill-showcase-titlebar{cursor:grabbing}
.skill-showcase-window-dots{display:flex;gap:4px;flex-shrink:0}
.skill-showcase-window-dots span{
  width:8px;height:8px;border-radius:50%;
  background:#e8a7bd;
  border:1px solid rgba(255,255,255,.8);
}
.skill-showcase-window-dots span:nth-child(2){background:#f0cf7e}
.skill-showcase-window-dots span:nth-child(3){background:#9ecce0}
.skill-showcase-window-title{
  display:flex;
  align-items:baseline;
  gap:.38rem;
  min-width:0;
  font-family:var(--font-tag);
  font-size:.5rem;
  letter-spacing:.14em;
  color:#71849b;
}
.skill-showcase-window-title strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#536681;
  font-size:.58rem;
}
.skill-showcase-close{
  width:29px;height:29px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  flex-shrink:0;
  border:1px solid rgba(116,141,173,.25);
  border-radius:50%;
  color:#667b98;
  background:rgba(255,255,255,.62);
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.skill-showcase-close:hover{
  background:#fff;
  border-color:#9d7fe5;
  transform:rotate(90deg);
}
.skill-showcase-content{padding:.75rem}
.skill-showcase-media{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1px solid rgba(133,163,193,.3);
  background:
    linear-gradient(45deg,rgba(176,214,235,.18) 25%,transparent 25%,transparent 75%,rgba(239,180,211,.18) 75%),
    linear-gradient(45deg,rgba(239,180,211,.18) 25%,#f9fbff 25%,#f9fbff 75%,rgba(176,214,235,.18) 75%);
  background-size:22px 22px;
  background-position:0 0,11px 11px;
}
.skill-showcase-video{
  display:none;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#121723;
}
.skill-showcase-window.has-media .skill-showcase-video{display:block}
.skill-showcase-play-toggle{
  position:absolute;
  left:50%;top:50%;
  z-index:2;
  width:48px;height:48px;
  display:none;
  place-items:center;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.9);
  border-radius:50%;
  background:rgba(77,104,133,.72);
  color:#fff;
  cursor:pointer;
  box-shadow:0 5px 18px rgba(46,70,99,.25);
  transition:transform .2s ease,background .2s ease,opacity .2s ease;
}
.skill-showcase-window.has-media .skill-showcase-play-toggle{display:grid}
.skill-showcase-play-toggle:hover{transform:translate(-50%,-50%) scale(1.08);background:rgba(113,91,169,.86)}
.skill-showcase-play-toggle.is-playing{opacity:.18}
.skill-showcase-play-toggle.is-playing:hover{opacity:1}
.skill-showcase-play-toggle span{font-size:1rem;line-height:1}
.skill-showcase-window.has-media .skill-showcase-empty{display:none}
.skill-showcase-empty{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.48rem;
  color:#8792a7;
  text-align:center;
}
.skill-showcase-empty svg{color:#bd88d1}
.skill-showcase-empty strong{
  font-family:var(--font-heading);
  font-size:clamp(.78rem,1.2vw,1rem);
  color:#52637c;
}
.skill-showcase-empty span{
  font-family:var(--font-tag);
  font-size:.55rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.skill-showcase-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  padding:.62rem .18rem .05rem;
  font-family:var(--font-tag);
  font-size:.5rem;
  letter-spacing:.06em;
  color:#7f8598;
  text-transform:uppercase;
}
.skill-showcase-meta span:last-child{
  color:#b17da5;
  white-space:nowrap;
}

/* ===== Skills Action Confirmation ===== */
.skill-action-confirm{
  position:fixed;
  inset:0;
  z-index:1400;
  display:grid;
  place-items:center;
  padding:1rem;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:rgba(244,249,253,.74);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:opacity .24s ease,visibility .24s ease;
  overscroll-behavior:contain;
}
.skill-action-confirm.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.skill-action-confirm-dialog{
  position:relative;
  width:min(420px,calc(100vw - 32px));
  padding:1.45rem 1.35rem 1.25rem;
  border:1px solid rgba(112,150,181,.3);
  border-radius:7px;
  background:
    radial-gradient(circle at 12% 16%,rgba(173,218,238,.22),transparent 28%),
    radial-gradient(circle at 86% 80%,rgba(240,178,207,.2),transparent 30%),
    rgba(255,255,255,.97);
  color:#52677f;
  text-align:left;
  box-shadow:8px 9px 0 rgba(232,158,193,.54),0 28px 70px rgba(67,101,135,.2);
  transform:translateY(12px) scale(.97);
  transition:transform .24s ease;
}
.skill-action-confirm.is-open .skill-action-confirm-dialog{transform:translateY(0) scale(1)}
.skill-action-confirm-dialog::before{
  content:'';
  position:absolute;
  width:70px;
  height:15px;
  left:50%;
  top:-8px;
  transform:translateX(-50%) rotate(-1deg);
  background:rgba(255,239,163,.82);
  box-shadow:0 1px 3px rgba(112,104,79,.12);
}
.skill-action-confirm-kicker{
  display:inline-block;
  margin-bottom:.62rem;
  padding-bottom:.12rem;
  border-bottom:3px solid #a8d6e8;
  color:#9a7899;
  font-family:var(--font-tag);
  font-size:.51rem;
  font-weight:800;
  letter-spacing:.14em;
}
.skill-action-confirm-dialog h3{
  max-width:19ch;
  color:#465f79;
  font-family:var(--font-heading);
  font-size:clamp(1.18rem,2.2vw,1.55rem);
  line-height:1.12;
  letter-spacing:0;
}
.skill-action-confirm-dialog > p:not(.skill-action-confirm-kicker){
  margin-top:.62rem;
  color:#7a8193;
  font-family:var(--font-body);
  font-size:.76rem;
  line-height:1.55;
}
.skill-action-confirm-actions{
  display:flex;
  justify-content:flex-end;
  gap:.55rem;
  margin-top:1.2rem;
}
.skill-action-confirm-actions button{
  min-height:38px;
  padding:.55rem .88rem;
  border:1px solid rgba(105,141,173,.25);
  border-radius:5px;
  color:#5d7088;
  font-family:var(--font-tag);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.skill-action-confirm-actions button:hover{transform:translateY(-1px);border-color:#9a82d8}
.skill-action-confirm-actions button:focus-visible{outline:3px solid rgba(121,183,232,.5);outline-offset:2px}
.skill-action-confirm-cancel{background:#fff}
.skill-action-confirm-submit{background:#fff0ab}
.skill-action-confirm[data-action="video"] .skill-action-confirm-kicker{border-bottom-color:#e8aac8}
.skill-action-confirm[data-action="video"] .skill-action-confirm-submit{background:#f8dce9}
.skill-action-confirm[data-action="play"] .skill-action-confirm-submit{background:#d9eef8}

@media(max-width:700px){
  .skill-showcase-window{
    width:calc(100vw - 24px);
    max-height:72vh;
    box-shadow:0 18px 50px rgba(63,91,127,.2),5px 6px 0 rgba(235,163,198,.5);
  }
  .skill-showcase-titlebar{height:38px;padding:0 .55rem}
  .skill-showcase-content{padding:.55rem}
  .skill-showcase-meta{font-size:.42rem}
  .skill-action-confirm-dialog{padding:1.25rem 1rem 1rem}
  .skill-action-confirm-actions{display:grid;grid-template-columns:1fr 1fr}
  .skill-action-confirm-actions button{width:100%;padding:.55rem .45rem}
}

@media(prefers-reduced-motion:reduce){
  .skill-showcase-window{transition:none}
  .skill-showcase-close{transition:none}
  .skill-action-confirm,.skill-action-confirm-dialog,.skill-action-confirm-actions button{transition:none}
}

/* ===== Illustration visual system: Navigation, Home, About ===== */
.navbar{
  height:6.5vh;
  padding:0 clamp(12px,3vw,44px);
  background:rgba(255,250,240,.96);
  backdrop-filter:none;
  border-bottom:2px solid var(--illustration-ink);
  box-shadow:0 4px 0 rgba(95,75,80,.1);
}
.nav-list{
  height:100%;
  min-width:0;
  gap:clamp(5px,1.6vw,22px);
}
.nav-list li{--nav-accent:var(--illustration-sky);}
.nav-list li:nth-child(2){--nav-accent:#fde8ed;}
.nav-list li:nth-child(3){--nav-accent:#e9f1c9;}
.nav-list li:nth-child(4){--nav-accent:var(--illustration-yellow);}
.nav-list li:nth-child(5){--nav-accent:#eadff4;}
.nav-tear-wrap{
  display:inline-block;
  border:1px solid transparent;
  border-radius:4px;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.nav-tear-wrap:hover{
  background:var(--nav-accent);
  border-color:var(--illustration-ink);
  box-shadow:2px 2px 0 rgba(95,75,80,.13);
}
.nav-item{
  color:var(--illustration-text);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:0;
  padding:.34rem .46rem;
}
.nav-item::after{
  left:.46rem;
  right:.46rem;
  bottom:.2rem;
  width:auto;
  height:2px;
  background:color-mix(in srgb,var(--nav-accent) 62%,var(--illustration-ink));
  transform:scaleX(.35);
  transform-origin:center;
  opacity:.72;
  transition:transform .22s ease,opacity .22s ease;
}
.nav-tear-wrap:hover .nav-item::after{transform:scaleX(1);opacity:1;}
.nav-item:hover{color:var(--illustration-text);}
.nav-tear-wrap:hover .nav-tear-original{opacity:.22;}
.nav-tear-half{
  top:.34rem;
  left:.46rem;
  color:var(--illustration-text);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:0;
}
.nav-home{
  height:auto;
  min-width:76px;
  padding:.32rem .55rem;
  gap:.38rem;
  color:var(--illustration-text);
  background:var(--illustration-sky);
  border:2px solid var(--illustration-ink);
  border-radius:5px;
  box-shadow:3px 3px 0 rgba(95,75,80,.14);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.nav-home:hover{
  transform:translateY(-1px);
  background:#fde8ed;
  box-shadow:4px 4px 0 rgba(95,75,80,.14);
}
.nav-home-icon{width:15px;height:15px;stroke-width:2.4;}
.nav-home-text{
  font-family:var(--font-tag);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:0;
  text-transform:uppercase;
}

#home{
  background:
    radial-gradient(circle,rgba(95,75,80,.075) .7px,transparent .8px) 0 0/18px 18px,
    linear-gradient(112deg,#f7fcff 0 34%,var(--illustration-paper) 34% 68%,#fff7fa 68% 100%);
}
#home::before{
  content:'';
  position:absolute;
  z-index:0;
  top:6.5vh;
  left:0;
  right:0;
  height:8px;
  background:linear-gradient(90deg,var(--illustration-blue) 0 34%,var(--illustration-pink) 34% 68%,var(--illustration-green) 68% 100%);
  border-bottom:1px solid rgba(95,75,80,.28);
  pointer-events:none;
}
.hero,.footer{position:relative;z-index:3;}
.character-area{position:relative;z-index:auto;}
.hero{padding:3.2vh 2rem 1.2vh;}
.hero-name{
  color:var(--illustration-text);
  background:none;
  -webkit-text-fill-color:var(--illustration-text);
  letter-spacing:0;
  text-shadow:4px 4px 0 rgba(169,217,237,.78),8px 8px 0 rgba(248,210,220,.62);
}
.hero-subtitle{
  width:max-content;
  max-width:calc(100% - 2rem);
  margin:.78rem auto 0;
  padding:.24rem .7rem;
  color:var(--illustration-text);
  background:var(--illustration-yellow);
  border:1px solid var(--illustration-line);
  border-radius:4px;
  font-weight:800;
  letter-spacing:0;
  box-shadow:3px 3px 0 rgba(95,75,80,.12);
}
.model-status{color:#806d72;letter-spacing:0;}
.spinner-ring::before{border-color:rgba(95,75,80,.24);}
.spinner-ring::after{
  border-top-color:#7aa7a0;
  border-right-color:rgba(214,127,150,.64);
  filter:none;
}
.spinner-text{color:#806d72;letter-spacing:0;}
.tag{filter:none;}
.tag:hover{filter:none;}
.tag-inner{
  --tag-bg:var(--illustration-sky);
  color:var(--illustration-text);
  background:var(--tag-bg);
  border:1px solid var(--illustration-ink);
  border-radius:5px;
  backdrop-filter:none;
  box-shadow:3px 3px 0 rgba(95,75,80,.13);
  font-weight:800;
  letter-spacing:0;
}
.tag:hover .tag-inner{
  transform:rotate(var(--rot)) translateY(-2px) scale(1.03);
  box-shadow:5px 5px 0 rgba(95,75,80,.14);
}
.tags-left .tag:nth-child(1) .tag-inner,
.tags-right .tag:nth-child(3) .tag-inner{--tag-bg:var(--illustration-sky);color:var(--illustration-text);border-color:var(--illustration-ink);background:var(--tag-bg);}
.tags-left .tag:nth-child(2) .tag-inner,
.tags-right .tag:nth-child(2) .tag-inner,
.tags-right .tag:nth-child(5) .tag-inner{--tag-bg:#fde8ed;color:var(--illustration-text);border-color:var(--illustration-ink);background:var(--tag-bg);}
.tags-left .tag:nth-child(3) .tag-inner,
.tags-right .tag:nth-child(1) .tag-inner{--tag-bg:#e9f1c9;color:var(--illustration-text);border-color:var(--illustration-ink);background:var(--tag-bg);}
.tags-left .tag:nth-child(4) .tag-inner,
.tags-right .tag:nth-child(4) .tag-inner{--tag-bg:var(--illustration-yellow);color:var(--illustration-text);border-color:var(--illustration-ink);background:var(--tag-bg);}
.tags-left .tag:nth-child(5) .tag-inner{--tag-bg:#eadff4;color:var(--illustration-text);border-color:var(--illustration-ink);background:var(--tag-bg);}
.tag-shard{
  color:var(--illustration-text);
  background:var(--tag-bg);
  border-color:var(--illustration-ink);
  border-radius:5px;
}
.footer{padding:1.5vh 2rem 2vh;}
.footer-text{
  width:max-content;
  max-width:100%;
  padding-top:.35rem;
  color:#806d72;
  border-top:2px solid var(--illustration-pink);
  font-weight:800;
  letter-spacing:0;
}
.interact-hint,.easter-egg-hint{
  max-width:180px;
  padding:.38rem .5rem;
  color:var(--illustration-text);
  background:rgba(255,250,240,.94);
  border:1px solid var(--illustration-line);
  border-radius:4px;
  box-shadow:3px 3px 0 rgba(95,75,80,.12);
  font-weight:750;
  letter-spacing:0;
  line-height:1.35;
  text-align:center;
}
.interact-hint::after{
  border-left-color:var(--illustration-ink);
  filter:none;
}
.easter-egg-hint::after{
  border-right-color:var(--illustration-ink);
  filter:none;
}

#about{
  background:
    radial-gradient(circle,rgba(95,75,80,.07) .7px,transparent .8px) 0 0/18px 18px,
    linear-gradient(112deg,#f7fcff 0 35%,var(--illustration-paper) 35% 68%,#fff7fa 68% 100%);
}
#about::before{
  inset:6.5vh 0 auto;
  height:8px;
  background:linear-gradient(90deg,var(--illustration-green) 0 32%,var(--illustration-blue) 32% 66%,var(--illustration-pink) 66% 100%);
  border-bottom:1px solid rgba(95,75,80,.28);
}
.about-main-title{
  color:var(--illustration-text);
  background:none;
  -webkit-text-fill-color:var(--illustration-text);
  letter-spacing:0;
  text-shadow:3px 3px 0 rgba(169,217,237,.72),6px 6px 0 rgba(248,210,220,.58);
}
.timeline-label{
  color:var(--illustration-text);
  background:var(--illustration-yellow);
  border:1px solid var(--illustration-ink);
  border-radius:4px;
  box-shadow:3px 3px 0 rgba(95,75,80,.12);
  font-weight:900;
  letter-spacing:0;
}
.timeline-track::before{
  height:2px;
  background:var(--illustration-ink);
  opacity:.55;
}
.timeline-node{letter-spacing:0;}
.timeline-node:nth-child(1){--timeline-accent:var(--illustration-pink);}
.timeline-node:nth-child(2){--timeline-accent:var(--illustration-blue);}
.timeline-node:nth-child(3){--timeline-accent:var(--illustration-green);}
.timeline-node:nth-child(4){--timeline-accent:var(--illustration-yellow);}
.timeline-node:nth-child(5){--timeline-accent:#eadff4;}
.timeline-node:nth-child(6){--timeline-accent:#f4b8c7;}
.timeline-dot{
  width:13px;
  height:13px;
  border:2px solid var(--illustration-ink);
  background:var(--timeline-accent,var(--illustration-paper));
  box-shadow:2px 2px 0 rgba(95,75,80,.12);
}
.timeline-node.active .timeline-dot{
  transform:scale(1.22) rotate(8deg);
  background:var(--timeline-accent,var(--illustration-yellow));
  border-color:var(--illustration-ink);
  box-shadow:0 0 0 4px var(--illustration-paper),4px 4px 0 rgba(95,75,80,.18);
}
.timeline-period,.timeline-node.active .timeline-period{
  color:var(--illustration-text);
  letter-spacing:0;
}
.timeline-location,.timeline-node.active .timeline-location{color:#806d72;}
.about-card{
  --about-accent:var(--illustration-blue);
  --about-accent-soft:var(--illustration-sky);
  width:clamp(230px,19vw,290px);
  height:clamp(340px,46vh,410px);
  border:2px solid var(--illustration-ink);
  border-radius:8px;
  background:var(--illustration-paper);
  box-shadow:6px 7px 0 rgba(95,75,80,.15),0 15px 28px rgba(95,75,80,.1);
  backdrop-filter:none;
  transition:box-shadow .35s ease,filter .35s ease;
}
.about-card,
.about-card[data-card-id="base-info"]{
  overflow:hidden;
}
.about-card[data-card-id="base-info"]{--about-accent:var(--illustration-pink);--about-accent-soft:#fde8ed;}
.about-card[data-card-id="huaqiao"]{--about-accent:var(--illustration-green);--about-accent-soft:#e9f1c9;}
.about-card[data-card-id="keendata"]{--about-accent:var(--illustration-blue);--about-accent-soft:var(--illustration-sky);}
.about-card[data-card-id="polyu"]{--about-accent:var(--illustration-yellow);--about-accent-soft:#fff5c9;}
.about-card[data-card-id="xgrids"]{--about-accent:#d8c7eb;--about-accent-soft:#eadff4;}
.about-card[data-card-id="chery"]{--about-accent:#f4b8c7;--about-accent-soft:#fde8ed;}
.about-card.front{
  box-shadow:9px 10px 0 rgba(95,75,80,.17),0 20px 38px rgba(95,75,80,.14);
  filter:saturate(1.03);
}
.about-card .card-image-wrap{
  height:58%;
  background:var(--about-accent-soft);
  border-bottom:2px solid var(--illustration-ink);
}
.about-card .card-image-wrap::after{
  height:24%;
  background:linear-gradient(to bottom,transparent 0%,rgba(255,250,240,.92) 100%);
}
.about-card .card-category{
  color:var(--illustration-text);
  background:var(--about-accent-soft);
  border:1px solid var(--illustration-ink);
  border-radius:4px;
  backdrop-filter:none;
  box-shadow:2px 2px 0 rgba(95,75,80,.13);
  letter-spacing:0;
}
.about-card .card-number{
  color:var(--illustration-text);
  background:var(--illustration-paper);
  border:1px solid var(--illustration-ink);
  border-radius:4px;
  backdrop-filter:none;
  box-shadow:2px 2px 0 rgba(95,75,80,.12);
}
.about-card .card-body{
  min-height:0;
  margin-top:-1.3rem;
  padding:0 .86rem .52rem;
  gap:.3rem;
  background:
    radial-gradient(circle,rgba(95,75,80,.09) .7px,transparent .8px) 0 0/13px 13px,
    var(--illustration-paper);
  border-radius:0 0 5px 5px;
}
.about-card .card-items,
.about-card[data-card-id="base-info"] .card-items{
  max-height:none;
  overflow:visible;
  gap:.2rem .25rem;
}
.about-card .card-logo-wrap,
.about-card .card-icon-wrap{
  border:2px solid var(--illustration-ink);
  border-radius:5px;
  background:var(--about-accent-soft);
  box-shadow:3px 3px 0 rgba(95,75,80,.13);
}
.about-card .card-head-icon{color:var(--illustration-text);}
.about-card .card-title{color:var(--illustration-text);letter-spacing:0;}
.about-card .card-subtitle{color:#806d72;}
.about-card .card-tag{
  color:var(--illustration-text);
  background:var(--about-accent-soft);
  border:1px solid var(--illustration-line);
  border-radius:4px;
  font-weight:700;
}
.about-card .card-info-item{color:#806d72;}
.about-card .card-info-item i{color:var(--illustration-text);}
.about-card .card-info-value{color:var(--illustration-text);}
.about-card .card-action-btn{
  max-width:100%;
  color:var(--illustration-text);
  background:var(--about-accent-soft);
  border:2px solid var(--illustration-ink);
  border-radius:5px;
  box-shadow:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.about-card .card-action-btn:hover{
  background:var(--illustration-paper);
  border-color:var(--illustration-ink);
  box-shadow:none;
}
.about-card .card-action{
  flex:0 0 auto;
  max-width:100%;
  margin-top:auto;
  padding-top:.14rem;
}
.about-card .card-tag-private::after{
  top:auto;
  bottom:calc(100% + .28rem);
  transform:translate(-50%,3px);
  color:var(--illustration-text);
  background:var(--illustration-paper);
  border:1px solid var(--illustration-ink);
  border-radius:5px;
  box-shadow:4px 4px 0 rgba(95,75,80,.13);
}

@media (min-width:769px) and (min-height:820px){
  .about-card .card-image-wrap{height:68%;}
}

@media(max-width:768px){
  .navbar{padding:0 7px;}
  .nav-list{gap:2px;justify-content:flex-end;}
  .nav-item{font-size:.55rem;padding:.3rem .27rem;}
  .nav-item::after{left:.27rem;right:.27rem;bottom:.14rem;}
  .nav-tear-half{display:none;}
  .nav-tear-wrap:hover .nav-tear-original{opacity:1;}
  .nav-home{
    min-width:30px;
    width:30px;
    height:30px;
    padding:0;
    justify-content:center;
    box-shadow:2px 2px 0 rgba(95,75,80,.13);
  }
  .nav-home-text{display:none;}
  .nav-home-icon{width:14px;height:14px;}
  .hero{padding:2.6vh 1rem .9vh;}
  .hero-name{
    font-size:clamp(2.4rem,8vw,3.6rem);
    text-shadow:3px 3px 0 rgba(169,217,237,.78),6px 6px 0 rgba(248,210,220,.6);
  }
  .hero-subtitle{font-size:.66rem;padding:.2rem .5rem;}
  .tag-inner{
    font-size:.5rem;
    padding:.34em .58em;
    border-radius:4px;
    box-shadow:2px 2px 0 rgba(95,75,80,.12);
  }
  .tag-shard{padding:.34em .58em;border-radius:4px;}
  .interact-hint,.easter-egg-hint{
    top:20%;
    max-width:88px;
    padding:.28rem .32rem;
    font-size:.5rem;
    opacity:.74;
  }
  .interact-hint{left:3vw;right:auto;}
  .easter-egg-hint{right:3vw;left:auto;}
  .footer-text{font-size:.58rem;}
  #about{padding-top:7.2vh;}
  .about-main-title{text-shadow:2px 2px 0 rgba(169,217,237,.72),4px 4px 0 rgba(248,210,220,.58);}
  .timeline-track::before{height:2px;}
  .timeline-dot{width:12px;height:12px;}
  .about-card{
    flex:0 0 min(78vw,210px);
    width:min(78vw,210px);
    height:min(52vh,310px);
    box-shadow:5px 6px 0 rgba(95,75,80,.14),0 12px 24px rgba(95,75,80,.09);
  }
  .about-card.front{box-shadow:6px 7px 0 rgba(95,75,80,.15),0 14px 28px rgba(95,75,80,.1);}
  .about-card .card-image-wrap{height:50%;}
  .about-card .card-body{margin-top:-1rem;padding:0 .62rem .46rem;}
  .about-card .card-logo-wrap,
  .about-card .card-icon-wrap{border-width:1.5px;}
  .about-timeline::before{background:linear-gradient(90deg,var(--illustration-paper) 0%,transparent 100%);}
  .about-timeline::after{background:linear-gradient(270deg,var(--illustration-paper) 0%,transparent 100%);}
  .about-cards::before{background:linear-gradient(90deg,var(--illustration-paper) 0%,transparent 100%);}
  .about-cards::after{background:linear-gradient(270deg,var(--illustration-paper) 0%,transparent 100%);}
  .internship-stage.is-cards .internship-cards{
    align-items:center;
    justify-content:flex-start;
  }
}

.ribbons-container{
  z-index:1;
  opacity:1;
  visibility:visible;
  transition:opacity .42s ease,visibility .42s ease;
}
.ribbons-container.is-hidden{
  opacity:0;
  visibility:hidden;
}
.ribbon{
  border:1px solid rgba(95,75,80,.22);
  border-radius:2px;
  box-shadow:2px 2px 0 rgba(95,75,80,.1);
}
@keyframes ribbonFloat{
  0%{top:-8%;opacity:0;transform:translateX(0) rotate(0deg)}
  10%{opacity:.68}
  82%{opacity:.5}
  100%{top:105%;opacity:0;transform:translateX(var(--drift)) rotate(var(--spin))}
}
#about .about-header,
#about .about-timeline,
#about .about-cards{
  position:relative;
  z-index:3;
}
.internship-stage{z-index:3;}
.three-canvas.is-easter-lit{
  filter:drop-shadow(0 0 12px rgba(211,190,255,.95)) drop-shadow(0 0 38px rgba(166,112,245,.78));
}