/* Emerald, cyan, violet and gold remain visible throughout the navigation. */
.main-nav { background: linear-gradient(110deg,#12382c,#142e38 35%,#2b223d 68%,#373021); border-color:#5e827166; border-radius:18px; box-shadow:inset 0 1px 0 #d9eac116,0 8px 24px #0003; }
.main-nav a { border-radius:12px; color:#e3eee8; background:linear-gradient(115deg,#144533,#183b47,#342a4c,#484023); background-size:300% 300%; border:1px solid #9bb9a622; transition:color .2s,box-shadow .2s,transform .2s; }
.main-nav a.active,.main-nav a:hover:not(.active),.main-nav a:focus-visible { background:linear-gradient(110deg,#60efb1,#80dfee,#c1a2f7,#f3d482,#60efb1); background-size:300% 300%; color:#09231a; border-color:#c2e6c5; box-shadow:0 3px 18px #67d5b32b; }
.main-nav a:hover,.main-nav a:focus-visible { animation:nav-colour-flow 3s ease-in-out infinite; transform:translateY(-1px); }
@keyframes nav-colour-flow { 0%,100%{background-position:0% 50%}50%{background-position:100% 50%} }
.brand { border-radius:10px; }
.brand:hover { filter:drop-shadow(0 0 5px #d5b86530); }
.drop-zone.drag-active { border-color:#78eeb4; background:#1c4532; box-shadow:inset 0 0 0 2px #78eeb433; }
@media(max-width:1000px){.main-nav{background:linear-gradient(130deg,#0d241bee,#142a33f5,#241d31f5);border-radius:0 0 18px 18px}.main-nav a{padding:12px 16px}}
@media(prefers-reduced-motion:reduce){.main-nav a:hover,.main-nav a:focus-visible{animation:none;transform:none}}