.pile{
  position:relative;
  height:340px;
  margin:10px 0 0;
}

.scrap{
  position:absolute;
  width:240px;
  background:var(--st-surface);
  border:1px solid var(--st-border-strong);
  border-radius:2px;
  overflow:hidden;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform 0.5s cubic-bezier(.2,.8,.2,1);
}

.scrap .bar{
  display:flex;
  align-items:center;
  gap:6px;
  height:28px;
  padding:0 11px;
  border-bottom:1px solid var(--st-border);
  background:var(--st-page-2);
  font-size:11px;
  color:var(--st-faint);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.scrap .bar i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#1E293B;
}

.scrap .c{ padding:14px 16px 16px; font-size:13px; color:var(--st-muted); }

.scrap h4{
  margin:0 0 6px;
  font-family:var(--st-serif);
  font-size:17px;
  font-weight:400;
  color:var(--st-text);
}

.scrap .serif{
  font-family:var(--st-serif);
  font-style:italic;
  font-size:14.5px;
  line-height:1.6;
  color:var(--st-prose);
}

.scrap .t{
  font-size:10px;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--st-faint);
  margin-bottom:9px;
}

.hl{ background:rgba(124,58,237,.22); color:var(--st-text); padding:0 2px; }

.file{
  display:flex;
  gap:8px;
  align-items:center;
  padding:5px 0;
  border-bottom:1px dashed var(--st-border);
  font-size:12.5px;
}

.file:last-child{ border:0; }

.file b{
  width:11px;
  height:14px;
  border-radius:2px;
  background:#1E293B;
  flex:none;
}

.p1{ left:0; top:40px; transform:rotate(-5deg); }
.p1:hover{ transform:rotate(-5deg) translateY(-8px); z-index:5; }
.p2{ left:20.5%; top:0; transform:rotate(3deg); }
.p2:hover{ transform:rotate(3deg) translateY(-8px); z-index:5; }
.p3{ left:41%; top:70px; transform:rotate(-2deg); }
.p3:hover{ transform:rotate(-2deg) translateY(-8px); z-index:5; }
.p4{ left:61%; top:10px; transform:rotate(4deg); }
.p4:hover{ transform:rotate(4deg) translateY(-8px); z-index:5; }
.p5{ left:80%; top:55px; transform:rotate(-3deg); }
.p5:hover{ transform:rotate(-3deg) translateY(-8px); z-index:5; }

.resolve{
  margin-top:90px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:40px;
  align-items:center;
  padding:44px 48px;
  border:1px solid var(--st-border-strong);
  border-radius:16px;
  background:linear-gradient(120deg, rgba(124,58,237,.10), transparent 60%), var(--st-page-2);
}

.resolve h3{
  margin:0;
  font-family:var(--st-serif);
  font-weight:400;
  font-size:clamp(28px, 3vw, 40px);
  line-height:1.1;
  letter-spacing:-0.015em;
}

.resolve h3 em{ font-style:italic; font-weight:300; color:var(--st-warm); }

.resolve p{
  margin:0;
  font-family:var(--st-serif);
  font-weight:300;
  font-size:19px;
  line-height:1.5;
  color:var(--st-muted);
  max-width:560px;
}

@media (max-width:1000px){
  .pile{ height:auto; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .scrap{ position:static; width:auto; transform:none; }
  .resolve{ grid-template-columns:1fr; padding:32px; }
}

@media (max-width:600px){
  .pile{ grid-template-columns:1fr; }
}