/* Adapted from the downloaded StyleKit Bento Grid showcase; preview only. */
* { box-sizing: border-box; letter-spacing: 0 !important; }
body { margin: 0; background: #fafafa; color: #202329; font-family: system-ui, 'Microsoft YaHei', sans-serif; }
a { color: inherit; text-decoration: none; }
main, footer { width: min(1120px, calc(100% - 48px)); margin: auto; }
.recent a:hover { color: #2563eb; }
.portal-intro { padding: 35px 0 26px; }
.eyebrow { color: #2563eb; font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.portal-intro h1 { font-size: 32px; line-height: 1.35; font-weight: 750; margin: 0 0 12px; }
.portal-intro > p:last-child { color: #636a77; font-size: 15px; }
.portal-grid { max-width: none; margin: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.portal-grid .portal-card { grid-column: auto; grid-row: auto; min-height: 0; background: #f2f5fa; }
.portal-grid .sketch { background: #edf3ff; }
.portal-grid .complex-part { background: #edf8f2; }
.portal-grid .assembly { background: #f4f5f7; }
.category-placeholder { height: 190px; width: 100%; display: grid; place-items: center; color: #717784; font-size: 15px; }
.portal-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 9px; padding: 24px; min-width: 0; min-height: 160px; border: 1px solid #e5e7eb; border-radius: 18px; background-image: none; text-align: left; color: #202329; }
.portal-card h2 { font-size: 21px; line-height: 1.4; font-weight: 700; margin: 0; }
.portal-card p { font-size: 14px; line-height: 1.7; margin: 0; color: #626977; }
.portal-icon { color: #2563eb; }
.portal-icon svg { width: 24px; height: 24px; stroke: currentColor; }
.portal-action { font-size: 13px; font-weight: 600; margin-top: auto; padding-top: 8px; }
.practice { background: #edf3ff; grid-column: span 2; grid-row: span 2; }
.practice-image { width: 100%; height: 190px; object-fit: contain; margin: 5px 0; mix-blend-mode: multiply; }
.category-line-art { height: 210px; padding: 10px 0; }
.portal-meta { font-size: 12px; color: #52617d; }
.docs { background: #f1f2f5; grid-column: span 2; }
.tools { background: #edf8f2; }
.tools .portal-icon { color: #237b53; }
.equipment { background: #f4f5f7; }
.community { grid-column: span 2; background: #fff; min-height: 170px; }
.tutorials { grid-column: span 2; background: #fff; min-height: 170px; }
.pending { cursor: default; }
.pending:hover { transform: none; box-shadow: none; }
.pending .portal-action { color: #687181; font-weight: 400; }
.recent { padding: 26px 0; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.recent h2 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.recent p, .recent a { font-size: 14px; color: #626977; }
footer { padding: 22px 0; border-top: 1px solid #e4e6eb; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #737986; }
a:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
@media(max-width: 640px) {
  main, footer { width: calc(100% - 32px); }
  .portal-intro h1 { font-size: 27px; }
  .portal-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .portal-card { padding: 19px; }
  .practice { grid-row: auto; }
  .practice-image { height: 180px; }
  .recent { flex-wrap: wrap; }
}
@media(prefers-reduced-motion: reduce) { .portal-card { transition: none; } .portal-card:hover { transform: none; } }