:root {
  --bg: #07050d;
  --ink: #f3efff;
  --ink-dim: rgba(243, 239, 255, .66);
  --line: rgba(255, 255, 255, .22);
  --glass: rgba(24, 22, 34, .55);
  --violet: #7a1ff0;
  --violet-hi: #9b3dff;
  --link: #4a2cff;
  --sans: "Space Grotesk", system-ui, sans-serif;
  /* ===== PLANET PLACEMENT — edit these numbers ===== */
  --planet-x: 68;     /* center, left to right: 0 = left edge, 50 = middle, 100 = right edge */
  --planet-y: 32;     /* center, top to bottom: 0 = top edge, 50 = middle, 100 = bottom edge */
  --planet-size: 40;  /* how big: 64 = 64% of the screen's longer side */
  /* Same three for phones */
  --planet-x-phone: 63;
  --planet-y-phone: 15;
  --planet-size-phone: 90;
  /* ================================================= */
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 400 14px/1.7 var(--mono);
  overflow-x: hidden;
}

/* Backdrop: stars, planet, moon, cursor glow. JS nudges these with the mouse. */
.stars, .planet, .moon, .glow { position: fixed; pointer-events: none; z-index: 0; will-change: transform; }
.stars {
  inset: -40px;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 140px 90px, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 90px 250px, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 300px 60px, rgba(255,255,255,.5), transparent);
  background-size: 340px 300px;
}
.stars.near {
  background-image:
    radial-gradient(1.5px 1.5px at 60px 120px, rgba(210,200,255,.85), transparent),
    radial-gradient(2px 2px at 380px 280px, rgba(255,255,255,.75), transparent),
    radial-gradient(1.5px 1.5px at 250px 40px, rgba(190,170,255,.7), transparent);
  background-size: 520px 460px;
}
.planet {
  /* Original transparent PNG; dots and stars stay behind this layer. */
  --s: calc(var(--planet-size) * 1vmax);
  width: var(--s); height: var(--s);
  left: calc(var(--planet-x) * 1vw - var(--s) / 2);
  top: calc(var(--planet-y) * 1vh - var(--s) / 2);
  background: url("../img/planet.png") center / contain no-repeat;
  background-image: image-set(url("../img/planet.webp") type("image/webp"), url("../img/planet.png") type("image/png"));
  z-index: 1;
}
.moon {
  width: 70px; height: 70px; top: 17vh; left: 14vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(150,130,190,.5), rgba(150,130,190,0) 70%);
  filter: blur(6px);
}
#dots { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.glow {
  left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 60, 255, .22), rgba(122, 60, 255, 0) 65%);
  opacity: 0; transition: opacity .4s;
}
.glow.on { opacity: 1; }

/* Top bar */
.topbar {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
}
.brand { font: 300 1.2rem var(--sans); color: var(--ink); text-decoration: none; }
nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
nav a { color: var(--ink-dim); text-decoration: none; padding: .2rem 0; border-bottom: 1px solid transparent; }
nav a:hover, nav a[aria-current] { color: var(--ink); border-color: var(--violet-hi); }

/* Stage + glass card */
.stage {
  position: relative; z-index: 2; flex: 1;
  display: grid; place-items: center; padding: 2rem 1.2rem 4rem;
}
.glass {
  width: min(100%, 600px);
  padding: 1.8rem 1.6rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(160deg, rgba(60, 50, 90, .45), var(--glass) 45%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.glass.wide { width: min(100%, 560px); }
.glass.hero { width: min(100%, 460px); }
h1 { margin: 0; font: 300 2rem/1.15 var(--sans); letter-spacing: -.01em; }
.sub { margin: .3rem 0 1.4rem; color: var(--ink-dim); font-size: .82rem; }
p { margin: 0 0 1rem; }
a { color: var(--link); }

/* Buttons + fields */
.actions { display: grid; gap: .7rem; margin-top: 1.6rem; }
.btn, .field {
  display: block; text-align: center; text-decoration: none; color: var(--ink);
  padding: .7rem 1rem; border-radius: 3px; font-size: .85rem;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .07);
  transition: background .2s, border-color .2s;
        color: #c9a8ff;
    text-decoration: none;
    font-size: .95rem;
    transition: color .2s ease;
}
.btn:hover, .field:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); }
.btn.primary { color:#fff; border-color: transparent; background: linear-gradient(90deg, #6a12d8, var(--violet-hi)); }
.btn.primary:hover { filter: brightness(1.15); }
.field { text-align: left; margin-bottom: .6rem; background: transparent; }

/* Project list */
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: .9rem 0; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: .15rem; }
.list a {
    color: #c9a8ff;
    text-decoration: none;
    font-size: .95rem;
    transition: color .2s ease;
}

.list a:hover {
    color: #e0cfff;
    text-decoration: underline;
}
.list span { color: var(--ink-dim); font-size: .82rem; }

.foot { position: relative; z-index: 2; text-align: center; padding: 1.2rem; color: var(--ink-dim); font-size: .75rem; }

:focus-visible { outline: 2px solid var(--violet-hi); outline-offset: 3px; }
@media (max-width: 560px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  :root { --planet-x: var(--planet-x-phone); --planet-y: var(--planet-y-phone); --planet-size: var(--planet-size-phone); }
}


/* ===================================================================
   PAGE BUILDER BLOCKS (used by _page-template.php and any new page)
   =================================================================== */
.glass.page { width: min(100%, 760px); }
.page h2 { margin: 1.6rem 0 .8rem; font: 300 1.5rem/1.2 var(--sans); scroll-margin-top: 1rem; }
.page h3 { margin: 1rem 0 .4rem; font: 400 1.15rem/1.3 var(--sans); }
.page h4 { margin: 1.4rem 0 .5rem; font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
.page hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 2rem 0; }
.eyebrow { margin: 0 0 .4rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #c9a8ff; }
.lead { font: 300 1.15rem/1.6 var(--sans); }
.muted { color: var(--ink-dim); font-size: .82rem; }
.center { text-align: center; }
.page code, .page kbd { font: .85em var(--mono); background: rgba(255,255,255,.08); padding: .1em .35em; border-radius: 3px; }
.page kbd { border: 1px solid var(--line); border-bottom-width: 2px; }
.page mark { background: rgba(155,61,255,.45); color: var(--ink); padding: 0 .2em; }
.page img { max-width: 100%; height: auto; vertical-align: middle; }
.tlink { color: #c9a8ff; text-decoration: none; border-bottom: 1px solid transparent; }
.tlink:hover { border-color: currentColor; }
blockquote { margin: 1.2rem 0; padding: .8rem 1.2rem; border-left: 2px solid var(--violet-hi); background: rgba(255,255,255,.04); font: 300 1.05rem/1.6 var(--sans); }
blockquote cite { display: block; margin-top: .4rem; font: .78rem var(--mono); color: var(--ink-dim); font-style: normal; }

/* Table of contents */
.toc { display: flex; flex-wrap: wrap; gap: .4rem; }
.toc a { font-size: .75rem; color: var(--ink-dim); text-decoration: none; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 99px; }
.toc a:hover { color: var(--ink); border-color: var(--violet-hi); }

/* Lists */
.bullets, .numbers, .checks { margin: 0 0 1rem; padding-left: 1.2rem; }
.bullets li::marker { color: var(--violet-hi); }
.numbers li::marker { color: #c9a8ff; font-weight: 500; }
.bullets ul { padding-left: 1.1rem; list-style: circle; }
.checks { list-style: none; padding: 0; }
.checks li { padding-left: 1.6rem; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: .35em; width: .9em; height: .9em; border: 1px solid var(--line); border-radius: 2px; }
.checks li.done::before { content: "✓"; background: var(--violet); border-color: transparent; font-size: .7em; line-height: 1.3; text-align: center; }
.checks li.done { color: var(--ink-dim); }
.meta { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.2rem; margin: 0; }
.meta dt { color: var(--ink-dim); }
.meta dd { margin: 0; }

/* Images */
.img-full { display: block; width: 100%; }
.img-left { float: left; margin: .2rem 1rem .6rem 0; }
.img-right { float: right; margin: .2rem 0 .6rem 1rem; }
.img-center { display: block; margin: 0 auto; }
.rounded { border-radius: 8px; }
.circle { border-radius: 50%; object-fit: cover; }
.shadow { box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.clearfix::after { content: ""; display: table; clear: both; }
figure { margin: 0 0 1rem; }
figcaption { margin-top: .4rem; font-size: .75rem; color: var(--ink-dim); text-align: center; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: contain; background: rgba(255,255,255,.04); border-radius: 6px; cursor: zoom-in; transition: transform .2s; }
.gallery img:hover { transform: scale(1.03); }
.zoom { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(7,5,13,.88); cursor: zoom-out; }
.zoom[hidden] { display: none; }
.zoom img { max-width: 90vw; max-height: 85vh; }

/* Links + buttons */
.link-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .6rem 0; }
.link-row .btn { display: inline-block; }
.btn.small { padding: .35rem .7rem; font-size: .75rem; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.card { padding: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; background: rgba(255,255,255,.04); }
.card img { width: 100%; height: 130px; object-fit: contain; margin-bottom: .6rem; }
.card h3 { margin-top: 0; }
.card p { font-size: .82rem; color: var(--ink-dim); }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
.tag { font-size: .7rem; padding: .15rem .55rem; border-radius: 99px; background: rgba(155,61,255,.2); color: #d9c4ff; }

/* Layout */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cols.three { grid-template-columns: repeat(3, 1fr); }
.box { padding: 1rem; border: 1px dashed var(--line); border-radius: 6px; }
.split { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; }
.spacer { height: 2rem; }
.stats div { text-align: center; padding: .8rem; background: rgba(255,255,255,.04); border-radius: 6px; }
.stats b { display: block; font: 300 1.8rem var(--sans); }
.stats span { font-size: .72rem; color: var(--ink-dim); }

/* Extras */
.note { padding: .7rem 1rem; margin-bottom: .6rem; border-radius: 4px; border-left: 3px solid #8fb4ff; background: rgba(143,180,255,.08); font-size: .85rem; }
.note.ok { border-color: #6ee7a8; background: rgba(110,231,168,.08); }
.note.warn { border-color: #ffc46b; background: rgba(255,196,107,.08); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid rgba(255,255,255,.1); }
th { color: var(--ink-dim); font-weight: 500; }
details { border: 1px solid rgba(255,255,255,.1); border-radius: 4px; margin-bottom: .5rem; padding: .6rem .9rem; }
summary { cursor: pointer; }
details p { margin: .6rem 0 0; color: var(--ink-dim); }
.tab-bar { display: flex; gap: .2rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.tab-bar button { font: inherit; color: var(--ink-dim); background: none; border: 0; border-bottom: 2px solid transparent; padding: .5rem .8rem; cursor: pointer; }
.tab-bar button[aria-selected="true"] { color: var(--ink); border-color: var(--violet-hi); }
.tab-panel { padding: .9rem .2rem; }
.code { position: relative; margin: 0 0 1rem; padding: 1rem; padding-right: 4.5rem; overflow-x: auto; background: rgba(0,0,0,.35); border-radius: 6px; font-size: .8rem; }
.code code { background: none; padding: 0; }
.copy-btn { position: absolute; top: .5rem; right: .5rem; font: .7rem var(--mono); color: var(--ink); background: rgba(255,255,255,.1); border: 1px solid var(--line); border-radius: 3px; padding: .2rem .5rem; cursor: pointer; }
.embed { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Form */
.form { display: grid; gap: .3rem; }
.form label { display: grid; gap: .3rem; font-size: .78rem; color: var(--ink-dim); }
.form label.inline { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .8rem; }
.form .field { width: 100%; font: inherit; color: var(--ink); }
.form select.field option { background: var(--bg); }
.form button { cursor: pointer; font: inherit; }

@media (max-width: 560px) {
  .cols, .cols.three, .split { grid-template-columns: 1fr; }
  .img-left, .img-right { float: none; display: block; margin: 0 auto 1rem; }
}

/* ===== LIVE PAGE BUILDER (template page only) ===== */
.pb { display: grid; gap: 1rem; }
.pb-add { display: flex; flex-wrap: wrap; gap: .35rem; }
.pb-add button, .pb-tools button, .pb-out-bar button {
  font: .72rem var(--mono); color: var(--ink); cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 4px; padding: .3rem .6rem;
}
.pb-add button:hover, .pb-tools button:hover, .pb-out-bar button:hover { border-color: var(--violet-hi); background: rgba(155,61,255,.2); }
.pb-main { display: grid; grid-template-columns: 250px 1fr; gap: 1rem; align-items: start; }
.pb-side { display: grid; gap: .8rem; position: sticky; top: 1rem; }
.pb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; max-height: 220px; overflow: auto; }
.pb-list li { display: flex; align-items: center; gap: .3rem; padding: .3rem .5rem; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; font-size: .75rem; cursor: pointer; }
.pb-list li.on { border-color: var(--violet-hi); background: rgba(155,61,255,.15); }
.pb-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-tools { display: flex; flex-wrap: wrap; gap: .3rem; }
.pb-form { display: grid; gap: .5rem; }
.pb-form label { display: grid; gap: .2rem; font-size: .7rem; color: var(--ink-dim); }
.pb-form label.inline { display: flex; align-items: center; gap: .4rem; }
.pb-form input:not([type=checkbox]), .pb-form select, .pb-form textarea {
  width: 100%; font: .78rem var(--mono); color: var(--ink); background: rgba(0,0,0,.35);
  border: 1px solid var(--line); border-radius: 4px; padding: .35rem .5rem;
}
.pb-form .hint { font-size: .65rem; color: var(--ink-dim); margin: -.2rem 0 0; }
.pb-row { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.pb-preview { min-height: 200px; padding: 1rem; border: 1px dashed var(--line); border-radius: 6px; background: rgba(0,0,0,.2); }
.pb-preview > [data-i] { outline: 1px dashed transparent; outline-offset: 4px; cursor: pointer; }
.pb-preview > [data-i]:hover { outline-color: rgba(155,61,255,.45); }
.pb-preview > [data-i].on { outline-color: var(--violet-hi); }
.pb-empty { color: var(--ink-dim); font-size: .8rem; text-align: center; padding: 2rem 0; }
.pb-out-bar { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pb-out-bar input { font: .75rem var(--mono); color: var(--ink); background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: 4px; padding: .3rem .5rem; }
.pb-out { width: 100%; height: 180px; font: .72rem/1.5 var(--mono); color: #d9c4ff; background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 6px; padding: .7rem; resize: vertical; }
@media (max-width: 720px) { .pb-main { grid-template-columns: 1fr; } .pb-side { position: static; } }
.pb-preview > [data-i]::after { content: ""; display: table; clear: both; }