html { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial; }
.glass { backdrop-filter: saturate(180%) blur(10px); }
:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 6px; }
a:focus-visible, button:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: 6px; }
.anchor { scroll-margin-top: 88px; }

/* Prose (blog) */
.prose-note { line-height: 1.7; }
.prose-note h2 { font-size: 1.4rem; font-weight: 700; margin: 1.6rem 0 .6rem; }
.prose-note h3 { font-size: 1.15rem; font-weight: 700; margin: 1.3rem 0 .5rem; }
.prose-note p { margin: .8rem 0; }
.prose-note ul { list-style: disc; padding-left: 1.4rem; margin: .8rem 0; }
.prose-note ol { list-style: decimal; padding-left: 1.4rem; margin: .8rem 0; }
.prose-note a { color: #2563eb; text-decoration: underline; }
.prose-note code { background: rgba(100,116,139,.15); padding: .1rem .35rem; border-radius: .35rem; font-size: .9em; }
.prose-note pre { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: .75rem; overflow-x: auto; margin: 1rem 0; }
.prose-note pre code { background: none; padding: 0; }
.prose-note blockquote { border-left: 3px solid #3b82f6; padding-left: 1rem; color: #64748b; margin: 1rem 0; }
.prose-note table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose-note th, .prose-note td { border: 1px solid rgba(100,116,139,.3); padding: .5rem .75rem; text-align: left; }

/* --- Markdown design shortcodes --- */
.md-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 1.25rem 0; border-radius: .9rem; overflow: hidden; }
.md-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.md-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; margin: 1.25rem 0; }
.md-gallery img { width: 100%; height: 140px; object-fit: cover; border-radius: .6rem; cursor: zoom-in; }
.md-callout { border-radius: .8rem; padding: .85rem 1rem; margin: 1.1rem 0; border-left: 4px solid; }
.md-callout > :first-child { margin-top: 0; } .md-callout > :last-child { margin-bottom: 0; }
.md-callout.md-info    { background: rgba(59,130,246,.10); border-color: #3b82f6; }
.md-callout.md-note    { background: rgba(100,116,139,.12); border-color: #64748b; }
.md-callout.md-tip     { background: rgba(139,92,246,.10); border-color: #8b5cf6; }
.md-callout.md-success { background: rgba(16,185,129,.10); border-color: #10b981; }
.md-callout.md-warning { background: rgba(245,158,11,.12); border-color: #f59e0b; }

/* --- Admin media picker --- */
.mp-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1100; display: none; align-items: center; justify-content: center; padding: 1rem; }
.mp-modal { background: #fff; width: min(960px, 100%); max-height: 88vh; border-radius: 1rem; display: flex; flex-direction: column; overflow: hidden; }
.dark .mp-modal { background: #0f172a; color: #e2e8f0; }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; overflow-y: auto; padding: 1rem; }
.mp-tile { position: relative; border: 2px solid transparent; border-radius: .6rem; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #f1f5f9; }
.dark .mp-tile { background: #1e293b; }
.mp-tile img { width: 100%; height: 100%; object-fit: cover; }
.mp-tile.selected { border-color: #3b82f6; }
.mp-tile .mp-check { position: absolute; top: 4px; right: 4px; background: #3b82f6; color: #fff; border-radius: 999px; width: 20px; height: 20px; font-size: 12px; display: none; align-items: center; justify-content: center; }
.mp-tile.selected .mp-check { display: flex; }
.mp-cap { position: absolute; bottom: 0; left: 0; right: 0; font-size: 10px; padding: 2px 4px; background: rgba(0,0,0,.55); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* gallery field thumbnails in the form */
.gal-thumbs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.gal-thumb { position: relative; width: 84px; height: 84px; border-radius: .5rem; overflow: hidden; border: 1px solid rgba(100,116,139,.3); cursor: grab; }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumb button { position: absolute; top: 2px; right: 2px; background: rgba(220,38,38,.9); color: #fff; border: 0; border-radius: 999px; width: 18px; height: 18px; font-size: 11px; line-height: 1; cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  .fade-up { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
  .fade-up.reveal { opacity: 1; transform: none; }
  .stagger > * { opacity: 0; transform: translateY(10px); }
  .stagger.reveal > * { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
  .stagger.reveal > *:nth-child(1) { transition-delay: .05s; }
  .stagger.reveal > *:nth-child(2) { transition-delay: .1s; }
  .stagger.reveal > *:nth-child(3) { transition-delay: .15s; }
  .stagger.reveal > *:nth-child(4) { transition-delay: .2s; }

  .float-bg::before, .float-bg::after {
    content: ""; position: absolute; width: 14rem; height: 14rem; border-radius: 9999px;
    filter: blur(40px); opacity: .25; z-index: -1;
    background: radial-gradient(circle at 30% 30%, #60a5fa, transparent 60%);
    animation: drift 14s ease-in-out infinite alternate;
  }
  .float-bg::after {
    width: 16rem; height: 16rem; left: auto; right: 10%; top: 30%;
    background: radial-gradient(circle at 70% 50%, #34d399, transparent 60%);
    animation-duration: 18s;
  }
  @keyframes drift { from { transform: translate(0,0); } to { transform: translate(20px,-20px); } }

  .hdr-grad {
    background: linear-gradient(90deg, rgba(99,102,241,.08), rgba(59,130,246,.08), rgba(16,185,129,.08));
    background-size: 200% 100%; animation: gradMove 16s linear infinite;
  }
  @keyframes gradMove { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

  @keyframes kenburns { from { transform: scale(1) translateY(0); } to { transform: scale(1.06) translateY(-6px); } }
  .kenburns { animation: kenburns 8s ease-in-out infinite alternate; will-change: transform; }
}