:root{
  --bg-gradient: linear-gradient(135deg,#000,#151515,#2a2a2a);
  --card-bg: rgba(255, 255, 255, 0.075);
  --border-glow: rgba(255, 217, 0, 0.525);
  --main-text: #f9f7d1;
  --accent: #ffd700;
  --accent-rgba: 255,215,0;
  --muted: #cfcfcf;
  --glass-blur: blur(15px);
  --font: "Fira Code", monospace;
}
*{box-sizing:border-box;margin:0;padding:0}

html, body {
  height: 100%;
  margin: 0;
}
/* Oswald (variable font, you can pick 200–700) */
.oswald-title {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;  /* pick between 200–700 */
  font-style: normal;
}

/* Play (regular and bold) */
.play-regular {
  font-family: "Play", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.play-bold {
  font-family: "Play", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body{
  background:var(--bg-gradient);
  background-size:400% 400%;
  animation:bgFade 15s ease infinite;
  color:var(--main-text);
  line-height:1.6;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Container for falling circles */
.falling-circles {
  position: fixed;
  top: -100px;
  left: 0;
  width: 100%;
  height: calc(100vh + 200px);
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

/* Spider styling */
.spider {
  font-size: 24px;
  position: absolute;
  animation: fall linear infinite;
  transform: rotate(180deg);
  color: #ffd900d8; /* golden text color */
  font-size:2.2rem;margin-bottom:.5rem;
  background:linear-gradient(to right,var(--accent),#ffffff26);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 12px rgba(var(--accent-rgba),.25);
}



/* Falling animation */
@keyframes fall {
  0% { transform: translateY(-100px); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(calc(100vh + 100px)); opacity: 0; }
}

/* Optional: different horizontal positions and speeds */
.spider:nth-child(1) { left: 5%; animation-duration: 8s; animation-delay: 0s; }
.spider:nth-child(2) { left: 25%; animation-duration: 10s; animation-delay: 1s; }
.spider:nth-child(3) { left: 45%; animation-duration: 12s; animation-delay: 0.5s; }
.spider:nth-child(4) { left: 65%; animation-duration: 9s; animation-delay: 1.5s; }
.spider:nth-child(5) { left: 85%; animation-duration: 11s; animation-delay: 0.7s; }

/* Optional: add a “string” using ::after */
.spider::after {
  margin-top: 10px;
  content: '';
  position: absolute;
  width: 2px;
  height: 120vh;
  background: linear-gradient(to bottom, transparent 0%, rgba(161, 127, 18, 0.3) 90%);
  left: 50%;
  top: -120vh;
  transform: translateX(-50%);
  z-index: -1;
}

.content {
  flex: 1; /* This makes content area grow and pushes footer down */
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; /* This pushes footer to bottom within content */
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-50px); /* Start 50px to the left */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-left.show {
  opacity: 1;
  transform: translateX(0); /* End at original position */
}
.fade-in-bottom {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-bottom.show {
  opacity: 1;
  transform: translateY(0);
}

@keyframes bgFade{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.wrapper{
  max-width:960px;
  margin:auto;
  padding:2rem;
}

header h1{
  font-size:2.2rem;margin-bottom:.5rem;
  background:linear-gradient(to right,var(--accent),#fff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 0 12px rgba(var(--accent-rgba),.25);
}
header h1{color:var(--muted);}
header p{color:var(--muted);margin-bottom:2rem;}
.tagline{color:var(--accent);font-size:1rem;margin-top:5px;opacity:.9;font-style:italic}

/* ===== NAVBAR ===== */
#header{
  position:sticky;top:0;z-index:999;
  display:flex;align-items:center;gap:16px;
  padding:10px 16px;background:rgba(0,0,0,.6);
  backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--border-glow);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
/* overlay (click to close) – hidden by default */
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000}

/* hamburger */
.hamburger-lines{
  position:relative;z-index:1002;cursor:pointer;
  display:none;flex-direction:column;justify-content:space-between;
  width:34px;height:26px;
}
.hamburger-lines .line{
  height:3px;width:100%;background:var(--accent);
  border-radius:6px;box-shadow:0 0 8px rgba(var(--accent-rgba),.35);
}

/* brand */
.header-logo{display:flex;align-items:center;gap:10px;min-width:200px}
.header-logo img{height:34px;width:auto;display:block;filter:drop-shadow(0 0 6px rgba(var(--accent-rgba),.2))}
.header-logo p{color:var(--accent);font-weight:bold;letter-spacing:.5px;}

/* menu */
.header-list{flex:1}
.header-list-nav ul.menu-items{
  list-style:none;display:flex;align-items:center;gap:18px;justify-content:flex-end;
}
.header-list-nav ul.menu-items>li>a{
  text-decoration:none;color:var(--main-text);
  padding:10px 12px;border-radius:10px;border:1px solid transparent;transition:.2s ease
}
.header-list-nav ul.menu-items>li>a:hover{
  color:#000;background:var(--accent);
  border-color:rgba(var(--accent-rgba),.5);box-shadow:0 8px 24px rgba(var(--accent-rgba),.3)
}
/* Force remove underline & color for Tools link in desktop */
.header-list-nav ul.menu-items > li.dropdown > a {
  color: var(--main-text) !important;
  text-decoration: none !important;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  display: inline-block;
  cursor: pointer;
  transition: .2s ease;
}

.header-list-nav ul.menu-items > li.dropdown > a:hover {
  color: #000 !important;
  background: var(--accent);
  border-color: rgba(var(--accent-rgba), .5);
  box-shadow: 0 8px 24px rgba(var(--accent-rgba), .3);
}

/* dropdown */
.header-list-nav ul li.dropdown{position:relative}
.header-list-nav ul li .dropdown-menu{
  display:none;position:absolute;top:100%;left:0;min-width:150px;
  background:#000;border:1px solid rgba(var(--accent-rgba),.35);
  box-shadow:0 8px 18px rgba(0,0,0,.35);z-index:1000;border-radius:10px;overflow:hidden
}
.header-list-nav ul li .dropdown-menu li{padding:0}
.header-list-nav ul li .dropdown-menu li a{
  display:block;padding:10px 15px;color:var(--accent);text-decoration:none;font-size:14px;transition:.15s ease
}
.header-list-nav ul li .dropdown-menu li a:hover{background:var(--accent);color:#000}
.header-list-nav ul li.dropdown:hover .dropdown-menu{display:none}
.header-list-nav ul li.dropdown.open .dropdown-menu {
  display: block;
}

/* ===== MOBILE MENU ===== */
@media (max-width:860px){
  .hamburger-lines{display:flex}

  /* fixed panel; own scroll; won't break layout after scanning */
  .header-list-nav ul.menu-items{
    position:fixed;top:60px;left:0;right:0;z-index:1001;
    max-height:calc(var(--vh, 1vh)*100 - 60px);
    overflow:auto;flex-direction:column;gap:8px;padding:12px;
    background:rgba(0,0,0,.92);border-bottom:1px solid var(--border-glow);
    backdrop-filter:var(--glass-blur);
    transform:translateY(-120%);opacity:0;pointer-events:none;
    transition:transform .25s ease,opacity .25s ease;
    text-decoration: none;
    color: var(--main-text);
  }
  .header-list-nav ul.menu-items a {
    text-decoration: none;
    color: var(--main-text);
  }
  
  .header-list-nav ul.menu-items a:hover {
    color: var(--accent);
  }

  .header-list-nav ul.menu-items li.dropdown > a {
    display: inline-block;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    color: var(--main-text);
    transition: .2s ease;
  }
  
  .header-list-nav ul.menu-items li.dropdown > a:hover {
    color: #000;
    background: var(--accent);
    border-color: rgba(var(--accent-rgba), .5);
    box-shadow: 0 8px 24px rgba(var(--accent-rgba), .3);
  }
  .header-list-nav ul li.dropdown .dropdown-menu {
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .header-list-nav ul.menu-items li.dropdown > a.dropdown-toggle-active {
    color: #000;
    background: var(--accent);
    border-color: rgba(var(--accent-rgba), .5);
    box-shadow: 0 8px 24px rgba(var(--accent-rgba), .3);
  }
  
  /* when menu is open */
  #menu-toggle:checked ~ .nav-overlay{display:block}
  #menu-toggle:checked ~ .header-list .header-list-nav ul.menu-items{
    transform:translateY(0);opacity:1;pointer-events:auto
  }

  /* dropdown becomes inline */
  .header-list-nav ul li.dropdown .dropdown-menu{
    position:static;display:none;background:transparent;border:0;box-shadow:none; text-decoration: none;
  }
  .header-list-nav ul li.dropdown.open .dropdown-menu {
    display: block; /* show when clicked */
  }
  .header-list-nav ul li .dropdown-menu li a{padding-left:24px}
}
.tagline {
  margin-bottom: 2rem;
  margin-left: 20px;
}
 .hint, .tagline {
    font-weight: bold;
    background: linear-gradient(to right, rgb(232, 197, 1), #2bff00); /* Red to Blue */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* ===== FORM ===== */
.input-group{display:flex;gap:10px;margin-bottom:2rem;flex-wrap:wrap;backdrop-filter:var(--glass-blur)}
.input-group input{
  flex:1;font-size:1rem;padding:14px 18px;border:2px solid transparent;border-radius:12px;
  background-color:var(--card-bg);color:var(--main-text);outline:none;transition:.3s ease;
  box-shadow:inset 0 0 5px rgba(255,255,255,.06);
}
.input-group input:focus{border-color:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgba),.45)}
.input-group button{
  background:var(--accent);color:#000;font-weight:bold;border:none;padding:14px 24px;border-radius:12px;cursor:pointer;
  box-shadow:0 6px 22px rgba(var(--accent-rgba),.35);transition:.25s ease
}
.input-group button:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(var(--accent-rgba),.48)}
.input-group button:active{transform:translateY(1px)}

/* ===== STATUS / RESULTS ===== */
.status{font-size:.95rem;color:#bdbdbd;margin-bottom:1rem;font-style:italic}
.results{display:flex;flex-direction:column;gap:1.5rem}
.card{
  background:var(--card-bg);border-radius:16px;padding:20px;border:1px solid var(--border-glow);
  backdrop-filter:var(--glass-blur);box-shadow:0 0 15px rgba(0,0,0,.35);transition:.3s ease
}
.card:hover{border-color:var(--accent);box-shadow:0 0 28px rgba(var(--accent-rgba),.3)}
.card h3{color:var(--accent);font-size:1.1rem;margin-bottom:12px;word-break:break-word}
.card pre{font-family:var(--font);font-size:.95rem;white-space:pre-wrap;color:#eee9c6}

/* numbered list like editor gutter */
.card ol{list-style:none;counter-reset:line-number;padding:0;margin:.5rem 0}
.card ol li{
  counter-increment:line-number;display:flex;align-items:flex-start;gap:10px;margin-bottom:6px;line-height:1.4;color:#f0f0c0;
  position:relative;padding-left:32px;word-break:break-word
}
.card ol li::before{
  content:counter(line-number);position:absolute;left:0;color:#e2c94b;font-size:.9rem;opacity:.7;min-width:24px;user-select:none;text-align:right
}
.endpoint-text{flex-grow:1;user-select:text;font-size:.95rem;white-space:pre-wrap}

/* copy button */
.copy-btn{
  background:rgba(var(--accent-rgba),.08);border:1px solid rgba(var(--accent-rgba),.35);border-radius:8px;
  padding:8px 10px;cursor:pointer;backdrop-filter:blur(10px);color:var(--accent);transition:.2s ease-in-out;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(255,255,0,.05)
}
.copy-btn:hover{background:rgba(var(--accent-rgba),.2);border-color:rgba(var(--accent-rgba),.55);color:#000;box-shadow:0 0 12px rgba(var(--accent-rgba),.45);transform:scale(1.05)}
.copy-btn:active{transform:scale(.95);box-shadow:none}
.copy-btn.copied{background:rgba(0,200,80,.2);border-color:rgba(0,200,80,.6);color:#93ffb8;box-shadow:0 0 12px rgba(0,200,80,.45)}
.copy-icon{width:18px;height:18px;stroke:currentColor;fill:none}

/* export actions */
.export-actions{display:flex;gap:12px;margin:30px 0 10px;justify-content:flex-start;flex-wrap:wrap;backdrop-filter:blur(12px)}
.export-actions button{
  background:rgba(var(--accent-rgba),.08);border:1px solid rgba(var(--accent-rgba),.45);color:var(--accent);font-weight:bold;
  padding:12px 18px;border-radius:12px;cursor:pointer;font-family:inherit;box-shadow:0 2px 10px rgba(0,0,0,.3);transition:.3s ease
}
.export-actions button:hover{background:rgba(var(--accent-rgba),.25);color:#000;box-shadow:0 0 16px rgba(var(--accent-rgba),.55);transform:translateY(-2px)}
.export-actions button:active{transform:scale(.96);box-shadow:none}

/* filter */
#filter-section{margin:20px 0 10px;display:flex;justify-content:flex-start}
#filterInput{
  padding:10px 16px;border-radius:12px;border:1px solid rgba(var(--accent-rgba),.45);
  background:rgba(255,255,255,.05);backdrop-filter:blur(10px);color:#fff;width:100%;max-width:400px;font-family:inherit;font-size:1rem;outline:none;transition:.3s ease
}
#filterInput:focus{border-color:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgba),.35)}

/* ===== FOOTER - FIXED ===== */
.footer {
  background: #0b0b0b;
  color: #ccc;
  padding: 30px 20px;
  font-size: 16px;
  border-top: 1px solid #fec300;
  margin-top: auto; /* This ensures footer stays at bottom */
}

.footer-inner {
  max-width: 900px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

/* Footer links */
.footer a {
  color: gold;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #fff;
}

/* Social links row */
.social-links {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.9em;
}

.social-links a {
  color: gold;
  border-bottom: 1px solid transparent;
}

.social-links a:hover {
  border-bottom: 1px solid #fff;
}

.social-links a i {
  margin-right: 6px;
  font-size: 1.1em;
}

/* responsive input group */
@media (max-width:600px){
  .input-group{flex-direction:column}
  .input-group input,.input-group button{width:100%}
}