:root{
  --void:#000000;
  --ink:#05070B;
  --raise:#0A0D14;
  --hair:rgba(255,255,255,.09);
  --hair-2:rgba(255,255,255,.16);
  --text:#F2F4F8;
  --dim:#7C8496;
  --faint:#4A5162;
  --ion:#7DE2FF;
  --ok:#5BE6A4;
  --amber:#FFC46B;
  --radius:2px;
  --font:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --micro:11px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--void);color:var(--text);
  font-family:var(--font);font-size:15px;line-height:1.55;
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:rgba(125,226,255,.22)}
a{color:inherit;text-decoration:none}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1000px 700px at 78% -10%, rgba(125,226,255,.05), transparent 62%),
    radial-gradient(800px 600px at 8% 108%, rgba(183,155,255,.045), transparent 60%);
}

/* microtype: mono all-caps label */
.tm,.wordmark,footer,.modal-meta{
  font-family:var(--mono);font-size:var(--micro);
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;
}

/* ---------- brand mark, two-act choreography (canonical: devops-tools/css/style.css) ----------
   Act 1 on load/click: strokes arrive out of deep space. Act 2 on hover: one 360° revolution. */
.mark{display:block;width:26px;height:26px;color:#C3C9D4;flex:none;transition:color .3s}
.mark svg{width:100%;height:100%;display:block;overflow:visible}
.mark path{transform-box:fill-box;transform-origin:center}
.brand{display:flex;align-items:center;gap:11px}
.brand:hover .mark{color:#FFFFFF}
@keyframes markArrive{
  from{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(var(--fs,2.2));filter:blur(3px)}
  60%{filter:blur(.4px)}
  to{opacity:1;transform:none;filter:none}
}
.mark.arrive .s1{--fx:-30px;--fy:8px;--fs:2.6;animation:markArrive .85s cubic-bezier(.2,.7,.2,1) .05s both}
.mark.arrive .s2{--fx:-12px;--fy:-26px;--fs:2.2;animation:markArrive .85s cubic-bezier(.2,.7,.2,1) .22s both}
.mark.arrive .s3{--fx:-6px;--fy:30px;--fs:2.0;animation:markArrive .8s cubic-bezier(.2,.7,.2,1) .40s both}
.mark.arrive .s4{--fx:16px;--fy:-30px;--fs:2.4;animation:markArrive .85s cubic-bezier(.2,.7,.2,1) .55s both}
.mark.arrive .s5{--fx:24px;--fy:24px;--fs:2.0;animation:markArrive .8s cubic-bezier(.2,.7,.2,1) .72s both}
.mark.arrive .swoop{--fx:30px;--fy:-26px;--fs:1.3;animation:markArrive .7s cubic-bezier(.2,.7,.2,1) 1.0s both}
.mark.spin{animation:markSpin .9s cubic-bezier(.45,.05,.25,1)}
@keyframes markSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;gap:22px;padding:0 24px;height:58px;
  border-bottom:1px solid var(--hair);position:sticky;top:0;z-index:20;
  background:rgba(0,0,0,.72);backdrop-filter:blur(20px) saturate(140%);
}
.topbar .tm{color:var(--faint)}
.topbar a.tm:hover{color:var(--text)}
.topbar .grow{margin-left:auto}
.wordmark{font-size:14px;letter-spacing:.34em;padding-left:1px}

/* ---------- layout ---------- */
main{max-width:1180px;margin:0 auto;padding:44px 24px 90px}

.hero{text-align:center;margin-bottom:40px}
.hero h1{font-size:clamp(30px,5vw,46px);font-weight:600;letter-spacing:-.02em}
.lede{color:var(--dim);margin-top:10px}
.genrow{
  display:flex;gap:10px;max-width:520px;margin:26px auto 0;
}
.genrow input{
  flex:1;background:var(--raise);border:1px solid var(--hair-2);
  border-radius:var(--radius);color:var(--text);font:inherit;
  padding:13px 16px;outline:none;transition:border-color .18s;
}
.genrow input:focus{border-color:rgba(125,226,255,.5)}
.genrow input::placeholder{color:var(--faint)}
.genrow button,.more-btn,.modal-actions button{
  font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ion);color:#03242C;border:none;border-radius:var(--radius);
  padding:13px 20px;cursor:pointer;font-weight:500;transition:filter .18s,transform .06s;
}
.genrow button:hover,.more-btn:hover,.modal-actions button:hover{filter:brightness(1.08)}
.genrow button:active,.more-btn:active{transform:translateY(1px)}

/* ---------- results grid ---------- */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;
}
.tile{
  border:1px solid var(--hair);border-radius:6px;overflow:hidden;
  background:var(--ink);cursor:pointer;position:relative;
  transition:transform .16s ease,border-color .16s,box-shadow .16s;
}
.tile:hover{
  transform:translateY(-3px);border-color:rgba(125,226,255,.4);
  box-shadow:0 14px 30px -18px rgba(125,226,255,.4);
}
.tile svg.logo{width:100%;height:auto;display:block}

.more-row{display:flex;justify-content:center;margin-top:30px}
.more-btn{background:transparent;color:var(--text);border:1px solid var(--hair-2)}

.empty{grid-column:1/-1;text-align:center;color:var(--dim);padding:60px 20px}

/* ---------- logo entrance animations (replay on tile hover) ---------- */
.logo .lockup{transform-box:view-box;transform-origin:center}
.play .logo.anim-fade .lockup{animation:aFade .7s cubic-bezier(.2,.7,.2,1) both}
.play .logo.anim-rise .lockup{animation:aRise .7s cubic-bezier(.2,.7,.2,1) both}
.play .logo.anim-drop .lockup{animation:aDrop .7s cubic-bezier(.2,.7,.2,1) both}
.play .logo.anim-rotate .lockup{animation:aRotate .8s cubic-bezier(.2,.7,.2,1) both}
.play .logo.anim-pop .lockup{animation:aPop .7s cubic-bezier(.34,1.56,.64,1) both}
.play .logo.anim-wipe{clip-path:inset(0 100% 0 0);animation:aWipe .7s cubic-bezier(.6,0,.2,1) both}
.play .logo.anim-blur .lockup{animation:aBlur .8s cubic-bezier(.2,.7,.2,1) both}
.play .logo.anim-arrive .lockup{animation:aArrive .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes aFade{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes aRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes aDrop{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
@keyframes aRotate{from{opacity:0;transform:rotate(-16deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes aPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes aWipe{to{clip-path:inset(0 0 0 0)}}
@keyframes aBlur{from{opacity:0;filter:blur(8px);transform:scale(1.15)}to{opacity:1;filter:none;transform:none}}
@keyframes aArrive{from{opacity:0;transform:scale(1.35)}60%{filter:blur(.3px)}to{opacity:1;transform:none}}

/* ---------- modal ---------- */
#modal{
  border:1px solid var(--hair-2);border-radius:8px;background:var(--ink);color:var(--text);
  padding:0;max-width:560px;width:calc(100% - 32px);
}
#modal::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.modal-head{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--hair)}
.modal-meta{color:var(--faint);flex:1}
.modal-x{background:none;border:none;color:var(--dim);font-size:22px;cursor:pointer;line-height:1}
.modal-x:hover{color:var(--text)}
.modal-preview{padding:20px}
.modal-preview svg.logo{width:100%;height:auto;display:block;border-radius:8px}
.modal-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 18px}
.modal-actions .ghost{background:transparent;color:var(--text);border:1px solid var(--hair-2)}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--hair);color:var(--faint);
  padding:22px 24px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;
}

@media (prefers-reduced-motion:reduce){
  .mark.spin,.mark.arrive .s1,.mark.arrive .s2,.mark.arrive .s3,
  .mark.arrive .s4,.mark.arrive .s5,.mark.arrive .swoop,
  .play .logo .lockup,.play .logo.anim-wipe{animation:none;clip-path:none}
}