body.home-body{
  display:flex; flex-direction:column; height:100%; overflow:hidden;
}
main.home-main{
  flex:1; overflow-y:auto;
  padding:36px 40px;
}
.home-intro{ margin-bottom:28px; }
.home-intro h1{
  font-family: var(--mono); font-size:22px; margin:0 0 6px 0;
}
.home-intro p{ margin:0; color:var(--ink-dim); font-size:13.5px; }

.project-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap:16px;
  max-width:1100px;
}

.new-card{
  aspect-ratio: 1 / 1;
  border:2px dashed var(--line);
  border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  cursor:pointer;
  color: var(--ink-dim);
  transition: all .15s ease;
  background:none;
}
.new-card:hover{
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232,163,61,0.05);
}
.new-card .plus{
  width:40px; height:40px;
  border-radius:50%;
  border:2px solid currentColor;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1;
}
.new-card span{ font-size:12px; font-weight:600; }

.project-card{
  aspect-ratio: 1 / 1;
  border:1px solid var(--line);
  border-radius:10px;
  background: var(--panel);
  overflow:hidden;
  cursor:pointer;
  display:flex; flex-direction:column;
  position:relative;
  transition: all .15s ease;
}
.project-card:hover{
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5);
}
.project-card .thumb-wrap{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(45deg, #4a4438 25%, transparent 25%), linear-gradient(-45deg, #4a4438 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #4a4438 75%), linear-gradient(-45deg, transparent 75%, #4a4438 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  background-color: #5a5343;
  padding:14px;
}
.project-card canvas{
  image-rendering: pixelated;
  max-width:100%; max-height:100%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}
.project-card .meta{
  padding:10px 12px;
  border-top:1px solid var(--line);
  background: var(--panel-2);
}
.project-card .meta .name{
  font-size:12.5px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.project-card .meta .sub{
  font-family: var(--mono); font-size:10.5px; color:var(--ink-dim);
  margin-top:2px;
  display:flex; justify-content:space-between; align-items:center;
}
.project-card .delete-btn{
  position:absolute; top:8px; right:8px;
  width:26px; height:26px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px;
  background: rgba(26,23,18,0.85);
  border:1px solid var(--line);
  opacity:0; transition: opacity .15s ease;
  font-size:14px;
}
.project-card:hover .delete-btn{ opacity:1; }
.project-card .delete-btn:hover{ background: var(--danger); border-color:var(--danger); color:#fff; }

.empty-hint{
  color: var(--ink-dim); font-size:13px; margin-top:10px;
  max-width:1100px;
}