.storybook-hub { min-height: 100vh; padding-top: 68px; background: #08060d; }
.storybook-hub-hero { position: relative; overflow: hidden; padding: 72px 40px 60px; }
.storybook-hub-hero::before { content: ""; position: absolute; top: -110px; right: -40px; width: 680px; height: 520px; border-radius: 50%; background: radial-gradient(ellipse, rgba(180,60,255,.3), rgba(60,220,255,.1) 45%, transparent 70%); filter: blur(42px); }
.storybook-hub-grid { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.storybook-hub-pill { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; padding: 8px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #cfc8dd; background: rgba(255,255,255,.05); font-size: 13px; font-weight: 600; }
.storybook-hub-hero h1 { margin: 0 0 22px; font-size: clamp(42px,6vw,84px); line-height: .96; }
.storybook-hub-lead { max-width: 520px; margin: 0 0 34px; color: #a8a1ba; font-size: clamp(16px,1.6vw,19px); line-height: 1.55; }
.storybook-hub-stats { display: flex; gap: 28px; }
.storybook-hub-stat strong { display: block; font-family: "Space Grotesk",sans-serif; font-size: 40px; line-height: 1; letter-spacing: -.03em; }
.storybook-hub-stat span { display: block; margin-top: 6px; color: #8f88a3; font-size: 14px; }
.storybook-hub-divider { width: 1px; background: rgba(255,255,255,.1); }
.storybook-book-stack { position: relative; min-height: 360px; }
.storybook-book { position: absolute; top: 32px; width: 220px; height: 285px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; box-shadow: 0 30px 60px rgba(0,0,0,.5); animation: abzFloat 7s ease-in-out infinite; }
.storybook-book:first-child { left: 6%; transform: rotate(-9deg); }
.storybook-book:last-child { right: 8%; transform: rotate(7deg); animation-delay: .6s; animation-duration: 8s; }
.storybook-book img { width: 100%; height: 100%; object-fit: cover; }
.storybook-filter-section { max-width: 1200px; margin: 0 auto; padding: 10px 40px 30px; }
.storybook-filter-card { padding: 24px; border: 1px solid rgba(255,255,255,.08); border-radius: 22px; background: #0e0b18; }
.storybook-filter-row { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: 14px; }
.storybook-field { min-height: 50px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; outline: 0; color: #f3f0fa; background: rgba(255,255,255,.04); font-size: 15px; }
.storybook-search { display: flex; align-items: center; gap: 10px; }
.storybook-search span { color: #6f6883; }
.storybook-search input { flex: 1; min-width: 0; border: 0; outline: 0; color: #f3f0fa; background: transparent; }
.storybook-filter-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.storybook-filter-meta p { margin: 0; color: #8f88a3; font-size: 14px; }
.storybook-skill-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.storybook-skill-chip { padding: 7px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #b7b0c6; background: rgba(255,255,255,.03); font-size: 13.5px; cursor: pointer; }
.storybook-skill-chip[aria-pressed="true"] { border-color: transparent; color: #fff; background: linear-gradient(115deg,#ff8cf0,#b43cff); }
.storybook-shelf { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding: 0 40px 110px; }
.storybook-card { overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; color: inherit !important; background: #0e0b18; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.storybook-card:hover { transform: translateY(-5px); border-color: rgba(255,140,240,.45); box-shadow: 0 18px 46px rgba(180,60,255,.28); }
.storybook-card-cover { position: relative; height: 186px; overflow: hidden; background: linear-gradient(150deg,#b43cff,#3cdcff); }
.storybook-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.storybook-card-badge { position: absolute; top: 12px; padding: 4px 10px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.48); backdrop-filter: blur(4px); font-size: 10.5px; font-weight: 600; }
.storybook-card-badge:first-of-type { left: 12px; letter-spacing: .06em; }
.storybook-card-badge:last-of-type { right: 12px; }
.storybook-card-copy { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; }
.storybook-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.storybook-card-heading h2 { margin: 0; color: #f3f0fa; font-family: "Space Grotesk",sans-serif; font-size: 18px; line-height: 1.15; letter-spacing: -.01em; }
.storybook-card-heading span { flex: none; font-family: "Space Grotesk",sans-serif; font-size: 13.5px; font-weight: 700; }
.storybook-card-copy p { flex: 1; margin: 0; color: #8f88a3; font-size: 14px; line-height: 1.5; }
.storybook-card-skills { display: flex; flex-wrap: wrap; gap: 6px; }
.storybook-card-skills span { padding: 4px 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 999px; color: #cfc8dd; background: rgba(255,255,255,.05); font-size: 11.5px; }

@media (max-width:1000px) {
  .storybook-hub-grid { grid-template-columns: 1fr; }
  .storybook-book-stack { display: none; }
  .storybook-shelf { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .storybook-hub-hero { padding: 44px 22px 54px; }
  .storybook-hub-stats { flex-wrap: wrap; }
  .storybook-hub-divider { display: none; }
  .storybook-filter-section,.storybook-shelf { padding-left: 22px; padding-right: 22px; }
  .storybook-filter-row,.storybook-shelf { grid-template-columns: 1fr; }
  .storybook-filter-meta { align-items: flex-start; flex-direction: column; }
}