.ly-prompt-tools {
margin: 0 0 48px;
}
.ly-prompt-search {
margin: 0 0 18px;
}
.ly-prompt-search__field {
display: flex;
align-items: center;
gap: 10px;
max-width: 560px;
padding: 0 16px;
border: 1px solid #e7ecf7;
border-radius: 14px;
background: #ffffff;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ly-prompt-search__field:focus-within {
border-color: #cdd8f2;
box-shadow: 0 0 0 3px rgba(49, 94, 251, 0.10);
}
.ly-prompt-search__icon {
position: relative;
width: 15px;
height: 15px;
flex: 0 0 auto;
}
.ly-prompt-search__icon::before {
content: "";
position: absolute;
top: 1px;
left: 1px;
width: 11px;
height: 11px;
border: 1.8px solid #98a2b3;
border-radius: 50%;
}
.ly-prompt-search__icon::after {
content: "";
position: absolute;
left: 13px;
top: 12px;
width: 6px;
height: 1.8px;
border-radius: 2px;
background: #98a2b3;
transform: rotate(45deg);
transform-origin: left center;
}
.ly-prompt-search__field input {
flex: 1 1 auto;
min-width: 0;
min-height: 48px;
border: 0;
background: transparent;
font-size: 15px;
color: #0a1020;
outline: none;
}
.ly-prompt-search__field input::placeholder {
color: #98a2b3;
}
.ly-prompt-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 14px;
}
.ly-prompt-chip {
min-height: 38px;
padding: 0 16px;
border: 1px solid #e2e8f5;
border-radius: 999px;
background: #ffffff;
color: #46536a;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.ly-prompt-chip:hover,
.ly-prompt-chip:focus-visible {
border-color: #cdd8f2;
color: #315efb;
}
.ly-prompt-chip.is-active {
border-color: #315efb;
background: #315efb;
color: #ffffff;
}
.ly-prompt-count {
margin: 0 0 14px;
color: #98a2b3;
font-size: 13px;
}
.ly-prompt-count:empty {
display: none;
}
.ly-prompt-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.ly-prompt-card {
border: 1px solid #e7ecf7;
border-radius: 16px;
background: #ffffff;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.ly-prompt-card.is-hidden {
display: none;
}
.ly-prompt-card:hover,
.ly-prompt-card:focus-within {
border-color: #cdd8f2;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
transform: translateY(-2px);
}
.ly-prompt-card__link {
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
padding: 20px;
text-decoration: none;
color: inherit;
}
.ly-prompt-card__link:focus-visible {
outline: 2px solid #315efb;
outline-offset: 2px;
border-radius: 16px;
}
.ly-prompt-card__meta {
display: flex;
}
.ly-prompt-card__category {
padding: 3px 10px;
border-radius: 999px;
background: #f2f5ff;
color: #315efb;
font-size: 12px;
font-weight: 600;
}
.ly-prompt-card__title {
margin: 0;
font-size: 17px;
line-height: 1.35;
color: #0a1020;
}
.ly-prompt-card__summary {
margin: 0;
color: #667085;
font-size: 13.5px;
line-height: 1.65;
}
.ly-prompt-card__tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
margin: 2px 0 0;
padding: 0;
}
.ly-prompt-card__tags li {
padding: 2px 9px;
border: 1px solid #e2e8f5;
border-radius: 999px;
background: #f7f9fc;
color: #475467;
font-size: 12px;
}
.ly-prompt-card__go {
margin-top: auto;
padding-top: 6px;
color: #315efb;
font-size: 13.5px;
font-weight: 600;
}
.ly-prompt-empty {
margin: 24px 0 0;
color: #667085;
font-size: 14.5px;
} .ly-prompt-detail__hero .ly-card__meta {
margin-bottom: 8px;
}
.ly-prompt-detail__body {
max-width: 860px;
}
.ly-prompt-panel {
margin: 0 0 22px;
padding: 22px;
border: 1px solid #e7ebf2;
border-radius: 16px;
background: #ffffff;
}
.ly-prompt-panel__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 14px;
}
.ly-prompt-panel h2 {
margin: 0 0 14px;
font-size: 17px;
color: #0a1020;
}
.ly-prompt-panel__head h2 {
margin: 0;
}
.ly-prompt-copy {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 18px;
border: 1px solid #315efb;
border-radius: 11px;
background: #315efb;
color: #ffffff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease;
}
.ly-prompt-copy:hover,
.ly-prompt-copy:focus-visible {
background: #244bd5;
border-color: #244bd5;
}
.ly-prompt-copy.is-copied {
background: #1a8a5a;
border-color: #1a8a5a;
}
.ly-prompt-text {
margin: 0;
padding: 18px;
border: 1px solid #e7ebf2;
border-radius: 12px;
background: #f7f9fc;
color: #26334d;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 14px;
line-height: 1.75;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
user-select: text;
-webkit-user-select: text;
}
.ly-prompt-vars {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.ly-prompt-var {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px 12px;
padding: 12px 14px;
border: 1px solid #e7ebf2;
border-radius: 12px;
background: #f9fbfe;
}
.ly-prompt-var__key {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
color: #315efb;
}
.ly-prompt-var__label {
font-size: 14px;
font-weight: 600;
color: #0a1020;
}
.ly-prompt-var__example {
color: #98a2b3;
font-size: 13px;
}
.ly-prompt-tip {
margin: 0;
color: #46536a;
font-size: 15px;
line-height: 1.7;
}
.ly-prompt-related {
margin: 0 0 48px;
}
.ly-prompt-related__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.ly-prompt-related__list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border: 1px solid #e7ebf2;
border-radius: 12px;
background: #ffffff;
text-decoration: none;
color: #26334d;
font-weight: 600;
}
.ly-prompt-related__list a:hover,
.ly-prompt-related__list a:focus-visible {
border-color: #cdd8f2;
color: #315efb;
}
.ly-prompt-related__cat {
color: #98a2b3;
font-size: 12.5px;
font-weight: 500;
} @media (max-width: 1024px) {
.ly-prompt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.ly-prompt-grid { grid-template-columns: 1fr; }
.ly-prompt-card__link { padding: 18px; }
.ly-prompt-panel { padding: 18px; }
.ly-prompt-text { padding: 14px; font-size: 13px; }
}