.lab-directory .lab-directory-title { padding-top:40px; margin-bottom:22px; }
.lab-category-filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.lab-category-filter button { border:1px solid var(--line); border-radius:30px; padding:7px 20px; background:transparent; color:var(--muted); font:inherit; font-size:13px; cursor:pointer; }
.lab-category-filter button[aria-pressed="true"] { background:var(--green); border-color:var(--green); color:white; }
.lab-category { margin-bottom:38px; }
.category-title { display:flex; gap:14px; align-items:baseline; font-size:20px; font-weight:500; margin:0 0 15px; }
.category-title span { color:var(--muted); font-size:11px; font-weight:400; }
.experiment-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.lab-directory .experiment-card { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); padding:20px; background:#fafbf7; gap:14px 18px; align-items:start; }
.lab-directory .experiment-card + .experiment-card { margin-top:0; }
.lab-directory .experiment-details { display:flex; flex-direction:column; min-width:0; gap:14px; }
.lab-directory .experiment-heading { grid-column:1/-1; }
.lab-identity, .lab-heading p.lab-identity { margin:0 0 6px; color:#788564; font-size:11px; line-height:1.5; letter-spacing:.05em; }
.lab-directory .experiment-card h3 { margin:0; font-size:17px; line-height:1.65; font-weight:500; }
.lab-directory .experiment-tag-label { margin:0 0 6px; color:var(--muted); font-size:10px; letter-spacing:.06em; }
.lab-directory .experiment-tags { gap:5px; }
.lab-directory .experiment-tags span { padding:3px 6px; font-size:10px; line-height:1.55; white-space:nowrap; }
.lab-directory .experiment-course-tags span { color:#7e7044; background:#f5f2e8; border-color:#e7e0cc; }
.lab-directory .experiment-preview { position:relative; align-self:center; min-width:0; overflow:hidden; border:1px solid #e6e9df; border-radius:4px; aspect-ratio:var(--preview-ratio); background:#fafbf8; }
.lab-directory .experiment-preview img { position:absolute; display:block; width:var(--preview-width); max-width:none; height:auto; left:var(--preview-left); top:var(--preview-top); }
.lab-directory .experiment-actions { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
.lab-directory .experiment-discuss, .lab-directory .experiment-enter { display:inline-flex; justify-content:center; align-items:center; min-height:38px; margin:0; padding:8px 12px; border:1px solid #c5cebc; border-radius:4px; font:inherit; font-size:11px; line-height:1.5; white-space:nowrap; text-decoration:none; cursor:pointer; }
.lab-directory .experiment-discuss { color:var(--green); background:transparent; }
.lab-directory .experiment-discuss:hover { background:#eef2e8; }
.lab-directory .experiment-enter { gap:12px; color:#fff; background:var(--green); border-color:var(--green); font-size:12px; }
.lab-directory .experiment-enter:hover { filter:brightness(.92); }
.lab-directory .experiment-enter > span { font-size:17px; }
.lab-directory .experiment-actions > :focus-visible, .background-dialog :focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.lab-directory [hidden] { display:none !important; }
.lab-switcher > div { max-height:min(470px,70vh); overflow:auto; overscroll-behavior:contain; }
.switcher-category { padding:9px 9px 4px; color:#8a907e; font-size:10px; border-top:1px solid #e3e8db; }
.switcher-code { display:block; color:#788564; font-size:10px; line-height:1.5; }
body.background-open { overflow:hidden; }
.background-dialog { width:min(720px,calc(100% - 32px)); max-width:none; max-height:84vh; max-height:84dvh; margin:auto; padding:0; overflow:hidden; border:1px solid #d5dccc; border-radius:10px; color:var(--ink); background:var(--paper,#fff); box-shadow:0 20px 80px #26302033; }
.background-dialog[open] { display:flex; flex-direction:column; }
.background-dialog::backdrop { background:#28312566; }
.background-heading { display:flex; flex-shrink:0; justify-content:space-between; align-items:flex-start; gap:16px; padding:22px 28px 18px; border-bottom:1px solid var(--line); background:#f8faf4; }
.background-heading p { margin:0 0 6px; font-size:11px; color:#788564; letter-spacing:.03em; }
.background-heading h2 { margin:0; font-size:23px; line-height:1.4; font-weight:500; }
.background-close { display:flex; flex-shrink:0; justify-content:center; align-items:center; width:40px; height:40px; padding:0; border:1px solid #d5dccc; border-radius:50%; color:var(--green); background:transparent; font:inherit; font-size:25px; line-height:1; cursor:pointer; }
.background-close:hover { background:#edf2e6; }
.background-body { min-height:0; padding:24px 28px; overflow:auto; overscroll-behavior:contain; font-size:14px; line-height:1.9; }
.background-body p { margin:0 0 12px; }
.background-body .background-intro { font-size:15px; }
.background-body h3 { margin:24px 0 12px; font-size:15px; font-weight:500; color:var(--green); }
.background-law + .background-law { margin-top:18px; }
.background-law h4 { margin:0 0 6px; font-size:14px; font-weight:500; }
.background-body .background-formula { padding:9px 12px; border-left:2px solid #acbc97; border-radius:0 3px 3px 0; background:#f4f7ee; font-size:13px; overflow-wrap:anywhere; }
.background-questions { padding:1px 16px 12px; margin-top:24px; border:1px solid #e0e6d6; border-radius:6px; background:#fafbf7; }
.background-questions h3 { margin-top:14px; }
.background-questions ol { margin:0; padding-left:22px; }
.background-questions li + li { margin-top:8px; }
.background-body .background-prompt { margin:14px 0 0; font-size:12px; color:var(--muted); }
.background-body .background-source { margin:20px 0 0; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.background-source a { color:var(--green); text-underline-offset:3px; }
@media(max-width:760px) { .experiment-grid { grid-template-columns:1fr; } }
@media(max-width:450px) { .lab-directory .experiment-card { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); padding:16px; gap:14px; } .lab-directory .experiment-card h3 { font-size:16px; } .lab-directory .experiment-details { gap:12px; } .lab-category-filter { gap:6px; } .lab-category-filter button { padding:7px 14px; } }
@media(max-width:450px) {
  .lab-directory .experiment-actions { gap:8px; }
  .lab-directory .experiment-discuss, .lab-directory .experiment-enter { padding:8px 10px; }
  .background-dialog { width:calc(100% - 24px); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); }
  .background-heading { padding:18px; gap:8px; }
  .background-heading h2 { font-size:20px; }
  .background-heading p { font-size:10px; }
  .background-body { padding:18px; font-size:13px; }
  .background-body .background-intro { font-size:14px; }
  .background-questions { padding-inline:12px; }
}
@media(max-width:360px) {
  .lab-directory .experiment-discuss, .lab-directory .experiment-enter { padding-inline:8px; }
}