body.intro-active{overflow:hidden}
.video-intro{
  position:fixed;inset:0;z-index:1000;background:#080708;color:#f4eeeb;
  overflow:hidden;clip-path:circle(150% at 50% 50%);
  transition:clip-path 1.05s cubic-bezier(.76,0,.24,1),opacity .65s ease,visibility 1.05s;
}
.video-intro.exit{
  clip-path:circle(0% at 50% 48%);
  opacity:.98;visibility:hidden;
}
.intro-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;
  transform:scale(1.025);filter:saturate(.72) contrast(1.04) brightness(.83);
  animation:introCamera 6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes introCamera{
  0%{transform:scale(1.055) translate3d(0,0,0)}
  100%{transform:scale(1.015) translate3d(0,-.6%,0)}
}
.intro-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,7,8,.72) 0%,rgba(8,7,8,.28) 28%,rgba(8,7,8,.06) 55%,rgba(8,7,8,.28) 100%),
    linear-gradient(0deg,rgba(8,7,8,.68) 0%,transparent 33%,rgba(8,7,8,.12) 72%,rgba(8,7,8,.42) 100%),
    radial-gradient(80% 80% at 50% 45%,transparent 45%,rgba(6,5,6,.34) 100%);
}
.intro-scan{
  position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:screen;
  background:
    repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.025) 4px 5px),
    linear-gradient(110deg,transparent 32%,rgba(235,214,208,.08) 44%,transparent 55%);
  background-size:auto,220% 100%;
  animation:introScan 5.1s linear both;
}
@keyframes introScan{
  from{background-position:0 0,-120% 0}
  to{background-position:0 30px,120% 0}
}
.intro-flash{
  position:absolute;inset:0;background:#f5ebe7;opacity:0;pointer-events:none;mix-blend-mode:screen;
}
.intro-flash.hit{animation:introFlash .62s ease-out}
@keyframes introFlash{
  0%{opacity:0}
  20%{opacity:.18}
  100%{opacity:0}
}
.intro-top{
  position:absolute;left:34px;right:34px;top:28px;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:9px;color:rgba(244,238,235,.68)
}
.intro-brand,.intro-top-right{display:flex;align-items:center;gap:12px}
.intro-brand-mark{
  width:38px;height:38px;border:1px solid rgba(238,220,215,.25);border-radius:12px;
  display:grid;place-items:center;color:#1b1517;font-weight:900;letter-spacing:-.05em;
  background:linear-gradient(135deg,#e2c7c0,#9b7477);
  box-shadow:0 10px 28px rgba(0,0,0,.22)
}
.intro-mini-btn{
  appearance:none;border:1px solid rgba(242,232,228,.18);background:rgba(16,13,14,.24);
  color:rgba(242,232,228,.7);border-radius:999px;padding:9px 12px;
  font:inherit;letter-spacing:.12em;cursor:pointer;backdrop-filter:blur(10px);
  transition:.25s ease
}
.intro-mini-btn:hover{
  color:#1b1517;background:#dec0ba;border-color:#dec0ba;transform:translateY(-2px)
}
.intro-scene{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s;
}
.intro-scene.active{opacity:1;visibility:visible}
.intro-scene-kicker{font-size:10px;letter-spacing:.16em;color:#cbb7b3;margin-bottom:16px}
.scene-a{
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  padding:0 0 10vh 5.2vw
}
.intro-cn-name{
  margin:0;font-size:clamp(82px,12vw,190px);font-weight:900;letter-spacing:-.08em;line-height:.78;
  text-shadow:0 20px 60px rgba(0,0,0,.36);
  transform:translateY(22px);filter:blur(6px);
}
.scene-a.active .intro-cn-name{animation:introTitleIn .8s cubic-bezier(.22,1,.36,1) forwards}
.intro-scene-meta{margin-top:24px;font-size:9px;color:rgba(240,226,222,.64)}
@keyframes introTitleIn{
  to{transform:none;filter:none}
}
.scene-b{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding-left:5.2vw
}
.intro-role{
  margin:0;display:grid;font-size:clamp(48px,8vw,132px);
  line-height:.76;letter-spacing:-.065em;font-weight:900
}
.intro-role span{
  display:block;transform:translateX(-46px);opacity:0;filter:blur(8px)
}
.scene-b.active .intro-role span:nth-child(1){animation:roleIn .65s .02s cubic-bezier(.22,1,.36,1) forwards}
.scene-b.active .intro-role span:nth-child(2){animation:roleIn .65s .12s cubic-bezier(.22,1,.36,1) forwards}
.scene-b.active .intro-role span:nth-child(3){animation:roleIn .65s .22s cubic-bezier(.22,1,.36,1) forwards}
@keyframes roleIn{to{transform:none;opacity:1;filter:none}}
.scene-b p{
  margin:26px 0 0;font-size:clamp(13px,1.4vw,20px);letter-spacing:.16em;color:#d6c4c0
}
.scene-c{
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:0 0 9vh 5.2vw
}
.intro-hello{
  font-size:clamp(66px,9.4vw,158px);line-height:.78;letter-spacing:-.065em;
  margin:0;font-weight:900
}
.intro-hello span{
  color:#dbc0ba;font-weight:300;letter-spacing:-.045em
}
.intro-hello-wrap{transform:translateY(24px);opacity:0}
.scene-c.active .intro-hello-wrap{animation:helloIn .72s cubic-bezier(.22,1,.36,1) forwards}
@keyframes helloIn{to{transform:none;opacity:1}}
.scene-c p{margin:24px 0 0;color:#b8a7a4;font-size:13px;letter-spacing:.1em}
.intro-bottom{
  position:absolute;left:34px;right:34px;bottom:26px;z-index:6;
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px
}
.intro-keywords{display:flex;align-items:center;gap:10px;color:rgba(235,220,216,.56);font-size:8px}
.intro-keywords i{width:18px;height:1px;background:rgba(235,220,216,.18)}
.intro-time{display:grid;grid-template-columns:auto minmax(120px,220px) auto;align-items:center;gap:10px;color:#a99391;font-size:8px}
.intro-progress{height:1px;background:rgba(237,220,216,.18);overflow:hidden}
.intro-progress i{
  display:block;width:0;height:100%;background:#e1c3bd;
  box-shadow:0 0 14px rgba(225,195,189,.6)
}
.intro-start{
  position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,-50%);
  border:1px solid rgba(242,232,228,.28);border-radius:999px;padding:15px 20px;
  background:rgba(10,8,9,.6);color:#f2e7e3;backdrop-filter:blur(14px);
  font:10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;
  cursor:pointer;display:none
}
.video-intro.awaiting-start .intro-start{display:block}
.video-intro.awaiting-start .intro-video{filter:saturate(.6) contrast(1.03) brightness(.55)}

@media(max-width:760px){
  .intro-video{object-position:52% center}
  .intro-top{left:16px;right:16px;top:16px}
  .intro-top-right>span{display:none}
  .intro-brand>span:last-child{display:none}
  .intro-mini-btn{padding:8px 9px;font-size:7px}
  .scene-a,.scene-b,.scene-c{padding-left:20px}
  .scene-a{padding-bottom:14vh}
  .scene-c{padding-bottom:14vh}
  .intro-cn-name{font-size:clamp(72px,22vw,120px)}
  .intro-role{font-size:clamp(48px,15vw,86px)}
  .intro-hello{font-size:clamp(58px,18vw,96px)}
  .intro-bottom{left:16px;right:16px;bottom:18px;display:block}
  .intro-keywords{display:none}
  .intro-time{grid-template-columns:auto 1fr auto}
}
@media(prefers-reduced-motion:reduce){
  .video-intro{display:none}
  body.intro-active{overflow:auto}
}
.intro-hello-en{
  margin-top:10px;
  max-width:620px;
  font:9px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(232,215,211,.62);
}
@media(max-width:760px){
  .intro-hello-en{
    max-width:82vw;
    font-size:7px;
    line-height:1.6;
    letter-spacing:.1em;
  }
}
.intro-start{
  display:flex !important;
  align-items:center;
  gap:12px;
  top:auto !important;
  left:auto !important;
  right:34px !important;
  bottom:76px !important;
  transform:none !important;
  opacity:0;
  animation:enterSiteIn .55s 1.05s ease forwards;
  padding:12px 15px !important;
  z-index:40 !important;
}
.intro-start span{
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;
}
.intro-start b{
  width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(240,225,220,.18);
  font-size:11px;font-weight:400;
}
.intro-start:hover{
  background:#dec0ba !important;
  color:#1b1517 !important;
}
@keyframes enterSiteIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
.video-intro.awaiting-start .intro-start{
  display:flex !important;
}
.intro-error-note{
  position:absolute;z-index:41;right:34px;bottom:54px;
  font:7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;color:#917f80;opacity:0;transition:.3s;
}
.video-intro.video-problem .intro-error-note{opacity:1}
#introSkip{
  border-color:rgba(225,195,189,.33) !important;
  color:#dbc5c0 !important;
}
#introSkip:hover{
  background:#dec0ba !important;color:#1b1517 !important;
}
@media(max-width:760px){
  .intro-start{
    right:16px !important;
    bottom:64px !important;
  }
  .intro-error-note{
    right:16px;bottom:45px;
  }
}



/* V16: a freely draggable companion. No page layout or navigation overrides. */
.chibi-guide[hidden],.chibi-guide [hidden]{display:none!important}
.chibi-guide{
  position:fixed;left:calc(100vw - 172px);top:calc(100vh - 250px);z-index:145;
  width:148px;color:#ddc8c4;isolation:isolate;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
}
body.intro-active .chibi-guide{visibility:hidden;pointer-events:none}
.chibi-guide button{font:inherit;color:inherit;-webkit-appearance:none;appearance:none}
.chibi-guide button:focus-visible{outline:2px solid #e3c3bc;outline-offset:3px;border-radius:12px}
.guide-body{width:100%;position:relative}
.guide-avatar{
  width:148px;height:148px;display:block;padding:0;margin:0;border:0;
  background:none;position:relative;touch-action:none;cursor:grab;
}
.chibi-guide.is-dragging .guide-avatar{cursor:grabbing}
.guide-sprite,.guide-run-sprite{
  position:absolute;inset:0;display:block;pointer-events:none;
  background-repeat:no-repeat;background-size:300% 200%;background-position:0 0;
  transform-origin:50% 87%;filter:drop-shadow(0 5px 8px rgba(0,0,0,.25));
}
.guide-sprite,.guide-mini-portrait{background-image:url("/assets/legacy/c3a793fbf80ecef7.webp")}
.guide-run-sprite{background-image:url("/assets/legacy/2f163b356a89c400.webp");visibility:hidden}
.chibi-guide[data-state="profile"] .guide-sprite{background-position:50% 0}
.chibi-guide[data-state="capabilities"] .guide-sprite{background-position:100% 0}
.chibi-guide[data-state="works"] .guide-sprite{background-position:0 100%}
.chibi-guide[data-state="contact"] .guide-sprite{background-position:50% 100%}
.chibi-guide.is-running .guide-sprite{visibility:hidden}
.chibi-guide.is-running .guide-run-sprite{visibility:visible;animation:guideRunFrames .54s step-end infinite}
.chibi-guide[data-facing="left"] .guide-run-sprite{transform:scaleX(-1)}
@keyframes guideRunFrames{
  0%{background-position:0 0}
  16.6667%{background-position:50% 0}
  33.3333%{background-position:100% 0}
  50%{background-position:0 100%}
  66.6667%{background-position:50% 100%}
  83.3333%{background-position:100% 100%}
  100%{background-position:0 0}
}
.guide-caption{
  display:flex;align-items:center;justify-content:center;gap:7px;margin:2px 0 0;
  min-height:18px;line-height:1.5;color:#d4bcb7;font-size:10px;pointer-events:none;
  text-shadow:0 1px 5px #171114,0 0 12px #171114;
}
.guide-caption span+span{font:7px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;color:#c1aba9}
.guide-minimize,.guide-bubble-close{
  display:grid;place-items:center;border:1px solid rgba(219,185,179,.2);padding:0;
  border-radius:50%;background:rgba(29,23,26,.82);color:#c6aba8;cursor:pointer;
}
.guide-minimize{position:absolute;right:0;top:2px;width:28px;height:28px;font-size:18px!important;opacity:.6;transition:opacity .15s}
.chibi-guide:hover .guide-minimize,.chibi-guide:focus-within .guide-minimize{opacity:1}
.guide-minimize:hover,.guide-bubble-close:hover{background:#443236;color:#f3ddd7}
.guide-bubble{
  position:absolute;left:0;top:0;width:220px;padding:33px 14px 14px;
  border:1px solid rgba(219,185,179,.24);border-radius:16px;
  background:rgba(37,29,32,.98);box-shadow:0 10px 26px rgba(0,0,0,.22);
  color:#e1ccc7;overflow-wrap:anywhere;overflow-y:auto;overscroll-behavior:contain;
  user-select:text;-webkit-user-select:text;
}
.guide-bubble p{font-size:12px;line-height:1.7;margin:0;letter-spacing:.015em}
.guide-bubble-close{position:absolute;right:6px;top:5px;width:26px;height:26px;font-size:18px!important;border:0;background:transparent}
.guide-restore{
  width:48px;min-height:64px;margin:0;padding:4px 3px 8px;display:flex;
  align-items:center;justify-content:center;flex-direction:column;gap:1px;cursor:pointer;
  border:1px solid rgba(215,186,181,.22);border-radius:24px;
  background:#241c1f;box-shadow:0 4px 20px rgba(0,0,0,.2);font-size:9px!important;
}
.guide-mini-portrait{
  display:block;flex-shrink:0;width:36px;height:36px;
  background-repeat:no-repeat;
  background-size:300% 200%;background-position:0 0;
}
.chibi-guide.is-collapsed{width:48px}
.guide-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){
  .chibi-guide{width:100px;left:calc(100vw - 112px);top:calc(100vh - 198px)}
  .guide-avatar{width:100px;height:100px}
  .guide-caption{font-size:9px;gap:5px;min-height:16px}
  .guide-caption span+span{font-size:6px}
  .guide-minimize{right:-2px;top:-2px;width:28px;height:28px;opacity:.82}
  .chibi-guide.is-collapsed{width:48px}
}
@media(prefers-reduced-motion:reduce){
  .guide-sprite,.guide-run-sprite,.guide-minimize{animation:none!important;transition:none!important}
  .chibi-guide.is-running .guide-sprite{visibility:visible}
  .chibi-guide.is-running .guide-run-sprite{visibility:hidden}
}



/* V18 résumé conversation: a small on-demand bubble, never a side panel. */
.chibi-guide .guide-bubble{z-index:3;width:316px;padding:15px 16px 10px;border-radius:18px;scrollbar-width:thin;scrollbar-color:#6d555b transparent}
.guide-chat-header{display:flex;gap:7px;align-items:center;padding-right:20px;margin-bottom:12px;flex-wrap:wrap;line-height:1.5}
.guide-chat-header strong{font-size:11px;font-weight:600;color:#f0deda;letter-spacing:.02em}
.guide-chat-header>span:last-child{font-size:9px;color:#b79d9b}
.guide-chat-dot{width:5px;height:5px;border-radius:50%;background:#d5b3ab;flex:none;box-shadow:0 0 8px #b4877755}
.chibi-guide .guide-bubble-close{top:9px;right:8px}
.chibi-guide .guide-bubble .guide-asked{font-size:10px;color:#d2afa8;margin-bottom:7px}
.chibi-guide .guide-bubble #guideSentence{font-size:12px;line-height:1.8;color:#f0e0dc;white-space:pre-line}
.guide-questions,.guide-topics{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}
.chibi-guide .guide-questions button,.chibi-guide .guide-topics button{
  border:1px solid #735a625c;border-radius:10px;background:#ffffff05;
  color:#dac6c2;min-height:34px;padding:7px 10px;font-size:10px;line-height:1.4;
  cursor:pointer;transition:background .15s,border-color .15s;text-align:left;
}
.chibi-guide .guide-questions button:hover,.chibi-guide .guide-topics button:hover{background:#b78c8424;border-color:#be938974}
.chibi-guide .guide-questions button[aria-pressed="true"],.chibi-guide .guide-topics button[aria-pressed="true"]{background:#c7a09924;border-color:#c7a09986;color:#ffe7df}
.guide-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.chibi-guide .guide-topics button{text-align:center;padding:7px 3px}
.chibi-guide .guide-destination{display:block;border:0;background:none;color:#e6c2b7;padding:10px 0 7px;font-size:11px;cursor:pointer;text-align:left;line-height:1.5}
.chibi-guide .guide-destination:hover{text-decoration:underline;text-underline-offset:4px}
.guide-chat-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:5px;border-top:1px solid #a4817929;margin-top:3px}
.chibi-guide .guide-chat-footer button{border:0;background:none;color:#cbb5af;padding:7px 0;min-height:32px;font-size:10px;cursor:pointer}
.chibi-guide .guide-chat-footer button:hover{color:#fff0e9}
.guide-chat-footer>span{margin-left:auto;color:#a58e89;font-size:8px}
#home,#profile,#abilities,#works,#work-social,#work-teaching,#work-code,#work-aigc,#contact{scroll-margin-top:108px}
@media(max-width:760px){
  .chibi-guide .guide-bubble{padding:13px 13px 9px}
  .chibi-guide .guide-questions button,.chibi-guide .guide-topics button{min-height:40px}
  .guide-chat-footer{gap:10px}
  .guide-chat-footer>span{font-size:7px}
  .guide-caption{white-space:nowrap;gap:4px}
  .guide-caption span+span{display:none}
}
@media(prefers-reduced-motion:reduce){.chibi-guide .guide-questions button,.chibi-guide .guide-topics button{transition:none}}