:root{
  --paper:#EEEBDE;
  --blueprint:#0F2A43;
  --grid-line: rgba(255,255,255,0.06);
  --cyan:#5FB3C9;
  --safety:#F4B942;
  --ink:#EDEFF2;
  --ink-dim:#B9C4CE;
  --card:#123252;
  --card-border: rgba(95,179,201,0.25);
  --radius: 14px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--blueprint);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.6;
}
a{color:var(--safety); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width: 900px; margin:0 auto; padding: 0 24px;}

/* top nav */
nav.top{
  border-bottom: 1px solid var(--card-border);
  padding: 16px 24px;
  display:flex; align-items:center; justify-content:space-between;
  max-width: 1080px; margin: 0 auto;
  flex-wrap: wrap; gap:10px;
}
nav.top .brand{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:1.05rem; color:var(--ink);
}
nav.top .brand span{color:var(--safety);}
nav.top .links a{
  color: var(--ink-dim); font-size: 13.5px; margin-left: 18px;
  font-family:'IBM Plex Mono', monospace;
}
nav.top .links a:hover{color:var(--cyan);}

header.hero{
  padding: 48px 24px 36px;
  text-align:center;
  max-width: 820px;
  margin: 0 auto;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px;
  color: var(--cyan); display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{
  content:""; width:7px;height:7px;border-radius:50%; background:var(--safety);
  box-shadow: 0 0 0 3px rgba(244,185,66,0.2);
}
h1{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  margin: 16px 0 12px; letter-spacing: -0.01em;
}
h1 span{color:var(--safety);}
.hero p{ color: var(--ink-dim); font-size: 1.02rem; max-width: 560px; margin: 0 auto; }

.pegboard{
  max-width: 1080px; margin: 0 auto; padding: 0 24px 60px;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;
}
.tool-card{
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 20px 20px 22px; position:relative;
}
.tool-card .tool-num{ font-family:'IBM Plex Mono', monospace; font-size: 11px; color: var(--cyan); letter-spacing: 0.1em;}
.tool-card h2, .tool-card h3{ font-family:'Space Grotesk', sans-serif; font-size: 1.15rem; margin: 6px 0 8px; font-weight: 700;}
.tool-card p{ color: var(--ink-dim); font-size: 13.5px; margin: 0 0 12px;}

/* single tool page */
.tool-panel{
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--radius); padding: 24px 24px 26px; margin: 0 0 40px;
}
label{ display:block; font-size: 12.5px; color: var(--ink-dim); margin: 12px 0 5px; }
input, select, textarea{
  width:100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; padding: 9px 11px; color: var(--ink); font-family:'Inter', sans-serif; font-size: 14px; outline:none;
}
input[type=range]{padding:0;}
input:focus, select:focus, textarea:focus{
  border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(95,179,201,0.18);
}
.row{display:flex; gap:10px; flex-wrap:wrap;}
.row > *{flex:1; min-width:120px;}
button{
  margin-top:16px; background: var(--safety); color: #16233a; border:none;
  border-radius: 8px; padding: 10px 18px; font-family:'Inter', sans-serif; font-weight:600;
  font-size: 14px; cursor:pointer; transition: filter 0.15s ease;
}
button:hover{ filter: brightness(1.08); }
button:focus-visible{ outline: 3px solid var(--cyan); outline-offset:2px; }
button.secondary{ background: transparent; border:1px solid var(--card-border); color: var(--ink); margin-left:8px;}
.result{
  margin-top: 14px; font-family:'IBM Plex Mono', monospace; font-size: 15px;
  background: rgba(95,179,201,0.08); border: 1px dashed var(--card-border); border-radius: 8px;
  padding: 10px 12px; min-height: 20px; color: var(--cyan); word-break: break-word;
}
.result.empty{ color: var(--ink-dim); font-style: italic; }

article.seo{ padding-bottom: 60px; }
article.seo h2{ font-family:'Space Grotesk', sans-serif; font-size: 1.3rem; margin-top: 34px; }
article.seo p{ color: var(--ink-dim); font-size: 14.5px; }
article.seo ul{ color: var(--ink-dim); font-size: 14.5px; }
details{ border:1px solid var(--card-border); border-radius:8px; padding:10px 14px; margin: 10px 0; background: rgba(255,255,255,0.02); }
details summary{ cursor:pointer; font-weight:600; color: var(--ink); }
details p{ margin-top:8px; }

footer{
  text-align:center; padding: 30px 24px 60px; color: var(--ink-dim); font-size: 13px;
  font-family:'IBM Plex Mono', monospace; border-top: 1px solid var(--card-border); margin-top: 20px;
}
#qrbox{ margin-top:14px; display:flex; justify-content:center; background:#fff; padding:10px; border-radius:8px; }
.color-swatch{ width:100%; height:70px; border-radius:8px; margin-top:14px; border:1px solid var(--card-border);}
canvas#wheelCanvas{ display:block; margin: 14px auto 0; max-width:100%; }