/* ---------- Kin: the web on the left, the middle genre's songs on the right ---------- */
.lane-kin{container:kin/inline-size}
.lane-kin .kin{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 360px}
.lane-kin .kin-web{display:flex;flex-direction:column;min-width:0;min-height:0}
.lane-kin .kin-stage{position:relative;flex:1;min-height:0}
.lane-kin .kin-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lane-kin .kin-stage canvas.drag{cursor:grabbing}
.lane-kin .kin-stage canvas.over{cursor:pointer}

/* under the web: where you have been, a line on how to move, the find box */
.lane-kin .kin-foot{flex:none;display:flex;align-items:center;gap:20px;min-height:52px;padding:8px var(--pad);border-top:1px solid var(--rule);font-size:14px}
.lane-kin .kin-trail{flex:0 1 auto;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;color:var(--dim)}
.lane-kin .kin-trail::-webkit-scrollbar{display:none}
.lane-kin .kin-trail button{color:var(--mute)}
.lane-kin .kin-trail button[aria-current]{color:#fff;cursor:default;text-decoration:none}
.lane-kin .kin-hint{flex:1;min-width:0;color:var(--mute);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane-kin .kin-trail:not([hidden]) ~ .kin-hint{display:none} /* the hint is for the first look; after a step the trail takes its place */
.lane-kin .kin-find{flex:none;width:200px;margin-left:auto}
.lane-kin .kin-find input{width:100%;height:34px;border:1px solid var(--rule);background:#0a0a0a;padding:0 12px;font-size:14px}
.lane-kin .kin-find input:focus{border-color:#fff}
.lane-kin .kin-find input::placeholder{color:var(--mute)}

/* the songs */
.lane-kin .kin-songs{display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid var(--rule)}
.lane-kin .kin-head{flex:none;padding:20px var(--pad) 14px}
.lane-kin .kin-head h2{display:block;padding:0;color:#fff;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere}
.lane-kin .kin-head p{margin-top:10px;color:var(--mute);font-size:13px;line-height:1.45}
.lane-kin .kin-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--pad) 18px;border-top:1px solid var(--rule);scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.lane-kin .kin-note{padding:14px 0;color:var(--mute);font-size:14px}
.lane-kin .kin-tag{display:block;padding:14px 0 0;color:var(--mute);font-size:14px}
.lane-kin .kin-tag:hover{color:#fff}

/* a phone, or a desktop with little room: the web on top, the songs a sheet under it, nothing scrolls but the sheet */
@container kin (max-width:859px){
  .lane-kin .kin{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,60fr) minmax(0,40fr)}
  .lane-kin .kin-foot{min-height:40px;padding:6px var(--pad)}
  .lane-kin .kin-songs{border-left:0}
  .lane-kin .kin-head{display:flex;align-items:center;gap:14px;padding:10px var(--pad)}
  .lane-kin .kin-head h2{flex:1;min-width:0;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lane-kin .kin-head p{display:none}
  .lane-kin .kin-head .kin-find{width:156px}
}

/* the door: one sleeve, six around it, thin lines */
.lcard .kin-card{position:absolute;inset:0}
.lcard .kin-card svg{position:absolute;inset:0;width:100%;height:100%}
.lcard .kin-card line{stroke:#3a3a3a;stroke-width:1;vector-effect:non-scaling-stroke}
.lcard .kin-card img{position:absolute;width:auto;aspect-ratio:1;object-fit:cover;transform:translate(-50%,-50%);background:#111}
.lcard .kin-card img.c{height:42%}
.lcard .kin-card img.s{height:22%}
/* the door, pointed at: the web draws its lines and its sleeves come forward */
.lcard .kin-card line{transition:stroke .4s}
.lcard .kin-card img{transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.lcard:is(:hover,:focus-visible,.lit) .kin-card line{stroke:#9a9a9a}
.lcard:is(:hover,:focus-visible,.lit) .kin-card img{transform:translate(-50%,-50%) scale(1.08)}
@media (prefers-reduced-motion:reduce){.lcard:is(:hover,:focus-visible,.lit) .kin-card img{transform:translate(-50%,-50%)}}