:root{
  --bg:#0b0f12; --card:#0f1720; --text:#e6eef8; --muted:#9aa6b8; --accent:#7c5cff; --glass:rgba(255,255,255,0.03);
  --radius:14px; --gap:14px; --fw-semi:600; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

@media (prefers-color-scheme: light){
  :root{ --bg: #f6f8fb; --card:#ffffff; --text:#091421; --muted:#596575; --accent:#6b46ff; --glass: rgba(2,6,23,0.02); }
  meta[name="theme-color"]{ content: #f6f8fb }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1000px 500px at 8% 8%, rgba(124,92,255,0.06), transparent), var(--bg);
  color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  display:flex; align-items:center; justify-content:center; padding:24px;
}

.card{
  width:min(1100px, 96vw);
  min-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap:20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius:20px; padding:40px; border:1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(8px); box-shadow: 0 12px 40px rgba(2,6,23,0.65);
}

header{display:flex; gap:16px; align-items:center}
.logo{
  width:56px; height:56px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(124,92,255,0.16), rgba(124,92,255,0.06));
  border:1px solid rgba(255,255,255,0.03);
  box-shadow: inset 0 -6px 18px rgba(2,6,23,0.25);
  font-weight:700; color:var(--text); font-family:var(--mono);
}
h1{margin:0;font-size:1.125rem;letter-spacing:0.02em}
.tag{margin:4px 0 0; color:var(--muted); font-size:.9rem}

nav{margin-top:22px}
.links{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; list-style:none; padding:0; margin:0}

a.card-link{
  display:flex; gap:16px; align-items:flex-start; text-decoration:none; color:var(--text);
  padding:18px 20px; border-radius:14px; background:var(--glass); border:1px solid rgba(255,255,255,0.02);
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s, background .28s;
  transform:translateY(8px); opacity:0; will-change:transform,opacity; overflow:hidden;
}

/* entrance animation, staggered */
@keyframes pop { to{ transform:none; opacity:1 } }
.links li:nth-child(1) a{ animation: pop .48s .04s both }
.links li:nth-child(2) a{ animation: pop .48s .10s both }
.links li:nth-child(3) a{ animation: pop .48s .16s both }
.links li:nth-child(4) a{ animation: pop .48s .22s both }
.links li:nth-child(5) a{ animation: pop .48s .28s both }

a.card-link:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(2,6,23,0.55); background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)) }
a.card-link:active{ transform: translateY(-2px) scale(.998) }

.ic{width:44px; height:44px; display:grid; place-items:center; border-radius:10px; background: linear-gradient(135deg, rgba(124,92,255,0.12), rgba(124,92,255,0.04)); border:1px solid rgba(255,255,255,0.02)}
.meta{margin-left:auto; color:var(--muted); font-size:.85rem}

.title{font-weight:var(--fw-semi)}
.sub{font-size:.82rem; color:var(--muted); margin-top:2px}
.desc{
  margin-top:8px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.35;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition: max-height .28s ease, opacity .28s ease;
}
a.card-link:hover .desc, a.card-link:focus-within .desc{
  max-height:6.5rem;
  opacity:1;
}

.chev{margin-left:auto; color:rgba(255,255,255,0.45); font-weight:700}

.share-btn{
  -webkit-appearance:none; appearance:none; background:transparent; border:1px solid rgba(255,255,255,0.03);
  color:var(--muted); padding:8px 10px; border-radius:10px; font-size:.85rem; display:inline-flex;
  gap:8px; align-items:center; cursor:pointer; transition: transform .14s ease, background .14s ease, color .14s ease;
}
.share-btn:hover{ background: rgba(255,255,255,0.02); color:var(--text) }
.share-btn:active{ transform: scale(.95) }

.fs-btn{
  -webkit-appearance:none; appearance:none; background:transparent; border:1px solid rgba(255,255,255,0.03);
  color:var(--muted); padding:8px 10px; border-radius:10px; font-size:.85rem; display:inline-flex;
  gap:8px; align-items:center; cursor:pointer; transition: transform .14s ease, background .14s ease, color .14s ease;
}
.fs-btn:hover{ background: rgba(255,255,255,0.02); color:var(--text) }
.fs-btn[aria-pressed="true"]{ box-shadow: 0 8px 26px rgba(2,6,23,0.45); border-color: rgba(124,92,255,0.18); color:var(--accent) }

/* Toast notification */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--card);border:1px solid rgba(255,255,255,0.04);
  padding:12px 20px;border-radius:10px;color:var(--text);
  font-size:14px;box-shadow:0 8px 24px rgba(2,6,23,0.5);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  z-index:1000;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

footer{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px}
.small{color:var(--muted); font-size:.85rem}

/* background floating accent */
.orb{position:absolute; width:380px; height:380px; right:-120px; top:-100px; filter:blur(70px); opacity:.12; pointer-events:none; transform:translateY(0); animation: float 8s ease-in-out infinite}
.orb svg{width:100%; height:100%}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(10px)}100%{transform:translateY(0)}}

/* accessibility */
:focus{outline: none}
a.card-link:focus-visible{ box-shadow:0 0 0 4px rgba(124,92,255,0.14); border-color:rgba(124,92,255,0.18) }
@media (prefers-reduced-motion: reduce){ .orb, a.card-link, .links li a{ animation:none; transition:none } }

/* responsive tweaks */
@media (max-width:420px){
  body{ padding:12px; }
  .card{ width:100%; max-height: calc(100vh - 24px); padding:18px; border-radius:12px; overflow:auto; }
  .logo{width:48px;height:48px}
  .ic{width:34px;height:34px}
  .fs-btn{ display:inline-flex; padding:8px 10px; font-size:.85rem }
}