:root{
  --bg: #0a0a0f;
  --bg-2: #16061a;
  --text: #f8f8ff;
  --muted: #c9b5c9;
  --accent: #ff2a68;
  --accent-2: #ff3d9c;
  --surface: rgba(255,255,255,.08);
  --surface-2: rgba(255,255,255,.14);
  --border: rgba(255,255,255,.28);
  --shadow: 0 10px 28px rgba(0,0,0,.38);
  --focus: #ffd1e8;
  --link: #ff2aa6;
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; color:var(--text)}
body{
  margin:0;
  font-size: clamp(14px, 0.9rem + 0.6vw, 18px);
  line-height: 1.5;
  background: 
    linear-gradient(135deg, rgba(255,0,96,.28), rgba(255,0,196,.22) 60%, rgba(128,0,255,.28)),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.65));
  background-blend-mode: overlay;
  color-scheme: dark;
  min-height:100%;
  isolation:isolate;
  position:relative;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.25) 1px, transparent 1px),
    radial-gradient(circle at 3px 7px, rgba(0,0,0,.12) 1px, transparent 1px);
  background-size:4px 4px, 6px 6px;
  opacity:.25;
  z-index:0;
  pointer-events:none;
  mix-blend-mode: overlay;
}
:focus{outline:0}
*,*:before,*:after{box-sizing:border-box}
header, main, footer, article, aside{z-index:1}
a{color:var(--link); text-decoration:none; cursor:pointer}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--focus); outline-offset:4px}
button{font:inherit; color:inherit; background:transparent; border:0; padding:0; margin:0; cursor:pointer}
input, textarea{font:inherit; color:inherit; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); border-radius:8px; padding:.5em .75em; outline:none}
input:focus-visible, textarea:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.img, img{max-width:100%; display:block}
.container{width:100%; max-width: clamp(720px, 92vw, 1100px); margin-inline:auto; padding-inline:1rem}
.grid{display:grid; gap:1rem}
.card{background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); border-radius:12px; padding:1rem}
.tag{font-size:.75rem; padding:.25rem .5rem; border-radius:999px; background: rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3)}
.image-frame{aspect-ratio:16/9; width:100%; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.28); box-shadow:0 6px 18px rgba(0,0,0,.28)}
.image-frame img{width:100%; height:100%; object-fit:cover; display:block;}

/* Glass panels (fallback-friendly) */
header, main, footer, section{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); border-radius:12px; padding:0.75rem 1rem; box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
@supports not (backdrop-filter: blur(10px)){
  header, main, footer, section{ background: rgba(255,255,255,.14); }
}
main{ padding:1rem 0; }

/* Hero and content layout */
header{ text-align:center; padding:1.75rem 1rem; }
header h1{ font-size: clamp(1.75rem, 2.6vw, 3rem); margin:0 0 .25rem; letter-spacing:.5px; }
header .meta{ color:var(--muted); font-size: .92em; margin-top:.25rem }

/* Article structure */
main article{ display:block; padding: .75rem; margin: 0 auto; max-width: 750px; }
.featured-image{ margin: .75rem 0; border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.28); box-shadow:0 6px 18px rgba(0,0,0,.25) }
.featured-image img{ width:100%; height: auto; display:block; }

/* Headings hierarchy inside page */
main h2{ font-size: clamp(1.4rem, 2vw + 1rem, 2.25rem); margin: .75rem 0 .5rem; color:#fff; }
main h3{ font-size: clamp(1.05rem, 1.6vw, 1.4rem); margin:.75rem 0; color:#fff; }

/* Sections content blocks */
section{ padding: .75rem 0; margin: .5rem 0; }

/* Blockquote styling for emphasis */
blockquote{ margin: .75rem 0; padding: .5rem 1rem; border-left: 3px solid var(--link); color:#fff; background: rgba(0,0,0,.15); border-radius:6px }

/* Footer / ad blocks */
.product-ad, .sponsored-page{ display:flex; align-items:center; justify-content:center; padding:.75rem; margin:.5rem 0; text-align:center; border-radius:10px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28) }
.product-ad a, .sponsored-page a{ width:100%; display:block; padding: .5rem; color:inherit; text-decoration:none; }

/* Utility & layout helpers */
.container.grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: .5rem 0 }
.main--content{ display:block; }

/* Typography helpers for readability on glass */
.content{ color:#fff; max-width: 60ch; }

/* Print styles */
@media print{
  html,body{ background: #fff; color:#000 }
  header, main, footer{ background: transparent; border: none; box-shadow:none; }
  a{ color:#000; text-decoration: underline; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}