.specimen{margin:0;overflow:hidden}.specimen-screen{position:relative;aspect-ratio:8/5;background:#13171b;overflow:hidden;border-radius:5px}.specimen-screen video{display:block;width:100%;height:100%;object-fit:contain}.preview-opener{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color:#fff;cursor:zoom-in;padding:0}.preview-opener span{position:absolute;right:10px;bottom:10px;padding:5px 8px;background:#111b;border:1px solid #fff4;border-radius:4px;font-size:10px;opacity:0;transition:opacity .15s}.preview-opener:hover span,.preview-opener:focus-visible span{opacity:1}.preview-opener:focus-visible{outline:3px solid #a8c56a;outline-offset:-4px}.specimen figcaption{padding:13px 0 16px}.preview-role{display:inline-block;font-size:9px;letter-spacing:.03em;color:#617048;background:#eef0e6;border:1px solid #dce3cc;padding:1px 6px;border-radius:3px;margin-bottom:7px}.specimen figcaption strong{display:block;font-size:14px;line-height:1.65;letter-spacing:-.02em}.specimen figcaption p{font-size:11px;color:#656d61;line-height:1.9;margin:6px 0 10px}.preview-links{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:10px}.preview-links a{text-decoration:none;border-bottom:1px solid #aeb8a0}.preview-links>span{display:block;flex-basis:100%;font:9px/1.6 Consolas,monospace;color:#858c7f}.category-card>.specimen{padding:0 13px}.category-card>.specimen figcaption{padding:12px 3px 14px}.category-card>.specimen figcaption p{min-height:42px}.category-card .category-body{border-top:1px solid #e3e7da;padding-top:14px}.category-card .category-body p{min-height:0}.project-card .specimen{margin-bottom:10px;border-bottom:1px solid #e3e7da}.project-card .project-summary{min-height:0}.project-card .project-top{margin-top:12px}#preview-toggle{border:1px solid #b6c1a8;background:transparent;padding:6px 13px;font-size:11px;border-radius:5px;white-space:nowrap;min-height:34px}.list-status{justify-content:flex-start;gap:15px}.list-status #clear-filters{margin-left:auto}.all-previews{font-weight:700;font-size:12px;display:inline-block;margin-left:12px;text-decoration:none;color:#415331}.demo-note{font-size:11px;line-height:2}.preview-dialog{padding:18px;border:1px solid #a8b49a;border-radius:12px;background:#f5f2ec;color:#1f281d;width:min(1000px,calc(100vw - 30px));max-height:95dvh;overflow:auto}.preview-dialog::backdrop{background:#0b111be8;backdrop-filter:blur(8px)}.preview-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 0 13px}.preview-dialog-head h2{font-size:19px;margin:0;line-height:1.6}.preview-close{border:1px solid #b5bfa8;background:transparent;border-radius:5px;padding:5px 12px;font-size:12px;white-space:nowrap}.preview-dialog video{display:block;width:100%;aspect-ratio:8/5;object-fit:contain;background:#0e0f12;border-radius:6px}.preview-dialog-description{font-size:13px;line-height:1.9;margin:15px 0 10px}.preview-dialog-links{display:flex;gap:22px;font-size:12px;padding-bottom:2px}.preview-pending{font-size:12px;color:#777;padding:40px 10px}.project-grid{gap:21px}.hero-description{max-width:560px}@media(max-width:520px){.category-card>.specimen{padding-inline:13px}.project-card{padding-inline:14px}.specimen figcaption strong{font-size:16px}.specimen figcaption p{font-size:12px}.preview-opener span{opacity:1;font-size:9px}.all-previews{margin:8px 0 0;display:block}.preview-dialog{padding:12px}.preview-dialog-head h2{font-size:15px}.preview-dialog-description{font-size:12px}.list-status{flex-wrap:wrap}.list-status p{font-size:11px}.list-status #clear-filters{font-size:10px}.preview-dialog video{max-height:62dvh}}@media(prefers-reduced-motion:reduce){.preview-opener span{transition:none}}

.preview-live-opener { border:1px solid #81926d; border-radius:5px; padding:7px 10px; background:#e8eddd; color:#314126; font-family:inherit; font-size:11px; font-weight:600; line-height:1.5; cursor:pointer }
.preview-live-opener:hover { background:#dae5c6 }
.preview-live-opener:focus-visible,.preview-modes button:focus-visible { outline:3px solid #81926d; outline-offset:3px }
.preview-dialog [hidden] { display:none!important }
.preview-dialog.is-live { width:min(1280px,calc(100vw - 30px)) }
.preview-dialog.is-live .preview-dialog-head { position:sticky; top:0; z-index:3; background:#f5f2ec }
.preview-modes { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-bottom:12px }
.preview-modes button { border:1px solid #b5bfa8; background:transparent; color:#35442b; border-radius:5px; padding:7px 12px; font:inherit; font-size:12px; cursor:pointer }
.preview-modes button[aria-pressed=true] { background:#35442b; color:#fff; border-color:#35442b }
.dialog-site { margin-left:auto; color:#536844; font-size:12px }
.preview-site-wrap { position:relative }
.preview-site-wrap iframe { display:block; border:1px solid #d9dfce; border-radius:6px; width:100%; height:clamp(480px,68dvh,650px); background:#f3f2ee }
.preview-site-status { position:absolute; top:12px; left:15px; margin:0; z-index:1; padding:6px 10px; background:#f5f2ec; font-size:12px; color:#626c58; pointer-events:none }
@media(max-width:760px) {
  .preview-site-wrap iframe { height:650px }
  .preview-dialog-links { flex-wrap:wrap; gap:12px }
  .dialog-site { flex-basis:100%; margin-left:0; padding-top:4px }
}

/* Put the original tool and its role before its functional demo. */
.project-card .project-top{margin-top:0}.project-card .project-summary{margin-bottom:16px}.project-card .specimen{margin-top:15px;margin-bottom:0;border-bottom:0}.specimen figcaption .preview-scope{font-size:10px;line-height:1.85;color:#68725f;border-left:2px solid #dce3cc;padding-left:8px;margin:9px 0 13px}.preview-scope b{font-size:9px;display:block;color:#59674d}.category-demo-tool{font-size:11px;font-weight:600;line-height:1.7;margin:0;padding:0 16px 10px}.category-demo-tool a{text-decoration:none}.category-demo-tool a:hover{text-decoration:underline}