*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* View Transitions — gallery category switch
   view-transition-name 放在 .full（fixed inset:0）而非 img 上，
   避免浏览器对不同尺寸图片做 geometry morphing，只做纯 fade */
::view-transition-old(gallery),
::view-transition-new(gallery){
  animation-duration:.18s;
  animation-timing-function:ease;
}
::view-transition-old(gallery){ animation-name:vt-out }
::view-transition-new(gallery){ animation-name:vt-in }
::view-transition-image-pair(gallery){ isolation:isolate }
@keyframes vt-out{ to{opacity:0} }
@keyframes vt-in { from{opacity:0} }

:root{
  --bg:#fafafa;
  --mono:"Space Mono","Courier New",monospace;
  --border:#e0dcd6;
  --muted:#888;
  --text:#0a0a0a;
}

html,body{
  width:100%;
  height:100%;
  background-color:var(--bg);
  background-image:none;
  background-repeat:repeat;
  background-size:auto;
  font-family:var(--mono);
  overflow:hidden;
  touch-action:none;
}

body.maple-open nav{opacity:1}
body.maple-open .full{visibility:hidden}

body.kuromi-bg{
  background-image:url('images/mvbg-kuromi.png');
}

nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:15;
  display:flex;
  gap:1px;
  background:var(--border);
  border-bottom:1px solid var(--border);
  opacity:0;
  transition:opacity .4s ease;
}

nav:hover{opacity:1}

@media(max-width:768px){
  nav{opacity:1}
  nav:hover{opacity:1}
}

.nav-item, a.nav-item{
  flex:1;
  padding:14px 0;
  background:var(--bg);
  border:none;
  cursor:pointer;
  font-family:"Noto Serif SC","Space Mono",monospace;
  font-size:13px;
  letter-spacing:3px;
  color:var(--muted);
  transition:color .2s, background .2s;
  touch-action:manipulation;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.nav-item:hover{color:var(--text)}

.nav-item.active{
  color:var(--text);
  background:#fff;
}

.full{
  position:fixed;
  inset:0;
  background:var(--bg);
  overflow:hidden;
  cursor:grab;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:none;
  view-transition-name:gallery; /* 放在固定全屏容器上，尺寸恒定，纯 fade */
}

body.kuromi-bg .full{
  background:transparent;
}

#viewer-img{
  max-width:none;
  max-height:none;
  width:auto;
  height:auto;
  display:block;
  transform-origin:center center;
  user-select:none;
  pointer-events:none;
}

/* 左右翻页箭头 */
.arrow{
  position:fixed;
  top:0;
  bottom:0;
  width:60px;
  z-index:10;
  background:none;
  border:none;
  color:var(--text);
  font-size:24px;
  cursor:pointer;
  opacity:0;
  transition:opacity .3s ease;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.arrow.left{ left:0; }
.arrow.right{ right:0; }
.arrow.visible{ opacity:.25; }
.arrow.visible:hover{ opacity:1; }

@media(max-width:768px){
  .arrow{ width:48px; font-size:20px; }
  .arrow.visible:active{ opacity:1; }
}

/* 图片计数 */
#counter{
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:2px;
  color:var(--muted);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
#counter.visible{ opacity:1; }

/* ============================================================
   MAPLE IFRAME
   ============================================================ */
#maple-frame{
  position:fixed;
  inset:0;
  top:45px;
  width:100%;
  height:calc(100% - 45px);
  border:none;
  z-index:12;
  background:#fff;
  display:none;
  view-transition-name:maple;
}
#maple-frame.open{
  display:block;
  pointer-events:auto;
}

/* maple 进出用 view-transition，与图库 fade 同一套机制 */
::view-transition-old(maple),
::view-transition-new(maple){
  animation-duration:.22s;
  animation-timing-function:ease;
}
::view-transition-old(maple){ animation-name:vt-out }
::view-transition-new(maple){ animation-name:vt-in }
::view-transition-image-pair(maple){ isolation:isolate }

/* ============================================================
   ABOUT PANEL
   ============================================================ */
#about-panel{
  position:fixed;
  inset:0;
  z-index:20;
  background:var(--bg);
  overflow-y:auto;
  touch-action:pan-y;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .35s, transform .35s;
}
#about-panel.open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}

.about-inner{
  max-width:860px;
  margin:0 auto;
  padding:80px 32px 64px;
}

.about-header{
  display:flex;
  gap:32px;
  align-items:flex-start;
  margin-bottom:48px;
}

.about-avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--border);
  flex-shrink:0;
}

.about-name{
  font-family:var(--mono);
  font-size:24px;
  font-weight:normal;
  letter-spacing:2px;
  margin-bottom:8px;
}

.about-title{
  font-size:15px;
  color:var(--muted);
  letter-spacing:2px;
  margin-bottom:10px;
}

.about-bio{
  font-size:16px;
  line-height:1.6;
  margin-bottom:16px;
}

.about-links{
  display:flex;
  gap:16px;
}
.about-links a{
  font-size:14px;
  letter-spacing:2px;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid var(--border);
  padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.about-links a:hover{ color:var(--text); border-color:var(--text); }
.about-link-text{
  font-size:14px;
  letter-spacing:2px;
  color:var(--muted);
}

.about-section{
  margin-bottom:40px;
}
.about-section h2{
  font:14px var(--mono);
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  padding-bottom:6px;
  margin-bottom:16px;
}
.about-section ul, .about-section ol{
  padding-left:0;
  list-style:none;
}
.about-section ul li, .about-section p{
  font-size:16px;
  line-height:1.8;
}
.about-section a{
  color:var(--text);
  text-decoration:none;
  border-bottom:1px solid var(--border);
  transition:border-color .2s;
}
.about-section a:hover{ border-color:var(--text); }

.about-year{
  display:inline-block;
  width:90px;
  font-size:14px;
  color:var(--muted);
  letter-spacing:1px;
}

.about-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tag{
  font-size:14px;
  padding:4px 10px;
  border:1px solid var(--border);
  letter-spacing:1px;
}

.about-papers{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.about-papers li{
  padding:14px 16px;
  border:1px solid var(--border);
  border-left:3px solid var(--text);
}
.paper-title{
  display:block;
  font-size:16px;
  margin-bottom:4px;
}
.paper-meta{
  display:block;
  font-size:14px;
  color:var(--muted);
  letter-spacing:1px;
}
.paper-link{
  float:right;
  font-size:14px;
  margin-top:-28px;
  border:none !important;
  color:var(--muted) !important;
}
.paper-link:hover{ color:var(--text) !important; }

.about-repos li{
  font-size:16px;
  line-height:1.8;
}

#about-close{
  position:fixed;
  top:60px;
  right:24px;
  z-index:21;
  background:none;
  border:none;
  cursor:pointer;
  font-size:18px;
  color:var(--muted);
  transition:color .2s;
  padding:4px 8px;
}
#about-close:hover{ color:var(--text); }

.nav-about{
  flex:0.5;
  border-left:1px solid var(--border);
}

.arrow.hidden, #counter.hidden{
  display:none;
}

@media(max-width:768px){
  .about-header{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:20px;
  }
  .about-avatar{ width:88px; height:88px; }
  .about-inner{ padding:72px 20px 48px; }
  .about-links{ justify-content:center; }
  .about-year{ width:72px; }
  #about-close{ top:56px; right:16px; }
}