/* Demo catalogue only: no upload-engine or control styling overrides. */
.dl-page { --dl-blue:#2559e8; --dl-ink:#142440; --dl-muted:#65748b; color:var(--dl-ink); background:#fff; }
.dl-page [hidden] { display:none !important; }
.dl-container { width:min(1280px,calc(100% - 4rem)); margin-inline:auto; }
.dl-hero { padding:5rem 0 4rem; background:radial-gradient(ellipse at 85% 10%,#e3ebff,transparent 55%),#f6f8fc; border-bottom:1px solid #e1e7f2; }
.dl-eyebrow { font-size:.72rem; font-weight:800; letter-spacing:.14em; color:#315dba; }
.dl-eyebrow > span { display:inline-block; margin-left:1rem; padding:.35rem .65rem; border:1px solid #cfdbf2; border-radius:6px; color:#65748b; font-size:.65rem; letter-spacing:.05em; }
.dl-hero h1 { font-family:Sora,'Segoe UI',sans-serif; font-size:clamp(2.8rem,5vw,4.5rem); line-height:1.12; letter-spacing:-.055em; margin:1.25rem 0; }
.dl-hero h1 em { font-style:normal; color:var(--dl-blue); }
.dl-hero p { max-width:650px; font-size:1.18rem; line-height:1.75; color:#586a86; }
.dl-hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.dl-primary,.dl-secondary { display:inline-flex; align-items:center; justify-content:center; gap:1.3rem; border-radius:.55rem; padding:.85rem 1.25rem; font-size:.95rem; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; }
.dl-primary { background:#2559e8; color:#fff; box-shadow:0 8px 18px -12px #2559e8; }
.dl-primary:hover { background:#1945c4; color:#fff; }
.dl-secondary { background:#fff; color:#263e65; border-color:#cdd8e9; }
.dl-secondary:hover { color:#2559e8; border-color:#2559e8; }
.dl-stats { display:flex; flex-wrap:wrap; gap:2rem; margin-top:2.3rem; color:#65748b; font-size:.85rem; }
.dl-stats strong { color:#203b65; margin-right:.4rem; font-size:1rem; }
.dl-live { display:grid; grid-template-columns:.85fr 1.15fr; gap:4rem; align-items:center; padding-block:4.5rem; scroll-margin-top:2rem; }
.dl-page h2 { font-family:Sora,'Segoe UI',sans-serif; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.25; letter-spacing:-.04em; margin:.8rem 0 1rem; }
.dl-live-copy > p { color:var(--dl-muted); line-height:1.75; font-size:1.05rem; max-width:440px; }
.dl-live-copy ul { padding-left:1.2rem; margin:1.2rem 0; color:#536780; font-size:.88rem; line-height:1.9; }
.dl-live-copy .dl-upload-note { padding:.8rem 1rem; border-left:3px solid #cddaf4; background:#f7f9fc; font-size:.8rem; }
.dl-inline-link { display:inline-block; color:#2559e8; font-weight:700; font-size:.9rem; text-decoration:none; }
.dl-inline-link:hover { text-decoration:underline; text-underline-offset:4px; }
.dl-live-panel { min-width:0; border:1px solid #dce4f1; border-radius:.85rem; overflow:hidden; background:#fff; box-shadow:0 24px 50px -35px #12203b80; }
.dl-panel-title { display:flex; justify-content:space-between; align-items:center; gap:1rem; background:#142440; color:#e2eafd; padding:1rem 1.3rem; font-size:.85rem; font-weight:600; }
.dl-panel-title i { margin-right:.4rem; color:#9ebdff; }
.dl-live-label { font-size:.65rem; letter-spacing:.05em; padding:.2rem .5rem; background:#ffffff15; border:1px solid #ffffff25; border-radius:4px; color:#9fe3cb; }
.dl-uploader { padding:1.5rem; }
.dl-source { border-top:1px solid #e1e7f2; }
.dl-source summary { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.3rem; font-size:.8rem; font-weight:600; color:#466080; cursor:pointer; list-style:none; background:#f8faff; }
.dl-source summary::-webkit-details-marker { display:none; }
.dl-source summary::after,.dl-source[open] summary::after { position:static; border:0; width:auto; height:auto; transform:none; content:'+'; font-size:1.1rem; }
.dl-source[open] summary::after { content:'−'; }
.dl-source pre { margin:0; padding:1.3rem; background:#142440; color:#d3def3; overflow-x:auto; font-size:.75rem; line-height:1.8; }
.dl-source code { color:inherit; background:none; padding:0; overflow-wrap:normal; white-space:pre; }
.dl-recommended { padding-block:1rem 4rem; }
.dl-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:1.7rem; }
.dl-section-heading h2 { margin-bottom:0; }
.dl-featured-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.dl-featured-card { display:flex; flex-direction:column; text-decoration:none; padding:1.5rem; background:#f5f8fe; border:1px solid #e0e8f6; border-radius:.7rem; color:inherit; transition:border-color .15s,background .15s; }
.dl-featured-card:hover { background:#eef3ff; border-color:#b2c7f2; color:inherit; }
.dl-featured-number { color:#6b86b4; font-family:'IBM Plex Mono',monospace; font-size:.75rem; }
.dl-featured-card h3 { margin:1rem 0 .6rem; font-family:Sora,sans-serif; font-size:1.13rem; }
.dl-featured-card p { font-size:.92rem; line-height:1.65; color:#65748b; margin:0 0 1.3rem; }
.dl-featured-card strong { font-size:.8rem; color:#2559e8; margin-top:auto; }
.dl-catalog { padding-block:2rem 4rem; scroll-margin-top:2rem; }
.dl-tools { display:flex; align-items:flex-end; gap:1rem; background:#f4f7fc; border:1px solid #e0e7f2; padding:1.25rem; border-radius:.8rem; }
.dl-search-wrap { flex:1; min-width:0; }
.dl-tools label { display:block; font-size:.75rem; font-weight:700; color:#50627e; margin-bottom:.5rem; }
.dl-search-field { position:relative; }
.dl-search-field > i { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:#7d90ac; pointer-events:none; }
.dl-search-field input,.dl-tools select { width:100%; height:2.8rem; border:1px solid #ccd7e7; border-radius:.45rem; background:white; color:#253957; font:inherit; font-size:.9rem; padding:.6rem .8rem; }
.dl-search-field input { padding-left:2.5rem; }
.dl-category-wrap { flex:0 1 265px; min-width:0; }
.dl-reset { height:2.8rem; padding:.5rem .6rem; background:transparent; border:0; color:#2559e8; font-size:.8rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.dl-result-count { font-size:.8rem; color:#71829b; padding:.85rem .1rem; margin:0 0 .7rem; }
.dl-group { margin-bottom:2.4rem; }
.dl-group-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.9rem; padding-bottom:.7rem; border-bottom:1px solid #e0e7f2; }
.dl-group-heading h3 { font-size:1.15rem; font-family:Sora,sans-serif; letter-spacing:-.025em; margin:0; color:#203959; }
.dl-group-heading > span { font-size:.72rem; color:#8291a8; }
.dl-demo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.dl-demo-link { display:flex; align-items:center; gap:.75rem; min-width:0; padding:.8rem .9rem; text-decoration:none; border:1px solid #e1e7f0; border-radius:.5rem; color:#344c6e; background:white; font-size:.88rem; line-height:1.5; }
.dl-demo-link:hover { border-color:#a3bff1; color:#2559e8; background:#f8faff; }
.dl-demo-number { flex:0 0 1.8rem; text-align:center; font-size:.65rem; color:#7990b3; font-family:'IBM Plex Mono',monospace; background:#f2f5fa; padding:.2rem; border-radius:.3rem; }
.dl-demo-link > span:nth-child(2) { overflow-wrap:anywhere; }
.dl-demo-arrow { margin-left:auto; color:#8fa4c6; }
.dl-empty { text-align:center; border:1px dashed #cbd8ed; border-radius:.7rem; background:#f8faff; padding:3rem 1rem; }
.dl-empty h3 { font-size:1.3rem; }.dl-empty p { color:#71829b; margin-bottom:1.3rem; }
.dl-help { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:2.5rem; border:1px solid #dfe7f4; border-radius:.9rem; margin-bottom:4rem; background:#f5f8fd; }
.dl-help p { color:#65748b; line-height:1.7; margin:0; }.dl-help h2 { font-size:1.8rem; }.dl-help > a { flex-shrink:0; }
.dl-page a:focus-visible,.dl-page button:focus-visible,.dl-page summary:focus-visible,.dl-page input:focus-visible,.dl-page select:focus-visible { outline:3px solid #3477ed; outline-offset:4px; }
@media(max-width:1000px) { .dl-live { gap:2rem; grid-template-columns:1fr 1.2fr; } .dl-demo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .dl-container { width:calc(100% - 2rem); } .dl-hero { padding:3rem 0; }.dl-live { grid-template-columns:1fr; padding-block:3rem; } .dl-live-copy > p { max-width:none; } .dl-section-heading { align-items:flex-start; flex-direction:column; } .dl-featured-grid { grid-template-columns:1fr; }.dl-tools { flex-wrap:wrap; padding:1rem; }.dl-search-wrap { flex-basis:100%; }.dl-category-wrap { flex:1; }.dl-help { flex-direction:column; align-items:flex-start; padding:1.5rem; }.dl-eyebrow > span { margin:.7rem 0 0; display:table; } }
@media(max-width:480px) { .dl-demo-grid { grid-template-columns:1fr; }.dl-stats { gap:1rem; }.dl-hero h1 { font-size:2.8rem; }.dl-uploader { padding:1rem; }.dl-category-wrap { flex-basis:100%; }.dl-reset { padding-left:0; }.dl-help > a { width:100%; } }
@media(prefers-reduced-motion:reduce) { .dl-page * { scroll-behavior:auto !important; transition:none !important; } }