:root {
  --bg: #141214;
  --fg: #e9dce2;
  --dim: #8f8389;
  --accent: #ff4fc8;
  --soft: #ffd6e0;
  --key: #ff8fd8;
  --line: #342d31;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); color: var(--fg); }

body {
  /* scales smoothly from phones to 3440px ultrawide */
  font: clamp(14px, 0.45vw + 11px, 22px)/1.7 "Geist", "Google Sans Flex", system-ui, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(900px 600px at 20% 40%, rgba(255, 79, 200, 0.07), transparent 70%),
    var(--bg);
}

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.stage {
  position: relative;
  z-index: 1;
  max-width: clamp(1100px, 62vw, 1900px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 72px) clamp(16px, 2vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.art { position: relative; }
.art canvas { position: relative; width: 100%; height: auto; display: block; }
.glow {
  position: absolute;
  inset: -10% -6%;
  filter: blur(24px);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 79, 200, 0.22), rgba(255, 79, 200, 0.06) 60%, transparent);
  animation: breathe 5s cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
@keyframes breathe { from { opacity: 0.5; transform: scale(0.96); } to { opacity: 1; transform: scale(1.04); } }

header { display: flex; justify-content: space-between; align-items: baseline; }
h1 { margin: 0; font-size: 2.3em; letter-spacing: -0.02em; line-height: 1.2; }
.lang { font-family: "JetBrainsMono Nerd Font", ui-monospace, monospace; font-size: 0.87em; color: var(--dim); }
.lang button { background: none; border: 0; padding: 0; font: inherit; color: var(--dim); cursor: pointer; }
.lang button.on { color: var(--accent); font-weight: 700; }

.tabs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.tabs button {
  position: relative;
  z-index: 1;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  padding: 0.3em 1.2em;
  font: 0.87em "JetBrainsMono Nerd Font", ui-monospace, monospace;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s;
}
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { color: #1a1218; border-color: transparent; }
.pill {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(255, 79, 200, 0.45);
  opacity: 0;
}
.pill.ready { opacity: 1; transition: transform 0.35s cubic-bezier(.22, 1, .36, 1), width 0.35s cubic-bezier(.22, 1, .36, 1), height 0.35s; }

.pane { animation: fade 0.35s ease; min-height: 190px; }
.pane[hidden] { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

p { margin: 0 0 12px; }
.meta { font: 0.87em/1.7 "JetBrainsMono Nerd Font", ui-monospace, monospace; color: var(--dim); }

.fetch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2em 2em;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(20, 18, 20, 0.6);
  font: clamp(10.5px, 0.8em, 18px)/1.6 "JetBrainsMono Nerd Font", ui-monospace, monospace;
}
.fetch pre { margin: 0; font: inherit; }
.fetch .info { overflow-x: auto; }
.fetch .distro {
  font-size: 0.8em;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(255, 79, 200, 0.45);
  margin-inline: auto;
}
.k { color: var(--key); }

.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(6em, 1fr)); gap: 1em 0.4em; }
.ic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  background: none;
  border: 0;
  padding: 0.3em 0;
  color: var(--dim);
  font: 0.8em "JetBrainsMono Nerd Font", ui-monospace, monospace;
  cursor: default;
  transition: color 0.2s;
}
.ic .box { height: 5.2em; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5em; }
.ic pre {
  margin: 0;
  font: 0.45em/0.9 "JetBrainsMono Nerd Font", ui-monospace, monospace;
  color: var(--accent);
  opacity: 0.75;
  white-space: pre;
  transition: opacity 0.2s, color 0.2s, transform 0.3s cubic-bezier(.22, 1, .36, 1), text-shadow 0.2s;
}
.ic:hover, .ic:focus-visible { color: var(--soft); outline: none; }
.ic:hover pre, .ic:focus-visible pre {
  opacity: 1;
  color: #ffd6f0;
  transform: scale(1.1);
  text-shadow: 0 0 6px rgba(255, 79, 200, 0.9), 0 0 16px rgba(255, 79, 200, 0.6);
  filter: drop-shadow(0 0 10px rgba(255, 79, 200, 0.75));
  animation: glow 1.6s ease-in-out infinite alternate;
}
@keyframes glow {
  from { filter: drop-shadow(0 0 6px rgba(255, 79, 200, 0.55)); }
  to { filter: drop-shadow(0 0 16px rgba(255, 79, 200, 0.95)); }
}

#gb-form { display: grid; gap: 8px; margin-bottom: 14px; }
input, textarea {
  background: rgba(20, 18, 20, 0.6);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font: inherit;
  padding: 8px 12px;
  resize: vertical;
}
input:focus, textarea:focus { outline: 1px solid var(--accent); }
#gb-form button {
  justify-self: start;
  background: none;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font: 0.87em "JetBrainsMono Nerd Font", ui-monospace, monospace;
  padding: 0.3em 1.3em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#gb-form button:hover { background: var(--accent); color: #1a1218; }
#gb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-height: 220px; overflow-y: auto; }
#gb-list li { border-left: 2px solid var(--line); padding-left: 10px; }
#gb-list b { color: var(--soft); }
#gb-list small { color: var(--dim); }
#gb-list p { margin: 0; }
#gb-list .reply { color: var(--accent); font-size: 0.9em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.gb-status { margin: 0; min-height: 1.5em; color: var(--dim); font-size: 0.87em; }

.links { margin-top: 22px; display: flex; gap: 16px; }
.links a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.links a:hover { text-decoration-color: var(--accent); color: var(--soft); }

/* custom cursor, only on devices with a real pointer */
.ring, .dot { display: none; }
@media (pointer: fine) {
  body.fx, body.fx * { cursor: none !important; }
  .ring, .dot { display: block; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; opacity: 0; }
  .ring {
    width: 22px; height: 22px; margin: -11px 0 0 -11px;
    border: 1.5px solid rgba(255, 214, 224, 0.75);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 79, 200, 0.35);
    transition: width .3s cubic-bezier(.22,1,.36,1), height .3s cubic-bezier(.22,1,.36,1), margin .3s cubic-bezier(.22,1,.36,1), opacity .3s, background-color .3s;
  }
  .dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--soft); transition: opacity .3s; }
  .ring.on, .ring.on + .dot { opacity: 1; }
  .ring.hot { width: 38px; height: 38px; margin: -19px 0 0 -19px; background: rgba(255, 255, 255, 0.05); }
  .ring.down { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
}

@media (max-width: 860px) {
  .stage { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .art { max-width: min(420px, 90%); margin: 0 auto; }
}

/* landscape phones / very short windows: keep two columns, shrink the art */
@media (max-height: 520px) and (min-width: 600px) {
  .stage { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; padding-block: 16px; }
  .art { max-width: 60vh; margin: 0; }
  .pane { min-height: 0; }
}

@media (max-width: 380px) {
  .tabs button { padding: 0.25em 0.9em; }
  .icons { grid-template-columns: repeat(auto-fill, minmax(6em, 1fr)); }
}

/* staggered reveal: pane blocks, logos and guestbook entries rise in one after another */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pane:not([hidden]) > * { animation: rise 0.6s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
.pane > :nth-child(1) { --i: 0; }
.pane > :nth-child(2) { --i: 1; }
.pane > :nth-child(3) { --i: 2; }
.pane > :nth-child(4) { --i: 3; }
.pane > :nth-child(5) { --i: 4; }
.pane > :nth-child(6) { --i: 5; }
.icons .ic { animation: rise 0.5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
#gb-list li { animation: rise 0.5s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  .glow, .pane, .pane > *, .icons .ic, #gb-list li, .ic:hover pre { animation: none; }
}

/* discord presence line */
#dstatus { color: var(--dim); }
#dstatus[data-st="online"] { color: var(--accent); }
#dstatus[data-st="idle"] { color: var(--soft); }
#dstatus[data-st="dnd"] { color: #ff5c7a; }

/* 404 */
body.nf { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; overflow: hidden; }
.nf-box { position: relative; z-index: 1; text-align: center; padding: 24px; }
.nf-art {
  display: inline-block; margin: 0 0 1em; text-align: left;
  font: clamp(14px, 4vw, 30px)/1.15 "JetBrainsMono Nerd Font", ui-monospace, monospace;
  color: var(--accent); text-shadow: 0 0 14px rgba(255, 79, 200, 0.55);
  animation: breathe 4s cubic-bezier(.37, 0, .63, 1) infinite alternate;
}
.nf-msg { color: var(--dim); font-family: "JetBrainsMono Nerd Font", ui-monospace, monospace; font-size: 0.95em; }
.nf-home {
  display: inline-block; margin-top: 6px; padding: 0.3em 1.3em; border: 1px solid var(--accent); border-radius: 999px;
  color: var(--accent); text-decoration: none; font: 0.87em "JetBrainsMono Nerd Font", ui-monospace, monospace;
  transition: background 0.2s, color 0.2s;
}
.nf-home:hover { background: var(--accent); color: #1a1218; }
.nf-petals { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.nf-petals i {
  position: absolute; top: -40px; font-style: normal; color: var(--soft);
  text-shadow: 0 0 8px rgba(255, 79, 200, 0.6);
  animation: nf-fall linear infinite, nf-sway ease-in-out infinite alternate;
}
.nf-petals i:nth-child(3n) { color: var(--accent); }
.nf-petals i:nth-child(3n+1) { color: var(--key); }
@keyframes nf-fall { to { top: 105vh; } }
@keyframes nf-sway { from { margin-left: -28px; transform: rotate(-25deg); } to { margin-left: 28px; transform: rotate(25deg); } }
.nf-petals i:nth-child(1) { left: 81%; font-size: 22px; animation-duration: 14s, 3s; animation-delay: -13s, -3s; opacity: 0.5; }
.nf-petals i:nth-child(2) { left: 85%; font-size: 14px; animation-duration: 11s, 3s; animation-delay: -5s, -3s; opacity: 0.5; }
.nf-petals i:nth-child(3) { left: 50%; font-size: 14px; animation-duration: 12s, 3s; animation-delay: -11s, -1s; opacity: 0.7; }
.nf-petals i:nth-child(4) { left: 37%; font-size: 18px; animation-duration: 15s, 4s; animation-delay: -12s, -0s; opacity: 0.5; }
.nf-petals i:nth-child(5) { left: 81%; font-size: 28px; animation-duration: 11s, 4s; animation-delay: -0s, -0s; opacity: 0.5; }
.nf-petals i:nth-child(6) { left: 29%; font-size: 18px; animation-duration: 11s, 5s; animation-delay: -5s, -1s; opacity: 0.9; }
.nf-petals i:nth-child(7) { left: 88%; font-size: 18px; animation-duration: 11s, 4s; animation-delay: -14s, -3s; opacity: 0.7; }
.nf-petals i:nth-child(8) { left: 4%; font-size: 22px; animation-duration: 15s, 4s; animation-delay: -14s, -1s; opacity: 0.7; }
.nf-petals i:nth-child(9) { left: 10%; font-size: 22px; animation-duration: 13s, 3s; animation-delay: -9s, -5s; opacity: 0.9; }
.nf-petals i:nth-child(10) { left: 45%; font-size: 14px; animation-duration: 13s, 5s; animation-delay: -13s, -2s; opacity: 0.7; }
.nf-petals i:nth-child(11) { left: 91%; font-size: 22px; animation-duration: 11s, 6s; animation-delay: -7s, -5s; opacity: 0.5; }
.nf-petals i:nth-child(12) { left: 9%; font-size: 22px; animation-duration: 9s, 5s; animation-delay: -13s, -3s; opacity: 0.5; }
.nf-petals i:nth-child(13) { left: 72%; font-size: 28px; animation-duration: 14s, 6s; animation-delay: -9s, -0s; opacity: 0.7; }
.nf-petals i:nth-child(14) { left: 7%; font-size: 18px; animation-duration: 12s, 3s; animation-delay: -12s, -1s; opacity: 0.7; }

@media (prefers-reduced-motion: reduce) { .nf-petals i, .nf-art { animation: none; } .nf-petals i { top: 20%; } }

/* admin */
body.adm-page { padding: clamp(16px, 4vw, 48px) 16px; }
.adm { max-width: 760px; margin: 0 auto; }
.adm h1 { font-size: 1.6em; margin-bottom: 18px; }
.adm .dim { color: var(--dim); font-weight: 400; }
.adm #login { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.adm button {
  background: none; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent);
  font: 0.87em "JetBrainsMono Nerd Font", ui-monospace, monospace; padding: 0.3em 1.2em; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.adm button:hover { background: var(--accent); color: #1a1218; }
.adm button.danger { border-color: #ff5c7a; color: #ff5c7a; }
.adm button.danger:hover { background: #ff5c7a; color: #1a1218; }
.adm button:disabled { opacity: 0.4; }
.adm-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: var(--dim); }
#list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
#list li { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: rgba(20, 18, 20, 0.6); display: grid; gap: 8px; }
#list li.new { border-color: var(--accent); box-shadow: 0 0 14px rgba(255, 79, 200, 0.15); }
#list p { margin: 0; overflow-wrap: anywhere; }
.adm-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.adm-head b { color: var(--soft); }
.adm-head small { color: var(--dim); }
.adm-head .badge { margin-left: auto; font-size: 0.8em; color: var(--dim); }
li.new .badge { color: var(--accent); }
.adm-act { display: flex; flex-wrap: wrap; gap: 8px; }

/* petals burst from a click */
.burst {
  position: fixed; z-index: 9998; pointer-events: none;
  font-size: 13px; line-height: 1; text-shadow: 0 0 8px rgba(255, 79, 200, 0.7);
  animation: burst 1.1s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes burst {
  from { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  70% { opacity: 0.8; }
  to { transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .burst { display: none; } }

/* terminal easter egg: opens with ` on any page, close with Esc */
.term {
  position: fixed; right: clamp(12px, 3vw, 40px); bottom: clamp(12px, 3vw, 40px); z-index: 9997;
  width: min(560px, calc(100vw - 24px)); max-height: 60vh; display: flex; flex-direction: column;
  border: 1px solid var(--accent); border-radius: 10px; background: rgba(20, 18, 20, 0.94);
  box-shadow: 0 0 30px rgba(255, 79, 200, 0.25);
  font: 0.85em/1.5 "JetBrainsMono Nerd Font", ui-monospace, monospace; color: var(--fg);
  animation: rise 0.35s cubic-bezier(.22, 1, .36, 1) both;
}
.term[hidden] { display: none; }
.term-head { padding: 6px 12px; border-bottom: 1px solid var(--line); color: var(--dim); display: flex; justify-content: space-between; }
.term-out { flex: 1; overflow-y: auto; margin: 0; padding: 10px 12px; white-space: pre-wrap; font: inherit; color: var(--fg); }
.term-out .cmd { color: var(--key); }
.term-out .err { color: #ff5c7a; }
.term-line { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); }
.term-line span { color: var(--accent); white-space: nowrap; }
.term-line input {
  flex: 1; min-width: 0; border: 0; padding: 0; background: none; color: var(--fg); font: inherit; resize: none;
}
.term-line input:focus { outline: none; }

/* sakura shower easter egg */
.fall-petal {
  position: fixed; top: -40px; z-index: 9996; pointer-events: none; color: var(--soft);
  text-shadow: 0 0 8px rgba(255, 79, 200, 0.6);
  animation: shower linear forwards, sway ease-in-out infinite alternate;
}
@keyframes shower { to { transform: translateY(110vh); } }
@keyframes sway { from { margin-left: -30px; } to { margin-left: 30px; } }
@media (prefers-reduced-motion: reduce) { .fall-petal { display: none; } }

/* admin: theme switch */
.adm-theme { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.adm-theme h2 { margin: 0 0 10px; font-size: 1.05em; color: var(--soft); }
.adm button.on { background: var(--accent); color: #1a1218; }
.adm [hidden] { display: none !important; }

/* text selection, tinted per theme (halloween.css and newyear.css override these) */
::selection { background: rgba(255, 79, 200, 0.52); color: #fff; text-shadow: none; }
::-moz-selection { background: rgba(255, 79, 200, 0.52); color: #fff; text-shadow: none; }