/* Layout of the "Your projects become a musical library" stage (js/anim-import.js). */

.k-import .k-head { position: absolute; left: 0; right: 0; top: 56px; text-align: center; }
.k-import .k-head .k-headline { margin-top: 14px; font-size: 82px; }

.k-finder {
  position: absolute; left: 90px; top: 250px; width: 560px; height: 640px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--k-panel-light); box-shadow: 0 24px 60px #0009; overflow: hidden;
}
.k-finder .k-bar {
  position: relative; z-index: 2; height: 46px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px;
  padding: 0 18px; color: var(--text-dim); font-size: 16px; background: var(--k-panel-light);
}
.k-finder .k-dot { width: 12px; height: 12px; border-radius: 50%; background: #3a3e45; }
.k-finder .k-path { margin-left: 14px; font-family: var(--mono); }
.k-files { position: absolute; left: 0; right: 0; top: 0; }
.k-file { position: absolute; left: 14px; right: 14px; height: 42px; display: flex; align-items: center; gap: 14px; padding: 0 12px; border-radius: 7px; font-size: 19px; color: var(--text-soft); }
.k-file .k-ext { color: var(--text-faint); }
.k-scan {
  position: absolute; left: 0; right: 0; height: 42px; z-index: 1; opacity: 0;
  background: linear-gradient(90deg, transparent, #ff8c0026 30%, #ff8c0026 70%, transparent);
  border-top: 1px solid #ff8c0066; border-bottom: 1px solid #ff8c0066;
}
.k-token { position: absolute; width: 30px; height: 20px; border-radius: 4px; opacity: 0; z-index: 5; }

.k-brand { position: absolute; left: 700px; width: 456px; top: 240px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.k-brand img { width: 76px; height: 76px; }
.k-brand .k-logo { font-family: var(--display); font-stretch: 68%; font-size: 64px; font-weight: 800; }
.k-brand .k-logo b { color: var(--accent); font-weight: 800; }

/* The database: a stack of disks, fixed at the bottom, growing upwards */
.k-db { position: absolute; left: 772px; top: 0; width: 312px; height: 1080px; pointer-events: none; }
.k-db svg { position: absolute; left: 0; overflow: visible; }
.k-floor {
  position: absolute; left: 742px; top: 668px; width: 372px; height: 80px; border-radius: 50%; filter: blur(4px);
  background: radial-gradient(ellipse at 50% 50%, #ff8c0040 0, #ff8c0014 45%, transparent 70%);
}

.k-counters { position: absolute; left: 700px; width: 456px; top: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.k-counter { text-align: center; }
.k-counter .k-num { font-family: var(--display); font-stretch: 68%; font-size: 58px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.k-counter .k-lbl { margin-top: 4px; font-family: var(--mono); font-size: 15px; letter-spacing: .16em; color: var(--text-dim); text-transform: uppercase; }

.k-lib-label { position: absolute; left: 1206px; top: 212px; font-family: var(--mono); font-size: 18px; letter-spacing: .18em; color: var(--text-dim); }
.k-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #fff; box-shadow: 0 0 10px var(--accent-hi); opacity: 0; }
.k-import .k-end { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; font-family: var(--display); font-stretch: 68%; text-transform: uppercase; font-size: 54px; font-weight: 800; }

.k-import { margin-bottom: 40px; }