.linuxjk-project-rails {
  max-width: 1128px;
  margin: 32px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  color: var(--jk-ink);
  font-family: var(--jk-font);
  font-size: 14px;
  line-height: 1.7;
}
.linuxjk-project-rails .linuxjk-rail-toggle { display: none; }
.linuxjk-rail-card {
  position: relative;
  padding: 16px;
  background: var(--jk-surface);
  border: 1px solid var(--jk-border);
  border-radius: 6px;
}
.linuxjk-project-rails .linuxjk-rail-label { margin: 0 0 8px; color: var(--jk-muted); font-size: 12px; }
.linuxjk-project-rails h2 { margin: 0 0 16px; color: var(--jk-ink); font-size: 20px; line-height: 1.3; }
.linuxjk-project-rails h2 span { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--jk-muted); }
.linuxjk-project-preview { display: block; position: relative; margin-bottom: 16px; }
.linuxjk-project-preview > img { display: block; width: 100%; height: auto; border: 1px solid var(--jk-border); border-radius: 4px; }
.linuxjk-project-enlarged { display: none; }
.linuxjk-project-rails .linuxjk-rail-description { margin: 0 0 16px; color: var(--jk-muted); }
.linuxjk-project-rails .linuxjk-rail-primary {
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--jk-accent);
  color: var(--jk-surface);
  text-align: center;
  font-weight: 600;
}
.linuxjk-project-rails .linuxjk-rail-primary:hover { background: var(--ast-global-color-1); color: var(--jk-surface); }
.linuxjk-project-rails .linuxjk-rail-domain { margin: 8px 0 0; color: var(--jk-muted); font-size: 12px; overflow-wrap: anywhere; }
.linuxjk-service-preview { display: flex; flex-direction: column; align-items: center; margin: 0 0 16px; padding: 16px 8px; background: var(--jk-background); border: 1px solid var(--jk-border); border-radius: 4px; }
.linuxjk-service-arrow { color: var(--jk-accent); font-size: 24px; line-height: 1.5; }
.linuxjk-project-rails .linuxjk-rail-github { display: block; border-top: 1px solid var(--jk-border); padding-top: 12px; margin-top: 16px; font-weight: 600; }
.linuxjk-project-rails[data-mode="wide"], .linuxjk-project-rails[data-mode="compact"] { margin: 0; padding: 0; display: block; }
.linuxjk-project-rails[data-mode="wide"] .linuxjk-project-rail,
.linuxjk-project-rails[data-mode="compact"] .linuxjk-project-rail {
  position: fixed;
  top: max(112px, calc(50vh - 176px));
  z-index: 40;
}
.linuxjk-project-rails[data-mode="wide"] .linuxjk-project-rail { width: 224px; }
.linuxjk-project-rails[data-mode="wide"] .linuxjk-project-rail-left { left: var(--linuxjk-left-offset); }
.linuxjk-project-rails[data-mode="wide"] .linuxjk-project-rail-right { right: var(--linuxjk-right-offset); }
.linuxjk-project-rails[data-mode="compact"] .linuxjk-project-rail-left { left: 8px; }
.linuxjk-project-rails[data-mode="compact"] .linuxjk-project-rail-right { right: 8px; }
.linuxjk-project-rails[data-mode="compact"] .linuxjk-project-rail { width: 48px; }
.linuxjk-project-rails[data-mode="compact"] .linuxjk-project-rail-right .linuxjk-rail-toggle { margin-left: auto; }
.linuxjk-project-rails[data-mode="compact"] .linuxjk-rail-toggle {
  display: block;
  padding: 16px 10px;
  width: 40px;
  min-height: 112px;
  border: 1px solid var(--jk-border);
  border-radius: 6px;
  background: var(--jk-surface);
  color: var(--jk-accent);
  font: 600 14px/1.5 var(--jk-font);
  writing-mode: vertical-rl;
  letter-spacing: 2px;
  cursor: pointer;
}
.linuxjk-project-rails[data-mode="compact"] .linuxjk-rail-card { position: absolute; top: 0; width: 240px; box-shadow: 0 8px 24px #0f172a14; }
.linuxjk-project-rails[data-mode="compact"] .linuxjk-project-rail-left .linuxjk-rail-card { left: 48px; }
.linuxjk-project-rails[data-mode="compact"] .linuxjk-project-rail-right .linuxjk-rail-card { right: 48px; }
.linuxjk-project-rails .linuxjk-rail-card[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .linuxjk-project-rails:is([data-mode="wide"], [data-mode="compact"]) .linuxjk-project-preview:hover .linuxjk-project-enlarged,
  .linuxjk-project-rails:is([data-mode="wide"], [data-mode="compact"]) .linuxjk-project-preview:focus-visible .linuxjk-project-enlarged {
    display: block;
    position: absolute;
    width: 400px;
    left: calc(100% + 24px);
    top: 0;
    padding: 8px;
    border: 1px solid var(--jk-border);
    border-radius: 6px;
    background: var(--jk-surface);
    box-shadow: 0 8px 24px #0f172a14;
    pointer-events: none;
  }
  .linuxjk-project-enlarged img { width: 100%; height: auto; display: block; }
}
@media (max-width: 600px) {
  .linuxjk-project-rails { grid-template-columns: 1fr; padding: 0 18px; margin-block: 24px; }
}
@media print {
  .linuxjk-project-rails { display: none !important; }
}