/* Page frame from the claude.ai/design Marketplace (loads after pg.css and market.css, so it wins). */
html,body{margin:0;background:#E5E7EB;color:#111827;font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#C2410C;text-decoration:none}a:hover{color:#9A3412}
button,input,select,textarea{font-family:inherit;color:inherit}
[data-rail]::-webkit-scrollbar{display:none}
[hidden]{display:none!important}

/* The design swaps desktop and mobile markup in JavaScript; here both are rendered and CSS picks one. */
.dc-desk,.dc-mob,.dc-wide,.dc-narrow{display:contents}
.dc-mob{display:none}
@media(max-width:759px){.dc-desk,.dc-wide,.dc-narrow{display:none}.dc-mob{display:contents}}
@media(max-width:1179px){.dc-wide{display:none}}
@media(min-width:1180px){.dc-narrow{display:none}}

.dc-flash{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:95;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:999px;font-size:14px;font-weight:600;color:#fff;background:#111827;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.dc-flash.err{background:#B91C1C}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Phone: the floating chat button, its panel and the toast sit above the bottom tab bar. */
@media(max-width:759px){button[data-act=toggleChat]{bottom:92px!important}[data-if=chatOpen]>div{bottom:156px!important}[data-if=hasToast]>div{bottom:160px!important}}

.dc-disabled{opacity:.5;pointer-events:none;cursor:not-allowed}