/* Theme 10 — Dynamic Modern Web. Glassmorphism over a gradient mesh,
   asymmetric bento grid (dense auto-flow with mixed tile sizes), pill
   filters with glow, smooth hover micro-interactions. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

.theme-dynamic{--dm-ink:#0f0f14;--dm-muted:#6b6b7a;--dm-glass:rgba(255,255,255,.65);--dm-glass-line:rgba(255,255,255,.4);--dm-grad:linear-gradient(135deg,#7c3aed,#ec4899,#f59e0b);font-family:'Inter',sans-serif;color:var(--dm-ink);position:relative;isolation:isolate;}
.theme-dynamic::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 15% 0%,rgba(124,58,237,.14),transparent 45%),radial-gradient(circle at 85% 20%,rgba(236,72,153,.12),transparent 45%),radial-gradient(circle at 50% 100%,rgba(245,158,11,.1),transparent 50%);}
[data-theme="dark"] .theme-dynamic{--dm-ink:#f1f1f5;--dm-muted:#9a9aa8;--dm-glass:rgba(24,24,32,.6);--dm-glass-line:rgba(255,255,255,.08);}
.theme-dynamic *{box-sizing:border-box;}
.theme-dynamic a{color:inherit;text-decoration:none;}
.theme-dynamic h1,.theme-dynamic h2,.theme-dynamic h3{font-family:'Sora',sans-serif;font-weight:700;}
.theme-dynamic .dm-wrap{max-width:1180px;margin:0 auto;padding:0 20px 60px;}
.theme-dynamic .dm-gradient-text{background:var(--dm-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

.theme-dynamic .dm-head{padding:34px 0 20px;}
.theme-dynamic .dm-head h1{font-size:clamp(26px,4.5vw,42px);}
.theme-dynamic .dm-pills{display:flex;gap:8px;overflow-x:auto;padding:18px 0;}
.theme-dynamic .dm-pills a{white-space:nowrap;font-size:13px;font-weight:600;padding:9px 18px;border-radius:999px;background:var(--dm-glass);backdrop-filter:blur(10px);border:1px solid var(--dm-glass-line);box-shadow:0 4px 14px rgba(0,0,0,.04);}
.theme-dynamic .dm-pills a.active{background:var(--dm-grad);color:#fff;border-color:transparent;}

.theme-dynamic .dm-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:140px;grid-auto-flow:dense;gap:16px;}
.theme-dynamic .dm-tile{position:relative;border-radius:22px;overflow:hidden;grid-column:span 2;grid-row:span 2;background:var(--dm-glass);backdrop-filter:blur(10px);border:1px solid var(--dm-glass-line);box-shadow:0 8px 28px rgba(20,10,50,.08);transition:transform .25s,box-shadow .25s;}
.theme-dynamic .dm-tile:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(124,58,237,.18);}
.theme-dynamic .dm-tile.dm-sm{grid-column:span 1;grid-row:span 1;}
.theme-dynamic .dm-tile.dm-wide{grid-column:span 2;grid-row:span 1;}
.theme-dynamic .dm-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;}
.theme-dynamic .dm-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 55%);}
.theme-dynamic .dm-tile-text{position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff;z-index:1;}
.theme-dynamic .dm-tile.dm-sm .dm-tile-text{padding:12px;}
.theme-dynamic .dm-tile-text .cat{font-size:10px;font-weight:700;text-transform:uppercase;background:var(--dm-grad);display:inline-block;padding:3px 10px;border-radius:999px;margin-bottom:6px;}
.theme-dynamic .dm-tile-text h3{font-size:17px;line-height:1.25;color:#fff;}
.theme-dynamic .dm-tile.dm-sm .dm-tile-text h3{font-size:13.5px;}
.theme-dynamic .dm-tile-text .meta{font-size:11px;color:#e5e5ea;margin-top:6px;}

@media(max-width:900px){.theme-dynamic .dm-bento{grid-template-columns:repeat(2,1fr);}.theme-dynamic .dm-tile{grid-column:span 2 !important;grid-row:span 2 !important;}}

/* Article */
.theme-dynamic .dm-art-head{max-width:820px;margin:30px auto 0;text-align:center;}
.theme-dynamic .dm-art-head h1{font-size:clamp(26px,4.5vw,42px);margin:14px 0;}
.theme-dynamic .dm-chip-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.theme-dynamic .dm-chip-row span{background:var(--dm-glass);backdrop-filter:blur(10px);border:1px solid var(--dm-glass-line);padding:6px 14px;border-radius:999px;font-size:12.5px;color:var(--dm-muted);}
.theme-dynamic .dm-art-hero{width:100%;max-height:440px;object-fit:cover;border-radius:24px;margin:28px 0;}
.theme-dynamic .dm-content{max-width:760px;margin:0 auto;font-size:17px;line-height:1.85;}
.theme-dynamic .dm-content h2{font-size:24px;margin:32px 0 12px;}
.theme-dynamic .dm-content img{width:100%;border-radius:18px;margin:20px 0;}
.theme-dynamic .dm-content a{color:#7c3aed;font-weight:600;}
.theme-dynamic .dm-glass-box{background:var(--dm-glass);backdrop-filter:blur(10px);border:1px solid var(--dm-glass-line);border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(20,10,50,.06);}
.theme-dynamic .dm-related-title{text-align:center;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--dm-muted);margin:44px 0 18px;font-weight:700;}