/* The AI theme loads only on the hub, guides, post directory, and homepage. */
.ai-site .brand-name { color: #c4b5fd; }
@media (forced-colors: active) {
}
.ai-select { position: relative; min-width: 0; }
.ai-select > label { display: block; margin-bottom: 9px; color: #bfc1d6; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { }
.ai-card .post-card-body .ai-card-context { font-size: 11px; color: #c4bdd8; }
.js [data-workshop-controls][hidden] { display: block !important; visibility: hidden; }
@media (max-width: 700px) { }
@media screen {
   body .ai-spotlight h2 > span { background: linear-gradient(100deg, #c4b5fd, #d4e4ff, #f6c7df, #c4b5fd); background-size: 200% 100%; background-clip: text; color: transparent; animation: ai-color 4s ease-out; }
  @keyframes ai-color { from { background-position: 100% 0; } to { background-position: 0 0; } }
}
.ai-site { background: #0b0d14; color: #ececf5; }
.ai-site .brand { color: #ececf5; }
.ai-site .brand-mark { color: #c4b5fd; }
.ai-site .main-nav { color: #20201e; }
 .ai-spotlight a:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 5px; }
.ai-kicker { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #bfc1d6; }
.ai-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ai-kicker > span:first-child { font-size: 24px; color: #c4b5fd; }
.ai-button { display: inline-flex; justify-content: center; align-items: center; gap: 18px; border: 1px solid #d5c9ff; border-radius: 12px; background: #c4b5fd; color: #171126; padding: 15px 20px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s; }
.ai-button:hover { background: #ded3ff; }
.learning-invitation .ai-button { color: #171126; text-decoration: none; }
.ai-button .ui-icon, .ai-subtle-link .ui-icon { width: 17px; height: 17px; }
.ai-subtle-link { display: inline-flex; align-items: center; gap: 12px; color: #e2dcf9; font-size: 13px; }
.ai-subtle-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.ai-tool-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; border: 1px solid #a8a0c34d; background: #2b283b; color: #ddd3fc; font: 600 12px/1 "DM Sans", sans-serif; }
.ai-tool-mark[data-tool=chatgpt] { color: #aff0d0; background: #17392f; }
.ai-tool-mark[data-tool=claude] { color: #f8ceb3; background: #3e2d26; }
.ai-tool-mark[data-tool=gemini] { color: #c4d8ff; background: #253451; }
.ai-tool-mark[data-tool=copilot] { color: #e6d7ff; background: #382b4b; }
.ai-select select { width: 100%; height: 100%; padding: 15px 12px; border: 1px solid #4c4f62; border-radius: 10px; background: #151822; color: #e1dfec; font-size: 12px; }
.post-card.ai-card { border: 1px solid #343746; border-radius: 16px; background: #141720; color: #eeeaf5; --post-ink: #ccbbff; }
.post-card.ai-card:hover { border-color: #9782c1; transform: translateY(-3px); box-shadow: 0 12px 40px #0003; }
.ai-card-top { display: flex; align-items: center; gap: 10px; padding: 23px 23px 0; color: #e4e1ee; font-size: 12px; font-weight: 500; }
.ai-card-top small { display: block; font-size: 10px; font-weight: 400; color: #aeb1c5; margin-top: 4px; }
.ai-card-arrow { margin-left: auto; font-size: 20px; color: #b8a9d6; }
.ai-card .post-card-body { padding: 23px; }
.ai-card .post-card-meta { font-size: 10px; color: #b7b9cc; }
.ai-card .post-card-meta > span:first-child { color: #c9b8fa; font-weight: 500; }
.ai-card :is(h2, h3) { color: #f0edf8; font-size: 24px; font-weight: 500; letter-spacing: -.04em; line-height: 1.25; margin-top: 15px; }
.ai-card .post-card-body > p { color: #b6b8ca; font-size: 13px; line-height: 1.8; }
.ai-card .post-card-bottom { border-top: 1px solid #303342; padding-top: 17px; margin-top: 24px; color: #b1b3c6; font-size: 10px; }
.ai-card .post-card-bottom > span { color: #c9b8fa; }
.ai-spotlight { margin-block: 30px 55px; padding: 48px; border-radius: 24px; background: radial-gradient(ellipse at 90% 0%, #38284c, transparent 65%), #0e111b; color: #f1edf9; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; }
.ai-spotlight h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 500; letter-spacing: -.05em; line-height: 1.13; margin-top: 18px; }
.ai-spotlight h2 > span { color: #c4b5fd; }
.ai-spotlight p:not(.ai-kicker) { font-size: 14px; line-height: 1.9; max-width: 550px; color: #c2bdd2; margin-top: 18px; }
.ai-spotlight .ai-button { margin-top: 25px; }
.ai-spotlight-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-self: center; }
.ai-spotlight-tools a { display: flex; align-items: center; gap: 10px; padding: 16px; border: 1px solid #51435d; border-radius: 10px; color: #e7dff6; font-size: 12px; }
.ai-spotlight-tools a:hover { background: #30273d; }
.ai-spotlight-tools code { margin-left: auto; color: #d2bfff; font-size: 10px; }
@media (max-width: 1200px) {
}
@media (max-width: 900px) {
  .ai-spotlight { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ai-kicker { font-size: 9px; gap: 8px; }
  .ai-select select { font-size: 14px; }
  .ai-spotlight { padding: 27px 22px; gap: 25px; margin-block: 20px 35px; }
  .ai-spotlight-tools { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .ai-site { background: white; color: #20201e; }
}
@media (max-width: 850px) { }