/* Existing Dealroom light theme. Design variance 4, motion 2, density 4.
   Screens are real saved demo screenshots or the actual read-only app preview. */
/* Reserve the existing fixed site navigation at every breakpoint. */
body.demo-gallery{padding-top:64px}
/* The featured portrait screenshot must not determine the grid row height. */
.demo-grid .featured .demo-preview{height:440px;min-height:0}
.demo-grid .featured .demo-preview img{position:absolute;inset:0;object-position:center 48%}
@media(max-width:767px){.demo-grid .featured .demo-preview{height:auto;aspect-ratio:16/10}}
*{box-sizing:border-box}body.demo-gallery{margin:0;background:var(--navy);color:var(--white);font-family:var(--font-sans);line-height:1.65}button,input,textarea{font:inherit}a{color:var(--blue-ink)}button{cursor:pointer}.gallery-shell{max-width:1280px;margin:auto;padding:0 32px 90px}.gallery-hero{padding:68px 0 42px;max-width:820px}.kicker{color:var(--eyebrow);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin:0 0 14px}h1,h2,h3{font-family:var(--font-display);line-height:1.1;letter-spacing:-.025em}h1{font-size:clamp(36px,5vw,62px);font-weight:600;margin:0 0 18px}h2{font-size:32px;font-weight:600;margin:0 0 12px}h3{font-size:23px;font-weight:600;margin:26px 0 10px}.gallery-hero>p:last-child,.guide-hero>p:not(.kicker){font-size:20px;color:var(--text-light);max-width:700px;margin-bottom:0}.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 28px}.demo-card{min-width:0;border:1px solid var(--border-light);border-radius:14px;overflow:hidden;background:var(--surface-card)}.demo-card.featured{grid-column:1/-1;display:grid;grid-template-columns:1.4fr 1fr}.demo-preview{display:block;position:relative;overflow:hidden;background:var(--navy-light);aspect-ratio:16/10;border-bottom:1px solid var(--border-light);isolation:isolate}.demo-preview img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.featured .demo-preview{aspect-ratio:auto;min-height:380px;border-bottom:0;border-right:1px solid var(--border-light)}.demo-card-copy{padding:28px 30px 30px}.featured .demo-card-copy{align-self:center}.demo-category{font-size:14px;color:var(--text-faint);margin:0 0 10px}.demo-card h2 a{color:inherit;text-decoration:none}.demo-card-copy>p:not(.demo-category){color:var(--text-light);margin:0 0 23px}.demo-actions{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 16px}.demo-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border:1px solid var(--border-mid);border-radius:8px;background:var(--surface-card);color:var(--white);font-size:14px;font-weight:600;text-decoration:none;line-height:1.4;white-space:nowrap}.demo-button.primary{background:var(--blue);border-color:var(--blue);color:var(--surface-card)}.demo-button:hover{background:var(--navy-light)}.demo-button.primary:hover{background:var(--blue-hover)}.demo-button:active{transform:translateY(1px)}.guide-link{font-size:14px;font-weight:500}.build-note{max-width:760px;margin:72px 0 0}.build-note p{color:var(--text-light)}.back-link{display:inline-block;margin:34px 0 0}.guide-hero{padding:30px 0 35px;max-width:900px}.guide-hero .demo-actions{margin-top:25px}.guide-hero+.demo-preview{max-height:600px;border:1px solid var(--border-light);border-radius:14px}.guide-summary,.build-section,.technical-guide{max-width:800px;margin:52px auto}.guide-summary p,.build-section>p,.technical-guide p{color:var(--text-light)}.build-section{padding:30px;background:var(--navy-light);border-radius:14px}.technical-guide>section{margin-top:34px}.prompt-detail{margin:24px 0 18px}.prompt-detail summary{cursor:pointer;font-weight:600}pre{font-family:var(--font-mono);font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--navy-light);padding:20px;border:1px solid var(--border-light);border-radius:8px}code{font-family:inherit}.prompt-detail pre{max-height:480px;overflow:auto}.guide-figure{margin:48px 0}.guide-figure img{width:100%;height:auto;border:1px solid var(--border-light);border-radius:14px}.guide-figure figcaption{font-size:14px;color:var(--text-faint);padding-top:12px}.live-preview iframe{position:absolute;width:200%;height:200%;transform:scale(.5);transform-origin:top left;border:0;pointer-events:none}.copy-status{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 20px;max-width:90vw;border-radius:8px;box-shadow:var(--shadow-md);background:var(--surface-card);color:var(--white);z-index:100}.copy-status:empty{display:none}dialog{color:var(--white);background:var(--surface-card);border:1px solid var(--border-mid);border-radius:14px;max-width:760px;width:90vw;padding:28px}dialog textarea{width:100%;height:45vh;margin:10px 0 20px;padding:14px;color:var(--white);background:var(--navy-light);border:1px solid var(--border-mid);border-radius:8px;font-size:14px}.skip-link{position:absolute;top:-100px;left:16px;z-index:100;background:var(--surface-card);padding:12px}.skip-link:focus{top:12px}:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@media(max-width:767px){.gallery-shell{padding:0 20px 60px}.gallery-hero{padding:40px 0 28px}.demo-grid{grid-template-columns:1fr;gap:24px}.demo-card.featured{display:block}.featured .demo-preview{aspect-ratio:16/10;min-height:0;border-right:0}.demo-card-copy{padding:24px}.build-note{margin-top:45px}.build-section{padding:22px}.guide-hero+.demo-preview{aspect-ratio:16/10}.gallery-hero>p:last-child{font-size:18px}h2{font-size:28px}}