:root,
:root[data-theme] {
  color-scheme: dark;
  --i3oot-ink: #080c16;
  --i3oot-panel: #101726;
  --i3oot-panel-raised: #151e30;
  --i3oot-line: #27344a;
  --i3oot-cyan: #59edf2;
  --i3oot-cyan-bright: #a1fbff;
  --i3oot-magenta: #d946ef;
  --i3oot-magenta-bright: #f0abfc;
  --i3oot-copy: #eef7ff;
  --i3oot-copy-muted: #a7b7cb;

  --color-body: var(--i3oot-ink);
  --color-nav-bg: #090e19;
  --color-header-wrapper: #0b111e;
  --color-header-wrapper-transparent: #0b111e00;
  --color-footer: #070b13;
  --color-card: var(--i3oot-panel);
  --color-menu: var(--i3oot-panel);
  --color-box-header: var(--i3oot-panel-raised);
  --color-box-body: #0d1422;
  --color-box-body-highlight: #172238;
  --color-project-board-bg: #0d1422;
  --color-code-bg: #0b1220;
  --color-markup-code-block: #0b1220;
  --color-markup-code-inline: #121c2e;
  --color-editor-line-highlight: #172238;
  --color-text: var(--i3oot-copy);
  --color-text-light: var(--i3oot-copy-muted);
  --color-caret: var(--i3oot-copy);
  --color-placeholder-text: #7f91aa;
  --color-border: var(--i3oot-line);
  --color-light-border: #59edf229;

  --color-primary: var(--i3oot-cyan);
  --color-primary-hover: var(--i3oot-cyan-bright);
  --color-primary-active: #27c8d1;
  --color-primary-contrast: #071016;
  --color-primary-light-1: #42d9e0;
  --color-primary-light-2: #2abfc9;
  --color-primary-light-3: #1d9fa9;
  --color-primary-light-4: #177d87;
  --color-primary-light-5: #125f68;
  --color-primary-light-6: #0f4850;
  --color-primary-light-7: #0c343b;
  --color-primary-dark-1: #78f3f7;
  --color-primary-dark-2: #91f8fb;
  --color-primary-dark-3: #a1fbff;
  --color-primary-dark-4: #bbfcff;
  --color-primary-dark-5: #d2fdff;
  --color-primary-dark-6: #e5feff;
  --color-primary-dark-7: #f2ffff;
  --color-primary-alpha-10: #59edf21a;
  --color-primary-alpha-20: #59edf233;
  --color-primary-alpha-30: #59edf24d;
  --color-primary-alpha-40: #59edf266;
  --color-primary-alpha-50: #59edf280;
  --color-primary-alpha-60: #59edf299;
  --color-primary-alpha-70: #59edf2b3;
  --color-primary-alpha-80: #59edf2cc;
  --color-primary-alpha-90: #59edf2e6;

  --color-accent: var(--i3oot-magenta);
  --color-highlight-bg: #d946ef29;
  --color-highlight-fg: var(--i3oot-magenta-bright);
  --color-reaction-active-bg: #d946ef3d;
  --color-reaction-hover-bg: #d946ef52;

  --color-secondary: #182338;
  --color-secondary-bg: #182338;
  --color-secondary-hover: #202d45;
  --color-secondary-active: #26354f;
  --color-secondary-light-1: #202d45;
  --color-secondary-light-2: #111a2b;
  --color-button: #1a263b;
  --color-hover: #1c2940;
  --color-active: #24324b;
  --color-nav-hover-bg: #18243a;
  --color-input-background: #111a2b;
  --color-input-toggle-background: #111a2b;
  --color-input-border: #31425e;
  --color-input-border-hover: #59edf280;
  --color-input-text: var(--i3oot-copy);
  --color-label-bg: #1d2940;
  --color-label-bg-alt: #263550;
  --color-label-hover-bg: #2d3f5e;
  --color-label-active-bg: #354b6e;
  --border-radius: 6px;
  --border-radius-medium: 8px;
}

::selection {
  color: var(--i3oot-copy);
  background: #d946ef70;
}

body {
  background-color: var(--i3oot-ink);
  background-image:
    linear-gradient(#59edf20a 1px, transparent 1px),
    linear-gradient(90deg, #59edf20a 1px, transparent 1px),
    radial-gradient(circle at 86% -12%, #59edf214, transparent 34rem),
    radial-gradient(circle at -10% 110%, #d946ef12, transparent 36rem);
  background-attachment: fixed;
  background-size: 44px 44px, 44px 44px, auto, auto;
}

#navbar {
  position: relative;
  border-bottom-color: #59edf226;
  box-shadow: 0 10px 32px #0007;
}

#navbar::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent 4%, var(--i3oot-cyan), var(--i3oot-magenta), transparent 96%);
  opacity: .55;
}

#navbar-logo {
  padding: 5px 10px;
}

#navbar-logo img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  content: url("./img/coder-burger.png");
  filter: drop-shadow(0 0 9px #59edf255);
}

a:not(.button):hover {
  text-shadow: 0 0 14px #59edf266;
}

.ui.menu .active.item {
  color: var(--i3oot-cyan) !important;
  box-shadow: inset 0 -2px var(--i3oot-magenta);
}

.ui.primary.button,
.ui.primary.buttons .button {
  color: #071016 !important;
  border-color: transparent !important;
  background: linear-gradient(115deg, var(--i3oot-cyan) 0%, #70d9f6 48%, var(--i3oot-magenta) 100%) !important;
  box-shadow: 0 0 0 1px #59edf233, 0 8px 24px #d946ef20 !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: linear-gradient(115deg, var(--i3oot-cyan-bright) 0%, #8fe5fb 48%, var(--i3oot-magenta-bright) 100%) !important;
  box-shadow: 0 0 0 1px #a1fbff66, 0 10px 30px #d946ef35 !important;
}

.ui.button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--i3oot-cyan) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #d946ef38 !important;
}

.ui.segment,
.ui.menu,
.ui.table,
.ui.modal {
  border-color: var(--i3oot-line);
}

.ui.segment:hover {
  border-color: #59edf245;
}

.i3oot-coder-home {
  min-height: calc(100vh - 110px);
  padding: clamp(2rem, 6vw, 6rem) max(1.5rem, calc((100vw - 1180px) / 2));
  background:
    linear-gradient(#59edf212 1px, transparent 1px),
    linear-gradient(90deg, #59edf212 1px, transparent 1px),
    radial-gradient(circle at 76% 22%, #59edf226, transparent 30%),
    radial-gradient(circle at 18% 78%, #d946ef20, transparent 28%),
    linear-gradient(135deg, #080c16e8, #101126e8);
  background-size: 32px 32px, 32px 32px, auto, auto, auto;
}

.i3oot-coder-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: clamp(2rem, 7vw, 6rem);
  align-items: center;
}

.i3oot-coder-kicker {
  margin: 0 0 1rem;
  color: var(--i3oot-cyan);
  font: 700 .8rem/1.2 var(--fonts-monospace, monospace);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 0 16px #59edf280;
}

.i3oot-coder-copy h1 {
  max-width: 9ch;
  margin: 0;
  color: var(--i3oot-copy);
  font-size: clamp(3.4rem, 8vw, 7.5rem);
  line-height: .88;
  letter-spacing: -.06em;
  background: linear-gradient(112deg, var(--i3oot-copy) 12%, var(--i3oot-cyan) 55%, var(--i3oot-magenta) 92%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.i3oot-coder-lead {
  max-width: 38rem;
  margin: 1.75rem 0 0;
  color: var(--i3oot-copy-muted);
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  line-height: 1.55;
}

.i3oot-coder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.i3oot-coder-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 320px;
}

.i3oot-coder-art::before {
  position: absolute;
  z-index: -1;
  width: 86%;
  height: 72%;
  content: "";
  border: 1px solid #59edf270;
  border-radius: 18px 4px 18px 4px;
  background: linear-gradient(135deg, #59edf208, #d946ef0d);
  box-shadow: inset 0 0 30px #59edf212, 0 0 28px #d946ef1f;
  transform: rotate(-2deg);
}

.i3oot-coder-art img {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  height: auto;
  filter: drop-shadow(0 28px 38px #0008) drop-shadow(0 0 16px #59edf22e);
  animation: i3oot-coder-float 4.5s ease-in-out infinite;
}

.i3oot-coder-glow {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #59edf238, #d946ef24 42%, transparent 70%);
  filter: blur(14px);
}

.i3oot-coder-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(3rem, 8vw, 7rem);
  overflow: hidden;
  border: 1px solid #59edf23d;
  border-radius: var(--border-radius-medium);
  background: linear-gradient(90deg, var(--i3oot-cyan), var(--i3oot-magenta));
  box-shadow: 0 20px 55px #0005;
}

.i3oot-coder-principles > div {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: #101726f5;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.i3oot-coder-principles > div:hover {
  background: #151f33f5;
  box-shadow: inset 0 3px var(--i3oot-magenta);
}

.i3oot-coder-index {
  color: var(--i3oot-cyan);
  font: 700 .78rem/1 var(--fonts-monospace, monospace);
  text-shadow: 0 0 14px #59edf28c;
}

.i3oot-coder-principles h2 {
  margin: 1rem 0 .45rem;
  color: var(--i3oot-copy);
  font-size: 1.15rem;
}

.i3oot-coder-principles p {
  margin: 0;
  color: var(--i3oot-copy-muted);
  line-height: 1.5;
}

@keyframes i3oot-coder-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

@media (max-width: 767px) {
  .i3oot-coder-hero { grid-template-columns: 1fr; }
  .i3oot-coder-copy { text-align: center; }
  .i3oot-coder-copy h1,
  .i3oot-coder-lead { margin-right: auto; margin-left: auto; }
  .i3oot-coder-actions { justify-content: center; }
  .i3oot-coder-art { min-height: 260px; }
  .i3oot-coder-principles { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .i3oot-coder-art img { animation: none; }
  .i3oot-coder-principles > div { transition: none; }
}